diff --git a/web/e.cash/data/navitems.js b/web/e.cash/data/navitems.js
--- a/web/e.cash/data/navitems.js
+++ b/web/e.cash/data/navitems.js
@@ -72,6 +72,10 @@
             },
         ],
     },
+    {
+        nav_item: 'Blog',
+        link: '/blog',
+    },
     {
         nav_item: 'More',
         dropdown_items: [
diff --git a/web/e.cash/next.config.js b/web/e.cash/next.config.js
--- a/web/e.cash/next.config.js
+++ b/web/e.cash/next.config.js
@@ -26,6 +26,10 @@
                 protocol: 'https',
                 hostname: 'api.scorecard.cash',
             },
+            {
+                protocol: 'https',
+                hostname: 'strapi.fabien.cash',
+            },
         ],
     },
 };
diff --git a/web/e.cash/pages/blog.js b/web/e.cash/pages/blog.js
new file mode 100644
--- /dev/null
+++ b/web/e.cash/pages/blog.js
@@ -0,0 +1,94 @@
+// Copyright (c) 2023 The Bitcoin developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+import Image from 'next/image';
+import Layout from '/components/layout';
+import H3 from '/components/h3';
+import { Container } from '/components/atoms';
+import { getBlogPosts } from '/data/blog.js';
+import {
+    BlogCtn,
+    FeaturedCardCtn,
+    FeaturedCard,
+    CardImage,
+    TextCtn,
+    Tag,
+    CardCtn,
+    Card,
+} from '/styles/pages/blog.js';
+
+function Blog(props) {
+    const featuredPosts = props.posts.slice(0, 3);
+    const posts = props.posts.slice(3);
+    return (
+        <Layout>
+            <BlogCtn>
+                <Container>
+                    <H3 text="Latest News" />
+                    <FeaturedCardCtn>
+                        {featuredPosts.map((post, index) => (
+                            <FeaturedCard
+                                key={index}
+                                href={`/blog/${post.attributes.slug}`}
+                            >
+                                <Tag>{post.attributes.type}</Tag>
+                                <CardImage feature={index === 0 ? true : false}>
+                                    <Image
+                                        src={`https://strapi.fabien.cash/${post.attributes.image.data.attributes.formats.medium.url}`}
+                                        alt={post.attributes.title}
+                                        fill
+                                    />
+                                </CardImage>
+                                <TextCtn>
+                                    {index === 0 ? (
+                                        <>
+                                            <h2>{post.attributes.title}</h2>
+                                            <p>
+                                                {post.attributes.short_content}
+                                            </p>
+                                        </>
+                                    ) : (
+                                        <h3>{post.attributes.title}</h3>
+                                    )}
+                                </TextCtn>
+                            </FeaturedCard>
+                        ))}
+                    </FeaturedCardCtn>
+                    <CardCtn>
+                        {posts.map((post, index) => (
+                            <Card
+                                key={index}
+                                href={`/blog/${post.attributes.slug}`}
+                            >
+                                <Tag>{post.attributes.type}</Tag>
+                                <CardImage>
+                                    <Image
+                                        src={`https://strapi.fabien.cash/${post.attributes.image.data.attributes.formats.small.url}`}
+                                        alt={post.attributes.title}
+                                        fill
+                                    />
+                                </CardImage>
+                                <TextCtn>
+                                    <h4>{post.attributes.title}</h4>
+                                </TextCtn>
+                            </Card>
+                        ))}
+                    </CardCtn>
+                </Container>
+            </BlogCtn>
+        </Layout>
+    );
+}
+
+/**
+ * Call function to fetch blog api data and return posts
+ * This only runs at build time, and the build should fail if the api call fails
+ * @returns {object} props - page props to pass to the page
+ * @throws {error} on bad API call or failure to parse API result
+ */
+export async function getStaticProps() {
+    const posts = await getBlogPosts();
+    return posts;
+}
+
+export default Blog;
diff --git a/web/e.cash/public/images/logo-tile.png b/web/e.cash/public/images/logo-tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

literal 0
Hc$@<O00001

