diff --git a/src/components/common/card/index.tsx b/src/components/common/card/index.tsx
index dd6347f..eae5629 100644
--- a/src/components/common/card/index.tsx
+++ b/src/components/common/card/index.tsx
@@ -1,7 +1,6 @@
 import clsx from 'clsx'
 import NextLink from 'next/link'
 
-import { ArrowLink } from '~/components/icons/arrow'
 import { Calendar, Clock } from '~/components/icons/events'
 import Heading from '~/components/primitives/heading'
 import Link from '~/components/primitives/link'
@@ -116,9 +115,7 @@ export const BlogCard = ({
             {data?.title}
           </Heading>
           {horizontal && <p>{data && getDescription(data)}</p>}
-          <div className={s['read']}>
-            <span>READ ARTICLE</span> <ArrowLink />
-          </div>
+          <Link href={`/blog/${data?.slug}`}>READ ARTICLE</Link>
         </div>
       </div>
     </Link>
diff --git a/src/lib/renderer/blog.module.scss b/src/lib/renderer/blog.module.scss
index f3cf148..0a49a84 100644
--- a/src/lib/renderer/blog.module.scss
+++ b/src/lib/renderer/blog.module.scss
@@ -39,6 +39,15 @@
     line-height: 160%;
     letter-spacing: -0.01em;
     margin: tovw(44px, 'default', 40px) 0;
+
+    a {
+      color: var(--color-grey-light);
+      transition: color 200ms;
+
+      &:hover {
+        color: var(--color-accent);
+      }
+    }
   }
 
   blockquote {
@@ -59,7 +68,7 @@
 
   ul {
     margin: tovw(76px, 'default', 40px) 0;
-    padding-left: tovw(72px, 'default', 12px);
+    padding-left: tovw(87px, 'default', 22px);
     list-style: none;
     position: relative;