diff --git a/src/cms/cms.js b/src/cms/cms.js
index aedded28..c56b3946 100644
--- a/src/cms/cms.js
+++ b/src/cms/cms.js
@@ -20,7 +20,7 @@ CMS.registerWidget("url-image", UrlImageControl, UrlImagePreview);
 
 CMS.registerPreviewTemplate("index", IndexPagePreview);
 CMS.registerPreviewTemplate("about", AboutPagePreview);
-CMS.registerPreviewTemplate("idea", IdeaPostPreview);
+CMS.registerPreviewTemplate("ideas", IdeaPostPreview);
 
 // Decap exposes a number of lifecycle stages we can hook into and register.
 CMS.registerEventListener({
diff --git a/src/cms/preview-templates/IdeaPostPreview.js b/src/cms/preview-templates/IdeaPostPreview.js
deleted file mode 100644
index d3d35171..00000000
--- a/src/cms/preview-templates/IdeaPostPreview.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-
-import PropTypes from "prop-types";
-
-import { IdeaPostTemplate } from "../../templates/idea-post";
-
-const IdeaPostPreview = ({ entry, widgetFor }) => {
-    const tags = entry.getIn(["data", "tags"]);
-    return (
-        <IdeaPostTemplate
-            content={widgetFor("body")}
-            description={entry.getIn(["data", "description"])}
-            tags={tags && tags.toJS()}
-            title={entry.getIn(["data", "title"])}
-        />
-    );
-};
-
-IdeaPostPreview.propTypes = {
-    entry: PropTypes.shape({
-        getIn: PropTypes.func,
-    }),
-    widgetFor: PropTypes.func,
-};
-
-export default IdeaPostPreview;
diff --git a/src/cms/preview-templates/IdeaPostPreview.tsx b/src/cms/preview-templates/IdeaPostPreview.tsx
new file mode 100644
index 00000000..56eba3f7
--- /dev/null
+++ b/src/cms/preview-templates/IdeaPostPreview.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+
+import { IdeaPostTemplate } from "../../templates/idea-post";
+import { IdeaPostNode } from "../../types";
+import { ImmutableLike, fromImmutable } from "../utils/immutable";
+
+interface PreviewProps {
+    entry?: ImmutableLike;
+}
+
+const previewBannerStyle: React.CSSProperties = {
+    padding: "8px 12px",
+    marginBottom: "12px",
+    backgroundColor: "#fff8e1",
+    border: "1px solid #ffe082",
+    borderRadius: "4px",
+    fontSize: "16px",
+    color: "#6d4c00",
+};
+
+const placeholderStyle: React.CSSProperties = {
+    border: "1.5px dashed #ffe082",
+    borderRadius: "4px",
+    padding: "16px 20px",
+    backgroundColor: "#fffdf5",
+    color: "#6d4c00",
+    fontSize: "14px",
+    lineHeight: 1.6,
+};
+
+const ResourcePlaceholder: React.FC = () => (
+    <div className="idea-post-section">
+        <div style={placeholderStyle}>
+            <p style={{ margin: 0 }}>
+                Resource details are loaded from related entries at build time
+                and cannot be previewed here. The published page will display
+                full resource cards with descriptions and links.
+            </p>
+        </div>
+    </div>
+);
+
+const IdeaPostPreview: React.FC<PreviewProps> = ({ entry }) => {
+    const raw = entry?.get("data");
+    const data = fromImmutable<IdeaPostNode>(raw) ?? ({} as IdeaPostNode);
+
+    return (
+        <div>
+            <div style={previewBannerStyle}>
+                Preview approximation — because of the way this site it built,
+                it's hard to preview the entire context of the way the idea will
+                sit in the layout, and we can't access relational data (like the
+                relevant resources). So this preview is an overal look of the
+                initial proposal, title, etc.
+            </div>
+            <IdeaPostTemplate
+                title={data.title}
+                authors={data.authors ?? []}
+                introduction={data.introduction}
+                tags={[]}
+                nextSteps={data.nextSteps}
+                publication={data.publication}
+                preliminaryFindings={data.preliminaryFindings}
+                slug={data.slug ?? ""}
+                date={data.date ?? null}
+                description={data.description ?? null}
+                resources={[]}
+                relatedIdeas={[]}
+            />
+            <div className="idea-post">
+                <ResourcePlaceholder />
+            </div>
+        </div>
+    );
+};
+
+export default IdeaPostPreview;
diff --git a/src/components/ExpandableDescriptionView.tsx b/src/components/ExpandableDescriptionView.tsx
index 6ce4bb7b..7b1b7078 100644
--- a/src/components/ExpandableDescriptionView.tsx
+++ b/src/components/ExpandableDescriptionView.tsx
@@ -3,15 +3,9 @@ import React from "react";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 import { Button } from "antd";
 
+import "../style/idea-post.css";
 import { CustomReactMarkdown } from "./CustomReactMarkdown";
 
-const {
-    backBar,
-    container,
-    mainTitle,
-    sectionText,
-} = require("../style/idea-post.module.css");
-
 interface ExpandedDescriptionViewProps {
     content: string;
     label: string;
@@ -27,14 +21,17 @@ interface ExpandedDescriptionViewProps {
 export const ExpandedDescriptionView: React.FC<
     ExpandedDescriptionViewProps
 > = ({ content, label, onBack }) => (
-    <div className={container}>
-        <div className={backBar}>
+    <div className="idea-post">
+        <div className="idea-post-back-bar">
             <Button icon={<ArrowLeftOutlined />} onClick={onBack}>
                 Back to idea
             </Button>
         </div>
-        <h3 className={mainTitle}>{label}</h3>
-        <CustomReactMarkdown className={sectionText} content={content} />
+        <h3 className="idea-post-main-title">{label}</h3>
+        <CustomReactMarkdown
+            className="idea-post-section-text"
+            content={content}
+        />
     </div>
 );
 
diff --git a/src/components/ExpandableText.tsx b/src/components/ExpandableText.tsx
index 2cd7c453..e5a64971 100644
--- a/src/components/ExpandableText.tsx
+++ b/src/components/ExpandableText.tsx
@@ -3,11 +3,10 @@ import React from "react";
 import { Button } from "antd";
 
 import { MAX_RESOURCE_DESCRIPTION_LENGTH } from "../constants";
+import "../style/idea-post.css";
 import { truncateAtWord } from "../utils/utils";
 import { CustomReactMarkdown } from "./CustomReactMarkdown";
 
-const { sectionText } = require("../style/idea-post.module.css");
-
 interface ExpandableTextProps {
     fullText?: string | null;
     onExpand?: () => void;
@@ -30,7 +29,10 @@ export const ExpandableText: React.FC<ExpandableTextProps> = ({
     // shortText only — show as-is
     if (shortText && !fullText) {
         return (
-            <CustomReactMarkdown className={sectionText} content={shortText} />
+            <CustomReactMarkdown
+                className={"idea-post-section-text"}
+                content={shortText}
+            />
         );
     }
 
@@ -41,7 +43,7 @@ export const ExpandableText: React.FC<ExpandableTextProps> = ({
         return (
             <>
                 <CustomReactMarkdown
-                    className={sectionText}
+                    className={"idea-post-section-text"}
                     content={
                         needsTruncation
                             ? truncateAtWord(
@@ -63,7 +65,10 @@ export const ExpandableText: React.FC<ExpandableTextProps> = ({
     // Both — show shortText, "See more" opens full-page view
     return (
         <>
-            <CustomReactMarkdown className={sectionText} content={shortText!} />
+            <CustomReactMarkdown
+                className={"idea-post-section-text"}
+                content={shortText!}
+            />
             {fullText && onExpand && (
                 <Button type="link" onClick={onExpand}>
                     See more
diff --git a/src/components/MaterialsAndMethods.tsx b/src/components/MaterialsAndMethods.tsx
index 061496f3..e725a2d7 100644
--- a/src/components/MaterialsAndMethods.tsx
+++ b/src/components/MaterialsAndMethods.tsx
@@ -1,11 +1,10 @@
 import React from "react";
 
 import { RESOURCE_TYPES } from "../constants/resourceTypes";
+import "../style/idea-post.css";
 import { ResourceNode } from "../types";
 import ResourceItem from "./ResourceItem";
 
-const { section, sectionTitle } = require("../style/idea-post.module.css");
-
 interface MaterialsAndMethodsProps {
     resources: ResourceNode[];
     onExpandDescription?: (
@@ -48,8 +47,8 @@ export const MaterialsAndMethodsComponent: React.FC<
     return (
         <>
             {datasets.length > 0 && (
-                <div id="datasets" className={section}>
-                    <h4 className={sectionTitle}>Datasets</h4>
+                <div id="datasets" className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>Datasets</h4>
                     {datasets.map((dataset, index) => (
                         <ResourceItem
                             key={index}
@@ -73,8 +72,8 @@ export const MaterialsAndMethodsComponent: React.FC<
             )}
 
             {cellLines.length > 0 && (
-                <div id="cell-lines" className={section}>
-                    <h4 className={sectionTitle}>Cell Lines</h4>
+                <div id="cell-lines" className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>Cell Lines</h4>
                     {cellLines.map((item, index) => (
                         <ResourceItem
                             key={index}
@@ -86,8 +85,8 @@ export const MaterialsAndMethodsComponent: React.FC<
             )}
 
             {protocols.length > 0 && (
-                <div id="protocols" className={section}>
-                    <h4 className={sectionTitle}>Protocols</h4>
+                <div id="protocols" className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>Protocols</h4>
                     {protocols.map((item, index) => (
                         <ResourceItem
                             key={index}
@@ -99,8 +98,10 @@ export const MaterialsAndMethodsComponent: React.FC<
             )}
 
             {softwareTools.length > 0 && (
-                <div id="software-tools" className={section}>
-                    <h4 className={sectionTitle}>Software Tools</h4>
+                <div id="software-tools" className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>
+                        Software Tools
+                    </h4>
                     {softwareTools.map((tool, index) => (
                         <ResourceItem
                             key={index}
diff --git a/src/style/idea-post.module.css b/src/style/idea-post.css
similarity index 72%
rename from src/style/idea-post.module.css
rename to src/style/idea-post.css
index d38b47e2..8b766faf 100644
--- a/src/style/idea-post.module.css
+++ b/src/style/idea-post.css
@@ -1,75 +1,79 @@
-/* Offset anchor scroll targets so the sticky header doesn't cover them */
-:global([id]) {
-    scroll-margin-top: 80px;
-}
-
-.container {
+.idea-post {
+    font-family: "Raleway", sans-serif;
     border: none;
     border-radius: 0px;
     padding: 12px 24px 12px 48px;
-    background-color: var(--white);
+    background-color: var(--WHITE);
     line-height: 1.7;
+
     a {
         overflow-wrap: break-word;
     }
-    .section {
+
+    [id] {
+        scroll-margin-top: 80px;
+    }
+
+    .idea-post-section {
         margin-top: 1rem;
         margin-bottom: 1rem;
     }
-    .mainTitle {
+
+    .idea-post-main-title {
         font-size: 2rem;
         color: var(--primary-color);
         line-height: 1.5;
+
         @media screen and (max-width: 576px) {
             font-size: 1.5rem;
             line-height: 1;
         }
     }
-    .authorsClass {
+
+    .idea-post-authors {
         margin-top: 0px;
         margin-bottom: 0px;
         font-size: 1rem;
         font-weight: 500;
         color: rgb(from var(--primary-color) r g b / 0.9);
+
         @media screen and (max-width: 576px) {
-            margin-top: .5rem;
+            margin-top: 0.5rem;
         }
     }
-    h4.sectionTitle {
+
+    h4.idea-post-section-title {
         margin-bottom: 0.5rem;
         margin-top: 1rem;
     }
-    h3.sectionTitle {
+
+    h3.idea-post-section-title {
         font-size: 1.7rem;
         font-weight: 600;
         margin-top: 1.5rem;
         margin-bottom: 1.75rem;
     }
 
-    .actionIcons {
-        font-size: 16px;
-    }
-
-    .taglist {
+    .idea-post-taglist {
         list-style: none;
         padding: 0;
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
-    }
 
-    .taglist li {
-        display: inline-block;
+        li {
+            display: inline-block;
+        }
     }
 
-    .proposalTitle {
+    .idea-post-proposal-title {
         font-size: 1.5rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
         margin-top: 0.5rem;
     }
 
-    .proposal {
+    .idea-post-proposal {
         font-size: 16px;
         font-weight: 500;
         border: 1px solid #cbcbcc;
@@ -77,28 +81,21 @@
         border-radius: 4px;
         padding: 12px;
         line-height: 1.5;
+
         ul {
             padding-inline-start: 20px;
         }
     }
 
-    .sectionBorder {
-        border: 1px solid #cbcbcc;
-        border-radius: 4px;
-        padding: 12px;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-    }
-
-    .sectionText {
+    .idea-post-section-text {
         font-size: 16px;
         font-weight: 500;
         line-height: 1.5;
-               margin-top: 1rem;
+        margin-top: 1rem;
         margin-bottom: 1rem;
     }
 
-    .backBar {
+    .idea-post-back-bar {
         position: sticky;
         top: 64px;
         z-index: 10;
diff --git a/src/templates/idea-post.tsx b/src/templates/idea-post.tsx
index 716e24d4..b382a83a 100644
--- a/src/templates/idea-post.tsx
+++ b/src/templates/idea-post.tsx
@@ -14,20 +14,9 @@ import { PageNavSiderMenuItem } from "../components/PageNavSider";
 import { TagPopover } from "../components/TagPopover";
 import { RESOURCE_TYPES } from "../constants/resourceTypes";
 import { useExpandedContent } from "../hooks/useExpandedContent";
+import "../style/idea-post.css";
 import { IdeaPostNode, IdeaPostQuery } from "../types";
 
-const {
-    authorsClass,
-    container,
-    mainTitle,
-    proposal,
-    proposalTitle,
-    section,
-    sectionText,
-    sectionTitle,
-    taglist,
-} = require("../style/idea-post.module.css");
-
 export const IdeaPostTemplate: React.FC<
     IdeaPostNode & {
         onExpandDescription?: (
@@ -51,7 +40,7 @@ export const IdeaPostTemplate: React.FC<
 }) => {
     const getTagList = (tags: readonly string[]) => {
         return (
-            <ul className={taglist}>
+            <ul className={"idea-post-taglist"}>
                 {tags.map((tag) => (
                     <li key={tag}>
                         <TagPopover tag={tag} currentSlug={slug} />
@@ -66,7 +55,7 @@ export const IdeaPostTemplate: React.FC<
             return null;
         }
         return (
-            <p id="authors" className={authorsClass}>
+            <p id="authors" className={"idea-post-authors"}>
                 {" "}
                 {authors.join(", ")}
             </p>
@@ -80,42 +69,49 @@ export const IdeaPostTemplate: React.FC<
     const hasRelatedIdeas = relatedIdeas && relatedIdeas.length > 0;
 
     return (
-        <div className={container}>
+        <div className="idea-post">
             <div>
                 <Flex
                     justify="space-between"
                     align="center"
-                    className={sectionTitle}
+                    className={"idea-post-section-title"}
                 >
-                    <h3 id="title" className={mainTitle}>
+                    <h3 id="title" className={"idea-post-main-title"}>
                         {title}
                     </h3>
                 </Flex>
                 {getAuthorsList(authors)}
                 {introduction && (
-                    <div id="introduction" className={section}>
+                    <div id="introduction" className={"idea-post-section"}>
                         <CustomReactMarkdown
-                            className={sectionText}
+                            className={"idea-post-section-text"}
                             content={introduction}
                         />
                     </div>
                 )}
                 {tags && tags.length ? <div>{getTagList(tags)}</div> : null}
                 {nextSteps && (
-                    <div id="proposal" className={proposal}>
-                        <h4 className={proposalTitle}>Project proposal:</h4>
+                    <div id="proposal" className={"idea-post-proposal"}>
+                        <h4 className={"idea-post-proposal-title"}>
+                            Project proposal:
+                        </h4>
                         <CustomReactMarkdown
-                            className={sectionText}
+                            className={"idea-post-section-text"}
                             content={nextSteps}
                         />
                     </div>
                 )}
-                <h3 id="relevant-resources" className={sectionTitle}>
+                <h3
+                    id="relevant-resources"
+                    className={"idea-post-section-title"}
+                >
                     Relevant Resources{" "}
                 </h3>
                 {publication && (
                     <div id="publication">
-                        <h4 className={sectionTitle}>Publications </h4>
+                        <h4 className={"idea-post-section-title"}>
+                            Publications{" "}
+                        </h4>
                         {/* TODO I think it only makes sense to have publications that are links */}
                         <a> {publication}</a>
                     </div>
@@ -123,17 +119,21 @@ export const IdeaPostTemplate: React.FC<
             </div>
 
             {hasPreliminaryFindings && (
-                <div id="preliminary-findings" className={section}>
-                    <h4 className={sectionTitle}>Preliminary Findings</h4>
+                <div id="preliminary-findings" className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>
+                        Preliminary Findings
+                    </h4>
                     {preliminaryFindings.summary && (
                         <CustomReactMarkdown
-                            className={sectionText}
+                            className={"idea-post-section-text"}
                             content={preliminaryFindings.summary}
                         />
                     )}
                     {hasFigures && (
                         <>
-                            <h4 className={sectionTitle}>Figures</h4>
+                            <h4 className={"idea-post-section-title"}>
+                                Figures
+                            </h4>
                             <FigureGallery
                                 figures={preliminaryFindings.figures}
                             />
@@ -149,8 +149,10 @@ export const IdeaPostTemplate: React.FC<
                 />
             )}
             {hasRelatedIdeas && (
-                <div className={section}>
-                    <h4 className={sectionTitle}>Related Ideas:</h4>
+                <div className={"idea-post-section"}>
+                    <h4 className={"idea-post-section-title"}>
+                        Related Ideas:
+                    </h4>
                     {relatedIdeas!.map((idea) => (
                         <div key={idea.slug || idea.title}>
                             <Link to={idea.slug || ""}>