diff --git a/frontend/src/pages/article.css b/frontend/src/pages/article.css
index 42d908767419b7eea2fa391faf8b6ac5060c363a..eb4e3f295c067f8bfa81728f5805c66a3e62a63e 100644
--- a/frontend/src/pages/article.css
+++ b/frontend/src/pages/article.css
@@ -59,11 +59,11 @@
   word-wrap: break-word;
 }
 
-a:hover {
+.article-link:hover {
   text-decoration: none;
-  font-weight: bold;
+  color: var(--red);
 }
-a:focus {
+.article-link:focus {
   text-decoration: none;
-  font-weight: bold;
+  color: var(--red);
 }
diff --git a/frontend/src/pages/article.js b/frontend/src/pages/article.js
index c245bb9f6fab69652073442916c45d7fc9187f5f..79c41aaf4c56a379131abb37fe6d4dc268587f6e 100644
--- a/frontend/src/pages/article.js
+++ b/frontend/src/pages/article.js
@@ -77,7 +77,11 @@ const Content = props => {
                 <ErrorRetry retry={refetchList} />
               ) : (
                 dataList.data.results.slice(0, 3).map(newArticle => (
-                  <Link to={"/article/" + newArticle.id} key={newArticle.id}>
+                  <Link
+                    className="article-link"
+                    to={"/article/" + newArticle.id}
+                    key={newArticle.id}
+                  >
                     <Row className="my-3 d-flex flex-column align-items-center">
                       <div className="col-sm-12">
                         <div>