diff --git a/pages/_template.jsx b/pages/_template.jsx
index 9bd5dee..4435773 100644
--- a/pages/_template.jsx
+++ b/pages/_template.jsx
@@ -4,14 +4,14 @@ import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
 import Typography from 'typography';
 import { link } from 'gatsby-helpers';
 
-var typography = new Typography();
-var rhythm = typography.rhythm, fontSizeToMS = typography.fontSizeToMS;
+let typography = new Typography();
+let rhythm = typography.rhythm, fontSizeToMS = typography.fontSizeToMS;
 
 import '../css/styles.css';
 
-module.exports = React.createClass({
-  render: function() {
-    var header;
+export default class extends React.Component {
+  render() {
+    let header;
     if (this.props.state.path === link('/')) {
       header = (
         <h1
@@ -59,4 +59,4 @@ module.exports = React.createClass({
       </Container>
     );
   }
-});
+}
diff --git a/pages/index.jsx b/pages/index.jsx
index a883443..41a2d2f 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -4,20 +4,18 @@ import sortBy from 'lodash/collection/sortBy';
 import DocumentTitle from 'react-document-title';
 import { link } from 'gatsby-helpers';
 
-module.exports = React.createClass({
-  statics: {
-    data: function() {
-      return {
-        yo: true
-      };
+export default class extends React.Component {
+  static data() {
+    return {
+      yo: true
     }
-  },
-  render: function() {
-    var i, len, page, pageLinks, ref, ref1, ref2, rhythm, title;
+  }
+  render() {
+    let i, len, page, pageLinks, ref, ref1, ref2, rhythm, title;
     rhythm = this.props.typography.rhythm;
     pageLinks = [];
-    ref = sortBy(this.props.pages, function(page) {
-      var ref;
+    ref = sortBy(this.props.pages, (page) => {
+      let ref;
       return (ref = page.data) != null ? ref.date : void 0;
     }).reverse();
     for (i = 0, len = ref.length; i < len; i++) {
@@ -63,4 +61,4 @@ module.exports = React.createClass({
       </DocumentTitle>
     );
   }
-});
+}
\ No newline at end of file