diff --git a/contents/_includes/patterns/timeline.njk b/contents/_includes/patterns/timeline.njk
new file mode 100644
index 0000000..8dfc655
--- /dev/null
+++ b/contents/_includes/patterns/timeline.njk
@@ -0,0 +1,16 @@
+<div class="timeline">
+    <div class="timeline__line"></div>
+    <div class="timeline__items">
+        {% for i in range(0, 2) -%}
+        <div class="timeline__item">
+            <div class="timeline__top">
+                <div class="timeline__circle"></div>
+                <div class="timeline__title">{% rectangle %}</div>
+            </div>
+            <div class="timeline__desc">
+                {% lines "hor", 5 %}
+            </div>
+        </div>
+        {%- endfor %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 28b81b7..2e60df7 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -271,6 +271,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Three dimensions card</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/timeline/">
+                    <div class="pattern__cover">{% include "patterns/timeline.njk" %}</div>
+                    <div class="pattern__title">Timeline</div>
+                </a>
+            </div>
             <div class="pattern__item">
                 <a class="pattern__link" href="/video-background/">
                     <div class="pattern__cover">{% include "patterns/video-background.njk" %}</div>
diff --git a/contents/timeline.md b/contents/timeline.md
new file mode 100644
index 0000000..c52e574
--- /dev/null
+++ b/contents/timeline.md
@@ -0,0 +1,102 @@
+---
+layout: layouts/post.njk
+title: Timeline
+description: Create a timeline with CSS flexbox
+keywords: css flexbox, css timeline
+---
+
+## HTML
+
+```html
+<div class="timeline">
+    <!-- Left vertical line -->
+    <div class="timeline__line"></div>
+
+    <!-- The timeline items timeline -->
+    <div class="timeline__items">
+        <!-- Each timeline item -->
+        <div class="timeline__item">
+            <!-- The circle and title -->
+            <div class="timeline__top">
+                <!-- The circle -->
+                <div class="timeline__circle"></div>
+
+                <!-- The title -->
+                <div class="timeline__title">
+                    ...
+                </div>
+            </div>
+
+            <!-- The description -->
+            <div class="timeline__desc">
+                ...
+            </div>
+        </div>
+
+        <!-- Repeat other items -->
+        ...
+    </div>
+</div>
+```
+
+## CSS
+
+```css
+.timeline {
+    /* Used to position the left vertical line */
+    position: relative;
+}
+
+.timeline__line {
+    /* Border */
+    border-right: 2px solid #d1d5db;
+
+    /* Positioned at the left */
+    left: 0.75rem;
+    position: absolute;
+    top: 0px;
+
+    /* Take full height */
+    height: 100%;
+}
+
+.timeline__items {
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0px;
+    padding: 0px;
+}
+
+.timeline__item {
+    margin-bottom: 8px;
+}
+
+.timeline__top {
+    /* Center the content horizontally */
+    align-items: center;
+    display: flex;
+}
+
+.timeline__circle {
+    /* Rounded border */
+    background-color: #d1d5db;
+    border-radius: 9999px;
+
+    /* Size */
+    height: 1.5rem;
+    width: 1.5rem;
+}
+
+.timeline__title {
+    /* Take available width */
+    flex: 1;
+    margin-left: 0.5rem;
+}
+
+.timeline__desc {
+    /* Make it align with the title */
+    margin-left: 2rem;
+}
+```
+
+{% demo %}{% include "patterns/timeline.njk" %}{% enddemo %}
diff --git a/pages/timeline/index.tsx b/pages/timeline/index.tsx
deleted file mode 100644
index 6ad9560..0000000
--- a/pages/timeline/index.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { Pattern } from '../../constants/Pattern';
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.Timeline}>
-            <Head>
-                <meta name="description" content="Create a timeline with CSS flexbox" />
-                <meta name="og:description" content="Create a timeline with CSS flexbox" />
-                <meta name="twitter:description" content="Create a timeline with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css timeline" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- Left vertical line -->
-    <div class="container__line"></div>
-
-    <!-- The timeline items container -->
-    <ul class="container__items">
-        <!-- Each timeline item -->
-        <li class="container__item">
-            <!-- The circle and title -->
-            <div class="container__top">
-                <!-- The circle -->
-                <div class="container__circle"></div>
-
-                <!-- The title -->
-                <div class="container__title">
-                    ...
-                </div>
-            </div>
-
-            <!-- The description -->
-            <div class="container__desc">
-                ...
-            </div>
-        </li>
-
-        <!-- Repeat other items -->
-        ...
-    </ul>
-</div>
-`}
-                css={`
-                    .container {
-                        /* Used to position the left vertical line */
-                        position: relative;
-                    }
-
-                    .container__line {
-                        /* Border */
-                        border-right: 2px solid #aaa;
-
-                        /* Positioned at the left */
-                        left: 16px;
-                        position: absolute;
-                        top: 0px;
-
-                        /* Take full height */
-                        height: 100%;
-                    }
-
-                    .container__items {
-                        /* Reset styles */
-                        list-style-type: none;
-                        margin: 0px;
-                        padding: 0px;
-                    }
-
-                    .container__item {
-                        margin-bottom: 8px;
-                    }
-
-                    .container__top {
-                        /* Center the content horizontally */
-                        align-items: center;
-                        display: flex;
-                    }
-
-                    .container__circle {
-                        /* Rounded border */
-                        background-color: rgb(170, 170, 170);
-                        border-radius: 9999px;
-
-                        /* Size */
-                        height: 32px;
-                        width: 32px;
-                    }
-
-                    .container__title {
-                        /* Take available width */
-                        flex: 1;
-                    }
-
-                    .container__desc {
-                        /* Make it align with the title */
-                        margin-left: 48px;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        style={{
-                            position: 'relative',
-                            width: '60%',
-                        }}
-                    >
-                        <div
-                            style={{
-                                borderRight: '2px solid #aaa',
-                                height: '100%',
-                                left: '16px',
-                                position: 'absolute',
-                                top: 0,
-                            }}
-                        />
-                        <ul
-                            style={{
-                                listStyleType: 'none',
-                                margin: 0,
-                                padding: 0,
-                            }}
-                        >
-                            <li style={{ marginBottom: '8px' }}>
-                                <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                    <Circle backgroundColor="#aaa" size={32} />
-                                    <div style={{ flex: 1, marginLeft: '16px' }}>
-                                        <div style={{ width: '80%' }}>
-                                            <Rectangle />
-                                        </div>
-                                    </div>
-                                </div>
-                                <div style={{ marginLeft: '48px' }}>
-                                    <Block numberOfBlocks={10} blockHeight={2} />
-                                </div>
-                            </li>
-                            <li style={{ marginBottom: '8px' }}>
-                                <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                    <Circle backgroundColor="#aaa" size={32} />
-                                    <div style={{ flex: 1, marginLeft: '16px' }}>
-                                        <div style={{ width: '60%' }}>
-                                            <Rectangle />
-                                        </div>
-                                    </div>
-                                </div>
-                                <div style={{ marginLeft: '48px' }}>
-                                    <Block numberOfBlocks={15} blockHeight={2} />
-                                </div>
-                            </li>
-                            <li style={{ marginBottom: '8px' }}>
-                                <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                    <Circle backgroundColor="#aaa" size={32} />
-                                    <div style={{ flex: 1, marginLeft: '16px' }}>
-                                        <div style={{ width: '60%' }}>
-                                            <Rectangle />
-                                        </div>
-                                    </div>
-                                </div>
-                                <div style={{ marginLeft: '48px' }}>
-                                    <Block numberOfBlocks={10} blockHeight={2} />
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.ZigzagTimeline]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/timeline/Cover.tsx b/patterns/timeline/Cover.tsx
deleted file mode 100644
index 19ef016..0000000
--- a/patterns/timeline/Cover.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from 'react';
-
-import Circle from '../../placeholders/Circle';
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        position: 'relative',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            borderRight: '1px solid #aaa',
-                            height: '100%',
-                            left: '6px',
-                            position: 'absolute',
-                            top: 0,
-                        }}
-                    />
-                    <ul
-                        style={{
-                            listStyleType: 'none',
-                            margin: 0,
-                            padding: 0,
-                        }}
-                    >
-                        <li style={{ marginBottom: '8px' }}>
-                            <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                <Circle backgroundColor="#aaa" size={12} />
-                                <div style={{ flex: 1, marginLeft: '8px' }}>
-                                    <div style={{ width: '80%' }}>
-                                        <Rectangle />
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{ marginLeft: '20px' }}>
-                                <div style={{ marginBottom: '4px', width: '100%' }}>
-                                    <Line />
-                                </div>
-                                <div style={{ marginBottom: '4px', width: '80%' }}>
-                                    <Line />
-                                </div>
-                                <div style={{ marginBottom: '4px', width: '60%' }}>
-                                    <Line />
-                                </div>
-                                <div style={{ width: '40%' }}>
-                                    <Line />
-                                </div>
-                            </div>
-                        </li>
-                        <li>
-                            <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                <Circle backgroundColor="#aaa" size={12} />
-                                <div style={{ flex: 1, marginLeft: '8px' }}>
-                                    <div style={{ width: '60%' }}>
-                                        <Rectangle />
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{ marginLeft: '20px' }}>
-                                <div style={{ marginBottom: '4px', width: '80%' }}>
-                                    <Line />
-                                </div>
-                                <div style={{ marginBottom: '4px', width: '60%' }}>
-                                    <Line />
-                                </div>
-                                <div style={{ marginBottom: '4px', width: '40%' }}>
-                                    <Line />
-                                </div>
-                                <div style={{ width: '80%' }}>
-                                    <Line />
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 8702e86..924ec59 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -54,6 +54,7 @@
 @import './patterns/status-light';
 @import './patterns/teardrop';
 @import './patterns/three-dimensions-card';
