diff --git a/gatsby-node.js b/gatsby-node.js
index 19d14b9..be84609 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -57,12 +57,12 @@ exports.createPages = async ({ actions, graphql }) => {
 
   // Create blog list pages
   const posts = result.data.allMarkdownRemark.edges
-  const postsPerPage = 1
+  const postsPerPage = 10 // Change for number posts to display per page
   const numPages = Math.ceil(posts.length / postsPerPage)
   Array.from({ length: numPages }).forEach((_, i) => {
     createPage({
-      path: i === 0 ? `/blog` : `/${i + 1}`,
-      component: path.resolve("./src/templates/blog-list-template.js"),
+      path: i === 0 ? `/journal` : `/journal/${i + 1}`,
+      component: path.resolve("./src/templates/journal-template.js"),
       context: {
         limit: postsPerPage,
         skip: i * postsPerPage,
diff --git a/src/pages/journal.js b/src/pages/journal.js
deleted file mode 100644
index 1a02376..0000000
--- a/src/pages/journal.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react"
-import SEO from "../components/SEO"
-import Layout from "../components/layout"
-import { graphql } from "gatsby"
-import BlogItem from "../components/Blog/blog-item"
-
-const Journal = ({ data }) => {
-  const { edges } = data.allMarkdownRemark
-  return (
-    <>
-      <SEO title="Read more about the projects at Bonneville" />
-      <Layout>
-        <h1>Bonneville Journal</h1>
-        <p>
-          {" "}
-          Phasellus vel egestas ipsum. Integer tristique ullamcorper purus a
-          suscipit. Duis condimentum arcu tortor, vitae faucibus elit eleifend
-          eu. Curabitur mauris risus, pretium et est at, consequat venenatis
-          sem. Phasellus vehicula ligula id mauris facilisis bibendum.
-        </p>
-        {edges.map(({ node }) => (
-          <BlogItem
-            title={node.frontmatter.title}
-            excerpt={node.excerpt}
-            path={node.frontmatter.path}
-            date={node.frontmatter.date}
-          />
-        ))}
-      </Layout>
-    </>
-  )
-}
-
-export default Journal
-
-export const query = graphql`
-  query {
-    allMarkdownRemark(
-      sort: { fields: [frontmatter___date], order: DESC }
-      limit: 3
-    ) {
-      totalCount
-      edges {
-        node {
-          id
-          frontmatter {
-            title
-            date(formatString: "MMMM DD, YY")
-            path
-          }
-          excerpt
-        }
-      }
-    }
-  }
-`
diff --git a/src/scss/blog.module.scss b/src/scss/blog.module.scss
deleted file mode 100644
index 4f3983a..0000000
--- a/src/scss/blog.module.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-@import "./variables";
-
-.item {
-  padding: 1rem 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-
-  .title {
-    h2 {
-      display: inline-block;
-      position: relative;
-      line-height: 2.25rem;
-      font-size: 1.5rem;
-
-      a {
-        color: $black;
-        display: block;
-        text-decoration: none;
-        -webkit-transition: $transMed;
-        transition: $transMed;
-
-        @media (hover: hover) {
-          &:hover {
-            color: #939393;
-          }
-        }
-      }
-    }
-  }
-
-  .meta {
-    padding: 1rem 0;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-
-    h4 {
-      margin: 0;
-      font-size: 1rem;
-      line-height: 30px;
-      color: #939393;
-    }
-  }
-}
-
-.feature {
-  font-size: 1.2rem;
-  color: #939393;
-}
-
-@media (min-width: 768px) {
-  .item {
-    -webkit-box-orient: horizontal;
-
-    -webkit-box-direction: normal;
-
-    -ms-flex-direction: row;
-
-    flex-direction: row;
-
-    .title {
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      padding-right: 2rem;
-      width: 50%;
-
-      h2 {
-        margin: 0;
-        font-size: 1.75rem;
-      }
-    }
-
-    .content {
-      width: 48%;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-      flex-direction: column;
-
-      p {
-        margin-top: 0;
-      }
-    }
-  }
-}
diff --git a/src/templates/blog-list-template.js b/src/templates/blog-list-template.js
deleted file mode 100644
index 4fde4e1..0000000
--- a/src/templates/blog-list-template.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from "react"
-import { Link, graphql } from "gatsby"
-import Layout from "../components/layout"
-import Seo from "../components/SEO"
-import "../scss/main.scss"
-import Button from "../components/Button/button"
-import styles from "../scss/blog.module.scss"
-
-export default class BlogList extends React.Component {
-  render() {
-    const posts = this.props.data.allMarkdownRemark.edges
-
-    const { currentPage, numPages } = this.props.pageContext
-    const isFirst = currentPage === 1
-    const isLast = currentPage === numPages
-    const prevPage =
-      currentPage - 1 === 1 ? "/blog/" : "/blog/" + (currentPage - 1).toString()
-    const nextPage = "blog/" + (currentPage + 1).toString()
-
-    return (
-      <Layout>
-        <Seo
-          title="All blog posts"
-          description="Recent posts from the Bonneville starter theme"
-        />
-        <div className="blog-list">
-          <h1>Latest News &amp; Posts</h1>
-          {posts.map(({ node }) => {
-            const title = node.frontmatter.title || node.frontmatter.path
-            return (
-              <article key={node.key} className={styles.item}>
-                <div className={styles.title}>
-                  <h2>
-                    <Link to={node.frontmatter.path}>{title}</Link>
-                  </h2>
-                </div>
-                <div className={styles.content}>
-                  <p>{node.excerpt}</p>
-                  <div className={styles.meta}>
-                    <Link className="btn-link" to={node.frontmatter.path}>
-                      <Button />
-                    </Link>
-                    <h4>{node.frontmatter.date}</h4>
-                  </div>
-                </div>
-              </article>
-            )
-          })}
-
-          {!isFirst && (
-            <Link className="btn" to={prevPage} rel="prev">
-              Previous Page
-            </Link>
-          )}
-          {!isLast && (
-            <Link className="btn" to={nextPage} rel="next">
-              Next Page
-            </Link>
-          )}
-        </div>
-      </Layout>
-    )
-  }
-}
-export const blogListQuery = graphql`
-  query blogListQuery($skip: Int!, $limit: Int!) {
-    allMarkdownRemark(
-      sort: { fields: [frontmatter___date], order: DESC }
-      limit: $limit
-      skip: $skip
-    ) {
-      edges {
-        node {
-          id
-          frontmatter {
-            title
-            date(formatString: "MMMM DD, YY")
-            path
-          }
-          excerpt
-        }
-      }
-    }
-  }
-`
diff --git a/src/templates/journal-template.js b/src/templates/journal-template.js
new file mode 100644
index 0000000..3366ca7
--- /dev/null
+++ b/src/templates/journal-template.js
@@ -0,0 +1,128 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import Layout from "../components/layout"
+import SEO from "../components/SEO"
+import BlogItem from "../components/Blog/blog-item"
+import styled from "styled-components"
+
+const Pager = styled.aside`
+  font-family: var(--serif);
+  font-size: 1.25rem;
+  display: inline-block;
+
+  a {
+    color: var(--black);
+    text-decoration: none;
+  }
+`
+
+const PagerContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+
+const PagerButtons = styled.div`
+  flex: 0 0 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+`
+
+const PagerNumbers = styled.div`
+  flex: 0 0 100%;
+
+  a {
+    padding-right: 1rem;
+  }
+`
+
+const JournalTemplate = props => {
+  const { edges } = props.data.allMarkdownRemark
+
+  const { currentPage, numPages } = props.pageContext
+  const isFirst = currentPage === 1
+  const isLast = currentPage === numPages
+  const prevPage = currentPage - 1 === 1 ? "" : (currentPage - 1).toString()
+  const nextPage = (currentPage + 1).toString()
+
+  return (
+    <>
+      <SEO title="Read more about the projects at Bonneville" />
+      <Layout>
+        <h1>Bonneville Journal</h1>
+        <p>
+          {" "}
+          Welcome to the Bonneville journal. Each page is auto generated through
+          gatsby-node.js, which is where you can handle the number of posts per
+          page. Pagination is also available
+        </p>
+        {edges.map(({ node }) => (
+          <BlogItem
+            title={node.frontmatter.title}
+            excerpt={node.excerpt}
+            path={node.frontmatter.path}
+            date={node.frontmatter.date}
+          />
+        ))}
+        {/* Paging controls
+        If there are multiple pages, show pager */}
+        {numPages > 1 && (
+          <PagerContainer>
+            <PagerButtons>
+              {!isFirst && (
+                <Pager>
+                  <Link to={`/journal/${prevPage}`} rel="prev">
+                    Previous
+                  </Link>
+                </Pager>
+              )}
+              {!isLast && (
+                <Pager>
+                  <Link to={`/journal/${nextPage}`} rel="next">
+                    Next
+                  </Link>
+                </Pager>
+              )}
+            </PagerButtons>
+            <PagerNumbers>
+              <Pager>
+                {Array.from({ length: numPages }, (_, i) => (
+                  <Link
+                    key={`pagination-numbers${i + 1}`}
+                    to={`/journal/${i === 0 ? "" : i + 1}`}
+                  >
+                    {i + 1}
+                  </Link>
+                ))}
+              </Pager>
+            </PagerNumbers>
+          </PagerContainer>
+        )}
+      </Layout>
+    </>
+  )
+}
+
+export default JournalTemplate
+
+export const journalQuery = graphql`
+  query journalQuery($skip: Int!, $limit: Int!) {
+    allMarkdownRemark(
+      sort: { fields: [frontmatter___date], order: DESC }
+      limit: $limit
+      skip: $skip
+    ) {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+            date(formatString: "MMMM DD, YY")
+            path
+          }
+          excerpt
+        }
+      }
+    }
+  }
+`