diff --git a/client/index.css b/client/index.css
index d456db6..87bbabd 100644
--- a/client/index.css
+++ b/client/index.css
@@ -4,6 +4,7 @@
  */
 
 :root {
+    --background-color: #e7d900;
     --text-color: #1e1d6e;
 } 
 body {
diff --git a/client/layouts/Github.tsx b/client/layouts/Github.tsx
deleted file mode 100644
index 3ed748d..0000000
--- a/client/layouts/Github.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import React from 'react';
-
-const Github: React.FC<{}> = () => {
-    return (
-        <a href="https://github.com/phuoc-ng/csslayout" rel="noopener noreferrer" target="_blank">
-            <svg
-                className="z-10"
-                width="80"
-                height="80"
-                viewBox="0 0 250 250"
-                style={{
-                    position: 'fixed',
-                    right: 0,
-                    top: 0,
-                }}
-                aria-hidden={true}
-            >
-                <path d={`M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z`} fill="#00449E" />
-                <path
-                    d={`M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6
-                        C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2`}
-                    fill="#ffffff"
-                    style={{ transformOrigin: '130px 106px' }}
-                />
-                <path
-                    d={`M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6
-                        C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1
-                        C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6
-                        C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5
-                        C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5
-                        C139.8,137.7 141.6,141.9 141.8,141.8 Z`}
-                    fill="#ffffff"
-                />
-            </svg>
-        </a>
-    );
-};
-
-export default Github;
diff --git a/client/layouts/Header.tsx b/client/layouts/Header.tsx
new file mode 100644
index 0000000..49f9379
--- /dev/null
+++ b/client/layouts/Header.tsx
@@ -0,0 +1,27 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+import './header.css';
+
+const Header: React.FC<{}> = () => {
+    return (
+        <header className="header">
+            <div className="container">
+                <div className="header__nav">
+                    <Link to="/">
+                        <img src="/assets/logo.svg" />
+                    </Link>
+                    <Link to="/patterns">Patterns</Link>
+                    <a href="https://github.com/phuoc-ng/csslayout">GitHub</a>
+                </div>
+            </div>
+        </header>
+    );
+};
+
+export default Header;
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
index 68e3633..e028996 100644
--- a/client/layouts/Layout.tsx
+++ b/client/layouts/Layout.tsx
@@ -3,22 +3,20 @@
  * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
 
-import React, { useEffect } from 'react';
+import * as React from 'react';
 
 import Footer from './Footer';
-import Github from './Github';
+import Header from './Header';
 
 const Layout: React.FC<{}> = ({ children }) => {
-    useEffect(() => {
+    React.useEffect(() => {
         window.scrollTo(0, 0);
     }, []);
 
     return (
         <>
-            <Github />
-            <div className="ml-auto mr-auto max-w-4xl mb-12">
-                {children}
-            </div>
+            <Header />
+            {children}
             <Footer />
         </>
     );
diff --git a/client/layouts/header.css b/client/layouts/header.css
new file mode 100644
index 0000000..d72aa4a
--- /dev/null
+++ b/client/layouts/header.css
@@ -0,0 +1,16 @@
+.header {
+    background-color: var(--background-color);
+}
+.header__nav {
+    align-items: center;
+    display: flex;
+    font-size: 1.2rem;
+}
+.header__nav a:first-child {
+    margin-left: 0;
+    margin-right: auto;
+}
+.header__nav a {
+    color: var(--text-color);
+    margin-left: 1rem;
+}
\ No newline at end of file
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
new file mode 100644
index 0000000..674b71f
--- /dev/null
+++ b/public/assets/logo.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64" viewBox="0 0 1024 1024">
+    <g transform="translate(512 512) scale(8.24 8.24)">
+        <line x1="-46" y1="0" x2="46" y2="0" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(0 -32.49)"/>
+        <line x1="0" y1="-32.489999999999995" x2="0" y2="32.489999999999995" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(46 0)"/>
+        <line x1="46" y1="0" x2="-46" y2="0" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(0 32.49)"/>
+        <line x1="0" y1="32.489999999999995" x2="0" y2="-32.489999999999995" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-46 0)"/>
+        <line x1="0" y1="-32.489999999999995" x2="0" y2="32.489999999999995" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(0 0)"/>
+        <line x1="-23" y1="0" x2="23" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-23 0)"/>
+        <line x1="0" y1="-16.244999999999997" x2="0" y2="16.244999999999997" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-23 16.245)"/>
+        <line x1="11.5" y1="0" x2="-11.5" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-34.5 16.245)"/>
+        <line x1="0" y1="-8.122499999999995" x2="0" y2="8.122499999999995" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-34.5 24.3675)"/>
+        <line x1="5.75" y1="0" x2="-5.75" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-40.25 24.367)"/>
+        <line x1="0" y1="-4.061499999999995" x2="0" y2="4.061499999999995" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-40.25 28.4285)"/>
+        <line x1="2.875" y1="0" x2="-2.875" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-43.125 28.429)"/>
+    </g>
+</svg>
\ No newline at end of file