diff --git a/sites/public/src/layouts/max-width.module.scss b/sites/public/src/layouts/max-width.module.scss
new file mode 100644
index 0000000000..7ffbae9aeb
--- /dev/null
+++ b/sites/public/src/layouts/max-width.module.scss
@@ -0,0 +1,17 @@
+.layout-max-width-container {
+  margin-block: var(--seeds-s6);
+  padding-inline: var(--seeds-s4);
+
+  @media (--md-and-up) {
+    margin-block: var(--seeds-s12);
+  }
+
+  p:not(:last-child) {
+    margin-block-end: var(--seeds-s4);
+  }
+}
+
+.layout-max-width-content {
+  max-width: var(--seeds-screen-lg);
+  margin: auto;
+}
diff --git a/sites/public/src/layouts/max-width.tsx b/sites/public/src/layouts/max-width.tsx
new file mode 100644
index 0000000000..1c2d7d9332
--- /dev/null
+++ b/sites/public/src/layouts/max-width.tsx
@@ -0,0 +1,16 @@
+import React from "react"
+import styles from "./max-width.module.scss"
+
+interface MaxWidthLayoutProps {
+  children: React.ReactNode
+}
+
+const MaxWidthLayout = (props: MaxWidthLayoutProps) => {
+  return (
+    <div className={styles["layout-max-width-container"]}>
+      <div className={styles["layout-max-width-content"]}>{props.children}</div>
+    </div>
+  )
+}
+
+export default MaxWidthLayout
diff --git a/sites/public/src/pages/404.tsx b/sites/public/src/pages/404.tsx
index f11c7c64f4..d130938bda 100644
--- a/sites/public/src/pages/404.tsx
+++ b/sites/public/src/pages/404.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useContext } from "react"
 import Layout from "../layouts/application"
 import Head from "next/head"
-import { Hero, MarkdownSection, t } from "@bloom-housing/ui-components"
+import { Hero, t } from "@bloom-housing/ui-components"
 import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import { Button } from "@bloom-housing/ui-seeds"
 import { UserStatus } from "../lib/constants"
+import MaxWidthLayout from "../layouts/max-width"
 
 const ErrorPage = () => {
   const pageTitle = t("errors.notFound.title")
@@ -28,14 +29,14 @@ const ErrorPage = () => {
         {t("errors.notFound.message")}
       </Hero>
       <div className="homepage-extra">
-        <MarkdownSection fullwidth={true}>
+        <MaxWidthLayout>
           <>
             <p>{t("welcome.seeMoreOpportunities")}</p>
             <Button variant="primary-outlined" href="/additional-resources">
               {t("welcome.viewAdditionalHousing")}
             </Button>
           </>
-        </MarkdownSection>
+        </MaxWidthLayout>
       </div>
     </Layout>
   )
diff --git a/sites/public/src/pages/_error.tsx b/sites/public/src/pages/_error.tsx
index f11c7c64f4..f43c3945b5 100644
--- a/sites/public/src/pages/_error.tsx
+++ b/sites/public/src/pages/_error.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect, useContext } from "react"
-import Layout from "../layouts/application"
-import Head from "next/head"
-import { Hero, MarkdownSection, t } from "@bloom-housing/ui-components"
+import { Hero, t } from "@bloom-housing/ui-components"
 import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import { Button } from "@bloom-housing/ui-seeds"
 import { UserStatus } from "../lib/constants"
+import MaxWidthLayout from "../layouts/max-width"
 
 const ErrorPage = () => {
   const pageTitle = t("errors.notFound.title")
@@ -20,24 +19,21 @@ const ErrorPage = () => {
   }, [profile])
 
   return (
-    <Layout>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
+    <>
       <Hero title={pageTitle} buttonTitle={t("welcome.seeRentalListings")} buttonLink="/listings">
         {t("errors.notFound.message")}
       </Hero>
       <div className="homepage-extra">
-        <MarkdownSection fullwidth={true}>
+        <MaxWidthLayout>
           <>
             <p>{t("welcome.seeMoreOpportunities")}</p>
             <Button variant="primary-outlined" href="/additional-resources">
               {t("welcome.viewAdditionalHousing")}
             </Button>
           </>
-        </MarkdownSection>
+        </MaxWidthLayout>
       </div>
-    </Layout>
+    </>
   )
 }
 
