diff --git a/components/BlogList.js b/components/BlogList.js
index 83a69491b..7f690ed8c 100644
--- a/components/BlogList.js
+++ b/components/BlogList.js
@@ -11,7 +11,7 @@ function truncateSummary(content) {
 
 const BlogList = ({ posts }) => {
     return (
-        <>
+        <div className="blog__list">
             {posts.length > 1 &&
                 posts
                     // Filter drafts
@@ -23,120 +23,20 @@ const BlogList = ({ posts }) => {
                     )
                     .map((post) => (
                         <a href={`/posts/${post.slug}`}>
-                            <li>
-                                <div className="blog__info">
-                                    <h2>{post.frontmatter.title}</h2>
-                                    <h3>
-                                        {" "}
-                                        {reformatDate(post.frontmatter.date)}
-                                    </h3>
-                                    <p>
-                                        <ReactMarkdown
-                                            source={truncateSummary(
-                                                post.markdownBody
-                                            )}
-                                        />
-                                    </p>
-                                </div>
-                            </li>
+                            <div className="blog__list__post">
+                                <h2>{post.frontmatter.title}</h2>
+                                <h4 className="blog__list__post__date">{reformatDate(post.frontmatter.date)}</h4>
+                                <p>
+                                    <ReactMarkdown
+                                        source={truncateSummary(
+                                            post.markdownBody
+                                        )}
+                                    />
+                                </p>
+                            </div>
                         </a>
                     ))}
-            <style jsx>
-                {`
-                    margin-bottom: 0;
-                    a:hover {
-                        opacity: 1;
-                    }
-                    a:hover li div.hero_image img {
-                        opacity: 0.8;
-                        transition: opacity 0.3s ease;
-                    }
-                    a:hover li .blog__info h2,
-                    a:hover li .blog__info h3,
-                    a:hover li .blog__info p {
-                        transform: translateX(10px);
-                        transition: transform 0.5s ease-out;
-                    }
-                    @media (prefers-reduced-motion) {
-                        a:hover li .blog__info h2,
-                        a:hover li .blog__info h3,
-                        a:hover li .blog__info p {
-                            transform: translateX(0px);
-                        }
-                    }
-                    .hero_image {
-                        width: 100%;
-                        height: 33vh;
-                        overflow: hidden;
-                        background-color: #000;
-                    }
-                    .hero_image img {
-                        object-fit: cover;
-                        object-position: 50% 50%;
-                        opacity: 1;
-                        transition: opacity 0.3s ease;
-                        min-height: 100%;
-                    }
-                    .blog__info {
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: center;
-                        padding: 1.5rem 1.25rem;
-                        transform: translateX(0px);
-                        transition: transform 0.3s ease-in;
-                    }
-                    .blog__info h2,
-                    .blog__info h3,
-                    .blog__info p {
-                        transform: translateX(0px);
-                        transition: transform 0.5s ease-out;
-                    }
-                    li {
-                        opacity: inherit;
-                        display: flex;
-                        flex-direction: column;
-                        min-height: 38vh;
-                        margin-bottom: 0;
-                    }
-                    h2 {
-                        margin-bottom: 0.5rem;
-                    }
-                    h3 {
-                        margin-bottom: 1rem;
-                    }
-                    p {
-                        max-width: 900px;
-                    }
-                    @media (min-width: 768px) {
-                        li {
-                            min-height: 250px;
-                            height: 33.333vh;
-                            flex-direction: row;
-                        }
-                        .hero_image {
-                            height: 100%;
-                        }
-                        .hero_image img {
-                            min-width: 100%;
-                            height: 100%;
-                            width: auto;
-                            min-height: 0;
-                        }
-                        .blog__info {
-                            min-width: 70%;
-                        }
-                    }
-                    @media (min-width: 1280px) {
-                        .blog__info {
-                            padding: 3rem;
-                        }
-                        h3 {
-                            margin-bottom: 1.2rem;
-                        }
-                    }
-                `}
-            </style>
-        </>
+        </div>
     );
 };
 
diff --git a/pages/posts/index.js b/pages/posts/index.js
index cec31168f..acf26ef3d 100644
--- a/pages/posts/index.js
+++ b/pages/posts/index.js
@@ -1,48 +1,47 @@
 import Layout from "../../components/Layout";
 import BlogList from "../../components/BlogList";
+import Page from "../../components/Page";
 import matter from "gray-matter";
 
 const Index = (props) => {
-  return (
-    <Layout pathname="/" siteTitle="Garrit's Notes" siteDescription="">
-      <section>
-        <BlogList posts={props.posts} />
-      </section>
-    </Layout>
-  );
+    return (
+        <Page siteTitle="Garrit's Notes">
+            <BlogList posts={props.posts} />
+        </Page>
+    );
 };
 
 export async function getStaticProps() {
-  //get posts & context from folder
-  const posts = ((context) => {
-    const keys = context.keys();
-    const values = keys.map(context);
+    //get posts & context from folder
+    const posts = ((context) => {
+        const keys = context.keys();
+        const values = keys.map(context);
 
-    const data = keys.map((key, index) => {
-      // Create slug from filename
-      const slug = key
-        .replace(/^.*[\\\/]/, "")
-        .split(".")
-        .slice(0, -1)
-        .join(".");
-      const value = values[index];
-      // Parse yaml metadata & markdownbody in document
-      const document = matter(value.default);
-      return {
-        frontmatter: document.data,
-        markdownBody: document.content,
-        slug,
-      };
-    });
-    return data;
-  })(require.context("../../content/posts", true, /\.md$/));
+        const data = keys.map((key, index) => {
+            // Create slug from filename
+            const slug = key
+                .replace(/^.*[\\\/]/, "")
+                .split(".")
+                .slice(0, -1)
+                .join(".");
+            const value = values[index];
+            // Parse yaml metadata & markdownbody in document
+            const document = matter(value.default);
+            return {
+                frontmatter: document.data,
+                markdownBody: document.content,
+                slug,
+            };
+        });
+        return data;
+    })(require.context("../../content/posts", true, /\.md$/));
 
-  return {
-    props: {
-      posts,
-      description: "",
-    },
-  };
+    return {
+        props: {
+            posts,
+            description: "",
+        },
+    };
 }
 
 export default Index;
diff --git a/styles/components/blog-list.scss b/styles/components/blog-list.scss
index 2da0ce4a6..2e39cb6c0 100644
--- a/styles/components/blog-list.scss
+++ b/styles/components/blog-list.scss
@@ -1,90 +1,16 @@
-a:hover {
-    opacity: 1;
-}
-a:hover li div.hero_image img {
-    opacity: 0.8;
-    transition: opacity 0.3s ease;
-}
-a:hover li .blog__info h2,
-a:hover li .blog__info h3,
-a:hover li .blog__info p {
-    transform: translateX(10px);
-    transition: transform 0.5s ease-out;
-}
-@media (prefers-reduced-motion) {
-    a:hover li .blog__info h2,
-    a:hover li .blog__info h3,
-    a:hover li .blog__info p {
-        transform: translateX(0px);
-    }
-}
-.hero_image {
-    width: 100%;
-    height: 33vh;
-    overflow: hidden;
-    background-color: #000;
-}
-.hero_image img {
-    object-fit: cover;
-    object-position: 50% 50%;
-    opacity: 1;
-    transition: opacity 0.3s ease;
-    min-height: 100%;
-}
-.blog__info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 1.5rem 1.25rem;
-    transform: translateX(0px);
-    transition: transform 0.3s ease-in;
-}
-.blog__info h2,
-.blog__info h3,
-.blog__info p {
-    transform: translateX(0px);
-    transition: transform 0.5s ease-out;
-}
-li {
-    opacity: inherit;
-    display: flex;
-    flex-direction: column;
-    min-height: 38vh;
-    margin-bottom: 0;
-}
-h2 {
-    margin-bottom: 0.5rem;
-}
-h3 {
-    margin-bottom: 1rem;
-}
-p {
-    max-width: 900px;
-}
-@media (min-width: 768px) {
-    li {
-        min-height: 250px;
-        height: 33.333vh;
-        flex-direction: row;
-    }
-    .hero_image {
-        height: 100%;
-    }
-    .hero_image img {
-        min-width: 100%;
-        height: 100%;
-        width: auto;
-        min-height: 0;
-    }
-    .blog__info {
-        min-width: 70%;
-    }
-}
-@media (min-width: 1280px) {
-    .blog__info {
-        padding: 3rem;
+.blog__list {
+    &__post {
+        margin-bottom: 3em;
+        &__date {
+            color: $color-text-dark;
+            font-weight: 300;
+
+            @media (prefers-color-scheme: light) {
+                color: $color-text-light;
+            }
+        }
     }
-    h3 {
-        margin-bottom: 1.2rem;
+    a {
+        text-decoration: none;
     }
 }
diff --git a/styles/components/index.scss b/styles/components/index.scss
index 6b4d6904a..53747fc87 100644
--- a/styles/components/index.scss
+++ b/styles/components/index.scss
@@ -1,3 +1,4 @@
 @import "header";
 @import "page";
 @import "footer";
+@import "blog-list";
diff --git a/styles/foundation/typography.scss b/styles/foundation/typography.scss
index 2bd47d4c3..a4f0e803a 100644
--- a/styles/foundation/typography.scss
+++ b/styles/foundation/typography.scss
@@ -28,7 +28,6 @@
 h1 {
     @include header;
     font-size: 47px;
-    font-weight: bold;
 }
 
 h2 {