diff --git a/src/components/Article.js b/src/components/Article/index.tsx
similarity index 71%
rename from src/components/Article.js
rename to src/components/Article/index.tsx
index 7e71c0bb..0be499cc 100644
--- a/src/components/Article.js
+++ b/src/components/Article/index.tsx
@@ -1,6 +1,5 @@
-import React from 'react'
-import { dateFormat } from '../lib/date'
-import { Share } from './Share'
+import { dateFormat } from 'src/lib/date'
+import { Share } from '../Share'
 
 const Tag = ({ children }) => (
     <li className="ArticleTags-Item">
@@ -18,10 +17,16 @@ const TagList = ({ tags }) => (
 
 const Head = ({ date, tags = [], children }) => (
     <header className="Article-Head">
+        <style jsx>{`
+            .date {
+                color: var(--color-text-second);
+            }
+        `}</style>
+
         <h1>{children}</h1>
 
         {!date ? null : (
-            <p className="date">{dateFormat(date)}</p>
+            <p className={'date'}>{dateFormat(date)}</p>
         )}
 
         {!(tags.length) ? null : (
@@ -30,7 +35,7 @@ const Head = ({ date, tags = [], children }) => (
     </header>
 )
 
-const Article = ({ children, date, tags, title, shareable }) => (
+export const Article = ({ children, date, tags, title, shareable }) => (
     <article className="Article">
         <Head
             date={date}
@@ -48,5 +53,3 @@ const Article = ({ children, date, tags, title, shareable }) => (
         )}
     </article>
 )
-
-export default Article
diff --git a/src/style/components/Article.scss b/src/style/components/Article.scss
index 12fa83c1..f172e585 100644
--- a/src/style/components/Article.scss
+++ b/src/style/components/Article.scss
@@ -15,13 +15,7 @@
             margin-bottom: var(--article-head-margin-bottom);
         }
 
-        .date {
-            text-align: center;
-            color: #aaa;
-
-            margin-bottom: 1.25em;
-        }
-    }
+   }
 
     &-Body {
         --text-margin: 10px;