diff --git a/app/assets/stylesheets/views/mod-center.scss b/app/assets/stylesheets/views/mod-center.scss
index 59dfd0a07..03e34e2c0 100644
--- a/app/assets/stylesheets/views/mod-center.scss
+++ b/app/assets/stylesheets/views/mod-center.scss
@@ -55,6 +55,15 @@
       content: '';
     }
 
+    .link-icon {
+      width: var(--su-7);
+      height: auto;
+
+      &:hover {
+        color: var(--link-branded-color);
+      }
+    }
+
     .article-details-container {
       cursor: pointer;
       display: grid;
@@ -65,7 +74,7 @@
       padding: var(--su-4);
 
       @media (min-width: $breakpoint-m) {
-        grid-template-columns: 4fr 2fr 1fr;
+        grid-template-columns: 0.25fr 4fr 2fr 1fr;
         grid-row-gap: 0;
         grid-template-rows: 1fr;
       }
diff --git a/app/javascript/modCenter/singleArticle/index.jsx b/app/javascript/modCenter/singleArticle/index.jsx
index c848fae34..fb6d18039 100644
--- a/app/javascript/modCenter/singleArticle/index.jsx
+++ b/app/javascript/modCenter/singleArticle/index.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { h, Fragment } from 'preact';
 import { formatDate } from './util';
+import ExternalLinkIcon from '@images/external-link.svg';
 
 export const SingleArticle = ({
   id,
@@ -41,6 +42,9 @@ export const SingleArticle = ({
       >
         <summary>
           <div className="article-details-container">
+            <a href={path}>
+              <ExternalLinkIcon aria-label="Open in new tab" className="link-icon" />
+            </a>
             <span className="article-title">
               <header>
                 <h3 className="fs-base fw-bold lh-tight article-title-heading">