diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index a53c6a7b1..65e4cea81 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -20,9 +20,10 @@ import Section from '../theme/components/Section';
 import Triangle from '../theme/components/Triangle';
 import { Link } from 'gatsby';
 import Img from '../images/404.png';
+import { PAGE } from '../theme/utils/constants';
 
 const NotFoundPage = (): JSX.Element => (
-  <Layout title="Page not found">
+  <Layout title={PAGE.notFound}>
     <Section.Container Background={Background}>
       <Box width={[320, 400, 600]} m="auto">
         <Image
diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
new file mode 100644
index 000000000..fae6329a4
--- /dev/null
+++ b/src/pages/blog.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2021 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as React from 'react';
+import Layout from '../theme/components/Layout';
+import PageHeader from '../theme/components/PageHeader';
+import Footer from '../theme/components/Footer';
+import Section from '../theme/components/Section';
+import { PAGE, SECTION } from '../theme/utils/constants';
+import { Heading } from 'rebass/styled-components';
+import Triangle from '../theme/components/Triangle';
+import { PostContainer } from '../theme/sections/Blog';
+
+const BlogPage = (): JSX.Element => (
+  <Layout title={PAGE.blog}>
+    <PageHeader />
+    <Section.Container id={SECTION.blog} Background={Background}>
+      <Heading
+        textAlign="center"
+        as="h1"
+        color="primary"
+        fontSize={[6, 8]}
+        mb={[5, 5, 6]}
+        mt={[5, 5, 6]}
+      >
+        {SECTION.blog}
+      </Heading>
+      <PostContainer />
+    </Section.Container>
+    <Footer />
+  </Layout>
+);
+
+export default BlogPage;
+
+const Background = (): JSX.Element => (
+  <>
+    <Triangle
+      color="muted"
+      height={['15vh', '35vh']}
+      width={['95vw', '55vw']}
+    />
+
+    <Triangle
+      color="secondary"
+      height={['18vh', '35vh']}
+      width={['50vw', '35vw']}
+    />
+
+    <Triangle
+      color="primary"
+      height={['9vh', '15vh']}
+      width={['75vw', '60vw']}
+      position="top-right"
+    />
+  </>
+);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3f4be6908..a98265f6d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -19,12 +19,13 @@ import Header from '../theme/components/Header';
 import Landing from '../theme/sections/Landing';
 import About from '../theme/sections/About';
 import Libraries from '../theme/sections/Libraries';
-import Blog from '../theme/sections/Blog';
+import { Blog } from '../theme/sections/Blog';
 import Footer from '../theme/components/Footer';
 import News from '../theme/sections/News';
+import { PAGE } from '../theme/utils/constants';
 
 const HomePage = (): JSX.Element => (
-  <Layout title="Process Analytics">
+  <Layout title={PAGE.home}>
     <Header />
     <Landing />
     <About />
diff --git a/src/theme/components/Layout.tsx b/src/theme/components/Layout.tsx
index 935addc48..6cacaa0d6 100644
--- a/src/theme/components/Layout.tsx
+++ b/src/theme/components/Layout.tsx
@@ -21,6 +21,7 @@ import { theme } from '../theme';
 import Helmet from './Helmet';
 import 'tippy.js/dist/tippy.css';
 import CookieConsent, { Cookies } from 'react-cookie-consent';
+import { PAGE } from '../utils/constants';
 
 declare module 'styled-components' {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -59,7 +60,7 @@ const GlobalStyle = createGlobalStyle`
 
 type Props = {
   children: ReactNode;
-  title: string;
+  title: PAGE;
 };
 
 const Layout = ({ children, title }: Props): JSX.Element => (
diff --git a/src/theme/components/PageHeader.tsx b/src/theme/components/PageHeader.tsx
new file mode 100644
index 000000000..096283c53
--- /dev/null
+++ b/src/theme/components/PageHeader.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright 2021 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import Headroom from 'react-headroom';
+import {
+  Box,
+  Link as RebassLink,
+  Flex,
+  Image,
+  Button,
+} from 'rebass/styled-components';
+import styled from 'styled-components';
+import { header } from '../../content/HeaderContent';
+import { PAGE } from '../utils/constants';
+import Link from './Link';
+import { capitalize } from '../utils/string';
+
+const PageHeader = (): JSX.Element => {
+  const { logo } = header;
+
+  return (
+    <StyledHeadroom>
+      <Flex
+        flexWrap="wrap"
+        justifyContent="space-between"
+        alignItems="center"
+        px={3}
+      >
+        <RebassLink href="/" variant="empty">
+          <Flex justifyContent="center">
+            <Image
+              src={logo.src}
+              height={['60px', '80px']}
+              width={['60px', '80px']}
+              alt="Process Analytics Logo"
+              p={2}
+              css={{ borderRadius: '20px', cursor: 'pointer' }}
+            />
+          </Flex>
+        </RebassLink>
+        <Flex mr={[0, 3, 5]}>
+          {Object.keys(PAGE)
+            .filter(id => id !== 'home' && id !== 'notFound')
+            .map(id => (
+              <Box
+                key={id}
+                ml={[2, 3]}
+                mt="auto"
+                mb="auto"
+                color="background"
+                fontSize={[2, 3]}
+              >
+                <Link href={`/${id}`} tabIndex={0}>
+                  {capitalize(id)}
+                </Link>
+              </Box>
+            ))}
+          <Box ml={[2, 3]} fontSize={[2, 3]}>
+            <Button variant="secondary">
+              <RebassLink
+                href="https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html"
+                target="_blank"
+                color="inherit"
+                style={{ textDecorationLine: 'inherit' }}
+              >
+                Demo
+              </RebassLink>
+            </Button>
+          </Box>
+        </Flex>
+      </Flex>
+    </StyledHeadroom>
+  );
+};
+
+const StyledHeadroom = styled(Headroom)`
+  * {
+    transition: background-color 0.1s ease;
+  }
+
+  .headroom--pinned {
+    background-color: ${({ theme }) => theme.colors.primary};
+  }
+
+  position: absolute;
+  width: 100%;
+`;
+
+export default PageHeader;
diff --git a/src/theme/sections/Blog.tsx b/src/theme/sections/Blog.tsx
index b7913041d..0ceac3d07 100644
--- a/src/theme/sections/Blog.tsx
+++ b/src/theme/sections/Blog.tsx
@@ -24,20 +24,23 @@ import { postsContent } from '../../content/PostsContent';
 
 export const cardMinWidth = '350px';
 
-const Blog = (): JSX.Element => {
-  const { posts } = postsContent;
+const Blog = (): JSX.Element => (
+  <Section.Container id={SECTION.blog} Background={Background}>
+    <Section.Header name={SECTION.blog} />
+    <PostContainer />
+  </Section.Container>
+);
 
+const PostContainer = (): JSX.Element => {
+  const { posts } = postsContent;
   return (
-    <Section.Container id={SECTION.blog} Background={Background}>
-      <Section.Header name={SECTION.blog} />
-      <CardContainer minWidth={cardMinWidth}>
-        <Fade direction="down" triggerOnce cascade damping={0.5}>
-          {posts.map(p => (
-            <Post {...p} key={p.url} />
-          ))}
-        </Fade>
-      </CardContainer>
-    </Section.Container>
+    <CardContainer minWidth={cardMinWidth}>
+      <Fade direction="down" triggerOnce cascade damping={0.5}>
+        {posts.map(p => (
+          <Post {...p} key={p.url} />
+        ))}
+      </Fade>
+    </CardContainer>
   );
 };
 
@@ -66,4 +69,4 @@ const Background = (): JSX.Element => (
   </>
 );
 
-export default Blog;
+export { Blog, PostContainer };
diff --git a/src/theme/utils/constants.ts b/src/theme/utils/constants.ts
index 3a6c54815..1512869e5 100644
--- a/src/theme/utils/constants.ts
+++ b/src/theme/utils/constants.ts
@@ -25,4 +25,12 @@ export enum SECTION {
   blog = 'Blog Posts',
 }
 
+// keys are used by the page header
+// values are used as page title
+export enum PAGE {
+  home = 'Process Analytics',
+  notFound = 'Page not found - Process Analytics',
+  blog = 'Blog Posts - Process Analytics',
+}
+
 export const MEDIA_QUERY_SMALL = '@media (max-width: 400px)';
