diff --git a/contents/_includes/covers/accordion.njk b/contents/_includes/covers/accordion.njk
new file mode 100644
index 0000000..e6c0ad8
--- /dev/null
+++ b/contents/_includes/covers/accordion.njk
@@ -0,0 +1,25 @@
+<div class="accordion">
+    <div class="accordion__item accordion__item--collapsed">
+        <div class="accordion__header">
+            <div class="accordion__toggle">
+                {% triangle "r" %}
+            </div>
+            <div class="accordion__title">
+                {% rectangle %}
+            </div>
+        </div>
+    </div>
+    <div class="accordion__item accordion__item--expanded">
+        <div class="accordion__header">
+            <div class="accordion__toggle">
+                {% triangle "b" %}
+            </div>
+            <div class="accordion__title">
+                {% rectangle %}
+            </div>
+        </div>
+        <div class="accordion__content">
+            {% lines "hor", 5 %}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/contents/_includes/layouts/base.njk b/contents/_includes/layouts/base.njk
index 5f87d72..a8225b9 100644
--- a/contents/_includes/layouts/base.njk
+++ b/contents/_includes/layouts/base.njk
@@ -7,14 +7,14 @@
         <link rel="mask-icon" href="/assets/mask-favicon.svg" color="#1975FF" />
         <meta charset="utf-8">
         <meta name="author" content="Nguyen Huu Phuoc" />
-        <meta name="description" content="{{ title or metadata.title }}" />
-        <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
+        <meta name="description" content="{{ description or title }}" />
+        <meta name="keywords" content="{{ keywords }}" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="twitter:card" content="summary" />
-        <meta name="twitter:description" content="{{ title or metadata.title }}" />
+        <meta name="twitter:description" content="{{ description or title }}" />
         <meta name="twitter:site" content="@nghuuphuoc" />
         <meta name="twitter:title" content="{{ title or metadata.title }} - CSS Layout" />
-        <meta property="og:description" content="{{ title or metadata.title }}" />
+        <meta property="og:description" content="{{ description or title }}" />
         <meta property="og:site_name" content="CSS Layout" />
         <meta property="og:title" content="{{ title or metadata.title }} - CSS Layout" />
         <meta property="og:url" content="https://csslayout.io" />
diff --git a/contents/accordion.md b/contents/accordion.md
new file mode 100644
index 0000000..0d1848b
--- /dev/null
+++ b/contents/accordion.md
@@ -0,0 +1,87 @@
+---
+layout: layouts/post.njk
+title: Accordion
+description: Create an accordion with CSS flexbox
+keywords: css accordion, css flexbox
+---
+
+{% include "covers/accordion.njk" %}
+
+## HTML
+
+```html
+<!-- Container -->
+<div class="accordion">
+    <!-- Collapsed item -->
+    <div class="accordion__item accordion__item--collapsed">
+        <!-- Heading -->
+        <div class="accordion__header">
+            <!-- The toggle icon -->
+            <div class="accordion__toggle">...</div>
+
+            <!-- The title -->
+            <div class="accordion__title">
+                ...
+            </div>
+        </div>
+
+        <!-- The content -->
+        <div class="accordion__content">
+            ...
+        </div>
+    </div>
+
+    <!-- Expanded item -->
+    <div class="accordion__item accordion__item--expanded">
+        ...
+    </div>
+
+    <!-- Repeat other item -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.accordion {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-bottom-color: transparent;
+    border-radius: 4px;
+}
+
+.accordion__item {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+.accordion__header {
+    /* Center the content horizontally */
+    align-items: center;
+    display: flex;
+
+    cursor: pointer;
+    padding: 16px;
+}
+
+.accordion__toggle {
+    margin-right: 12px;
+}
+
+.accordion__title {
+    /* Take remaining width */
+    flex: 1;
+}
+
+.accordion__content {
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
+    padding: 16px;
+}
+
+.accordion__item--collapsed .accordion__content {
+    display: none;
+}
+.accordion__item--expanded .accordion__content {
+    display: block;
+}
+```
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 7f2e847..02153d9 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -10,20 +10,17 @@ eleventyExcludeFromCollections: true
         <a class="hero__button" href="https://github.com/phuocng/csslayout">Star me on GitHub · {{ github.stargazers }}★</a>
     </div>
 
-    {% for cat in collections.categories %}
-    {% set posts = collections.groupByCategories[cat] %}
     <div class="category">
-        <h2 class="category__name">{{ cat }}</h2>
+        <h2 class="category__name">Display</h2>
         <div class="category__posts">            
-            {%- for post in posts | head(8) -%}
             <div class="card__item">
-                <a class="card__link" href="{{ post.url }}">{{ post.data.title }}</a>
+                <a class="card__link" href="/accordion/">
+                    {% include "covers/accordion.njk" %}
+                    <div class="card__title">Accordion</div>
+                </a>
             </div>
-            {%- endfor -%}
         </div>
-        <a class="category__link" href="/{{ cat | lower | slug }}">See all {{ posts | length }} helpers</a>
     </div>
-    {% endfor %}
 
     {% include "follow.njk" %}
 </div>
