diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad3d50c8..b6d143f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
- Fix cut off text on search bar dropdown
- Fix broken link on the About page
- SFR-2008: Automate License Page Headers and Sub-Headers
+- Add error page for /read links with invalid source
## [0.18.1]
diff --git a/src/components/ReaderLayout/ReaderLayout.tsx b/src/components/ReaderLayout/ReaderLayout.tsx
index cca41102..102484f0 100644
--- a/src/components/ReaderLayout/ReaderLayout.tsx
+++ b/src/components/ReaderLayout/ReaderLayout.tsx
@@ -26,6 +26,7 @@ import Link from "../Link/Link";
import { addTocToManifest } from "@nypl/web-reader";
import Loading from "../Loading/Loading";
import { trackCtaClick } from "~/src/lib/adobe/Analytics";
+import NotFound404 from "~/src/pages/404";
const origin =
typeof window !== "undefined" && window.location?.origin
@@ -68,6 +69,10 @@ const ReaderLayout: React.FC<{
const isEmbed = MediaTypes.embed.includes(link.media_type);
const isRead = MediaTypes.read.includes(link.media_type);
+ if (!isEmbed && !isRead) {
+ return NotFound404();
+ }
+
const pdfWorkerSrc = `${origin}/pdf-worker/pdf.worker.min.js`;
/**
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index f0b50a82..366fa2f4 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,21 +1,31 @@
+import { TemplateAppContainer } from "@nypl/design-system-react-components";
import React from "react";
+import DrbBreakout from "../components/DrbBreakout/DrbBreakout";
import Layout from "../components/Layout/Layout";
import Link from "../components/Link/Link";
-const NotFound404 = () => (
- We're sorry... We're sorry... The page you were looking for doesn't exist. The page you were looking for doesn't exist.
- Search
- Digital Research Books Beta
- {"."}
- 404 Not Found
+const NotFound404 = () => {
+ const contentPrimaryElement = (
+ <>
+ 404 Not Found
-
+ Search + Digital Research Books Beta + {"."} +
+ > + ); + + return ( +