diff --git a/web/components/markdown.tsx b/web/components/markdown.tsx
index b7ea9eba..18b01a0e 100644
--- a/web/components/markdown.tsx
+++ b/web/components/markdown.tsx
@@ -27,6 +27,16 @@ const MarkdownLink = ({href, children}: { href?: string; children: React.ReactNo
   )
 }
 
+export const CompassMarkdown = ({children}: { children: string }) => {
+  return <ReactMarkdown
+    components={{
+      a: ({node: _node, children, ...props}) => <MarkdownLink {...props}>{children}</MarkdownLink>
+    }}
+  >
+    {children}
+  </ReactMarkdown>
+}
+
 export default function MarkdownPage({content, filename}: Props) {
   const title = /[A-Z]/.test(filename) ? filename : capitalize(filename)
   return (
@@ -38,12 +48,7 @@ export default function MarkdownPage({content, filename}: Props) {
       />
       <Col className="items-center mb-8">
         <Col className='w-full rounded px-3 py-4 sm:px-6 space-y-4 custom-link'>
-          <ReactMarkdown
-            components={{
-              a: ({node: _node, children, ...props}) => <MarkdownLink {...props}>{children}</MarkdownLink>
-            }}
-          >{content}
-          </ReactMarkdown>
+          <CompassMarkdown>{content}</CompassMarkdown>
         </Col>
       </Col>
     </PageBase>
diff --git a/web/pages/news.tsx b/web/pages/news.tsx
index ad2a89ea..d93d74ad 100644
--- a/web/pages/news.tsx
+++ b/web/pages/news.tsx
@@ -1,6 +1,5 @@
 import {useEffect, useState} from "react"
 import axios from "axios"
-import ReactMarkdown from "react-markdown"
 import {PageBase} from "web/components/page-base"
 import {SEO} from "web/components/SEO"
 import {Col} from "web/components/layout/col"
@@ -8,6 +7,7 @@ import {Title} from "web/components/widgets/title"
 import Link from "next/link"
 import {CompassLoadingIndicator} from "web/components/widgets/loading-indicator"
 import {githubRepoSlug} from "common/constants";
+import {CompassMarkdown} from "web/components/markdown";
 
 type Release = {
   id: number
@@ -66,9 +66,9 @@ export default function WhatsNew() {
                   </span>
                 </div>
                 <div className="mt-4 mb-4 prose prose-neutral dark:prose-invert text-ink-1000">
-                  <ReactMarkdown>
+                  <CompassMarkdown>
                     {formatPullLinks(release.body || "_No release notes provided._")}
-                  </ReactMarkdown>
+                  </CompassMarkdown>
                 </div>
                 <Link href={release.html_url}>View on GitHub</Link>
               </div>
@@ -83,8 +83,8 @@ function formatPullLinks(text = "") {
   return text
     .replace('CompassMeet', 'CompassConnections')
     .replace(
-    /https:\/\/github\.com\/CompassConnections\/Compass\/pull\/(\d+)/g,
-    (_, num) => `[#${num}](https://github.com/CompassConnections/Compass/pull/${num})`)
+      /https:\/\/github\.com\/CompassConnections\/Compass\/pull\/(\d+)/g,
+      (_, num) => `[#${num}](https://github.com/CompassConnections/Compass/pull/${num})`)
     .replace(
       /\**Full Changelog\**: https:\/\/github\.com\/CompassConnections\/Compass\/compare\/([\w.-]+\.\.\.[\w.-]+)/g,
       '')