\ No newline at end of file
diff --git a/pages/accordion/index.tsx b/pages/accordion/index.tsx
deleted file mode 100644
index 7cce5b9..0000000
--- a/pages/accordion/index.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Triangle from '../../placeholders/Triangle';
-
-interface ItemProps {
-    index: number;
-    title: React.ReactNode;
-}
-
-const Details: React.FC<{}> = () => {
-    const [activeItem, setActiveItem] = React.useState(1);
-
-    const Item: React.FC<ItemProps> = ({ index, title, children }) => {
-        const isOpened = index === activeItem;
-        const click = () => setActiveItem(isOpened ? -1 : index);
-        return (
-            <>
-                <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            padding: '16px',
-                        }}
-                        onClick={click}
-                    >
-                        <div style={{ marginRight: '12px' }}>
-                            <Triangle size={8} corner={isOpened ? 'b' : 'r'} />
-                        </div>
-                        <div style={{ flex: 1 }}>{title}</div>
-                    </div>
-                    <div
-                        style={{
-                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                            display: isOpened ? 'block' : 'none',
-                            padding: '16px',
-                        }}
-                    >
-                        {children}
-                    </div>
-                </div>
-            </>
-        );
-    };
-
-    return (
-        <PatternLayout pattern={Pattern.Accordion}>
-            <Head>
-                <meta name="description" content="Create an accordion with CSS flexbox" />
-                <meta name="og:description" content="Create an accordion with CSS flexbox" />
-                <meta name="twitter:description" content="Create an accordion with CSS flexbox" />
-                <meta name="keywords" content="css accordion, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<!-- Container -->
-<div class="accordion">
-    <!-- Each accordion item -->
-    <div class="accordion__item">
-        <!-- Heading -->
-        <div class="accordion__header">
-            <!-- The toggle icon -->
-            <div class="accordion__toggle">...</div>
-
-            <!-- The title -->
-            <div class="accordion__title">
-                ...
-            </div>
-        </div>
-
-        <!-- The content -->
-        <div class="accordion__content">
-            ...
-        </div>
-    </div>
-
-    <!-- Repeat other item -->
-    ...
-</div>
-`}
-                css={`
-                    .accordion {
-                        /* Border */
-                        border: 1px solid rgba(0, 0, 0, 0.3);
-                        border-bottom-color: transparent;
-                        border-radius: 4px;
-                    }
-
-                    .accordion__item {
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-                    }
-
-                    .accordion__header {
-                        /* Center the content horizontally */
-                        align-items: center;
-                        display: flex;
-
-                        cursor: pointer;
-                        padding: 16px;
-                    }
-
-                    .accordion__toggle {
-                        margin-right: 12px;
-                    }
-
-                    .accordion__title {
-                        /* Take remaining width */
-                        flex: 1;
-                    }
-
-                    .accordion__content {
-                        /* For not selected item */
-                        display: none;
-
-                        border-top: 1px solid rgba(0, 0, 0, 0.3);
-                        padding: 16px;
-                    }
-
-                    .accordion__content--selected {
-                        /* For selected item */
-                        display: block;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            borderBottomColor: 'transparent',
-                            borderRadius: '4px',
-                            width: '60%',
-                        }}
-                    >
-                        <Item
-                            index={0}
-                            title={
-                                <div style={{ width: '40%' }}>
-                                    <Rectangle />
-                                </div>
-                            }
-                        >
-                            <div style={{ marginBottom: '16px' }}>
-                                <Block numberOfBlocks={10} />
-                            </div>
-                        </Item>
-                        <Item
-                            index={1}
-                            title={
-                                <div style={{ width: '80%' }}>
-                                    <Rectangle />
-                                </div>
-                            }
-                        >
-                            <div style={{ marginBottom: '16px' }}>
-                                <Block numberOfBlocks={15} />
-                            </div>
-                        </Item>
-                        <Item
-                            index={2}
-                            title={
-                                <div style={{ width: '60%' }}>
-                                    <Rectangle />
-                                </div>
-                            }
-                        >
-                            <div style={{ marginBottom: '16px' }}>
-                                <Block numberOfBlocks={10} />
-                            </div>
-                        </Item>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-
-            <RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/accordion/Cover.tsx b/patterns/accordion/Cover.tsx
deleted file mode 100644
index a9f281f..0000000
--- a/patterns/accordion/Cover.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-import Rectangle from '../../placeholders/Rectangle';
-import Triangle from '../../placeholders/Triangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                        borderRadius: '4px',
-                        height: '100%',
-                        width: '100%',
-                    }}
-                >
-                    <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ marginRight: '4px' }}>
-                                <Triangle corner="r" size={6} />
-                            </div>
-                            <div style={{ flex: 1 }}>
-                                <Rectangle height={4} />
-                            </div>
-                        </div>
-                    </div>
-                    <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                padding: '8px',
-                            }}
-                        >
-                            <div style={{ marginRight: '4px' }}>
-                                <Triangle corner="b" size={6} />
-                            </div>
-                            <div style={{ flex: 1 }}>
-                                <Rectangle height={4} />
-                            </div>
-                        </div>
-                    </div>
-                    <div style={{ padding: '8px' }}>
-                        <div style={{ marginBottom: '4px', width: '60%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ width: '80%' }}>
-                            <Line />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/covers/_accordion.scss b/styles/covers/_accordion.scss
new file mode 100644
index 0000000..ab999e2
--- /dev/null
+++ b/styles/covers/_accordion.scss
@@ -0,0 +1,32 @@
+.accordion {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    height: 100%;
+    width: 100%;
+}
+.accordion__item:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+}
+.accordion__header {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    padding: 0.5rem;
+}
+.accordion__toggle {
+    margin-right: 0.25rem;
+}
+.accordion__title {
+    flex: 1;
+}
+.accordion__content {
+    padding: 0.5rem;
+}
+
+.accordion__item--collapsed .accordion__content {
+    display: none;
+}
+.accordion__item--expanded .accordion__content {
+    display: block;
+}
\ No newline at end of file