diff --git a/www/src/components/blog-post-preview-item.js b/www/src/components/blog-post-preview-item.js
new file mode 100644
index 0000000000000..5c84ffc60dc07
--- /dev/null
+++ b/www/src/components/blog-post-preview-item.js
@@ -0,0 +1,95 @@
+import React from "react"
+import Link from "gatsby-link"
+
+import typography, { rhythm, scale } from "../utils/typography"
+import presets from "../utils/presets"
+
+class BlogPostPreviewItem extends React.Component {
+  render() {
+    const post = this.props.post
+    const avatar =
+      post.frontmatter.author.avatar.childImageSharp.responsiveResolution
+
+    return (
+      <div css={{ marginBottom: rhythm(2) }}>
+        <Link to={post.fields.slug}>
+          <h2
+            css={{
+              marginBottom: rhythm(1 / 8),
+            }}
+          >
+            {post.frontmatter.title}
+          </h2>
+          <p>
+            {post.frontmatter.excerpt ? post.frontmatter.excerpt : post.excerpt}
+          </p>
+        </Link>
+        <div>
+          <img
+            alt={`Avatar for ${post.frontmatter.author.id}`}
+            src={avatar.src}
+            srcSet={avatar.srcSet}
+            height={avatar.height}
+            width={avatar.width}
+            css={{
+              borderRadius: `100%`,
+              display: `inline-block`,
+              marginRight: rhythm(1 / 2),
+              marginBottom: 0,
+              verticalAlign: `top`,
+            }}
+          />
+          <div
+            css={{
+              display: `inline-block`,
+              fontFamily: typography.options.headerFontFamily.join(`,`),
+              color: `rgba(0,0,0,.44)`,
+              ...scale(-2 / 5),
+              lineHeight: 1.3,
+              [presets.Mobile]: {
+                ...scale(-1 / 5),
+                lineHeight: 1.3,
+              },
+            }}
+          >
+            <div>
+              {post.frontmatter.author.id}
+            </div>
+            <div>
+              {post.frontmatter.date}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default BlogPostPreviewItem
+
+export const blogPostPreviewFragment = graphql`
+  fragment BlogPostPreview_item on MarkdownRemark {
+    excerpt
+    fields {
+      slug
+    }
+    frontmatter {
+      excerpt
+      title
+      date(formatString: "DD MMMM, YYYY")
+      author {
+        id
+        avatar {
+          childImageSharp {
+            responsiveResolution(width: 36, height: 36) {
+              width
+              height
+              src
+              srcSet
+            }
+          }
+        }
+      }
+    }
+  }
+`
diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js
index b3cdea9eb4c7a..3bcf2e3afdc05 100644
--- a/www/src/pages/blog/index.js
+++ b/www/src/pages/blog/index.js
@@ -1,89 +1,17 @@
 import React from "react"
-import Link from "gatsby-link"
-import colors from "../../utils/colors"
-
-import { rhythm, scale } from "../../utils/typography"
-import presets from "../../utils/presets"
 import Container from "../../components/container"
+import BlogPostPreviewItem from "../../components/blog-post-preview-item"
 
 class BlogPostsIndex extends React.Component {
   render() {
-    const blogPosts = this.props.data.allMarkdownRemark.edges.map(
-      edge => edge.node
-    )
+    const { allMarkdownRemark } = this.props.data
+
     return (
       <Container>
         <h1 css={{ marginTop: 0 }}>Blog</h1>
-        {blogPosts.map(post => {
-          const avatar =
-            post.frontmatter.author.avatar.childImageSharp.responsiveResolution
-          return (
-            <div key={post.fields.slug} css={{ marginBottom: rhythm(2) }}>
-              <Link to={post.fields.slug}>
-                <h2
-                  css={{
-                    marginBottom: rhythm(1 / 8),
-                  }}
-                >
-                  {post.frontmatter.title}
-                </h2>
-                <p
-                  css={{
-                    color: colors.b[13],
-                  }}
-                >
-                  {post.frontmatter.excerpt
-                    ? post.frontmatter.excerpt
-                    : post.excerpt}
-                </p>
-              </Link>
-              <div>
-                <img
-                  alt={`Avatar for ${post.frontmatter.author.id}`}
-                  src={avatar.src}
-                  srcSet={avatar.srcSet}
-                  height={avatar.height}
-                  width={avatar.width}
-                  css={{
-                    borderRadius: `100%`,
-                    display: `inline-block`,
-                    marginRight: rhythm(1 / 2),
-                    marginBottom: 0,
-                    verticalAlign: `top`,
-                  }}
-                />
-                <div
-                  css={{
-                    display: `inline-block`,
-                  }}
-                >
-                  <div
-                    css={{
-                      color: colors.b[12],
-                      lineHeight: 1.1,
-                    }}
-                  >
-                    <small>
-                      {post.frontmatter.author.id}
-                    </small>
-                  </div>
-                  <div
-                    css={{
-                      color: colors.b[12],
-                      lineHeight: 1.1,
-                    }}
-                  >
-                    <small>
-                      <em>
-                        {post.frontmatter.date}
-                      </em>
-                    </small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )
-        })}
+        {allMarkdownRemark.edges.map(({ node }) =>
+          <BlogPostPreviewItem post={node} key={node.fields.slug} />
+        )}
       </Container>
     )
   }
@@ -102,28 +30,7 @@ export const pageQuery = graphql`
     ) {
       edges {
         node {
-          excerpt
-          fields {
-            slug
-          }
-          frontmatter {
-            excerpt
-            title
-            date(formatString: "DD MMMM, YYYY")
-            author {
-              id
-              avatar {
-                childImageSharp {
-                  responsiveResolution(width: 35, height: 35) {
-                    width
-                    height
-                    src
-                    srcSet
-                  }
-                }
-              }
-            }
-          }
+          ...BlogPostPreview_item
         }
       }
     }
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index 45d9107796c53..bbfa9cb2c3000 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -2,6 +2,7 @@ import React from "react"
 import Link from "gatsby-link"
 import { rhythm, scale, options } from "../utils/typography"
 import Container from "../components/container"
+import BlogPostPreviewItem from "../components/blog-post-preview-item"
 import presets from "../utils/presets"
 import colors from "../utils/colors"
 
@@ -45,9 +46,7 @@ const ctaButtonStyles = {
 const IndexRoute = React.createClass({
   render() {
     console.log(this.props)
-    const blogPosts = this.props.data.allMarkdownRemark.edges.map(
-      edge => edge.node
-    )
+    const blogPosts = this.props.data.allMarkdownRemark
     return (
       <div>
         <div
@@ -280,77 +279,9 @@ const IndexRoute = React.createClass({
             >
               Latest from the Gatsby blog
             </h2>
-            {blogPosts.map(post => {
-              const avatar =
-                post.frontmatter.author.avatar.childImageSharp
-                  .responsiveResolution
-              return (
-                <div key={post.fields.slug} css={{ paddingBottom: rhythm(2) }}>
-                  <Link to={post.fields.slug}>
-                    <h2
-                      css={{
-                        marginBottom: rhythm(1 / 8),
-                      }}
-                    >
-                      {post.frontmatter.title}
-                    </h2>
-                    <p
-                      css={{
-                        color: colors.b[13],
-                      }}
-                    >
-                      {post.frontmatter.excerpt
-                        ? post.frontmatter.excerpt
-                        : post.excerpt}
-                    </p>
-                  </Link>
-                  <div>
-                    <img
-                      alt={`Avatar for ${post.frontmatter.author.id}`}
-                      src={avatar.src}
-                      srcSet={avatar.srcSet}
-                      height={avatar.height}
-                      width={avatar.width}
-                      css={{
-                        borderRadius: `100%`,
-                        display: `inline-block`,
-                        marginRight: rhythm(1 / 2),
-                        marginBottom: 0,
-                        verticalAlign: `top`,
-                      }}
-                    />
-                    <div
-                      css={{
-                        display: `inline-block`,
-                      }}
-                    >
-                      <div
-                        css={{
-                          color: colors.b[12],
-                          lineHeight: 1.1,
-                        }}
-                      >
-                        <small>
-                          {post.frontmatter.author.id}
-                        </small>
-                      </div>
-                      <div
-                        css={{
-                          color: colors.b[12],
-                          lineHeight: 1.1,
-                        }}
-                      >
-                        <small>
-                          <em>
-                            {post.frontmatter.date}
-                          </em>
-                        </small>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
+            {blogPosts.edges.map(({ node }) =>
+              <BlogPostPreviewItem post={node} key={node.fields.slug} />
+            )}
           </Container>
         </div>
       </div>
@@ -386,28 +317,7 @@ export const pageQuery = graphql`
     ) {
       edges {
         node {
-          excerpt
-          fields {
-            slug
-          }
-          frontmatter {
-            excerpt
-            title
-            date(formatString: "DD MMMM, YYYY")
-            author {
-              id
-              avatar {
-                childImageSharp {
-                  responsiveResolution(width: 35, height: 35) {
-                    width
-                    height
-                    src
-                    srcSet
-                  }
-                }
-              }
-            }
-          }
+          ...BlogPostPreview_item
         }
       }
     }
diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js
index dcc4c89a9a25d..4ee1b7bcdfa3e 100644
--- a/www/src/templates/template-blog-post.js
+++ b/www/src/templates/template-blog-post.js
@@ -97,6 +97,10 @@ const BlogPostTemplate = React.createClass({
             display: `flex`,
             marginTop: rhythm(-1 / 4),
             marginBottom: rhythm(1),
+            [presets.Tablet]: {
+              marginTop: rhythm(1 / 2),
+              marginBottom: rhythm(2),
+            },
           }}
         >
           <div
@@ -114,8 +118,8 @@ const BlogPostTemplate = React.createClass({
                   .responsiveResolution.srcSet
               }
               css={{
-                height: rhythm(2.75),
-                width: rhythm(2.75),
+                height: rhythm(2.5),
+                width: rhythm(2.5),
                 margin: 0,
                 borderRadius: `100%`,
                 display: `inline-block`,
@@ -194,7 +198,7 @@ export const pageQuery = graphql`
           twitter
           avatar {
             childImageSharp {
-              responsiveResolution(width: 75, height: 75, quality: 75) {
+              responsiveResolution(width: 63, height: 63, quality: 75) {
                 src
                 srcSet
               }