diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05d72dad..132ce9ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.12.0] - 2023-11-17
+
+### Added
+
+- Add the issue release/white paper page [#210](https://github.com/policy-design-lab/pdl-frontend/issues/210)
+- Add iFrame component to the release/white paper page [#214](https://github.com/policy-design-lab/pdl-frontend/issues/214)
+
 ## [0.11.0] - 2023-11-08
 
 ### Added
diff --git a/package-lock.json b/package-lock.json
index 791a712b..8a5b9383 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "policy-design-lab",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 6924fbdb..96e73da8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "policy-design-lab",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "the front end of policy design lab",
   "repository": "https://github.com/policy-design-lab/pdl-frontend",
   "main": "src/app.tsx",
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index edf3b1bb..71627bb0 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -16,7 +16,11 @@ import { Link } from "react-router-dom";
 import PDLLogo from "./PDLLogo";
 
 const drawerWidth = 240;
-const navItems = ["HOME", "EXPLORE FARM BILL DATA", "ABOUT PDL"];
+const navItems = [
+    { title: "HOME", link: "/" },
+    { title: "ISSUES & WHITE PAPERS", link: "/issue_whitepaper" },
+    { title: "ABOUT PDL" }
+];
 export default function NavBar({
     bkColor = "rgba(255, 255, 255, 1)",
     ftColor = "rgba(255, 255, 255, 1)",
@@ -47,9 +51,15 @@ export default function NavBar({
             <Divider />
             <List>
                 {navItems.map((item) => (
-                    <ListItem key={item} disablePadding>
+                    <ListItem key={item.title} disablePadding>
                         <ListItemButton sx={{ textAlign: "center" }}>
-                            <ListItemText primary={item} />
+                            {item.link ? (
+                                // <a href={item.link}>
+                                <ListItemText primary={item.title} />
+                            ) : (
+                                // </a>
+                                <ListItemText primary={item.title} />
+                            )}
                         </ListItemButton>
                     </ListItem>
                 ))}
@@ -92,16 +102,21 @@ export default function NavBar({
                         </Button>
                         <Box sx={{ display: { xs: "none", sm: "block" } }}>
                             {navItems.map((item) => {
-                                if (item === "HOME") {
+                                if (item.link) {
                                     return (
-                                        <Button component={Link} to="/" key={item} sx={{ color: ftColor }}>
-                                            {item}
+                                        <Button
+                                            component={Link}
+                                            to={item.link}
+                                            key={item.title}
+                                            sx={{ color: ftColor }}
+                                        >
+                                            {item.title}
                                         </Button>
                                     );
                                 }
                                 return (
-                                    <Button key={item} sx={{ color: ftColor }}>
-                                        {item}
+                                    <Button key={item.title} sx={{ color: ftColor }}>
+                                        {item.title}
                                     </Button>
                                 );
                             })}
diff --git a/src/components/issueWhitePaper/cardIframe.tsx b/src/components/issueWhitePaper/cardIframe.tsx
new file mode 100644
index 00000000..d474d22e
--- /dev/null
+++ b/src/components/issueWhitePaper/cardIframe.tsx
@@ -0,0 +1,102 @@
+import { Button, Grid, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import * as React from "react";
+import DownloadIcon from "@mui/icons-material/Download";
+
+export default function CardIFrame({
+    title,
+    author,
+    date,
+    link,
+    iframeTitle,
+    iframeLink,
+    iframeWidth,
+    iframeHeight
+}): JSX.Element {
+    const useStyles = makeStyles(() => ({
+        downloadButton: {
+            "&:hover": {
+                backgroundColor: "transparent"
+            }
+        }
+    }));
+    const classes = useStyles();
+
+    return (
+        <Grid container className="paperCard" sx={{ display: "flex", justifyContent: "space-between" }}>
+            <Grid container xs={12} sm={12}>
+                <Grid className="inCardContainer mainItems" container xs={12} sm={12}>
+                    <Grid
+                        container
+                        xs={12}
+                        sm={12}
+                        sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}
+                    >
+                        <Grid item xs={12} sm={9}>
+                            <Typography variant="h3" component="div">
+                                {title}
+                            </Typography>
+                        </Grid>
+                        <Grid item xs={12} sm={3} sx={{ display: "flex", justifyContent: "end" }}>
+                            <a href={link} target="_blank" rel="noopener noreferrer">
+                                <Button
+                                    variant="contained"
+                                    className={classes.downloadButton}
+                                    sx={{
+                                        border: "2px solid #2F7164",
+                                        backgroundColor: "transparent",
+                                        color: "#2F7164",
+                                        minWidth: 15,
+                                        minHeight: 4,
+                                        borderRadius: 0
+                                    }}
+                                >
+                                    <Typography variant="subtitle1">
+                                        <strong>Download PDF</strong>
+                                    </Typography>{" "}
+                                    <DownloadIcon sx={{ mx: 1, my: 2 }} />
+                                </Button>
+                            </a>
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid className="inCardContainer subItems" container xs={12} sm={12} sx={{ display: "flex" }}>
+                    <Grid item xs={12} sm={6}>
+                        <Typography variant="body1" component="div">
+                            Author: {author}
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} sm={6} sx={{ display: "flex", justifyContent: "end" }}>
+                        <Typography variant="body1" component="div">
+                            Date: {date}
+                        </Typography>
+                    </Grid>
+                </Grid>
+                <Grid item xs={12} sm={12} className="inCardContainer subItems" sx={{ justifyContent: "center" }}>
+                    <Typography variant="body1" component="div">
+                        As Congress considers reauthorizing the Farm Bill, vital resources that are available to farmers
+                        and ranchers today are at risk — specifically the $18 billion investment from the Inflation
+                        Reduction Act (IRA) for the U.S. Department of Agriculture’s (USDA) popular conservation
+                        programs. This issue brief provides a first look at what farmers stand to lose in each state if
+                        these investments are eliminated by Congress.
+                    </Typography>
+                </Grid>
+                <Grid
+                    className="inCardContainer subItems"
+                    container
+                    xs={12}
+                    sm={12}
+                    sx={{ display: "flex", justifyContent: "center" }}
+                >
+                    <iframe
+                        title={iframeTitle}
+                        width={iframeWidth}
+                        height={iframeHeight}
+                        src={iframeLink}
+                        allowFullScreen
+                    />
+                </Grid>
+            </Grid>
+        </Grid>
+    );
+}
diff --git a/src/components/issueWhitePaper/cardPaper.tsx b/src/components/issueWhitePaper/cardPaper.tsx
new file mode 100644
index 00000000..78269de5
--- /dev/null
+++ b/src/components/issueWhitePaper/cardPaper.tsx
@@ -0,0 +1,72 @@
+import { Button, Grid, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import * as React from "react";
+import DownloadIcon from "@mui/icons-material/Download";
+
+export default function CardPaper({ title, author, date, link }): JSX.Element {
+    const useStyles = makeStyles(() => ({
+        downloadButton: {
+            "&:hover": {
+                backgroundColor: "transparent"
+            }
+        }
+    }));
+    const classes = useStyles();
+    return (
+        <Grid
+            container
+            className="paperCard"
+            sx={{ display: "flex", alignItems: "end", justifyContent: "space-between" }}
+        >
+            <Grid container xs={12} sm={7}>
+                <Grid className="inCardContainer mainItems" container xs={12} sm={12}>
+                    <Grid item xs={12} sm={12}>
+                        <Typography variant="h3" component="div">
+                            {title}
+                        </Typography>
+                    </Grid>
+                </Grid>
+                <Grid
+                    className="inCardContainer subItems"
+                    container
+                    xs={12}
+                    sm={8}
+                    sx={{ display: "flex", justifyContent: "space-between" }}
+                >
+                    <Grid item xs={12} sm={8}>
+                        <Typography variant="body1" component="div">
+                            Author: {author}
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} sm={4}>
+                        <Typography variant="body1" component="div">
+                            Date: {date}
+                        </Typography>
+                    </Grid>
+                </Grid>
+            </Grid>
+
+            <Grid container xs={12} sm={5} sx={{ display: "flex", justifyContent: "flex-end" }}>
+                <a href={link} target="_blank" rel="noopener noreferrer">
+                    <Button
+                        variant="contained"
+                        className={classes.downloadButton}
+                        sx={{
+                            border: "2px solid #2F7164",
+                            backgroundColor: "transparent",
+                            color: "#2F7164",
+                            minWidth: 15,
+                            minHeight: 4,
+                            borderRadius: 0
+                        }}
+                    >
+                        <Typography variant="subtitle1">
+                            <strong>Download PDF</strong>
+                        </Typography>{" "}
+                        <DownloadIcon sx={{ mx: 1, my: 2 }} />
+                    </Button>
+                </a>
+            </Grid>
+        </Grid>
+    );
+}
diff --git a/src/files/ISSUE.pdf b/src/files/ISSUE.pdf
new file mode 100644
index 00000000..c67e7093
Binary files /dev/null and b/src/files/ISSUE.pdf differ
diff --git a/src/main.tsx b/src/main.tsx
index 6625aeb0..f6c9d628 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -9,6 +9,7 @@ import SNAPPage from "./pages/SNAPPage";
 import TitleIPage from "./pages/TitleIPage";
 import CropInsurancePage from "./pages/CropInsurancePage";
 import ACEPPage from "./pages/ACEPPage";
+import IssueWhitePaperPage from "./pages/IssueWhitePaperPage";
 
 const ScrollToTop = (props: any) => {
     const location = useLocation();
@@ -32,6 +33,7 @@ export default function Main(): JSX.Element {
                 <Route path="/title1" element={<TitleIPage />} />
                 <Route path="/cropinsurance" element={<CropInsurancePage />} />
                 <Route path="/snap" element={<SNAPPage />} />
+                <Route path="/issue_whitepaper" element={<IssueWhitePaperPage />} />
             </Routes>
         </ScrollToTop>
     );
diff --git a/src/pages/IssueWhitePaperPage.tsx b/src/pages/IssueWhitePaperPage.tsx
new file mode 100644
index 00000000..c2f8560d
--- /dev/null
+++ b/src/pages/IssueWhitePaperPage.tsx
@@ -0,0 +1,162 @@
+// RELEASE NOTE Nov 16: hide issue/switch panel because client only has one issue brief available. Unhide this after white paper is available.
+import * as React from "react";
+import { Box, createTheme, ThemeProvider, Typography, Grid, Tabs, Tab } from "@mui/material";
+import NavBar from "../components/NavBar";
+import "../styles/issueWhitePaper.css";
+import Footer from "../components/Footer";
+import CardPaper from "../components/issueWhitePaper/cardPaper";
+import CardIFrame from "../components/issueWhitePaper/cardIframe";
+import PDF from "../files/ISSUE.pdf";
+
+export default function IssueWhitePaperPage(): JSX.Element {
+    const [tab, setTab] = React.useState(0);
+
+    const defaultTheme = createTheme({
+        spacing: 8
+    });
+    const switchBarTable = (event, newTab) => {
+        if (newTab !== null) {
+            setTab(newTab);
+        }
+    };
+    const iframeWidth = window.innerWidth * 0.9;
+    const iframeHeight = window.innerWidth > 1679 ? window.innerHeight * 0.92 : window.innerHeight * 0.95;
+
+    return (
+        <ThemeProvider theme={defaultTheme}>
+            <Box sx={{ width: "100%" }}>
+                <Box sx={{ position: "fixed", zIndex: 1400, width: "100%" }}>
+                    <NavBar bkColor="#2F7164" ftColor="#FFFFFF" logo="dark" />
+                </Box>
+                <Box
+                    className="MainContent"
+                    sx={{
+                        position: "relative",
+                        top: 0,
+                        width: "90%",
+                        m: "0 auto",
+                        pt: 10,
+                        pb: 1
+                    }}
+                >
+                    <Box component="div">
+                        <Grid
+                            container
+                            columns={{ xs: 12 }}
+                            sx={{
+                                pt: 3.5,
+                                display: "none"
+                            }}
+                        >
+                            <Tabs
+                                className="titleTabGroup"
+                                value={tab}
+                                onChange={switchBarTable}
+                                sx={{
+                                    "& .MuiTabs-textColorPrimary": {
+                                        color: "#00000080"
+                                    },
+                                    "& .MuiTabs-indicator": {
+                                        backgroundColor: "#00000080",
+                                        color: "pink"
+                                    }
+                                }}
+                            >
+                                <Tab
+                                    className="titleTab"
+                                    value={0}
+                                    label="ISSUE BRIEF"
+                                    sx={{
+                                        "textTransform": "uppercase",
+                                        "fontSize": 24,
+                                        "fontWeight": 400,
+                                        "&.Mui-selected": {
+                                            color: "#000000DE"
+                                        }
+                                    }}
+                                />
+                                <Tab
+                                    className="titleTab"
+                                    value={1}
+                                    label="WHITE PAPERS"
+                                    sx={{
+                                        "textTransform": "uppercase",
+                                        "fontSize": 24,
+                                        "fontWeight": 400,
+                                        "&.Mui-selected": {
+                                            color: "#000000DE"
+                                        }
+                                    }}
+                                />
+                            </Tabs>
+                        </Grid>
+                        <Grid
+                            container
+                            columns={{ xs: 12 }}
+                            sx={{
+                                marginTop: 2,
+                                borderTop: "1px #CBCBCB solid"
+                            }}
+                        >
+                            <Box sx={{ display: tab !== 0 ? "none" : "div" }}>
+                                <Grid
+                                    container
+                                    columns={{ xs: 12 }}
+                                    className="FullListContainer"
+                                    sx={{
+                                        display: "flex",
+                                        justifyContent: "flex-start"
+                                    }}
+                                >
+                                    <Grid
+                                        container
+                                        xs={12}
+                                        justifyContent="flex-start"
+                                        sx={{ display: "flex", width: "100%" }}
+                                    >
+                                        <CardIFrame
+                                            title="ISSUE BRIEF: What Farmers Stand to Lose in the Farm Bill If Congress Eliminates Conservation Investments"
+                                            iframeTitle="What Farmers Stand to Lose in the Farm Bill If Congress Eliminates Conservation Investments"
+                                            author="Professor Jonathan Coppess"
+                                            date="Nov. 15 2023"
+                                            link={PDF}
+                                            iframeLink="https://datawrapper.dwcdn.net/jeiT4/5/"
+                                            iframeWidth={iframeWidth}
+                                            iframeHeight={iframeHeight}
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Box>
+                            <Box sx={{ display: tab !== 1 ? "none" : "div" }}>
+                                <Grid
+                                    container
+                                    columns={{ xs: 12 }}
+                                    className="FullListContainer"
+                                    sx={{
+                                        display: "flex",
+                                        justifyContent: "flex-start"
+                                    }}
+                                >
+                                    <Grid
+                                        container
+                                        xs={12}
+                                        justifyContent="flex-start"
+                                        sx={{ display: "flex", width: "100%" }}
+                                    />
+                                </Grid>
+                            </Box>
+                        </Grid>
+                    </Box>
+                </Box>
+                <Box sx={{ display: "flex", justifyContent: "center" }}>
+                    <Typography
+                        sx={{ color: "#000000DE", fontSize: "1em", mt: 5, fontStyle: "italic", fontWeight: "400" }}
+                    >
+                        More publication coming soon ...
+                    </Typography>
+                </Box>
+                <Footer />
+            </Box>
+        </ThemeProvider>
+    );
+}
diff --git a/src/styles/issueWhitePaper.css b/src/styles/issueWhitePaper.css
new file mode 100644
index 00000000..82454364
--- /dev/null
+++ b/src/styles/issueWhitePaper.css
@@ -0,0 +1,34 @@
+
+.titleTabGroup .Mui-selected{
+    font-weight: 700 !important;
+}
+.titleTab {
+  padding: 1.5em 1em;
+}
+.titleTab:not(:last-child){
+  border-right: 1px #CBCBCB solid;
+}
+.MuiTabs-indicator{
+  display: none;
+}
+.paperCard{
+  padding: 3em 0 1.5em 0;
+  font-family: Montserrat;
+  border-bottom: 1px solid var(--light-other-divider, rgba(0, 0, 0, 0.12));
+}
+.inCardContainer{
+  margin-bottom: 1.25em;
+  font-weight: 500;
+}
+
+/* TBD: move this to use variant */
+.mainItems{
+  font-size: 1.5em;
+  /* text-transform: uppercase; */
+}
+.subItems{
+  font-size: 1em;
+  display: flex;
+  color: #00000080;
+  margin: 1.5rem auto;
+}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 8694988b..e727c583 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -49,3 +49,8 @@ declare module "*.css" {
     const classes: { readonly [key: string]: string };
     export default classes;
 }
+
+declare module "*.pdf" {
+    const classes: { readonly [key: string]: string };
+    export default classes;
+}
diff --git a/webpack.common.js b/webpack.common.js
index aad4b241..d59bfa5a 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -34,7 +34,8 @@ module.exports = {
                             publicPath: '../'
                         }
                     },
-                    'css-loader'
+                    'css-loader',
+                    
                 ]
             },
             {
@@ -42,7 +43,7 @@ module.exports = {
                 loader: 'svg-inline-loader'
             },
             {
-                test: /\.(jpg|jpeg|png|eot|ttf|woff|woff2)$/,
+                test: /\.(jpg|jpeg|png|eot|ttf|woff|woff2|pdf)$/,
                 use: [
                     {
                         loader: 'file-loader',