diff --git a/src/components/Card.js b/src/components/Card.js
index ef3284f..fd4a549 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -21,6 +21,12 @@ const Card = ({ ...props }) => (
         <h3 className="text-black font-medium text-center text-xl">
           {props.title}
         </h3>
+
+        <div className="flex mx-auto justify-center text-black mt-1 opacity-70">
+          {props.authorName && <address className="author text-sm m-1 font-bold roman author-name">{props.authorName}</address> }
+          {props.date && <time pubdate="true" className="text-sm m-1" dateTime="2011-08-28" title="August 28th, 2011">{props.date}</time> }
+        </div>
+
         {props.subtitle && (
           <span className="text-sm font-medium text-black pt-1 opacity-70">
             {props.subtitle}
diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js
index 3058260..5ee7c8a 100644
--- a/src/components/PageIntro.js
+++ b/src/components/PageIntro.js
@@ -29,11 +29,11 @@ class PageIntro extends Component {
                   value: 47,
                   density: {
                     enable: true,
-                    value_area: 5000
+                    value_area: 4444
                 }
                 },
                 size: {
-                  value: 1.47
+                  value: 1.77
                 },
                 color: {
                   value: "#5763ab"
diff --git a/src/pages/index.js b/src/pages/index.js
index 8764c3d..41b4e11 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -187,6 +187,7 @@ const IndexPage = ({ ...props }) => (
                   url={`blog/${node.slug}`}
                   title={node.title}
                   date={node.date}
+                  authorName={node.author.name}
                   imgAlt={node.title}
                   excerpt={node.excerpt}
                   image={
@@ -218,6 +219,10 @@ export const query = graphql`
         node {
           id
           title
+          author {
+            id
+            name
+          }
           excerpt
           status
           slug
diff --git a/src/styles/general.css b/src/styles/general.css
index d114d08..d21acec 100644
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -230,4 +230,11 @@ a {
 
 .crisp-client .crisp-1rjpbb7 .crisp-1rf4xdh .crisp-ewasyx .crisp-zyxrmn .crisp-1bu0ive .crisp-1uswakw {
   display: none !important;
+}
+
+@media (min-width: 310px) {
+.author-name::before {
+  content: "by ";
+  font-weight: normal;
+}
 }
\ No newline at end of file
diff --git a/src/templates/blog.js b/src/templates/blog.js
index d7d5dd3..e7d34d7 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -39,6 +39,7 @@ class Blog extends Component {
                 <Card
                   title={node.title}
                   date={node.date}
+                  authorName={node.author.name}
                   imgAlt={node.title}
                   excerpt={node.excerpt}
                   image={
@@ -76,6 +77,9 @@ export const query = graphql`
           excerpt
           status
           slug
+          author {
+            name
+          }
           date(formatString: "MMMM DD, YYYY")
           featured_media {
             localFile {
diff --git a/src/templates/post-default.js b/src/templates/post-default.js
index e64c346..fa7564c 100644
--- a/src/templates/post-default.js
+++ b/src/templates/post-default.js
@@ -33,16 +33,23 @@ class PostDefault extends Component {
         >
           <html lang="en" />
         </Helmet>
-        <main className="container mx-auto p-4 max-w-lg sm:p-10">
+        <div className="text-center">
           <img
-            className="w-full rounded"
+            className="w-full container mx-auto mt-10 rounded"
             src={
               data.wordpressPost.featured_media
                 ? data.wordpressPost.featured_media.source_url
                 : ''
             }
           />
-          <h1 className="mt-4">{data.wordpressPost.title}</h1>
+        </div>
+        <main className="container mx-auto p-4 max-w-lg sm:px-10">
+          <h1 className="mt-4">{data.wordpressPost.title}</h1>  
+          <div className="flex mx-auto text-black mt-1 opacity-70">
+            {data.wordpressPost.author.name && <address className="author text-sm m-1 font-bold roman author-name">{data.wordpressPost.author.name}</address> }
+            {data.wordpressPost.date && <time pubdate="true" className="text-sm m-1" dateTime="2011-08-28" title="August 28th, 2011">{data.wordpressPost.date}</time> }
+          </div>
+
           <div
             className="leading-normal blog-post font-serif"
             dangerouslySetInnerHTML={{
@@ -61,6 +68,9 @@ export const query = graphql`
       title
       slug
       content
+      author {
+        name
+      }
       date(formatString: "MMMM DD, YYYY")
       featured_media {
         source_url