+@import './patterns/timeline';
 @import './patterns/triangle-buttons';
 @import './patterns/video-background';
 @import './patterns/voting';
diff --git a/styles/patterns/_timeline.scss b/styles/patterns/_timeline.scss
new file mode 100644
index 0000000..98bb0d5
--- /dev/null
+++ b/styles/patterns/_timeline.scss
@@ -0,0 +1,59 @@
+.timeline {
+    /* Used to position the left vertical line */
+    position: relative;
+
+    /* Demo */
+    height: 100%;
+    width: 100%;
+}
+
+.timeline__line {
+    /* Border */
+    border-right: 2px solid #d1d5db;
+
+    /* Positioned at the left */
+    left: 0.75rem;
+    position: absolute;
+    top: 0px;
+
+    /* Take full height */
+    height: 100%;
+}
+
+.timeline__items {
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0px;
+    padding: 0px;
+}
+
+.timeline__item {
+    margin-bottom: 8px;
+}
+
+.timeline__top {
+    /* Center the content horizontally */
+    align-items: center;
+    display: flex;
+}
+
+.timeline__circle {
+    /* Rounded border */
+    background-color: #d1d5db;
+    border-radius: 9999px;
+
+    /* Size */
+    height: 1.5rem;
+    width: 1.5rem;
+}
+
+.timeline__title {
+    /* Take available width */
+    flex: 1;
+    margin-left: 0.5rem;
+}
+
+.timeline__desc {
+    /* Make it align with the title */
+    margin-left: 2rem;
+}
\ No newline at end of file