diff --git a/web/e.cash/styles/pages/blog.js b/web/e.cash/styles/pages/blog.js
new file mode 100644
--- /dev/null
+++ b/web/e.cash/styles/pages/blog.js
@@ -0,0 +1,165 @@
+// Copyright (c) 2023 The Bitcoin developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+import styled from 'styled-components';
+import Link from 'next/link';
+
+export const BlogCtn = styled.div`
+    padding: 160px 0;
+    background-size: 60px 103px;
+    background-image: url(/images/logo-tile.png);
+    ${props => props.theme.filters.grayscale}
+    ${props => props.theme.breakpoint.medium} {
+        padding: 120px 0;
+    }
+`;
+
+export const FeaturedCardCtn = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 15px;
+    grid-row-gap: 15px;
+    ${props => props.theme.breakpoint.medium} {
+        grid-template-columns: repeat(1, 1fr);
+        grid-template-rows: repeat(1, 1fr);
+    }
+`;
+
+export const TextCtn = styled.div`
+    padding: 30px;
+    color: ${props => props.theme.colors.contrast};
+    transition: all ease-in-out 300ms;
+    flex-grow: 1;
+    align-items: center;
+    background-color: ${props => props.theme.colors.darkBackground};
+    h2,
+    h3,
+    h4 {
+        margin: 0;
+        ${props => props.theme.breakpoint.medium} {
+            font-size: 18px;
+            line-height: 1.3em;
+        }
+    }
+    p {
+        margin: 0;
+        margin-top: 7px;
+        font-size: 16px;
+        line-height: 1.8em;
+        opacity: 0.5;
+        ${props => props.theme.breakpoint.medium} {
+            font-size: 14px;
+        }
+    }
+    ${props => props.theme.breakpoint.medium} {
+        padding: 15px;
+    }
+`;
+
+export const CardImage = styled.div`
+    position: relative;
+    height: ${props => (props.feature ? '500px' : '200px')};
+    width: 100%;
+    overflow: hidden;
+    img {
+        object-fit: cover;
+        object-position: center;
+        transition: all ease-in-out 300ms;
+    }
+    ${props => props.theme.breakpoint.medium} {
+        height: ${props => (props.feature ? '300px' : '180px')};
+    }
+`;
+
+export const FeaturedCard = styled(Link)`
+    grid-area: 1 / 1 / 3 / 3;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${props => props.theme.colors.primaryLight};
+    transition: all ease-in-out 200ms;
+    position: relative;
+    box-shadow: 0px 0px 22px 1px ${props => props.theme.colors.primaryLight}68;
+    :nth-child(2) {
+        grid-area: 1 / 3 / 2 / 4;
+    }
+    :nth-child(3) {
+        grid-area: 2 / 3 / 3 / 4;
+    }
+    :hover {
+        border-color: ${props => props.theme.colors.accent};
+        ${TextCtn} {
+            background-color: ${props => props.theme.colors.contrast};
+            color: ${props => props.theme.colors.black};
+        }
+        ${CardImage} {
+            img {
+                transform: scale(1.2);
+            }
+        }
+    }
+    ${props => props.theme.breakpoint.medium} {
+        grid-area: unset !important;
+    }
+`;
+
+export const Tag = styled.div`
+    padding: 5px 6px 5px 10px;
+    background: ${props => props.theme.colors.accent};
+    box-shadow: -4px -4px 0 0 ${props => props.theme.colors.accent}46;
+    font-size: 10px;
+    line-height: 1;
+    font-weight: 500;
+    text-align: center;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: ${props => props.theme.colors.contrast};
+    display: inline-block;
+    align-self: end;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    z-index: 99;
+`;
+
+export const CardCtn = styled.div`
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(1, 1fr);
+    grid-column-gap: 15px;
+    grid-row-gap: 15px;
+    margin-top: 15px;
+    ${props => props.theme.breakpoint.medium} {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    ${props => props.theme.breakpoint.small} {
+        grid-template-columns: repeat(1, 1fr);
+    }
+`;
+
+export const Card = styled(Link)`
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${props => props.theme.colors.primaryLight};
+    transition: all ease-in-out 200ms;
+    position: relative;
+    box-shadow: 0px 0px 22px 1px ${props => props.theme.colors.primaryLight}68;
+    :hover {
+        border-color: ${props => props.theme.colors.accent};
+        ${TextCtn} {
+            background-color: ${props => props.theme.colors.contrast};
+            color: ${props => props.theme.colors.black};
+        }
+        ${CardImage} {
+            img {
+                transform: scale(1.2);
+            }
+        }
+    }
+    ${TextCtn} {
+        padding: 15px;
+    }
+    ${CardImage} {
+        height: 150px;
+    }
+`;
diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js
--- a/web/e.cash/styles/theme.js
+++ b/web/e.cash/styles/theme.js
@@ -51,7 +51,7 @@
         primaryLight: '#a0a0a0',
         accent: '#8a8a8a',
         accentDark: '#797878',
-        darkBackground: '#232324',
+        darkBackground: '#000000',
         contrast: '#ffffff',
         black: '#000',
         darkBlue: '#181818',