diff --git a/contents/_includes/patterns/drop-area.njk b/contents/_includes/patterns/drop-area.njk
new file mode 100644
index 0000000..013e87b
--- /dev/null
+++ b/contents/_includes/patterns/drop-area.njk
@@ -0,0 +1,3 @@
+<div class="drop-area">
+    {% lines "hor", 5 %}
+</div>
\ No newline at end of file
diff --git a/contents/drop-area.md b/contents/drop-area.md
new file mode 100644
index 0000000..c74673c
--- /dev/null
+++ b/contents/drop-area.md
@@ -0,0 +1,33 @@
+---
+layout: layouts/post.njk
+title: Drop area
+description: Create a dropping area with CSS flexbox
+keywords: css dropping area, css flexbox
+---
+
+## HTML
+
+```html
+<div class="drop-area">
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.drop-area {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Border */
+    border: 0.25rem dashed rgba(0, 0, 0, 0.3);
+    border-radius: 0.25rem;
+}
+```
+
+{% demo %}
+{% include "patterns/drop-area.njk" %}
+{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index 4eee67a..fa8a460 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -109,6 +109,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Dot leader</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/drop-area/">
+                    <div class="pattern__cover">{% include "patterns/drop-area.njk" %}</div>
+                    <div class="pattern__title">Drop area</div>
+                </a>
+            </div>
         </div>
     </div>
 
diff --git a/pages/drop-area/index.tsx b/pages/drop-area/index.tsx
deleted file mode 100644
index 5df7f1d..0000000
--- a/pages/drop-area/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.DropArea}>
-            <Head>
-                <meta name="description" content="Create a dropping area with CSS flexbox" />
-                <meta name="og:description" content="Create a dropping area with CSS flexbox" />
-                <meta name="twitter:description" content="Create a dropping area with CSS flexbox" />
-                <meta name="keywords" content="css dropping area, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    ...
-</div>
-`}
-                css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Border */
-    border: 4px dashed rgba(0, 0, 0, 0.3),
-    border-radius: 4px;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            border: '4px dashed rgba(0, 0, 0, 0.3)',
-                            borderRadius: '4px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '80%',
-                            justifyContent: 'center',
-                            width: '80%',
-                        }}
-                    >
-                        <div style={{ width: '40%' }}>
-                            <Block justify="center" numberOfBlocks={10} />
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/drop-area/Cover.tsx b/patterns/drop-area/Cover.tsx
deleted file mode 100644
index 561a74d..0000000
--- a/patterns/drop-area/Cover.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        border: '4px dashed rgba(0, 0, 0, 0.3)',
-                        borderRadius: '4px',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        width: '100%',
-                    }}
-                >
-                    <div style={{ marginBottom: '4px', width: '60%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '4px', width: '50%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ width: '30%' }}>
-                        <Line />
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 8fed585..dd73f35 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -27,6 +27,7 @@
 @import './patterns/diagonal-section';
 @import './patterns/docked-at-corner';
 @import './patterns/dot-leader';
+@import './patterns/drop-area';
 
 // Placeholders
 @import './placeholders/circle';
diff --git a/styles/patterns/_drop-area.scss b/styles/patterns/_drop-area.scss
new file mode 100644
index 0000000..469aa3e
--- /dev/null
+++ b/styles/patterns/_drop-area.scss
@@ -0,0 +1,14 @@
+.drop-area {
+    padding: 0.5rem;
+    height: 100%;
+    width: 100%;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Border */
+    border: 0.25rem dashed rgba(0, 0, 0, 0.3);
+    border-radius: 0.25rem;
+}
\ No newline at end of file
