diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index f9a34ac..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-    "plugins": [
-        "@loadable/babel-plugin",
-        ["prismjs", {
-            "languages": ["css", "html", "javascript", "jsx", "tsx"],
-            // "theme": "okaidia",
-            "css": true
-        }]
-    ],
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ]
-}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index aa7cfbd..35b0cc8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 .netlify
-dist
+.next
 node_modules
+out
 package-lock.json
 tslint.log
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..c998432
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+.netlify
+.next
+node_modules
+out
\ No newline at end of file
diff --git a/README.md b/README.md
index 8fae59a..945d9be 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,10 @@
 
 A collection of popular layouts and patterns made with CSS:
 
-* 🎉Zero dependencies
-* 🎉No frameworks
-* 🎉No CSS hacks
-* 🎉Real use cases
+* 🎉 Zero dependencies
+* 🎉 No frameworks
+* 🎉 No CSS hacks
+* 🎉 Real use cases
 * Good practices (coming soon)
 * Accessibility Support (coming soon)
 
@@ -27,24 +27,24 @@ By composing them, you can have any possible layout that exists in the real life
 
 - Clone the project:
 
-```console
-$ git clone https://github.com/phuoc-ng/csslayout
+```shell
+$ git clone https://github.com/1milligram/csslayout
 ```
 
 - Install the dependencies:
 
-```console
+```shell
 $ cd csslayout
 $ npm install
 ```
 
 - Run it on the local:
 
-```console
-$ npm run dev-server
+```shell
+$ npm run dev
 ```
 
-Visit http://localhost:1234 to see it in action.
+Visit http://localhost:3000 to see it in action.
 
 ## Contributing
 
@@ -52,7 +52,7 @@ PRs are welcomed. If you thing there are any missing useful layouts or patterns,
 
 It's important to note that you should run the following command to lint the code:
 
-```console
+```shell
 $ npm run lint
 ```
 
@@ -66,23 +66,3 @@ Be my friend on
 * [Twitter](https://twitter.com/nghuuphuoc)
 * [dev.to](https://dev.to/phuocng)
 * [Github](https://github.com/phuoc-ng)
-
-## Products
-
-You might be interested in my products:
-
-_Products_
-* [Blur Page - A browser extension to hide sensitive information on a web page](https://blur.page)
-* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support)
-* [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io)
-* [Form Validation - The best validation library for JavaScript](https://formvalidation.io)
-* [Intersection Observer Examples - Practical, real world examples of Intersection Observer](https://intersectionobserver.io)
-* [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev)
-
-_Resources_
-* [1LOC - Favorite JavaScript utilities in single line of code](https://1loc.dev)
-* [CSS Layout - A collection of popular layouts and patterns made with CSS](https://csslayout.io)
-* [HTML DOM - How to manage HTML DOM with vanilla JavaScript](https://htmldom.dev)
-* [Responsive Design Patterns - A collection of patterns to create a responsive web page](https://responsive.page)
-* [Super tiny, quick tips, tricks and best practices of front-end development](https://getfrontend.tips)
-* [this VS that - The differences between ___ and ___ in the front-end development](https://thisthat.dev)
diff --git a/bin/generateScreenshot.ts b/bin/generateScreenshot.ts
index b39e2ef..6311ad9 100644
--- a/bin/generateScreenshot.ts
+++ b/bin/generateScreenshot.ts
@@ -13,20 +13,20 @@ const main = () => {
     }
 
     const pattern = args[2];
-    
+
     (async () => {
-        const browser = await puppeteer.launch();    
-           
+        const browser = await puppeteer.launch();
+
         const page = await browser.newPage();
-        await page.goto(`http://localhost:1234/patterns/${pattern}`);
+        await page.goto(`http://localhost:3000/${pattern}`);
 
         await page.waitForSelector('.demo__live');
         const element = await page.$('.demo__live');
         await element.screenshot({
-            path: `public/assets/patterns/${pattern}.png`
+            path: `public/assets/patterns/${pattern}.png`,
         });
         await page.close();
-        
+
         await browser.close();
     })();
 };
diff --git a/client/App.tsx b/client/App.tsx
deleted file mode 100644
index 11765c4..0000000
--- a/client/App.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-router-dom';
-
-import './index.css';
-
-import ExplorePage from './pages/ExplorePage';
-import HomePage from './pages/HomePage';
-import PatternPage from './pages/PatternPage';
-
-const App = () => {
-    return (
-        <Router>
-            <RouteSwitch>
-                <Route exact={true} path='/'><HomePage /></Route>
-                <Route exact={true} path='/patterns'><ExplorePage /></Route>
-                <Route
-                    path='/patterns/:pattern'
-                    render={(props) => <PatternPage pattern={props.match.params.pattern as string} />} // tslint:disable-line
-                />
-            </RouteSwitch>
-        </Router>
-    );
-};
-
-export default App;
diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
deleted file mode 100644
index 350e12d..0000000
--- a/client/components/CoverCard.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-import Pattern from '../constants/Pattern';
-import slug from '../helpers/slug';
-import CoverLoader from '../loaders/CoverLoader';
-import './coverCard.css';
-
-interface CoverCardProps {
-    pattern: Pattern;
-}
-
-const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
-    return (
-        <Link
-            to={`/patterns/${slug(pattern)}`}
-            className="cover"
-        >
-            <CoverLoader pattern={pattern} />
-            <h4 className="cover__name">
-                {pattern}
-            </h4>
-        </Link>
-    );
-};
-
-export default CoverCard;
diff --git a/client/components/Heading.tsx b/client/components/Heading.tsx
deleted file mode 100644
index f402640..0000000
--- a/client/components/Heading.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import './heading.css';
-
-interface HeadingProps {
-    title: string;
-}
-
-const Heading: React.FC<HeadingProps> = ({ title }) => {
-    return (
-        <h3 className="heading">{title}</h3>
-    );
-};
-
-export default Heading;
diff --git a/client/components/Product.tsx b/client/components/Product.tsx
deleted file mode 100644
index dcee56b..0000000
--- a/client/components/Product.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import './product.css';
-import ProductModel from '../constants/ProductModel';
-import slug from '../helpers/slug';
-
-interface ProductProps {
-    product: ProductModel;
-}
-
-const Product: React.FC<ProductProps> = ({ product }) => {
-    return (
-        <div className="product" style={{ backgroundColor: product.themeColor }}>
-            <a href={product.url}>
-                <img className="product__logo" src={`/assets/${slug(product.name)}.png`} alt={`${product.name} - ${product.description}`} />
-                <h3 className="product__name">{product.name}</h3>
-                <div className="product__desc">{product.description}</div>
-            </a>
-        </div>
-    );
-};
-
-export default Product;
diff --git a/client/components/RelatedPatterns.tsx b/client/components/RelatedPatterns.tsx
deleted file mode 100644
index c403b3f..0000000
--- a/client/components/RelatedPatterns.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import Pattern from '../constants/Pattern';
-import CoverCard from './CoverCard';
-import Heading from './Heading';
-
-interface RelatedPatternsProps {
-    patterns: Pattern[];
-}
-
-const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
-    return (
-        <section>
-            <Heading title="Related patterns" />
-
-            <div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '24px' }}>
-                {
-                    patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
-                }
-            </div>
-        </section>
-    );
-};
-
-export default RelatedPatterns;
diff --git a/client/components/SampleCode.tsx b/client/components/SampleCode.tsx
deleted file mode 100644
index cafb366..0000000
--- a/client/components/SampleCode.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import highlight from '../helpers/highlight';
-
-interface SampleCodeProps {
-    code: string;
-    fullHeight?: boolean;
-    lang: string;
-}
-
-const SampleCode: React.FC<SampleCodeProps> = ({ code, fullHeight = false, lang }) => {
-    return code === ''
-            ? <></>
-            : (
-                <pre
-                    className={`language-${lang}`}
-                    dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
-                />
-            );
-};
-
-export default SampleCode;
diff --git a/client/components/ad.css b/client/components/ad.css
deleted file mode 100644
index 89b7ee0..0000000
--- a/client/components/ad.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-#carbonads {
-    border: 1px solid rgba(0, 0, 0, .3);
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-}
-.carbon-img {
-    display: block;
-    margin-bottom: 0.5rem;
-    text-align: center;
-}
-.carbon-poweredby {
-    display: block;
-    font-size: 0.75rem;
-    text-align: right;
-}
-.carbon-text {
-    display: block;
-}
diff --git a/client/components/heading.css b/client/components/heading.css
deleted file mode 100644
index 11077a6..0000000
--- a/client/components/heading.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.heading {
-    color: var(--color-gray-9);
-    display: grid;
-    font-size: 2rem;
-    grid-template-columns: 1fr auto 1fr;
-    grid-gap: 1rem;
-    text-align: center;
-}
-.heading::before,
-.heading::after {
-    align-self: center;
-    border-top: 0.25rem double var(--color-gray-9);
-    content: '';
-}
diff --git a/client/components/product.css b/client/components/product.css
deleted file mode 100644
index cfcbfde..0000000
--- a/client/components/product.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.product {
-    border-radius: 0.5rem;
-    color: #FFF;
-    margin: 1rem 0;
-    overflow: hidden;
-    padding: 1rem;
-}
-.product a {
-    color: #FFF;
-    text-align: center;
-    text-decoration: none;
-}
-.product__logo {
-    display: flex;
-    height: auto;
-    margin: 0 auto;
-    width: 6rem;
-}
-.product__name {
-    font-size: 1.5rem;
-    margin: 1rem;
-}
-.product__desc {
-    text-align: center;
-}
\ No newline at end of file
diff --git a/client/constants/ProductList.ts b/client/constants/ProductList.ts
deleted file mode 100644
index 0ab51a8..0000000
--- a/client/constants/ProductList.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import ProductModel from './ProductModel';
-
-const ProductList: ProductModel[] = [
-    {
-        name: 'Intersection Observer Examples',
-        url: 'https://intersectionobserver.io',
-        description: 'Practical, real world examples of Intersection Observer',
-        themeColor: '#024ca9',
-    },
-    {
-        name: 'Blur Page',
-        url: 'https://blur.page',
-        description: 'A browser extension to hide sensitive information on a web page',
-        themeColor: '#4e7fb8',
-    },
-    {
-        name: 'Check Browsers Support',
-        url: 'https://checkbrowsers.support',
-        description: 'A browser extension to check browser compatibility without leaving your tab',
-        themeColor: '#f33446',
-    },
-    {
-        name: 'Form Validation',
-        url: 'https://formvalidation.io',
-        description: 'The best validation library for JavaScript',
-        themeColor: '#014ba6',
-    },
-    {
-        name: 'React PDF Viewer',
-        url: 'https://react-pdf-viewer.dev',
-        description: 'A React component to view a PDF document',
-        themeColor: '#fb6303',
-    },
-    {
-        name: '1 LOC',
-        url: 'https://1loc.dev',
-        description: 'Favorite JavaScript utilities in single line of code',
-        themeColor: '#000200',
-    },
-    {
-        name: 'Front-end Tips',
-        url: 'https://getfrontend.tips',
-        description: 'Super tiny, quick tips, tricks and best practices of front-end development',
-        themeColor: '#2e2c74',
-    },
-    {
-        name: 'HTML DOM',
-        url: 'https://htmldom.dev',
-        description: 'How to manage HTML DOM with vanilla JavaScript',
-        themeColor: '#5b5d8a',
-    },
-    {
-        name: 'Responsive Design Patterns',
-        url: 'https://responsive.page',
-        description: 'A collection of patterns to create a responsive web page',
-        themeColor: '#43246d',
-    },
-    {
-        name: 'this VS that',
-        url: 'https://thisthat.dev',
-        description: 'The differences between _ and _ in the front-end development',
-        themeColor: '#414293',
-    },
-];
-
-export { ProductList };
diff --git a/client/constants/ProductModel.ts b/client/constants/ProductModel.ts
deleted file mode 100644
index fbb1b99..0000000
--- a/client/constants/ProductModel.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-export default interface ProductModel {
-    name: string;
-    url: string;
-    description: string;
-    themeColor: string;
-}
diff --git a/client/helpers/chunk.ts b/client/helpers/chunk.ts
deleted file mode 100644
index e90cfd5..0000000
--- a/client/helpers/chunk.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-function chunk<T>(arr: T[], size: number): T[][] {
-    return arr.reduce((acc, e, i) => (i % size ? acc[acc.length - 1].push(e) : acc.push([e]), acc), []);
-};
-
-export default chunk;
diff --git a/client/helpers/highlight.ts b/client/helpers/highlight.ts
deleted file mode 100755
index abd0271..0000000
--- a/client/helpers/highlight.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import Prism from 'prismjs';
-
-const highlight = (input: string, language: string) => {
-    const lang = language || 'html';
-    const value = Prism.highlight(input, Prism.languages[language], language);
-    const highlighted = value.replace('&amp;', '&').trim();
-
-    return `<code class="language-${lang}">${highlighted}</code>`;
-};
-
-export default highlight;
\ No newline at end of file
diff --git a/client/helpers/random.ts b/client/helpers/random.ts
deleted file mode 100644
index d1ca7fe..0000000
--- a/client/helpers/random.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
-
-export default random;
diff --git a/client/helpers/randomFromArray.ts b/client/helpers/randomFromArray.ts
deleted file mode 100644
index af9da8c..0000000
--- a/client/helpers/randomFromArray.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-function randomFromArray<T>(array: T[]): T {
-    return array[Math.floor(Math.random() * array.length)];
-};
-
-export default randomFromArray;
diff --git a/client/helpers/randomIterms.ts b/client/helpers/randomIterms.ts
deleted file mode 100644
index c0a4813..0000000
--- a/client/helpers/randomIterms.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-type Tuple<T> = [number, T[]];
-
-function randomItems<T>(arr: T[], count: number): T[] {
-    const result = arr.concat().reduce(
-        (p, _, __, arr) => {
-            const [a, b] = p;
-            return (a < count)
-                    ? [a + 1, b.concat(arr.splice(Math.random() * arr.length | 0, 1))]
-                    : p;
-        },
-        [0, []] as Tuple<T>
-    );
-    return (result as Tuple<T>)[1];
-};
-
-export default randomItems;
diff --git a/client/helpers/shuffe.ts b/client/helpers/shuffe.ts
deleted file mode 100644
index eb53299..0000000
--- a/client/helpers/shuffe.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-const shuffe = (array: number[]) => {
-    array.sort(() => Math.random() - 0.5);
-    return array;
-};
-
-export default shuffe;
diff --git a/client/helpers/slug.ts b/client/helpers/slug.ts
deleted file mode 100644
index 41fb445..0000000
--- a/client/helpers/slug.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-const slug = (item: string) => item.toLowerCase().split(' ').join('-');
-
-export default slug;
diff --git a/client/hooks/useInterval.ts b/client/hooks/useInterval.ts
deleted file mode 100644
index 7848f28..0000000
--- a/client/hooks/useInterval.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import { useEffect } from 'react';
-
-const useInterval = (callback: () => void, delay?: number) => {
-    useEffect(
-        () => {
-            const handler = () => callback();
-            if (delay !== null) {
-                const id = setInterval(handler, delay);
-                return () => clearInterval(id);
-            }
-        },
-        [delay],
-    );
-};
-
-export default useInterval;
diff --git a/client/index.css b/client/index.css
deleted file mode 100644
index 942a095..0000000
--- a/client/index.css
+++ /dev/null
@@ -1,179 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-:root {
-    --background-color: #e7d900;
-    --color-blue-6: #2563EB;
-    --color-gray-2: #E5E7EB;
-    --color-gray-5: #6B7280;
-    --color-gray-8: #27272A;
-    --color-gray-9: #111827;
-} 
-body {
-    font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    margin: 0;
-}
-* {
-    box-sizing: border-box;
-}
-a {
-    text-decoration: none;
-}
-
-::-webkit-scrollbar {
-    height: 0.5rem;
-    width: 0.5rem;
-}
-::-webkit-scrollbar-thumb {
-    background-color: var(--color-gray-5);
-    border-radius: 0.5rem;
-}
-::-webkit-scrollbar-track {
-    background-color: transparent;
-    border-radius: 0.5rem;
-}
-
-/* Layout */
-.container {
-    margin: 0 auto;
-    max-width: 80rem;
-    padding: 0 1rem;
-}
-.main {
-    flex: 1;
-    overflow: hidden;
-    padding: 4rem 0;
-}
-.sidebar {
-    display: none;
-    padding: 4rem 0;
-}
-
-/* Sidebar */
-.sidebar__inner {    
-    position: sticky;
-    top: 1rem;
-}
-
-/* Hero */
-.hero {
-    --current-background-color: var(--background-color);
-    background: var(--background-color);
-    display: flex;
-    justify-content: center;
-    padding-bottom: 1rem;
-}
-.hero__logo {
-    display: flex;
-    justify-content: center;
-}
-.hero__logo img {
-    object-fit: cover;
-    width: 16rem;
-}
-.hero__heading {
-    color: var(--color-gray-9);
-    font-size: 2rem;
-    line-height: 1.5;
-    text-align: center;
-    text-transform: uppercase;
-}
-.hero__subheading {
-    color: var(--color-gray-9);
-    font-size: 1.5rem;
-    line-height: 1.5;
-    text-align: center;
-}
-
-/*
-Prism theme
-Credit to https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/css/prism.css
-*/
-pre {
-    background: var(--color-gray-8);
-    border: none;
-    border-radius: 0px;
-    box-shadow: none;
-    color: #FFF;
-    font-family: "Source Code Pro", monospace;
-    font-size: 1rem;
-    line-height: 1.5;
-    margin: 0px;
-    overflow-x: auto;
-    padding: 1rem;
-    white-space: pre;
-}
-
-.token.tag,
-.token.class-name,
-.token.selector,
-.token.selector .class,
-.token.function {
-    color: #E879F9;
-}
-
-.token.attr-name,
-.token.keyword,
-.token.rule,
-.token.operator,
-.token.pseudo-class,
-.token.important {
-    color: #22D3EE;
-}
-
-.token.attr-value,
-.token.class,
-.token.string,
-.token.number,
-.token.unit,
-.token.color {
-    color: #BEF264;
-}
-
-.token.punctuation,
-.token.module,
-.token.property {
-    color: #BAE6FD;
-}
-
-.token.atapply .token:not(.rule):not(.important) {
-    color: inherit;
-}
-
-.language-shell .token:not(.comment) {
-    color: inherit;
-}
-
-.language-css .token.function {
-    color: inherit;
-}
-
-.token.comment {
-    color: #A1A1AA;
-}
-
-/* Responsive */
-@media (min-width: 640px) {
-    .content {
-        display: flex;
-    }
-    .sidebar {
-        display: block;
-        flex: 0 0 8rem;
-        margin-left: 0.5rem;
-    }
-}
-@media (min-width: 768px) {
-    .sidebar {
-        flex-basis: 12rem;
-        margin-left: 1rem;
-    }
-}
-@media (min-width: 1024px) {
-    .sidebar {
-        flex-basis: 16rem;
-        margin-left: 2rem;
-    }
-}
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
deleted file mode 100644
index 40fad5e..0000000
--- a/client/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="author" content="Nguyen Huu Phuoc" />
-    <meta property="og:site_name" content="CSS Layout" />
-    <meta property="og:type" content="website" />
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:creator" content="@nghuuphuoc" />
-    <meta property="twitter:site" content="@nghuuphuoc" />
-    <link href="/assets/favicon.png" rel="icon">
-    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Lato&display=swap" rel="stylesheet">
-</head>
-<body>
-    <div id="root"></div>
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script>
-<script>
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', 'UA-139616701-3');
-</script>
-</body>
-</html>
\ No newline at end of file
diff --git a/client/index.tsx b/client/index.tsx
deleted file mode 100644
index 003af80..0000000
--- a/client/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-
-import App from './App';
-
-const rootElement = document.getElementById('root');
-rootElement.hasChildNodes()
-    ? hydrate(<App />, rootElement)
-    : render(<App />, rootElement);
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
deleted file mode 100644
index 3c50e9f..0000000
--- a/client/layouts/DetailsLayout.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Ad from '../components/Ad';
-import Product from '../components/Product';
-import { ProductList } from '../constants/ProductList';
-import Pattern from '../constants/Pattern';
-import randomItems from '../helpers/randomIterms';
-import slug from '../helpers/slug';
-import CoverLoader from '../loaders/CoverLoader';
-import Layout from './Layout';
-
-interface DetailsLayoutProps {
-    pattern: Pattern;
-}
-
-const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
-    const products = React.useMemo(() => randomItems(ProductList, 3), []);
-    const patternSlug = slug(pattern);
-
-    return (
-        <Layout>
-            <Helmet>
-                <title>CSS Layout ∙ {pattern}</title>
-                <meta name="title" content={`CSS Layout ∙ ${pattern}`} />
-
-                <meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
-                <meta property="og:title" content={`CSS Layout ∙ ${pattern}`} />
-                <meta property="og:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
-
-                <meta property="twitter:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
-                <meta property="twitter:title" content={`CSS Layout ∙ ${pattern}`} />
-                <meta property="twitter:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
-            </Helmet>
-            <div className="hero">
-                <div className="container">
-                    <div className="hero__logo">
-                        <CoverLoader pattern={pattern} />
-                    </div>
-                    <h1 className="hero__heading">{pattern}</h1>
-                </div>
-            </div>
-            <div className="container">
-                <div className="content">
-                    <main className="main">
-                        {children}
-                    </main>
-                    <div className="sidebar">
-                        <div className="sidebar__inner">
-                            <Ad />
-                            {
-                                products.map(product => <Product key={product.name} product={product} />)
-                            }
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
-};
-
-export default DetailsLayout;
diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx
deleted file mode 100644
index 768833e..0000000
--- a/client/layouts/Footer.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import './footer.css';
-
-const Footer: React.FC<{}> = () => {
-    return (
-        <footer className="footer">
-            <div className="container">
-                <div className="footer__about">
-                    <div className="footer__author">
-                        <div>© 2019-{new Date().getFullYear()} Nguyen Huu Phuoc.</div>
-                        <div>All rights reserved</div>
-                    </div>
-                    <a className="footer__social" href="https://twitter.com/nghuuphuoc" rel="noopener noreferrer" target="_blank">
-                        <svg height="24" version="1.1" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M23,6.628l-2-0.5l1-2l-2.464,0.7c-1.809-1.688-4.644-1.589-6.332,0.22c-0.78,0.836-1.21,1.938-1.204,3.08v1 c-3.539,0.73-6.634-1.2-9.5-4.5c-0.5,2.667,0,4.667,1.5,6l-3-0.5c0.405,2.069,1.362,3.7,4,4l-2.5,1c1,2,2.566,2.31,5,2.5 c-1.893,1.353-4.174,2.054-6.5,2c12.755,5.669,20-2.664,20-10V8.3L23,6.628z" strokeLinecap="round" fill="none" stroke="currentColor" strokeLinejoin="round"></path>
-                        </svg>
-                    </a>
-                    <a className="footer__social" href="https://github.com/phuoc-ng" rel="noopener noreferrer" target="_blank">
-                        <svg height="24" version="1.1" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M12,.5A11.5,11.5,0,0,0,8.365,22.914c.574.1.756-.237.756-.541,0-.275.006-1.037,0-2-3.2.694-3.861-1.515-3.861-1.515a3.043,3.043,0,0,0-1.276-1.682c-1.044-.714.078-.7.078-.7a2.414,2.414,0,0,1,1.762,1.184,2.448,2.448,0,0,0,3.346.956A2.45,2.45,0,0,1,9.9,17.084c-2.553-.292-5.238-1.278-5.238-5.686A4.447,4.447,0,0,1,5.847,8.312a4.126,4.126,0,0,1,.112-3.043s.967-.309,3.162,1.18a10.883,10.883,0,0,1,5.76,0c2.2-1.488,3.159-1.18,3.159-1.18a4.131,4.131,0,0,1,.114,3.043A4.442,4.442,0,0,1,19.337,11.4c0,4.42-2.689,5.391-5.251,5.674a2.727,2.727,0,0,1,.787,2.12v3.184c0,.307.186.647.77.536A11.5,11.5,0,0,0,12,.5Z" strokeLinecap="round" fill="none" stroke="currentColor" strokeLinejoin="round"></path>
-                        </svg>
-                    </a>
-                </div>
-
-                <div className="footer__grid">
-                    <div className="footer__col">
-                        <ul className="footer__products">
-                            <li className="footer__product">
-                                <a href="https://blur.page" rel="noopener noreferrer" target="_blank" title="A browser extension to hide sensitive element on page">Blur Page</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://checkbrowsers.support" rel="noopener noreferrer" target="_blank" title="A browser extension to check browser compatibility without leaving your tab">Check Browsers Support</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://fakenumbers.io" rel="noopener noreferrer" target="_blank" title="A JavaScript library to fake a number">Fake Numbers</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://intersectionobserver.io" rel="noopener noreferrer" target="_blank" title="Practical, real world examples of Intersection Observer">Intersection Observer Examples</a>
-                            </li>                            
-                        </ul>
-                    </div>
-                    <div className="footer__col">
-                        <ul className="footer__products">                            
-                            <li className="footer__product">
-                                <a href="https://formvalidation.io" rel="noopener noreferrer" target="_blank" title="The best validation library for JavaScript">Form Validation</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://react-pdf-viewer.dev" rel="noopener noreferrer" target="_blank" title="A PDF viewer made for React">React PDF Viewer</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://1loc.dev" rel="noopener noreferrer" target="_blank" title="Favorite JavaScript utilities in single line of code">1 LOC (4.2k ★)</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://csslayout.io" rel="noopener noreferrer" target="_blank" title="A collection of popular layouts and patterns made with CSS">CSS Layout (3.5k ★)</a>
-                            </li>                            
-                        </ul>
-                    </div>
-                    <div className="footer__col">
-                        <ul className="footer__products">
-                            <li className="footer__product">
-                                <a href="https://getfrontend.tips" rel="noopener noreferrer" target="_blank" title="Super tiny, quick tips, tricks and best practices of front-end development">Front-end Tips</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://htmldom.dev" rel="noopener noreferrer" target="_blank" title="Common tasks of managing HTML DOM with native API">HTML DOM (3.7k ★)</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://responsive.page" rel="noopener noreferrer" target="_blank" title="A collection of patterns to create a responsive web page">Responsive Design Patterns</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://thisthat.dev" rel="noopener noreferrer"  target="_blank" title="What is the difference between ___ and ___ in the front-end development?">this VS that (750 ★)</a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </footer>
-    );
-};
-
-export default Footer;
diff --git a/client/layouts/Header.tsx b/client/layouts/Header.tsx
deleted file mode 100644
index 98c10f9..0000000
--- a/client/layouts/Header.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-import './header.css';
-
-const STARS_KEY = 'stars';
-
-const Header: React.FC<{}> = () => {
-    const stars = window.localStorage.getItem(STARS_KEY) || '';
-    const [totalStars, setTotalStars] = React.useState(stars);
-
-    React.useEffect(() => {
-        if (window.location.pathname === '/' || stars === '') {
-            fetch('https://api.github.com/repos/phuoc-ng/csslayout')
-                .then(res => res.json())
-                .then(data => setTotalStars(data.stargazers_count))
-                .catch(console.log);
-        }
-    }, []);
-
-    React.useEffect(() => window.localStorage.setItem(STARS_KEY, totalStars), [totalStars]);
-
-    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">{totalStars}★</a>
-                </div>
-            </div>
-        </header>
-    );
-};
-
-export default Header;
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
deleted file mode 100644
index 0633eb8..0000000
--- a/client/layouts/Layout.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import Footer from './Footer';
-import Header from './Header';
-
-const Layout: React.FC<{}> = ({ children }) => {
-    React.useEffect(() => {
-        window.scrollTo(0, 0);
-    }, []);
-
-    return (
-        <>
-            <Header />
-            {children}
-            <Footer />
-        </>
-    );
-};
-
-export default Layout;
diff --git a/client/layouts/footer.css b/client/layouts/footer.css
deleted file mode 100644
index 2457bdf..0000000
--- a/client/layouts/footer.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.footer {
-    padding: 2rem 0;
-}
-.footer__about {
-    border-bottom: 1px solid var(--color-gray-2);
-    color: var(--color-gray-9);
-    display: flex;
-    margin-bottom: 1rem;
-    padding-bottom: 1rem;
-}
-.footer__author {
-    flex: 1;
-}
-.footer__social {
-    margin-left: 0.5rem;
-    color: var(--color-gray-5);
-}
-.footer__grid {
-    margin-left: -1rem;
-    margin-right: -1rem;
-}
-.footer__col {
-    flex: 1;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-.footer__products {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-.footer__product {
-    margin: 0.25rem 0;
-}
-.footer__product a {
-    color: var(--color-gray-5);
-}
-@media (min-width: 640px) {
-    .footer__grid {
-        display: flex;
-    }
-}
\ No newline at end of file
diff --git a/client/layouts/header.css b/client/layouts/header.css
deleted file mode 100644
index 68b06d6..0000000
--- a/client/layouts/header.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.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(--color-gray-9);
-    margin-left: 1rem;
-}
\ No newline at end of file
diff --git a/client/loaders/CoverLoader.tsx b/client/loaders/CoverLoader.tsx
deleted file mode 100644
index af6ee25..0000000
--- a/client/loaders/CoverLoader.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import loadable, { LoadableComponent } from '@loadable/component';
-
-import Pattern from '../constants/Pattern';
-
-interface CoverLoaderProps {
-    pattern: Pattern;
-}
-
-const slug = (item: string) => item.toLowerCase().split(' ').join('-');
-
-const CoverLoader: LoadableComponent<CoverLoaderProps> = loadable((props: CoverLoaderProps) => import(`../patterns/${slug(props.pattern)}/Cover`));
-
-export default CoverLoader;
diff --git a/client/loaders/DetailsLoader.tsx b/client/loaders/DetailsLoader.tsx
deleted file mode 100644
index 1657d98..0000000
--- a/client/loaders/DetailsLoader.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import loadable, { LoadableComponent } from '@loadable/component';
-import * as React from 'react';
-
-import './spinner.css';
-
-interface DetailsLoaderProps {
-    pattern: string;
-}
-
-const slug = (item: string) => item.toLowerCase().split(' ').join('-');
-
-// In order to create a link to another page that is dynamically loaded (via <Link to="...">),
-// the page chunks have to be loadable by @loadable.
-// We have to add a magic comment /* #__LOADABLE__ */ here
-// and the following plugin to Babel's settings (.babelrc):
-//  {
-//      "plugins": ["@loadable/babel-plugin"],
-//  }
-const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`../patterns/${slug(props.pattern)}/Details`);
-
-const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
-    fallback: (
-        <div
-            style={{
-                alignItems: 'center',
-                display: 'flex',
-                height: '100%',
-                justifyContent: 'center',
-                width: '100%',
-            }}
-        >
-            <svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">
-                <circle
-                    cx="16"
-                    cy="16"
-                    fill="none"
-                    r="12"
-                    stroke="rgba(0, 0, 0, 0.4)"
-                    strokeDasharray={Math.PI * 2 * 9}
-                    strokeLinecap="round"
-                    strokeWidth="4"
-                />
-            </svg>
-        </div>
-    ),
-});
-
-export default DetailsLoader;
diff --git a/client/loaders/spinner.css b/client/loaders/spinner.css
deleted file mode 100644
index bc6cea3..0000000
--- a/client/loaders/spinner.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.spinner {
-    animation-duration: 750ms;
-    animation-name: viewer-spinner-transform;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    transition-property: transform;
-}
-
-@keyframes viewer-spinner-transform {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
deleted file mode 100644
index f0c646a..0000000
--- a/client/pages/ExplorePage.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Ad from '../components/Ad';
-import CoverCard from '../components/CoverCard';
-import Heading from '../components/Heading';
-import Product from '../components/Product';
-import Pattern from '../constants/Pattern';
-import { ProductList } from '../constants/ProductList';
-import Layout from '../layouts/Layout';
-import './explorePage.css';
-
-const ExplorePage = () => {
-    const numPatterns = Object.keys(Pattern).length;
-
-    return (
-        <Layout>
-            <Helmet>
-                <title>CSS Layout ∙ Patterns</title>
-                <meta name="title" content="CSS Layout ∙ Patterns" />
-                <meta name="description" content="CSS layouts and patterns" />
-                <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
-
-                <meta property="og:description" content="CSS layouts and patterns" />
-                <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
-                <meta property="og:title" content="CSS Layout ∙ Patterns" />
-                <meta property="og:url" content="https://csslayout.io/patterns" />
-
-                <meta property="twitter:description" content="CSS layouts and patterns" />
-                <meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
-                <meta property="twitter:title" content="CSS Layout ∙ Patterns" />
-                <meta property="twitter:url" content="https://csslayout.io/patterns" />
-            </Helmet>
-            <div className="hero">
-                <div className="container">
-                    <h1 className="hero__heading">Collection of {numPatterns} patterns</h1>
-                    <h2 className="hero__subheading">Covers are made with CSS only. Inspect them!</h2>
-                </div>
-            </div>
-
-            <div className="container">
-                <div className="content">
-                    <main className="main">
-                        <section>
-                            <Heading title="Layout" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.CardLayout} />
-                                <CoverCard pattern={Pattern.HolyGrail} />
-                                <CoverCard pattern={Pattern.MasonryGrid} />
-                                <CoverCard pattern={Pattern.SameHeightColumns} />
-                                <CoverCard pattern={Pattern.Sidebar} />
-                                <CoverCard pattern={Pattern.SimpleGrid} />
-                                <CoverCard pattern={Pattern.SplitScreen} />
-                                <CoverCard pattern={Pattern.StickyFooter} />
-                                <CoverCard pattern={Pattern.StickyHeader} />
-                                <CoverCard pattern={Pattern.StickySections} />
-                            </div>
-                        </section>
-
-                        <section>
-                            <Heading title="Navigation" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.Breadcrumb} />
-                                <CoverCard pattern={Pattern.CircularNavigation} />
-                                <CoverCard pattern={Pattern.DotNavigation} />
-                                <CoverCard pattern={Pattern.Drawer} />
-                                <CoverCard pattern={Pattern.Dropdown} />
-                                <CoverCard pattern={Pattern.FullScreenMenu} />
-                                <CoverCard pattern={Pattern.MegaMenu} />
-                                <CoverCard pattern={Pattern.Menu} />
-                                <CoverCard pattern={Pattern.NestedDropdowns} />
-                                <CoverCard pattern={Pattern.Pagination} />
-                                <CoverCard pattern={Pattern.PreviousNextButtons} />
-                                <CoverCard pattern={Pattern.SplitNavigation} />
-                                <CoverCard pattern={Pattern.Tab} />
-                                <CoverCard pattern={Pattern.Wizard} />
-                            </div>
-                        </section>
-
-                        <section>
-                            <Heading title="Input" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.ButtonWithIcon} />
-                                <CoverCard pattern={Pattern.Chip} />
-                                <CoverCard pattern={Pattern.CustomCheckboxButton} />
-                                <CoverCard pattern={Pattern.CustomRadioButton} />
-                                <CoverCard pattern={Pattern.FloatingLabel} />
-                                <CoverCard pattern={Pattern.InputAddon} />
-                                <CoverCard pattern={Pattern.RadioButtonGroup} />
-                                <CoverCard pattern={Pattern.RadioSwitch} />
-                                <CoverCard pattern={Pattern.Rating} />
-                                <CoverCard pattern={Pattern.SearchBox} />
-                                <CoverCard pattern={Pattern.Slider} />
-                                <CoverCard pattern={Pattern.SpinButton} />
-                                <CoverCard pattern={Pattern.StepperInput} />
-                                <CoverCard pattern={Pattern.Switch} />
-                                <CoverCard pattern={Pattern.TogglePasswordVisibility} />
-                                <CoverCard pattern={Pattern.UploadButton} />
-                            </div>
-                        </section>
-
-                        <section>
-                            <Heading title="Display" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.Accordion} />
-                                <CoverCard pattern={Pattern.ArrowButtons} />
-                                <CoverCard pattern={Pattern.Avatar} />
-                                <CoverCard pattern={Pattern.AvatarList} />
-                                <CoverCard pattern={Pattern.Badge} />
-                                <CoverCard pattern={Pattern.Card} />
-                                <CoverCard pattern={Pattern.Centering} />
-                                <CoverCard pattern={Pattern.CloseButton} />
-                                <CoverCard pattern={Pattern.ColorSwatch} />
-                                <CoverCard pattern={Pattern.ConcaveCorners} />
-                                <CoverCard pattern={Pattern.CookieBanner} />
-                                <CoverCard pattern={Pattern.CornerRibbon} />
-                                <CoverCard pattern={Pattern.CurvedBackground} />
-                                <CoverCard pattern={Pattern.DiagonalSection} />
-                                <CoverCard pattern={Pattern.DockedAtCorner} />
-                                <CoverCard pattern={Pattern.DotLeader} />
-                                <CoverCard pattern={Pattern.DropArea} />
-                                <CoverCard pattern={Pattern.DropCap} />
-                                <CoverCard pattern={Pattern.FadingLongSection} />
-                                <CoverCard pattern={Pattern.FeatureComparison} />
-                                <CoverCard pattern={Pattern.FeatureList} />
-                                <CoverCard pattern={Pattern.FixedAtCorner} />
-                                <CoverCard pattern={Pattern.FixedAtSide} />
-                                <CoverCard pattern={Pattern.FolderStructure} />
-                                <CoverCard pattern={Pattern.FullBackground} />
-                                <CoverCard pattern={Pattern.InitialAvatar} />
-                                <CoverCard pattern={Pattern.InvertedCorners} />
-                                <CoverCard pattern={Pattern.KeyboardShortcut} />
-                                <CoverCard pattern={Pattern.LayeredCard} />
-                                <CoverCard pattern={Pattern.LinedPaper} />
-                                <CoverCard pattern={Pattern.MediaObject} />
-                                <CoverCard pattern={Pattern.OverlayPlayButton} />
-                                <CoverCard pattern={Pattern.PriceTag} />
-                                <CoverCard pattern={Pattern.PricingTable} />
-                                <CoverCard pattern={Pattern.PropertyList} />
-                                <CoverCard pattern={Pattern.QuestionsAndAnswers} />
-                                <CoverCard pattern={Pattern.Ribbon} />
-                                <CoverCard pattern={Pattern.Separator} />
-                                <CoverCard pattern={Pattern.StackedCards} />
-                                <CoverCard pattern={Pattern.StampBorder} />
-                                <CoverCard pattern={Pattern.Statistic} />
-                                <CoverCard pattern={Pattern.StatusLight} />
-                                <CoverCard pattern={Pattern.StickyTableColumn} />
-                                <CoverCard pattern={Pattern.StickyTableHeaders} />
-                                <CoverCard pattern={Pattern.Teardrop} />
-                                <CoverCard pattern={Pattern.ThreeDimensionsCard} />
-                                <CoverCard pattern={Pattern.Timeline} />
-                                <CoverCard pattern={Pattern.TreeDiagram} />
-                                <CoverCard pattern={Pattern.TriangleButtons} />
-                                <CoverCard pattern={Pattern.VideoBackground} />
-                                <CoverCard pattern={Pattern.Voting} />
-                                <CoverCard pattern={Pattern.Watermark} />
-                                <CoverCard pattern={Pattern.ZigzagTimeline} />
-                            </div>
-                        </section>
-
-                        <section>
-                            <Heading title="Feedback" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.Modal} />
-                                <CoverCard pattern={Pattern.Notification} />
-                                <CoverCard pattern={Pattern.PopoverArrow} />
-                                <CoverCard pattern={Pattern.ProgressBar} />
-                                <CoverCard pattern={Pattern.RadialProgressBar} />
-                                <CoverCard pattern={Pattern.ResizableElement} />
-                                <CoverCard pattern={Pattern.PresenceIndicator} />
-                                <CoverCard pattern={Pattern.Tooltip} />
-                                <CoverCard pattern={Pattern.ValidationIcon} />
-                            </div>
-                        </section>
-                    </main>
-
-                    <div className="sidebar">
-                        <div className="sidebar__inner">
-                            <Ad />
-                            {
-                                ProductList.map(product => <Product key={product.name} product={product} />)
-                            }
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
-};
-
-export default ExplorePage;
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
deleted file mode 100644
index b128661..0000000
--- a/client/pages/HomePage.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import './homePage.css';
-
-import CoverCard from '../components/CoverCard';
-import Pattern from '../constants/Pattern';
-import chunk from '../helpers/chunk';
-import Layout from '../layouts/Layout';
-
-const NUM_SLIDES = 3;
-
-const HomePage = () => {
-    const numPatterns = Object.keys(Pattern).length;
-
-    const numPatternsPerSlide = Math.floor(numPatterns / NUM_SLIDES);
-    const groups = chunk(Object.entries(Pattern).map(([_, v]) => v).slice(0, NUM_SLIDES * numPatternsPerSlide), numPatternsPerSlide);
-
-    return (
-        <Layout>
-            <Helmet>
-                <title>CSS Layout</title>
-                <meta name="title" content="CSS Layout" />
-                <meta name="description" content="CSS layouts and patterns" />
-                <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
-                
-                <meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
-                <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />                
-                <meta property="og:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
-                <meta property="og:url" content="https://csslayout.io" />
-                
-                <meta property="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
-                <meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />                
-                <meta property="twitter:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
-                <meta property="twitter:url" content="https://csslayout.io" />
-            </Helmet>
-            <div className="hero">
-                <div className="container">
-                    <div className="hero__logo"><img src="/assets/logo.png" alt="CSS Layout" /></div>
-                    <h1 className="home__heading">CSS Layout</h1>
-                    <h2 className="hero__subheading">Popular Layouts & patterns made with CSS</h2>
-                </div>
-            </div>
-
-            <div className="container">
-                <div className="home__features">
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M0.500 12.000 A11.500 11.500 0 1 0 23.500 12.000 A11.500 11.500 0 1 0 0.500 12.000 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4.5,14.5v-4a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4.5 12.5L6 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5 14.5L8.5 9.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5,9.5h.75a1.25,1.25,0,0,1,0,2.5H8.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M10.5 14.5L9 12" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M14.5,14.5h-1a1,1,0,0,1-1-1v-3a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.5 12.5L14.5 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M18.5,14.5h-1a1,1,0,0,1-1-1v-3a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.5 12.5L18.5 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">
-                            Zero Dependencies
-                        </div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M0.500 2.500 L23.500 2.500 L23.500 21.500 L0.500 21.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.5 7.5L23.5 7.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4,4.75A.25.25,0,1,1,3.75,5,.25.25,0,0,1,4,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7,4.75A.25.25,0,1,1,6.75,5,.25.25,0,0,1,7,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M10,4.75A.25.25,0,1,1,9.75,5,.25.25,0,0,1,10,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5,11.5a2,2,0,0,0-2,2v1a2,2,0,0,0,2,2" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.5,11.5h-1a1,1,0,0,0-1,1c0,1.5,2,1.5,2,3a1,1,0,0,1-1,1h-1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.5,11.5h-1a1,1,0,0,0-1,1c0,1.5,2,1.5,2,3a1,1,0,0,1-1,1h-1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">No Frameworks</div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M13.514 23.5L10.514 23.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M14.514 21.5L9.514 21.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.014 0.5L12.014 3.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.528 4.015L5.65 6.136" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M20.499 4.015L18.378 6.136" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.514 12.5L3.514 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M23.514 12.5L20.514 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M18.014,12.5a6,6,0,1,0-9.429,4.917,1,1,0,0,1,.429.821V19a.5.5,0,0,0,.5.5h5a.5.5,0,0,0,.5-.5v-.763a1,1,0,0,1,.429-.821A5.98,5.98,0,0,0,18.014,12.5Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">
-                            No CSS Hacks
-                        </div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M9.000 9.500 A3 1.5 0 1 0 15.000 9.500 A3 1.5 0 1 0 9.000 9.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.000 3.500 A3 1.5 0 1 0 15.000 3.500 A3 1.5 0 1 0 9.000 3.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.000 6.500 A3 1.5 0 1 0 22.000 6.500 A3 1.5 0 1 0 16.000 6.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M2.500 6.500 A3 1.5 0 1 0 8.500 6.500 A3 1.5 0 1 0 2.500 6.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.737 4.484L7.582 5.421" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.694 5.541L14.261 4.483" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.074,7.381,1.1,8.239a1,1,0,0,0-.6.917v6.7a1,1,0,0,0,.586.91L11.1,21.32a1,1,0,0,0,.8.013l10.983-4.577a1,1,0,0,0,.615-.923V9.156a1,1,0,0,0-.6-.917L21.2,7.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M11.5 13.5L11.5 21.408" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M23.315 8.577L11.5 13.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M11.5 13.5L0.681 8.582" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">Real Use Cases</div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M20,15.659h0a1.5,1.5,0,1,1,0,3H19a1.5,1.5,0,0,1,1.5,1.5c0,.829-.672,1-1.5,1H12.5c-2.851,0-3.5-.5-7-1v-8.5c2.45,0,6.5-4.5,6.5-8.5,0-1.581,2.189-2.17,3,.719.5,1.781-1,5.281-1,5.281h8a1.5,1.5,0,0,1,1.5,1.5c0,.829-.672,2-1.5,2H21a1.5,1.5,0,0,1,0,3H20" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.5 10.159H5.5V22.159H0.5z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.25 19.659L3.25 19.659" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.25,19.659a.25.25,0,1,0,.25.25.25.25,0,0,0-.25-.25" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">Good Practices <div className="home__soon">soon</div></div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M7,6,8.362,16.44a1,1,0,0,0,1.184.853C11.644,16.882,16.233,16,17,16c1,0,1.5,5.5,2,5.5a11.343,11.343,0,0,0,2-.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7.389,12.557A5.645,5.645,0,0,0,3,18a5.487,5.487,0,0,0,5.4,5.5A5.66,5.66,0,0,0,14,18V16.451" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.456,3.227A2.728,2.728,0,1,1,6.728.5,2.728,2.728,0,0,1,9.456,3.227Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7.389 12.557L13.5 11" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">Accessibility Support <div className="home__soon">soon</div></div>
-                    </div>
-                </div>
-
-                <section className="home__patterns">
-                    <div className="home__overlay">
-                        <div className="home__heading">{numPatterns} patterns</div>
-                        <Link to="/patterns" className="home__explore">Explore the collection</Link>
-                    </div>
-                    <div className="home__sliders">
-                    {
-                        groups.map((patterns, index) => (
-                            <div className="home__slide" key={index}>
-                            {
-                                patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
-                            }
-                            </div>
-                        ))
-                    }
-                    </div>
-                </section>
-            </div>
-        </Layout>
-    );
-};
-
-export default HomePage;
diff --git a/client/pages/PatternPage.tsx b/client/pages/PatternPage.tsx
deleted file mode 100644
index 5b6bcb8..0000000
--- a/client/pages/PatternPage.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import Pattern from '../constants/Pattern';
-import DetailsLoader from '../loaders/DetailsLoader';
-
-interface PatternPageProps {
-    pattern: string;
-}
-
-const capitalizeFirstLetter = (s: string) => `${s.charAt(0).toUpperCase()}${s.slice(1)}`;
-
-const PatternPage: React.FC<PatternPageProps> = ({ pattern }) => {
-    const name = pattern.split('-').map((s) => capitalizeFirstLetter(s)).join('');
-    const patterns = Object.keys(Pattern);
-
-    return (
-        patterns.indexOf(name) === -1
-            // TODO: Render 404
-            ? <div>404</div>
-            : <DetailsLoader pattern={pattern} />
-    );
-};
-
-export default PatternPage;
diff --git a/client/pages/explorePage.css b/client/pages/explorePage.css
deleted file mode 100644
index 5f4b5a8..0000000
--- a/client/pages/explorePage.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.explore__collection {
-    display: flex;
-    flex-wrap: wrap;
-}
\ No newline at end of file
diff --git a/client/pages/homePage.css b/client/pages/homePage.css
deleted file mode 100644
index 059c0ae..0000000
--- a/client/pages/homePage.css
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
- 
-.home__features {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 1rem -1rem;
-}
-.home__feature {
-    padding: 1rem;
-    text-align: center;
-    width: 100%;
-}
-.home__icon {
-    color: var(--color-blue-6);
-    margin-bottom: 1rem;
-}
-.home__title {
-    color: var(--color-gray-5);
-    font-size: 1.5rem;
-    font-weight: 600;
-}
-
-.home__patterns {
-    height: 80rem;
-    overflow: hidden;
-    position: relative;
-}
-
-.home__overlay {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 10;
-}
-.home__heading {
-    color: var(--color-gray-9);
-    font-size: 3rem;
-    font-weight: 600;
-    margin: 1rem;
-    text-align: center;
-}
-.home__explore {
-    background-color: var(--background-color);
-    border-radius: 0.4rem;
-    color: var(--color-gray-9);
-    font-size: 1.5rem;
-    font-weight: 600;
-    padding: 1rem 2rem;
-}
-
-.home__sliders {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    opacity: 0.8;
-}
-.home__slide {
-    animation: slide 20s linear infinite;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    will-change: transform;
-}
-
-.home__soon {
-    background: #1e1d6e;
-    border-radius: 9999px;
-    color: #fff;
-    display: inline-block;
-    padding: 0.125rem 1rem;
-}
-
-@keyframes slide {
-    from {
-        transform: translateY(0);
-    }
-    to {
-        transform: translateY(-100%);
-    }
-}
-
-/* Responsive */
-@media (min-width: 640px) {
-    .home__feature {
-        width: 50%;
-    }
-}
-@media (min-width: 1024px) {
-    .home__feature {
-        width: 33.333333%;
-    }
-}
\ No newline at end of file
diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx
deleted file mode 100644
index 23d6a77..0000000
--- a/client/patterns/accordion/Details.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-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 (
-        <DetailsLayout pattern={Pattern.Accordion}>
-            <Helmet>
-                <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" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <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>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/arrow-buttons/Details.tsx b/client/patterns/arrow-buttons/Details.tsx
deleted file mode 100644
index 7557c75..0000000
--- a/client/patterns/arrow-buttons/Details.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ArrowButtons}>
-            <Helmet>
-                <meta name="description" content="Create arrow buttons with CSS" />
-                <meta name="og:description" content="Create arrow buttons with CSS" />
-                <meta name="twitter:description" content="Create arrow buttons with CSS" />
-                <meta name="keywords" content="css arrow buttons" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Up arrow button -->
-<button class="button">
-    <!-- Arrow -->
-    <div class="button__arrow button__arrow--up"></div>
-
-    <!-- Content -->
-    ...
-</button>
-
-<!-- Right arrow button -->
-<button class="button">
-    <!-- Content -->
-    ...
-
-    <!-- Arrow -->
-    <div class="button__arrow button__arrow--right"></div>
-</button>
-
-<!-- Down arrow button -->
-<button class="button">
-    <!-- Arrow -->
-    <div class="button__arrow button__arrow--down"></div>
-
-    <!-- Content -->
-    ...
-</button>
-
-<!-- Left arrow button -->
-<button class="button">
-    <!-- Arrow -->
-    <div class="button__arrow button__arrow--left"></div>
-
-    <!-- Content -->
-    ...
-</button>
-`}
-css={`
-.button {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-}
-
-.button__arrow {
-    /* Transparent background */
-    background-color: transparent;
-
-    /* Size */
-    height: 12px;
-    width: 12px;
-}
-
-.button__arrow--up {
-    /* Edges */
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translateY(25%) rotate(45deg);
-}
-
-.button__arrow--right {
-    /* Edges */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translateX(-25%) rotate(45deg);
-}
-
-.button__arrow--down {
-    /* Edges */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translateY(-25%) rotate(45deg);
-}
-
-.button__arrow--left {
-    /* Edges */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translateX(25%) rotate(45deg);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                height: '200px',
-                                position: 'relative',
-                                width: '200px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            backgroundColor: 'transparent',
-                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                            height: '12px',
-                                            transform: 'translateY(25%) rotate(45deg)',
-                                            width: '12px',
-                                        }}
-                                    />
-                                    <div style={{ marginLeft: '8px' }}>Up</div>
-                                </button>
-                            </div>
-                            <div
-                                style={{
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translate(50%, -50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>Right</div>
-                                    <div
-                                        style={{
-                                            backgroundColor: 'transparent',
-                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                            height: '12px',
-                                            transform: 'translateX(-25%) rotate(45deg)',
-                                            width: '12px',
-                                        }}
-                                    />
-                                </button>
-                            </div>
-                            <div
-                                style={{
-                                    bottom: 0,
-                                    left: '50%',
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, 50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            backgroundColor: 'transparent',
-                                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                            height: '12px',
-                                            transform: 'translateY(-25%) rotate(45deg)',
-                                            width: '12px',
-                                        }}
-                                    />
-                                    <div style={{ marginLeft: '8px' }}>Down</div>
-                                </button>
-                            </div>
-                            <div
-                                style={{
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            backgroundColor: 'transparent',
-                                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                            height: '12px',
-                                            transform: 'translateX(25%) rotate(45deg)',
-                                            width: '12px',
-                                        }}
-                                    />
-                                    <div style={{ marginLeft: '8px' }}>Left</div>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
deleted file mode 100644
index a457c6c..0000000
--- a/client/patterns/avatar-list/Details.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Avatar: React.FC<{}> = ({ children }) => {
-    return (
-        <div
-            style={{
-                alignItems: 'center',
-                backgroundColor: '#BBB',
-                borderRadius: '9999px',
-                boxShadow: '0 0 0 4px #FFF',
-                color: '#FFF',
-                display: 'flex',
-                height: '48px',
-                justifyContent: 'center',
-                width: '48px',
-            }}
-        >
-            {children}
-        </div>
-    );
-};
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.AvatarList}>
-            <Helmet>
-                <meta name="description" content="Create an avatar list with CSS flexbox" />
-                <meta name="og:description" content="Create an avatar list with CSS flexbox" />
-                <meta name="twitter:description" content="Create an avatar list with CSS flexbox" />
-                <meta name="keywords" content="css avatar, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="avatars">
-    <!-- Avatar item -->
-    <div class="avatars__item">
-        <div class="avatars__image">
-            <!-- Image -->
-            ...
-        </div>
-    </div>
-
-    <!-- Repeat other avatars -->
-    ...
-</div>
-`}
-css={`
-.avatars {
-    display: flex;
-}
-
-.avatars__item {
-    /* Nagative margin make avatar overlap to previous one */
-    margin-left: -4px;
-}
-
-.avatars__image {
-    /* Add a white curve between avatars */
-    box-shadow: 0 0 0 4px #FFF;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Rounded border */
-    border-radius: 9999px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                        <div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[Pattern.Avatar, Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
deleted file mode 100644
index b9164b4..0000000
--- a/client/patterns/badge/Details.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Badge}>
-            <Helmet>
-                <meta name="description" content="Create a badge component with CSS flexbox" />
-                <meta name="og:description" content="Create a badge component with CSS flexbox" />
-                <meta name="twitter:description" content="Create a badge component with CSS flexbox" />
-                <meta name="keywords" content="css badge, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="badge">
-    ...
-</div>
-`}
-css={`
-.badge {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-    color: #FFF;
-
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 32px;
-    width: 32px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderRadius: '9999px',
-                                color: '#FFF',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                fontSize: '20px',
-                                height: '32px',
-                                justifyContent: 'center',
-                                width: '32px',
-                            }}
-                        >
-                            1
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/breadcrumb/Details.tsx b/client/patterns/breadcrumb/Details.tsx
deleted file mode 100644
index d137565..0000000
--- a/client/patterns/breadcrumb/Details.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Breadcrumb}>
-            <Helmet>
-                <meta name="description" content="Create a breadcrumb with CSS flexbox" />
-                <meta name="og:description" content="Create a breadcrumb with CSS flexbox" />
-                <meta name="twitter:description" content="Create a breadcrumb with CSS flexbox" />
-                <meta name="keywords" content="css breadcrumb, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="breadcrumb">
-    <!-- Breadcrumb item -->
-    <a>...</a>
-
-    <!-- Separator -->
-    <div class="breadcrumb__separator">/</div>
-
-    <!-- Repeated items and separators -->
-    ...
-</div>
-`}
-css={`
-.breadcrumb {
-    /* Content is centered vertically */
-    align-items: center;
-    display: flex;
-}
-
-.breadcrumb__separator {
-    margin: 0 8px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ alignItems: 'center', display: 'flex' }}>
-                            <div style={{ width: '128px' }}><Rectangle height={16} /></div>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
-                            <div style={{ width: '32px' }}><Rectangle height={16} /></div>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
-                            <div style={{ width: '64px' }}><Rectangle height={16} /></div>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
-                            <div style={{ width: '32px' }}><Rectangle height={16} /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
deleted file mode 100644
index fcf1325..0000000
--- a/client/patterns/button-with-icon/Details.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ButtonWithIcon}>
-            <Helmet>
-                <meta name="description" content="Create an icon button with CSS flexbox" />
-                <meta name="og:description" content="Create an icon button with CSS flexbox" />
-                <meta name="twitter:description" content="Create an icon button with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css icon button" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<button class="button">
-    <!-- Icon -->
-    ...
-
-    <!-- Label -->
-    ...
-</div>
-`}
-css={`
-.button {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <button
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '8px',
-                                    display: 'flex',
-                                    height: '64px',
-                                    padding: '8px',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ marginRight: '8px' }}><Circle size={32} /></div>
-                                <Rectangle />
-                            </button>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
deleted file mode 100644
index 9cfdbfd..0000000
--- a/client/patterns/centering/Details.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Centering}>
-            <Helmet>
-                <meta name="description" content="Center an element with CSS flexbox" />
-                <meta name="og:description" content="Center an element with CSS flexbox" />
-                <meta name="twitter:description" content="Center an element with CSS flexbox" />
-                <meta name="keywords" content="css centering, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-.container {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <Circle size={64} />
-                        <div style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
-                        <div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
-                        <div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/chip/Details.tsx b/client/patterns/chip/Details.tsx
deleted file mode 100644
index 9c838b8..0000000
--- a/client/patterns/chip/Details.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import InputChip from './InputChip';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Chip}>
-            <Helmet>
-                <meta name="description" content="Create a chip component with CSS flexbox" />
-                <meta name="og:description" content="Create a chip component with CSS flexbox" />
-                <meta name="twitter:description" content="Create a chip component with CSS flexbox" />
-                <meta name="keywords" content="css chip, css flexbox, css tag" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
-                </div>
-                <BrowserFrame
-html={`
-<div class="chip">
-    <!-- Content -->
-    <div class="chip__content">
-        ...
-    </div>
-
-    <!-- The close button -->
-    <!-- See https://csslayout.io/patterns/close-button -->
-    ...
-</div>
-`}
-css={`
-.chip {
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-
-    /* Background color */
-    background-color: rgba(0, 0, 0, .1);
-
-    /* Rounded border */
-    border-radius: 9999px;
-
-    /* Spacing */
-    padding: 4px 8px;
-}
-
-.chip__content {
-    margin-right: 4px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <InputChip>CSS</InputChip>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.CloseButton]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/chip/InputChip.tsx b/client/patterns/chip/InputChip.tsx
deleted file mode 100644
index ea8748d..0000000
--- a/client/patterns/chip/InputChip.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-const InputChip: React.FC<{}> = ({ children }) => {
-    return (
-        <div
-            style={{
-                alignItems: 'center',
-                backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                borderRadius: '9999px',
-                display: 'inline-flex',
-                justifyContent: 'center',
-                padding: '4px 8px',
-            }}
-        >
-            <div style={{ flex: 1, marginRight: '4px' }}>
-                {children}
-            </div>
-            <button
-                style={{
-                    backgroundColor: 'transparent',
-                    borderColor: 'transparent',
-                    cursor: 'pointer',
-                    height: '16px',
-                    position: 'relative',
-                    width: '16px',
-                }}
-            >
-                <div
-                    style={{
-                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                        height: '1px',
-                        left: 0,
-                        position: 'absolute',
-                        top: '50%',
-                        transform: 'translate(0%, -50%) rotate(45deg)',
-                        width: '100%',
-                    }}
-                />
-                <div
-                    style={{
-                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                        height: '100%',
-                        left: '50%',
-                        position: 'absolute',
-                        top: 0,
-                        transform: 'translate(-50%, 0%) rotate(45deg)',
-                        width: '1px',
-                    }}
-                />
-            </button>
-        </div>
-    );
-};
-
-export default InputChip;
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
deleted file mode 100644
index e99fc6e..0000000
--- a/client/patterns/close-button/Details.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.CloseButton}>
-            <Helmet>
-                <meta name="description" content="Create a close button with CSS flexbox" />
-                <meta name="og:description" content="Create a close button with CSS flexbox" />
-                <meta name="twitter:description" content="Create a close button with CSS flexbox" />
-                <meta name="keywords" content="css close button, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<button class="button">
-    <div class="button__line button__line--first"></div>
-
-    <div class="button__line button__line--second"></div>
-</button>
-`}
-css={`
-.button {
-    /* Reset */
-    background-color: transparent;
-    border-color: transparent;
-
-    /* Cursor */
-    cursor: pointer;
-
-    /* Size */
-    height: 32px;
-    width: 32px;
-
-    /* Used to position the inner */
-    position: relative;
-}
-
-.button__line {
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
-
-    /* Position */
-    position: absolute;
-
-    /* Size */
-    height: 1px;
-    width: 100%;
-}
-
-.button__line--first {
-    /* Position */
-    left: 0px;
-    top: 50%;
-    transform: translate(0%, -50%) rotate(45deg);
-
-    /* Size */
-    height: 1px;
-    width: 100%;
-}
-
-.button__line--second {
-    /* Position */
-    left: 50%;
-    top: 0px;
-    transform: translate(-50%, 0%) rotate(45deg);
-
-    /* Size */
-    height: 100%;
-    width: 1px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <button
-                            style={{
-                                backgroundColor: 'transparent',
-                                borderColor: 'transparent',
-                                cursor: 'pointer',
-                                height: '32px',
-                                position: 'relative',
-                                width: '32px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    height: '1px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(0%, -50%) rotate(45deg)',
-                                    width: '100%',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    height: '100%',
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, 0%) rotate(45deg)',
-                                    width: '1px',
-                                }}
-                            />
-                        </button>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/color-swatch/Details.tsx b/client/patterns/color-swatch/Details.tsx
deleted file mode 100644
index 3fdf9ef..0000000
--- a/client/patterns/color-swatch/Details.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ColorSwatch}>
-            <Helmet>
-                <meta name="description" content="Create a color swatch with CSS flexbox" />
-                <meta name="og:description" content="Create a color swatch with CSS flexbox" />
-                <meta name="twitter:description" content="Create a color swatch with CSS flexbox" />
-                <meta name="keywords" content="css color swatch, css flexbox" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="swatch">
-    <div class="swatch__item" style="background-color: ..."></div>
-
-    <!-- Repeat other items -->
-    ...
-</div>
-`}
-css={`
-.swatch {
-    /* Wrap the items */
-    display: flex;
-    flex-wrap: wrap;
-}
-.swatch__item {
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 1.5rem;
-    width: 1.5rem;
-
-    /* Space between items */
-    margin: 0.5rem;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '0.5rem',
-                    }}
-                >
-                    <div
-                        style={{
-                            display: 'flex',
-                            flexWrap: 'wrap',
-                        }}
-                    >
-                    {
-                        Array(9).fill(0).map((_, index) => (
-                            <div
-                                key={index}
-                                style={{
-                                    backgroundColor: `rgba(0, 0, 0, 0.${index + 1})`,
-                                    borderRadius: '9999px',
-                                    height: '1.5rem',
-                                    margin: '0.5rem',
-                                    width: '1.5rem',
-                                }}
-                            />
-                        ))
-                    }
-                    </div>
-                </div>
-            </BrowserFrame>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/concave-corners/Details.tsx b/client/patterns/concave-corners/Details.tsx
deleted file mode 100644
index 0e9c23b..0000000
--- a/client/patterns/concave-corners/Details.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-import './concave-corners.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ConcaveCorners}>
-            <Helmet>
-                <meta name="description" content="Create concave corners with CSS" />
-                <meta name="og:description" content="Create concave corners with CSS" />
-                <meta name="twitter:description" content="Create concave corners with CSS" />
-                <meta name="keywords" content="css border radius, css concave border radius, css concave corners" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="concave-corners">
-    <!-- The top-left corner -->
-    <div class="concave-corners__corner concave-corners__corner--tl"></div>
-
-    <!-- The top-right corner -->
-    <div class="concave-corners__corner concave-corners__corner--tr"></div>
-
-    <!-- The bottom-left corner -->
-    <div class="concave-corners__corner concave-corners__corner--bl"></div>
-
-    <!-- The bottom-right corner -->
-    <div class="concave-corners__corner concave-corners__corner--br"></div>
-
-    <!-- Content -->
-    ...
-</div>
-`}
-css={`
-:root {
-    --concave-corners-background: rgba(0, 0, 0, .3);
-    --concave-corners-size: 1rem;
-}
-
-.concave-corners {
-    background-color: var(--concave-corners-background);
-    
-    /* Used to position the corners */
-    position: relative;
-
-    /* Misc */
-    height: 100%;
-}
-
-.concave-corners__corner {
-    /* Absolute position */
-    position: absolute;
-
-    /* Size */
-    height: var(--concave-corners-size);    
-    width: var(--concave-corners-size);
-
-    background: #FFF;
-}
-
-.concave-corners__corner--tl {
-    /* Position */
-    left: 0;
-    top: 0;
-
-    /* Border radius */
-    border-radius: 0 0 var(--concave-corners-size) 0;
-}
-
-.concave-corners__corner--tr {
-    /* Position */ 
-    right: 0;
-    top: 0;
-
-    /* Border radius */
-    border-radius: 0 0 0 var(--concave-corners-size);
-}
-
-.concave-corners__corner--bl {
-    /* Position */
-    bottom: 0;
-    left: 0;
-
-    /* Border radius */
-    border-radius: 0 var(--concave-corners-size) 0 0;
-}
-
-.concave-corners__corner--br {
-    /* Position */
-    bottom: 0;
-    right: 0;
-
-    /* Border radius */
-    border-radius: var(--concave-corners-size) 0 0 0;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '1rem',
-                    }}
-                >
-                    <div
-                        style={{
-                            height: '8rem',
-                            width: '16rem',
-                        }}
-                    >
-                        <div className='concave-corners'>
-                            <div className='concave-corners__corner concave-corners__corner--tl' />
-                            <div className='concave-corners__corner concave-corners__corner--tr' />
-                            <div className='concave-corners__corner concave-corners__corner--bl' />
-                            <div className='concave-corners__corner concave-corners__corner--br' />
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <RelatedPatterns patterns={[Pattern.InvertedCorners]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx
deleted file mode 100644
index a1d7efe..0000000
--- a/client/patterns/cookie-banner/Details.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.CookieBanner}>
-            <Helmet>
-                <meta name="description" content="Create a cookie banner with CSS flexbox" />
-                <meta name="og:description" content="Create a cookie banner with CSS flexbox" />
-                <meta name="twitter:description" content="Create a cookie banner with CSS flexbox" />
-                <meta name="keywords" content="css cookie banner, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="banner">
-    <!-- Tells visitors that the website uses cookie -->
-    <div class="banner__content">
-        ...
-    </div>
-
-    <!-- Close button -->
-    ...
-</div>
-`}
-css={`
-.banner {
-    /* Banner is displayed at the bottom */
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    width: 100%;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.banner__content {
-    /* Take available width */
-    flex: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            position: 'relative',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                backgroundColor: 'rgba(0, 0, 0, 0.05)',
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: 0,
-                                display: 'flex',
-                                left: 0,
-                                padding: '8px',
-                                position: 'absolute',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ flex: 1, marginRight: '12px' }}>
-                                <Block numberOfBlocks={5} />
-                            </div>
-                            <div style={{ width: '96px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/curved-background/Details.tsx b/client/patterns/curved-background/Details.tsx
deleted file mode 100644
index f099015..0000000
--- a/client/patterns/curved-background/Details.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.CurvedBackground}>
-            <Helmet>
-                <meta name="description" content="Create an element with curved background" />
-                <meta name="og:description" content="Create an element with curved background" />
-                <meta name="twitter:description" content="Create an element with curved background" />
-                <meta name="keywords" content="css border radius, css curved background" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
-
-    /* You can use gradient background color such as
-    background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */
-
-    /* Curved corners */
-    border-bottom-left-radius: 50% 40%;
-    border-bottom-right-radius: 50% 40%;
-}
-`}
-                >
-                    <div
-                        style={{
-                            height: '100%',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderBottomLeftRadius: '50% 40%',
-                                borderBottomRightRadius: '50% 40%',
-                                height: '50%',
-                                width: '100%',
-                            }}
-                        />
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.DiagonalSection]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/custom-checkbox-button/Details.tsx b/client/patterns/custom-checkbox-button/Details.tsx
deleted file mode 100644
index bfebb40..0000000
--- a/client/patterns/custom-checkbox-button/Details.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-interface CheckboxProps {
-    isChecked: boolean;
-    value: string;
-}
-
-const Details: React.FC<{}> = () => {
-    const Checkbox: React.FC<CheckboxProps> = ({ isChecked, value, children }) => {
-        const [checked, setChecked] = React.useState(isChecked);
-        const click = () => setChecked((c) => !c);
-
-        return (
-            <label
-                htmlFor="custom-checkbox-button"
-                style={{
-                    alignItems: 'center',
-                    cursor: 'pointer',
-                    display: 'inline-flex',
-                }}
-            >
-                <input
-                    id="custom-checkbox-button"
-                    type="checkbox"
-                    name="option"
-                    value={value}
-                    checked={checked}
-                    style={{ display: 'none' }}
-                    onChange={click}
-                />
-                <div
-                    style={{
-                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                        borderRadius: '4px',
-                        marginRight: '8px',
-                        padding: '4px',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: checked ? '#00449E' : 'transparent',
-                            borderRadius: '4px',
-                            height: '16px',
-                            width: '16px',
-                        }}
-                    />
-                </div>
-                {children}
-            </label>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.CustomCheckboxButton}>
-            <Helmet>
-                <meta name="description" content="Create a custom checkbox button with CSS flexbox" />
-                <meta name="og:description" content="Create a custom checkbox button with CSS flexbox" />
-                <meta name="twitter:description" content="Create a custom checkbox button with CSS flexbox" />
-                <meta name="keywords" content="css checkbox, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<label class="label">
-    <!-- The real checkbox -->
-    <input type="checkbox" class="label__input" />
-
-    <!-- The fake square -->
-    <div class="label__square">
-        <!-- The inner square -->
-        <div class="label__checkbox label__square--selected"></div>
-    </div>
-
-    <!-- The text -->
-    ...
-</div>
-`}
-css={`
-.label {
-    /* Center the content horizontally */
-    align-items: center;
-    display: inline-flex;
-
-    /* Cursor */
-    cursor: pointer;
-}
-
-.label__input {
-    /* Hide it */
-    display: none;
-}
-
-.label__square {
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-
-    /* Spacing */
-    margin-right: 8px;
-    padding: 4px;
-}
-
-.label__checkbox {
-    background-color: transparent;
-    border-radius: 4px;
-    height: 16px;
-    width: 16px;
-}
-
-.label__checkbox--selected {
-    /* For selected checkbox */
-    background-color: #00449E;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '200px' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    marginBottom: '16px',
-                                }}
-                            >
-                                <Checkbox value='1' isChecked={false}>
-                                    <div style={{ width: '100px' }}><Rectangle /></div>
-                                </Checkbox>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    marginBottom: '16px',
-                                }}
-                            >
-                                <Checkbox value='2' isChecked={true}>
-                                    <div style={{ width: '200px' }}><Rectangle /></div>
-                                </Checkbox>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                }}
-                            >
-                                <Checkbox value='3' isChecked={false}>
-                                    <div style={{ width: '150px' }}><Rectangle /></div>
-                                </Checkbox>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/custom-radio-button/Details.tsx b/client/patterns/custom-radio-button/Details.tsx
deleted file mode 100644
index 520f6c9..0000000
--- a/client/patterns/custom-radio-button/Details.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-interface RadioProps {
-    value: string;
-}
-
-const Details: React.FC<{}> = () => {
-    const [selectedValue, setSelectedValue] = React.useState('1');
-
-    const Radio: React.FC<RadioProps> = ({ value, children }) => {
-        const click = () => setSelectedValue(value);
-
-        return (
-            <label
-                htmlFor="custom-radio-button"
-                style={{
-                    alignItems: 'center',
-                    cursor: 'pointer',
-                    display: 'inline-flex',
-                }}
-            >
-                <input
-                    id="custom-radio-button"
-                    type="radio"
-                    name="option"
-                    value={value}
-                    style={{ display: 'none' }}
-                    onChange={click}
-                />
-                <div
-                    style={{
-                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                        borderRadius: '9999px',
-                        marginRight: '8px',
-                        padding: '4px',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: value === selectedValue
-                                ? '#00449E'
-                                : 'transparent',
-                            borderRadius: '9999px',
-                            height: '16px',
-                            width: '16px',
-                        }}
-                    />
-                </div>
-                {children}
-            </label>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.CustomRadioButton}>
-            <Helmet>
-                <meta name="description" content="Create a custom radio button with CSS flexbox" />
-                <meta name="og:description" content="Create a custom radio button with CSS flexbox" />
-                <meta name="twitter:description" content="Create a custom radio button with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css radio" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<label class="label">
-    <!-- The real radio -->
-    <input type="radio" class="label__input" />
-
-    <!-- The fake circle -->
-    <div class="label__circle">
-        <!-- The inner circle -->
-        <div class="label__radio label__radio--selected"></div>
-    </div>
-
-    <!-- The text -->
-    ...
-</div>
-`}
-css={`
-.label {
-    /* Center the content horizontally */
-    align-items: center;
-    display: inline-flex;
-
-    /* Cursor */
-    cursor: pointer;
-}
-
-.label__input {
-    /* Hide it */
-    display: none;
-}
-
-.label__circle {
-    /* Rounded border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 9999px;
-
-    /* Spacing */
-    margin-right: 8px;
-    padding: 4px;
-}
-
-.label__radio {
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 16px;
-    width: 16px;
-
-    /* For not selected radio */
-    background-color: transparent;
-}
-
-.label__radio--selected {
-    /* For selected radio */
-    background-color: #00449E;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '200px' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    marginBottom: '16px',
-                                }}
-                            >
-                                <Radio value='1'>
-                                    <div style={{ width: '100px' }}><Rectangle /></div>
-                                </Radio>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    marginBottom: '16px',
-                                }}
-                            >
-                                <Radio value='2'>
-                                    <div style={{ width: '200px' }}><Rectangle /></div>
-                                </Radio>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                }}
-                            >
-                                <Radio value='3'>
-                                    <div style={{ width: '150px' }}><Rectangle /></div>
-                                </Radio>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/diagonal-section/Details.tsx b/client/patterns/diagonal-section/Details.tsx
deleted file mode 100644
index 28c9f37..0000000
--- a/client/patterns/diagonal-section/Details.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.DiagonalSection}>
-            <Helmet>
-                <meta name="description" content="Create a diagonal section with CSS" />
-                <meta name="og:description" content="Create a diagonal section with CSS" />
-                <meta name="twitter:description" content="Create a diagonal section with CSS" />
-                <meta name="keywords" content="css diagonal section, css transform skew" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The diagonal area -->
-    <div class="container__diagonal"></div>
-
-    <!-- Content -->
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Used to position the diagonal area */
-    position: relative;
-}
-
-.container__diagonal {
-    /* Absolute position */
-    left: 0px;
-    position: absolute;
-    top: 0px;
-
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-
-    /* Create diagonal sides */
-    transform: skewY(-5deg);
-
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
-
-    /* Displayed under the main content */
-    z-index: -1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '200px',
-                                justifyContent: 'center',
-                                position: 'relative',
-                                width: '75%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    height: '100%',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'skewY(-5deg)',
-                                    width: '100%',
-                                    zIndex: -1,
-                                }}
-                            />
-                            <div style={{ width: '60%' }}>
-                                <Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.CurvedBackground]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/dot-navigation/Details.tsx b/client/patterns/dot-navigation/Details.tsx
deleted file mode 100644
index 7ffcb85..0000000
--- a/client/patterns/dot-navigation/Details.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-interface DotProps {
-    index: number;
-}
-
-const Details: React.FC<{}> = () => {
-    const [activeItem, setActiveItem] = React.useState(0);
-
-    const Dot: React.FC<DotProps> = ({ index }) => {
-        const isActive = index === activeItem;
-        const click = () => setActiveItem(index);
-        return (
-            <li
-                style={{
-                    backgroundColor: isActive ? 'rgba(0, 0, 0, 0.3)' : '',
-                    border: isActive ? 'none' : '1px solid rgba(0, 0, 0, 0.3)',
-                    borderRadius: '9999px',
-                    cursor: 'pointer',
-                    height: '12px',
-                    margin: '0 4px',
-                    width: '12px',
-                }}
-                onClick={click}
-            />
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.DotNavigation}>
-            <Helmet>
-                <meta name="description" content="Create dot navigation with CSS flexbox" />
-                <meta name="og:description" content="Create dot navigation with CSS flexbox" />
-                <meta name="twitter:description" content="Create dot navigation with CSS flexbox" />
-                <meta name="keywords" content="css dot navigation, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<ul class="dots">
-    <li class="dots__item"></li>
-
-    <!-- Repeat other dots -->
-    ...
-</div>
-`}
-css={`
-.dots {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.dots__item {
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 12px;
-    width: 12px;
-
-    /* Active dot */
-    background-color: rgba(0, 0, 0, .3);
-
-    /* Inactive dot */
-    background-color: transparent;
-    border: 1px solid rgba(0, 0, 0, .3);
-
-    /* OPTIONAL: Spacing between dots */
-    margin: 0 4px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <ul
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                justifyContent: 'center',
-                                listStyleType: 'none',
-                                margin: 0,
-                                padding: 0,
-                            }}
-                        >
-                            <Dot index={0} />
-                            <Dot index={1} />
-                            <Dot index={2} />
-                            <Dot index={3} />
-                        </ul>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/drawer/Details.tsx b/client/patterns/drawer/Details.tsx
deleted file mode 100644
index 5f72e9d..0000000
--- a/client/patterns/drawer/Details.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Drawer}>
-            <Helmet>
-                <meta name="description" content="Create a drawer navigation with CSS" />
-                <meta name="og:description" content="Create a drawer navigation with CSS" />
-                <meta name="twitter:description" content="Create a drawer navigation with CSS" />
-                <meta name="keywords" content="css drawer, css off-canvas" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    This pattern is also known as off-canvas.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Backdrop -->
-    <div class="container__overlay"></div>
-
-    <!-- Sidebar -->
-    <div class="container__sidebar">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Container takes full size */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-
-    z-index: 9999;
-}
-
-.container__overlay {
-    /* Take full size */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-
-    /* User still can see the content of main page */
-    background-color: rgba(0, 0, 0, 0.5);
-
-    z-index: -1;
-}
-
-.container__sidebar {
-    /* Take full height */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 200px;
-
-    /* Background */
-    background-color: #fff;
-}
-`}
-                >
-                    <div
-                        style={{
-                            height: '100%',
-                            position: 'relative',
-                            width: '100%',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                height: '100%',
-                                left: 0,
-                                position: 'absolute',
-                                top: 0,
-                                width: '100%',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#fff',
-                                height: '100%',
-                                left: 0,
-                                padding: '16px',
-                                position: 'absolute',
-                                top: 0,
-                                width: '250px',
-                            }}
-                        >
-                            <Block numberOfBlocks={20} />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx
deleted file mode 100644
index 82582f6..0000000
--- a/client/patterns/drop-area/Details.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.DropArea}>
-            <Helmet>
-                <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" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <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>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/drop-cap/Details.tsx b/client/patterns/drop-cap/Details.tsx
deleted file mode 100644
index cce9dfc..0000000
--- a/client/patterns/drop-cap/Details.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './dropcap.css';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Pattern from '../../constants/Pattern';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.DropCap}>
-            <Helmet>
-                <meta name="description" content="Create a drop cap with CSS" />
-                <meta name="og:description" content="Create a drop cap with CSS" />
-                <meta name="twitter:description" content="Create a drop cap with CSS" />
-                <meta name="keywords" content="css drop cap" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-/* Styles for the first letter */
-.container:first-letter {
-    /* Display at the left */
-    float: left;
-    line-height: 1;
-
-    /* Spacing */
-    margin: 0 8px 0 0;
-    padding: 0 8px;
-
-    /* Optional */
-    font-size: 64px;
-    font-weight: 700;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <div className="p-drop-cap">
-                                Cascading Style Sheets (CSS) is a style sheet language used for
-                                describing the presentation of a document written in a markup
-                                language like HTML. CSS is a cornerstone technology of the World Wide Web,
-                                alongside HTML and JavaScript.
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/drop-cap/dropcap.css b/client/patterns/drop-cap/dropcap.css
deleted file mode 100644
index b12883d..0000000
--- a/client/patterns/drop-cap/dropcap.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.p-drop-cap:first-letter {
-    border: 2px solid rgba(0, 0, 0, 0.3);
-    float: left;
-    font-size: 64px;
-    font-weight: 700;
-    line-height: 1;
-    margin: 0 8px 0 0;
-    padding: 0 8px; 
-}
diff --git a/client/patterns/dropdown/Details.tsx b/client/patterns/dropdown/Details.tsx
deleted file mode 100644
index 9521a25..0000000
--- a/client/patterns/dropdown/Details.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './dropdown.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Dropdown}>
-            <Helmet>
-                <meta name="description" content="Create a dropdown with CSS" />
-                <meta name="og:description" content="Create a dropdown with CSS" />
-                <meta name="twitter:description" content="Create a dropdown with CSS" />
-                <meta name="keywords" content="css dropdown, css menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Move the mouse over the button to see the dropdown.
-                </div>
-                <BrowserFrame
-html={`
-<div class="dropdown">
-    <!-- The trigger element -->
-    <button>...</button>
-
-    <!-- The content -->
-    <div class="dropdown__content">
-        ...
-    </div>
-</div>
-`}
-css={`
-.dropdown {
-    position: relative;   
-}
-
-/* Hide the dropdown's content by default */
-.dropdown__content {
-    display: none;
-
-    /* Position it right below the trigger element */
-    left: 0;
-    paddingTop: 4px;
-    position: absolute;
-    top: 100%;
-
-    /* It should be on the top of other elements */
-    background-color: #FFF;
-    zIndex: 9999;
-
-    /* Size */
-    height: 200px;
-    width: 200px;
-}
-
-/* Show the content when hover on the container */
-.dropdown:hover .dropdown__content {
-    display: block;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            className="p-dropdown"
-                            style={{
-                                position: 'relative',
-                            }}
-                        >
-                            <button
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    width: '128px',
-                                }}
-                            >
-                                <span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
-                                <Triangle size={8} corner='b' />
-                            </button>
-
-                            <div
-                                className="p-dropdown-content"
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    height: '200px',
-                                    left: 0,
-                                    paddingTop: '4px',
-                                    position: 'absolute',
-                                    top: '100%',
-                                    width: '200px',
-                                    zIndex: 9999,
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        height: '100%',
-                                        justifyContent: 'center',
-                                        padding: '16px',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <Block numberOfBlocks={10} justify='center' />
-                                </div>
-                            </div>
-                        </div>
-                        <div
-                            style={{
-                                marginTop: '16px',
-                                width: '256px',
-                            }}
-                        >
-                            <Block numberOfBlocks={20} justify='center' />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/dropdown/dropdown.css b/client/patterns/dropdown/dropdown.css
deleted file mode 100644
index 604ffe8..0000000
--- a/client/patterns/dropdown/dropdown.css
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.p-dropdown-content {
-    display: none;
-}
-
-.p-dropdown:hover .p-dropdown-content {
-    display: block;
-}
diff --git a/client/patterns/fading-long-section/Details.tsx b/client/patterns/fading-long-section/Details.tsx
deleted file mode 100644
index a7ac997..0000000
--- a/client/patterns/fading-long-section/Details.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FadingLongSection}>
-            <Helmet>
-                <meta name="description" content="Fading long section to indicate there is more content" />
-                <meta name="og:description" content="Fading long section to indicate there is more content" />
-                <meta name="twitter:description" content="Fading long section to indicate there is more content" />
-                <meta name="keywords" content="css fading overflow, css linear gradient" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Fading a long section to indicate there is more content.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container"
-    <!-- Main content -->
-    <div class="container__content">
-        ...
-    </div>
-
-    <!-- The faded element -->
-    <div class="container__fading"></div>
-</div>
-`}
-css={`
-.container {
-    /* Used to position the faded element */
-    position: relative;
-}
-
-.container__content {
-    /* Height */
-    height: 200px;
-
-    /* Scrollable */
-    overflow-y: scroll;
-}
-
-.container__fading {
-    /* Displayed at the bottom */
-    bottom: 0;
-    left: 0;
-    position: absolute;
-
-    /* Size */
-    height: 30px;
-    width: 100%;
-
-    /* Gradient background */
-    background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ position: 'relative', width: '200px' }}>
-                            <div
-                                style={{
-                                    height: '200px',
-                                    overflowY: 'scroll',
-                                }}
-                            >
-                                <Block numberOfBlocks={50} />
-                            </div>
-
-                            <div
-                                style={{
-                                    background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
-                                    bottom: 0,
-                                    height: '30px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    width: '100%',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx
deleted file mode 100644
index 05b1552..0000000
--- a/client/patterns/feature-comparison/Details.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-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 (
-        <DetailsLayout pattern={Pattern.FeatureComparison}>
-            <Helmet>
-                <meta name="description" content="Create a feature comparison list with CSS flexbox" />
-                <meta name="og:description" content="Create a feature comparison list with CSS flexbox" />
-                <meta name="twitter:description" content="Create a feature comparison list with CSS flexbox" />
-                <meta name="keywords" content="css feature comparison, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Feature name -->
-    <div class="container__feature">
-        ...
-    </div>
-
-    <!-- The model -->
-    <div class="container__model">
-        <!--
-        For the first row: display the model name (Basic, Pro, etc.)
-        From the second row: display a yes/no icon indicating the feature is available or not
-        -->
-        ...
-    </div>
-
-    <!-- Repeated other models -->
-    ...
-</div>
-
-<!-- Repeated items -->
-...
-`}
-css={`
-.container {
-    align-items: center;
-    display: flex;
-
-    /* Bottom border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Spacing */
-    padding: 12px 0px;
-}
-
-.container__feature {
-    /* Take available width */
-    flex: 1;
-
-    /* Spacing */
-    margin-right: 16px;
-}
-
-.container__model {
-    /* Center the content */
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    margin-right: 16px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div style={{ width: '60%' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '12px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Rectangle />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                    <Rectangle />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                    <Rectangle />
-                                </div>
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '8px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Block numberOfBlocks={4} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                    <Circle size={8} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                    <Circle size={8} />
-                                </div>
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '8px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Block numberOfBlocks={5} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                    <Circle size={8} />
-                                </div>
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '8px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Block numberOfBlocks={4} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                    <Circle size={8} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '8px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Block numberOfBlocks={6} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                    <Circle size={8} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
deleted file mode 100644
index bf50729..0000000
--- a/client/patterns/feature-list/Details.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-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 (
-        <DetailsLayout pattern={Pattern.FeatureList}>
-            <Helmet>
-                <meta name="description" content="Create a feature list with CSS flexbox" />
-                <meta name="og:description" content="Create a feature list with CSS flexbox" />
-                <meta name="twitter:description" content="Create a feature list with CSS flexbox" />
-                <meta name="keywords" content="css feature list, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Feature item -->
-<div class="container">
-    <!-- Image -->
-    <div class="container__image">
-        ...
-    </div>
-
-    <!-- Right side -->
-    <div class="container__feature">
-        ...
-    </div>
-</div>
-
-<!-- Repeated items -->
-...
-`}
-css={`
-.container {
-    display: flex;
-
-    /* OPTIONAL: Reverse the order of image and content */
-    flex-direction: row-reverse;
-
-    /* OPTIONAL: Spacing between items */
-    margin: 16px 0;
-}
-
-.container__image {
-    width: 128px;
-}
-
-.container__feature {
-    /* Take the remaining width */
-    flex: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div style={{ width: '60%' }}>
-                            <div style={{ display: 'flex', marginBottom: '32px' }}>
-                                <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
-                                <div style={{ flex: 1 }}>
-                                    <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                            </div>
-                            <div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
-                                <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
-                                <div style={{ flex: 1 }}>
-                                    <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
-                                    <Block numberOfBlocks={15} />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
deleted file mode 100644
index 376fe0e..0000000
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FixedAtCorner}>
-            <Helmet>
-                <meta name="description" content="Fix an element at corner with CSS" />
-                <meta name="og:description" content="Fix an element at corner with CSS" />
-                <meta name="twitter:description" content="Fix an element at corner with CSS" />
-                <meta name="keywords" content="css fixed" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Top-left corner -->
-    <div class="container__corner container__corner--tl">
-        ...
-    </div>
-
-    <!-- Top-right corner -->
-    <div class="container__corner container__corner--tr">
-        ...
-    </div>
-
-    <!-- Bottom-right corner -->
-    <div class="container__corner container__corner--br">
-        ...
-    </div>
-
-    <!-- Bottom-left corner -->
-    <div class="container__corner container__corner--bl">    
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    position: relative;
-}
-
-.container__corner {
-    position: absolute;
-}
-
-.container__corner--tl {
-    left: 0;        
-    top: 0;
-}
-
-.container__corner--tr {
-    top: 0;
-    right: 0;
-}
-
-.container__corner--br {
-    bottom: 0;
-    right: 0;
-}
-
-.container__corner--bl {
-    bottom: 0;
-    left: 0;
-}
-`}
-                >
-                    <div style={{ height: '100%', position: 'relative' }}>
-                        <div style={{ left: 0, position: 'absolute', top: 0 }}>
-                            <Triangle size={64} corner="tl" />
-                        </div>
-                        <div style={{ position: 'absolute', right: 0, top: 0 }}>
-                            <Triangle size={64} corner="tr" />
-                        </div>
-                        <div style={{ bottom: 0, position: 'absolute', right: 0 }}>
-                            <Triangle size={64} corner="br" />
-                        </div>
-                        <div style={{ bottom: 0, left: 0, position: 'absolute' }}>
-                            <Triangle size={64} corner="bl" />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
deleted file mode 100644
index fdb859f..0000000
--- a/client/patterns/floating-label/Details.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './floating-label.css';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Pattern from '../../constants/Pattern';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FloatingLabel}>
-            <Helmet>
-                <meta name="description" content="Create a floating label with CSS" />
-                <meta name="og:description" content="Create a floating label with CSS" />
-                <meta name="twitter:description" content="Create a floating label with CSS" />
-                <meta name="keywords" content="css floating label, placeholder shown" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Type something in the input to see how the label is shown up.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The input -->
-    <input placeholder="Placeholder" class="container__input" />
-
-    <!-- The label -->
-    <label class="container__label">Placeholder</label>
-</div>
-`}
-css={`
-.container {
-    position: relative;
-}
-
-/*
-Show the label at desired position when the 
-placeholder of input isn't shown
-*/
-.container__input:not(:placeholder-shown) + .container__label {
-    background: #FFF;
-    transform: translate(0, -50%);
-    opacity: 1;
-}
-
-.container__label {
-    /* Position the label */
-    left: 8px;
-    position: absolute;
-    top: 0;
-
-    /* Hide it by default */
-    opacity: 0;
-    transition: all 200ms;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            className="p-floating-container"
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                padding: '0 1px',
-                                position: 'relative',
-                                width: '200px',
-                            }}
-                        >
-                            <input
-                                id="floating-label-input"
-                                placeholder="Placeholder"
-                                type="text"
-                                style={{
-                                    borderColor: 'transparent',
-                                    padding: '8px',
-                                    width: '100%',
-                                }}
-                            />
-                            <label
-                                htmlFor="floating-label-input"
-                                style={{
-                                    left: '8px',
-                                    padding: '0 8px',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transition: 'all 200ms',
-                                }}
-                            >
-                                Placeholder
-                            </label>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/floating-label/floating-label.css b/client/patterns/floating-label/floating-label.css
deleted file mode 100644
index 9fef476..0000000
--- a/client/patterns/floating-label/floating-label.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.p-floating-container label {
-    opacity: 0;
-}
-
-.p-floating-container input:not(:placeholder-shown) + label {
-    background: #FFF;
-    transform: translate(0, -50%);
-    opacity: 1;
-}
diff --git a/client/patterns/folder-structure/Details.tsx b/client/patterns/folder-structure/Details.tsx
deleted file mode 100644
index 4c34210..0000000
--- a/client/patterns/folder-structure/Details.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Square from '../../placeholders/Square';
-import './folder-structure.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FolderStructure}>
-            <Helmet>
-                <meta name="description" content="Create a folder structure with CSS" />
-                <meta name="og:description" content="Create a folder structure with CSS" />
-                <meta name="twitter:description" content="Create a folder structure with CSS" />
-                <meta name="keywords" content="css folder structure, css folder tree" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="folder-structure">
-    <ul>
-        <li>
-            <!-- Content -->
-            ...
-
-            <!-- Sub items -->
-            <ul>
-                <li>
-                    <!-- Content -->
-                    ...
-
-                    <!-- Sub items -->
-                    <ul>
-                        <li>...</li>
-                        <li>...</li>
-                        ...
-                    </ul>
-                </li>
-                <li>...</li>
-                ...
-            </ul>
-        </li>
-        
-        <!-- Repeat other items -->
-        ...
-    </ul>
-</div>
-`}
-css={`
-:root {
-    --folder-structure-item-height: 1rem;
-    --folder-structure-item-margin-left: 2rem;
-    --folder-structure-item-padding-top: 1rem;
-}
-
-.folder-structure ul {
-    /* Reset */
-    list-style-type: none;
-    margin: 0;
-}
-
-.folder-structure li {
-    padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
-    position: relative;
-}
-
-.folder-structure li::before {
-    border-left: 1px solid rgba(0, 0, 0, .3);
-    content: '';
-    
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 0;
-    transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
-
-    /* Size */
-    height: 100%;
-}
-
-.folder-structure li::after {
-    border-bottom: 1px solid rgba(0, 0, 0, .3);
-    content: '';
-
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
-    transform: translate(-100%, 0);
-
-    /* Size */
-    width: var(--folder-structure-item-margin-left);
-}
-
-/* Remove the border from the last item */
-.folder-structure li:last-child::before {
-    height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '0.5rem',
-                    }}
-                >
-                    <div className="folder-structure">
-                        <ul>
-                            <li>
-                                <Square size='1rem' />
-                                <ul>
-                                    <li><Square size='1rem' /></li>
-                                </ul>
-                            </li>
-                            <li>
-                                <Square size='1rem' />
-                                <ul>
-                                    <li>
-                                        <Square size='1rem' />
-                                        <ul>
-                                            <li><Square size='1rem' /></li>
-                                            <li><Square size='1rem' /></li>
-                                            <li><Square size='1rem' /></li>
-                                        </ul>
-                                    </li>
-                                    <li><Square size='1rem' /></li>
-                                    <li>
-                                        <Square size='1rem' />
-                                        <ul>
-                                            <li><Square size='1rem' /></li>
-                                            <li><Square size='1rem' /></li>
-                                        </ul>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li><Square size='1rem' /></li>
-                        </ul>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <RelatedPatterns patterns={[Pattern.TreeDiagram]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/full-background/Details.tsx b/client/patterns/full-background/Details.tsx
deleted file mode 100644
index ff47c62..0000000
--- a/client/patterns/full-background/Details.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FullBackground}>
-            <Helmet>
-                <meta name="description" content="Create a full background element with CSS" />
-                <meta name="og:description" content="Create a full background element with CSS" />
-                <meta name="twitter:description" content="Create a full background element with CSS" />
-                <meta name="keywords" content="css background size cover, css full background" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    /* Take full size */
-    height: 100vh;
-    width: 100%;
-
-    /* Background */
-    background: url('/assets/full-background.jpeg') center center / cover no-repeat;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ width: '250px' }}>
-                                <Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.VideoBackground]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx
deleted file mode 100644
index 8242e0f..0000000
--- a/client/patterns/full-screen-menu/Details.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FullScreenMenu}>
-            <Helmet>
-                <meta name="description" content="Create a full screen menu with CSS flexbox" />
-                <meta name="og:description" content="Create a full screen menu with CSS flexbox" />
-                <meta name="twitter:description" content="Create a full screen menu with CSS flexbox" />
-                <meta name="keywords" content="css fixed, css flexbox, css menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The close button -->
-    <button class="container__close">
-        ...
-    </button>
-
-    <!-- The navigation menu -->
-    <ul>
-        ...
-    </ul>
-</div>
-`}
-css={`
-.container {
-    /* Full screen overlay */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.container__close {
-    /* Shown at top right corner */
-    position: absolute;
-    right: 16px;
-    top: 16px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                            position: 'relative',
-                        }}
-                    >
-                        <button
-                            style={{
-                                backgroundColor: 'transparent',
-                                borderColor: 'transparent',
-                                padding: 0,
-                                position: 'absolute',
-                                right: '16px',
-                                top: '16px',
-                            }}
-                        >
-                            <svg
-                                viewBox="0 0 24 24"
-                                style={{
-                                    fill: 'none',
-                                    height: 24,
-                                    stroke: '#000',
-                                    strokeLinecap: 'round',
-                                    strokeLinejoin: 'round',
-                                    strokeWidth: 1,
-                                    width: 24,
-                                }}
-                            >
-                                <path
-                                    d={`M7,16.999l10-10
-                                    M17,16.999l-10-10
-                                    M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
-                                    S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
-                                />
-                            </svg>
-                        </button>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                backgroundColor: 'rgba(0, 0, 0, 0.25)',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                left: 0,
-                                position: 'absolute',
-                                top: 0,
-                                width: '100%',
-                            }}
-                        >
-                            <ul
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    listStyleType: 'none',
-                                    margin: 0,
-                                    padding: 0,
-                                }}
-                            >
-                                <li style={{ marginBottom: '16px', width: '256px' }}><Rectangle /></li>
-                                <li style={{ marginBottom: '16px', width: '144px' }}><Rectangle /></li>
-                                <li style={{ marginBottom: '16px', width: '128px' }}><Rectangle /></li>
-                                <li style={{ width: '160px' }}><Rectangle /></li>
-                            </ul>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/holy-grail/Details.tsx b/client/patterns/holy-grail/Details.tsx
deleted file mode 100644
index cadf394..0000000
--- a/client/patterns/holy-grail/Details.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.HolyGrail}>
-            <Helmet>
-                <meta name="description" content="Create a holy grail layout with CSS flexbox" />
-                <meta name="og:description" content="Create a holy grail layout with CSS flexbox" />
-                <meta name="twitter:description" content="Create a holy grail layout with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css holy grail layout, css layout" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <header>
-        ...
-    </header>
-    <main class="container__main">
-        <!-- Left sidebar -->
-        <aside class="container__left">...</aside>
-
-        <!-- Main content -->
-        <article class="container__middle">...</article>
-
-        <!-- Right sidebar -->
-        <nav class="container__right">...</nav>
-    </main>
-    <footer>
-        ...
-    </footer>
-</div>
-`}
-css={`
-.container {
-    display: flex;
-    flex-direction: column;
-}
-
-.container__main {
-    /* Take the remaining height */
-    flex-grow: 1;
-
-    /* Layout the left sidebar, main content and right sidebar */
-    display: flex;
-    flex-direction: row;
-}
-
-.container__left {
-    width: 25%;
-}
-
-.container__middle {
-    /* Take the remaining width */
-    flex-grow: 1;
-}
-
-.container__right {
-    width: 20%;
-}
-`}
-                >
-                    <div
-                        style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                        }}
-                    >
-                        <div
-                            style={{
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                flexShrink: 0,
-                                padding: '16px',
-                            }}
-                        >
-                            <div style={{ width: '50%' }}><Rectangle /></div>
-                        </div>
-                        <div style={{ display: 'flex', flexGrow: 1 }}>
-                            <div
-                                style={{
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    padding: '16px',
-                                    width: '25%',
-                                }}
-                            >
-                                <Block numberOfBlocks={10} />
-                            </div>
-                            <div style={{ flex: 1, padding: '16px' }}>
-                                <Block numberOfBlocks={20} />
-                            </div>
-                            <div
-                                style={{
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    padding: '16px',
-                                    width: '20%',
-                                }}
-                            >
-                                <Block numberOfBlocks={5} />
-                            </div>
-                        </div>
-                        <div
-                            style={{
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                flexShrink: 0,
-                                padding: '16px',
-                            }}
-                        >
-                            <div style={{ width: '40%' }}><Rectangle /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/initial-avatar/Details.tsx b/client/patterns/initial-avatar/Details.tsx
deleted file mode 100644
index 5ba2788..0000000
--- a/client/patterns/initial-avatar/Details.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.InitialAvatar}>
-            <Helmet>
-                <meta name="description" content="Create an initial avatar with CSS" />
-                <meta name="og:description" content="Create an initial avatar with CSS" />
-                <meta name="twitter:description" content="Create an initial avatar with CSS" />
-                <meta name="keywords" content="css avatar" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    To center the content, you also can use other technique demonstrated in
-                    the <Link to='/patterns/centering'>Centering</Link> pattern.
-                </div>
-                <BrowserFrame
-html={`
-<div class="avatar">
-    <div class="avatar__letters">
-        <!-- The letters -->
-        ...
-    </div>
-</div>
-`}
-css={`
-.avatar {
-    /* Center the content */
-    display: inline-block;
-    vertical-align: middle;
-
-    /* Used to position the content */
-    position: relative;
-
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-    color: #FFF;
-
-    /* Rounded border */
-    border-radius: 50%;
-    height: 48px;
-    width: 48px;
-}
-
-.avatar__letters {
-    /* Center the content */
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderRadius: '50%',
-                                color: '#FFF',
-                                display: 'inline-block',
-                                fontSize: '24px',
-                                height: '48px',
-                                position: 'relative',
-                                verticalAlign: 'middle',
-                                width: '48px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                PN
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[
-                    Pattern.Avatar,
-                    Pattern.AvatarList,
-                    Pattern.Badge,
-                    Pattern.Centering,
-                    Pattern.PresenceIndicator,
-                ]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/input-addon/Details.tsx b/client/patterns/input-addon/Details.tsx
deleted file mode 100644
index bf1a4bd..0000000
--- a/client/patterns/input-addon/Details.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.InputAddon}>
-            <Helmet>
-                <meta name="description" content="Create an input add-on with CSS flexbox" />
-                <meta name="og:description" content="Create an input add-on with CSS flexbox" />
-                <meta name="twitter:description" content="Create an input add-on with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css input add-on" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Add-on prepended -->
-<div class="container">
-    <!-- Add-on -->
-    <div class="container__addon">
-        ...
-    </div>
-
-    <!-- Input -->
-    <input type="text" class="container__input" />
-</div>
-
-<!-- Add-on appended -->
-<div class="container">
-    <!-- Input -->
-    <input type="text" class="container__input" />
-
-    <!-- Add-on -->
-    <div class="container__addon">
-        ...
-    </div>
-</div>
-
-<!-- Appended and prepended add-ons -->
-<div class="container">
-    <!-- Add-on -->
-    <div class="container__addon">
-        ...
-    </div>
-
-    <!-- Input -->
-    <input type="text" class="container__input" />
-
-    <!-- Add-on -->
-    <div class="container__addon">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    display: flex;
-
-    /* Take full size */
-    width: 100%;
-}
-
-.container__input {
-    /* Take the remaining width */
-    flex: 1;
-}
-
-.container__addon {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    marginBottom: '16px',
-                                    width: '100%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '30%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                                <input
-                                    type="text"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        marginRight: '1px',
-                                        padding: '4px',
-                                    }}
-                                />
-                            </div>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    marginBottom: '16px',
-                                    width: '100%',
-                                }}
-                            >
-                                <input
-                                    type="text"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        marginLeft: '1px',
-                                        padding: '8px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '40%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                            </div>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    width: '100%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '20%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                                <input
-                                    type="text"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        padding: '8px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '30%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/inverted-corners/Details.tsx b/client/patterns/inverted-corners/Details.tsx
deleted file mode 100644
index f4d6708..0000000
--- a/client/patterns/inverted-corners/Details.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-import './inverted-corners.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.InvertedCorners}>
-            <Helmet>
-                <meta name="description" content="Create inverted corners with CSS" />
-                <meta name="og:description" content="Create inverted corners with CSS" />
-                <meta name="twitter:description" content="Create inverted corners with CSS" />
-                <meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="inverted-corners">
-    ...
-</div>
-`}
-css={`
-:root {
-    --inverted-corners-background: #52525B;
-    --inverted-corners-size: 2rem;
-}
-
-.inverted-corners {
-    background-color: var(--inverted-corners-background);
-
-    /* Used to position the corner */
-    position: relative;
-}
-
-.inverted-corners::before {
-    content: '';
-
-    /* Absolute position */
-    bottom: calc(-2 * var(--inverted-corners-size));
-    left: 0;
-    position: absolute;
-
-    /* Size */
-    height: calc(2 * var(--inverted-corners-size));
-    width: var(--inverted-corners-size);
-
-    /* Border */
-    background-color: transparent;
-    border-top-left-radius: var(--inverted-corners-size);
-    box-shadow: var(--inverted-corners-background)
-                0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '1rem',
-                    }}
-                >
-                    <div
-                        style={{
-                            height: '8rem',
-                            width: '16rem',
-                        }}
-                    >
-                        <div className='inverted-corners'></div>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <section>
-                <Heading title="Use case" />
-
-                <div
-                    style={{
-                        height: '8rem',
-                        width: '16rem',
-                    }}
-                >
-                    <div className='inverted-corners inverted-corners--speech'>Speech Bubble</div>
-                </div>
-            </section>
-
-            <RelatedPatterns patterns={[Pattern.ConcaveCorners]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/keyboard-shortcut/Details.tsx b/client/patterns/keyboard-shortcut/Details.tsx
deleted file mode 100644
index cafcff9..0000000
--- a/client/patterns/keyboard-shortcut/Details.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import Heading from '../../components/Heading';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-interface ItemProps {
-    action: string;
-    keys: string;
-}
-
-const Item: React.FC<ItemProps> = ({ action, keys }) => {
-    return (
-        <div
-            style={{
-                alignItems: 'center',
-                display: 'flex',
-                justifyContent: 'space-between',
-                margin: 0,
-                padding: '4px 0',
-            }}
-        >
-            <div>{action}</div>
-            <kbd
-                style={{
-                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                    borderRadius: '4px',
-                    boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
-                    color: 'rgba(0, 0, 0, 0.7)',
-                    padding: '8px',
-                }}
-            >
-                {keys}
-            </kbd>
-        </div>
-    );
-};
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.KeyboardShortcut}>
-            <Helmet>
-                <meta name="description" content="Create a keyboard shortcut with CSS" />
-                <meta name="og:description" content="Create a keyboard shortcut with CSS" />
-                <meta name="twitter:description" content="Create a keyboard shortcut with CSS" />
-                <meta name="keywords" content="kbd tag, keyboard shortcut" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    We use the native <code>kbd</code> tag to display the keyboard shortcut.
-                </div>
-                <BrowserFrame
-html={`
-<kbd class="container">
-    ...
-</kbd>
-`}
-css={`
-.container {
-    /* Background and color */
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    color: rgba(0, 0, 0, 0.7);
-
-    /* Bottom shadow */
-    box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, 
-                rgba(0, 0, 0, 0.4) 0px 1px 1px;
-
-    /* Spacing */
-    padding: 8px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <kbd
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                borderRadius: '4px',
-                                boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
-                                color: 'rgba(0, 0, 0, 0.7)',
-                                padding: '8px',
-                            }}
-                        >
-                            ⌘ + C
-                        </kbd>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <section>
-                <Heading title="Use cases" />
-
-                <div style={{ padding: '32px' }}>
-                    <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                        We can use this pattern with the <Link to="/patterns/property-list">property list</Link> pattern
-                        to create shortkey preferences as following:
-                    </div>
-                    <div style={{ width: '250px' }}>
-                        <Item action="Cut" keys="⌘ + X" />
-                        <Item action="Copy" keys="⌘ + C" />
-                        <Item action="Paste" keys="⌘ + V" />
-                    </div>
-                </div>
-            </section>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/lined-paper/Details.tsx b/client/patterns/lined-paper/Details.tsx
deleted file mode 100644
index b6b50b7..0000000
--- a/client/patterns/lined-paper/Details.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.LinedPaper}>
-            <Helmet>
-                <meta name="description" content="Create lined paper with CSS" />
-                <meta name="og:description" content="Create lined paper with CSS" />
-                <meta name="twitter:description" content="Create lined paper with CSS" />
-                <meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Lined background */
-    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
-    background-size: 100% 2em;
-
-    /*
-    Display the content on top of the lines.
-    The line height must be the same as the background size defined above
-    */
-    background-position-y: 24px;
-    line-height: 2em;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
-                                backgroundPositionY: '24px',
-                                backgroundSize: '100% 2em',
-                                height: '200px',
-                                lineHeight: '2em',
-                                width: '75%',
-                            }}
-                        >
-                            <div>
-                                Cascading Style Sheets (CSS) is a style sheet language used for
-                                describing the presentation of a document written in a markup
-                                language like HTML. CSS is a cornerstone technology of the World Wide Web,
-                                alongside HTML and JavaScript.
-                            </div>
-                            <div style={{ textAlign: 'right' }}>— Wikipedia</div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/masonry-grid/Details.tsx b/client/patterns/masonry-grid/Details.tsx
deleted file mode 100644
index 9c3d08c..0000000
--- a/client/patterns/masonry-grid/Details.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-import './masonry-grid.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.MasonryGrid}>
-            <Helmet>
-                <meta name="description" content="Create a masonry grid with CSS" />
-                <meta name="og:description" content="Create a masonry grid with CSS" />
-                <meta name="twitter:description" content="Create a masonry grid with CSS" />
-                <meta name="keywords" content="css column-count, css column-gap, css masonry, css masonry grid" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="masonry-grid">
-    <!--Item -->
-    <div class="masonry-grid__item">...</div>
-
-    <!-- Repeat other items -->
-</div>
-`}
-css={`
-.masonry-grid {
-    /* It is split into 3 columns */
-    column-count: 3;
-
-    /* The space between columns */
-    column-gap: 1rem;
-
-    /* Misc */
-    width: 100%;
-}
-
-.masonry-grid__item {
-    /* Prevent a column from breaking into multiple columns */
-    break-inside: avoid;
-
-    /* Misc */
-    margin-bottom: 1rem;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '1rem',
-                    }}
-                >
-                    <div className='masonry-grid'>
-                        <div className='masonry-grid__item'><Rectangle height={32} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={64} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={96} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={64} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={128} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={96} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={128} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={32} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={64} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={32} /></div>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.SimpleGrid]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx
deleted file mode 100644
index 64afa34..0000000
--- a/client/patterns/media-object/Details.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Square from '../../placeholders/Square';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.MediaObject}>
-            <Helmet>
-                <meta name="description" content="Create a media object with CSS flexbox" />
-                <meta name="og:description" content="Create a media object with CSS flexbox" />
-                <meta name="twitter:description" content="Create a media object with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, media object" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Media object -->
-    <div class="container__media">
-        ...
-    </div>
-
-    <!-- Main content -->
-    <div class="container__content">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Align sub-items to top */
-    align-items: start;
-    display: flex;
-}
-
-.container__media {
-    margin-right: 16px;
-
-    /* Set the width for the media object */
-    width: 200px;
-}
-
-.container__content {
-    /* Take the remaining width */
-    flex: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'flex-start',
-                            display: 'flex',
-                            height: '100%',
-                            padding: '16px',
-                        }}
-                    >
-                        <div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
-                            <Square />
-                        </div>
-                        <div style={{ flex: 1 }}>
-                            <div style={{ marginBottom: '32px', width: '80%' }}>
-                                <Rectangle />
-                            </div>
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/mega-menu/Details.tsx b/client/patterns/mega-menu/Details.tsx
deleted file mode 100644
index 6de8dbd..0000000
--- a/client/patterns/mega-menu/Details.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './mega-menu.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.MegaMenu}>
-            <Helmet>
-                <meta name="description" content="Create a mega menu with CSS" />
-                <meta name="og:description" content="Create a mega menu with CSS" />
-                <meta name="twitter:description" content="Create a mega menu with CSS" />
-                <meta name="keywords" content="css mega menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Move the mouse over the second navigation item to see the mega menu.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Item -->
-    ...
-
-    <!-- An item that triggers displaying the mega menu -->
-    <div class="container__trigger">
-        <!-- The trigger item's content -->
-        <div>...</div>
-
-        <!-- Mega menu -->
-        <div class="container__content">
-            ...
-        </div>
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Used to position the mega menu */
-    position: relative;
-}
-
-.container__trigger:hover .container__content {
-    /* Show the mega menu when hovering the trigger item */
-    display: block;
-}
-
-.container__content {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    margin-top: -1px;
-
-    /* Hidden by default */
-    display: none;
-
-    /* Absolute position */
-    left: 0px;
-    position: absolute;
-    top: 100%;
-
-    /* Take full width */
-    width: 100%;
-
-    /* Displayed on top of other elements */
-    background: #fff;
-    z-index: 9999;
-}
-`}
-                >
-                    <div style={{ padding: '8px' }}>
-                        <div className='p-mega-menu-container'>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'inline-flex',
-                                    justifyContent: 'center',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        padding: '16px',
-                                        width: '150px',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                                <div
-                                    className='p-mega-menu-trigger'
-                                    style={{
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        width: '180px',
-                                    }}
-                                >
-                                    <div style={{ display: 'flex', padding: '16px' }}>
-                                        <div style={{ flex: 1, marginRight: '8px' }}><Rectangle /></div>
-                                        <Triangle size={8} corner='b' />
-                                    </div>
-                                    <div className='p-mega-menu-content'>
-                                        <div style={{ display: 'flex' }}>
-                                            <div style={{ flex: 1, padding: '16px' }}>
-                                                <Block numberOfBlocks={10} />
-                                            </div>
-                                            <div style={{ flex: 1, padding: '16px' }}>
-                                                <Block numberOfBlocks={6} />
-                                            </div>
-                                            <div style={{ flex: 1, padding: '16px' }}>
-                                                <Block numberOfBlocks={8} />
-                                            </div>
-                                            <div style={{ flex: 1, padding: '16px' }}>
-                                                <Block numberOfBlocks={6} />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div
-                                    style={{
-                                        padding: '16px',
-                                        width: '120px',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div style={{ marginTop: '16px' }}>
-                            <Block numberOfBlocks={10} />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
deleted file mode 100644
index 1f8626c..0000000
--- a/client/patterns/menu/Details.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './menu.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Menu}>
-            <Helmet>
-                <meta name="description" content="Create a menu with CSS flexbox" />
-                <meta name="og:description" content="Create a menu with CSS flexbox" />
-                <meta name="twitter:description" content="Create a menu with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="menu">
-    <!-- Normal menu item -->
-    <div class="menu__item">
-        ...
-    </div>
-
-    <!-- With hot key -->
-    <div class="menu__item">
-        <!-- Label -->
-        ...
-        <!-- Hot key -->
-        <div class="menu__hotkey">
-            ...
-        </div>
-    </div>
-
-    <!-- With image and hot key -->
-    <div class="menu__item">
-        <!-- Image -->
-        ...
-
-        <!-- Label -->
-        ...
-
-        <!-- Hot key -->
-        <div class="menu__hotkey">
-            ...
-        </div>
-    </div>
-
-    <!-- Divider -->
-    <div class="menu__divider"></div>
-</div>
-`}
-css={`
-.menu {
-    display: flex;
-    flex-direction: column;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-}
-
-.menu__item {
-    /* Center the content horizontally */
-    align-items: center;
-    display: flex;
-}
-
-.menu__hotkey {
-    /* Push the hot key to the right */
-    margin-left: auto;
-}
-
-.menu__divider {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    height: 1px;
-}
-`}
-                >
-                    <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',
-                                width: '40%',
-                            }}
-                        >
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '40%' }}><Rectangle /></div>
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <Circle />
-                                <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '30%' }}><Rectangle /></div>
-                                <div>Ctrl + X</div>
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '70%' }}><Rectangle /></div>
-                                <div>Ctrl + C</div>
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '20%' }}><Rectangle /></div>
-                                <Circle />
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
-                                    <Circle />
-                                    <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
-                                </div>
-                                <Circle />
-                            </div>
-                            <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '40%' }}><Rectangle /></div>
-                                <div>Ctrl + V</div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns
-                patterns={[
-                    Pattern.DotLeader,
-                    Pattern.MegaMenu,
-                    Pattern.NestedDropdowns,
-                    Pattern.PropertyList,
-                    Pattern.SplitNavigation,
-                ]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/menu/menu.css b/client/patterns/menu/menu.css
deleted file mode 100644
index 8dc8766..0000000
--- a/client/patterns/menu/menu.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.p-menu-item:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-}
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
deleted file mode 100644
index bd13a15..0000000
--- a/client/patterns/modal/Details.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-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 (
-        <DetailsLayout pattern={Pattern.Modal}>
-            <Helmet>
-                <meta name="description" content="Create a modal with CSS flexbox" />
-                <meta name="og:description" content="Create a modal with CSS flexbox" />
-                <meta name="twitter:description" content="Create a modal with CSS flexbox" />
-                <meta name="keywords" content="css dialog, css flexbox, css modal" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can use the <Link to='/patterns/close-button'>close button</Link> to
-                    represent the button for closing the modal.
-                </div>
-                <BrowserFrame
-html={`
-<div class="modal">
-    <!-- Header -->
-    <div class="modal__header">
-        <!-- Title -->
-        ...
-        <!-- Close icon sticks to the right -->
-        ...
-    </div>
-
-    <!-- Content -->
-    ...
-
-    <!-- Footer -->
-    <div class="modal__footer">
-        ...
-    </div>
-</div>
-`}
-css={`
-.modal {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0.3);
-    border-radius: 4px;
-}
-
-.modal__header {
-    display: flex;
-    justify-content: space-between;
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0.3);
-}
-
-.modal__footer {
-    display: flex;
-    /* Push the buttons to the right */
-    justify-content: flex-end;
-    /* Border */
-    border-top: 1px solid rgba(0, 0, 0.3);
-}
-`}
-                >
-                    <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',
-                                width: '50%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ width: '60%' }}><Rectangle /></div>
-                                <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                                    <Circle />
-                                </div>
-                            </div>
-                            <div style={{ padding: '16px' }}>
-                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
-                                <Block numberOfBlocks={5} />
-                            </div>
-                            <div
-                                style={{
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'flex-end',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
-                                <div style={{ width: '30%' }}><Rectangle height={32} /></div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/nested-dropdowns/Details.tsx b/client/patterns/nested-dropdowns/Details.tsx
deleted file mode 100644
index 58fadab..0000000
--- a/client/patterns/nested-dropdowns/Details.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './nested-dropdowns.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.NestedDropdowns}>
-            <Helmet>
-                <meta name="description" content="Create nested dropdown menu with CSS" />
-                <meta name="og:description" content="Create nested dropdown menu with CSS" />
-                <meta name="twitter:description" content="Create nested dropdown menu with CSS" />
-                <meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Hover on the Patterns &rarr; Navigation to see the sub dropdowns.
-                </div>
-                <BrowserFrame
-html={`
-<ul class="dropdown">
-    <li>Home</li>
-    <li>
-        <div>Patterns</div>
-        <!-- First level sub dropdown -->
-        <ul>
-            <li>Layout</li>
-            <li>Input</li>
-            <li>
-                <div>Navigation</div>
-                <!-- Second level sub dropdown -->
-                <ul>
-                    <li>Breadcrumb</li>
-                    <li>Dropdown</li>
-                    <li>Menu</li>
-                    <li>Nested dropdown</li>
-                </ul>
-            </li>
-            <li>Display</li>
-            <li>Feedback</li>
-        </ul>
-    </li>
-    <li>Products</li>
-    <li>About</li>
-</ul>
-`}
-css={`
-.dropdown {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    display: flex;
-
-    /* Reset list styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.dropdown li {
-    /* Spacing */
-    padding: 8px;
-
-    /* Used to position the sub dropdown */
-    position: relative;
-}
-
-/* The sub dropdown */
-.dropdown ul {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Hidden by default */
-    display: none;
-
-    /* Absolute position */
-    left: 0;
-    position: absolute;
-    top: 100%;
-
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    /* Width */
-    width: 200px;
-}
-
-/* The second level sub dropdown */
-.dropdown ul ul {
-    left: 100%;
-    position: absolute;
-    top: 0;
-}
-
-/* Change background color of list item when being hovered */
-.dropdown li:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-/* Show the direct sub dropdown when hovering the list item */
-.dropdown li:hover > ul {
-    display: block;
-}
-`}
-                >
-                    <div
-                        style={{
-                            padding: '8px',
-                        }}
-                    >
-                        <ul className="p-nested-dropdowns">
-                            <li>Home</li>
-                            <li>
-                                <div>Patterns</div>
-                                <ul>
-                                    <li>Layout</li>
-                                    <li>Input</li>
-                                    <li>
-                                        <div>Navigation</div>
-                                        <ul>
-                                            <li>Breadcrumb</li>
-                                            <li>Dropdown</li>
-                                            <li>Menu</li>
-                                            <li>Nested dropdown</li>
-                                        </ul>
-                                    </li>
-                                    <li>Display</li>
-                                    <li>Feedback</li>
-                                </ul>
-                            </li>
-                            <li>Products</li>
-                            <li>About</li>
-                        </ul>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
deleted file mode 100644
index 99a1c43..0000000
--- a/client/patterns/notification/Details.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Notification}>
-            <Helmet>
-                <meta name="description" content="Create a notification with CSS flexbox" />
-                <meta name="og:description" content="Create a notification with CSS flexbox" />
-                <meta name="twitter:description" content="Create a notification with CSS flexbox" />
-                <meta name="keywords" content="css alert, css flexbox, css notification" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can use the <Link to='/patterns/close-button'>close button</Link> to
-                    represent the button for closing the notification.
-                </div>
-                <BrowserFrame
-html={`
-<div class="notification">
-    <!-- Content -->
-    ...
-
-    <!-- Close button sticks to the right -->
-    ...
-</div>
-`}
-css={`
-.notification {
-    display: flex;
-    justify-content: space-between;
-}
-`}
-                >
-                    <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',
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                width: '60%',
-                            }}
-                        >
-                            <div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
-                            <button
-                                style={{
-                                    alignItems: 'center',
-                                    borderColor: 'transparent',
-                                    color: 'rgba(0, 0, 0, .3)',
-                                    display: 'flex',
-                                    fontSize: '36px',
-                                    height: '32px',
-                                    justifyContent: 'center',
-                                    marginRight: '1px',
-                                    width: '32px',
-                                }}
-                            >
-                                <Circle />
-                            </button>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx
deleted file mode 100644
index 706c48e..0000000
--- a/client/patterns/overlay-play-button/Details.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.OverlayPlayButton}>
-            <Helmet>
-                <meta name="description" content="Create an overlay play button with CSS flexbox" />
-                <meta name="og:description" content="Create an overlay play button with CSS flexbox" />
-                <meta name="twitter:description" content="Create an overlay play button with CSS flexbox" />
-                <meta name="keywords" content="css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The video element -->
-    <video src="..." />
-
-    <!-- The overlay area -->
-    <div class="container__overlay">
-        <!-- The player button -->
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Used to position the overlay */
-    position: relative;
-}
-
-.container__overlay {
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 0;
-
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Add a dark background */
-    background-color: rgba(0, 0, 0, 0.25);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                height: '100%',
-                                position: 'relative',
-                                width: '100%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: 'rgba(0, 0, 0, 0.25)',
-                                    display: 'flex',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '4px solid #FFF',
-                                        borderRadius: '9999px',
-                                        display: 'flex',
-                                        height: '64px',
-                                        justifyContent: 'center',
-                                        width: '64px',
-                                    }}
-                                >
-                                    <Triangle backgroundColor='#FFF' corner='r' size={8} />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.VideoBackground]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/pagination/Details.tsx b/client/patterns/pagination/Details.tsx
deleted file mode 100644
index 61e499b..0000000
--- a/client/patterns/pagination/Details.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Pagination}>
-            <Helmet>
-                <meta name="description" content="Create a pagination with CSS flexbox" />
-                <meta name="og:description" content="Create a pagination with CSS flexbox" />
-                <meta name="twitter:description" content="Create a pagination with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css pagination" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="pagination">
-    <!-- Pagination item -->
-    <div class="pagination__item">
-        ...
-    </div>
-
-    <!-- Repeat other items -->
-    ...
-</div>
-`}
-css={`
-.pagination {
-    display: flex;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-}
-
-.pagination__item {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Right border */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-}
-.pagination__item + .pagination__item {
-    /* No right border */
-    border-right: none;
-}
-`}
-                >
-                    <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',
-                                display: 'flex',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                    width: '128px',
-                                }}
-                            >
-                                <Rectangle />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                }}
-                            >
-                                <Circle size={16} />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                }}
-                            >
-                                <Circle size={16} />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                }}
-                            >
-                                <Circle size={16} />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                }}
-                            >
-                                <Circle size={16} />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                    width: '64px',
-                                }}
-                            >
-                                <Rectangle />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/popover-arrow/Details.tsx b/client/patterns/popover-arrow/Details.tsx
deleted file mode 100644
index 6bffa7a..0000000
--- a/client/patterns/popover-arrow/Details.tsx
+++ /dev/null
@@ -1,407 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.PopoverArrow}>
-            <Helmet>
-                <meta name="description" content="Create a popover arrow with CSS" />
-                <meta name="og:description" content="Create a popover arrow with CSS" />
-                <meta name="twitter:description" content="Create a popover arrow with CSS" />
-                <meta name="keywords" content="css arrow, css popover" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The content -->
-    ...
-
-    <!-- Top left arrow -->
-    <div class="container__arrow container__arrow--tl"></div>
-
-    <!-- Top center arrow -->
-    <div class="container__arrow container__arrow--tc"></div>
-
-    <!-- Top right arrow -->
-    <div class="container__arrow container__arrow--tr"></div>
-
-    <!-- Right top arrow -->
-    <div class="container__arrow container__arrow--rt"></div>
-
-    <!-- Right center arrow -->
-    <div class="container__arrow container__arrow--rc"></div>
-
-    <!-- Right bottom arrow -->
-    <div class="container__arrow container__arrow--rb"></div>
-
-    <!-- Bottom left arrow -->
-    <div class="container__arrow container__arrow--bl"></div>
-
-    <!-- Bottom center arrow -->
-    <div class="container__arrow container__arrow--bc"></div>
-
-    <!-- Bottom right arrow -->
-    <div class="container__arrow container__arrow--br"></div>
-
-    <!-- Left top arrow -->
-    <div class="container__arrow container__arrow--lt"></div>
-
-    <!-- Left center arrow -->
-    <div class="container__arrow container__arrow--lc"></div>
-
-    <!-- Left bottom arrow -->
-    <div class="container__arrow container__arrow--lb"></div>
-</div>
-`}
-css={`
-.container {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Used to position the arrow */
-    position: relative;
-}
-
-.container__arrow {
-    /* Size */
-    height: 16px;
-    width: 16px;
-
-    background-color: #FFF;
-    position: absolute;
-}
-
-.container__arrow--tl {
-    /* Position at the top left corner */
-    left: 32px;
-    top: 0px;
-
-    /* Border */
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.container__arrow--tc {
-    /* Position at the top center */
-    left: 50%;
-    top: 0px;
-
-    /* Border */
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--tr {
-    /* Position at the top right corner */
-    right: 32px;
-    top: 0px;
-
-    /* Border */
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--rt {
-    /* Position at the right top corner */
-    right: 0;
-    top: 32px;
-
-    /* Border */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, 50%) rotate(45deg);
-}
-
-.container__arrow--rc {
-    /* Position at the right center */
-    right: 0;
-    top: 50%;
-
-    /* Border */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.container__arrow--rb {
-    /* Position at the right bottom corner */
-    bottom: 32px;
-    right: 0;
-
-    /* Border */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.container__arrow--bl {
-    /* Position at the bottom left corner */
-    bottom: -16px;
-    left: 32px;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.container__arrow--bc {
-    /* Position at the bottom center */
-    bottom: -16px;
-    left: 50%;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--br {
-    /* Position at the bottom right corner */
-    bottom: -16px;
-    right: 32px;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--lt {
-    /* Position at the left top corner */
-    left: 0;
-    top: 32px;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, 50%) rotate(45deg);
-}
-
-.container__arrow--lc {
-    /* Position at the left center */
-    left: 0;
-    top: 50%;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--lb {
-    /* Position at the left bottom corner */
-    bottom: 32px;
-    left: 0;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-`}
-                >
-                    <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: '300px',
-                                marginBottom: '16px',
-                                position: 'relative',
-                                width: '300px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    left: '32px',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: '32px',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '32px',
-                                    transform: 'translate(50%, 50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translate(50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '32px',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    transform: 'translate(50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '-16px',
-                                    height: '16px',
-                                    left: '32px',
-                                    position: 'absolute',
-                                    transform: 'translate(50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '-16px',
-                                    height: '16px',
-                                    left: '50%',
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '-16px',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: '32px',
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '32px',
-                                    transform: 'translate(-50%, 50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '32px',
-                                    height: '16px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx
deleted file mode 100644
index 7848215..0000000
--- a/client/patterns/presence-indicator/Details.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.PresenceIndicator}>
-            <Helmet>
-                <meta name="description" content="Create a presence indicator with CSS" />
-                <meta name="og:description" content="Create a presence indicator with CSS" />
-                <meta name="twitter:description" content="Create a presence indicator with CSS" />
-                <meta name="keywords" content="css indicator" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Other element such as avatar -->
-    ...
-
-    <!-- The presence indicator -->
-    <div class="container__indicator"></div>
-</div>
-`}
-css={`
-.container {
-    position: relative;
-}
-
-.container__indicator {
-    /* Shown at the bottom right corner */
-    bottom: 0,
-    position: absolute;
-    right: 0;
-    transform: translate(50%, 50%);
-
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 16px;
-    width: 16px;
-
-    /* Background color */
-    background-color: #FF4136;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                height: '64px',
-                                marginRight: '16px',
-                                position: 'relative',
-                                width: '64px',
-                            }}
-                        >
-                            <Circle size={64} />
-                            <div
-                                style={{
-                                    backgroundColor: '#FF4136',
-                                    borderRadius: '9999px',
-                                    bottom: 0,
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    transform: 'translate(50%, 50%)',
-                                    width: '16px',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/previous-next-buttons/Details.tsx b/client/patterns/previous-next-buttons/Details.tsx
deleted file mode 100644
index cda4f86..0000000
--- a/client/patterns/previous-next-buttons/Details.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.PreviousNextButtons}>
-            <Helmet>
-                <meta name="description" content="Create previous and next buttons with CSS flexbox" />
-                <meta name="og:description" content="Create previous and next buttons with CSS flexbox" />
-                <meta name="twitter:description" content="Create previous and next buttons with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css pagination" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Previous link sticks to the left -->
-    <a>..</a>
-
-    <!-- Next link sticks to the right -->
-    <a>..</a>
-</div>
-`}
-css={`
-.container {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '50%' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '8px',
-                                    width: '100%',
-                                }}
-                            >
-                                <a
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        padding: '8px',
-                                        width: '30%',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>&lt;</div>
-                                    <Rectangle />
-                                </a>
-                                <a
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        padding: '8px',
-                                        width: '30%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                    <div style={{ marginLeft: '8px' }}>&gt;</div>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/price-tag/Details.tsx b/client/patterns/price-tag/Details.tsx
deleted file mode 100644
index 6399870..0000000
--- a/client/patterns/price-tag/Details.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import './price-tag.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.PriceTag}>
-            <Helmet>
-                <meta name="description" content="Create a price tag with CSS" />
-                <meta name="og:description" content="Create a price tag with CSS" />
-                <meta name="twitter:description" content="Create a price tag with CSS" />
-                <meta name="keywords" content="css price tag" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="price-tag">
-    ...
-</div>
-`}
-css={`
-:root {
-    --price-tag-background: rgba(0, 0, 0, 0.3);
-    --price-tag-height: 2rem;
-}
-
-.price-tag {
-    background: var(--price-tag-background);
-    color: #FFF;
-
-    /* Center the price */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Used to position the triangle */
-    position: relative;
-
-    /* Size */
-    height: var(--price-tag-height);
-
-    /* Spacing */
-    padding: 0.25rem 0.5rem;
-}
-
-/* The triangle */
-.price-tag::before {
-    content: '';
-
-    border-color: transparent var(--price-tag-background) transparent transparent;
-    border-style: solid;
-    border-width: calc(var(--price-tag-height) / 2)
-                  calc(var(--price-tag-height) / 2)
-                  calc(var(--price-tag-height) / 2)
-                  0rem;
-    
-    /* Position */
-    left: 0px;
-    position: absolute;
-    top: 0px;
-    transform: translate(-100%, 0px);
-}
-
-/* The dot */
-.price-tag::after {
-    content: '';
-
-    /* Make it like a cirle */ 
-    background: #FFF;
-    border-radius: 9999rem;
-    
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 50%;
-    transform: translate(-0.5rem, -50%);
-
-    /* Size */
-    height: 0.5rem;
-    width: 0.5rem;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div className="price-tag">99.99$</div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.TriangleButtons]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
deleted file mode 100644
index ea72d7d..0000000
--- a/client/patterns/pricing-table/Details.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-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 (
-        <DetailsLayout pattern={Pattern.PricingTable}>
-            <Helmet>
-                <meta name="description" content="Create a pricing table with CSS flexbox" />
-                <meta name="og:description" content="Create a pricing table with CSS flexbox" />
-                <meta name="twitter:description" content="Create a pricing table with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css pricing table" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can <Link to='/patterns/ribbon'>add</Link> <Link to='/patterns/corner-ribbon'>a ribbon</Link> to
-                    indicate the most popular option.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Pricing column -->
-    <div class="container__column">
-        <!-- Title -->
-        ...
-
-        <!-- Price -->
-        ...
-
-        <!-- Description -->
-        ...
-
-        <!-- Button -->
-        ...
-    </div>
-
-    <!-- Repeated pricing columns -->
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.container__column {
-    /* Content is centered vertically */
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    /* Make all columns have the same width */
-    flex: 1;
-
-    /* OPTIONAL: Space between columns */
-    margin: 0 8px;
-
-    /* OPTIONAL: Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '16px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                justifyContent: 'center',
-                                width: '60%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
-                                    margin: '0 8px',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
-                                <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
-                                <div style={{ marginBottom: '16px', width: '100%' }}>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                                <div style={{ width: '40%' }}><Rectangle height={32} /></div>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
-                                    margin: '0 8px',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
-                                <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
-                                <div style={{ marginBottom: '16px', width: '100%' }}>
-                                    <Block numberOfBlocks={20} />
-                                </div>
-                                <div style={{ width: '40%' }}><Rectangle height={32} /></div>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
-                                    margin: '0 8px',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
-                                <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
-                                <div style={{ marginBottom: '16px', width: '100%' }}>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                                <div style={{ width: '40%' }}><Rectangle height={32} /></div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx
deleted file mode 100644
index 175152b..0000000
--- a/client/patterns/progress-bar/Details.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import useInterval from '../../hooks/useInterval';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    const [progress, setProgress] = React.useState(0);
-    useInterval(() => {
-        setProgress((v) => v === 100 ? 0 : v + 1);
-    }, 1 * 100);
-
-    return (
-        <DetailsLayout pattern={Pattern.ProgressBar}>
-            <Helmet>
-                <meta name="description" content="Create a progress bar with CSS flexbox" />
-                <meta name="og:description" content="Create a progress bar with CSS flexbox" />
-                <meta name="twitter:description" content="Create a progress bar with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css progress bar" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <div class="container__progress" style="
-        /* Width based on the number of percentages */
-        width: 40%;
-    ">
-        <!-- The number of percentages -->
-        40%
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Colors */
-    background-color: rgba(0, 0, 0, .1);
-
-    /* Rounded border */
-    border-radius: 9999px;
-}
-
-.container__progress {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Colors */
-    background-color: #357edd;
-    color: #fff;
-
-    /* Rounded border */
-    border-radius: 9999px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                borderRadius: '9999px',
-                                height: '16px',
-                                width: '50%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: '#357EDD',
-                                    borderRadius: '9999px',
-                                    color: '#FFF',
-                                    display: 'flex',
-                                    fontSize: '12px',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    padding: '4px',
-                                    width: `${progress}%`,
-                                }}
-                            >
-                                {progress}%
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx
deleted file mode 100644
index eece0e4..0000000
--- a/client/patterns/property-list/Details.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    const Item: React.FC<{}> = ({ children }) => {
-        return (
-            <dl
-                style={{
-                    alignItems: 'center',
-                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    margin: 0,
-                    padding: '8px 0',
-                }}
-            >
-                {children}
-            </dl>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.PropertyList}>
-            <Helmet>
-                <meta name="description" content="Create a property list with CSS flexbox" />
-                <meta name="og:description" content="Create a property list with CSS flexbox" />
-                <meta name="twitter:description" content="Create a property list with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, property list" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- A property item -->
-<dl class="container">
-    <!-- Property name -->
-    <dt>...</dt>
-
-    <!-- Property value -->
-    <dd>...</dd>
-</dl>
-`}
-css={`
-.container {
-    /* Content is center horizontally */
-    align-items: center;
-    display: flex;
-
-    /*
-    The property name will stick to the left, and the value
-    will stick to the right
-    */
-    justify-content: space-between;
-
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Spacing */
-    margin: 0px;
-    padding: 8px 0px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '40%' }}>
-                            <Item>
-                                <dt style={{ width: '80%' }}><Rectangle /></dt>
-                                <dd><Circle /></dd>
-                            </Item>
-                            <Item>
-                                <dt style={{ width: '60%' }}><Rectangle /></dt>
-                                <dd><Circle /></dd>
-                            </Item>
-                            <Item>
-                                <dt style={{ width: '30%' }}><Rectangle /></dt>
-                                <dd><Circle /></dd>
-                            </Item>
-                            <Item>
-                                <dt style={{ width: '50%' }}><Rectangle /></dt>
-                                <dd><Circle /></dd>
-                            </Item>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <section>
-                <Heading title="Use cases" />
-
-                <div style={{ padding: '32px', width: '500px' }}>
-                    <Item>
-                        <dt>Name</dt>
-                        <dd>WebAssembly in Action</dd>
-                    </Item>
-                    <Item>
-                        <dt>Author</dt>
-                        <dd>Gerard Gallant</dd>
-                    </Item>
-                    <Item>
-                        <dt>Publishing date</dt>
-                        <dd>November 2019</dd>
-                    </Item>
-                    <Item>
-                        <dt>ISBN</dt>
-                        <dd>9781617295744</dd>
-                    </Item>
-                </div>
-            </section>
-            <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.SplitNavigation]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
deleted file mode 100644
index d8c30b7..0000000
--- a/client/patterns/questions-and-answers/Details.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-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={{
-                        alignItems: 'center',
-                        cursor: 'pointer',
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        padding: '16px 0',
-                    }}
-                    onClick={click}
-                >
-                    {title}
-                    <Triangle size={8} corner={isOpened ? 't' : 'b'} />
-                </div>
-                <div
-                    style={{
-                        display: isOpened ? 'block' : 'none',
-                        marginBottom: '16px',
-                    }}
-                >
-                    {children}
-                </div>
-            </>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.QuestionsAndAnswers}>
-            <Helmet>
-                <meta name="description" content="Create a questions and answers section with CSS flexbox" />
-                <meta name="og:description" content="Create a questions and answers section with CSS flexbox" />
-                <meta name="twitter:description" content="Create a questions and answers section with CSS flexbox" />
-                <meta name="keywords" content="css accordion, css faq, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Each question and answer item -->
-<div class="container">
-    <!-- Heading -->
-    <div class="container__heading">
-        <!-- Question -->
-        ...
-
-        <!-- The toggle icon sticks to the right -->
-        ...
-    </div>
-
-    <!-- Answer -->
-</div>
-`}
-css={`
-.container {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-}
-
-.container__heading {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '60%' }}>
-                            <div
-                                style={{
-                                    margin: '0 auto',
-                                    paddingBottom: '24px',
-                                    width: '200px',
-                                }}
-                            >
-                                <Rectangle />
-                            </div>
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                }}
-                            >
-                                <Item
-                                    index={0}
-                                    title={<div style={{ width: '40%' }}><Rectangle /></div>}
-                                >
-                                    <Block numberOfBlocks={10} />
-                                </Item>
-                            </div>
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                }}
-                            >
-                                <Item
-                                    index={1}
-                                    title={<div style={{ width: '80%' }}><Rectangle /></div>}
-                                >
-                                    <Block numberOfBlocks={15} />
-                                </Item>
-                            </div>
-                            <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                                <Item
-                                    index={2}
-                                    title={<div style={{ width: '60%' }}><Rectangle /></div>}
-                                >
-                                    <Block numberOfBlocks={10} />
-                                </Item>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.Accordion]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/radial-progress-bar/Details.tsx b/client/patterns/radial-progress-bar/Details.tsx
deleted file mode 100644
index f41d4cb..0000000
--- a/client/patterns/radial-progress-bar/Details.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-interface RadialProgressProps {
-    percentages: number;
-}
-
-const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
-    return (
-        <div style={{ position: 'relative' }}>
-            <div
-                style={{
-                    alignItems: 'center',
-                    border: '12px solid rgba(0, 0, 0, 0.3)',
-                    borderRadius: '9999px',
-                    color: 'rgba(0, 0, 0, 0.3)',
-                    display: 'flex',
-                    fontSize: '24px',
-                    height: '128px',
-                    justifyContent: 'center',
-                    width: '128px',
-                }}
-            >
-                {percentages}%
-            </div>
-            <div
-                style={{
-                    clip: percentages >= 50
-                            ? 'rect(auto, auto, auto, auto)'
-                            : 'rect(0px, 128px, 128px, 64px)',
-                    height: '100%',
-                    left: 0,
-                    position: 'absolute',
-                    top: 0,
-                    width: '100%',
-                }}
-            >
-                <div
-                    style={{
-                        border: '12px solid #00449E',
-                        borderRadius: '9999px',
-                        clip: 'rect(0px, 64px, 128px, 0px)',
-                        height: '100%',
-                        position: 'absolute',
-                        transform: `rotate(${percentages * 360 / 100}deg)`,
-                        width: '100%',
-                    }}
-                />
-                <div
-                    style={{
-                        border: '12px solid #00449E',
-                        borderRadius: '9999px',
-                        clip: 'rect(0px, 64px, 128px, 0px)',
-                        height: '100%',
-                        position: 'absolute',
-                        transform: `rotate(${percentages >= 50 ? 180 : 0}deg)`,
-                        width: '100%',
-                    }}
-                />
-            </div>
-        </div>
-    );
-};
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.RadialProgressBar}>
-            <Helmet>
-                <meta name="description" content="Create a radial progress bar with CSS flexbox" />
-                <meta name="og:description" content="Create a radial progress bar with CSS flexbox" />
-                <meta name="twitter:description" content="Create a radial progress bar with CSS flexbox" />
-                <meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Show number of percentages -->
-    <div class="container__percentages">
-        ...
-    </div>
-
-    <!-- The curve -->
-    <div class="container__curve">
-        <!-- The first half -->
-        <div class="container__half container__half--first"></div>
-
-        <!-- The second half -->
-        <div class="container__half container__half--second"></div>
-    </div>
-</div>
-`}
-css={`
-.container {
-    position: relative;
-}
-
-.container__percentages {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Rounded border */
-    border: 12px solid rgba(0, 0, 0, 0.3);
-    border-radius: 9999px;
-
-    /* Size */
-    height: 128px;
-    width: 128px;
-}
-
-.container__curve {
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 0;
-
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-
-    /* If percentages is less than 50 */
-    clip: rect(0px, 128px, 128px, 64px);
-
-    /* If percentages is greater than or equals to 50 */
-    clip: rect(auto, auto, auto, auto);
-}
-
-.container__half {
-    /* Take full size */
-    height: 100%;
-    position: absolute;
-    width: 100%;
-
-    /*
-    Background color of curve.
-    The border width should be the same as the area showing the percentages
-    */
-    border: 12px solid rgb(0, 68, 158);
-    border-radius: 9999px;
-}
-
-.container__half--first {    
-    /* Position */
-    clip: rect(0px, 64px, 128px, 0px);
-    transform: rotate(162deg); /* Number of percentages * 360 / 100 */
-}
-
-.container__half--second {
-    /* Position */
-    clip: rect(0px, 64px, 128px, 0px);
-
-    /* If percentages is less than 50 */
-    transform: rotate(0deg);
-
-    /* If percentages is greater than or equals to 50 */
-    transform: rotate(180deg);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
-                        <RadialProgress percentages={80} />
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/radio-button-group/Details.tsx b/client/patterns/radio-button-group/Details.tsx
deleted file mode 100644
index 2dae615..0000000
--- a/client/patterns/radio-button-group/Details.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './radio-button-group.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-interface RadioProps {
-    value: string;
-}
-
-const Details: React.FC<{}> = () => {
-    const [selectedValue, setSelectedValue] = React.useState('1');
-
-    const Radio: React.FC<RadioProps> = ({ value, children }) => {
-        const click = () => setSelectedValue(value);
-
-        return (
-            <label
-                htmlFor="radio-button-group"
-                style={{
-                    alignItems: 'center',
-                    backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
-                    cursor: 'pointer',
-                    display: 'inline-flex',
-                    padding: '8px',
-                }}
-            >
-                <input
-                    id="radio-button-group"
-                    type="radio"
-                    name="option"
-                    value={value}
-                    style={{ display: 'none' }}
-                    onChange={click}
-                />
-                {children}
-            </label>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.RadioButtonGroup}>
-            <Helmet>
-                <meta name="description" content="Create a radio button group with CSS flexbox" />
-                <meta name="og:description" content="Create a radio button group with CSS flexbox" />
-                <meta name="twitter:description" content="Create a radio button group with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css radio button" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Each radio item -->
-    <label class="container__label">
-        <!-- The radio input -->
-        <input type="radio" class="container__input" />
-
-        <!-- The text -->
-        ...
-    </label>
-
-    <!-- Repeat other items -->
-    ...
-</div>
-`}
-css={`
-.container {
-    display: flex;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    height: 32px;
-}
-
-.container__label {
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    padding: 8px;
-
-    /* For not selected radio */
-    background-color: transparent;
-    color: #CCC;
-}
-
-.container__label:last-child {
-    /* Remove the right border from the last label */
-    border-right-color: transparent;
-}
-
-.container__label--selected {
-    /* For selected radio */
-    background-color: #00449E;
-    color: #FFF;
-}
-
-.container__input {
-    /* Hide it */
-    display: none;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            className="p-radio-button-group"
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                display: 'flex',
-                                height: '32px',
-                            }}
-                        >
-                            <Radio value='1'>
-                                <div style={{ width: '80px' }}><Rectangle /></div>
-                            </Radio>
-                            <Radio value='2'>
-                                <div style={{ width: '120px' }}><Rectangle /></div>
-                            </Radio>
-                            <Radio value='3'>
-                                <div style={{ width: '100px' }}><Rectangle /></div>
-                            </Radio>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/radio-button-group/radio-button-group.css b/client/patterns/radio-button-group/radio-button-group.css
deleted file mode 100644
index 39d5284..0000000
--- a/client/patterns/radio-button-group/radio-button-group.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.p-radio-button-group label {
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-}
-.p-radio-button-group label:last-child {
-    border-right-color: transparent;
-}
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
deleted file mode 100644
index 721e7ab..0000000
--- a/client/patterns/radio-switch/Details.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    const [isFirstChecked, setFirstChecked] = React.useState(false);
-    const toggle = () => setFirstChecked((c) => !c);
-
-    return (
-        <DetailsLayout pattern={Pattern.RadioSwitch}>
-            <Helmet>
-                <meta name="description" content="Create a radio switch with CSS flexbox" />
-                <meta name="og:description" content="Create a radio switch with CSS flexbox" />
-                <meta name="twitter:description" content="Create a radio switch with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css radio switch, css switch" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Container -->
-<div class="container">
-    <!-- Radio container -->
-    <label class="container__label container__label--selected">
-        <input type="radio" class="container__input" />
-
-        <!-- Text -->
-        ...
-    </label>
-
-    <!-- Other radio item -->
-    ...
-</div>
-`}
-css={`
-.container {
-    background-color: rgba(0, 0, 0, .1);
-    border-radius: 9999px;
-    display: inline-flex;
-    padding: 4px;
-}
-
-.container__label {
-    border-radius: 9999px;
-    cursor: pointer;
-    padding: 4px 8px;
-}
-
-.container__label--selected {
-    /* For selected radio only */
-    background-color: #357edd;
-    color: #fff;
-}
-
-.container__input {
-    display: none
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                borderRadius: '9999px',
-                                display: 'inline-flex',
-                                padding: '4px',
-                            }}
-                        >
-                            <label
-                                htmlFor="radio-switch-first"
-                                style={{
-                                    backgroundColor: isFirstChecked ? '#357EDD' : '',
-                                    borderRadius: '9999px',
-                                    color: isFirstChecked ? '#FFF' : '',
-                                    cursor: 'pointer',
-                                    padding: '16px 8px',
-                                }}
-                            >
-                                <input
-                                    id="radio-switch-first"
-                                    type="radio"
-                                    style={{ display: 'none' }}
-                                    checked={isFirstChecked}
-                                    onChange={toggle}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
-                                        borderRadius: '4px',
-                                        height: '8px',
-                                        width: '64px',
-                                    }}
-                                />
-                            </label>
-                            <label
-                                htmlFor="radio-switch-second"
-                                style={{
-                                    backgroundColor: isFirstChecked ? '' : '#357EDD',
-                                    borderRadius: '9999px',
-                                    color: isFirstChecked ? '' : '#FFF',
-                                    cursor: 'pointer',
-                                    padding: '16px 8px',
-                                }}
-                            >
-                                <input
-                                    id="radio-switch-second"
-                                    type="radio"
-                                    style={{ display: 'none' }}
-                                    checked={!isFirstChecked}
-                                    onChange={toggle}
-                                />
-                                <div
-                                    style={{
-                                        backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
-                                        borderRadius: '4px',
-                                        height: '8px',
-                                        width: '64px',
-                                    }}
-                                />
-                            </label>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <section>
-                <Heading title="Use cases" />
-
-                <div style={{ padding: '32px' }}>
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                            borderRadius: '9999px',
-                            display: 'inline-flex',
-                            padding: '4px',
-                        }}
-                    >
-                        <label
-                            style={{
-                                backgroundColor: '#357EDD',
-                                borderRadius: '9999px',
-                                color: '#FFF',
-                                cursor: 'pointer',
-                                display: 'flex',
-                                padding: '4px 8px',
-                            }}
-                        >
-                            <input type="radio" style={{ display: 'none' }} />
-                            Monthly
-                        </label>
-                        <label
-                            style={{
-                                borderRadius: '9999px',
-                                cursor: 'pointer',
-                                display: 'flex',
-                                padding: '4px 8px',
-                            }}
-                        >
-                            <input type="radio" style={{ display: 'none' }} />
-                            Yearly
-                        </label>
-                    </div>
-                </div>
-            </section>
-            <RelatedPatterns patterns={[Pattern.Switch]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
deleted file mode 100644
index 5756dc2..0000000
--- a/client/patterns/rating/Details.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Star from './Star';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Rating}>
-            <Helmet>
-                <meta name="description" content="Create a star rating with CSS flexbox" />
-                <meta name="og:description" content="Create a star rating with CSS flexbox" />
-                <meta name="twitter:description" content="Create a star rating with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css star rating" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="rating">
-    <button class="rating__star">☆</button>
-    <button class="rating__star">☆</button>
-    <button class="rating__star">☆</button>
-    <button class="rating__star">☆</button>
-    <button class="rating__star">★</button>
-</div>
-`}
-css={`
-.rating {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    flex-direction: row-reverse;
-
-    font-size: 32px;
-}
-
-.rating__star:hover,
-.rating__star:hover ~ .rating__star {
-    color: transparent;
-}
-
-/*
-Make all previous stars selected when hover on a star
-Note that we use \`flex-direction: row-reverse\` on the container
-*/
-.rating__star:hover:before,
-.rating__star:hover ~ .rating__star:before {
-    color: #00449e;
-    content: '\\2605';
-    left: 0;
-    position: absolute;
-}
-
-.rating__star {
-    /* Reset styles for button */
-    background-color: transparent;
-    border: transparent;
-    margin: 0 2px;
-    padding: 0;
-
-    /* Used to position the hover state */
-    position: relative;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div className="p-rating">
-                            <Star isActive={false} />
-                            <Star isActive={false} />
-                            <Star isActive={false} />
-                            <Star isActive={false} />
-                            <Star isActive={true} />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/rating/Star.tsx b/client/patterns/rating/Star.tsx
deleted file mode 100644
index 428d112..0000000
--- a/client/patterns/rating/Star.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import './star.css';
-
-interface StarProps {
-    isActive: boolean;
-}
-
-const Star: React.FC<StarProps> = ({ isActive }) => {
-    return (
-        <button className="p-rating-star">
-            {isActive ? '★' : '☆'}
-        </button>
-    );
-};
-
-export default Star;
diff --git a/client/patterns/resizable-element/Details.tsx b/client/patterns/resizable-element/Details.tsx
deleted file mode 100644
index 5c56c43..0000000
--- a/client/patterns/resizable-element/Details.tsx
+++ /dev/null
@@ -1,280 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ResizableElement}>
-            <Helmet>
-                <meta name="description" content="Create resizable indicators with CSS" />
-                <meta name="og:description" content="Create resizable indicators with CSS" />
-                <meta name="twitter:description" content="Create resizable indicators with CSS" />
-                <meta name="keywords" content="css resizable, css resize cursor" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can move the mouse over each squares located at the corners and the middle of sides to see
-                    the cursors which indicate the associated side can be resized.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The content -->
-    ...
-
-    <!-- The top left square -->
-    <div class="container__resizer container__resizer--tl"></div>
-
-    <!-- The top square -->
-    <div class="container__resizer container__resizer--tc"></div>
-
-    <!-- The top right square -->
-    <div class="container__resizer container__resizer--tr"></div>
-
-    <!-- The right square -->
-    <div class="container__resizer container__resizer--rc"></div>
-
-    <!-- The right bottom square -->
-    <div class="container__resizer container__resizer--rb"></div>
-
-    <!-- The bottom square -->
-    <div class="container__resizer container__resizer--bc"></div>
-
-    <!-- The bottom left square -->
-    <div class="container__resizer container__resizer--bl"></div>
-
-    <!-- The left square -->
-    <div class="container__resizer container__resizer--lc"></div>
-</div>
-`}
-css={`
-.container {
-    /* Border */
-    border: 1px dashed rgba(0, 0, 0, 0.3);
-
-    /* Used to position the squares */
-    position: relative;
-}
-
-.container__resizer {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    position: absolute;
-
-    /* Size */
-    height: 12px;
-    width: 12px;
-}
-
-.container__resizer--tl {
-    /* Resize cursor */
-    cursor: nwse-resize;
-
-    /* Positioned at the top left corner */
-    left: 0px;
-    top: 0px;
-    transform: translate(-50%, -50%);
-}
-
-.container__resizer--tc {
-    /* Resize cursor */
-    cursor: ns-resize;
-
-    /* Positioned at the middle of top side */
-    left: 50%;
-    top: 0px;
-    transform: translate(-50%, -50%);
-}
-
-.container__resizer--tr {
-    /* Resize cursor */
-    cursor: nesw-resize;
-
-    /* Positioned at the top right corner */
-    right: 0px;
-    top: 0px;
-    transform: translate(50%, -50%);
-}
-
-.container__resizer--rc {
-    /* Resize cursor */
-    cursor: ew-resize;
-
-    /* Positioned at the middle of right side */
-    right: 0px;
-    top: 50%;
-    transform: translate(50%, -50%);
-}
-
-.container__resizer--rb {
-    /* Resize cursor */
-    cursor: nwse-resize;
-
-    /* Positioned at the right bottom corner */
-    bottom: 0px;
-    right: 0px;
-    transform: translate(50%, 50%);
-}
-
-.container__resizer--bc {
-    /* Resize cursor */
-    cursor: ns-resize;
-
-    /* Positioned at the middle of bottom side */
-    bottom: 0px;
-    right: 50%;
-    transform: translate(50%, 50%);
-}
-
-.container__resizer--bl {
-    /* Resize cursor */
-    cursor: nesw-resize;
-
-    /* Positioned at the bottom left corner */
-    bottom: 0px;
-    left: 0px;
-    transform: translate(-50%, 50%);
-}
-
-.container__resizer--lc {
-    /* Resize cursor */
-    cursor: ew-resize;
-
-    /* Positioned at the middle of left side */
-    left: 0px;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px dashed rgba(0, 0, 0, 0.3)',
-                                height: '200px',
-                                position: 'relative',
-                                width: '200px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    cursor: 'nwse-resize',
-                                    height: '12px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%)',
-                                    width: '12px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    cursor: 'ns-resize',
-                                    height: '12px',
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%)',
-                                    width: '12px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    cursor: 'nesw-resize',
-                                    height: '12px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: 0,
-                                    transform: 'translate(50%, -50%)',
-                                    width: '12px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    cursor: 'ew-resize',
-                                    height: '12px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translate(50%, -50%)',
-                                    width: '12px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: 0,
-                                    cursor: 'nwse-resize',
-                                    height: '12px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    transform: 'translate(50%, 50%)',
-                                    width: '12px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: 0,
-                                    cursor: 'ns-resize',
-                                    height: '12px',
-                                    position: 'absolute',
-                                    right: '50%',
-                                    transform: 'translate(50%, 50%)',
-                                    width: '12px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: 0,
-                                    cursor: 'nesw-resize',
-                                    height: '12px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, 50%)',
-                                    width: '12px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    cursor: 'ew-resize',
-                                    height: '12px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
-                                    width: '12px',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx
deleted file mode 100644
index eb9f5ec..0000000
--- a/client/patterns/ribbon/Details.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Ribbon}>
-            <Helmet>
-                <meta name="description" content="Create a ribbon with CSS" />
-                <meta name="og:description" content="Create a ribbon with CSS" />
-                <meta name="twitter:description" content="Create a ribbon with CSS" />
-                <meta name="keywords" content="css ribbon" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The content -->
-    ...
-
-    <!-- The left side -->
-    <div class="container__side container__side--left"></div>
-
-    <!-- The left triangle displayed below the content -->
-    <div class="container__triangle container__triangle--left"></div>
-
-    <!-- The right triangle displayed below the content -->
-    <div class="container__triangle container__triangle--right"></div>
-
-    <!-- The right side -->
-    <div class="container__side container__side--right"></div>
-</div>
-`}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Background color */
-    background-color: #BBB;
-
-    /* Size */
-    height: 32px;
-
-    /* Use to position the corners */
-    position: relative;
-}
-
-.container__side {
-    bottom: -8px;
-    position: absolute;
-
-    /* Displayed under the container */
-    z-index: -1;
-
-    /* Background */
-    border: 16px solid #CCC;
-    border-left-color: transparent;
-}
-
-.container__side--left {
-    /* Position */
-    left: -24px;
-}
-
-.container__side--right {
-    /* Position */
-    right: -24px;
-}
-
-.container__triangle {
-    position: absolute;
-    top: 100%;
-
-    border: 8px solid transparent;
-    border-bottom-width: 0;
-    border-top-color: #AAA;
-}
-
-.container__triangle--left {
-    border-right-width: 0;
-    left: 0;
-}
-
-.container__triangle--right {
-    border-left-width: 0;
-    right: 0;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                backgroundColor: '#BBB',
-                                display: 'flex',
-                                height: '32px',
-                                justifyContent: 'center',
-                                padding: '0 16px',
-                                position: 'relative',
-                                width: '150px',
-                            }}
-                        >
-                            <Rectangle />
-                            <div
-                                style={{
-                                    border: '16px solid #CCC',
-                                    borderLeftColor: 'transparent',
-                                    bottom: '-8px',
-                                    left: '-24px',
-                                    position: 'absolute',
-                                    zIndex: -1,
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '8px solid transparent',
-                                    borderBottomWidth: 0,
-                                    borderRightWidth: 0,
-                                    borderTopColor: '#AAA',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '100%',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '8px solid transparent',
-                                    borderBottomWidth: 0,
-                                    borderLeftWidth: 0,
-                                    borderTopColor: '#AAA',
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '100%',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    border: '16px solid #CCC',
-                                    borderRightColor: 'transparent',
-                                    bottom: '-8px',
-                                    position: 'absolute',
-                                    right: '-24px',
-                                    zIndex: -1,
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.CornerRibbon]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/same-height-columns/Details.tsx b/client/patterns/same-height-columns/Details.tsx
deleted file mode 100644
index 7cf0b39..0000000
--- a/client/patterns/same-height-columns/Details.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.SameHeightColumns}>
-            <Helmet>
-                <meta name="description" content="Create same height columns with CSS flexbox" />
-                <meta name="og:description" content="Create same height columns with CSS flexbox" />
-                <meta name="twitter:description" content="Create same height columns with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css layout, css same height columns" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Column -->
-    <div class="container__column">
-        <!-- Cover -->
-        ...
-
-        <!-- Content -->
-        <div class="container__content">
-            ...
-        </div>
-
-        <!-- Button sticks to the bottom -->
-        ...
-    </div>
-
-    <!-- Repeat with other columns -->
-    ...
-</div>
-`}
-css={`
-.container {
-    display: flex;
-}
-
-.container__column {
-    flex: 1;
-    /* Space between columns */
-    margin: 0 8px;
-
-    /* Layout each column */
-    display: flex;
-    flex-direction: column;
-}
-
-.container__content {
-    /* Take available height */
-    flex: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ display: 'flex', height: '100%', width: '100%' }}>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.2)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    margin: '0 8px',
-                                }}
-                            >
-                                <Rectangle height={200} />
-                                <div style={{ flex: 1, padding: '16px' }}>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                                <div style={{ padding: '16px', width: '128px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                            </div>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.2)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    margin: '0 8px',
-                                }}
-                            >
-                                <Rectangle height={200} />
-                                <div style={{ flex: 1, padding: '16px' }}>
-                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
-                                    <Block numberOfBlocks={5} />
-                                </div>
-                                <div style={{ padding: '16px', width: '128px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                            </div>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.2)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    margin: '0 8px',
-                                }}
-                            >
-                                <Rectangle height={200} />
-                                <div style={{ flex: 1, padding: '16px' }}>
-                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                                <div style={{ padding: '16px', width: '128px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/search-box/Details.tsx b/client/patterns/search-box/Details.tsx
deleted file mode 100644
index 47671fc..0000000
--- a/client/patterns/search-box/Details.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.SearchBox}>
-            <Helmet>
-                <meta name="description" content="Create a search box with CSS flexbox" />
-                <meta name="og:description" content="Create a search box with CSS flexbox" />
-                <meta name="twitter:description" content="Create a search box with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css search box" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Text input -->
-    <input type="text" class="container__input" />
-
-    <!-- Search icon sticks to the left or right -->
-    ...
-</div>
-`}
-css={`
-.container {
-    display: flex;
-
-    /* If you want to place the icon before the text input */
-    flex-direction: row-reverse;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-}
-
-.container__input {
-    border-color: transparent;
-    /* Take available width */
-    flex: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '2px',
-                                    display: 'flex',
-                                    marginBottom: '16px',
-                                }}
-                            >
-                                <input
-                                    type="text"
-                                    placeholder="Search"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        padding: '4px',
-                                    }}
-                                />
-                                <div style={{ padding: '8px' }}>
-                                    <Circle />
-                                </div>
-                            </div>
-
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '2px',
-                                    display: 'flex',
-                                    flexDirection: 'row-reverse',
-                                }}
-                            >
-                                <input
-                                    type="text"
-                                    placeholder="Search"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        padding: '4px',
-                                    }}
-                                />
-                                <div style={{ padding: '8px' }}>
-                                    <Circle />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/separator/Details.tsx b/client/patterns/separator/Details.tsx
deleted file mode 100644
index 786089f..0000000
--- a/client/patterns/separator/Details.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Separator}>
-            <Helmet>
-                <meta name="description" content="Create a separator with CSS flexbox" />
-                <meta name="og:description" content="Create a separator with CSS flexbox" />
-                <meta name="twitter:description" content="Create a separator with CSS flexbox" />
-                <meta name="keywords" content="css divider, css flexbox, css separator" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Text -->
-    <div class="container__content">
-        ...
-    </div>
-
-    <!-- Separator line -->
-    <div class="container__separator"></div>
-</div>
-`}
-css={`
-.container {
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
-
-    /* Used to set the position of text */
-    position: relative;
-}
-
-.container__content {
-    /* We won't see the separator line */
-    background: #FFF;
-
-    /* Displayed at the center of container */
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.container__separator {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    height: 1px;
-    width: 100%;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                position: 'relative',
-                                width: '60%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    left: '50%',
-                                    padding: '0 8px',
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                <div style={{ width: '128px' }}><Rectangle height={16} /></div>
-                            </div>
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '1px',
-                                    width: '100%',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/sidebar/Details.tsx b/client/patterns/sidebar/Details.tsx
deleted file mode 100644
index 03fe7ee..0000000
--- a/client/patterns/sidebar/Details.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Sidebar}>
-            <Helmet>
-                <meta name="description" content="Create a sidebar with CSS flexbox" />
-                <meta name="og:description" content="Create a sidebar with CSS flexbox" />
-                <meta name="twitter:description" content="Create a sidebar with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css layout, css sidebar" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Sidebar -->
-    <aside class="container__sidebar">
-        ...
-    </aside>
-
-    <!-- Main -->
-    <main class="container__main">
-        ...
-    </main>
-</div>
-`}
-css={`
-.container {
-    display: flex;
-}
-
-.container__sidebar {
-    width: 30%;
-}
-
-.container__main {
-    /* Take the remaining width */
-    flex: 1;
-
-    /* Make it scrollable */
-    overflow: auto;
-}
-`}
-                >
-                    <div style={{ display: 'flex', height: '100%' }}>
-                        <div
-                            style={{
-                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'flex-end',
-                                padding: '16px',
-                                width: '30%',
-                            }}
-                        >
-                            <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
-                            <div style={{ width: '80%' }}><Block numberOfBlocks={4} /></div>
-                        </div>
-                        <div
-                            style={{
-                                flex: 1,
-                                overflow: 'auto',
-                                padding: '16px',
-                            }}
-                        >
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                            <div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/slider/Details.tsx b/client/patterns/slider/Details.tsx
deleted file mode 100644
index 239b629..0000000
--- a/client/patterns/slider/Details.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Slider}>
-            <Helmet>
-                <meta name="description" content="Create a slider with CSS flexbox" />
-                <meta name="og:description" content="Create a slider with CSS flexbox" />
-                <meta name="twitter:description" content="Create a slider with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css slider" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Left side -->
-    <!-- Width based on the current value -->
-    <div class="container__left" style="width: 20%"></div>
-
-    <!-- Circle -->
-    <div class="container__circle"></div>
-
-    <!-- Right side -->
-    <div class="container__right"></div>
-</div>
-`}
-css={`
-.container {
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
-
-    /* Size */
-    height: 32px;
-}
-
-.container__left {
-    height: 2px;
-
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-}
-
-.container__circle {
-    /* Size */
-    height: 32px;
-    width: 32px;
-
-    /* Rounded border */
-    border-radius: 9999px;
-
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-}
-
-.container__right {
-    /* Take the remaining width */
-    flex: 1;
-    height: 2px;
-
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                height: '16px',
-                                width: '256px',
-                            }}
-                        >
-                            <div style={{ width: '20%' }}><Rectangle height={2} /></div>
-                            <Circle size={32} />
-                            <div style={{ flex: 1 }}><Rectangle height={2} /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/spin-button/Details.tsx b/client/patterns/spin-button/Details.tsx
deleted file mode 100644
index 9568f69..0000000
--- a/client/patterns/spin-button/Details.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    const [value, setValue] = React.useState(0);
-    const decrease = () => setValue(value - 1);
-    const increase = () => setValue(value + 1);
-    const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
-
-    return (
-        <DetailsLayout pattern={Pattern.SpinButton}>
-            <Helmet>
-                <meta name="description" content="Create a spin button with CSS flexbox" />
-                <meta name="og:description" content="Create a spin button with CSS flexbox" />
-                <meta name="twitter:description" content="Create a spin button with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css spin button" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Input -->
-    <input type="text" class="container__input" />
-
-    <!-- Buttons container -->
-    <div class="container__buttons">
-        <!-- Up button -->
-        <button class="container__button">
-            ...
-        </button>
-
-        <!-- Down button -->
-        <button class="container__button">
-            ...
-        </button>
-    </div>
-</div>
-`}
-css={`
-.container {
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 2px;
-    display: flex;
-}
-
-.container__input {
-    border-color: transparent;
-    margin-right: 4px;
-    padding: 4px;
-    width: 100px;
-}
-
-.container__buttons {
-    /* Content is centered vertically */
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.container__button {
-    border-color: transparent;
-    /* Make buttons have the same height */
-    flex: 1,
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '2px',
-                                display: 'flex',
-                            }}
-                        >
-                            <input
-                                type="text"
-                                style={{
-                                    borderColor: 'transparent',
-                                    marginRight: '4px',
-                                    padding: '4px',
-                                    width: '100px',
-                                }}
-                                value={value}
-                                onChange={change}
-                            />
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        borderColor: 'transparent',
-                                        cursor: 'pointer',
-                                        flex: 1,
-                                        padding: '4px 4px 2px 4px',
-                                    }}
-                                    onClick={increase}
-                                >
-                                    <Triangle size={6} corner="t" />
-                                </button>
-                                <button
-                                    style={{
-                                        borderColor: 'transparent',
-                                        cursor: 'pointer',
-                                        flex: 1,
-                                        padding: '2px 4px 4px 4px',
-                                    }}
-                                    onClick={decrease}
-                                >
-                                    <Triangle size={6} corner="b" />
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.StepperInput, Pattern.Voting]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/split-navigation/Details.tsx b/client/patterns/split-navigation/Details.tsx
deleted file mode 100644
index 6386ab3..0000000
--- a/client/patterns/split-navigation/Details.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.SplitNavigation}>
-            <Helmet>
-                <meta name="description" content="Create a split navigation with CSS flexbox" />
-                <meta name="og:description" content="Create a split navigation with CSS flexbox" />
-                <meta name="twitter:description" content="Create a split navigation with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<ul class="container">
-    <!-- Navigation item -->
-    <li>
-        <a href="">...</a>
-    </li>
-
-    <!-- Navigation item that sticks to the right -->
-    <li class="container__item--right">
-        <a href="">...</a>
-    </li>
-</ul>
-`}
-css={`
-.container {
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
-
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0;
-}
-
-.container__item--right {
-    /* Sticks to the right */
-    margin-left: auto;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <ul
-                            style={{
-                                alignItems: 'center',
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '8px',
-                                display: 'flex',
-                                listStyleType: 'none',
-                                margin: 0,
-                                padding: '16px',
-                                width: '60%',
-                            }}
-                        >
-                            <li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
-                            <li style={{ marginRight: '4px', width: '10%' }}><Rectangle /></li>
-                            <li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
-                            <li style={{ marginLeft: 'auto', width: '10%' }}><Rectangle /></li>
-                        </ul>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/split-screen/Details.tsx b/client/patterns/split-screen/Details.tsx
deleted file mode 100644
index 6639267..0000000
--- a/client/patterns/split-screen/Details.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-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 (
-        <DetailsLayout pattern={Pattern.SplitScreen}>
-            <Helmet>
-                <meta name="description" content="Create a split screen with CSS flexbox" />
-                <meta name="og:description" content="Create a split screen with CSS flexbox" />
-                <meta name="twitter:description" content="Create a split screen with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css layout, css split screen" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Left content -->
-    <div class="container__half">
-        ...
-    </div>
-
-    <!-- Right content -->
-    <div class="container__half">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    display: flex;
-}
-
-.container__half {
-    flex: 1;
-}
-`}
-                >
-                    <div style={{ display: 'flex', height: '100%' }}>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                display: 'flex',
-                                flex: 1,
-                                flexDirection: 'column',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div style={{ marginBottom: '16px' }}><Circle size={128} /></div>
-                            <div style={{ width: '60%' }}><Rectangle /></div>
-                        </div>
-                        <div
-                            style={{
-                                display: 'flex',
-                                flex: 1,
-                                flexDirection: 'column',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div style={{ padding: '32px' }}>
-                                <div style={{ marginBottom: '32px' }}><Rectangle /></div>
-                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
-                                <Block numberOfBlocks={10} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/stamp-border/Details.tsx b/client/patterns/stamp-border/Details.tsx
deleted file mode 100644
index 03a755c..0000000
--- a/client/patterns/stamp-border/Details.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.StampBorder}>
-            <Helmet>
-                <meta name="description" content="Create stamp border with CSS" />
-                <meta name="og:description" content="Create stamp border with CSS" />
-                <meta name="twitter:description" content="Create stamp border with CSS" />
-                <meta name="keywords" content="css radial gradient, css stamp border" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Inner -->
-    <div class="container__inner">
-        <!-- Content -->
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Background */
-    background-color: #ccc;
-    background-image: radial-gradient(#fff 50%, transparent 50%);
-    background-position: -5px -5px;
-    background-repeat: repeat;
-    background-size: 10px 10px;
-
-    /* Spacing */
-    padding: 5px;
-}
-
-.container__inner {
-    /* Background */
-    background-color: #ccc;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: '#ccc',
-                                backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
-                                backgroundPosition: '-5px -5px',
-                                backgroundRepeat: 'repeat',
-                                backgroundSize: '10px 10px',
-                                height: '200px',
-                                padding: '5px',
-                                width: '200px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: '#ccc',
-                                    height: '100%',
-                                    width: '100%',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/statistic/Details.tsx b/client/patterns/statistic/Details.tsx
deleted file mode 100644
index a8a8539..0000000
--- a/client/patterns/statistic/Details.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import random from '../../helpers/random';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Statistic}>
-            <Helmet>
-                <meta name="description" content="Create a statistic component with CSS flexbox" />
-                <meta name="og:description" content="Create a statistic component with CSS flexbox" />
-                <meta name="twitter:description" content="Create a statistic component with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css statistic" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Value -->
-    <div class="container__value">
-        ...
-    </div>
-
-    <!-- Label -->
-    <div class="container__label">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-    flex-direction: column;
-}
-
-.container__value {
-    /* Big font size */
-    font-size: 4rem;
-    font-weight: 500;
-}
-
-.container__label {
-    /* Smaller font size */
-    font-size: 1rem;
-    font-weight: 700;
-
-    /* Uppercase the label */
-    text-transform: uppercase;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'inline-flex',
-                                flexDirection: 'column',
-                            }}
-                        >
-                            <div style={{ fontSize: '4rem', fontWeight: 500 }}>
-                                {random(1000, 9999).toLocaleString()}
-                            </div>
-                            <div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
-                                stars
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
deleted file mode 100644
index 528db75..0000000
--- a/client/patterns/stepper-input/Details.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    const [value, setValue] = React.useState(0);
-    const decrease = () => setValue(value - 1);
-    const increase = () => setValue(value + 1);
-    const change = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const v = parseInt(e.target.value, 10);
-        const newValue = isNaN(v) ? 0 : v;
-        setValue(newValue);
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.StepperInput}>
-            <Helmet>
-                <meta name="description" content="Create a stepper input with CSS flexbox" />
-                <meta name="og:description" content="Create a stepper input with CSS flexbox" />
-                <meta name="twitter:description" content="Create a stepper input with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css stepper input" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="stepper">
-    <!-- Minus button -->
-    <button class="stepper__button">-</button>
-
-    <!-- Input container -->
-    <div class="stepper__content">
-        <input type="text" class="stepper__input" />
-    </div>
-
-    <!-- Plus button -->
-    <button class="stepper__button">+</button>
-</div>
-`}
-css={`
-.stepper {
-    display: flex;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, .3);
-
-    /* Size */
-    height: 32px;
-    width: 128px;
-}
-
-.stepper__button {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Size */
-    width: 32px;
-}
-
-.stepper__content {
-    flex: 1;
-}
-
-.stepper__input {
-    /* Take full size of its container */
-    height: 100%;
-    width: 100%;
-}
-`}
-                >
-                    <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: '8px',
-                                display: 'flex',
-                                height: '32px',
-                                width: '128px',
-                            }}
-                        >
-                            <button
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-                                    borderColor: 'transparent',
-                                    cursor: 'pointer',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    width: '32px',
-                                }}
-                                onClick={decrease}
-                            >
-                                -
-                            </button>
-                            <div
-                                style={{
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    flex: 1,
-                                    height: '100%',
-                                }}
-                            >
-                                <input
-                                    type="text"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        height: '100%',
-                                        padding: '8px',
-                                        width: '100%',
-                                    }}
-                                    value={value}
-                                    onChange={change}
-                                />
-                            </div>
-                            <button
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-                                    borderColor: 'transparent',
-                                    cursor: 'pointer',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    width: '32px',
-                                }}
-                                onClick={increase}
-                            >
-                                +
-                            </button>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.SpinButton, Pattern.Voting]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/sticky-footer/Details.tsx b/client/patterns/sticky-footer/Details.tsx
deleted file mode 100644
index 7a4ef89..0000000
--- a/client/patterns/sticky-footer/Details.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.StickyFooter}>
-            <Helmet>
-                <meta name="description" content="Create a sticky footer with CSS flexbox" />
-                <meta name="og:description" content="Create a sticky footer with CSS flexbox" />
-                <meta name="twitter:description" content="Create a sticky footer with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css layout, css sticky, css sticky footer" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    The footer always sticks to the bottom if the main content is short.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <header class="container__header">
-        ...
-    </header>
-    <main class="container__main">
-        ...
-    </main>
-    <footer class="container__footer">
-        ...
-    </footer>
-</div>
-`}
-css={`
-.container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.container__header,
-.container__footer {
-    flex-shrink: 0;
-}
-
-.container__main {
-    flex-grow: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                        }}
-                    >
-                        <div
-                            style={{
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                flexShrink: 0,
-                                padding: '16px',
-                            }}
-                        >
-                            <div style={{ width: '50%' }}><Rectangle /></div>
-                        </div>
-                        <div style={{ flexGrow: 1, padding: '16px' }}>
-                            <Block numberOfBlocks={20} />
-                        </div>
-                        <div
-                            style={{
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                flexShrink: 0,
-                                padding: '16px',
-                            }}
-                        >
-                            <div style={{ width: '40%' }}><Rectangle /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx
deleted file mode 100644
index acec56b..0000000
--- a/client/patterns/sticky-header/Details.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.StickyHeader}>
-            <Helmet>
-                <meta name="description" content="Create a sticky header with CSS" />
-                <meta name="og:description" content="Create a sticky header with CSS" />
-                <meta name="twitter:description" content="Create a sticky header with CSS" />
-                <meta name="keywords" content="css layout, css position sticky, css sticky header" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Try to scroll the main content to see the header sticks to the top of page.
-                </div>
-                <BrowserFrame
-html={`
-<div>
-    <header class="header">
-        ...
-    </header>
-    <main>
-        ...
-    </main>
-</div>
-`}
-css={`
-.header {
-    /* Stick to the top */
-    position: sticky;
-    top: 0;
-}
-`}
-                >
-                    <div>
-                        <div
-                            style={{
-                                backgroundColor: '#FFF',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                padding: '16px',
-                                position: 'sticky',
-                                top: 0,
-                            }}
-                        >
-                            <div style={{ width: '50%' }}><Rectangle /></div>
-                        </div>
-                        <div style={{ padding: '16px' }}>
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={40} /></div>
-                            <div><Block numberOfBlocks={30} /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[
-                    Pattern.StickySections, Pattern.StickyTableColumn, Pattern.StickyTableHeaders,
-                ]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx
deleted file mode 100644
index dc146f9..0000000
--- a/client/patterns/sticky-sections/Details.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.StickySections}>
-            <Helmet>
-                <meta name="description" content="Create sticky sections with CSS" />
-                <meta name="og:description" content="Create sticky sections with CSS" />
-                <meta name="twitter:description" content="Create sticky sections with CSS" />
-                <meta name="keywords" content="css layout, css sticky, css sticky sections" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Try to scroll the main content to see each section sticks to the top of page.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <section class="container__section">
-        ...
-    </section>
-
-    <!-- Repeat other sections -->
-    ...
-</div>
-`}
-css={`
-.container {
-    height: 100%;
-    overflow: scroll;
-}
-
-.container__section {
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-
-    /* Stick to the top */
-    position: sticky;
-    top: 0;
-}
-`}
-                >
-                    <div
-                        style={{
-                            height: '100%',
-                            overflow: 'scroll',
-                        }}
-                    >
-                        <section
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                height: '100%',
-                                position: 'sticky',
-                                top: 0,
-                                width: '100%',
-                            }}
-                        />
-                        <section
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                height: '100%',
-                                position: 'sticky',
-                                top: 0,
-                                width: '100%',
-                            }}
-                        />
-                        <section
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                                height: '100%',
-                                position: 'sticky',
-                                top: 0,
-                                width: '100%',
-                            }}
-                        />
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/sticky-table-column/Details.tsx b/client/patterns/sticky-table-column/Details.tsx
deleted file mode 100644
index aee55ff..0000000
--- a/client/patterns/sticky-table-column/Details.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-// tslint:disable:prefer-object-spread
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    const numberOfColumns = 10;
-    return (
-        <DetailsLayout pattern={Pattern.StickyTableColumn}>
-            <Helmet>
-                <meta name="description" content="Create sticky table column with CSS" />
-                <meta name="og:description" content="Create sticky table column with CSS" />
-                <meta name="twitter:description" content="Create sticky table column with CSS" />
-                <meta name="keywords" content="css position sticky, css sticky table column" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Try to scroll the main content of table horizontally to see the first column sticks to the left.
-                </div>
-                <BrowserFrame
-html={`
-<table>
-    <thead>
-        <tr>
-            <th class="header">
-                ...
-            </th>
-
-            <!-- Repeat other header column ... -->
-        </tr>
-    </thead>
-    <tbody>
-    </tbody>
-</table>
-`}
-css={`
-.header {
-    /* Background color */
-    background-color: #ddd;
-
-    /* Stick to the left */
-    left: 0;
-    position: sticky;
-
-    /* Displayed on top of other rows when scrolling */
-    z-index: 9999;
-}
-`}
-                >
-                    <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)',
-                                height: '400px',
-                                overflow: 'auto',
-                                width: '60%',
-                            }}
-                        >
-                            <table
-                                style={{
-                                    borderCollapse: 'collapse',
-                                    width: '100%',
-                                }}
-                            >
-                                <thead>
-                                    <tr>
-                                        {
-                                            Array(numberOfColumns).fill(0).map((_, index) => {
-                                                return (
-                                                    <th
-                                                        key={index}
-                                                        style={(
-                                                            index === 0
-                                                            ? {
-                                                                backgroundColor: '#ddd',
-                                                                left: 0,
-                                                                padding: '16px',
-                                                                position: 'sticky',
-                                                            }
-                                                            : {
-                                                                padding: '16px',
-                                                            }
-                                                        )}
-                                                    >
-                                                        <div style={{ width: '200px' }}>
-                                                            {
-                                                                index === 0
-                                                                    ? <Rectangle />
-                                                                    : <Block numberOfBlocks={3} />
-                                                            }
-                                                        </div>
-                                                    </th>
-                                                );
-                                            })
-                                        }
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {
-                                        Array(10).fill(0).map((_, row) => {
-                                            return (
-                                                <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                                                    {
-                                                        Array(numberOfColumns).fill(0).map((__, col) => {
-                                                            return (
-                                                                <td
-                                                                    key={col}
-                                                                    style={(
-                                                                        col === 0 ? {
-                                                                            backgroundColor: '#ddd',
-                                                                            left: 0,
-                                                                            padding: '16px',
-                                                                            position: 'sticky',
-                                                                        } : {
-                                                                            padding: '16px',
-                                                                        }
-                                                                    )}
-                                                                >
-                                                                    {
-                                                                        col === 0
-                                                                            ? <Rectangle />
-                                                                            : <Block numberOfBlocks={3} />
-                                                                    }
-                                                                </td>
-                                                            );
-                                                        })
-                                                    }
-                                                </tr>
-                                            );
-                                        })
-                                    }
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/sticky-table-headers/Details.tsx b/client/patterns/sticky-table-headers/Details.tsx
deleted file mode 100644
index 21d7a1f..0000000
--- a/client/patterns/sticky-table-headers/Details.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.StickyTableHeaders}>
-            <Helmet>
-                <meta name="description" content="Create sticky table headers with CSS" />
-                <meta name="og:description" content="Create sticky table headers with CSS" />
-                <meta name="twitter:description" content="Create sticky table headers with CSS" />
-                <meta name="keywords" content="css position sticky, css sticky table headers" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Try to scroll the main content of table to see the header sticks to the top.
-                </div>
-                <BrowserFrame
-html={`
-<table>
-    <thead>
-        <tr>
-            <th class="header">
-                ...
-            </th>
-
-            <!-- Repeat other header column ... -->
-        </tr>
-    </thead>
-    <tbody>
-    </tbody>
-</table>
-`}
-css={`
-.header {
-    /* Background color */
-    background-color: #ddd;
-
-    /* Stick to the top */
-    position: sticky;
-    top: 0;
-
-    /* Displayed on top of other rows when scrolling */
-    z-index: 9999;
-}
-`}
-                >
-                    <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)',
-                                height: '400px',
-                                overflow: 'auto',
-                                width: '60%',
-                            }}
-                        >
-                            <table
-                                style={{
-                                    borderCollapse: 'collapse',
-                                    width: '100%',
-                                }}
-                            >
-                                <thead>
-                                    <tr>
-                                        {
-                                            Array(3).fill(0).map((_, index) => {
-                                                return (
-                                                    <th
-                                                        key={index}
-                                                        style={{
-                                                            backgroundColor: '#ddd',
-                                                            padding: '16px',
-                                                            position: 'sticky',
-                                                            top: 0,
-                                                            zIndex: 9999,
-                                                        }}
-                                                    >
-                                                        <Rectangle />
-                                                    </th>
-                                                );
-                                            })
-                                        }
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {
-                                        Array(10).fill(0).map((_, row) => {
-                                            return (
-                                                <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                                                    {
-                                                        Array(3).fill(0).map((__, col) => {
-                                                            return (
-                                                                <td key={col} style={{ padding: '16px' }}>
-                                                                    <Block numberOfBlocks={3} />
-                                                                </td>
-                                                            );
-                                                        })
-                                                    }
-                                                </tr>
-                                            );
-                                        })
-                                    }
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[
-                    Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableColumn,
-                ]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
deleted file mode 100644
index 031c11c..0000000
--- a/client/patterns/switch/Details.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    const [checked, setChecked] = React.useState(false);
-    const toggle = () => setChecked((c) => !c);
-
-    return (
-        <DetailsLayout pattern={Pattern.Switch}>
-            <Helmet>
-                <meta name="description" content="Create a switch with CSS flexbox" />
-                <meta name="og:description" content="Create a switch with CSS flexbox" />
-                <meta name="twitter:description" content="Create a switch with CSS flexbox" />
-                <meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px'}}>
-                    The checkbox is placed inside a label. So when clicking on the label,
-                    the checkbox will be checked even though it's hidden.
-                </div>
-                <BrowserFrame
-html={`
-<label class="label">
-    <input type="checkbox" class="label__input" />
-
-    <!-- Circle -->
-    <div class="label__circle"></div>
-</label>
-`}
-css={`
-.label {
-    display: flex;
-
-    /* Rounded border */
-    border-radius: 9999px;
-
-    /* Size */
-    height: 32px;
-    width: 64px;
-
-    /* OFF status */
-    background-color: rgba(0, 0, 0, .1);
-    border: 1px solid rgba(0, 0, 0, .3);
-
-    /* ON status */
-    background-color: #357edd;
-    border: 1px solid #357edd;
-    /* Push the circle to the right */
-    justify-content: flex-end;
-}
-
-.label__input {
-    /* Hide the input */
-    display: none;
-}
-
-.label__circle {
-    /* Rounded border */
-    border-radius: 9999px;
-
-    /* Size */
-    width: 32px;
-
-    background-color: #FFF;
-
-    /* OFF status */
-    border: 1px solid rgba(0, 0, 0, .3);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <label
-                            htmlFor="checkbox-switch"
-                            style={{
-                                backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
-                                border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
-                                borderRadius: '9999px',
-                                display: 'flex',
-                                height: '32px',
-                                justifyContent: checked ? 'flex-end' : '',
-                                width: '64px',
-                            }}
-                        >
-                            <input
-                                id="checkbox-switch"
-                                type="checkbox"
-                                style={{ display: 'none' }}
-                                checked={checked}
-                                onChange={toggle}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '9999px',
-                                    width: '32px',
-                                }}
-                            />
-                        </label>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.RadioSwitch]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx
deleted file mode 100644
index a3d07ec..0000000
--- a/client/patterns/tab/Details.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-interface TabProps {
-    tabIndex: number;
-}
-
-const Details: React.FC<{}> = () => {
-    const [activeTab, setActiveTab] = React.useState(0);
-
-    const Tab: React.FC<TabProps> = ({ tabIndex, children }) => {
-        const isActive = tabIndex === activeTab;
-        const click = () => setActiveTab(tabIndex);
-        return (
-            <div
-                style={{
-                    [isActive ? 'border' : 'borderBottom']: '1px solid rgba(0, 0, 0, 0.3)',
-                    borderBottomColor: isActive ? 'transparent' : 'rgba(0, 0, 0, 0.3)',
-                    borderTopLeftRadius: '4px',
-                    borderTopRightRadius: '4px',
-                    cursor: 'pointer',
-                    padding: '16px',
-                }}
-                onClick={click}
-            >
-                {children}
-            </div>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.Tab}>
-            <Helmet>
-                <meta name="description" content="Create tabs with CSS flexbox" />
-                <meta name="og:description" content="Create tabs with CSS flexbox" />
-                <meta name="twitter:description" content="Create tabs with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css navigation, css tab" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="tabs">
-    <!-- Active tab -->
-    <div class="tabs__tab--active">
-        ...
-    </div>
-
-    <!-- Inactive tab -->
-    <div class="tabs__tab--inactive">
-        ...
-    </div>
-</div>
-`}
-css={`
-.tabs {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.tabs__tab--active {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    /* Hide the bottom border */
-    border-bottom-color: transparent;
-
-    /* Border radius */
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-}
-
-.tabs__tab--inactive {
-    /* Has only the bottom border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <Tab tabIndex={0}>
-                                <div style={{ width: '64px' }}>
-                                    <Rectangle height={8} />
-                                </div>
-                            </Tab>
-                            <Tab tabIndex={1}>
-                                <div style={{ width: '32px' }}>
-                                    <Rectangle height={8} />
-                                </div>
-                            </Tab>
-                            <Tab tabIndex={2}>
-                                <div style={{ width: '128px' }}>
-                                    <Rectangle height={8} />
-                                </div>
-                            </Tab>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/teardrop/Details.tsx b/client/patterns/teardrop/Details.tsx
deleted file mode 100644
index 4d5ed39..0000000
--- a/client/patterns/teardrop/Details.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Teardrop}>
-            <Helmet>
-                <meta name="description" content="Create a teardrop with CSS" />
-                <meta name="og:description" content="Create a teardrop with CSS" />
-                <meta name="twitter:description" content="Create a teardrop with CSS" />
-                <meta name="keywords" content="css border radius, css teardrop, css water drop shape, css water droplet" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Display the content vertically -->
-    <div class="container__content">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Border */
-    border: 2px solid rgba(0, 0, 0, 0.3);
-    border-radius: 0px 50% 50% 50%;
-
-    /* Angle at the top */
-    transform: rotate(45deg);
-
-    /* Size */
-    height: 64px;
-    width: 64px;
-}
-
-.container__content {
-    transform: rotate(-45deg);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                border: '2px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '0 50% 50% 50%',
-                                display: 'flex',
-                                height: '64px',
-                                justifyContent: 'center',
-                                transform: 'rotate(45deg)',
-                                width: '64px',
-                            }}
-                        >
-                            <div style={{ transform: 'rotate(-45deg)' }}>
-                                <Circle />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/three-dimensions-card/Details.tsx b/client/patterns/three-dimensions-card/Details.tsx
deleted file mode 100644
index 10d1257..0000000
--- a/client/patterns/three-dimensions-card/Details.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import './styles.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ThreeDimensionsCard}>
-            <Helmet>
-                <meta name="description" content="Create a 3D card with CSS" />
-                <meta name="og:description" content="Create a 3D card with CSS" />
-                <meta name="twitter:description" content="Create a 3D card with CSS" />
-                <meta name="keywords" content="css 3D card" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="three-dimensions-card">
-    ...
-</div>
-`}
-css={`
-:root {
-    --three-dimensions-card-left-side-width: 1rem;
-}
-
-.three-dimensions-card {
-    position: relative;
-}
-
-/* The left side */
-.three-dimensions-card::before { 
-    background: rgba(0, 0, 0, 0.3);
-    content: '';
-    
-    /* Position */
-    top: var(--three-dimensions-card-left-side-width);
-    left: 0px;
-    position: absolute;
-    transform: translate(-100%, 0) skewY(-45deg);
-    transform-origin: left top;
-
-    /* Size */
-    height: 100%;
-    width: var(--three-dimensions-card-left-side-width);
-}
-
-/* The bottom side */
-.three-dimensions-card::after {
-    background: rgba(0, 0, 0, 0.3);
-    content: '';    
-    
-    /* Position */
-    bottom: 0px;
-    left: 0px;
-    position: absolute;
-    transform: translate(0, 100%) skewX(-45deg);
-    transform-origin: left top;
-
-    /* Size */
-    height: var(--three-dimensions-card-left-side-width);
-    width: 100%;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div className="three-dimensions-card">
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '8rem',
-                                width: '16rem',
-                            }}
-                        />
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.StackedCards]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/toggle-password-visibility/Details.tsx b/client/patterns/toggle-password-visibility/Details.tsx
deleted file mode 100644
index 9367628..0000000
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    const [visible, setVisible] = React.useState(false);
-    const toggle = () => setVisible((v) => !v);
-
-    return (
-        <DetailsLayout pattern={Pattern.TogglePasswordVisibility}>
-            <Helmet>
-                <meta name="description" content="Create a toggle password visibility with CSS flexbox" />
-                <meta name="og:description" content="Create a toggle password visibility with CSS flexbox" />
-                <meta name="twitter:description" content="Create a toggle password visibility with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, toggle password visibility" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Text input -->
-    <input type="text" class="container__input" />
-
-    <!-- Toggle button sticks to the right -->
-    <button>
-        ...
-    </button>
-</div>
-`}
-css={`
-.container {
-    display: flex;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-}
-
-.container__input {
-    border-color: transparent;
-    /* Take available width */
-    flex: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                }}
-                            >
-                                <input
-                                    type={visible ? 'text' : 'password'}
-                                    autoComplete="off"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        marginLeft: '1px',
-                                        padding: '4px',
-                                    }}
-                                />
-                                <button
-                                    style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
-                                    onClick={toggle}
-                                >
-                                    <svg
-                                        viewBox="0 0 24 24"
-                                        style={{
-                                            fill: 'none',
-                                            height: '24px',
-                                            stroke: "rgba(0, 0, 0, 0.4)",
-                                            strokeLinecap: 'round',
-                                            strokeLinejoin: 'round',
-                                            strokeWidth: 1,
-                                            width: '24px',
-                                        }}
-                                    >
-                                        <path
-                                            d={
-                                                visible
-                                                ? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
-                                                : `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
-                                            }
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/tooltip/Details.tsx b/client/patterns/tooltip/Details.tsx
deleted file mode 100644
index d2510cb..0000000
--- a/client/patterns/tooltip/Details.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './tooltip.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Tooltip}>
-            <Helmet>
-                <meta name="description" content="Create a tooltip with CSS" />
-                <meta name="og:description" content="Create a tooltip with CSS" />
-                <meta name="twitter:description" content="Create a tooltip with CSS" />
-                <meta name="keywords" content="css tooltip" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Move the mouser over the main element to see the tooltip.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The tooltip content -->
-    <div class="container__content">
-        ...
-    </div>
-
-    <!-- The tooltip arrow -->
-    <div class="container__arrow" />
-
-    <!-- The trigger element -->
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Used to position the arrow */
-    position: relative;
-}
-
-/* Show the arrow and content and restore pointer events when hovering the trigger element */
-.container:hover .container__arrow,
-.container:hover .container__content {
-    opacity: 1;
-    pointer-events: initial;
-}
-
-.container__arrow {
-    /* Invisible by default */
-    opacity: 0;
-
-    /* To prevent accidental interactions with other elements  */
-    pointer-events: none;
-
-    /* Border */
-    border: 8px solid transparent;
-    border-top-color: #00439e;
-
-    /* Position */
-    bottom: 100%;
-    left: 50%;
-    position: absolute;
-    transform: translate(-50%, 8px);
-
-    /* Zero size */
-    height: 0;
-    width: 0;
-
-    /* Displayed on top of other element */
-    z-index: 10;
-}
-
-.container__content {
-    /* Invisible by default */
-    opacity: 0;
-
-    /* To prevent accidental interactions with other elements  */
-    pointer-events: none;
-
-    /* Background color, must be the same as the border color of arrow */
-    background-color: #00439e;
-    border-radius: 2px;
-
-    /* Position */
-    bottom: 100%;
-    left: 50%;
-    position: absolute;
-    transform: translate(-50%, -8px);
-
-    /* Displayed on top of other element */
-    z-index: 10;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            className="p-tooltip"
-                            style={{
-                                marginBottom: '16px',
-                                width: '150px',
-                            }}
-                        >
-                            <div
-                                className="p-tooltip-content"
-                                style={{
-                                    padding: '8px',
-                                    width: '200px',
-                                }}
-                            >
-                                <Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
-                            </div>
-                            <div className="p-tooltip-arrow" />
-                            <Rectangle height={32} />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.PopoverArrow]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/tree-diagram/Details.tsx b/client/patterns/tree-diagram/Details.tsx
deleted file mode 100644
index 5556548..0000000
--- a/client/patterns/tree-diagram/Details.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Square from '../../placeholders/Square';
-import './tree-diagram.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.TreeDiagram}>
-            <Helmet>
-                <meta name="description" content="Create a tree diagram with CSS" />
-                <meta name="og:description" content="Create a tree diagram with CSS" />
-                <meta name="twitter:description" content="Create a tree diagram with CSS" />
-                <meta name="keywords" content="css sitemap, css tree diagram" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="tree-diagram">
-    <ul>
-        <li>
-            <!-- Content -->
-            ...
-
-            <!-- Sub items -->
-            <ul>
-                <li>
-                    <!-- Content -->
-                    ...
-
-                    <!-- Sub items -->
-                    <ul>
-                        <li>...</li>
-                        <li>...</li>
-                        ...
-                    </ul>
-                </li>
-                <li>...</li>
-                ...
-            </ul>
-        </li>
-        
-        <!-- Repeat other items -->
-        ...
-    </ul>
-</div>
-`}
-css={`
-.tree-diagram ul {
-    display: flex;
-    position: relative;
-
-    /* Reset */
-    list-style-type: none;
-    margin: 0;
-    padding: 1rem 0.5rem 0rem 0.5rem;
-}
-
-.tree-diagram ul ul::before {
-    border-right: 1px solid rgba(0, 0, 0, .3);
-    content: '';
-    
-    /* Position */
-    position: absolute;
-    top: 0;
-    right: 50%;
-
-    /* Size */
-    height: 1rem;
-    width: 50%;
-}
-
-.tree-diagram li {
-    padding: 1rem 0.5rem 0rem 0.5rem;
-    position: relative;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;    
-    flex-direction: column;
-}
-
-.tree-diagram li::before {
-    border-right: 1px solid rgba(0, 0, 0, .3);
-    border-top: 1px solid rgba(0, 0, 0, .3);
-    content: '';    
-
-    /* Position */
-    position: absolute;
-    top: 0;
-    right: 50%;
-
-    /* Size */
-    height: 1rem;
-    width: 50%;
-}
-
-.tree-diagram li::after {
-    border-top: 1px solid rgba(0, 0, 0, .3);
-    content: '';
-
-    /* Position */
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    /* Size */
-    width: 50%;
-}
-
-.tree-diagram li:first-child::before,
-.tree-diagram li:last-child::after {
-    /* Remove the top of border from the first and last items */
-    border-top: none;
-}
-
-/* Add a root item if you want */
-li.tree-diagram__root::before {
-    border-right: none;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '0.5rem',
-                    }}
-                >
-                    <div className="tree-diagram">
-                        <ul>
-                            <li className="tree-diagram__root">
-                                <Square size='2.5rem' />
-                                <ul>
-                                    <li>
-                                        <Square size='2rem' />
-                                        <ul>
-                                            <li><Square size='1.5rem' /></li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <Square size='2rem' />
-                                        <ul>
-                                            <li>
-                                                <Square size='1.5rem' />
-                                                <ul>
-                                                    <li><Square size='1rem' /></li>
-                                                    <li><Square size='1rem' /></li>
-                                                    <li><Square size='1rem' /></li>
-                                                </ul>
-                                            </li>
-                                            <li><Square size='1.5rem' /></li>
-                                            <li>
-                                                <Square size='1.5rem' />
-                                                <ul>
-                                                    <li><Square size='1rem' /></li>
-                                                    <li><Square size='1rem' /></li>
-                                                </ul>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li><Square size='2rem' /></li>
-                                </ul>
-                            </li>                                
-                        </ul>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <RelatedPatterns patterns={[Pattern.FolderStructure]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/triangle-buttons/Details.tsx b/client/patterns/triangle-buttons/Details.tsx
deleted file mode 100644
index ed96922..0000000
--- a/client/patterns/triangle-buttons/Details.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.TriangleButtons}>
-            <Helmet>
-                <meta name="description" content="Create triangle buttons with CSS" />
-                <meta name="og:description" content="Create triangle buttons with CSS" />
-                <meta name="twitter:description" content="Create triangle buttons with CSS" />
-                <meta name="keywords" content="css triangle buttons" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Up triangle button -->
-<button class="container">
-    <!-- Triangle -->
-    <div class="container__triangle container__triangle--up"></div>
-
-    <!-- Content -->
-    ...
-</button>
-
-<!-- Right triangle button -->
-<button class="container">
-    <!-- Content -->
-    ...
-
-    <!-- Triangle -->
-    <div class="container__triangle container__triangle--right"></div>
-</button>
-
-<!-- Down triangle button -->
-<button class="container">
-    <!-- Triangle -->
-    <div class="container__triangle container__triangle--down"></div>
-
-    <!-- Content -->
-    ...
-</button>
-
-<!-- Left triangle button -->
-<button class="container">
-    <!-- Triangle -->
-    <div class="container__triangle container__triangle--left"></div>
-
-    <!-- Content -->
-    ...
-</button>
-`}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-}
-
-.container__triangle {
-    border-style: solid;
-
-    /* Size */
-    height: 0px;
-    width: 0px;
-}
-
-.container__triangle--up {
-    border-color: transparent transparent rgba(0, 0, 0, 0.3);
-    border-width: 0px 8px 8px;
-}
-
-.container__triangle--right {
-    border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
-    border-width: 8px 0px 8px 8px;
-}
-
-.container__triangle--down {
-    border-color: rgba(0, 0, 0, 0.3) transparent transparent;
-    border-width: 8px 8px 0px;
-}
-
-.container__triangle--left {
-    border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
-    border-width: 8px 8px 8px 0px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                height: '200px',
-                                position: 'relative',
-                                width: '200px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
-                                            borderStyle: 'solid',
-                                            borderWidth: '0px 8px 8px 8px',
-                                            height: 0,
-                                            width: 0,
-                                        }}
-                                    />
-                                    <div style={{ marginLeft: '8px' }}>Up</div>
-                                </button>
-                            </div>
-                            <div
-                                style={{
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translate(50%, -50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>Right</div>
-                                    <div
-                                        style={{
-                                            borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
-                                            borderStyle: 'solid',
-                                            borderWidth: '8px 0px 8px 8px',
-                                            height: 0,
-                                            width: 0,
-                                        }}
-                                    />
-                                </button>
-                            </div>
-                            <div
-                                style={{
-                                    bottom: 0,
-                                    left: '50%',
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, 50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
-                                            borderStyle: 'solid',
-                                            borderWidth: '8px 8px 0px 8px',
-                                            height: 0,
-                                            width: 0,
-                                        }}
-                                    />
-                                    <div style={{ marginLeft: '8px' }}>Down</div>
-                                </button>
-                            </div>
-                            <div
-                                style={{
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
-                                            borderStyle: 'solid',
-                                            borderWidth: '8px 8px 8px 0px',
-                                            height: 0,
-                                            width: 0,
-                                        }}
-                                    />
-                                    <div style={{ marginLeft: '8px' }}>Left</div>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.PriceTag, Pattern.Voting]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx
deleted file mode 100644
index 3fcd714..0000000
--- a/client/patterns/upload-button/Details.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.UploadButton}>
-            <Helmet>
-                <meta name="description" content="Create an upload button with CSS flexbox" />
-                <meta name="og:description" content="Create an upload button with CSS flexbox" />
-                <meta name="twitter:description" content="Create an upload button with CSS flexbox" />
-                <meta name="keywords" content="css file input, css flexbox, css upload button" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can click the button to choose a file.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The real file input -->
-    <input type="file" class="container__input" />
-
-    <!-- The upload icon -->
-    <div class="container__icon">...</div>
-
-    <!-- The label -->
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Used to position the input */
-    position: relative;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-}
-
-.container__input {
-    /* Take the full size */
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-
-    /* Make it transparent */
-    opacity: 0;
-}
-
-.container__icon {
-    margin-right: 8px
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '128px' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    padding: '8px',
-                                    position: 'relative',
-                                    width: '100%',
-                                }}
-                            >
-                                <input
-                                    type="file"
-                                    style={{
-                                        height: '100%',
-                                        left: 0,
-                                        opacity: 0,
-                                        position: 'absolute',
-                                        top: 0,
-                                        width: '100%',
-                                    }}
-                                />
-                                <div style={{ marginRight: '8px' }}>
-                                    <svg
-                                        viewBox="0 0 24 24"
-                                        style={{
-                                            fill: 'none',
-                                            height: '24',
-                                            stroke: "rgba(0, 0, 0, 0.4)",
-                                            strokeLinecap: 'round',
-                                            strokeLinejoin: 'round',
-                                            strokeWidth: 1,
-                                            width: '24',
-                                        }}
-                                    >
-                                        <path
-                                            d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
-                                            c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
-                                            H18.5z
-                                            M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
-                                        />
-                                    </svg>
-                                </div>
-                                <Rectangle />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/validation-icon/Details.tsx b/client/patterns/validation-icon/Details.tsx
deleted file mode 100644
index c001018..0000000
--- a/client/patterns/validation-icon/Details.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ValidationIcon}>
-            <Helmet>
-                <meta name="description" content="Add validation icons to input with CSS" />
-                <meta name="og:description" content="Add validation icons to input with CSS" />
-                <meta name="twitter:description" content="Add validation icons to input with CSS" />
-                <meta name="keywords" content="css validation icon" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The input -->
-    <input class="container__input" />
-
-    <!-- The icon container -->
-    <span class="container__icon">
-        <!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
-        ...
-    </span>
-</div>
-`}
-css={`
-.container {
-    /* Used to position the validation icon */
-    position: relative;
-}
-
-.container__input {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-
-    /* Take the full width */
-    width: 100%;
-
-    /* Don't overlap the icon */
-    padding-right: 24px;
-}
-
-.container__icon {
-    /* Positioned at the right side */
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translate(0, -50%);
-
-    z-index: 10;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                marginBottom: '16px',
-                                position: 'relative',
-                                width: '200px',
-                            }}
-                        >
-                            <input
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    height: '32px',
-                                    paddingRight: '24px',
-                                    width: '100%',
-                                }}
-                            />
-                            <i
-                                style={{
-                                    position: 'absolute',
-                                    right: '8px',
-                                    top: '50%',
-                                    transform: 'translate(0, -50%)',
-                                    zIndex: 10,
-                                }}
-                            >
-                                <svg
-                                    viewBox="0 0 24 24"
-                                    style={{
-                                        fill: 'none',
-                                        height: '16px',
-                                        stroke: "rgba(0, 0, 0, 0.5)",
-                                        strokeLinecap: 'round',
-                                        strokeLinejoin: 'round',
-                                        strokeWidth: 2,
-                                        width: '16px',
-                                    }}
-                                >
-                                    <path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
-                                </svg>
-                            </i>
-                        </div>
-
-                        <div
-                            style={{
-                                marginBottom: '16px',
-                                position: 'relative',
-                                width: '200px',
-                            }}
-                        >
-                            <input
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    height: '32px',
-                                    paddingRight: '24px',
-                                    width: '100%',
-                                }}
-                            />
-                            <i
-                                style={{
-                                    position: 'absolute',
-                                    right: '8px',
-                                    top: '50%',
-                                    transform: 'translate(0, -50%)',
-                                    zIndex: 10,
-                                }}
-                            >
-                                <svg
-                                    viewBox="0 0 24 24"
-                                    style={{
-                                        fill: 'none',
-                                        height: '16px',
-                                        stroke: '#e7040f',
-                                        strokeLinecap: 'round',
-                                        strokeLinejoin: 'round',
-                                        strokeWidth: 2,
-                                        width: '16px',
-                                    }}
-                                >
-                                    <path d={`M0.5,0.499l23,23 M23.5,0.499l-23,23`} />
-                                </svg>
-                            </i>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/video-background/Details.tsx b/client/patterns/video-background/Details.tsx
deleted file mode 100644
index 739695e..0000000
--- a/client/patterns/video-background/Details.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.VideoBackground}>
-            <Helmet>
-                <meta name="description" content="Add video background with CSS flexbox" />
-                <meta name="og:description" content="Add video background with CSS flexbox" />
-                <meta name="twitter:description" content="Add video background with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, object fit cover" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    In this pattern, the video is displayed in the background.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The video container -->
-    <div class="container__wrapper">
-        <video class="container__video" src="...">
-            ...
-        </video>
-    </div>
-
-    <!-- The content -->
-    <div class="container__content">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Used to position the video and content */
-    position: relative;
-}
-
-.container__wrapper {
-    /* Positioned at the top left corner */
-    left: 0px;
-    position: absolute;
-    top: 0px;
-
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-
-    /* Hide the scrollbar */
-    overflow: hidden;
-}
-
-.container__video {
-    object-fit: cover;
-
-    /* Center the video */
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-
-    /* Take full width */
-    width: 100%;
-}
-
-.container__content {
-    /* Positioned at the top left corner */
-    left: 0px;
-    position: absolute;
-    top: 0px;
-
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div
-                            style={{
-                                height: '100%',
-                                position: 'relative',
-                                width: '100%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    height: '100%',
-                                    left: 0,
-                                    overflow: 'hidden',
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            >
-                                <video
-                                    style={{
-                                        objectFit: 'cover',
-                                        width: '100%',
-                                    }}
-                                    autoPlay={true}
-                                    loop={true}
-                                    muted={true}
-                                    playsInline={true}
-                                    src="/assets/video-background-demo.mp4"
-                                />
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ width: '250px' }}>
-                                    <Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/voting/Details.tsx b/client/patterns/voting/Details.tsx
deleted file mode 100644
index a8b627a..0000000
--- a/client/patterns/voting/Details.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    const [value, setValue] = React.useState(900);
-    const decrease = () => setValue(value - 1);
-    const increase = () => setValue(value + 1);
-
-    return (
-        <DetailsLayout pattern={Pattern.Voting}>
-            <Helmet>
-                <meta name="description" content="Create a voting control with CSS flexbox" />
-                <meta name="og:description" content="Create a voting control with CSS flexbox" />
-                <meta name="twitter:description" content="Create a voting control with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css triangle buttons, css voting control" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="voting">
-    <!-- Up button -->
-    <button class="voting__button">
-        <div class="voting__triangle voting__triangle--up"></div>
-    </button>
-
-    <!-- Number -->
-    <div class="voting__number">
-        ...
-    </div>
-
-    <!-- Down button -->
-    <button class="voting__button">
-        <div class="voting__triangle voting__triangle--down"></div>
-    </button>
-</div>
-`}
-css={`
-.voting {
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 0.25rem;
-    display: flex;
-    flex-direction: column;
-    height: 8rem;
-}
-
-.voting__button {
-    /* Reset */
-    background: none;
-    border: none;
-    cursor: pointer;
-    
-    /* Size */
-    height: 1rem;
-
-    /* Position the triangle */
-    position: relative;
-}
-
-.voting__triangle {
-    border-style: solid;
-
-    /* Size */
-    height: 0;
-    width: 0;
-}
-
-.voting__triangle--up {
-    border-color: transparent transparent rgba(0, 0, 0, 0.3);
-    border-width: 0 0.5rem 0.5rem;
-}
-
-.voting__triangle--down {
-    border-color: rgba(0, 0, 0, 0.3) transparent transparent;
-    border-width: 0.5rem 0.5rem 0px;
-}
-
-.voting__number {
-    /* Take the available height */
-    flex: 1;
-
-    /* Center the number */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 0.25rem;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '0.5rem',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '0.25rem',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '8rem',
-                            }}
-                        >
-                            <button
-                                style={{
-                                    background: 'none',
-                                    border: 'none',
-                                    cursor: 'pointer',
-                                    height: '1rem',
-                                    position: 'relative',
-                                }}
-                                onClick={increase}
-                            >
-                                <div
-                                    style={{
-                                        borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
-                                        borderStyle: 'solid',
-                                        borderWidth: '0 0.5rem 0.5rem 0.5rem',
-                                        height: 0,
-                                        left: '50%',
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translate(-50%, -50%)',
-                                        width: 0,
-                                    }}
-                                />
-                            </button>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    flex: 1,
-                                    padding: '0.25rem',
-                                    justifyContent: 'center',
-                                }}
-                            >
-                                {value}
-                            </div>
-                            <button
-                                style={{
-                                    background: 'none',
-                                    border: 'none',
-                                    cursor: 'pointer',
-                                    height: '1rem',
-                                    position: 'relative',
-                                }}
-                                onClick={decrease}
-                            >
-                                <div
-                                    style={{
-                                        borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
-                                        borderStyle: 'solid',
-                                        borderWidth: '0.5rem 0.5rem 0 0.5rem',
-                                        height: 0,
-                                        left: '50%',
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translate(-50%, -50%)',
-                                        width: 0,
-                                    }}
-                                />
-                            </button>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[
-                    Pattern.SpinButton, Pattern.StepperInput, Pattern.TriangleButtons
-                ]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/watermark/Details.tsx b/client/patterns/watermark/Details.tsx
deleted file mode 100644
index f605a28..0000000
--- a/client/patterns/watermark/Details.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Watermark}>
-            <Helmet>
-                <meta name="description" content="Create a watermark with CSS" />
-                <meta name="og:description" content="Create a watermark with CSS" />
-                <meta name="twitter:description" content="Create a watermark with CSS" />
-                <meta name="keywords" content="css watermark" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Watermark container -->
-    <div class="container__wrapper">
-        <!-- The watermark -->
-        <div class="container__watermark">
-            Draft
-        </div>
-    </div>
-
-    <!-- Other content -->
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Used to position the watermark */
-    position: relative;
-}
-
-.container__wrapper {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Absolute position */
-    left: 0px;
-    position: absolute;
-    top: 0px;
-
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-}
-
-.container__watermark {
-    /* Text color */
-    color: rgba(0, 0, 0, 0.2);
-
-    /* Text styles */
-    font-size: 3rem;
-    font-weight: bold;
-    text-transform: uppercase;
-
-    /* Rotate the text */
-    transform: rotate(-45deg);
-
-    /* Disable the selection */
-    user-select: none;
-}
-`}
-                >
-                    <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)',
-                                padding: '16px',
-                                position: 'relative',
-                                width: '300px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        color: 'rgba(0, 0, 0, 0.2)',
-                                        fontSize: '3rem',
-                                        fontWeight: 'bold',
-                                        textTransform: 'uppercase',
-                                        transform: 'rotate(-45deg)',
-                                        userSelect: 'none',
-                                    }}
-                                >
-                                    Draft
-                                </div>
-                            </div>
-
-                            <div style={{ marginBottom: '8px' }}>
-                                <Block numberOfBlocks={20} />
-                            </div>
-
-                            <div style={{ marginBottom: '8px' }}>
-                                <Block numberOfBlocks={15} />
-                            </div>
-
-                            <div style={{ marginBottom: '8px' }}>
-                                <Block numberOfBlocks={10} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx
deleted file mode 100644
index abe3604..0000000
--- a/client/patterns/wizard/Details.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Line from '../../placeholders/Line';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Wizard}>
-            <Helmet>
-                <meta name="description" content="Create a wizard with CSS flexbox" />
-                <meta name="og:description" content="Create a wizard with CSS flexbox" />
-                <meta name="twitter:description" content="Create a wizard with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css stepper, css wizard" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="wizard">
-    <!-- Step -->
-    <div class="wizard__step">
-        <div class="wizard__dot">
-            <!-- The left connector -->
-            <div class="wizard__connector"></div>
-
-            <!-- The step number -->
-            <div class="wizard__number">
-                ...
-            </div>
-
-            <!-- The right connector -->
-            <div class="wizard__connector"></div>
-        </div>
-
-        <!-- Title of step -->
-        ...
-    </div>
-
-    <!-- Repeat other steps -->
-    ...
-</div>
-`}
-css={`
-.wizard {
-    display: flex;
-}
-
-.wizard__step {
-    /* Make all steps have the same width */
-    flex: 1;
-}
-
-.wizard__dot {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.wizard__connector {
-    flex: 1;
-    height: 1px;
-    background-color: rgba(0, 0, 0, .3);
-}
-
-.wizard__step:first-child .wizard__connector,
-.wizard__step:last-child .wizard__connector {
-    background-color: transparent;
-}
-
-.wizard__number {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Rounded border */
-    background-color: rgba(0, 0, 0, .3);
-    border-radius: 9999px;
-    height: 32px;
-    width: 32px;
-
-    /* OPTIONAL: Spacing between it and connectors */
-    margin-left: 4px;
-    margin-right: 4px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ display: 'flex', width: '80%' }}>
-                            <div style={{ flex: 1 }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        marginBottom: '16px',
-                                    }}
-                                >
-                                    <div style={{ flex: 1 }} />
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            margin: '0 4px',
-                                        }}
-                                    >
-                                        <Circle size={32} />
-                                    </div>
-                                    <div style={{ flex: 1 }}><Line /></div>
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
-                                    <Block justify='center' numberOfBlocks={5} />
-                                </div>
-                            </div>
-                            <div style={{ flex: 1 }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        marginBottom: '16px',
-                                    }}
-                                >
-                                    <div style={{ flex: 1 }}><Line /></div>
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            margin: '0 4px',
-                                        }}
-                                    >
-                                        <Circle size={32} />
-                                    </div>
-                                    <div style={{ flex: 1 }}><Line /></div>
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
-                                    <Block justify='center' numberOfBlocks={5} />
-                                </div>
-                            </div>
-                            <div style={{ flex: 1 }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        marginBottom: '16px',
-                                    }}
-                                >
-                                    <div style={{ flex: 1 }}><Line /></div>
-                                    <div
-                                        style={{
-                                            alignItems: 'center',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            margin: '0 4px',
-                                        }}
-                                    >
-                                        <Circle size={32} />
-                                    </div>
-                                    <div style={{ flex: 1 }} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
-                                    <Block justify='center' numberOfBlocks={5} />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/patterns/zigzag-timeline/Details.tsx b/client/patterns/zigzag-timeline/Details.tsx
deleted file mode 100644
index 47fa6f3..0000000
--- a/client/patterns/zigzag-timeline/Details.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-import './zigzag-timeline.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ZigzagTimeline}>
-            <Helmet>
-                <meta name="description" content="Create a zigzag timeline" />
-                <meta name="og:description" content="Create a zigzag timeline" />
-                <meta name="twitter:description" content="Create a zigzag timeline" />
-                <meta name="keywords" content="css timeline, css zigzag timeline" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="zigzag-timeline__item">
-    <!-- Milestone -->
-    <div className="zigzag-timeline__milestone">...</div>
-
-    <!-- Content -->
-    ...
-</div>
-
-<!-- Repeat other items -->
-...
-`}
-css={`
-.zigzag-timeline__item {
-    /* Used to position the milestone */
-    position: relative;
-
-    /* Border */
-    border-bottom: 1px solid #71717A;
-
-    /* Take full width */
-    width: 100%;
-}
-
-.zigzag-timeline__milestone {
-    /* Absolute position */
-    position: absolute;    
-    top: 50%;
-
-    /* Circle it */
-    border-radius: 50%;
-    height: 2rem;
-    width: 2rem;
-
-    /* Misc */
-    background: #71717A;
-}
-
-/* Styles for even items */
-.zigzag-timeline__item:nth-child(2n) {
-    border-left: 1px solid #71717A;
-    
-}
-.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
-    left: 0;
-    transform: translate(-50%, -50%);    
-}
-
-/* Styles for odd items */
-.zigzag-timeline__item:nth-child(2n + 1) {
-    border-right: 1px solid #71717A;
-}
-.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
-    right: 0;
-    transform: translate(50%, -50%);
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        margin: '0 auto',
-                        padding: '0.5rem',
-                        width: '60%',
-                    }}
-                >
-                    <div
-                        className='zigzag-timeline__item'
-                        style={{                                
-                            padding: '1rem 1.5rem',
-                        }}
-                    >
-                        <div className='zigzag-timeline__milestone'/>
-                        <div style={{ marginBottom: '1rem', width: '80%' }}><Rectangle /></div>
-                        <Block numberOfBlocks={10} />
-                    </div>
-                    <div
-                        className='zigzag-timeline__item'
-                        style={{
-                            padding: '1rem 1.5rem',
-                        }}
-                    >
-                        <div className='zigzag-timeline__milestone' />
-                        <div style={{ marginBottom: '1rem', width: '60%' }}><Rectangle /></div>
-                        <Block numberOfBlocks={20} />
-                    </div>
-                    <div
-                        className='zigzag-timeline__item'
-                        style={{
-                            padding: '1rem 1.5rem',
-                        }}
-                    >
-                        <div className='zigzag-timeline__milestone' />
-                        <div style={{ marginBottom: '1rem', width: '70%' }}><Rectangle /></div>
-                        <Block numberOfBlocks={15} />
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <RelatedPatterns patterns={[Pattern.Timeline]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;
diff --git a/client/placeholders/BrowserFrame.tsx b/client/placeholders/BrowserFrame.tsx
deleted file mode 100644
index 6c4ef83..0000000
--- a/client/placeholders/BrowserFrame.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import SampleCode from '../components/SampleCode';
-import './browserFrame.css';
-
-interface BrowserFrameProps {
-    css: string;
-    html: string;    
-}
-
-const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
-    return (
-        <>
-            <div className="demo__html">
-                <SampleCode fullHeight={true} lang="html" code={html} />
-            </div>
-            <div className="demo__css">
-                <SampleCode fullHeight={true} lang="css" code={css} />
-            </div>
-            <div className="demo__live">
-                {children}
-            </div>
-        </>
-    );
-};
-
-export default BrowserFrame;
diff --git a/client/placeholders/browserFrame.css b/client/placeholders/browserFrame.css
deleted file mode 100644
index 188aaac..0000000
--- a/client/placeholders/browserFrame.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.demo__live {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    height: 32rem;
-    overflow: auto;
-}
-
-.demo__html {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
-}
\ No newline at end of file
diff --git a/client/types/hightlight.d.ts b/client/types/hightlight.d.ts
deleted file mode 100644
index 7b8cf2a..0000000
--- a/client/types/hightlight.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-declare module 'highlight.js/lib/highlight' {
-    interface HighlightResult {
-        value: string;
-    }
-
-    function highlight(lang: string, code: string): HighlightResult;
-    function registerLanguage(name: string, language: any): void;
-}
-
-declare module 'highlight.js/lib/languages/javascript' {}
-declare module 'highlight.js/lib/languages/xml' {}
diff --git a/client/components/Ad.tsx b/components/Ad.tsx
similarity index 58%
rename from client/components/Ad.tsx
rename to components/Ad.tsx
index 0ba2a5b..aa89a13 100644
--- a/client/components/Ad.tsx
+++ b/components/Ad.tsx
@@ -1,21 +1,10 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
-import './ad.css';
-
-const Ad: React.FC<{}> = () => {
+export const Ad: React.FC<{}> = () => {
     const containerRef = React.useRef<HTMLDivElement | null>(null);
     const source = 'https://cdn.carbonads.com/carbon.js?serve=CE7I6KQL&placement=csslayoutio';
 
     React.useEffect(() => {
-        // Ignore if the code is reached in snapping mode
-        if (navigator.userAgent === 'ReactSnap') {
-            return;
-        }
         const container = containerRef.current;
         if (!container) {
             return;
@@ -32,9 +21,5 @@ const Ad: React.FC<{}> = () => {
         };
     }, []);
 
-    return (
-        <div ref={containerRef} />
-    );
+    return <div ref={containerRef} />;
 };
-
-export default Ad;
diff --git a/components/Code.tsx b/components/Code.tsx
new file mode 100644
index 0000000..18b8d96
--- /dev/null
+++ b/components/Code.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Highlight, { defaultProps, Language } from 'prism-react-renderer';
+import theme from 'prism-react-renderer/themes/vsDark';
+
+export const Code: React.FC<{
+    children: string;
+    language: Language;
+}> = ({ children, language }) => {
+    return (
+        <Highlight {...defaultProps} theme={theme} code={children.trim()} language={language}>
+            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                <pre className={`block-code ${className}`} style={{ ...style }}>
+                    {tokens.map((line, i) => (
+                        <div key={i} {...getLineProps({ line, key: i })}>
+                            {line.map((token, key) => (
+                                <span key={key} {...getTokenProps({ token, key })} />
+                            ))}
+                        </div>
+                    ))}
+                </pre>
+            )}
+        </Highlight>
+    );
+};
diff --git a/components/CoverCard.tsx b/components/CoverCard.tsx
new file mode 100644
index 0000000..3b90aa3
--- /dev/null
+++ b/components/CoverCard.tsx
@@ -0,0 +1,149 @@
+import * as React from 'react';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+
+import { Pattern } from '../constants/Pattern';
+import { slug } from '../utils/slug';
+
+interface CoverCardProps {
+    pattern: Pattern;
+}
+
+const CoverList = {
+    // A
+    [Pattern.Accordion]: dynamic(() => import('../patterns/accordion/Cover')),
+    [Pattern.ArrowButtons]: dynamic(() => import('../patterns/arrow-buttons/Cover')),
+    [Pattern.Avatar]: dynamic(() => import('../patterns/avatar/Cover')),
+    [Pattern.AvatarList]: dynamic(() => import('../patterns/avatar-list/Cover')),
+    // B
+    [Pattern.Badge]: dynamic(() => import('../patterns/badge/Cover')),
+    [Pattern.Breadcrumb]: dynamic(() => import('../patterns/breadcrumb/Cover')),
+    [Pattern.ButtonWithIcon]: dynamic(() => import('../patterns/button-with-icon/Cover')),
+    // C
+    [Pattern.Card]: dynamic(() => import('../patterns/card/Cover')),
+    [Pattern.CardLayout]: dynamic(() => import('../patterns/card-layout/Cover')),
+    [Pattern.Centering]: dynamic(() => import('../patterns/centering/Cover')),
+    [Pattern.Chip]: dynamic(() => import('../patterns/chip/Cover')),
+    [Pattern.CircularNavigation]: dynamic(() => import('../patterns/circular-navigation/Cover')),
+    [Pattern.CloseButton]: dynamic(() => import('../patterns/close-button/Cover')),
+    [Pattern.ColorSwatch]: dynamic(() => import('../patterns/color-swatch/Cover')),
+    [Pattern.ConcaveCorners]: dynamic(() => import('../patterns/concave-corners/Cover')),
+    [Pattern.CookieBanner]: dynamic(() => import('../patterns/cookie-banner/Cover')),
+    [Pattern.CornerRibbon]: dynamic(() => import('../patterns/corner-ribbon/Cover')),
+    [Pattern.CurvedBackground]: dynamic(() => import('../patterns/curved-background/Cover')),
+    [Pattern.CustomCheckboxButton]: dynamic(() => import('../patterns/custom-checkbox-button/Cover')),
+    [Pattern.CustomRadioButton]: dynamic(() => import('../patterns/custom-radio-button/Cover')),
+    // D
+    [Pattern.DiagonalSection]: dynamic(() => import('../patterns/diagonal-section/Cover')),
+    [Pattern.DockedAtCorner]: dynamic(() => import('../patterns/docked-at-corner/Cover')),
+    [Pattern.DotLeader]: dynamic(() => import('../patterns/dot-leader/Cover')),
+    [Pattern.DotNavigation]: dynamic(() => import('../patterns/dot-navigation/Cover')),
+    [Pattern.Drawer]: dynamic(() => import('../patterns/drawer/Cover')),
+    [Pattern.DropArea]: dynamic(() => import('../patterns/drop-area/Cover')),
+    [Pattern.DropCap]: dynamic(() => import('../patterns/drop-cap/Cover')),
+    [Pattern.Dropdown]: dynamic(() => import('../patterns/dropdown/Cover')),
+    // F
+    [Pattern.FadingLongSection]: dynamic(() => import('../patterns/fading-long-section/Cover')),
+    [Pattern.FeatureComparison]: dynamic(() => import('../patterns/feature-comparison/Cover')),
+    [Pattern.FeatureList]: dynamic(() => import('../patterns/feature-list/Cover')),
+    [Pattern.FixedAtCorner]: dynamic(() => import('../patterns/fixed-at-corner/Cover')),
+    [Pattern.FixedAtSide]: dynamic(() => import('../patterns/fixed-at-side/Cover')),
+    [Pattern.FloatingLabel]: dynamic(() => import('../patterns/floating-label/Cover')),
+    [Pattern.FolderStructure]: dynamic(() => import('../patterns/folder-structure/Cover')),
+    [Pattern.FullBackground]: dynamic(() => import('../patterns/full-background/Cover')),
+    [Pattern.FullScreenMenu]: dynamic(() => import('../patterns/full-screen-menu/Cover')),
+    // H
+    [Pattern.HolyGrail]: dynamic(() => import('../patterns/holy-grail/Cover')),
+    // I
+    [Pattern.InitialAvatar]: dynamic(() => import('../patterns/initial-avatar/Cover')),
+    [Pattern.InputAddon]: dynamic(() => import('../patterns/input-addon/Cover')),
+    [Pattern.InvertedCorners]: dynamic(() => import('../patterns/inverted-corners/Cover')),
+    // K
+    [Pattern.KeyboardShortcut]: dynamic(() => import('../patterns/keyboard-shortcut/Cover')),
+    // L
+    [Pattern.LayeredCard]: dynamic(() => import('../patterns/layered-card/Cover')),
+    [Pattern.LinedPaper]: dynamic(() => import('../patterns/lined-paper/Cover')),
+    // M
+    [Pattern.MasonryGrid]: dynamic(() => import('../patterns/masonry-grid/Cover')),
+    [Pattern.MediaObject]: dynamic(() => import('../patterns/media-object/Cover')),
+    [Pattern.MegaMenu]: dynamic(() => import('../patterns/mega-menu/Cover')),
+    [Pattern.Menu]: dynamic(() => import('../patterns/menu/Cover')),
+    [Pattern.Modal]: dynamic(() => import('../patterns/modal/Cover')),
+    // N
+    [Pattern.NestedDropdowns]: dynamic(() => import('../patterns/nested-dropdowns/Cover')),
+    [Pattern.Notification]: dynamic(() => import('../patterns/notification/Cover')),
+    // O
+    [Pattern.OverlayPlayButton]: dynamic(() => import('../patterns/overlay-play-button/Cover')),
+    // P
+    [Pattern.Pagination]: dynamic(() => import('../patterns/pagination/Cover')),
+    [Pattern.PopoverArrow]: dynamic(() => import('../patterns/popover-arrow/Cover')),
+    [Pattern.PresenceIndicator]: dynamic(() => import('../patterns/presence-indicator/Cover')),
+    [Pattern.PreviousNextButtons]: dynamic(() => import('../patterns/previous-next-buttons/Cover')),
+    [Pattern.PriceTag]: dynamic(() => import('../patterns/price-tag/Cover')),
+    [Pattern.PricingTable]: dynamic(() => import('../patterns/pricing-table/Cover')),
+    [Pattern.ProgressBar]: dynamic(() => import('../patterns/progress-bar/Cover')),
+    [Pattern.PropertyList]: dynamic(() => import('../patterns/property-list/Cover')),
+    // Q
+    [Pattern.QuestionsAndAnswers]: dynamic(() => import('../patterns/questions-and-answers/Cover')),
+    // R
+    [Pattern.RadialProgressBar]: dynamic(() => import('../patterns/radial-progress-bar/Cover')),
+    [Pattern.RadioButtonGroup]: dynamic(() => import('../patterns/radio-button-group/Cover')),
+    [Pattern.RadioSwitch]: dynamic(() => import('../patterns/radio-switch/Cover')),
+    [Pattern.Rating]: dynamic(() => import('../patterns/rating/Cover')),
+    [Pattern.ResizableElement]: dynamic(() => import('../patterns/resizable-element/Cover')),
+    [Pattern.Ribbon]: dynamic(() => import('../patterns/ribbon/Cover')),
+    // S
+    [Pattern.SameHeightColumns]: dynamic(() => import('../patterns/same-height-columns/Cover')),
+    [Pattern.SearchBox]: dynamic(() => import('../patterns/search-box/Cover')),
+    [Pattern.Separator]: dynamic(() => import('../patterns/separator/Cover')),
+    [Pattern.Sidebar]: dynamic(() => import('../patterns/sidebar/Cover')),
+    [Pattern.SimpleGrid]: dynamic(() => import('../patterns/simple-grid/Cover')),
+    [Pattern.Slider]: dynamic(() => import('../patterns/slider/Cover')),
+    [Pattern.SpinButton]: dynamic(() => import('../patterns/spin-button/Cover')),
+    [Pattern.SplitNavigation]: dynamic(() => import('../patterns/split-navigation/Cover')),
+    [Pattern.SplitScreen]: dynamic(() => import('../patterns/split-screen/Cover')),
+    [Pattern.StackedCards]: dynamic(() => import('../patterns/stacked-cards/Cover')),
+    [Pattern.StampBorder]: dynamic(() => import('../patterns/stamp-border/Cover')),
+    [Pattern.Statistic]: dynamic(() => import('../patterns/statistic/Cover')),
+    [Pattern.StatusLight]: dynamic(() => import('../patterns/status-light/Cover')),
+    [Pattern.StepperInput]: dynamic(() => import('../patterns/stepper-input/Cover')),
+    [Pattern.StickyFooter]: dynamic(() => import('../patterns/sticky-footer/Cover')),
+    [Pattern.StickyHeader]: dynamic(() => import('../patterns/sticky-header/Cover')),
+    [Pattern.StickySections]: dynamic(() => import('../patterns/sticky-sections/Cover')),
+    [Pattern.StickyTableColumn]: dynamic(() => import('../patterns/sticky-table-column/Cover')),
+    [Pattern.StickyTableHeaders]: dynamic(() => import('../patterns/sticky-table-headers/Cover')),
+    [Pattern.Switch]: dynamic(() => import('../patterns/switch/Cover')),
+    // T
+    [Pattern.Tab]: dynamic(() => import('../patterns/tab/Cover')),
+    [Pattern.Teardrop]: dynamic(() => import('../patterns/teardrop/Cover')),
+    [Pattern.ThreeDimensionsCard]: dynamic(() => import('../patterns/three-dimensions-card/Cover')),
+    [Pattern.Timeline]: dynamic(() => import('../patterns/timeline/Cover')),
+    [Pattern.TogglePasswordVisibility]: dynamic(() => import('../patterns/toggle-password-visibility/Cover')),
+    [Pattern.Tooltip]: dynamic(() => import('../patterns/tooltip/Cover')),
+    [Pattern.TreeDiagram]: dynamic(() => import('../patterns/tree-diagram/Cover')),
+    [Pattern.TriangleButtons]: dynamic(() => import('../patterns/triangle-buttons/Cover')),
+    // U
+    [Pattern.UploadButton]: dynamic(() => import('../patterns/upload-button/Cover')),
+    // V
+    [Pattern.ValidationIcon]: dynamic(() => import('../patterns/validation-icon/Cover')),
+    [Pattern.VideoBackground]: dynamic(() => import('../patterns/video-background/Cover')),
+    [Pattern.Voting]: dynamic(() => import('../patterns/voting/Cover')),
+    // W
+    [Pattern.Watermark]: dynamic(() => import('../patterns/watermark/Cover')),
+    [Pattern.Wizard]: dynamic(() => import('../patterns/wizard/Cover')),
+    // Z
+    [Pattern.ZigzagTimeline]: dynamic(() => import('../patterns/zigzag-timeline/Cover')),
+};
+
+export const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
+    const Cover = CoverList[pattern];
+
+    return (
+        <Link href={`/${slug(pattern)}`}>
+            <a className="block-cover">
+                <Cover />
+                <h4 className="block-cover__name">{pattern}</h4>
+            </a>
+        </Link>
+    );
+};
diff --git a/components/FooterBlock.tsx b/components/FooterBlock.tsx
new file mode 100644
index 0000000..3ce0374
--- /dev/null
+++ b/components/FooterBlock.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Footer, FooterGroup, FooterLink } from '@1milligram/design';
+
+export const FooterBlock = () => (
+    <footer className="block-footer">
+        <div className="block-container">
+            <Footer>
+                <FooterGroup title="Products">
+                    <FooterLink href="https://blur.page">Blur Page</FooterLink>
+                    <FooterLink href="https://formvalidation.io">Form Validation</FooterLink>
+                    <FooterLink href="https://intersectionobserver.io">IntersectionObserver Examples</FooterLink>
+                    <FooterLink href="https://react-pdf-viewer.dev">React PDF Viewer</FooterLink>
+                </FooterGroup>
+                <FooterGroup title="Open sources">
+                    <FooterLink href="https://1loc.dev">1 LOC</FooterLink>
+                    <FooterLink href="https://csslayout.io">CSS Layout</FooterLink>
+                    <FooterLink href="https://getfrontend.tips">Front-end Tips</FooterLink>
+                    <FooterLink href="https://htmldom.dev">HTML DOM</FooterLink>
+                    <FooterLink href="https://thisthat.dev">this VS that</FooterLink>
+                </FooterGroup>
+                <FooterGroup title="Follow us">
+                    <FooterLink href="https://github.com/1milligram">GitHub</FooterLink>
+                    <FooterLink href="https://twitter.com/nghuuphuoc">Twitter</FooterLink>
+                </FooterGroup>
+            </Footer>
+
+            <div className="block-footer__copyright">
+                © 2020 — {new Date().getFullYear()}, 1 milligram. All rights reserved.
+            </div>
+        </div>
+    </footer>
+);
diff --git a/components/HeaderBlock.tsx b/components/HeaderBlock.tsx
new file mode 100644
index 0000000..eefb31e
--- /dev/null
+++ b/components/HeaderBlock.tsx
@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import * as React from 'react';
+import { Logo } from '@1milligram/design';
+
+export const HeaderBlock = () => {
+    const [totalStars, setTotalStars] = React.useState(0);
+
+    React.useEffect(() => {
+        fetch('https://api.github.com/repos/1milligram/csslayout')
+            .then((res) => res.json())
+            .then((data) => setTotalStars(data.stargazers_count))
+            .catch(console.log);
+    }, []);
+
+    const HeaderLogo = React.forwardRef<HTMLAnchorElement, React.LinkHTMLAttributes<HTMLAnchorElement>>(
+        (props, ref) => (
+            <a href={props.href} onClick={props.onClick} ref={ref}>
+                <Logo brand="CSS Layout" />
+            </a>
+        )
+    );
+
+    return (
+        <header className="block-header">
+            <div className="block-container">
+                <div className="block-header__inner">
+                    <Link href="/" passHref>
+                        <HeaderLogo />
+                    </Link>
+                    <Link href="https://github.com/1milligram/csslayout">
+                        <a className="block-header__cta">GitHub {totalStars}★</a>
+                    </Link>
+                </div>
+            </div>
+        </header>
+    );
+};
diff --git a/components/RelatedPatterns.tsx b/components/RelatedPatterns.tsx
new file mode 100644
index 0000000..357c7d8
--- /dev/null
+++ b/components/RelatedPatterns.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Heading } from '@1milligram/design';
+
+import { Pattern } from '../constants/Pattern';
+import { CoverCard } from './CoverCard';
+
+export const RelatedPatterns: React.FC<{
+    patterns: Pattern[];
+}> = ({ patterns }) => {
+    return (
+        <section>
+            <Heading level={2}>See also</Heading>
+
+            <div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '1.5rem' }}>
+                {patterns.map((pattern) => (
+                    <CoverCard key={pattern} pattern={pattern} />
+                ))}
+            </div>
+        </section>
+    );
+};
diff --git a/client/constants/Pattern.ts b/constants/Pattern.ts
similarity index 94%
rename from client/constants/Pattern.ts
rename to constants/Pattern.ts
index abb180c..6242507 100644
--- a/client/constants/Pattern.ts
+++ b/constants/Pattern.ts
@@ -1,9 +1,4 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-enum Pattern {    
+export enum Pattern {
     Accordion = 'Accordion',
     ArrowButtons = 'Arrow buttons',
     Avatar = 'Avatar',
@@ -107,5 +102,3 @@ enum Pattern {
     Wizard = 'Wizard',
     ZigzagTimeline = 'Zigzag timeline',
 }
-
-export default Pattern;
diff --git a/hooks/useInterval.ts b/hooks/useInterval.ts
new file mode 100644
index 0000000..e7db0ec
--- /dev/null
+++ b/hooks/useInterval.ts
@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const useInterval = (callback: () => void, delay?: number) => {
+    useEffect(() => {
+        const handler = () => callback();
+        if (delay !== null) {
+            const id = setInterval(handler, delay);
+            return () => clearInterval(id);
+        }
+    }, [delay]);
+};
+
+export default useInterval;
diff --git a/layouts/Layout.tsx b/layouts/Layout.tsx
new file mode 100644
index 0000000..f7eb32b
--- /dev/null
+++ b/layouts/Layout.tsx
@@ -0,0 +1,25 @@
+import Head from 'next/head';
+import * as React from 'react';
+import { FooterBlock } from '../components/FooterBlock';
+import { HeaderBlock } from '../components/HeaderBlock';
+
+interface LayoutProps {
+    title: string;
+}
+
+export const Layout: React.FC<LayoutProps> = ({ children, title }) => (
+    <>
+        <Head>
+            <title>{title} - CSS Layout</title>
+            <meta name="description" content={title} />
+            <meta name="twitter:title" content={`${title} - CSS Layout`} />
+            <meta name="twitter:description" content={title} />
+            <meta property="og:title" content={`${title} - CSS Layout`} />
+            <meta property="og:description" content={title} />
+        </Head>
+
+        <HeaderBlock />
+        {children}
+        <FooterBlock />
+    </>
+);
diff --git a/layouts/PatternLayout.tsx b/layouts/PatternLayout.tsx
new file mode 100644
index 0000000..f485c23
--- /dev/null
+++ b/layouts/PatternLayout.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { Heading, Spacer } from '@1milligram/design';
+
+import { Ad } from '../components/Ad';
+import { Pattern } from '../constants/Pattern';
+import { slug } from '../utils/slug';
+import { Layout } from './Layout';
+
+export const PatternLayout: React.FC<{
+    pattern: Pattern;
+}> = ({ pattern, children }) => {
+    const patternSlug = slug(pattern);
+
+    return (
+        <Layout title={pattern}>
+            <Head>
+                <title>{pattern} - CSS Layout</title>
+                <meta name="title" content={`${pattern} - CSS Layout`} />
+
+                <meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
+                <meta property="og:title" content={`${pattern} - CSS Layout`} />
+                <meta property="og:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
+
+                <meta property="twitter:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
+                <meta property="twitter:title" content={`${pattern} - CSS Layout`} />
+                <meta property="twitter:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
+            </Head>
+
+            <div className="block-container">
+                <div className="page-home__hero">
+                    <Spacer size="extraLarge" />
+                    <Heading level={1}>{pattern}</Heading>
+                    <Spacer size="large" />
+                    <div className="block-ad">
+                        <Ad />
+                    </div>
+                    <Spacer size="medium" />
+                </div>
+                {children}
+                <Spacer size="extraLarge" />
+            </div>
+        </Layout>
+    );
+};
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..9bc3dd4
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..38454c3
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,9 @@
+const withMDX = require('@next/mdx')({
+    extension: /\.mdx?$/,
+});
+
+module.exports = withMDX({
+    // `true` will transform `/about` to `/about/index.html`
+    trailingSlash: true,
+    pageExtensions: ['js', 'jsx', 'tsx', 'mdx'],
+});
diff --git a/package.json b/package.json
index 8e773f0..dc8d833 100644
--- a/package.json
+++ b/package.json
@@ -1,61 +1,57 @@
 {
     "name": "csslayout",
+    "description": "A collection of popular layouts and patterns made with CSS",
+    "author": {
+        "name": "Nguyen Huu Phuoc",
+        "email": "me@phuoc.ng",
+        "url": "https://twitter.com/nghuuphuoc"
+    },
+    "homepage": "https://csslayout.io",
+    "keywords": [
+        "CSS grid",
+        "CSS flexbox",
+        "CSS layout",
+        "CSS patterns"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/1milligram/csslayout"
+    },
+    "bugs": {
+        "url": "https://github.com/1milligram/csslayout/issues"
+    },
+    "license": "MIT",
     "scripts": {
-        "copy": "rimraf dist && mkdir dist && cpx 'public/**/*' dist",
-        "dev": "npm run copy && webpack --mode=development",
-        "dev-server": "npm run copy && NODE_ENV=development webpack serve",
-        "build": "npm run copy && webpack --mode=production && npm run export",
-        "export": "react-snap",
-        "deploy": "npm run build && netlify deploy --dir=dist --prod",
-        "analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p",
+        "build": "next build",
+        "dev": "next dev",
+        "format": "prettier --write \"**/*.+(css|html|json|js|jsx|mdx|scss|ts|tsx)\"",
+        "preexport": "npm run build",
+        "export": "next export",
+        "deploy": "npm run export && netlify deploy --prod --dir=out",
         "lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'",
         "screenshot": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshot.ts"
     },
     "dependencies": {
-        "@loadable/component": "^5.14.1",
-        "prismjs": "^1.23.0",
+        "@1milligram/design": "^0.4.0",
+        "@mdx-js/loader": "^1.6.22",
+        "@mdx-js/react": "^1.6.22",
+        "@next/mdx": "^11.1.2",
+        "next": "^11.1.2",
+        "prism-react-renderer": "^1.2.1",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-helmet": "^6.1.0",
-        "react-router-dom": "^5.2.0"
+        "react-dom": "^17.0.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.13.13",
-        "@babel/preset-env": "^7.13.12",
-        "@babel/preset-react": "^7.13.13",
-        "@loadable/babel-plugin": "^5.13.2",
-        "@types/loadable__component": "^5.13.3",
-        "@types/prismjs": "^1.16.4",
-        "@types/react": "^17.0.3",
-        "@types/react-dom": "^17.0.3",
-        "@types/react-helmet": "^6.1.0",
-        "@types/react-router-dom": "^5.1.7",
-        "babel-loader": "^8.2.2",
-        "babel-plugin-prismjs": "^2.0.1",
-        "cpx2": "^3.0.0",
-        "css-loader": "^5.2.0",
-        "html-webpack-plugin": "^5.3.1",
-        "mini-css-extract-plugin": "^1.4.0",
-        "puppeteer": "^1.20.0",
-        "react-snap": "^1.23.0",
-        "rimraf": "^3.0.2",
-        "source-map-loader": "^2.0.1",
-        "style-loader": "^2.0.0",
+        "@types/react": "^17.0.20",
+        "@types/react-dom": "^17.0.9",
+        "puppeteer": "^10.4.0",
+        "prettier": "^2.4.0",
+        "sass": "^1.39.2",
+        "serve": "^12.0.1",
+        "typescript": "^4.4.3",
         "ts-loader": "^8.1.0",
         "ts-node": "^9.1.1",
         "tslint": "^6.1.3",
-        "tslint-react": "^5.0.0",
-        "typescript": "^4.2.3",
-        "webpack": "^5.28.0",
-        "webpack-bundle-analyzer": "^4.4.0",
-        "webpack-cli": "^4.6.0",
-        "webpack-dev-server": "^3.11.2"
-    },
-    "reactSnap": {
-        "source": "dist",
-        "minifyHtml": {
-            "collapseWhitespace": false,
-            "removeComments": false
-        }
+        "tslint-react": "^5.0.0"
     }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
new file mode 100644
index 0000000..c1f7cd2
--- /dev/null
+++ b/pages/_app.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import Head from 'next/head';
+
+// Design
+import '@1milligram/design/lib/styles/index.css';
+import '../styles/index.scss';
+
+const MyApp: React.FC<{
+    Component: any;
+    pageProps: any;
+}> = ({ Component, pageProps }) => {
+    return (
+        <>
+            <Head>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+            </Head>
+            <Component {...pageProps} />
+        </>
+    );
+};
+
+export default MyApp;
diff --git a/pages/_document.tsx b/pages/_document.tsx
new file mode 100644
index 0000000..6343080
--- /dev/null
+++ b/pages/_document.tsx
@@ -0,0 +1,53 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+    render() {
+        return (
+            <Html>
+                <Head>
+                    <link href="/favicon.png" rel="icon" />
+                    <meta charSet="utf-8" />
+
+                    <meta content="A collection of popular layouts and patterns made with CSS" name="description" />
+                    <meta
+                        content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template"
+                        name="keywords"
+                    />
+                    <meta content="Nguyen Huu Phuoc" name="author" />
+                    <meta content="@nghuuphuoc" name="twitter:site" />
+                    <meta content="summary" name="twitter:card" />
+                    <meta
+                        content="A collection of popular layouts and patterns made with CSS"
+                        name="twitter:description"
+                    />
+                    <meta content="A collection of popular layouts and patterns made with CSS" name="twitter:title" />
+                    <meta content="/assets/logo.png" name="twitter:image" />
+
+                    <meta content="A collection of popular layouts and patterns made with CSS" property="og:title" />
+                    <meta
+                        content="A collection of popular layouts and patterns made with CSS"
+                        property="og:description"
+                    />
+                    <meta content="article" property="og:type" />
+                    <meta content="https://csslayout.io" property="og:url" />
+                    <meta content="/assets/logo.png" property="og:image" />
+                    <meta content="CSS Layout" property="og:site_name" />
+
+                    <link rel="icon" href="/assets/favicon.png" />
+                    <link rel="preconnect" href="https://fonts.googleapis.com" />
+                    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+                    <link
+                        rel="stylesheet"
+                        href="https://fonts.googleapis.com/css2?&family=Source+Code+Pro:wght@400&family=Inter:wght@400;700&display=swap"
+                    />
+                </Head>
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+}
+
+export default MyDocument;
diff --git a/pages/accordion/index.tsx b/pages/accordion/index.tsx
new file mode 100644
index 0000000..7cce5b9
--- /dev/null
+++ b/pages/accordion/index.tsx
@@ -0,0 +1,199 @@
+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/pages/arrow-buttons/index.tsx b/pages/arrow-buttons/index.tsx
new file mode 100644
index 0000000..6117f8e
--- /dev/null
+++ b/pages/arrow-buttons/index.tsx
@@ -0,0 +1,256 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.ArrowButtons}>
+            <Head>
+                <meta name="description" content="Create arrow buttons with CSS" />
+                <meta name="og:description" content="Create arrow buttons with CSS" />
+                <meta name="twitter:description" content="Create arrow buttons with CSS" />
+                <meta name="keywords" content="css arrow buttons" />
+            </Head>
+            <BrowserFrame
+                html={`
+<!-- Up arrow button -->
+<button class="button">
+    <!-- Arrow -->
+    <div class="button__arrow button__arrow--up"></div>
+
+    <!-- Content -->
+    ...
+</button>
+
+<!-- Right arrow button -->
+<button class="button">
+    <!-- Content -->
+    ...
+
+    <!-- Arrow -->
+    <div class="button__arrow button__arrow--right"></div>
+</button>
+
+<!-- Down arrow button -->
+<button class="button">
+    <!-- Arrow -->
+    <div class="button__arrow button__arrow--down"></div>
+
+    <!-- Content -->
+    ...
+</button>
+
+<!-- Left arrow button -->
+<button class="button">
+    <!-- Arrow -->
+    <div class="button__arrow button__arrow--left"></div>
+
+    <!-- Content -->
+    ...
+</button>
+`}
+                css={`
+                    .button {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Spacing */
+                        padding: 8px;
+                    }
+
+                    .button__arrow {
+                        /* Transparent background */
+                        background-color: transparent;
+
+                        /* Size */
+                        height: 12px;
+                        width: 12px;
+                    }
+
+                    .button__arrow--up {
+                        /* Edges */
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translateY(25%) rotate(45deg);
+                    }
+
+                    .button__arrow--right {
+                        /* Edges */
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translateX(-25%) rotate(45deg);
+                    }
+
+                    .button__arrow--down {
+                        /* Edges */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translateY(-25%) rotate(45deg);
+                    }
+
+                    .button__arrow--left {
+                        /* Edges */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translateX(25%) rotate(45deg);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '200px',
+                            position: 'relative',
+                            width: '200px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                left: '50%',
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(-50%, -50%)',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '12px',
+                                        transform: 'translateY(25%) rotate(45deg)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div style={{ marginLeft: '8px' }}>Up</div>
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                position: 'absolute',
+                                right: 0,
+                                top: '50%',
+                                transform: 'translate(50%, -50%)',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <div style={{ marginRight: '8px' }}>Right</div>
+                                <div
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '12px',
+                                        transform: 'translateX(-25%) rotate(45deg)',
+                                        width: '12px',
+                                    }}
+                                />
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                bottom: 0,
+                                left: '50%',
+                                position: 'absolute',
+                                transform: 'translate(-50%, 50%)',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '12px',
+                                        transform: 'translateY(-25%) rotate(45deg)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div style={{ marginLeft: '8px' }}>Down</div>
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                left: 0,
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '12px',
+                                        transform: 'translateX(25%) rotate(45deg)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div style={{ marginLeft: '8px' }}>Left</div>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/avatar-list/index.tsx b/pages/avatar-list/index.tsx
new file mode 100644
index 0000000..52719a0
--- /dev/null
+++ b/pages/avatar-list/index.tsx
@@ -0,0 +1,114 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Avatar: React.FC<{}> = ({ children }) => {
+    return (
+        <div
+            style={{
+                alignItems: 'center',
+                backgroundColor: '#BBB',
+                borderRadius: '9999px',
+                boxShadow: '0 0 0 4px #FFF',
+                color: '#FFF',
+                display: 'flex',
+                height: '48px',
+                justifyContent: 'center',
+                width: '48px',
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.AvatarList}>
+            <Head>
+                <meta name="description" content="Create an avatar list with CSS flexbox" />
+                <meta name="og:description" content="Create an avatar list with CSS flexbox" />
+                <meta name="twitter:description" content="Create an avatar list with CSS flexbox" />
+                <meta name="keywords" content="css avatar, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="avatars">
+    <!-- Avatar item -->
+    <div class="avatars__item">
+        <div class="avatars__image">
+            <!-- Image -->
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat other avatars -->
+    ...
+</div>
+`}
+                css={`
+                    .avatars {
+                        display: flex;
+                    }
+
+                    .avatars__item {
+                        /* Nagative margin make avatar overlap to previous one */
+                        margin-left: -4px;
+                    }
+
+                    .avatars__image {
+                        /* Add a white curve between avatars */
+                        box-shadow: 0 0 0 4px #fff;
+
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Rounded border */
+                        border-radius: 9999px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ marginLeft: '-4px' }}>
+                        <Avatar />
+                    </div>
+                    <div style={{ marginLeft: '-4px' }}>
+                        <Avatar />
+                    </div>
+                    <div style={{ marginLeft: '-4px' }}>
+                        <Avatar />
+                    </div>
+                    <div style={{ marginLeft: '-4px' }}>
+                        <Avatar />
+                    </div>
+                    <div style={{ marginLeft: '-4px' }}>
+                        <Avatar>+5</Avatar>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+
+            <RelatedPatterns
+                patterns={[Pattern.Avatar, Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]}
+            />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/avatar/Details.tsx b/pages/avatar/index.tsx
similarity index 70%
rename from client/patterns/avatar/Details.tsx
rename to pages/avatar/index.tsx
index d910415..510a2a0 100644
--- a/client/patterns/avatar/Details.tsx
+++ b/pages/avatar/index.tsx
@@ -1,49 +1,45 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
+import { Spacer } from '@1milligram/design';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Avatar}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.Avatar}>
+            <Head>
                 <meta name="description" content="Create an avatar component with CSS flexbox" />
                 <meta name="og:description" content="Create an avatar component with CSS flexbox" />
                 <meta name="twitter:description" content="Create an avatar component with CSS flexbox" />
                 <meta name="keywords" content="css avatar, css flexbox" />
-            </Helmet>
+            </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="avatar">
     <!-- Avatar image -->
     <img class="avatar__image" src="..." />
 </div>
 `}
-css={`
-.avatar {
-    /* Rounded border */
-    border-radius: 50%;
-    height: 64px;
-    width: 64px;
-}
+                css={`
+                    .avatar {
+                        /* Rounded border */
+                        border-radius: 50%;
+                        height: 64px;
+                        width: 64px;
+                    }
 
-.avatar__image {
-    /* Rounded border */
-    border-radius: 50%;
+                    .avatar__image {
+                        /* Rounded border */
+                        border-radius: 50%;
 
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-}
-`}
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+                    }
+                `}
             >
                 <div
                     style={{
@@ -69,7 +65,7 @@ css={`
                             style={{
                                 fill: 'none',
                                 height: '100%',
-                                stroke: "#FFF",
+                                stroke: '#FFF',
                                 strokeLinecap: 'round',
                                 strokeLinejoin: 'round',
                                 strokeWidth: 1,
@@ -85,9 +81,9 @@ css={`
                     </div>
                 </div>
             </BrowserFrame>
-
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/badge/index.tsx b/pages/badge/index.tsx
new file mode 100644
index 0000000..09553e3
--- /dev/null
+++ b/pages/badge/index.tsx
@@ -0,0 +1,78 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Badge}>
+            <Head>
+                <meta name="description" content="Create a badge component with CSS flexbox" />
+                <meta name="og:description" content="Create a badge component with CSS flexbox" />
+                <meta name="twitter:description" content="Create a badge component with CSS flexbox" />
+                <meta name="keywords" content="css badge, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="badge">
+    ...
+</div>
+`}
+                css={`
+                    .badge {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.3);
+                        color: #fff;
+
+                        /* Rounded border */
+                        border-radius: 9999px;
+                        height: 32px;
+                        width: 32px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            borderRadius: '9999px',
+                            color: '#FFF',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            fontSize: '20px',
+                            height: '32px',
+                            justifyContent: 'center',
+                            width: '32px',
+                        }}
+                    >
+                        1
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/breadcrumb/index.tsx b/pages/breadcrumb/index.tsx
new file mode 100644
index 0000000..3a775db
--- /dev/null
+++ b/pages/breadcrumb/index.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Breadcrumb}>
+            <Head>
+                <meta name="description" content="Create a breadcrumb with CSS flexbox" />
+                <meta name="og:description" content="Create a breadcrumb with CSS flexbox" />
+                <meta name="twitter:description" content="Create a breadcrumb with CSS flexbox" />
+                <meta name="keywords" content="css breadcrumb, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="breadcrumb">
+    <!-- Breadcrumb item -->
+    <a>...</a>
+
+    <!-- Separator -->
+    <div class="breadcrumb__separator">/</div>
+
+    <!-- Repeated items and separators -->
+    ...
+</div>
+`}
+                css={`
+                    .breadcrumb {
+                        /* Content is centered vertically */
+                        align-items: center;
+                        display: flex;
+                    }
+
+                    .breadcrumb__separator {
+                        margin: 0 8px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ alignItems: 'center', display: 'flex' }}>
+                        <div style={{ width: '128px' }}>
+                            <Rectangle height={16} />
+                        </div>
+                        <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
+                        <div style={{ width: '32px' }}>
+                            <Rectangle height={16} />
+                        </div>
+                        <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
+                        <div style={{ width: '64px' }}>
+                            <Rectangle height={16} />
+                        </div>
+                        <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
+                        <div style={{ width: '32px' }}>
+                            <Rectangle height={16} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/button-with-icon/index.tsx b/pages/button-with-icon/index.tsx
new file mode 100644
index 0000000..d1fa12c
--- /dev/null
+++ b/pages/button-with-icon/index.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.ButtonWithIcon}>
+            <Head>
+                <meta name="description" content="Create an icon button with CSS flexbox" />
+                <meta name="og:description" content="Create an icon button with CSS flexbox" />
+                <meta name="twitter:description" content="Create an icon button with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css icon button" />
+            </Head>
+            <BrowserFrame
+                html={`
+<button class="button">
+    <!-- Icon -->
+    ...
+
+    <!-- Label -->
+    ...
+</div>
+`}
+                css={`
+                    .button {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: center;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '256px' }}>
+                        <button
+                            style={{
+                                alignItems: 'center',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '8px',
+                                display: 'flex',
+                                height: '64px',
+                                padding: '8px',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ marginRight: '8px' }}>
+                                <Circle size={32} />
+                            </div>
+                            <Rectangle />
+                        </button>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/card-layout/Details.tsx b/pages/card-layout/index.tsx
similarity index 56%
rename from client/patterns/card-layout/Details.tsx
rename to pages/card-layout/index.tsx
index f464b77..bae1ae7 100644
--- a/client/patterns/card-layout/Details.tsx
+++ b/pages/card-layout/index.tsx
@@ -1,28 +1,24 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
+import { Spacer } from '@1milligram/design';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.CardLayout}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.CardLayout}>
+            <Head>
                 <meta name="description" content="Create a card layout with CSS flexbox" />
                 <meta name="og:description" content="Create a card layout with CSS flexbox" />
                 <meta name="twitter:description" content="Create a card layout with CSS flexbox" />
                 <meta name="keywords" content="css card layout, css flexbox, css layout" />
-            </Helmet>
+            </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="cards">
     <!-- A card with given width -->
     <div class="cards__item">
@@ -33,25 +29,25 @@ html={`
     ...
 </div>
 `}
-css={`
-.cards {
-    display: flex;
+                css={`
+                    .cards {
+                        display: flex;
 
-    /* Put a card in the next row when previous cards take all width */
-    flex-wrap: wrap;
+                        /* Put a card in the next row when previous cards take all width */
+                        flex-wrap: wrap;
 
-    margin-left: -8px;
-    margin-right: -8px;
-}
+                        margin-left: -8px;
+                        margin-right: -8px;
+                    }
 
-.cards__item {
-    /* There will be 4 cards per row */
-    flex-basis: 25%;
+                    .cards__item {
+                        /* There will be 4 cards per row */
+                        flex-basis: 25%;
 
-    padding-left: 8px;
-    padding-right: 8px;
-}
-`}
+                        padding-left: 8px;
+                        padding-right: 8px;
+                    }
+                `}
             >
                 <div
                     style={{
@@ -71,21 +67,25 @@ css={`
                             width: '60%',
                         }}
                     >
-                        {
-                            Array(10).fill(0).map((_, index) => {
+                        {Array(10)
+                            .fill(0)
+                            .map((_, index) => {
                                 return (
-                                    <div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
+                                    <div
+                                        key={index}
+                                        style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}
+                                    >
                                         <Rectangle height={80} />
                                     </div>
                                 );
-                            })
-                        }
+                            })}
                     </div>
                 </div>
             </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.Card, Pattern.MasonryGrid, Pattern.SimpleGrid]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/client/patterns/card/Details.tsx b/pages/card/index.tsx
similarity index 63%
rename from client/patterns/card/Details.tsx
rename to pages/card/index.tsx
index 5104ac8..b1b6f68 100644
--- a/client/patterns/card/Details.tsx
+++ b/pages/card/index.tsx
@@ -1,29 +1,25 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
+import { Spacer } from '@1milligram/design';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+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';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Card}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.Card}>
+            <Head>
                 <meta name="description" content="Create a card with CSS flexbox" />
                 <meta name="og:description" content="Create a card with CSS flexbox" />
                 <meta name="twitter:description" content="Create a card with CSS flexbox" />
                 <meta name="keywords" content="css card, css flexbox" />
-            </Helmet>
+            </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="card">
     <!-- Cover -->
     <div class="card__cover">
@@ -37,22 +33,22 @@ html={`
     ...
 </div>
 `}
-css={`
-.card {
-    display: flex;
-    flex-direction: column;
-}
+                css={`
+                    .card {
+                        display: flex;
+                        flex-direction: column;
+                    }
 
-.card__cover {
-    height: 150px;
-    width: 100%;
-}
+                    .card__cover {
+                        height: 150px;
+                        width: 100%;
+                    }
 
-.card__content {
-    /* Take available height */
-    flex: 1;
-}
-`}
+                    .card__content {
+                        /* Take available height */
+                        flex: 1;
+                    }
+                `}
             >
                 <div
                     style={{
@@ -75,7 +71,9 @@ css={`
                     >
                         <Rectangle height={150} />
                         <div style={{ flex: 1, padding: '16px' }}>
-                            <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
+                            <div style={{ marginBottom: '16px' }}>
+                                <Block numberOfBlocks={15} />
+                            </div>
                             <div style={{ width: '128px' }}>
                                 <Rectangle height={32} />
                             </div>
@@ -84,8 +82,11 @@ css={`
                 </div>
             </BrowserFrame>
 
-            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.LayeredCard, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
-        </DetailsLayout>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns
+                patterns={[Pattern.CardLayout, Pattern.LayeredCard, Pattern.StackedCards, Pattern.ThreeDimensionsCard]}
+            />
+        </PatternLayout>
     );
 };
 
diff --git a/pages/centering/index.tsx b/pages/centering/index.tsx
new file mode 100644
index 0000000..9f98624
--- /dev/null
+++ b/pages/centering/index.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Centering}>
+            <Head>
+                <meta name="description" content="Center an element with CSS flexbox" />
+                <meta name="og:description" content="Center an element with CSS flexbox" />
+                <meta name="twitter:description" content="Center an element with CSS flexbox" />
+                <meta name="keywords" content="css centering, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <Circle size={64} />
+                    <div style={{ marginTop: '16px', width: '40%' }}>
+                        <Rectangle />
+                    </div>
+                    <div style={{ marginTop: '8px', width: '30%' }}>
+                        <Rectangle />
+                    </div>
+                    <div style={{ marginTop: '8px', width: '20%' }}>
+                        <Rectangle />
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/chip/index.tsx b/pages/chip/index.tsx
new file mode 100644
index 0000000..e264bab
--- /dev/null
+++ b/pages/chip/index.tsx
@@ -0,0 +1,131 @@
+import * as React from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+import { Spacer } from '@1milligram/design';
+
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const InputChip: React.FC<{}> = ({ children }) => {
+    return (
+        <div
+            style={{
+                alignItems: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                borderRadius: '9999px',
+                display: 'inline-flex',
+                justifyContent: 'center',
+                padding: '4px 8px',
+            }}
+        >
+            <div style={{ flex: 1, marginRight: '4px' }}>{children}</div>
+            <button
+                style={{
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    cursor: 'pointer',
+                    height: '16px',
+                    position: 'relative',
+                    width: '16px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        height: '1px',
+                        left: 0,
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translate(0%, -50%) rotate(45deg)',
+                        width: '100%',
+                    }}
+                />
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        height: '100%',
+                        left: '50%',
+                        position: 'absolute',
+                        top: 0,
+                        transform: 'translate(-50%, 0%) rotate(45deg)',
+                        width: '1px',
+                    }}
+                />
+            </button>
+        </div>
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Chip}>
+            <Head>
+                <meta name="description" content="Create a chip component with CSS flexbox" />
+                <meta name="og:description" content="Create a chip component with CSS flexbox" />
+                <meta name="twitter:description" content="Create a chip component with CSS flexbox" />
+                <meta name="keywords" content="css chip, css flexbox, css tag" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                You can use a{' '}
+                <Link href="/close-button">
+                    <a>close button</a>
+                </Link>{' '}
+                to remove a chip.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="chip">
+    <!-- Content -->
+    <div class="chip__content">
+        ...
+    </div>
+
+    <!-- The close button -->
+    <!-- See https://csslayout.io/patterns/close-button -->
+    ...
+</div>
+`}
+                css={`
+                    .chip {
+                        /* Center the content */
+                        align-items: center;
+                        display: inline-flex;
+                        justify-content: center;
+
+                        /* Background color */
+                        background-color: rgba(0, 0, 0, 0.1);
+
+                        /* Rounded border */
+                        border-radius: 9999px;
+
+                        /* Spacing */
+                        padding: 4px 8px;
+                    }
+
+                    .chip__content {
+                        margin-right: 4px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <InputChip>CSS</InputChip>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.CloseButton]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/circular-navigation/Details.tsx b/pages/circular-navigation/index.tsx
similarity index 51%
rename from client/patterns/circular-navigation/Details.tsx
rename to pages/circular-navigation/index.tsx
index 5f55b75..0703484 100644
--- a/client/patterns/circular-navigation/Details.tsx
+++ b/pages/circular-navigation/index.tsx
@@ -1,13 +1,8 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Square from '../../placeholders/Square';
 
@@ -49,16 +44,15 @@ const Details: React.FC<{}> = () => {
     const numItems = 6;
 
     return (
-        <DetailsLayout pattern={Pattern.CircularNavigation}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.CircularNavigation}>
+            <Head>
                 <meta name="description" content="Create a circular navigation with CSS flexbox" />
                 <meta name="og:description" content="Create a circular navigation with CSS flexbox" />
                 <meta name="twitter:description" content="Create a circular navigation with CSS flexbox" />
                 <meta name="keywords" content="css circular navigation, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            </Head>
+            <BrowserFrame
+                html={`
 <div class="navigation">
     <!-- The trigger element that will show all circles when user clicks it -->
     ...
@@ -75,75 +69,76 @@ html={`
     ...
 </div>
 `}
-css={`
-.navigation {
-    position: relative;
-}
+                css={`
+                    .navigation {
+                        position: relative;
+                    }
 
-.navigation__circle {
-    /* Position */
-    position: absolute;
-    top: 0;
-    
-    /*
+                    .navigation__circle {
+                        /* Position */
+                        position: absolute;
+                        top: 0;
+
+                        /*
     80px is the distance from the item to the trigger element.
     Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
     in case you want to have a total of 6 menu items.
     The formulation is 360 / numberOfItems * indexOfItem
     */
-    transform: rotate(0deg) translateX(-80px);
+                        transform: rotate(0deg) translateX(-80px);
 
-    /* Must have the same size as the trigger element */
-    height: 32px;
-    width: 32px;
-}
+                        /* Must have the same size as the trigger element */
+                        height: 32px;
+                        width: 32px;
+                    }
 
-.navigation__content {
-    /*
+                    .navigation__content {
+                        /*
     Rotate it to make it displayed vertically
     Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
     in case you want to have a total of 6 menu items.
     The formulation is -(360 / numberOfItems * indexOfItem)
     */
-    transform: rotate(-0deg);
+                        transform: rotate(-0deg);
 
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-}
-`}
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ position: 'relative' }}>
-                            <div style={{ height: '32px', width: '32px' }}>
-                                <Square />
-                            </div>
-                            {
-                                Array(numItems).fill(0).map((_, i) => {
-                                    return (
-                                        <CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
-                                    );
-                                })
-                            }
+                    <div style={{ position: 'relative' }}>
+                        <div style={{ height: '32px', width: '32px' }}>
+                            <Square />
                         </div>
+                        {Array(numItems)
+                            .fill(0)
+                            .map((_, i) => {
+                                return (
+                                    <CircularItem key={i} degree={(360 / numItems) * i}>
+                                        {i + 1}
+                                    </CircularItem>
+                                );
+                            })}
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/close-button/index.tsx b/pages/close-button/index.tsx
new file mode 100644
index 0000000..2a2224f
--- /dev/null
+++ b/pages/close-button/index.tsx
@@ -0,0 +1,131 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.CloseButton}>
+            <Head>
+                <meta name="description" content="Create a close button with CSS flexbox" />
+                <meta name="og:description" content="Create a close button with CSS flexbox" />
+                <meta name="twitter:description" content="Create a close button with CSS flexbox" />
+                <meta name="keywords" content="css close button, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<button class="button">
+    <div class="button__line button__line--first"></div>
+
+    <div class="button__line button__line--second"></div>
+</button>
+`}
+                css={`
+                    .button {
+                        /* Reset */
+                        background-color: transparent;
+                        border-color: transparent;
+
+                        /* Cursor */
+                        cursor: pointer;
+
+                        /* Size */
+                        height: 32px;
+                        width: 32px;
+
+                        /* Used to position the inner */
+                        position: relative;
+                    }
+
+                    .button__line {
+                        /* Background color */
+                        background-color: rgba(0, 0, 0, 0.3);
+
+                        /* Position */
+                        position: absolute;
+
+                        /* Size */
+                        height: 1px;
+                        width: 100%;
+                    }
+
+                    .button__line--first {
+                        /* Position */
+                        left: 0px;
+                        top: 50%;
+                        transform: translate(0%, -50%) rotate(45deg);
+
+                        /* Size */
+                        height: 1px;
+                        width: 100%;
+                    }
+
+                    .button__line--second {
+                        /* Position */
+                        left: 50%;
+                        top: 0px;
+                        transform: translate(-50%, 0%) rotate(45deg);
+
+                        /* Size */
+                        height: 100%;
+                        width: 1px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <button
+                        style={{
+                            backgroundColor: 'transparent',
+                            borderColor: 'transparent',
+                            cursor: 'pointer',
+                            height: '32px',
+                            position: 'relative',
+                            width: '32px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '1px',
+                                left: 0,
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(0%, -50%) rotate(45deg)',
+                                width: '100%',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '100%',
+                                left: '50%',
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(-50%, 0%) rotate(45deg)',
+                                width: '1px',
+                            }}
+                        />
+                    </button>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/color-swatch/index.tsx b/pages/color-swatch/index.tsx
new file mode 100644
index 0000000..e3df502
--- /dev/null
+++ b/pages/color-swatch/index.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.ColorSwatch}>
+            <Head>
+                <meta name="description" content="Create a color swatch with CSS flexbox" />
+                <meta name="og:description" content="Create a color swatch with CSS flexbox" />
+                <meta name="twitter:description" content="Create a color swatch with CSS flexbox" />
+                <meta name="keywords" content="css color swatch, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="swatch">
+    <div class="swatch__item" style="background-color: ..."></div>
+
+    <!-- Repeat other items -->
+    ...
+</div>
+`}
+                css={`
+                    .swatch {
+                        /* Wrap the items */
+                        display: flex;
+                        flex-wrap: wrap;
+                    }
+                    .swatch__item {
+                        /* Rounded border */
+                        border-radius: 9999px;
+                        height: 1.5rem;
+                        width: 1.5rem;
+
+                        /* Space between items */
+                        margin: 0.5rem;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '0.5rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                        }}
+                    >
+                        {Array(9)
+                            .fill(0)
+                            .map((_, index) => (
+                                <div
+                                    key={index}
+                                    style={{
+                                        backgroundColor: `rgba(0, 0, 0, 0.${index + 1})`,
+                                        borderRadius: '9999px',
+                                        height: '1.5rem',
+                                        margin: '0.5rem',
+                                        width: '1.5rem',
+                                    }}
+                                />
+                            ))}
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/concave-corners/index.tsx b/pages/concave-corners/index.tsx
new file mode 100644
index 0000000..dcf9565
--- /dev/null
+++ b/pages/concave-corners/index.tsx
@@ -0,0 +1,134 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.ConcaveCorners}>
+            <Head>
+                <meta name="description" content="Create concave corners with CSS" />
+                <meta name="og:description" content="Create concave corners with CSS" />
+                <meta name="twitter:description" content="Create concave corners with CSS" />
+                <meta name="keywords" content="css border radius, css concave border radius, css concave corners" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="concave-corners">
+    <!-- The top-left corner -->
+    <div class="concave-corners__corner concave-corners__corner--tl"></div>
+
+    <!-- The top-right corner -->
+    <div class="concave-corners__corner concave-corners__corner--tr"></div>
+
+    <!-- The bottom-left corner -->
+    <div class="concave-corners__corner concave-corners__corner--bl"></div>
+
+    <!-- The bottom-right corner -->
+    <div class="concave-corners__corner concave-corners__corner--br"></div>
+
+    <!-- Content -->
+    ...
+</div>
+`}
+                css={`
+                    :root {
+                        --concave-corners-background: rgba(0, 0, 0, 0.3);
+                        --concave-corners-size: 1rem;
+                    }
+
+                    .concave-corners {
+                        background-color: var(--concave-corners-background);
+
+                        /* Used to position the corners */
+                        position: relative;
+
+                        /* Misc */
+                        height: 100%;
+                    }
+
+                    .concave-corners__corner {
+                        /* Absolute position */
+                        position: absolute;
+
+                        /* Size */
+                        height: var(--concave-corners-size);
+                        width: var(--concave-corners-size);
+
+                        background: #fff;
+                    }
+
+                    .concave-corners__corner--tl {
+                        /* Position */
+                        left: 0;
+                        top: 0;
+
+                        /* Border radius */
+                        border-radius: 0 0 var(--concave-corners-size) 0;
+                    }
+
+                    .concave-corners__corner--tr {
+                        /* Position */
+                        right: 0;
+                        top: 0;
+
+                        /* Border radius */
+                        border-radius: 0 0 0 var(--concave-corners-size);
+                    }
+
+                    .concave-corners__corner--bl {
+                        /* Position */
+                        bottom: 0;
+                        left: 0;
+
+                        /* Border radius */
+                        border-radius: 0 var(--concave-corners-size) 0 0;
+                    }
+
+                    .concave-corners__corner--br {
+                        /* Position */
+                        bottom: 0;
+                        right: 0;
+
+                        /* Border radius */
+                        border-radius: var(--concave-corners-size) 0 0 0;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '1rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '8rem',
+                            width: '16rem',
+                        }}
+                    >
+                        <div className="concave-corners">
+                            <div className="concave-corners__corner concave-corners__corner--tl" />
+                            <div className="concave-corners__corner concave-corners__corner--tr" />
+                            <div className="concave-corners__corner concave-corners__corner--bl" />
+                            <div className="concave-corners__corner concave-corners__corner--br" />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.InvertedCorners]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/cookie-banner/index.tsx b/pages/cookie-banner/index.tsx
new file mode 100644
index 0000000..f49a4da
--- /dev/null
+++ b/pages/cookie-banner/index.tsx
@@ -0,0 +1,92 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.CookieBanner}>
+            <Head>
+                <meta name="description" content="Create a cookie banner with CSS flexbox" />
+                <meta name="og:description" content="Create a cookie banner with CSS flexbox" />
+                <meta name="twitter:description" content="Create a cookie banner with CSS flexbox" />
+                <meta name="keywords" content="css cookie banner, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="banner">
+    <!-- Tells visitors that the website uses cookie -->
+    <div class="banner__content">
+        ...
+    </div>
+
+    <!-- Close button -->
+    ...
+</div>
+`}
+                css={`
+                    .banner {
+                        /* Banner is displayed at the bottom */
+                        bottom: 0;
+                        left: 0;
+                        position: fixed;
+                        width: 100%;
+
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                    .banner__content {
+                        /* Take available width */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        position: 'relative',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                            bottom: 0,
+                            display: 'flex',
+                            left: 0,
+                            padding: '8px',
+                            position: 'absolute',
+                            width: '100%',
+                        }}
+                    >
+                        <div style={{ flex: 1, marginRight: '12px' }}>
+                            <Block numberOfBlocks={5} />
+                        </div>
+                        <div style={{ width: '96px' }}>
+                            <Rectangle height={32} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/corner-ribbon/Details.tsx b/pages/corner-ribbon/index.tsx
similarity index 55%
rename from client/patterns/corner-ribbon/Details.tsx
rename to pages/corner-ribbon/index.tsx
index 4294e43..702b040 100644
--- a/client/patterns/corner-ribbon/Details.tsx
+++ b/pages/corner-ribbon/index.tsx
@@ -1,30 +1,24 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
+import Head from 'next/head';
+import Link from 'next/link';
+import { Heading, Spacer } from '@1milligram/design';
 
-import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.CornerRibbon}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.CornerRibbon}>
+            <Head>
                 <meta name="description" content="Create a corner ribbon with CSS flexbox" />
                 <meta name="og:description" content="Create a corner ribbon with CSS flexbox" />
                 <meta name="twitter:description" content="Create a corner ribbon with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css ribbon" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            </Head>
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- The container -->
     <div class="container__wrapper">
@@ -35,98 +29,102 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    position: relative;
-}
+                css={`
+                    .container {
+                        position: relative;
+                    }
 
-.container__wrapper {
-    /* Displayed at the top left corner */
-    left: 0px;
-    position: absolute;
-    top: 0px;
+                    .container__wrapper {
+                        /* Displayed at the top left corner */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
 
-    /* Size */
-    height: 100px;
-    width: 100px;
+                        /* Size */
+                        height: 100px;
+                        width: 100px;
 
-    /* Hide the part of its children which is displayed outside */
-    overflow: hidden;
-}
+                        /* Hide the part of its children which is displayed outside */
+                        overflow: hidden;
+                    }
 
-.container__ribbon {
-    /* Position */
-    left: -64px;
-    position: absolute;
-    top: 32px;
+                    .container__ribbon {
+                        /* Position */
+                        left: -64px;
+                        position: absolute;
+                        top: 32px;
 
-    /* Size */
-    height: 24px;
-    width: 206px;
+                        /* Size */
+                        height: 24px;
+                        width: 206px;
 
-    /* Displayed diagonally */
-    transform: rotate(-45deg);
+                        /* Displayed diagonally */
+                        transform: rotate(-45deg);
 
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
+                        /* Background color */
+                        background-color: rgba(0, 0, 0, 0.3);
 
-    /* Centerize the text content */
-    text-align: center;
-}
-`}
+                        /* Centerize the text content */
+                        text-align: center;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            height: '256px',
+                            position: 'relative',
+                            width: '256px',
                         }}
                     >
                         <div
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                height: '256px',
-                                position: 'relative',
-                                width: '256px',
+                                height: '100px',
+                                left: 0,
+                                overflow: 'hidden',
+                                position: 'absolute',
+                                top: 0,
+                                width: '100px',
                             }}
                         >
                             <div
                                 style={{
-                                    height: '100px',
-                                    left: 0,
-                                    overflow: 'hidden',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    height: '24px',
+                                    left: '-64px',
                                     position: 'absolute',
-                                    top: 0,
-                                    width: '100px',
+                                    textAlign: 'center',
+                                    top: '32px',
+                                    transform: 'rotate(-45deg)',
+                                    width: '206px',
                                 }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                        height: '24px',
-                                        left: '-64px',
-                                        position: 'absolute',
-                                        textAlign: 'center',
-                                        top: '32px',
-                                        transform: 'rotate(-45deg)',
-                                        width: '206px',
-                                    }}
-                                />
-                            </div>
+                            />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
 
             <section>
-                <Heading title="Use cases" />
+                <Heading level={2}>Use cases</Heading>
 
-                <div style={{ padding: '32px' }}>
+                <div style={{ padding: '2rem' }}>
                     <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                        You can add a ribbon to a <Link to='/patterns/pricing-table'> pricing table</Link> to
-                        indicate the most popular option.
+                        You can add a ribbon to a{' '}
+                        <Link href="/pricing-table">
+                            <a>pricing table</a>
+                        </Link>{' '}
+                        to indicate the most popular option.
                     </div>
 
                     <div
@@ -197,8 +195,9 @@ css={`
                 </div>
             </section>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.FixedAtCorner, Pattern.Ribbon]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/curved-background/index.tsx b/pages/curved-background/index.tsx
new file mode 100644
index 0000000..c44b463
--- /dev/null
+++ b/pages/curved-background/index.tsx
@@ -0,0 +1,63 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.CurvedBackground}>
+            <Head>
+                <meta name="description" content="Create an element with curved background" />
+                <meta name="og:description" content="Create an element with curved background" />
+                <meta name="twitter:description" content="Create an element with curved background" />
+                <meta name="keywords" content="css border radius, css curved background" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        /* Background color */
+                        background-color: rgba(0, 0, 0, 0.3);
+
+                        /* You can use gradient background color such as
+    background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */
+
+                        /* Curved corners */
+                        border-bottom-left-radius: 50% 40%;
+                        border-bottom-right-radius: 50% 40%;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            borderBottomLeftRadius: '50% 40%',
+                            borderBottomRightRadius: '50% 40%',
+                            height: '50%',
+                            width: '100%',
+                        }}
+                    />
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.DiagonalSection]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/custom-checkbox-button/index.tsx b/pages/custom-checkbox-button/index.tsx
new file mode 100644
index 0000000..1f5fb96
--- /dev/null
+++ b/pages/custom-checkbox-button/index.tsx
@@ -0,0 +1,179 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+interface CheckboxProps {
+    isChecked: boolean;
+    value: string;
+}
+
+const Details: React.FC<{}> = () => {
+    const Checkbox: React.FC<CheckboxProps> = ({ isChecked, value, children }) => {
+        const [checked, setChecked] = React.useState(isChecked);
+        const click = () => setChecked((c) => !c);
+
+        return (
+            <label
+                htmlFor="custom-checkbox-button"
+                style={{
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                }}
+            >
+                <input
+                    id="custom-checkbox-button"
+                    type="checkbox"
+                    name="option"
+                    value={value}
+                    checked={checked}
+                    style={{ display: 'none' }}
+                    onChange={click}
+                />
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        marginRight: '8px',
+                        padding: '4px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: checked ? '#00449E' : 'transparent',
+                            borderRadius: '4px',
+                            height: '16px',
+                            width: '16px',
+                        }}
+                    />
+                </div>
+                {children}
+            </label>
+        );
+    };
+
+    return (
+        <PatternLayout pattern={Pattern.CustomCheckboxButton}>
+            <Head>
+                <meta name="description" content="Create a custom checkbox button with CSS flexbox" />
+                <meta name="og:description" content="Create a custom checkbox button with CSS flexbox" />
+                <meta name="twitter:description" content="Create a custom checkbox button with CSS flexbox" />
+                <meta name="keywords" content="css checkbox, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<label class="label">
+    <!-- The real checkbox -->
+    <input type="checkbox" class="label__input" />
+
+    <!-- The fake square -->
+    <div class="label__square">
+        <!-- The inner square -->
+        <div class="label__checkbox label__square--selected"></div>
+    </div>
+
+    <!-- The text -->
+    ...
+</div>
+`}
+                css={`
+                    .label {
+                        /* Center the content horizontally */
+                        align-items: center;
+                        display: inline-flex;
+
+                        /* Cursor */
+                        cursor: pointer;
+                    }
+
+                    .label__input {
+                        /* Hide it */
+                        display: none;
+                    }
+
+                    .label__square {
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 4px;
+
+                        /* Spacing */
+                        margin-right: 8px;
+                        padding: 4px;
+                    }
+
+                    .label__checkbox {
+                        background-color: transparent;
+                        border-radius: 4px;
+                        height: 16px;
+                        width: 16px;
+                    }
+
+                    .label__checkbox--selected {
+                        /* For selected checkbox */
+                        background-color: #00449e;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '200px' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'inline-flex',
+                                marginBottom: '16px',
+                            }}
+                        >
+                            <Checkbox value="1" isChecked={false}>
+                                <div style={{ width: '100px' }}>
+                                    <Rectangle />
+                                </div>
+                            </Checkbox>
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'inline-flex',
+                                marginBottom: '16px',
+                            }}
+                        >
+                            <Checkbox value="2" isChecked={true}>
+                                <div style={{ width: '200px' }}>
+                                    <Rectangle />
+                                </div>
+                            </Checkbox>
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'inline-flex',
+                            }}
+                        >
+                            <Checkbox value="3" isChecked={false}>
+                                <div style={{ width: '150px' }}>
+                                    <Rectangle />
+                                </div>
+                            </Checkbox>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/custom-radio-button/index.tsx b/pages/custom-radio-button/index.tsx
new file mode 100644
index 0000000..a07bc52
--- /dev/null
+++ b/pages/custom-radio-button/index.tsx
@@ -0,0 +1,182 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+interface RadioProps {
+    value: string;
+}
+
+const Details: React.FC<{}> = () => {
+    const [selectedValue, setSelectedValue] = React.useState('1');
+
+    const Radio: React.FC<RadioProps> = ({ value, children }) => {
+        const click = () => setSelectedValue(value);
+
+        return (
+            <label
+                htmlFor="custom-radio-button"
+                style={{
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                }}
+            >
+                <input
+                    id="custom-radio-button"
+                    type="radio"
+                    name="option"
+                    value={value}
+                    style={{ display: 'none' }}
+                    onChange={click}
+                />
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        marginRight: '8px',
+                        padding: '4px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
+                            borderRadius: '9999px',
+                            height: '16px',
+                            width: '16px',
+                        }}
+                    />
+                </div>
+                {children}
+            </label>
+        );
+    };
+
+    return (
+        <PatternLayout pattern={Pattern.CustomRadioButton}>
+            <Head>
+                <meta name="description" content="Create a custom radio button with CSS flexbox" />
+                <meta name="og:description" content="Create a custom radio button with CSS flexbox" />
+                <meta name="twitter:description" content="Create a custom radio button with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css radio" />
+            </Head>
+            <BrowserFrame
+                html={`
+<label class="label">
+    <!-- The real radio -->
+    <input type="radio" class="label__input" />
+
+    <!-- The fake circle -->
+    <div class="label__circle">
+        <!-- The inner circle -->
+        <div class="label__radio label__radio--selected"></div>
+    </div>
+
+    <!-- The text -->
+    ...
+</div>
+`}
+                css={`
+                    .label {
+                        /* Center the content horizontally */
+                        align-items: center;
+                        display: inline-flex;
+
+                        /* Cursor */
+                        cursor: pointer;
+                    }
+
+                    .label__input {
+                        /* Hide it */
+                        display: none;
+                    }
+
+                    .label__circle {
+                        /* Rounded border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 9999px;
+
+                        /* Spacing */
+                        margin-right: 8px;
+                        padding: 4px;
+                    }
+
+                    .label__radio {
+                        /* Rounded border */
+                        border-radius: 9999px;
+                        height: 16px;
+                        width: 16px;
+
+                        /* For not selected radio */
+                        background-color: transparent;
+                    }
+
+                    .label__radio--selected {
+                        /* For selected radio */
+                        background-color: #00449e;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '200px' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'inline-flex',
+                                marginBottom: '16px',
+                            }}
+                        >
+                            <Radio value="1">
+                                <div style={{ width: '100px' }}>
+                                    <Rectangle />
+                                </div>
+                            </Radio>
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'inline-flex',
+                                marginBottom: '16px',
+                            }}
+                        >
+                            <Radio value="2">
+                                <div style={{ width: '200px' }}>
+                                    <Rectangle />
+                                </div>
+                            </Radio>
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'inline-flex',
+                            }}
+                        >
+                            <Radio value="3">
+                                <div style={{ width: '150px' }}>
+                                    <Rectangle />
+                                </div>
+                            </Radio>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/diagonal-section/index.tsx b/pages/diagonal-section/index.tsx
new file mode 100644
index 0000000..dc943b0
--- /dev/null
+++ b/pages/diagonal-section/index.tsx
@@ -0,0 +1,101 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.DiagonalSection}>
+            <Head>
+                <meta name="description" content="Create a diagonal section with CSS" />
+                <meta name="og:description" content="Create a diagonal section with CSS" />
+                <meta name="twitter:description" content="Create a diagonal section with CSS" />
+                <meta name="keywords" content="css diagonal section, css transform skew" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The diagonal area -->
+    <div class="container__diagonal"></div>
+
+    <!-- Content -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        /* Used to position the diagonal area */
+                        position: relative;
+                    }
+
+                    .container__diagonal {
+                        /* Absolute position */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
+
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+
+                        /* Create diagonal sides */
+                        transform: skewY(-5deg);
+
+                        /* Background color */
+                        background-color: rgba(0, 0, 0, 0.3);
+
+                        /* Displayed under the main content */
+                        z-index: -1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '200px',
+                            justifyContent: 'center',
+                            position: 'relative',
+                            width: '75%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '100%',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'skewY(-5deg)',
+                                width: '100%',
+                                zIndex: -1,
+                            }}
+                        />
+                        <div style={{ width: '60%' }}>
+                            <Block backgroundColor="#fff" justify="center" numberOfBlocks={5} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.CurvedBackground]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/docked-at-corner/Details.tsx b/pages/docked-at-corner/index.tsx
similarity index 62%
rename from client/patterns/docked-at-corner/Details.tsx
rename to pages/docked-at-corner/index.tsx
index 583e3d1..c7a7b45 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/pages/docked-at-corner/index.tsx
@@ -1,30 +1,24 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
+import { Heading, Spacer } from '@1milligram/design';
 
-import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.DockedAtCorner}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.DockedAtCorner}>
+            <Head>
                 <meta name="description" content="Dock an element at corner with CSS" />
                 <meta name="og:description" content="Dock an element at corner with CSS" />
                 <meta name="twitter:description" content="Dock an element at corner with CSS" />
                 <meta name="keywords" content="css docked, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            </Head>
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Docked at the top right corner -->
     <div class="container__docker">
@@ -34,62 +28,64 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    position: relative;
-}
+                css={`
+                    .container {
+                        position: relative;
+                    }
 
-.container__docker {
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translate(50%, -50%);
+                    .container__docker {
+                        position: absolute;
+                        right: 0;
+                        top: 0;
+                        transform: translate(50%, -50%);
 
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-`}
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '8px',
+                            padding: '16px',
+                            position: 'relative',
+                            width: '128px',
                         }}
                     >
+                        <Rectangle />
                         <div
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '8px',
-                                padding: '16px',
-                                position: 'relative',
-                                width: '128px',
+                                backgroundColor: '#00449E',
+                                borderRadius: '9999px',
+                                height: '32px',
+                                position: 'absolute',
+                                right: 0,
+                                top: 0,
+                                transform: 'translate(50%, -50%)',
+                                width: '32px',
                             }}
-                        >
-                            <Rectangle />
-                            <div
-                                style={{
-                                    backgroundColor: '#00449E',
-                                    borderRadius: '9999px',
-                                    height: '32px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: 0,
-                                    transform: 'translate(50%, -50%)',
-                                    width: '32px',
-                                }}
-                            />
-                        </div>
+                        />
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+
             <section>
-                <Heading title="Use cases" />
+                <Heading level={2}>Use cases</Heading>
 
                 <div style={{ padding: '32px' }}>
                     <div
@@ -156,8 +152,9 @@ css={`
                     </div>
                 </div>
             </section>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.PresenceIndicator]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/client/patterns/dot-leader/Details.tsx b/pages/dot-leader/index.tsx
similarity index 52%
rename from client/patterns/dot-leader/Details.tsx
rename to pages/dot-leader/index.tsx
index dcb05ad..3ca9b7b 100644
--- a/client/patterns/dot-leader/Details.tsx
+++ b/pages/dot-leader/index.tsx
@@ -1,31 +1,25 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
+import { Heading, Spacer } from '@1milligram/design';
 
-import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.DotLeader}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.DotLeader}>
+            <Head>
                 <meta name="description" content="Create dot leaders with CSS flexbox" />
                 <meta name="og:description" content="Create dot leaders with CSS flexbox" />
                 <meta name="twitter:description" content="Create dot leaders with CSS flexbox" />
                 <meta name="keywords" content="css dot leader, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            </Head>
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Left side -->
     <div>...</div>
@@ -37,80 +31,87 @@ html={`
     <div>...</div>
 </div>
 `}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
+                css={`
+                    .container {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
 
-.container__dots {
-    /* Bottom border */
-    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
+                    .container__dots {
+                        /* Bottom border */
+                        border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
 
-    /* Take remaining width */
-    flex: 1;
+                        /* Take remaining width */
+                        flex: 1;
 
-    /* Spacing */
-    margin: 0px 4px;
-}
-`}
+                        /* Spacing */
+                        margin: 0px 4px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
                 >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div style={{ width: '400px' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    marginBottom: '8px',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ width: '60%' }}><Rectangle /></div>
-                                <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
-                                <Circle />
+                    <div style={{ width: '400px' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                marginBottom: '8px',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ width: '60%' }}>
+                                <Rectangle />
                             </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    marginBottom: '8px',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ width: '40%' }}><Rectangle /></div>
-                                <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
-                                <Circle />
+                            <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
+                            <Circle />
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                marginBottom: '8px',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ width: '40%' }}>
+                                <Rectangle />
                             </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ width: '30%' }}><Rectangle /></div>
-                                <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
-                                <Circle />
+                            <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
+                            <Circle />
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ width: '30%' }}>
+                                <Rectangle />
                             </div>
+                            <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
+                            <Circle />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
 
             <section>
-                <Heading title="Use cases" />
+                <Heading level={2}>Use cases</Heading>
 
                 <div style={{ padding: '32px' }}>
                     <div style={{ marginBottom: '16px', width: '60%' }}>
@@ -171,8 +172,9 @@ css={`
                     </div>
                 </div>
             </section>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.Menu, Pattern.PropertyList, Pattern.SplitNavigation]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/dot-navigation/index.tsx b/pages/dot-navigation/index.tsx
new file mode 100644
index 0000000..cec851e
--- /dev/null
+++ b/pages/dot-navigation/index.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+interface DotProps {
+    index: number;
+}
+
+const Details: React.FC<{}> = () => {
+    const [activeItem, setActiveItem] = React.useState(0);
+
+    const Dot: React.FC<DotProps> = ({ index }) => {
+        const isActive = index === activeItem;
+        const click = () => setActiveItem(index);
+        return (
+            <li
+                style={{
+                    backgroundColor: isActive ? 'rgba(0, 0, 0, 0.3)' : '',
+                    border: isActive ? 'none' : '1px solid rgba(0, 0, 0, 0.3)',
+                    borderRadius: '9999px',
+                    cursor: 'pointer',
+                    height: '12px',
+                    margin: '0 4px',
+                    width: '12px',
+                }}
+                onClick={click}
+            />
+        );
+    };
+
+    return (
+        <PatternLayout pattern={Pattern.DotNavigation}>
+            <Head>
+                <meta name="description" content="Create dot navigation with CSS flexbox" />
+                <meta name="og:description" content="Create dot navigation with CSS flexbox" />
+                <meta name="twitter:description" content="Create dot navigation with CSS flexbox" />
+                <meta name="keywords" content="css dot navigation, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<ul class="dots">
+    <li class="dots__item"></li>
+
+    <!-- Repeat other dots -->
+    ...
+</div>
+`}
+                css={`
+                    .dots {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Reset styles */
+                        list-style-type: none;
+                        margin: 0;
+                        padding: 0;
+                    }
+
+                    .dots__item {
+                        /* Rounded border */
+                        border-radius: 9999px;
+                        height: 12px;
+                        width: 12px;
+
+                        /* Active dot */
+                        background-color: rgba(0, 0, 0, 0.3);
+
+                        /* Inactive dot */
+                        background-color: transparent;
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+
+                        /* OPTIONAL: Spacing between dots */
+                        margin: 0 4px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <ul
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            listStyleType: 'none',
+                            margin: 0,
+                            padding: 0,
+                        }}
+                    >
+                        <Dot index={0} />
+                        <Dot index={1} />
+                        <Dot index={2} />
+                        <Dot index={3} />
+                    </ul>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/drawer/index.tsx b/pages/drawer/index.tsx
new file mode 100644
index 0000000..f2e67a2
--- /dev/null
+++ b/pages/drawer/index.tsx
@@ -0,0 +1,106 @@
+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.Drawer}>
+            <Head>
+                <meta name="description" content="Create a drawer navigation with CSS" />
+                <meta name="og:description" content="Create a drawer navigation with CSS" />
+                <meta name="twitter:description" content="Create a drawer navigation with CSS" />
+                <meta name="keywords" content="css drawer, css off-canvas" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>This pattern is also known as off-canvas.</div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Backdrop -->
+    <div class="container__overlay"></div>
+
+    <!-- Sidebar -->
+    <div class="container__sidebar">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Container takes full size */
+                        height: 100%;
+                        left: 0;
+                        position: fixed;
+                        top: 0;
+                        width: 100%;
+
+                        z-index: 9999;
+                    }
+
+                    .container__overlay {
+                        /* Take full size */
+                        height: 100%;
+                        left: 0;
+                        position: fixed;
+                        top: 0;
+                        width: 100%;
+
+                        /* User still can see the content of main page */
+                        background-color: rgba(0, 0, 0, 0.5);
+
+                        z-index: -1;
+                    }
+
+                    .container__sidebar {
+                        /* Take full height */
+                        height: 100%;
+                        left: 0;
+                        position: fixed;
+                        top: 0;
+                        width: 200px;
+
+                        /* Background */
+                        background-color: #fff;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            height: '100%',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '100%',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: '#fff',
+                            height: '100%',
+                            left: 0,
+                            padding: '16px',
+                            position: 'absolute',
+                            top: 0,
+                            width: '250px',
+                        }}
+                    >
+                        <Block numberOfBlocks={20} />
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/drop-area/index.tsx b/pages/drop-area/index.tsx
new file mode 100644
index 0000000..5df7f1d
--- /dev/null
+++ b/pages/drop-area/index.tsx
@@ -0,0 +1,69 @@
+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/pages/drop-cap/index.tsx b/pages/drop-cap/index.tsx
new file mode 100644
index 0000000..61e2dcb
--- /dev/null
+++ b/pages/drop-cap/index.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import { Pattern } from '../../constants/Pattern';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.DropCap}>
+            <Head>
+                <meta name="description" content="Create a drop cap with CSS" />
+                <meta name="og:description" content="Create a drop cap with CSS" />
+                <meta name="twitter:description" content="Create a drop cap with CSS" />
+                <meta name="keywords" content="css drop cap" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    ...
+</div>
+`}
+                css={`
+                    /* Styles for the first letter */
+                    .container:first-letter {
+                        /* Display at the left */
+                        float: left;
+                        line-height: 1;
+
+                        /* Spacing */
+                        margin: 0 8px 0 0;
+                        padding: 0 8px;
+
+                        /* Optional */
+                        font-size: 64px;
+                        font-weight: 700;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '256px' }}>
+                        <div className="p-drop-cap">
+                            Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
+                            of a document written in a markup language like HTML. CSS is a cornerstone technology of the
+                            World Wide Web, alongside HTML and JavaScript.
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/dropdown/index.tsx b/pages/dropdown/index.tsx
new file mode 100644
index 0000000..942b630
--- /dev/null
+++ b/pages/dropdown/index.tsx
@@ -0,0 +1,144 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Dropdown}>
+            <Head>
+                <meta name="description" content="Create a dropdown with CSS" />
+                <meta name="og:description" content="Create a dropdown with CSS" />
+                <meta name="twitter:description" content="Create a dropdown with CSS" />
+                <meta name="keywords" content="css dropdown, css menu" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Move the mouse over the button to see the dropdown.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="dropdown">
+    <!-- The trigger element -->
+    <button>...</button>
+
+    <!-- The content -->
+    <div class="dropdown__content">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .dropdown {
+                        position: relative;
+                    }
+
+                    /* Hide the dropdown's content by default */
+                    .dropdown__content {
+                        display: none;
+
+                        /* Position it right below the trigger element */
+                        left: 0;
+                        paddingtop: 4px;
+                        position: absolute;
+                        top: 100%;
+
+                        /* It should be on the top of other elements */
+                        background-color: #fff;
+                        zindex: 9999;
+
+                        /* Size */
+                        height: 200px;
+                        width: 200px;
+                    }
+
+                    /* Show the content when hover on the container */
+                    .dropdown:hover .dropdown__content {
+                        display: block;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        className="p-dropdown"
+                        style={{
+                            position: 'relative',
+                        }}
+                    >
+                        <button
+                            style={{
+                                alignItems: 'center',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                height: '32px',
+                                width: '128px',
+                            }}
+                        >
+                            <span style={{ flex: 1, marginRight: '8px' }}>
+                                <Rectangle />
+                            </span>
+                            <Triangle size={8} corner="b" />
+                        </button>
+
+                        <div
+                            className="p-dropdown-content"
+                            style={{
+                                backgroundColor: '#FFF',
+                                height: '200px',
+                                left: 0,
+                                paddingTop: '4px',
+                                position: 'absolute',
+                                top: '100%',
+                                width: '200px',
+                                zIndex: 9999,
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    height: '100%',
+                                    justifyContent: 'center',
+                                    padding: '16px',
+                                    width: '100%',
+                                }}
+                            >
+                                <Block numberOfBlocks={10} justify="center" />
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        style={{
+                            marginTop: '16px',
+                            width: '256px',
+                        }}
+                    >
+                        <Block numberOfBlocks={20} justify="center" />
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/fading-long-section/index.tsx b/pages/fading-long-section/index.tsx
new file mode 100644
index 0000000..a96c267
--- /dev/null
+++ b/pages/fading-long-section/index.tsx
@@ -0,0 +1,99 @@
+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.FadingLongSection}>
+            <Head>
+                <meta name="description" content="Fading long section to indicate there is more content" />
+                <meta name="og:description" content="Fading long section to indicate there is more content" />
+                <meta name="twitter:description" content="Fading long section to indicate there is more content" />
+                <meta name="keywords" content="css fading overflow, css linear gradient" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Fading a long section to indicate there is more content.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="container"
+    <!-- Main content -->
+    <div class="container__content">
+        ...
+    </div>
+
+    <!-- The faded element -->
+    <div class="container__fading"></div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Used to position the faded element */
+                        position: relative;
+                    }
+
+                    .container__content {
+                        /* Height */
+                        height: 200px;
+
+                        /* Scrollable */
+                        overflow-y: scroll;
+                    }
+
+                    .container__fading {
+                        /* Displayed at the bottom */
+                        bottom: 0;
+                        left: 0;
+                        position: absolute;
+
+                        /* Size */
+                        height: 30px;
+                        width: 100%;
+
+                        /* Gradient background */
+                        background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ position: 'relative', width: '200px' }}>
+                        <div
+                            style={{
+                                height: '200px',
+                                overflowY: 'scroll',
+                            }}
+                        >
+                            <Block numberOfBlocks={50} />
+                        </div>
+
+                        <div
+                            style={{
+                                background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
+                                bottom: 0,
+                                height: '30px',
+                                left: 0,
+                                position: 'absolute',
+                                width: '100%',
+                            }}
+                        />
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/feature-comparison/index.tsx b/pages/feature-comparison/index.tsx
new file mode 100644
index 0000000..120c061
--- /dev/null
+++ b/pages/feature-comparison/index.tsx
@@ -0,0 +1,222 @@
+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 Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.FeatureComparison}>
+            <Head>
+                <meta name="description" content="Create a feature comparison list with CSS flexbox" />
+                <meta name="og:description" content="Create a feature comparison list with CSS flexbox" />
+                <meta name="twitter:description" content="Create a feature comparison list with CSS flexbox" />
+                <meta name="keywords" content="css feature comparison, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Feature name -->
+    <div class="container__feature">
+        ...
+    </div>
+
+    <!-- The model -->
+    <div class="container__model">
+        <!--
+        For the first row: display the model name (Basic, Pro, etc.)
+        From the second row: display a yes/no icon indicating the feature is available or not
+        -->
+        ...
+    </div>
+
+    <!-- Repeated other models -->
+    ...
+</div>
+
+<!-- Repeated items -->
+...
+`}
+                css={`
+                    .container {
+                        align-items: center;
+                        display: flex;
+
+                        /* Bottom border */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+
+                        /* Spacing */
+                        padding: 12px 0px;
+                    }
+
+                    .container__feature {
+                        /* Take available width */
+                        flex: 1;
+
+                        /* Spacing */
+                        margin-right: 16px;
+                    }
+
+                    .container__model {
+                        /* Center the content */
+                        display: flex;
+                        justify-content: center;
+
+                        /* Spacing */
+                        margin-right: 16px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div style={{ width: '60%' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                padding: '12px 0',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ flex: 1, marginRight: '16px' }}>
+                                <Rectangle />
+                            </div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginRight: '16px',
+                                    width: '75px',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                <Rectangle />
+                            </div>
+                        </div>
+
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                padding: '8px 0',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ flex: 1, marginRight: '16px' }}>
+                                <Block numberOfBlocks={4} />
+                            </div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginRight: '16px',
+                                    width: '75px',
+                                }}
+                            >
+                                <Circle size={8} />
+                            </div>
+                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                <Circle size={8} />
+                            </div>
+                        </div>
+
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                padding: '8px 0',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ flex: 1, marginRight: '16px' }}>
+                                <Block numberOfBlocks={5} />
+                            </div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginRight: '16px',
+                                    width: '75px',
+                                }}
+                            />
+                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                <Circle size={8} />
+                            </div>
+                        </div>
+
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                padding: '8px 0',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ flex: 1, marginRight: '16px' }}>
+                                <Block numberOfBlocks={4} />
+                            </div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginRight: '16px',
+                                    width: '75px',
+                                }}
+                            >
+                                <Circle size={8} />
+                            </div>
+                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
+                        </div>
+
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                padding: '8px 0',
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ flex: 1, marginRight: '16px' }}>
+                                <Block numberOfBlocks={6} />
+                            </div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginRight: '16px',
+                                    width: '75px',
+                                }}
+                            >
+                                <Circle size={8} />
+                            </div>
+                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/feature-list/index.tsx b/pages/feature-list/index.tsx
new file mode 100644
index 0000000..84da562
--- /dev/null
+++ b/pages/feature-list/index.tsx
@@ -0,0 +1,101 @@
+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 Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.FeatureList}>
+            <Head>
+                <meta name="description" content="Create a feature list with CSS flexbox" />
+                <meta name="og:description" content="Create a feature list with CSS flexbox" />
+                <meta name="twitter:description" content="Create a feature list with CSS flexbox" />
+                <meta name="keywords" content="css feature list, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<!-- Feature item -->
+<div class="container">
+    <!-- Image -->
+    <div class="container__image">
+        ...
+    </div>
+
+    <!-- Right side -->
+    <div class="container__feature">
+        ...
+    </div>
+</div>
+
+<!-- Repeated items -->
+...
+`}
+                css={`
+                    .container {
+                        display: flex;
+
+                        /* OPTIONAL: Reverse the order of image and content */
+                        flex-direction: row-reverse;
+
+                        /* OPTIONAL: Spacing between items */
+                        margin: 16px 0;
+                    }
+
+                    .container__image {
+                        width: 128px;
+                    }
+
+                    .container__feature {
+                        /* Take the remaining width */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div style={{ width: '60%' }}>
+                        <div style={{ display: 'flex', marginBottom: '32px' }}>
+                            <div style={{ margin: '0 16px' }}>
+                                <Circle size={128} />
+                            </div>
+                            <div style={{ flex: 1 }}>
+                                <div style={{ marginBottom: '32px' }}>
+                                    <Rectangle height={8} />
+                                </div>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                        </div>
+                        <div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
+                            <div style={{ margin: '0 16px' }}>
+                                <Circle size={128} />
+                            </div>
+                            <div style={{ flex: 1 }}>
+                                <div style={{ marginBottom: '32px' }}>
+                                    <Rectangle height={8} />
+                                </div>
+                                <Block numberOfBlocks={15} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/fixed-at-corner/index.tsx b/pages/fixed-at-corner/index.tsx
new file mode 100644
index 0000000..bc1bf19
--- /dev/null
+++ b/pages/fixed-at-corner/index.tsx
@@ -0,0 +1,95 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Triangle from '../../placeholders/Triangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.FixedAtCorner}>
+            <Head>
+                <meta name="description" content="Fix an element at corner with CSS" />
+                <meta name="og:description" content="Fix an element at corner with CSS" />
+                <meta name="twitter:description" content="Fix an element at corner with CSS" />
+                <meta name="keywords" content="css fixed" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Top-left corner -->
+    <div class="container__corner container__corner--tl">
+        ...
+    </div>
+
+    <!-- Top-right corner -->
+    <div class="container__corner container__corner--tr">
+        ...
+    </div>
+
+    <!-- Bottom-right corner -->
+    <div class="container__corner container__corner--br">
+        ...
+    </div>
+
+    <!-- Bottom-left corner -->
+    <div class="container__corner container__corner--bl">    
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        position: relative;
+                    }
+
+                    .container__corner {
+                        position: absolute;
+                    }
+
+                    .container__corner--tl {
+                        left: 0;
+                        top: 0;
+                    }
+
+                    .container__corner--tr {
+                        top: 0;
+                        right: 0;
+                    }
+
+                    .container__corner--br {
+                        bottom: 0;
+                        right: 0;
+                    }
+
+                    .container__corner--bl {
+                        bottom: 0;
+                        left: 0;
+                    }
+                `}
+            >
+                <div style={{ height: '100%', position: 'relative' }}>
+                    <div style={{ left: 0, position: 'absolute', top: 0 }}>
+                        <Triangle size={64} corner="tl" />
+                    </div>
+                    <div style={{ position: 'absolute', right: 0, top: 0 }}>
+                        <Triangle size={64} corner="tr" />
+                    </div>
+                    <div style={{ bottom: 0, position: 'absolute', right: 0 }}>
+                        <Triangle size={64} corner="br" />
+                    </div>
+                    <div style={{ bottom: 0, left: 0, position: 'absolute' }}>
+                        <Triangle size={64} corner="bl" />
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/fixed-at-side/Details.tsx b/pages/fixed-at-side/index.tsx
similarity index 87%
rename from client/patterns/fixed-at-side/Details.tsx
rename to pages/fixed-at-side/index.tsx
index 3e9e539..4498ad8 100644
--- a/client/patterns/fixed-at-side/Details.tsx
+++ b/pages/fixed-at-side/index.tsx
@@ -1,67 +1,61 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
+import { Heading, Spacer } from '@1milligram/design';
 
-import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.FixedAtSide}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.FixedAtSide}>
+            <Head>
                 <meta name="description" content="Fix an element at the middle of side with CSS" />
                 <meta name="og:description" content="Fix an element at the middle of side with CSS" />
                 <meta name="twitter:description" content="Fix an element at the middle of side with CSS" />
                 <meta name="keywords" content="css fixed" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            </Head>
+            <BrowserFrame
+                html={`
 <!-- Fixed at the middle of side -->
 <div class="container">
     ...
 </div>
 `}
-css={`
-.container {
-    right: 0;
-    position: fixed;
-    top: 50%;
-    transform: translate(0px, -50%);
-}
-`}
+                css={`
+                    .container {
+                        right: 0;
+                        position: fixed;
+                        top: 50%;
+                        transform: translate(0px, -50%);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
                 >
                     <div
                         style={{
-                            height: '100%',
-                            position: 'relative',
-                            width: '100%',
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            height: '200px',
+                            position: 'absolute',
+                            right: 0,
+                            top: '50%',
+                            transform: 'translate(0, -50%)',
+                            width: '32px',
                         }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                height: '200px',
-                                position: 'absolute',
-                                right: 0,
-                                top: '50%',
-                                transform: 'translate(0, -50%)',
-                                width: '32px',
-                            }}
-                        />
-                    </div>
-                </BrowserFrame>
-            </div>
+                    />
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
 
             <section>
-                <Heading title="Use cases" />
+                <Heading level={2}>Use cases</Heading>
 
                 <div style={{ padding: '48px' }}>
                     <div
@@ -261,8 +255,9 @@ css={`
                 </div>
             </section>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/floating-label/index.tsx b/pages/floating-label/index.tsx
new file mode 100644
index 0000000..16b638d
--- /dev/null
+++ b/pages/floating-label/index.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import { Pattern } from '../../constants/Pattern';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.FloatingLabel}>
+            <Head>
+                <meta name="description" content="Create a floating label with CSS" />
+                <meta name="og:description" content="Create a floating label with CSS" />
+                <meta name="twitter:description" content="Create a floating label with CSS" />
+                <meta name="keywords" content="css floating label, placeholder shown" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Type something in the input to see how the label is shown up.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The input -->
+    <input placeholder="Placeholder" class="container__input" />
+
+    <!-- The label -->
+    <label class="container__label">Placeholder</label>
+</div>
+`}
+                css={`
+                    .container {
+                        position: relative;
+                    }
+
+                    /*
+Show the label at desired position when the 
+placeholder of input isn't shown
+*/
+                    .container__input:not(:placeholder-shown) + .container__label {
+                        background: #fff;
+                        transform: translate(0, -50%);
+                        opacity: 1;
+                    }
+
+                    .container__label {
+                        /* Position the label */
+                        left: 8px;
+                        position: absolute;
+                        top: 0;
+
+                        /* Hide it by default */
+                        opacity: 0;
+                        transition: all 200ms;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        className="p-floating-container"
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            padding: '0 1px',
+                            position: 'relative',
+                            width: '200px',
+                        }}
+                    >
+                        <input
+                            id="floating-label-input"
+                            placeholder="Placeholder"
+                            type="text"
+                            style={{
+                                borderColor: 'transparent',
+                                padding: '8px',
+                                width: '100%',
+                            }}
+                        />
+                        <label
+                            htmlFor="floating-label-input"
+                            style={{
+                                left: '8px',
+                                padding: '0 8px',
+                                position: 'absolute',
+                                top: 0,
+                                transition: 'all 200ms',
+                            }}
+                        >
+                            Placeholder
+                        </label>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/folder-structure/index.tsx b/pages/folder-structure/index.tsx
new file mode 100644
index 0000000..155c97f
--- /dev/null
+++ b/pages/folder-structure/index.tsx
@@ -0,0 +1,171 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Square from '../../placeholders/Square';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.FolderStructure}>
+            <Head>
+                <meta name="description" content="Create a folder structure with CSS" />
+                <meta name="og:description" content="Create a folder structure with CSS" />
+                <meta name="twitter:description" content="Create a folder structure with CSS" />
+                <meta name="keywords" content="css folder structure, css folder tree" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="folder-structure">
+    <ul>
+        <li>
+            <!-- Content -->
+            ...
+
+            <!-- Sub items -->
+            <ul>
+                <li>
+                    <!-- Content -->
+                    ...
+
+                    <!-- Sub items -->
+                    <ul>
+                        <li>...</li>
+                        <li>...</li>
+                        ...
+                    </ul>
+                </li>
+                <li>...</li>
+                ...
+            </ul>
+        </li>
+        
+        <!-- Repeat other items -->
+        ...
+    </ul>
+</div>
+`}
+                css={`
+                    :root {
+                        --folder-structure-item-height: 1rem;
+                        --folder-structure-item-margin-left: 2rem;
+                        --folder-structure-item-padding-top: 1rem;
+                    }
+
+                    .folder-structure ul {
+                        /* Reset */
+                        list-style-type: none;
+                        margin: 0;
+                    }
+
+                    .folder-structure li {
+                        padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
+                        position: relative;
+                    }
+
+                    .folder-structure li::before {
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        content: '';
+
+                        /* Position */
+                        left: 0;
+                        position: absolute;
+                        top: 0;
+                        transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
+
+                        /* Size */
+                        height: 100%;
+                    }
+
+                    .folder-structure li::after {
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        content: '';
+
+                        /* Position */
+                        left: 0;
+                        position: absolute;
+                        top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+                        transform: translate(-100%, 0);
+
+                        /* Size */
+                        width: var(--folder-structure-item-margin-left);
+                    }
+
+                    /* Remove the border from the last item */
+                    .folder-structure li:last-child::before {
+                        height: calc(
+                            var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
+                        );
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '0.5rem',
+                    }}
+                >
+                    <div className="folder-structure">
+                        <ul>
+                            <li>
+                                <Square size="1rem" />
+                                <ul>
+                                    <li>
+                                        <Square size="1rem" />
+                                    </li>
+                                </ul>
+                            </li>
+                            <li>
+                                <Square size="1rem" />
+                                <ul>
+                                    <li>
+                                        <Square size="1rem" />
+                                        <ul>
+                                            <li>
+                                                <Square size="1rem" />
+                                            </li>
+                                            <li>
+                                                <Square size="1rem" />
+                                            </li>
+                                            <li>
+                                                <Square size="1rem" />
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <Square size="1rem" />
+                                    </li>
+                                    <li>
+                                        <Square size="1rem" />
+                                        <ul>
+                                            <li>
+                                                <Square size="1rem" />
+                                            </li>
+                                            <li>
+                                                <Square size="1rem" />
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li>
+                                <Square size="1rem" />
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.TreeDiagram]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/full-background/index.tsx b/pages/full-background/index.tsx
new file mode 100644
index 0000000..7ba8e24
--- /dev/null
+++ b/pages/full-background/index.tsx
@@ -0,0 +1,75 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.FullBackground}>
+            <Head>
+                <meta name="description" content="Create a full background element with CSS" />
+                <meta name="og:description" content="Create a full background element with CSS" />
+                <meta name="twitter:description" content="Create a full background element with CSS" />
+                <meta name="keywords" content="css background size cover, css full background" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+
+                        /* Take full size */
+                        height: 100vh;
+                        width: 100%;
+
+                        /* Background */
+                        background: url('/assets/full-background.jpeg') center center / cover no-repeat;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            width: '100%',
+                        }}
+                    >
+                        <div style={{ width: '250px' }}>
+                            <Block backgroundColor="#fff" justify="center" numberOfBlocks={10} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.VideoBackground]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/full-screen-menu/index.tsx b/pages/full-screen-menu/index.tsx
new file mode 100644
index 0000000..664e94a
--- /dev/null
+++ b/pages/full-screen-menu/index.tsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.FullScreenMenu}>
+            <Head>
+                <meta name="description" content="Create a full screen menu with CSS flexbox" />
+                <meta name="og:description" content="Create a full screen menu with CSS flexbox" />
+                <meta name="twitter:description" content="Create a full screen menu with CSS flexbox" />
+                <meta name="keywords" content="css fixed, css flexbox, css menu" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The close button -->
+    <button class="container__close">
+        ...
+    </button>
+
+    <!-- The navigation menu -->
+    <ul>
+        ...
+    </ul>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Full screen overlay */
+                        height: 100%;
+                        left: 0;
+                        position: fixed;
+                        top: 0;
+                        width: 100%;
+
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                    .container__close {
+                        /* Shown at top right corner */
+                        position: absolute;
+                        right: 16px;
+                        top: 16px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                        position: 'relative',
+                    }}
+                >
+                    <button
+                        style={{
+                            backgroundColor: 'transparent',
+                            borderColor: 'transparent',
+                            padding: 0,
+                            position: 'absolute',
+                            right: '16px',
+                            top: '16px',
+                        }}
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            style={{
+                                fill: 'none',
+                                height: 24,
+                                stroke: '#000',
+                                strokeLinecap: 'round',
+                                strokeLinejoin: 'round',
+                                strokeWidth: 1,
+                                width: 24,
+                            }}
+                        >
+                            <path
+                                d={`M7,16.999l10-10
+                                    M17,16.999l-10-10
+                                    M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
+                                    S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
+                            />
+                        </svg>
+                    </button>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '100%',
+                        }}
+                    >
+                        <ul
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                listStyleType: 'none',
+                                margin: 0,
+                                padding: 0,
+                            }}
+                        >
+                            <li style={{ marginBottom: '16px', width: '256px' }}>
+                                <Rectangle />
+                            </li>
+                            <li style={{ marginBottom: '16px', width: '144px' }}>
+                                <Rectangle />
+                            </li>
+                            <li style={{ marginBottom: '16px', width: '128px' }}>
+                                <Rectangle />
+                            </li>
+                            <li style={{ width: '160px' }}>
+                                <Rectangle />
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/holy-grail/index.tsx b/pages/holy-grail/index.tsx
new file mode 100644
index 0000000..34388ed
--- /dev/null
+++ b/pages/holy-grail/index.tsx
@@ -0,0 +1,127 @@
+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';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.HolyGrail}>
+            <Head>
+                <meta name="description" content="Create a holy grail layout with CSS flexbox" />
+                <meta name="og:description" content="Create a holy grail layout with CSS flexbox" />
+                <meta name="twitter:description" content="Create a holy grail layout with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css holy grail layout, css layout" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <header>
+        ...
+    </header>
+    <main class="container__main">
+        <!-- Left sidebar -->
+        <aside class="container__left">...</aside>
+
+        <!-- Main content -->
+        <article class="container__middle">...</article>
+
+        <!-- Right sidebar -->
+        <nav class="container__right">...</nav>
+    </main>
+    <footer>
+        ...
+    </footer>
+</div>
+`}
+                css={`
+                    .container {
+                        display: flex;
+                        flex-direction: column;
+                    }
+
+                    .container__main {
+                        /* Take the remaining height */
+                        flex-grow: 1;
+
+                        /* Layout the left sidebar, main content and right sidebar */
+                        display: flex;
+                        flex-direction: row;
+                    }
+
+                    .container__left {
+                        width: 25%;
+                    }
+
+                    .container__middle {
+                        /* Take the remaining width */
+                        flex-grow: 1;
+                    }
+
+                    .container__right {
+                        width: 20%;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            flexShrink: 0,
+                            padding: '16px',
+                        }}
+                    >
+                        <div style={{ width: '50%' }}>
+                            <Rectangle />
+                        </div>
+                    </div>
+                    <div style={{ display: 'flex', flexGrow: 1 }}>
+                        <div
+                            style={{
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                padding: '16px',
+                                width: '25%',
+                            }}
+                        >
+                            <Block numberOfBlocks={10} />
+                        </div>
+                        <div style={{ flex: 1, padding: '16px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div
+                            style={{
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                padding: '16px',
+                                width: '20%',
+                            }}
+                        >
+                            <Block numberOfBlocks={5} />
+                        </div>
+                    </div>
+                    <div
+                        style={{
+                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                            flexShrink: 0,
+                            padding: '16px',
+                        }}
+                    >
+                        <div style={{ width: '40%' }}>
+                            <Rectangle />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 0000000..838d6f5
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { Heading, Spacer } from '@1milligram/design';
+
+import { CoverCard } from '../components/CoverCard';
+import { Pattern } from '../constants/Pattern';
+import { Layout } from '../layouts/Layout';
+
+const HomePage = () => {
+    return (
+        <Layout title="A collection of popular layouts and patterns made with CSS">
+            <div className="block-container">
+                <div className="page-home__hero">
+                    <Spacer size="extraLarge" />
+                    <Heading level={1}>CSS Layout</Heading>
+                    <Heading level={4}>Popular layouts and patterns made with CSS</Heading>
+                    <Spacer size="large" />
+                    <div>Following covers are made with CSS only. Inspect them!</div>
+                </div>
+
+                <div className="page-home__category">
+                    <Heading level={2}>Display</Heading>
+                </div>
+                <div className="page-home__collection">
+                    <CoverCard pattern={Pattern.Accordion} />
+                    <CoverCard pattern={Pattern.ArrowButtons} />
+                    <CoverCard pattern={Pattern.Avatar} />
+                    <CoverCard pattern={Pattern.AvatarList} />
+                    <CoverCard pattern={Pattern.Badge} />
+                    <CoverCard pattern={Pattern.Card} />
+                    <CoverCard pattern={Pattern.Centering} />
+                    <CoverCard pattern={Pattern.CloseButton} />
+                    <CoverCard pattern={Pattern.ColorSwatch} />
+                    <CoverCard pattern={Pattern.ConcaveCorners} />
+                    <CoverCard pattern={Pattern.CookieBanner} />
+                    <CoverCard pattern={Pattern.CornerRibbon} />
+                    <CoverCard pattern={Pattern.CurvedBackground} />
+                    <CoverCard pattern={Pattern.DiagonalSection} />
+                    <CoverCard pattern={Pattern.DockedAtCorner} />
+                    <CoverCard pattern={Pattern.DotLeader} />
+                    <CoverCard pattern={Pattern.DropArea} />
+                    <CoverCard pattern={Pattern.DropCap} />
+                    <CoverCard pattern={Pattern.FadingLongSection} />
+                    <CoverCard pattern={Pattern.FeatureComparison} />
+                    <CoverCard pattern={Pattern.FeatureList} />
+                    <CoverCard pattern={Pattern.FixedAtCorner} />
+                    <CoverCard pattern={Pattern.FixedAtSide} />
+                    <CoverCard pattern={Pattern.FolderStructure} />
+                    <CoverCard pattern={Pattern.FullBackground} />
+                    <CoverCard pattern={Pattern.InitialAvatar} />
+                    <CoverCard pattern={Pattern.InvertedCorners} />
+                    <CoverCard pattern={Pattern.KeyboardShortcut} />
+                    <CoverCard pattern={Pattern.LayeredCard} />
+                    <CoverCard pattern={Pattern.LinedPaper} />
+                    <CoverCard pattern={Pattern.MediaObject} />
+                    <CoverCard pattern={Pattern.OverlayPlayButton} />
+                    <CoverCard pattern={Pattern.PriceTag} />
+                    <CoverCard pattern={Pattern.PricingTable} />
+                    <CoverCard pattern={Pattern.PropertyList} />
+                    <CoverCard pattern={Pattern.QuestionsAndAnswers} />
+                    <CoverCard pattern={Pattern.Ribbon} />
+                    <CoverCard pattern={Pattern.Separator} />
+                    <CoverCard pattern={Pattern.StackedCards} />
+                    <CoverCard pattern={Pattern.StampBorder} />
+                    <CoverCard pattern={Pattern.Statistic} />
+                    <CoverCard pattern={Pattern.StatusLight} />
+                    <CoverCard pattern={Pattern.StickyTableColumn} />
+                    <CoverCard pattern={Pattern.StickyTableHeaders} />
+                    <CoverCard pattern={Pattern.Teardrop} />
+                    <CoverCard pattern={Pattern.ThreeDimensionsCard} />
+                    <CoverCard pattern={Pattern.Timeline} />
+                    <CoverCard pattern={Pattern.TreeDiagram} />
+                    <CoverCard pattern={Pattern.TriangleButtons} />
+                    <CoverCard pattern={Pattern.VideoBackground} />
+                    <CoverCard pattern={Pattern.Voting} />
+                    <CoverCard pattern={Pattern.Watermark} />
+                    <CoverCard pattern={Pattern.ZigzagTimeline} />
+                </div>
+
+                <div className="page-home__category">
+                    <Heading level={2}>Feedback</Heading>
+                </div>
+                <div className="page-home__collection">
+                    <CoverCard pattern={Pattern.Modal} />
+                    <CoverCard pattern={Pattern.Notification} />
+                    <CoverCard pattern={Pattern.PopoverArrow} />
+                    <CoverCard pattern={Pattern.ProgressBar} />
+                    <CoverCard pattern={Pattern.RadialProgressBar} />
+                    <CoverCard pattern={Pattern.ResizableElement} />
+                    <CoverCard pattern={Pattern.PresenceIndicator} />
+                    <CoverCard pattern={Pattern.Tooltip} />
+                    <CoverCard pattern={Pattern.ValidationIcon} />
+                </div>
+
+                <div className="page-home__category">
+                    <Heading level={2}>Input</Heading>
+                </div>
+                <div className="page-home__collection">
+                    <CoverCard pattern={Pattern.ButtonWithIcon} />
+                    <CoverCard pattern={Pattern.Chip} />
+                    <CoverCard pattern={Pattern.CustomCheckboxButton} />
+                    <CoverCard pattern={Pattern.CustomRadioButton} />
+                    <CoverCard pattern={Pattern.FloatingLabel} />
+                    <CoverCard pattern={Pattern.InputAddon} />
+                    <CoverCard pattern={Pattern.RadioButtonGroup} />
+                    <CoverCard pattern={Pattern.RadioSwitch} />
+                    <CoverCard pattern={Pattern.Rating} />
+                    <CoverCard pattern={Pattern.SearchBox} />
+                    <CoverCard pattern={Pattern.Slider} />
+                    <CoverCard pattern={Pattern.SpinButton} />
+                    <CoverCard pattern={Pattern.StepperInput} />
+                    <CoverCard pattern={Pattern.Switch} />
+                    <CoverCard pattern={Pattern.TogglePasswordVisibility} />
+                    <CoverCard pattern={Pattern.UploadButton} />
+                </div>
+
+                <div className="page-home__category">
+                    <Heading level={2}>Layout</Heading>
+                </div>
+                <div className="page-home__collection">
+                    <CoverCard pattern={Pattern.CardLayout} />
+                    <CoverCard pattern={Pattern.HolyGrail} />
+                    <CoverCard pattern={Pattern.MasonryGrid} />
+                    <CoverCard pattern={Pattern.SameHeightColumns} />
+                    <CoverCard pattern={Pattern.Sidebar} />
+                    <CoverCard pattern={Pattern.SimpleGrid} />
+                    <CoverCard pattern={Pattern.SplitScreen} />
+                    <CoverCard pattern={Pattern.StickyFooter} />
+                    <CoverCard pattern={Pattern.StickyHeader} />
+                    <CoverCard pattern={Pattern.StickySections} />
+                </div>
+
+                <div className="page-home__category">
+                    <Heading level={2}>Navigation</Heading>
+                </div>
+                <div className="page-home__collection">
+                    <CoverCard pattern={Pattern.Breadcrumb} />
+                    <CoverCard pattern={Pattern.CircularNavigation} />
+                    <CoverCard pattern={Pattern.DotNavigation} />
+                    <CoverCard pattern={Pattern.Drawer} />
+                    <CoverCard pattern={Pattern.Dropdown} />
+                    <CoverCard pattern={Pattern.FullScreenMenu} />
+                    <CoverCard pattern={Pattern.MegaMenu} />
+                    <CoverCard pattern={Pattern.Menu} />
+                    <CoverCard pattern={Pattern.NestedDropdowns} />
+                    <CoverCard pattern={Pattern.Pagination} />
+                    <CoverCard pattern={Pattern.PreviousNextButtons} />
+                    <CoverCard pattern={Pattern.SplitNavigation} />
+                    <CoverCard pattern={Pattern.Tab} />
+                    <CoverCard pattern={Pattern.Wizard} />
+                </div>
+
+                <Spacer size="large" />
+            </div>
+        </Layout>
+    );
+};
+
+export default HomePage;
diff --git a/pages/initial-avatar/index.tsx b/pages/initial-avatar/index.tsx
new file mode 100644
index 0000000..730e179
--- /dev/null
+++ b/pages/initial-avatar/index.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+import { Spacer } from '@1milligram/design';
+
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.InitialAvatar}>
+            <Head>
+                <meta name="description" content="Create an initial avatar with CSS" />
+                <meta name="og:description" content="Create an initial avatar with CSS" />
+                <meta name="twitter:description" content="Create an initial avatar with CSS" />
+                <meta name="keywords" content="css avatar" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                To center the content, you also can use other technique demonstrated in the{' '}
+                <Link href="/centering">
+                    <a>Centering</a>
+                </Link>{' '}
+                pattern.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="avatar">
+    <div class="avatar__letters">
+        <!-- The letters -->
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .avatar {
+                        /* Center the content */
+                        display: inline-block;
+                        vertical-align: middle;
+
+                        /* Used to position the content */
+                        position: relative;
+
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.3);
+                        color: #fff;
+
+                        /* Rounded border */
+                        border-radius: 50%;
+                        height: 48px;
+                        width: 48px;
+                    }
+
+                    .avatar__letters {
+                        /* Center the content */
+                        left: 50%;
+                        position: absolute;
+                        top: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            borderRadius: '50%',
+                            color: '#FFF',
+                            display: 'inline-block',
+                            fontSize: '24px',
+                            height: '48px',
+                            position: 'relative',
+                            verticalAlign: 'middle',
+                            width: '48px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                left: '50%',
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
+                            }}
+                        >
+                            PN
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+
+            <RelatedPatterns
+                patterns={[
+                    Pattern.Avatar,
+                    Pattern.AvatarList,
+                    Pattern.Badge,
+                    Pattern.Centering,
+                    Pattern.PresenceIndicator,
+                ]}
+            />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/input-addon/index.tsx b/pages/input-addon/index.tsx
new file mode 100644
index 0000000..3328b33
--- /dev/null
+++ b/pages/input-addon/index.tsx
@@ -0,0 +1,207 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.InputAddon}>
+            <Head>
+                <meta name="description" content="Create an input add-on with CSS flexbox" />
+                <meta name="og:description" content="Create an input add-on with CSS flexbox" />
+                <meta name="twitter:description" content="Create an input add-on with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css input add-on" />
+            </Head>
+            <BrowserFrame
+                html={`
+<!-- Add-on prepended -->
+<div class="container">
+    <!-- Add-on -->
+    <div class="container__addon">
+        ...
+    </div>
+
+    <!-- Input -->
+    <input type="text" class="container__input" />
+</div>
+
+<!-- Add-on appended -->
+<div class="container">
+    <!-- Input -->
+    <input type="text" class="container__input" />
+
+    <!-- Add-on -->
+    <div class="container__addon">
+        ...
+    </div>
+</div>
+
+<!-- Appended and prepended add-ons -->
+<div class="container">
+    <!-- Add-on -->
+    <div class="container__addon">
+        ...
+    </div>
+
+    <!-- Input -->
+    <input type="text" class="container__input" />
+
+    <!-- Add-on -->
+    <div class="container__addon">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        display: flex;
+
+                        /* Take full size */
+                        width: 100%;
+                    }
+
+                    .container__input {
+                        /* Take the remaining width */
+                        flex: 1;
+                    }
+
+                    .container__addon {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '256px' }}>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                height: '32px',
+                                marginBottom: '16px',
+                                width: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                    width: '30%',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                            <input
+                                type="text"
+                                style={{
+                                    borderColor: 'transparent',
+                                    flex: 1,
+                                    marginRight: '1px',
+                                    padding: '4px',
+                                }}
+                            />
+                        </div>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                height: '32px',
+                                marginBottom: '16px',
+                                width: '100%',
+                            }}
+                        >
+                            <input
+                                type="text"
+                                style={{
+                                    borderColor: 'transparent',
+                                    flex: 1,
+                                    marginLeft: '1px',
+                                    padding: '8px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                    width: '40%',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                        </div>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                height: '32px',
+                                width: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                    width: '20%',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                            <input
+                                type="text"
+                                style={{
+                                    borderColor: 'transparent',
+                                    flex: 1,
+                                    padding: '8px',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                    width: '30%',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/inverted-corners/index.tsx b/pages/inverted-corners/index.tsx
new file mode 100644
index 0000000..62a8fd1
--- /dev/null
+++ b/pages/inverted-corners/index.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { Heading, Spacer } from '@1milligram/design';
+
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.InvertedCorners}>
+            <Head>
+                <meta name="description" content="Create inverted corners with CSS" />
+                <meta name="og:description" content="Create inverted corners with CSS" />
+                <meta name="twitter:description" content="Create inverted corners with CSS" />
+                <meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="inverted-corners">
+    ...
+</div>
+`}
+                css={`
+                    :root {
+                        --inverted-corners-background: #52525b;
+                        --inverted-corners-size: 2rem;
+                    }
+
+                    .inverted-corners {
+                        background-color: var(--inverted-corners-background);
+
+                        /* Used to position the corner */
+                        position: relative;
+                    }
+
+                    .inverted-corners::before {
+                        content: '';
+
+                        /* Absolute position */
+                        bottom: calc(-2 * var(--inverted-corners-size));
+                        left: 0;
+                        position: absolute;
+
+                        /* Size */
+                        height: calc(2 * var(--inverted-corners-size));
+                        width: var(--inverted-corners-size);
+
+                        /* Border */
+                        background-color: transparent;
+                        border-top-left-radius: var(--inverted-corners-size);
+                        box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px
+                            0px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '1rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '8rem',
+                            width: '16rem',
+                        }}
+                    >
+                        <div className="inverted-corners"></div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+
+            <section>
+                <Heading level={2}>Use cases</Heading>
+
+                <div
+                    style={{
+                        height: '8rem',
+                        width: '16rem',
+                    }}
+                >
+                    <div className="inverted-corners inverted-corners--speech">Speech Bubble</div>
+                </div>
+            </section>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.ConcaveCorners]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/keyboard-shortcut/index.tsx b/pages/keyboard-shortcut/index.tsx
new file mode 100644
index 0000000..c478027
--- /dev/null
+++ b/pages/keyboard-shortcut/index.tsx
@@ -0,0 +1,122 @@
+import * as React from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+import { Heading, Spacer } from '@1milligram/design';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+interface ItemProps {
+    action: string;
+    keys: string;
+}
+
+const Item: React.FC<ItemProps> = ({ action, keys }) => {
+    return (
+        <div
+            style={{
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'space-between',
+                margin: 0,
+                padding: '4px 0',
+            }}
+        >
+            <div>{action}</div>
+            <kbd
+                style={{
+                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                    borderRadius: '4px',
+                    boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
+                    color: 'rgba(0, 0, 0, 0.7)',
+                    padding: '8px',
+                }}
+            >
+                {keys}
+            </kbd>
+        </div>
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.KeyboardShortcut}>
+            <Head>
+                <meta name="description" content="Create a keyboard shortcut with CSS" />
+                <meta name="og:description" content="Create a keyboard shortcut with CSS" />
+                <meta name="twitter:description" content="Create a keyboard shortcut with CSS" />
+                <meta name="keywords" content="kbd tag, keyboard shortcut" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                We use the native <code>kbd</code> tag to display the keyboard shortcut.
+            </div>
+            <BrowserFrame
+                html={`
+<kbd class="container">
+    ...
+</kbd>
+`}
+                css={`
+                    .container {
+                        /* Background and color */
+                        background-color: rgba(0, 0, 0, 0.1);
+                        border-radius: 4px;
+                        color: rgba(0, 0, 0, 0.7);
+
+                        /* Bottom shadow */
+                        box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
+
+                        /* Spacing */
+                        padding: 8px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <kbd
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            borderRadius: '4px',
+                            boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
+                            color: 'rgba(0, 0, 0, 0.7)',
+                            padding: '8px',
+                        }}
+                    >
+                        ⌘ + C
+                    </kbd>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+
+            <section>
+                <Heading level={2}>Use cases</Heading>
+
+                <div style={{ padding: '32px' }}>
+                    <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                        We can use this pattern with the{' '}
+                        <Link href="/property-list">
+                            <a>property list</a>
+                        </Link>{' '}
+                        pattern to create shortkey preferences as following:
+                    </div>
+                    <div style={{ width: '250px' }}>
+                        <Item action="Cut" keys="⌘ + X" />
+                        <Item action="Copy" keys="⌘ + C" />
+                        <Item action="Paste" keys="⌘ + V" />
+                    </div>
+                </div>
+            </section>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/layered-card/Details.tsx b/pages/layered-card/index.tsx
similarity index 55%
rename from client/patterns/layered-card/Details.tsx
rename to pages/layered-card/index.tsx
index e643dfe..fe0e545 100644
--- a/client/patterns/layered-card/Details.tsx
+++ b/pages/layered-card/index.tsx
@@ -1,56 +1,51 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
+import { Spacer } from '@1milligram/design';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import './styles.css';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.LayeredCard}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.LayeredCard}>
+            <Head>
                 <meta name="description" content="Create a layered card with CSS" />
                 <meta name="og:description" content="Create a layered card with CSS" />
                 <meta name="twitter:description" content="Create a layered card with CSS" />
                 <meta name="keywords" content="css layered card" />
-            </Helmet>
+            </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="layered-card">
     ...
 </div>
 `}
-css={`
-.layered-card {
-    position: relative;
-}
+                css={`
+                    .layered-card {
+                        position: relative;
+                    }
 
-.layered-card::before {
-    background: rgba(0, 0, 0, 0.3);
-    content: '';
-    
-    /* Position */
-    top: 0;
-    left: 0;
-    position: absolute;
-    transform: translate(1rem, 1rem);
+                    .layered-card::before {
+                        background: rgba(0, 0, 0, 0.3);
+                        content: '';
 
-    /* Size */
-    height: 100%;
-    width: 100%;
+                        /* Position */
+                        top: 0;
+                        left: 0;
+                        position: absolute;
+                        transform: translate(1rem, 1rem);
 
-    /* Display under the main content */
-    z-index: -1;
-}
-`}
-                >
+                        /* Size */
+                        height: 100%;
+                        width: 100%;
+
+                        /* Display under the main content */
+                        z-index: -1;
+                    }
+                `}
+            >
                 <div
                     style={{
                         alignItems: 'center',
@@ -73,8 +68,9 @@ css={`
                 </div>
             </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.Card, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/lined-paper/index.tsx b/pages/lined-paper/index.tsx
new file mode 100644
index 0000000..465cdd7
--- /dev/null
+++ b/pages/lined-paper/index.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.LinedPaper}>
+            <Head>
+                <meta name="description" content="Create lined paper with CSS" />
+                <meta name="og:description" content="Create lined paper with CSS" />
+                <meta name="twitter:description" content="Create lined paper with CSS" />
+                <meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        /* Lined background */
+                        background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
+                        background-size: 100% 2em;
+
+                        /*
+    Display the content on top of the lines.
+    The line height must be the same as the background size defined above
+    */
+                        background-position-y: 24px;
+                        line-height: 2em;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
+                            backgroundPositionY: '24px',
+                            backgroundSize: '100% 2em',
+                            height: '200px',
+                            lineHeight: '2em',
+                            width: '75%',
+                        }}
+                    >
+                        <div>
+                            Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
+                            of a document written in a markup language like HTML. CSS is a cornerstone technology of the
+                            World Wide Web, alongside HTML and JavaScript.
+                        </div>
+                        <div style={{ textAlign: 'right' }}>— Wikipedia</div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/masonry-grid/index.tsx b/pages/masonry-grid/index.tsx
new file mode 100644
index 0000000..d58f83f
--- /dev/null
+++ b/pages/masonry-grid/index.tsx
@@ -0,0 +1,101 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.MasonryGrid}>
+            <Head>
+                <meta name="description" content="Create a masonry grid with CSS" />
+                <meta name="og:description" content="Create a masonry grid with CSS" />
+                <meta name="twitter:description" content="Create a masonry grid with CSS" />
+                <meta name="keywords" content="css column-count, css column-gap, css masonry, css masonry grid" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="masonry-grid">
+    <!--Item -->
+    <div class="masonry-grid__item">...</div>
+
+    <!-- Repeat other items -->
+</div>
+`}
+                css={`
+                    .masonry-grid {
+                        /* It is split into 3 columns */
+                        column-count: 3;
+
+                        /* The space between columns */
+                        column-gap: 1rem;
+
+                        /* Misc */
+                        width: 100%;
+                    }
+
+                    .masonry-grid__item {
+                        /* Prevent a column from breaking into multiple columns */
+                        break-inside: avoid;
+
+                        /* Misc */
+                        margin-bottom: 1rem;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '1rem',
+                    }}
+                >
+                    <div className="masonry-grid">
+                        <div className="masonry-grid__item">
+                            <Rectangle height={32} />
+                        </div>
+                        <div className="masonry-grid__item">
+                            <Rectangle height={64} />
+                        </div>
+                        <div className="masonry-grid__item">
+                            <Rectangle height={96} />
+                        </div>
+                        <div className="masonry-grid__item">
+                            <Rectangle height={64} />
+                        </div>
+                        <div className="masonry-grid__item">
+                            <Rectangle height={128} />
+                        </div>
+                        <div className="masonry-grid__item">
+                            <Rectangle height={96} />
+                        </div>
+                        <div className="masonry-grid__item">
+                            <Rectangle height={128} />
+                        </div>
+                        <div className="masonry-grid__item">
+                            <Rectangle height={32} />
+                        </div>
+                        <div className="masonry-grid__item">
+                            <Rectangle height={64} />
+                        </div>
+                        <div className="masonry-grid__item">
+                            <Rectangle height={32} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.SimpleGrid]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/media-object/index.tsx b/pages/media-object/index.tsx
new file mode 100644
index 0000000..fd0b134
--- /dev/null
+++ b/pages/media-object/index.tsx
@@ -0,0 +1,82 @@
+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';
+import Rectangle from '../../placeholders/Rectangle';
+import Square from '../../placeholders/Square';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.MediaObject}>
+            <Head>
+                <meta name="description" content="Create a media object with CSS flexbox" />
+                <meta name="og:description" content="Create a media object with CSS flexbox" />
+                <meta name="twitter:description" content="Create a media object with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, media object" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Media object -->
+    <div class="container__media">
+        ...
+    </div>
+
+    <!-- Main content -->
+    <div class="container__content">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Align sub-items to top */
+                        align-items: start;
+                        display: flex;
+                    }
+
+                    .container__media {
+                        margin-right: 16px;
+
+                        /* Set the width for the media object */
+                        width: 200px;
+                    }
+
+                    .container__content {
+                        /* Take the remaining width */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'flex-start',
+                        display: 'flex',
+                        height: '100%',
+                        padding: '16px',
+                    }}
+                >
+                    <div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
+                        <Square />
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        <div style={{ marginBottom: '32px', width: '80%' }}>
+                            <Rectangle />
+                        </div>
+                        <div style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={15} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/mega-menu/index.tsx b/pages/mega-menu/index.tsx
new file mode 100644
index 0000000..52a0be3
--- /dev/null
+++ b/pages/mega-menu/index.tsx
@@ -0,0 +1,147 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.MegaMenu}>
+            <Head>
+                <meta name="description" content="Create a mega menu with CSS" />
+                <meta name="og:description" content="Create a mega menu with CSS" />
+                <meta name="twitter:description" content="Create a mega menu with CSS" />
+                <meta name="keywords" content="css mega menu" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Move the mouse over the second navigation item to see the mega menu.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Item -->
+    ...
+
+    <!-- An item that triggers displaying the mega menu -->
+    <div class="container__trigger">
+        <!-- The trigger item's content -->
+        <div>...</div>
+
+        <!-- Mega menu -->
+        <div class="container__content">
+            ...
+        </div>
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Used to position the mega menu */
+                        position: relative;
+                    }
+
+                    .container__trigger:hover .container__content {
+                        /* Show the mega menu when hovering the trigger item */
+                        display: block;
+                    }
+
+                    .container__content {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        margin-top: -1px;
+
+                        /* Hidden by default */
+                        display: none;
+
+                        /* Absolute position */
+                        left: 0px;
+                        position: absolute;
+                        top: 100%;
+
+                        /* Take full width */
+                        width: 100%;
+
+                        /* Displayed on top of other elements */
+                        background: #fff;
+                        z-index: 9999;
+                    }
+                `}
+            >
+                <div style={{ padding: '8px' }}>
+                    <div className="p-mega-menu-container">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'inline-flex',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    padding: '16px',
+                                    width: '150px',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                            <div
+                                className="p-mega-menu-trigger"
+                                style={{
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    width: '180px',
+                                }}
+                            >
+                                <div style={{ display: 'flex', padding: '16px' }}>
+                                    <div style={{ flex: 1, marginRight: '8px' }}>
+                                        <Rectangle />
+                                    </div>
+                                    <Triangle size={8} corner="b" />
+                                </div>
+                                <div className="p-mega-menu-content">
+                                    <div style={{ display: 'flex' }}>
+                                        <div style={{ flex: 1, padding: '16px' }}>
+                                            <Block numberOfBlocks={10} />
+                                        </div>
+                                        <div style={{ flex: 1, padding: '16px' }}>
+                                            <Block numberOfBlocks={6} />
+                                        </div>
+                                        <div style={{ flex: 1, padding: '16px' }}>
+                                            <Block numberOfBlocks={8} />
+                                        </div>
+                                        <div style={{ flex: 1, padding: '16px' }}>
+                                            <Block numberOfBlocks={6} />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                style={{
+                                    padding: '16px',
+                                    width: '120px',
+                                }}
+                            >
+                                <Rectangle />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div style={{ marginTop: '16px' }}>
+                        <Block numberOfBlocks={10} />
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/menu/index.tsx b/pages/menu/index.tsx
new file mode 100644
index 0000000..380a848
--- /dev/null
+++ b/pages/menu/index.tsx
@@ -0,0 +1,226 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Menu}>
+            <Head>
+                <meta name="description" content="Create a menu with CSS flexbox" />
+                <meta name="og:description" content="Create a menu with CSS flexbox" />
+                <meta name="twitter:description" content="Create a menu with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css menu" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="menu">
+    <!-- Normal menu item -->
+    <div class="menu__item">
+        ...
+    </div>
+
+    <!-- With hot key -->
+    <div class="menu__item">
+        <!-- Label -->
+        ...
+        <!-- Hot key -->
+        <div class="menu__hotkey">
+            ...
+        </div>
+    </div>
+
+    <!-- With image and hot key -->
+    <div class="menu__item">
+        <!-- Image -->
+        ...
+
+        <!-- Label -->
+        ...
+
+        <!-- Hot key -->
+        <div class="menu__hotkey">
+            ...
+        </div>
+    </div>
+
+    <!-- Divider -->
+    <div class="menu__divider"></div>
+</div>
+`}
+                css={`
+                    .menu {
+                        display: flex;
+                        flex-direction: column;
+
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 4px;
+                    }
+
+                    .menu__item {
+                        /* Center the content horizontally */
+                        align-items: center;
+                        display: flex;
+                    }
+
+                    .menu__hotkey {
+                        /* Push the hot key to the right */
+                        margin-left: auto;
+                    }
+
+                    .menu__divider {
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        height: 1px;
+                    }
+                `}
+            >
+                <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',
+                            width: '40%',
+                        }}
+                    >
+                        <div
+                            className="p-menu-item"
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '32px',
+                                padding: '0 8px',
+                            }}
+                        >
+                            <div style={{ width: '40%' }}>
+                                <Rectangle />
+                            </div>
+                        </div>
+                        <div
+                            className="p-menu-item"
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '32px',
+                                padding: '0 8px',
+                            }}
+                        >
+                            <Circle />
+                            <div style={{ marginLeft: '4px', width: '50%' }}>
+                                <Rectangle />
+                            </div>
+                        </div>
+                        <div
+                            className="p-menu-item"
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '32px',
+                                justifyContent: 'space-between',
+                                padding: '0 8px',
+                            }}
+                        >
+                            <div style={{ width: '30%' }}>
+                                <Rectangle />
+                            </div>
+                            <div>Ctrl + X</div>
+                        </div>
+                        <div
+                            className="p-menu-item"
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '32px',
+                                justifyContent: 'space-between',
+                                padding: '0 8px',
+                            }}
+                        >
+                            <div style={{ width: '70%' }}>
+                                <Rectangle />
+                            </div>
+                            <div>Ctrl + C</div>
+                        </div>
+                        <div
+                            className="p-menu-item"
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '32px',
+                                justifyContent: 'space-between',
+                                padding: '0 8px',
+                            }}
+                        >
+                            <div style={{ width: '20%' }}>
+                                <Rectangle />
+                            </div>
+                            <Circle />
+                        </div>
+                        <div
+                            className="p-menu-item"
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '32px',
+                                justifyContent: 'space-between',
+                                padding: '0 8px',
+                            }}
+                        >
+                            <div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
+                                <Circle />
+                                <div style={{ marginLeft: '4px', width: '50%' }}>
+                                    <Rectangle />
+                                </div>
+                            </div>
+                            <Circle />
+                        </div>
+                        <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
+                        <div
+                            className="p-menu-item"
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '32px',
+                                justifyContent: 'space-between',
+                                padding: '0 8px',
+                            }}
+                        >
+                            <div style={{ width: '40%' }}>
+                                <Rectangle />
+                            </div>
+                            <div>Ctrl + V</div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+
+            <RelatedPatterns
+                patterns={[
+                    Pattern.DotLeader,
+                    Pattern.MegaMenu,
+                    Pattern.NestedDropdowns,
+                    Pattern.PropertyList,
+                    Pattern.SplitNavigation,
+                ]}
+            />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/modal/index.tsx b/pages/modal/index.tsx
new file mode 100644
index 0000000..e5c0ca8
--- /dev/null
+++ b/pages/modal/index.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+
+import { Pattern } from '../../constants/Pattern';
+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.Modal}>
+            <Head>
+                <meta name="description" content="Create a modal with CSS flexbox" />
+                <meta name="og:description" content="Create a modal with CSS flexbox" />
+                <meta name="twitter:description" content="Create a modal with CSS flexbox" />
+                <meta name="keywords" content="css dialog, css flexbox, css modal" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '1rem' }}>
+                You can use the{' '}
+                <Link href="/close-button">
+                    <a>close button</a>
+                </Link>{' '}
+                to represent the button for closing the modal.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="modal">
+    <!-- Header -->
+    <div class="modal__header">
+        <!-- Title -->
+        ...
+        <!-- Close icon sticks to the right -->
+        ...
+    </div>
+
+    <!-- Content -->
+    ...
+
+    <!-- Footer -->
+    <div class="modal__footer">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .modal {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0.3);
+                        border-radius: 4px;
+                    }
+
+                    .modal__header {
+                        display: flex;
+                        justify-content: space-between;
+                        /* Border */
+                        border-bottom: 1px solid rgba(0, 0, 0.3);
+                    }
+
+                    .modal__footer {
+                        display: flex;
+                        /* Push the buttons to the right */
+                        justify-content: flex-end;
+                        /* Border */
+                        border-top: 1px solid rgba(0, 0, 0.3);
+                    }
+                `}
+            >
+                <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',
+                            width: '50%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ width: '60%' }}>
+                                <Rectangle />
+                            </div>
+                            <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
+                                <Circle />
+                            </div>
+                        </div>
+                        <div style={{ padding: '16px' }}>
+                            <div style={{ marginBottom: '16px' }}>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                            <Block numberOfBlocks={5} />
+                        </div>
+                        <div
+                            style={{
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ marginRight: '8px', width: '30%' }}>
+                                <Rectangle height={32} />
+                            </div>
+                            <div style={{ width: '30%' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/nested-dropdowns/index.tsx b/pages/nested-dropdowns/index.tsx
new file mode 100644
index 0000000..d3a08d9
--- /dev/null
+++ b/pages/nested-dropdowns/index.tsx
@@ -0,0 +1,149 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.NestedDropdowns}>
+            <Head>
+                <meta name="description" content="Create nested dropdown menu with CSS" />
+                <meta name="og:description" content="Create nested dropdown menu with CSS" />
+                <meta name="twitter:description" content="Create nested dropdown menu with CSS" />
+                <meta
+                    name="keywords"
+                    content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu"
+                />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Hover on the Patterns &rarr; Navigation to see the sub dropdowns.
+            </div>
+            <BrowserFrame
+                html={`
+<ul class="dropdown">
+    <li>Home</li>
+    <li>
+        <div>Patterns</div>
+        <!-- First level sub dropdown -->
+        <ul>
+            <li>Layout</li>
+            <li>Input</li>
+            <li>
+                <div>Navigation</div>
+                <!-- Second level sub dropdown -->
+                <ul>
+                    <li>Breadcrumb</li>
+                    <li>Dropdown</li>
+                    <li>Menu</li>
+                    <li>Nested dropdown</li>
+                </ul>
+            </li>
+            <li>Display</li>
+            <li>Feedback</li>
+        </ul>
+    </li>
+    <li>Products</li>
+    <li>About</li>
+</ul>
+`}
+                css={`
+                    .dropdown {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        display: flex;
+
+                        /* Reset list styles */
+                        list-style-type: none;
+                        margin: 0;
+                        padding: 0;
+                    }
+
+                    .dropdown li {
+                        /* Spacing */
+                        padding: 8px;
+
+                        /* Used to position the sub dropdown */
+                        position: relative;
+                    }
+
+                    /* The sub dropdown */
+                    .dropdown ul {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+
+                        /* Hidden by default */
+                        display: none;
+
+                        /* Absolute position */
+                        left: 0;
+                        position: absolute;
+                        top: 100%;
+
+                        /* Reset styles */
+                        list-style-type: none;
+                        margin: 0;
+                        padding: 0;
+
+                        /* Width */
+                        width: 200px;
+                    }
+
+                    /* The second level sub dropdown */
+                    .dropdown ul ul {
+                        left: 100%;
+                        position: absolute;
+                        top: 0;
+                    }
+
+                    /* Change background color of list item when being hovered */
+                    .dropdown li:hover {
+                        background-color: rgba(0, 0, 0, 0.1);
+                    }
+
+                    /* Show the direct sub dropdown when hovering the list item */
+                    .dropdown li:hover > ul {
+                        display: block;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        padding: '8px',
+                    }}
+                >
+                    <ul className="p-nested-dropdowns">
+                        <li>Home</li>
+                        <li>
+                            <div>Patterns</div>
+                            <ul>
+                                <li>Layout</li>
+                                <li>Input</li>
+                                <li>
+                                    <div>Navigation</div>
+                                    <ul>
+                                        <li>Breadcrumb</li>
+                                        <li>Dropdown</li>
+                                        <li>Menu</li>
+                                        <li>Nested dropdown</li>
+                                    </ul>
+                                </li>
+                                <li>Display</li>
+                                <li>Feedback</li>
+                            </ul>
+                        </li>
+                        <li>Products</li>
+                        <li>About</li>
+                    </ul>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/notification/index.tsx b/pages/notification/index.tsx
new file mode 100644
index 0000000..5d7a6e9
--- /dev/null
+++ b/pages/notification/index.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Notification}>
+            <Head>
+                <meta name="description" content="Create a notification with CSS flexbox" />
+                <meta name="og:description" content="Create a notification with CSS flexbox" />
+                <meta name="twitter:description" content="Create a notification with CSS flexbox" />
+                <meta name="keywords" content="css alert, css flexbox, css notification" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                You can use the{' '}
+                <Link href="/close-button">
+                    <a>close button</a>
+                </Link>{' '}
+                to represent the button for closing the notification.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="notification">
+    <!-- Content -->
+    ...
+
+    <!-- Close button sticks to the right -->
+    ...
+</div>
+`}
+                css={`
+                    .notification {
+                        display: flex;
+                        justify-content: space-between;
+                    }
+                `}
+            >
+                <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',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '60%',
+                        }}
+                    >
+                        <div style={{ padding: '16px', width: '80%' }}>
+                            <Block numberOfBlocks={5} />
+                        </div>
+                        <button
+                            style={{
+                                alignItems: 'center',
+                                borderColor: 'transparent',
+                                color: 'rgba(0, 0, 0, .3)',
+                                display: 'flex',
+                                fontSize: '36px',
+                                height: '32px',
+                                justifyContent: 'center',
+                                marginRight: '1px',
+                                width: '32px',
+                            }}
+                        >
+                            <Circle />
+                        </button>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/overlay-play-button/index.tsx b/pages/overlay-play-button/index.tsx
new file mode 100644
index 0000000..5c11427
--- /dev/null
+++ b/pages/overlay-play-button/index.tsx
@@ -0,0 +1,112 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Triangle from '../../placeholders/Triangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.OverlayPlayButton}>
+            <Head>
+                <meta name="description" content="Create an overlay play button with CSS flexbox" />
+                <meta name="og:description" content="Create an overlay play button with CSS flexbox" />
+                <meta name="twitter:description" content="Create an overlay play button with CSS flexbox" />
+                <meta name="keywords" content="css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The video element -->
+    <video src="..." />
+
+    <!-- The overlay area -->
+    <div class="container__overlay">
+        <!-- The player button -->
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Used to position the overlay */
+                        position: relative;
+                    }
+
+                    .container__overlay {
+                        /* Position */
+                        left: 0;
+                        position: absolute;
+                        top: 0;
+
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Add a dark background */
+                        background-color: rgba(0, 0, 0, 0.25);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '100%',
+                            position: 'relative',
+                            width: '100%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                                width: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    border: '4px solid #FFF',
+                                    borderRadius: '9999px',
+                                    display: 'flex',
+                                    height: '64px',
+                                    justifyContent: 'center',
+                                    width: '64px',
+                                }}
+                            >
+                                <Triangle backgroundColor="#FFF" corner="r" size={8} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.VideoBackground]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/pagination/index.tsx b/pages/pagination/index.tsx
new file mode 100644
index 0000000..258ad72
--- /dev/null
+++ b/pages/pagination/index.tsx
@@ -0,0 +1,146 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Pagination}>
+            <Head>
+                <meta name="description" content="Create a pagination with CSS flexbox" />
+                <meta name="og:description" content="Create a pagination with CSS flexbox" />
+                <meta name="twitter:description" content="Create a pagination with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css pagination" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="pagination">
+    <!-- Pagination item -->
+    <div class="pagination__item">
+        ...
+    </div>
+
+    <!-- Repeat other items -->
+    ...
+</div>
+`}
+                css={`
+                    .pagination {
+                        display: flex;
+
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 4px;
+                    }
+
+                    .pagination__item {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Right border */
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                    }
+                    .pagination__item + .pagination__item {
+                        /* No right border */
+                        border-right: none;
+                    }
+                `}
+            >
+                <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',
+                            display: 'flex',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                padding: '8px',
+                                width: '128px',
+                            }}
+                        >
+                            <Rectangle />
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <Circle size={16} />
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <Circle size={16} />
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <Circle size={16} />
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <Circle size={16} />
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                padding: '8px',
+                                width: '64px',
+                            }}
+                        >
+                            <Rectangle />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/popover-arrow/index.tsx b/pages/popover-arrow/index.tsx
new file mode 100644
index 0000000..76762e1
--- /dev/null
+++ b/pages/popover-arrow/index.tsx
@@ -0,0 +1,401 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.PopoverArrow}>
+            <Head>
+                <meta name="description" content="Create a popover arrow with CSS" />
+                <meta name="og:description" content="Create a popover arrow with CSS" />
+                <meta name="twitter:description" content="Create a popover arrow with CSS" />
+                <meta name="keywords" content="css arrow, css popover" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The content -->
+    ...
+
+    <!-- Top left arrow -->
+    <div class="container__arrow container__arrow--tl"></div>
+
+    <!-- Top center arrow -->
+    <div class="container__arrow container__arrow--tc"></div>
+
+    <!-- Top right arrow -->
+    <div class="container__arrow container__arrow--tr"></div>
+
+    <!-- Right top arrow -->
+    <div class="container__arrow container__arrow--rt"></div>
+
+    <!-- Right center arrow -->
+    <div class="container__arrow container__arrow--rc"></div>
+
+    <!-- Right bottom arrow -->
+    <div class="container__arrow container__arrow--rb"></div>
+
+    <!-- Bottom left arrow -->
+    <div class="container__arrow container__arrow--bl"></div>
+
+    <!-- Bottom center arrow -->
+    <div class="container__arrow container__arrow--bc"></div>
+
+    <!-- Bottom right arrow -->
+    <div class="container__arrow container__arrow--br"></div>
+
+    <!-- Left top arrow -->
+    <div class="container__arrow container__arrow--lt"></div>
+
+    <!-- Left center arrow -->
+    <div class="container__arrow container__arrow--lc"></div>
+
+    <!-- Left bottom arrow -->
+    <div class="container__arrow container__arrow--lb"></div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+
+                        /* Used to position the arrow */
+                        position: relative;
+                    }
+
+                    .container__arrow {
+                        /* Size */
+                        height: 16px;
+                        width: 16px;
+
+                        background-color: #fff;
+                        position: absolute;
+                    }
+
+                    .container__arrow--tl {
+                        /* Position at the top left corner */
+                        left: 32px;
+                        top: 0px;
+
+                        /* Border */
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(50%, -50%) rotate(45deg);
+                    }
+
+                    .container__arrow--tc {
+                        /* Position at the top center */
+                        left: 50%;
+                        top: 0px;
+
+                        /* Border */
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(-50%, -50%) rotate(45deg);
+                    }
+
+                    .container__arrow--tr {
+                        /* Position at the top right corner */
+                        right: 32px;
+                        top: 0px;
+
+                        /* Border */
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(-50%, -50%) rotate(45deg);
+                    }
+
+                    .container__arrow--rt {
+                        /* Position at the right top corner */
+                        right: 0;
+                        top: 32px;
+
+                        /* Border */
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(50%, 50%) rotate(45deg);
+                    }
+
+                    .container__arrow--rc {
+                        /* Position at the right center */
+                        right: 0;
+                        top: 50%;
+
+                        /* Border */
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(50%, -50%) rotate(45deg);
+                    }
+
+                    .container__arrow--rb {
+                        /* Position at the right bottom corner */
+                        bottom: 32px;
+                        right: 0;
+
+                        /* Border */
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(50%, -50%) rotate(45deg);
+                    }
+
+                    .container__arrow--bl {
+                        /* Position at the bottom left corner */
+                        bottom: -16px;
+                        left: 32px;
+
+                        /* Border */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(50%, -50%) rotate(45deg);
+                    }
+
+                    .container__arrow--bc {
+                        /* Position at the bottom center */
+                        bottom: -16px;
+                        left: 50%;
+
+                        /* Border */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(-50%, -50%) rotate(45deg);
+                    }
+
+                    .container__arrow--br {
+                        /* Position at the bottom right corner */
+                        bottom: -16px;
+                        right: 32px;
+
+                        /* Border */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(-50%, -50%) rotate(45deg);
+                    }
+
+                    .container__arrow--lt {
+                        /* Position at the left top corner */
+                        left: 0;
+                        top: 32px;
+
+                        /* Border */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(-50%, 50%) rotate(45deg);
+                    }
+
+                    .container__arrow--lc {
+                        /* Position at the left center */
+                        left: 0;
+                        top: 50%;
+
+                        /* Border */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(-50%, -50%) rotate(45deg);
+                    }
+
+                    .container__arrow--lb {
+                        /* Position at the left bottom corner */
+                        bottom: 32px;
+                        left: 0;
+
+                        /* Border */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        transform: translate(-50%, -50%) rotate(45deg);
+                    }
+                `}
+            >
+                <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: '300px',
+                            marginBottom: '16px',
+                            position: 'relative',
+                            width: '300px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '16px',
+                                left: '32px',
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '16px',
+                                left: '50%',
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(-50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '16px',
+                                position: 'absolute',
+                                right: '32px',
+                                top: 0,
+                                transform: 'translate(-50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '16px',
+                                position: 'absolute',
+                                right: 0,
+                                top: '32px',
+                                transform: 'translate(50%, 50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '16px',
+                                position: 'absolute',
+                                right: 0,
+                                top: '50%',
+                                transform: 'translate(50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                bottom: '32px',
+                                height: '16px',
+                                position: 'absolute',
+                                right: 0,
+                                transform: 'translate(50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                bottom: '-16px',
+                                height: '16px',
+                                left: '32px',
+                                position: 'absolute',
+                                transform: 'translate(50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                bottom: '-16px',
+                                height: '16px',
+                                left: '50%',
+                                position: 'absolute',
+                                transform: 'translate(-50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                bottom: '-16px',
+                                height: '16px',
+                                position: 'absolute',
+                                right: '32px',
+                                transform: 'translate(-50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '16px',
+                                left: 0,
+                                position: 'absolute',
+                                top: '32px',
+                                transform: 'translate(-50%, 50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '16px',
+                                left: 0,
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                bottom: '32px',
+                                height: '16px',
+                                left: 0,
+                                position: 'absolute',
+                                transform: 'translate(-50%, -50%) rotate(45deg)',
+                                width: '16px',
+                            }}
+                        />
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/presence-indicator/index.tsx b/pages/presence-indicator/index.tsx
new file mode 100644
index 0000000..0454afa
--- /dev/null
+++ b/pages/presence-indicator/index.tsx
@@ -0,0 +1,95 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.PresenceIndicator}>
+            <Head>
+                <meta name="description" content="Create a presence indicator with CSS" />
+                <meta name="og:description" content="Create a presence indicator with CSS" />
+                <meta name="twitter:description" content="Create a presence indicator with CSS" />
+                <meta name="keywords" content="css indicator" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Other element such as avatar -->
+    ...
+
+    <!-- The presence indicator -->
+    <div class="container__indicator"></div>
+</div>
+`}
+                css={`
+.container {
+    position: relative;
+}
+
+.container__indicator {
+    /* Shown at the bottom right corner */
+    bottom: 0,
+    position: absolute;
+    right: 0;
+    transform: translate(50%, 50%);
+
+    /* Rounded border */
+    border-radius: 9999px;
+    height: 16px;
+    width: 16px;
+
+    /* Background color */
+    background-color: #FF4136;
+}
+`}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '64px',
+                            marginRight: '16px',
+                            position: 'relative',
+                            width: '64px',
+                        }}
+                    >
+                        <Circle size={64} />
+                        <div
+                            style={{
+                                backgroundColor: '#FF4136',
+                                borderRadius: '9999px',
+                                bottom: 0,
+                                height: '16px',
+                                position: 'absolute',
+                                right: 0,
+                                transform: 'translate(50%, 50%)',
+                                width: '16px',
+                            }}
+                        />
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+
+            <RelatedPatterns
+                patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
+            />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/previous-next-buttons/index.tsx b/pages/previous-next-buttons/index.tsx
new file mode 100644
index 0000000..a3db379
--- /dev/null
+++ b/pages/previous-next-buttons/index.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
+
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.PreviousNextButtons}>
+            <Head>
+                <meta name="description" content="Create previous and next buttons with CSS flexbox" />
+                <meta name="og:description" content="Create previous and next buttons with CSS flexbox" />
+                <meta name="twitter:description" content="Create previous and next buttons with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css pagination" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Previous link sticks to the left -->
+    <a>..</a>
+
+    <!-- Next link sticks to the right -->
+    <a>..</a>
+</div>
+`}
+                css={`
+                    .container {
+                        align-items: center;
+                        display: flex;
+                        justify-content: space-between;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '50%' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '32px',
+                                justifyContent: 'space-between',
+                                padding: '8px',
+                                width: '100%',
+                            }}
+                        >
+                            <a
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    padding: '8px',
+                                    width: '30%',
+                                }}
+                            >
+                                <div style={{ marginRight: '8px' }}>&lt;</div>
+                                <Rectangle />
+                            </a>
+                            <a
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    padding: '8px',
+                                    width: '30%',
+                                }}
+                            >
+                                <Rectangle />
+                                <div style={{ marginLeft: '8px' }}>&gt;</div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/price-tag/index.tsx b/pages/price-tag/index.tsx
new file mode 100644
index 0000000..0739082
--- /dev/null
+++ b/pages/price-tag/index.tsx
@@ -0,0 +1,104 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.PriceTag}>
+            <Head>
+                <meta name="description" content="Create a price tag with CSS" />
+                <meta name="og:description" content="Create a price tag with CSS" />
+                <meta name="twitter:description" content="Create a price tag with CSS" />
+                <meta name="keywords" content="css price tag" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="price-tag">
+    ...
+</div>
+`}
+                css={`
+                    :root {
+                        --price-tag-background: rgba(0, 0, 0, 0.3);
+                        --price-tag-height: 2rem;
+                    }
+
+                    .price-tag {
+                        background: var(--price-tag-background);
+                        color: #fff;
+
+                        /* Center the price */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Used to position the triangle */
+                        position: relative;
+
+                        /* Size */
+                        height: var(--price-tag-height);
+
+                        /* Spacing */
+                        padding: 0.25rem 0.5rem;
+                    }
+
+                    /* The triangle */
+                    .price-tag::before {
+                        content: '';
+
+                        border-color: transparent var(--price-tag-background) transparent transparent;
+                        border-style: solid;
+                        border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
+                            calc(var(--price-tag-height) / 2) 0rem;
+
+                        /* Position */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
+                        transform: translate(-100%, 0px);
+                    }
+
+                    /* The dot */
+                    .price-tag::after {
+                        content: '';
+
+                        /* Make it like a cirle */
+                        background: #fff;
+                        border-radius: 9999rem;
+
+                        /* Position */
+                        left: 0;
+                        position: absolute;
+                        top: 50%;
+                        transform: translate(-0.5rem, -50%);
+
+                        /* Size */
+                        height: 0.5rem;
+                        width: 0.5rem;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div className="price-tag">99.99$</div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.TriangleButtons]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/pricing-table/index.tsx b/pages/pricing-table/index.tsx
new file mode 100644
index 0000000..07ecabe
--- /dev/null
+++ b/pages/pricing-table/index.tsx
@@ -0,0 +1,186 @@
+import * as React from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+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 Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.PricingTable}>
+            <Head>
+                <meta name="description" content="Create a pricing table with CSS flexbox" />
+                <meta name="og:description" content="Create a pricing table with CSS flexbox" />
+                <meta name="twitter:description" content="Create a pricing table with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css pricing table" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                You can{' '}
+                <Link href="/ribbon">
+                    <a>add</a>
+                </Link>{' '}
+                <Link href="/corner-ribbon">
+                    <a>a ribbon</a>
+                </Link>{' '}
+                to indicate the most popular option.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Pricing column -->
+    <div class="container__column">
+        <!-- Title -->
+        ...
+
+        <!-- Price -->
+        ...
+
+        <!-- Description -->
+        ...
+
+        <!-- Button -->
+        ...
+    </div>
+
+    <!-- Repeated pricing columns -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        /* Content is centered horizontally */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                    .container__column {
+                        /* Content is centered vertically */
+                        align-items: center;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+
+                        /* Make all columns have the same width */
+                        flex: 1;
+
+                        /* OPTIONAL: Space between columns */
+                        margin: 0 8px;
+
+                        /* OPTIONAL: Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 4px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '16px',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            width: '60%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                flex: 1,
+                                flexDirection: 'column',
+                                justifyContent: 'center',
+                                margin: '0 8px',
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ marginBottom: '16px', width: '60%' }}>
+                                <Rectangle />
+                            </div>
+                            <div style={{ marginBottom: '16px' }}>
+                                <Circle size={64} />
+                            </div>
+                            <div style={{ marginBottom: '16px', width: '100%' }}>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                            <div style={{ width: '40%' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                flex: 1,
+                                flexDirection: 'column',
+                                justifyContent: 'center',
+                                margin: '0 8px',
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ marginBottom: '16px', width: '60%' }}>
+                                <Rectangle />
+                            </div>
+                            <div style={{ marginBottom: '16px' }}>
+                                <Circle size={64} />
+                            </div>
+                            <div style={{ marginBottom: '16px', width: '100%' }}>
+                                <Block numberOfBlocks={20} />
+                            </div>
+                            <div style={{ width: '40%' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                flex: 1,
+                                flexDirection: 'column',
+                                justifyContent: 'center',
+                                margin: '0 8px',
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ marginBottom: '16px', width: '60%' }}>
+                                <Rectangle />
+                            </div>
+                            <div style={{ marginBottom: '16px' }}>
+                                <Circle size={64} />
+                            </div>
+                            <div style={{ marginBottom: '16px', width: '100%' }}>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                            <div style={{ width: '40%' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/progress-bar/index.tsx b/pages/progress-bar/index.tsx
new file mode 100644
index 0000000..378cc61
--- /dev/null
+++ b/pages/progress-bar/index.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
+
+import useInterval from '../../hooks/useInterval';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    const [progress, setProgress] = React.useState(0);
+    useInterval(() => {
+        setProgress((v) => (v === 100 ? 0 : v + 1));
+    }, 1 * 100);
+
+    return (
+        <PatternLayout pattern={Pattern.ProgressBar}>
+            <Head>
+                <meta name="description" content="Create a progress bar with CSS flexbox" />
+                <meta name="og:description" content="Create a progress bar with CSS flexbox" />
+                <meta name="twitter:description" content="Create a progress bar with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css progress bar" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <div class="container__progress" style="
+        /* Width based on the number of percentages */
+        width: 40%;
+    ">
+        <!-- The number of percentages -->
+        40%
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.1);
+
+                        /* Rounded border */
+                        border-radius: 9999px;
+                    }
+
+                    .container__progress {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Colors */
+                        background-color: #357edd;
+                        color: #fff;
+
+                        /* Rounded border */
+                        border-radius: 9999px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            borderRadius: '9999px',
+                            height: '16px',
+                            width: '50%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: '#357EDD',
+                                borderRadius: '9999px',
+                                color: '#FFF',
+                                display: 'flex',
+                                fontSize: '12px',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '4px',
+                                width: `${progress}%`,
+                            }}
+                        >
+                            {progress}%
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/property-list/index.tsx b/pages/property-list/index.tsx
new file mode 100644
index 0000000..1b4a8ca
--- /dev/null
+++ b/pages/property-list/index.tsx
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { Heading, Spacer } from '@1milligram/design';
+
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    const Item: React.FC<{}> = ({ children }) => {
+        return (
+            <dl
+                style={{
+                    alignItems: 'center',
+                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    margin: 0,
+                    padding: '8px 0',
+                }}
+            >
+                {children}
+            </dl>
+        );
+    };
+
+    return (
+        <PatternLayout pattern={Pattern.PropertyList}>
+            <Head>
+                <meta name="description" content="Create a property list with CSS flexbox" />
+                <meta name="og:description" content="Create a property list with CSS flexbox" />
+                <meta name="twitter:description" content="Create a property list with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, property list" />
+            </Head>
+            <BrowserFrame
+                html={`
+<!-- A property item -->
+<dl class="container">
+    <!-- Property name -->
+    <dt>...</dt>
+
+    <!-- Property value -->
+    <dd>...</dd>
+</dl>
+`}
+                css={`
+                    .container {
+                        /* Content is center horizontally */
+                        align-items: center;
+                        display: flex;
+
+                        /*
+    The property name will stick to the left, and the value
+    will stick to the right
+    */
+                        justify-content: space-between;
+
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+
+                        /* Spacing */
+                        margin: 0px;
+                        padding: 8px 0px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '40%' }}>
+                        <Item>
+                            <dt style={{ width: '80%' }}>
+                                <Rectangle />
+                            </dt>
+                            <dd>
+                                <Circle />
+                            </dd>
+                        </Item>
+                        <Item>
+                            <dt style={{ width: '60%' }}>
+                                <Rectangle />
+                            </dt>
+                            <dd>
+                                <Circle />
+                            </dd>
+                        </Item>
+                        <Item>
+                            <dt style={{ width: '30%' }}>
+                                <Rectangle />
+                            </dt>
+                            <dd>
+                                <Circle />
+                            </dd>
+                        </Item>
+                        <Item>
+                            <dt style={{ width: '50%' }}>
+                                <Rectangle />
+                            </dt>
+                            <dd>
+                                <Circle />
+                            </dd>
+                        </Item>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+
+            <section>
+                <Heading level={2}>Use cases</Heading>
+
+                <div style={{ padding: '32px', width: '500px' }}>
+                    <Item>
+                        <dt>Name</dt>
+                        <dd>WebAssembly in Action</dd>
+                    </Item>
+                    <Item>
+                        <dt>Author</dt>
+                        <dd>Gerard Gallant</dd>
+                    </Item>
+                    <Item>
+                        <dt>Publishing date</dt>
+                        <dd>November 2019</dd>
+                    </Item>
+                    <Item>
+                        <dt>ISBN</dt>
+                        <dd>9781617295744</dd>
+                    </Item>
+                </div>
+            </section>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.SplitNavigation]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/questions-and-answers/index.tsx b/pages/questions-and-answers/index.tsx
new file mode 100644
index 0000000..b7c85b0
--- /dev/null
+++ b/pages/questions-and-answers/index.tsx
@@ -0,0 +1,161 @@
+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={{
+                        alignItems: 'center',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        padding: '16px 0',
+                    }}
+                    onClick={click}
+                >
+                    {title}
+                    <Triangle size={8} corner={isOpened ? 't' : 'b'} />
+                </div>
+                <div
+                    style={{
+                        display: isOpened ? 'block' : 'none',
+                        marginBottom: '16px',
+                    }}
+                >
+                    {children}
+                </div>
+            </>
+        );
+    };
+
+    return (
+        <PatternLayout pattern={Pattern.QuestionsAndAnswers}>
+            <Head>
+                <meta name="description" content="Create a questions and answers section with CSS flexbox" />
+                <meta name="og:description" content="Create a questions and answers section with CSS flexbox" />
+                <meta name="twitter:description" content="Create a questions and answers section with CSS flexbox" />
+                <meta name="keywords" content="css accordion, css faq, css flexbox" />
+            </Head>
+            <BrowserFrame
+                html={`
+<!-- Each question and answer item -->
+<div class="container">
+    <!-- Heading -->
+    <div class="container__heading">
+        <!-- Question -->
+        ...
+
+        <!-- The toggle icon sticks to the right -->
+        ...
+    </div>
+
+    <!-- Answer -->
+</div>
+`}
+                css={`
+                    .container {
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                    }
+
+                    .container__heading {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '60%' }}>
+                        <div
+                            style={{
+                                margin: '0 auto',
+                                paddingBottom: '24px',
+                                width: '200px',
+                            }}
+                        >
+                            <Rectangle />
+                        </div>
+                        <div
+                            style={{
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                            }}
+                        >
+                            <Item
+                                index={0}
+                                title={
+                                    <div style={{ width: '40%' }}>
+                                        <Rectangle />
+                                    </div>
+                                }
+                            >
+                                <Block numberOfBlocks={10} />
+                            </Item>
+                        </div>
+                        <div
+                            style={{
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            }}
+                        >
+                            <Item
+                                index={1}
+                                title={
+                                    <div style={{ width: '80%' }}>
+                                        <Rectangle />
+                                    </div>
+                                }
+                            >
+                                <Block numberOfBlocks={15} />
+                            </Item>
+                        </div>
+                        <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                            <Item
+                                index={2}
+                                title={
+                                    <div style={{ width: '60%' }}>
+                                        <Rectangle />
+                                    </div>
+                                }
+                            >
+                                <Block numberOfBlocks={10} />
+                            </Item>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.Accordion]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/radial-progress-bar/index.tsx b/pages/radial-progress-bar/index.tsx
new file mode 100644
index 0000000..1936b12
--- /dev/null
+++ b/pages/radial-progress-bar/index.tsx
@@ -0,0 +1,182 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+interface RadialProgressProps {
+    percentages: number;
+}
+
+const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
+    return (
+        <div style={{ position: 'relative' }}>
+            <div
+                style={{
+                    alignItems: 'center',
+                    border: '12px solid rgba(0, 0, 0, 0.3)',
+                    borderRadius: '9999px',
+                    color: 'rgba(0, 0, 0, 0.3)',
+                    display: 'flex',
+                    fontSize: '24px',
+                    height: '128px',
+                    justifyContent: 'center',
+                    width: '128px',
+                }}
+            >
+                {percentages}%
+            </div>
+            <div
+                style={{
+                    clip: percentages >= 50 ? 'rect(auto, auto, auto, auto)' : 'rect(0px, 128px, 128px, 64px)',
+                    height: '100%',
+                    left: 0,
+                    position: 'absolute',
+                    top: 0,
+                    width: '100%',
+                }}
+            >
+                <div
+                    style={{
+                        border: '12px solid #00449E',
+                        borderRadius: '9999px',
+                        clip: 'rect(0px, 64px, 128px, 0px)',
+                        height: '100%',
+                        position: 'absolute',
+                        transform: `rotate(${(percentages * 360) / 100}deg)`,
+                        width: '100%',
+                    }}
+                />
+                <div
+                    style={{
+                        border: '12px solid #00449E',
+                        borderRadius: '9999px',
+                        clip: 'rect(0px, 64px, 128px, 0px)',
+                        height: '100%',
+                        position: 'absolute',
+                        transform: `rotate(${percentages >= 50 ? 180 : 0}deg)`,
+                        width: '100%',
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.RadialProgressBar}>
+            <Head>
+                <meta name="description" content="Create a radial progress bar with CSS flexbox" />
+                <meta name="og:description" content="Create a radial progress bar with CSS flexbox" />
+                <meta name="twitter:description" content="Create a radial progress bar with CSS flexbox" />
+                <meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Show number of percentages -->
+    <div class="container__percentages">
+        ...
+    </div>
+
+    <!-- The curve -->
+    <div class="container__curve">
+        <!-- The first half -->
+        <div class="container__half container__half--first"></div>
+
+        <!-- The second half -->
+        <div class="container__half container__half--second"></div>
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        position: relative;
+                    }
+
+                    .container__percentages {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Rounded border */
+                        border: 12px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 9999px;
+
+                        /* Size */
+                        height: 128px;
+                        width: 128px;
+                    }
+
+                    .container__curve {
+                        /* Position */
+                        left: 0;
+                        position: absolute;
+                        top: 0;
+
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+
+                        /* If percentages is less than 50 */
+                        clip: rect(0px, 128px, 128px, 64px);
+
+                        /* If percentages is greater than or equals to 50 */
+                        clip: rect(auto, auto, auto, auto);
+                    }
+
+                    .container__half {
+                        /* Take full size */
+                        height: 100%;
+                        position: absolute;
+                        width: 100%;
+
+                        /*
+    Background color of curve.
+    The border width should be the same as the area showing the percentages
+    */
+                        border: 12px solid rgb(0, 68, 158);
+                        border-radius: 9999px;
+                    }
+
+                    .container__half--first {
+                        /* Position */
+                        clip: rect(0px, 64px, 128px, 0px);
+                        transform: rotate(162deg); /* Number of percentages * 360 / 100 */
+                    }
+
+                    .container__half--second {
+                        /* Position */
+                        clip: rect(0px, 64px, 128px, 0px);
+
+                        /* If percentages is less than 50 */
+                        transform: rotate(0deg);
+
+                        /* If percentages is greater than or equals to 50 */
+                        transform: rotate(180deg);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ marginRight: '16px' }}>
+                        <RadialProgress percentages={45} />
+                    </div>
+                    <RadialProgress percentages={80} />
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/radio-button-group/index.tsx b/pages/radio-button-group/index.tsx
new file mode 100644
index 0000000..5d25da7
--- /dev/null
+++ b/pages/radio-button-group/index.tsx
@@ -0,0 +1,152 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+interface RadioProps {
+    value: string;
+}
+
+const Details: React.FC<{}> = () => {
+    const [selectedValue, setSelectedValue] = React.useState('1');
+
+    const Radio: React.FC<RadioProps> = ({ value, children }) => {
+        const click = () => setSelectedValue(value);
+
+        return (
+            <label
+                htmlFor="radio-button-group"
+                style={{
+                    alignItems: 'center',
+                    backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                    padding: '8px',
+                }}
+            >
+                <input
+                    id="radio-button-group"
+                    type="radio"
+                    name="option"
+                    value={value}
+                    style={{ display: 'none' }}
+                    onChange={click}
+                />
+                {children}
+            </label>
+        );
+    };
+
+    return (
+        <PatternLayout pattern={Pattern.RadioButtonGroup}>
+            <Head>
+                <meta name="description" content="Create a radio button group with CSS flexbox" />
+                <meta name="og:description" content="Create a radio button group with CSS flexbox" />
+                <meta name="twitter:description" content="Create a radio button group with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css radio button" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Each radio item -->
+    <label class="container__label">
+        <!-- The radio input -->
+        <input type="radio" class="container__input" />
+
+        <!-- The text -->
+        ...
+    </label>
+
+    <!-- Repeat other items -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        display: flex;
+
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 4px;
+                        height: 32px;
+                    }
+
+                    .container__label {
+                        /* Center the content */
+                        align-items: center;
+                        display: inline-flex;
+
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        padding: 8px;
+
+                        /* For not selected radio */
+                        background-color: transparent;
+                        color: #ccc;
+                    }
+
+                    .container__label:last-child {
+                        /* Remove the right border from the last label */
+                        border-right-color: transparent;
+                    }
+
+                    .container__label--selected {
+                        /* For selected radio */
+                        background-color: #00449e;
+                        color: #fff;
+                    }
+
+                    .container__input {
+                        /* Hide it */
+                        display: none;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        className="p-radio-button-group"
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            display: 'flex',
+                            height: '32px',
+                        }}
+                    >
+                        <Radio value="1">
+                            <div style={{ width: '80px' }}>
+                                <Rectangle />
+                            </div>
+                        </Radio>
+                        <Radio value="2">
+                            <div style={{ width: '120px' }}>
+                                <Rectangle />
+                            </div>
+                        </Radio>
+                        <Radio value="3">
+                            <div style={{ width: '100px' }}>
+                                <Rectangle />
+                            </div>
+                        </Radio>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/radio-switch/index.tsx b/pages/radio-switch/index.tsx
new file mode 100644
index 0000000..1c50c8c
--- /dev/null
+++ b/pages/radio-switch/index.tsx
@@ -0,0 +1,183 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { Heading, Spacer } from '@1milligram/design';
+
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    const [isFirstChecked, setFirstChecked] = React.useState(false);
+    const toggle = () => setFirstChecked((c) => !c);
+
+    return (
+        <PatternLayout pattern={Pattern.RadioSwitch}>
+            <Head>
+                <meta name="description" content="Create a radio switch with CSS flexbox" />
+                <meta name="og:description" content="Create a radio switch with CSS flexbox" />
+                <meta name="twitter:description" content="Create a radio switch with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css radio switch, css switch" />
+            </Head>
+            <BrowserFrame
+                html={`
+<!-- Container -->
+<div class="container">
+    <!-- Radio container -->
+    <label class="container__label container__label--selected">
+        <input type="radio" class="container__input" />
+
+        <!-- Text -->
+        ...
+    </label>
+
+    <!-- Other radio item -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        background-color: rgba(0, 0, 0, 0.1);
+                        border-radius: 9999px;
+                        display: inline-flex;
+                        padding: 4px;
+                    }
+
+                    .container__label {
+                        border-radius: 9999px;
+                        cursor: pointer;
+                        padding: 4px 8px;
+                    }
+
+                    .container__label--selected {
+                        /* For selected radio only */
+                        background-color: #357edd;
+                        color: #fff;
+                    }
+
+                    .container__input {
+                        display: none;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            borderRadius: '9999px',
+                            display: 'inline-flex',
+                            padding: '4px',
+                        }}
+                    >
+                        <label
+                            htmlFor="radio-switch-first"
+                            style={{
+                                backgroundColor: isFirstChecked ? '#357EDD' : '',
+                                borderRadius: '9999px',
+                                color: isFirstChecked ? '#FFF' : '',
+                                cursor: 'pointer',
+                                padding: '16px 8px',
+                            }}
+                        >
+                            <input
+                                id="radio-switch-first"
+                                type="radio"
+                                style={{ display: 'none' }}
+                                checked={isFirstChecked}
+                                onChange={toggle}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
+                                    borderRadius: '4px',
+                                    height: '8px',
+                                    width: '64px',
+                                }}
+                            />
+                        </label>
+                        <label
+                            htmlFor="radio-switch-second"
+                            style={{
+                                backgroundColor: isFirstChecked ? '' : '#357EDD',
+                                borderRadius: '9999px',
+                                color: isFirstChecked ? '' : '#FFF',
+                                cursor: 'pointer',
+                                padding: '16px 8px',
+                            }}
+                        >
+                            <input
+                                id="radio-switch-second"
+                                type="radio"
+                                style={{ display: 'none' }}
+                                checked={!isFirstChecked}
+                                onChange={toggle}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
+                                    borderRadius: '4px',
+                                    height: '8px',
+                                    width: '64px',
+                                }}
+                            />
+                        </label>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+
+            <section>
+                <Heading level={2}>Use cases</Heading>
+
+                <div style={{ padding: '32px' }}>
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            borderRadius: '9999px',
+                            display: 'inline-flex',
+                            padding: '4px',
+                        }}
+                    >
+                        <label
+                            style={{
+                                backgroundColor: '#357EDD',
+                                borderRadius: '9999px',
+                                color: '#FFF',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                padding: '4px 8px',
+                            }}
+                        >
+                            <input type="radio" style={{ display: 'none' }} />
+                            Monthly
+                        </label>
+                        <label
+                            style={{
+                                borderRadius: '9999px',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                padding: '4px 8px',
+                            }}
+                        >
+                            <input type="radio" style={{ display: 'none' }} />
+                            Yearly
+                        </label>
+                    </div>
+                </div>
+            </section>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.Switch]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/rating/index.tsx b/pages/rating/index.tsx
new file mode 100644
index 0000000..4206a9b
--- /dev/null
+++ b/pages/rating/index.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+interface StarProps {
+    isActive: boolean;
+}
+
+const Star: React.FC<StarProps> = ({ isActive }) => {
+    return <button className="p-rating-star">{isActive ? '★' : '☆'}</button>;
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Rating}>
+            <Head>
+                <meta name="description" content="Create a star rating with CSS flexbox" />
+                <meta name="og:description" content="Create a star rating with CSS flexbox" />
+                <meta name="twitter:description" content="Create a star rating with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css star rating" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="rating">
+    <button class="rating__star">☆</button>
+    <button class="rating__star">☆</button>
+    <button class="rating__star">☆</button>
+    <button class="rating__star">☆</button>
+    <button class="rating__star">★</button>
+</div>
+`}
+                css={`
+                    .rating {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        flex-direction: row-reverse;
+
+                        font-size: 32px;
+                    }
+
+                    .rating__star:hover,
+                    .rating__star:hover ~ .rating__star {
+                        color: transparent;
+                    }
+
+                    /*
+Make all previous stars selected when hover on a star
+Note that we use \`flex-direction: row-reverse\` on the container
+*/
+                    .rating__star:hover:before,
+                    .rating__star:hover ~ .rating__star:before {
+                        color: #00449e;
+                        content: '\\2605';
+                        left: 0;
+                        position: absolute;
+                    }
+
+                    .rating__star {
+                        /* Reset styles for button */
+                        background-color: transparent;
+                        border: transparent;
+                        margin: 0 2px;
+                        padding: 0;
+
+                        /* Used to position the hover state */
+                        position: relative;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div className="p-rating">
+                        <Star isActive={false} />
+                        <Star isActive={false} />
+                        <Star isActive={false} />
+                        <Star isActive={false} />
+                        <Star isActive={true} />
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/resizable-element/index.tsx b/pages/resizable-element/index.tsx
new file mode 100644
index 0000000..e5f87a3
--- /dev/null
+++ b/pages/resizable-element/index.tsx
@@ -0,0 +1,273 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.ResizableElement}>
+            <Head>
+                <meta name="description" content="Create resizable indicators with CSS" />
+                <meta name="og:description" content="Create resizable indicators with CSS" />
+                <meta name="twitter:description" content="Create resizable indicators with CSS" />
+                <meta name="keywords" content="css resizable, css resize cursor" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                You can move the mouse over each squares located at the corners and the middle of sides to see the
+                cursors which indicate the associated side can be resized.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The content -->
+    ...
+
+    <!-- The top left square -->
+    <div class="container__resizer container__resizer--tl"></div>
+
+    <!-- The top square -->
+    <div class="container__resizer container__resizer--tc"></div>
+
+    <!-- The top right square -->
+    <div class="container__resizer container__resizer--tr"></div>
+
+    <!-- The right square -->
+    <div class="container__resizer container__resizer--rc"></div>
+
+    <!-- The right bottom square -->
+    <div class="container__resizer container__resizer--rb"></div>
+
+    <!-- The bottom square -->
+    <div class="container__resizer container__resizer--bc"></div>
+
+    <!-- The bottom left square -->
+    <div class="container__resizer container__resizer--bl"></div>
+
+    <!-- The left square -->
+    <div class="container__resizer container__resizer--lc"></div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Border */
+                        border: 1px dashed rgba(0, 0, 0, 0.3);
+
+                        /* Used to position the squares */
+                        position: relative;
+                    }
+
+                    .container__resizer {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        position: absolute;
+
+                        /* Size */
+                        height: 12px;
+                        width: 12px;
+                    }
+
+                    .container__resizer--tl {
+                        /* Resize cursor */
+                        cursor: nwse-resize;
+
+                        /* Positioned at the top left corner */
+                        left: 0px;
+                        top: 0px;
+                        transform: translate(-50%, -50%);
+                    }
+
+                    .container__resizer--tc {
+                        /* Resize cursor */
+                        cursor: ns-resize;
+
+                        /* Positioned at the middle of top side */
+                        left: 50%;
+                        top: 0px;
+                        transform: translate(-50%, -50%);
+                    }
+
+                    .container__resizer--tr {
+                        /* Resize cursor */
+                        cursor: nesw-resize;
+
+                        /* Positioned at the top right corner */
+                        right: 0px;
+                        top: 0px;
+                        transform: translate(50%, -50%);
+                    }
+
+                    .container__resizer--rc {
+                        /* Resize cursor */
+                        cursor: ew-resize;
+
+                        /* Positioned at the middle of right side */
+                        right: 0px;
+                        top: 50%;
+                        transform: translate(50%, -50%);
+                    }
+
+                    .container__resizer--rb {
+                        /* Resize cursor */
+                        cursor: nwse-resize;
+
+                        /* Positioned at the right bottom corner */
+                        bottom: 0px;
+                        right: 0px;
+                        transform: translate(50%, 50%);
+                    }
+
+                    .container__resizer--bc {
+                        /* Resize cursor */
+                        cursor: ns-resize;
+
+                        /* Positioned at the middle of bottom side */
+                        bottom: 0px;
+                        right: 50%;
+                        transform: translate(50%, 50%);
+                    }
+
+                    .container__resizer--bl {
+                        /* Resize cursor */
+                        cursor: nesw-resize;
+
+                        /* Positioned at the bottom left corner */
+                        bottom: 0px;
+                        left: 0px;
+                        transform: translate(-50%, 50%);
+                    }
+
+                    .container__resizer--lc {
+                        /* Resize cursor */
+                        cursor: ew-resize;
+
+                        /* Positioned at the middle of left side */
+                        left: 0px;
+                        top: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            border: '1px dashed rgba(0, 0, 0, 0.3)',
+                            height: '200px',
+                            position: 'relative',
+                            width: '200px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                cursor: 'nwse-resize',
+                                height: '12px',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(-50%, -50%)',
+                                width: '12px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                cursor: 'ns-resize',
+                                height: '12px',
+                                left: '50%',
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(-50%, -50%)',
+                                width: '12px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                cursor: 'nesw-resize',
+                                height: '12px',
+                                position: 'absolute',
+                                right: 0,
+                                top: 0,
+                                transform: 'translate(50%, -50%)',
+                                width: '12px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                cursor: 'ew-resize',
+                                height: '12px',
+                                position: 'absolute',
+                                right: 0,
+                                top: '50%',
+                                transform: 'translate(50%, -50%)',
+                                width: '12px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                bottom: 0,
+                                cursor: 'nwse-resize',
+                                height: '12px',
+                                position: 'absolute',
+                                right: 0,
+                                transform: 'translate(50%, 50%)',
+                                width: '12px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                bottom: 0,
+                                cursor: 'ns-resize',
+                                height: '12px',
+                                position: 'absolute',
+                                right: '50%',
+                                transform: 'translate(50%, 50%)',
+                                width: '12px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                bottom: 0,
+                                cursor: 'nesw-resize',
+                                height: '12px',
+                                left: 0,
+                                position: 'absolute',
+                                transform: 'translate(-50%, 50%)',
+                                width: '12px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                cursor: 'ew-resize',
+                                height: '12px',
+                                left: 0,
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                width: '12px',
+                            }}
+                        />
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/ribbon/index.tsx b/pages/ribbon/index.tsx
new file mode 100644
index 0000000..0b2c7e8
--- /dev/null
+++ b/pages/ribbon/index.tsx
@@ -0,0 +1,172 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Ribbon}>
+            <Head>
+                <meta name="description" content="Create a ribbon with CSS" />
+                <meta name="og:description" content="Create a ribbon with CSS" />
+                <meta name="twitter:description" content="Create a ribbon with CSS" />
+                <meta name="keywords" content="css ribbon" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The content -->
+    ...
+
+    <!-- The left side -->
+    <div class="container__side container__side--left"></div>
+
+    <!-- The left triangle displayed below the content -->
+    <div class="container__triangle container__triangle--left"></div>
+
+    <!-- The right triangle displayed below the content -->
+    <div class="container__triangle container__triangle--right"></div>
+
+    <!-- The right side -->
+    <div class="container__side container__side--right"></div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Background color */
+                        background-color: #bbb;
+
+                        /* Size */
+                        height: 32px;
+
+                        /* Use to position the corners */
+                        position: relative;
+                    }
+
+                    .container__side {
+                        bottom: -8px;
+                        position: absolute;
+
+                        /* Displayed under the container */
+                        z-index: -1;
+
+                        /* Background */
+                        border: 16px solid #ccc;
+                        border-left-color: transparent;
+                    }
+
+                    .container__side--left {
+                        /* Position */
+                        left: -24px;
+                    }
+
+                    .container__side--right {
+                        /* Position */
+                        right: -24px;
+                    }
+
+                    .container__triangle {
+                        position: absolute;
+                        top: 100%;
+
+                        border: 8px solid transparent;
+                        border-bottom-width: 0;
+                        border-top-color: #aaa;
+                    }
+
+                    .container__triangle--left {
+                        border-right-width: 0;
+                        left: 0;
+                    }
+
+                    .container__triangle--right {
+                        border-left-width: 0;
+                        right: 0;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            backgroundColor: '#BBB',
+                            display: 'flex',
+                            height: '32px',
+                            justifyContent: 'center',
+                            padding: '0 16px',
+                            position: 'relative',
+                            width: '150px',
+                        }}
+                    >
+                        <Rectangle />
+                        <div
+                            style={{
+                                border: '16px solid #CCC',
+                                borderLeftColor: 'transparent',
+                                bottom: '-8px',
+                                left: '-24px',
+                                position: 'absolute',
+                                zIndex: -1,
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '8px solid transparent',
+                                borderBottomWidth: 0,
+                                borderRightWidth: 0,
+                                borderTopColor: '#AAA',
+                                left: 0,
+                                position: 'absolute',
+                                top: '100%',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '8px solid transparent',
+                                borderBottomWidth: 0,
+                                borderLeftWidth: 0,
+                                borderTopColor: '#AAA',
+                                position: 'absolute',
+                                right: 0,
+                                top: '100%',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '16px solid #CCC',
+                                borderRightColor: 'transparent',
+                                bottom: '-8px',
+                                position: 'absolute',
+                                right: '-24px',
+                                zIndex: -1,
+                            }}
+                        />
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.CornerRibbon]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/same-height-columns/index.tsx b/pages/same-height-columns/index.tsx
new file mode 100644
index 0000000..00b3b39
--- /dev/null
+++ b/pages/same-height-columns/index.tsx
@@ -0,0 +1,139 @@
+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';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.SameHeightColumns}>
+            <Head>
+                <meta name="description" content="Create same height columns with CSS flexbox" />
+                <meta name="og:description" content="Create same height columns with CSS flexbox" />
+                <meta name="twitter:description" content="Create same height columns with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css layout, css same height columns" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Column -->
+    <div class="container__column">
+        <!-- Cover -->
+        ...
+
+        <!-- Content -->
+        <div class="container__content">
+            ...
+        </div>
+
+        <!-- Button sticks to the bottom -->
+        ...
+    </div>
+
+    <!-- Repeat with other columns -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        display: flex;
+                    }
+
+                    .container__column {
+                        flex: 1;
+                        /* Space between columns */
+                        margin: 0 8px;
+
+                        /* Layout each column */
+                        display: flex;
+                        flex-direction: column;
+                    }
+
+                    .container__content {
+                        /* Take available height */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ display: 'flex', height: '100%', width: '100%' }}>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.2)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                flex: 1,
+                                flexDirection: 'column',
+                                margin: '0 8px',
+                            }}
+                        >
+                            <Rectangle height={200} />
+                            <div style={{ flex: 1, padding: '16px' }}>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                            <div style={{ padding: '16px', width: '128px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.2)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                flex: 1,
+                                flexDirection: 'column',
+                                margin: '0 8px',
+                            }}
+                        >
+                            <Rectangle height={200} />
+                            <div style={{ flex: 1, padding: '16px' }}>
+                                <div style={{ marginBottom: '16px' }}>
+                                    <Block numberOfBlocks={15} />
+                                </div>
+                                <Block numberOfBlocks={5} />
+                            </div>
+                            <div style={{ padding: '16px', width: '128px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.2)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                flex: 1,
+                                flexDirection: 'column',
+                                margin: '0 8px',
+                            }}
+                        >
+                            <Rectangle height={200} />
+                            <div style={{ flex: 1, padding: '16px' }}>
+                                <div style={{ marginBottom: '16px' }}>
+                                    <Block numberOfBlocks={5} />
+                                </div>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                            <div style={{ padding: '16px', width: '128px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/search-box/index.tsx b/pages/search-box/index.tsx
new file mode 100644
index 0000000..b292b4d
--- /dev/null
+++ b/pages/search-box/index.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.SearchBox}>
+            <Head>
+                <meta name="description" content="Create a search box with CSS flexbox" />
+                <meta name="og:description" content="Create a search box with CSS flexbox" />
+                <meta name="twitter:description" content="Create a search box with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css search box" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Text input -->
+    <input type="text" class="container__input" />
+
+    <!-- Search icon sticks to the left or right -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        display: flex;
+
+                        /* If you want to place the icon before the text input */
+                        flex-direction: row-reverse;
+
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                    }
+
+                    .container__input {
+                        border-color: transparent;
+                        /* Take available width */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '256px' }}>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '2px',
+                                display: 'flex',
+                                marginBottom: '16px',
+                            }}
+                        >
+                            <input
+                                type="text"
+                                placeholder="Search"
+                                style={{
+                                    borderColor: 'transparent',
+                                    flex: 1,
+                                    padding: '4px',
+                                }}
+                            />
+                            <div style={{ padding: '8px' }}>
+                                <Circle />
+                            </div>
+                        </div>
+
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '2px',
+                                display: 'flex',
+                                flexDirection: 'row-reverse',
+                            }}
+                        >
+                            <input
+                                type="text"
+                                placeholder="Search"
+                                style={{
+                                    borderColor: 'transparent',
+                                    flex: 1,
+                                    padding: '4px',
+                                }}
+                            />
+                            <div style={{ padding: '8px' }}>
+                                <Circle />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/separator/index.tsx b/pages/separator/index.tsx
new file mode 100644
index 0000000..d178dd2
--- /dev/null
+++ b/pages/separator/index.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Separator}>
+            <Head>
+                <meta name="description" content="Create a separator with CSS flexbox" />
+                <meta name="og:description" content="Create a separator with CSS flexbox" />
+                <meta name="twitter:description" content="Create a separator with CSS flexbox" />
+                <meta name="keywords" content="css divider, css flexbox, css separator" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Text -->
+    <div class="container__content">
+        ...
+    </div>
+
+    <!-- Separator line -->
+    <div class="container__separator"></div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Content is centered horizontally */
+                        align-items: center;
+                        display: flex;
+
+                        /* Used to set the position of text */
+                        position: relative;
+                    }
+
+                    .container__content {
+                        /* We won't see the separator line */
+                        background: #fff;
+
+                        /* Displayed at the center of container */
+                        left: 50%;
+                        position: absolute;
+                        top: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+
+                    .container__separator {
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        height: 1px;
+                        width: 100%;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            position: 'relative',
+                            width: '60%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                left: '50%',
+                                padding: '0 8px',
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
+                            }}
+                        >
+                            <div style={{ width: '128px' }}>
+                                <Rectangle height={16} />
+                            </div>
+                        </div>
+                        <div
+                            style={{
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '1px',
+                                width: '100%',
+                            }}
+                        />
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/sidebar/index.tsx b/pages/sidebar/index.tsx
new file mode 100644
index 0000000..adc005e
--- /dev/null
+++ b/pages/sidebar/index.tsx
@@ -0,0 +1,98 @@
+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.Sidebar}>
+            <Head>
+                <meta name="description" content="Create a sidebar with CSS flexbox" />
+                <meta name="og:description" content="Create a sidebar with CSS flexbox" />
+                <meta name="twitter:description" content="Create a sidebar with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css layout, css sidebar" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Sidebar -->
+    <aside class="container__sidebar">
+        ...
+    </aside>
+
+    <!-- Main -->
+    <main class="container__main">
+        ...
+    </main>
+</div>
+`}
+                css={`
+                    .container {
+                        display: flex;
+                    }
+
+                    .container__sidebar {
+                        width: 30%;
+                    }
+
+                    .container__main {
+                        /* Take the remaining width */
+                        flex: 1;
+
+                        /* Make it scrollable */
+                        overflow: auto;
+                    }
+                `}
+            >
+                <div style={{ display: 'flex', height: '100%' }}>
+                    <div
+                        style={{
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'flex-end',
+                            padding: '16px',
+                            width: '30%',
+                        }}
+                    >
+                        <div style={{ marginBottom: '16px' }}>
+                            <Block numberOfBlocks={5} />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Block numberOfBlocks={4} />
+                        </div>
+                    </div>
+                    <div
+                        style={{
+                            flex: 1,
+                            overflow: 'auto',
+                            padding: '16px',
+                        }}
+                    >
+                        <div style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Block numberOfBlocks={10} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/simple-grid/Details.tsx b/pages/simple-grid/index.tsx
similarity index 82%
rename from client/patterns/simple-grid/Details.tsx
rename to pages/simple-grid/index.tsx
index 842afc1..61d0d9e 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/pages/simple-grid/index.tsx
@@ -1,28 +1,24 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
+import { Spacer } from '@1milligram/design';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.SimpleGrid}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.SimpleGrid}>
+            <Head>
                 <meta name="description" content="Create a simple grid with CSS flexbox" />
                 <meta name="og:description" content="Create a simple grid with CSS flexbox" />
                 <meta name="twitter:description" content="Create a simple grid with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
-            </Helmet>
+            </Head>
             <BrowserFrame
-html={`
+                html={`
 <!-- Row -->
 <div class="row">
     <!--Cell with given width. Replace 25% with whatever you want -->
@@ -34,28 +30,28 @@ html={`
     </div>
 </div>
 `}
-css={`
-.row {
-    display: flex;
+                css={`
+                    .row {
+                        display: flex;
 
-    margin-left: -8px;
-    margin-right: -8px;
-}
+                        margin-left: -8px;
+                        margin-right: -8px;
+                    }
 
-.row__cell {
-    padding-left: 8px;
-    padding-right: 8px;
-}
+                    .row__cell {
+                        padding-left: 8px;
+                        padding-right: 8px;
+                    }
 
-/* Cell with given width. Replace 25% with whatever you want */
-.row__cell--1/4 {
-    flex: 0 0 25%;
-}
+                    /* Cell with given width. Replace 25% with whatever you want */
+                    .row__cell--1/4 {
+                        flex: 0 0 25%;
+                    }
 
-.row__cell--fill {
-    flex: 1;
-}
-`}
+                    .row__cell--fill {
+                        flex: 1;
+                    }
+                `}
             >
                 <div
                     style={{
@@ -140,8 +136,9 @@ css={`
                 </div>
             </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.MasonryGrid]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/slider/index.tsx b/pages/slider/index.tsx
new file mode 100644
index 0000000..97e1915
--- /dev/null
+++ b/pages/slider/index.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Slider}>
+            <Head>
+                <meta name="description" content="Create a slider with CSS flexbox" />
+                <meta name="og:description" content="Create a slider with CSS flexbox" />
+                <meta name="twitter:description" content="Create a slider with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css slider" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Left side -->
+    <!-- Width based on the current value -->
+    <div class="container__left" style="width: 20%"></div>
+
+    <!-- Circle -->
+    <div class="container__circle"></div>
+
+    <!-- Right side -->
+    <div class="container__right"></div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Content is centered horizontally */
+                        align-items: center;
+                        display: flex;
+
+                        /* Size */
+                        height: 32px;
+                    }
+
+                    .container__left {
+                        height: 2px;
+
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.3);
+                    }
+
+                    .container__circle {
+                        /* Size */
+                        height: 32px;
+                        width: 32px;
+
+                        /* Rounded border */
+                        border-radius: 9999px;
+
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.3);
+                    }
+
+                    .container__right {
+                        /* Take the remaining width */
+                        flex: 1;
+                        height: 2px;
+
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.3);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '16px',
+                            width: '256px',
+                        }}
+                    >
+                        <div style={{ width: '20%' }}>
+                            <Rectangle height={2} />
+                        </div>
+                        <Circle size={32} />
+                        <div style={{ flex: 1 }}>
+                            <Rectangle height={2} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/spin-button/index.tsx b/pages/spin-button/index.tsx
new file mode 100644
index 0000000..4a26a1e
--- /dev/null
+++ b/pages/spin-button/index.tsx
@@ -0,0 +1,139 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Triangle from '../../placeholders/Triangle';
+
+const Details: React.FC<{}> = () => {
+    const [value, setValue] = React.useState(0);
+    const decrease = () => setValue(value - 1);
+    const increase = () => setValue(value + 1);
+    const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
+
+    return (
+        <PatternLayout pattern={Pattern.SpinButton}>
+            <Head>
+                <meta name="description" content="Create a spin button with CSS flexbox" />
+                <meta name="og:description" content="Create a spin button with CSS flexbox" />
+                <meta name="twitter:description" content="Create a spin button with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css spin button" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Input -->
+    <input type="text" class="container__input" />
+
+    <!-- Buttons container -->
+    <div class="container__buttons">
+        <!-- Up button -->
+        <button class="container__button">
+            ...
+        </button>
+
+        <!-- Down button -->
+        <button class="container__button">
+            ...
+        </button>
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 2px;
+                        display: flex;
+                    }
+
+                    .container__input {
+                        border-color: transparent;
+                        margin-right: 4px;
+                        padding: 4px;
+                        width: 100px;
+                    }
+
+                    .container__buttons {
+                        /* Content is centered vertically */
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                    }
+
+                    .container__button {
+                        border-color: transparent;
+                        /* Make buttons have the same height */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '2px',
+                            display: 'flex',
+                        }}
+                    >
+                        <input
+                            type="text"
+                            style={{
+                                borderColor: 'transparent',
+                                marginRight: '4px',
+                                padding: '4px',
+                                width: '100px',
+                            }}
+                            value={value}
+                            onChange={change}
+                        />
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    borderColor: 'transparent',
+                                    cursor: 'pointer',
+                                    flex: 1,
+                                    padding: '4px 4px 2px 4px',
+                                }}
+                                onClick={increase}
+                            >
+                                <Triangle size={6} corner="t" />
+                            </button>
+                            <button
+                                style={{
+                                    borderColor: 'transparent',
+                                    cursor: 'pointer',
+                                    flex: 1,
+                                    padding: '2px 4px 4px 4px',
+                                }}
+                                onClick={decrease}
+                            >
+                                <Triangle size={6} corner="b" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.StepperInput, Pattern.Voting]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/split-navigation/index.tsx b/pages/split-navigation/index.tsx
new file mode 100644
index 0000000..554b88c
--- /dev/null
+++ b/pages/split-navigation/index.tsx
@@ -0,0 +1,94 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.SplitNavigation}>
+            <Head>
+                <meta name="description" content="Create a split navigation with CSS flexbox" />
+                <meta name="og:description" content="Create a split navigation with CSS flexbox" />
+                <meta name="twitter:description" content="Create a split navigation with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" />
+            </Head>
+            <BrowserFrame
+                html={`
+<ul class="container">
+    <!-- Navigation item -->
+    <li>
+        <a href="">...</a>
+    </li>
+
+    <!-- Navigation item that sticks to the right -->
+    <li class="container__item--right">
+        <a href="">...</a>
+    </li>
+</ul>
+`}
+                css={`
+                    .container {
+                        /* Content is centered horizontally */
+                        align-items: center;
+                        display: flex;
+
+                        /* Reset styles */
+                        list-style-type: none;
+                        margin: 0;
+                    }
+
+                    .container__item--right {
+                        /* Sticks to the right */
+                        margin-left: auto;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <ul
+                        style={{
+                            alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '8px',
+                            display: 'flex',
+                            listStyleType: 'none',
+                            margin: 0,
+                            padding: '16px',
+                            width: '60%',
+                        }}
+                    >
+                        <li style={{ marginRight: '4px', width: '20%' }}>
+                            <Rectangle />
+                        </li>
+                        <li style={{ marginRight: '4px', width: '10%' }}>
+                            <Rectangle />
+                        </li>
+                        <li style={{ marginRight: '4px', width: '20%' }}>
+                            <Rectangle />
+                        </li>
+                        <li style={{ marginLeft: 'auto', width: '10%' }}>
+                            <Rectangle />
+                        </li>
+                    </ul>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/split-screen/index.tsx b/pages/split-screen/index.tsx
new file mode 100644
index 0000000..d89914b
--- /dev/null
+++ b/pages/split-screen/index.tsx
@@ -0,0 +1,86 @@
+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';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.SplitScreen}>
+            <Head>
+                <meta name="description" content="Create a split screen with CSS flexbox" />
+                <meta name="og:description" content="Create a split screen with CSS flexbox" />
+                <meta name="twitter:description" content="Create a split screen with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css layout, css split screen" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Left content -->
+    <div class="container__half">
+        ...
+    </div>
+
+    <!-- Right content -->
+    <div class="container__half">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        display: flex;
+                    }
+
+                    .container__half {
+                        flex: 1;
+                    }
+                `}
+            >
+                <div style={{ display: 'flex', height: '100%' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            flex: 1,
+                            flexDirection: 'column',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div style={{ marginBottom: '16px' }}>
+                            <Circle size={128} />
+                        </div>
+                        <div style={{ width: '60%' }}>
+                            <Rectangle />
+                        </div>
+                    </div>
+                    <div
+                        style={{
+                            display: 'flex',
+                            flex: 1,
+                            flexDirection: 'column',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div style={{ padding: '32px' }}>
+                            <div style={{ marginBottom: '32px' }}>
+                                <Rectangle />
+                            </div>
+                            <div style={{ marginBottom: '32px' }}>
+                                <Block numberOfBlocks={15} />
+                            </div>
+                            <Block numberOfBlocks={10} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/stacked-cards/Details.tsx b/pages/stacked-cards/index.tsx
similarity index 63%
rename from client/patterns/stacked-cards/Details.tsx
rename to pages/stacked-cards/index.tsx
index 3df76bf..791bae8 100644
--- a/client/patterns/stacked-cards/Details.tsx
+++ b/pages/stacked-cards/index.tsx
@@ -1,27 +1,23 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
+import { Spacer } from '@1milligram/design';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.StackedCards}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.StackedCards}>
+            <Head>
                 <meta name="description" content="Create stacked cards with CSS" />
                 <meta name="og:description" content="Create stacked cards with CSS" />
                 <meta name="twitter:description" content="Create stacked cards with CSS" />
                 <meta name="keywords" content="css card, css stacked cards, css transform rotate" />
-            </Helmet>
+            </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="container">
     <!-- Repeat if you want to have more cards -->
     <div class="container__card"></div>
@@ -30,33 +26,33 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    /* Used to position the stacked cards */
-    position: relative;
-}
+                css={`
+                    .container {
+                        /* Used to position the stacked cards */
+                        position: relative;
+                    }
 
-.container__card {
-    /* Absolute position */
-    left: 0px;
-    position: absolute;
-    top: 0px;
+                    .container__card {
+                        /* Absolute position */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
 
-    /* Take full size */
-    height: 100%;
-    width: 100%;
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
 
-    /* Displayed under the container */
-    z-index: -1;
+                        /* Displayed under the container */
+                        z-index: -1;
 
-    /* Background and border colors */
-    background-color: rgb(255, 255, 255);
-    border: 1px solid rgba(0, 0, 0, 0.3);
+                        /* Background and border colors */
+                        background-color: rgb(255, 255, 255);
+                        border: 1px solid rgba(0, 0, 0, 0.3);
 
-    /* Rotate it. Change the number of degrees for the following cards */
-    transform: rotate(5deg);
-}
-`}
+                        /* Rotate it. Change the number of degrees for the following cards */
+                        transform: rotate(5deg);
+                    }
+                `}
             >
                 <div
                     style={{
@@ -78,8 +74,9 @@ css={`
                             width: '200px',
                         }}
                     >
-                        {
-                            Array(5).fill(0).map((_, index) => {
+                        {Array(5)
+                            .fill(0)
+                            .map((_, index) => {
                                 return (
                                     <div
                                         key={index}
@@ -97,14 +94,14 @@ css={`
                                         }}
                                     />
                                 );
-                            })
-                        }
+                            })}
                     </div>
                 </div>
             </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.ThreeDimensionsCard]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/stamp-border/index.tsx b/pages/stamp-border/index.tsx
new file mode 100644
index 0000000..399ee9d
--- /dev/null
+++ b/pages/stamp-border/index.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.StampBorder}>
+            <Head>
+                <meta name="description" content="Create stamp border with CSS" />
+                <meta name="og:description" content="Create stamp border with CSS" />
+                <meta name="twitter:description" content="Create stamp border with CSS" />
+                <meta name="keywords" content="css radial gradient, css stamp border" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Inner -->
+    <div class="container__inner">
+        <!-- Content -->
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Background */
+                        background-color: #ccc;
+                        background-image: radial-gradient(#fff 50%, transparent 50%);
+                        background-position: -5px -5px;
+                        background-repeat: repeat;
+                        background-size: 10px 10px;
+
+                        /* Spacing */
+                        padding: 5px;
+                    }
+
+                    .container__inner {
+                        /* Background */
+                        background-color: #ccc;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#ccc',
+                            backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
+                            backgroundPosition: '-5px -5px',
+                            backgroundRepeat: 'repeat',
+                            backgroundSize: '10px 10px',
+                            height: '200px',
+                            padding: '5px',
+                            width: '200px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: '#ccc',
+                                height: '100%',
+                                width: '100%',
+                            }}
+                        />
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/statistic/index.tsx b/pages/statistic/index.tsx
new file mode 100644
index 0000000..32c9666
--- /dev/null
+++ b/pages/statistic/index.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { random } from '../../utils/random';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Statistic}>
+            <Head>
+                <meta name="description" content="Create a statistic component with CSS flexbox" />
+                <meta name="og:description" content="Create a statistic component with CSS flexbox" />
+                <meta name="twitter:description" content="Create a statistic component with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css statistic" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Value -->
+    <div class="container__value">
+        ...
+    </div>
+
+    <!-- Label -->
+    <div class="container__label">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Center the content */
+                        align-items: center;
+                        display: inline-flex;
+                        flex-direction: column;
+                    }
+
+                    .container__value {
+                        /* Big font size */
+                        font-size: 4rem;
+                        font-weight: 500;
+                    }
+
+                    .container__label {
+                        /* Smaller font size */
+                        font-size: 1rem;
+                        font-weight: 700;
+
+                        /* Uppercase the label */
+                        text-transform: uppercase;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'inline-flex',
+                            flexDirection: 'column',
+                        }}
+                    >
+                        <div style={{ fontSize: '4rem', fontWeight: 500 }}>{random(1000, 9999).toLocaleString()}</div>
+                        <div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>stars</div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/status-light/Details.tsx b/pages/status-light/index.tsx
similarity index 65%
rename from client/patterns/status-light/Details.tsx
rename to pages/status-light/index.tsx
index 2088f14..297485e 100644
--- a/client/patterns/status-light/Details.tsx
+++ b/pages/status-light/index.tsx
@@ -1,29 +1,23 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import Heading from '../../components/Heading';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { Heading, Spacer } from '@1milligram/design';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.StatusLight}>
-            <Helmet>
+        <PatternLayout pattern={Pattern.StatusLight}>
+            <Head>
                 <meta name="description" content="Create a status light with CSS flexbox" />
                 <meta name="og:description" content="Create a status light with CSS flexbox" />
                 <meta name="twitter:description" content="Create a status light with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css status light" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            </Head>
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Status light -->
     <div class="container__status"></div>
@@ -34,71 +28,71 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-}
+                css={`
+                    .container {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                    }
 
-.container__status {
-    /* Background color */
-    background-color: rgb(66, 153, 225);
+                    .container__status {
+                        /* Background color */
+                        background-color: rgb(66, 153, 225);
 
-    /* Rounded border */
-    border-radius: 9999px;
+                        /* Rounded border */
+                        border-radius: 9999px;
 
-    /* Size */
-    height: 8px;
-    width: 8px;
+                        /* Size */
+                        height: 8px;
+                        width: 8px;
 
-    /* Spacing */
-    margin-right: 8px;
-}
+                        /* Spacing */
+                        margin-right: 8px;
+                    }
 
-.container__content {
-    /* Take available width */
-    flex: 1;
-}
-`}
+                    .container__content {
+                        /* Take available width */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
                     <div
                         style={{
                             alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            display: 'inline-flex',
+                            width: '150px',
                         }}
                     >
                         <div
                             style={{
-                                alignItems: 'center',
-                                display: 'inline-flex',
-                                width: '150px',
+                                backgroundColor: '#4299e1',
+                                borderRadius: '9999px',
+                                height: '8px',
+                                marginRight: '8px',
+                                width: '8px',
                             }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: '#4299e1',
-                                    borderRadius: '9999px',
-                                    height: '8px',
-                                    marginRight: '8px',
-                                    width: '8px',
-                                }}
-                            />
+                        />
 
-                            <div style={{ flex: 1 }}>
-                                <Rectangle />
-                            </div>
+                        <div style={{ flex: 1 }}>
+                            <Rectangle />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
 
             <section>
-                <Heading title="Use cases" />
+                <Heading level={2}>Use cases</Heading>
 
                 <div style={{ padding: '48px' }}>
                     <div
@@ -127,7 +121,6 @@ css={`
                                         width: '8px',
                                     }}
                                 />
-
                                 In review
                             </div>
 
@@ -147,7 +140,6 @@ css={`
                                         width: '8px',
                                     }}
                                 />
-
                                 Draft
                             </div>
 
@@ -166,14 +158,13 @@ css={`
                                         width: '8px',
                                     }}
                                 />
-
                                 Published
                             </div>
                         </div>
                     </div>
                 </div>
             </section>
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/stepper-input/index.tsx b/pages/stepper-input/index.tsx
new file mode 100644
index 0000000..f04cc3d
--- /dev/null
+++ b/pages/stepper-input/index.tsx
@@ -0,0 +1,152 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    const [value, setValue] = React.useState(0);
+    const decrease = () => setValue(value - 1);
+    const increase = () => setValue(value + 1);
+    const change = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const v = parseInt(e.target.value, 10);
+        const newValue = isNaN(v) ? 0 : v;
+        setValue(newValue);
+    };
+
+    return (
+        <PatternLayout pattern={Pattern.StepperInput}>
+            <Head>
+                <meta name="description" content="Create a stepper input with CSS flexbox" />
+                <meta name="og:description" content="Create a stepper input with CSS flexbox" />
+                <meta name="twitter:description" content="Create a stepper input with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css stepper input" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="stepper">
+    <!-- Minus button -->
+    <button class="stepper__button">-</button>
+
+    <!-- Input container -->
+    <div class="stepper__content">
+        <input type="text" class="stepper__input" />
+    </div>
+
+    <!-- Plus button -->
+    <button class="stepper__button">+</button>
+</div>
+`}
+                css={`
+                    .stepper {
+                        display: flex;
+
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+
+                        /* Size */
+                        height: 32px;
+                        width: 128px;
+                    }
+
+                    .stepper__button {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Size */
+                        width: 32px;
+                    }
+
+                    .stepper__content {
+                        flex: 1;
+                    }
+
+                    .stepper__input {
+                        /* Take full size of its container */
+                        height: 100%;
+                        width: 100%;
+                    }
+                `}
+            >
+                <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: '8px',
+                            display: 'flex',
+                            height: '32px',
+                            width: '128px',
+                        }}
+                    >
+                        <button
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                                borderColor: 'transparent',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                width: '32px',
+                            }}
+                            onClick={decrease}
+                        >
+                            -
+                        </button>
+                        <div
+                            style={{
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                flex: 1,
+                                height: '100%',
+                            }}
+                        >
+                            <input
+                                type="text"
+                                style={{
+                                    borderColor: 'transparent',
+                                    height: '100%',
+                                    padding: '8px',
+                                    width: '100%',
+                                }}
+                                value={value}
+                                onChange={change}
+                            />
+                        </div>
+                        <button
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                                borderColor: 'transparent',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                width: '32px',
+                            }}
+                            onClick={increase}
+                        >
+                            +
+                        </button>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.SpinButton, Pattern.Voting]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/sticky-footer/index.tsx b/pages/sticky-footer/index.tsx
new file mode 100644
index 0000000..a1e2814
--- /dev/null
+++ b/pages/sticky-footer/index.tsx
@@ -0,0 +1,91 @@
+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';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.StickyFooter}>
+            <Head>
+                <meta name="description" content="Create a sticky footer with CSS flexbox" />
+                <meta name="og:description" content="Create a sticky footer with CSS flexbox" />
+                <meta name="twitter:description" content="Create a sticky footer with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css layout, css sticky, css sticky footer" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                The footer always sticks to the bottom if the main content is short.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <header class="container__header">
+        ...
+    </header>
+    <main class="container__main">
+        ...
+    </main>
+    <footer class="container__footer">
+        ...
+    </footer>
+</div>
+`}
+                css={`
+                    .container {
+                        display: flex;
+                        flex-direction: column;
+                        height: 100%;
+                    }
+
+                    .container__header,
+                    .container__footer {
+                        flex-shrink: 0;
+                    }
+
+                    .container__main {
+                        flex-grow: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            flexShrink: 0,
+                            padding: '16px',
+                        }}
+                    >
+                        <div style={{ width: '50%' }}>
+                            <Rectangle />
+                        </div>
+                    </div>
+                    <div style={{ flexGrow: 1, padding: '16px' }}>
+                        <Block numberOfBlocks={20} />
+                    </div>
+                    <div
+                        style={{
+                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                            flexShrink: 0,
+                            padding: '16px',
+                        }}
+                    >
+                        <div style={{ width: '40%' }}>
+                            <Rectangle />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/sticky-header/index.tsx b/pages/sticky-header/index.tsx
new file mode 100644
index 0000000..14d5548
--- /dev/null
+++ b/pages/sticky-header/index.tsx
@@ -0,0 +1,80 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.StickyHeader}>
+            <Head>
+                <meta name="description" content="Create a sticky header with CSS" />
+                <meta name="og:description" content="Create a sticky header with CSS" />
+                <meta name="twitter:description" content="Create a sticky header with CSS" />
+                <meta name="keywords" content="css layout, css position sticky, css sticky header" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Try to scroll the main content to see the header sticks to the top of page.
+            </div>
+            <BrowserFrame
+                html={`
+<div>
+    <header class="header">
+        ...
+    </header>
+    <main>
+        ...
+    </main>
+</div>
+`}
+                css={`
+                    .header {
+                        /* Stick to the top */
+                        position: sticky;
+                        top: 0;
+                    }
+                `}
+            >
+                <div>
+                    <div
+                        style={{
+                            backgroundColor: '#FFF',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            padding: '16px',
+                            position: 'sticky',
+                            top: 0,
+                        }}
+                    >
+                        <div style={{ width: '50%' }}>
+                            <Rectangle />
+                        </div>
+                    </div>
+                    <div style={{ padding: '16px' }}>
+                        <div style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={40} />
+                        </div>
+                        <div>
+                            <Block numberOfBlocks={30} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+
+            <RelatedPatterns
+                patterns={[Pattern.StickySections, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]}
+            />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/sticky-sections/index.tsx b/pages/sticky-sections/index.tsx
new file mode 100644
index 0000000..faac991
--- /dev/null
+++ b/pages/sticky-sections/index.tsx
@@ -0,0 +1,91 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.StickySections}>
+            <Head>
+                <meta name="description" content="Create sticky sections with CSS" />
+                <meta name="og:description" content="Create sticky sections with CSS" />
+                <meta name="twitter:description" content="Create sticky sections with CSS" />
+                <meta name="keywords" content="css layout, css sticky, css sticky sections" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Try to scroll the main content to see each section sticks to the top of page.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <section class="container__section">
+        ...
+    </section>
+
+    <!-- Repeat other sections -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        height: 100%;
+                        overflow: scroll;
+                    }
+
+                    .container__section {
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+
+                        /* Stick to the top */
+                        position: sticky;
+                        top: 0;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        overflow: 'scroll',
+                    }}
+                >
+                    <section
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            height: '100%',
+                            position: 'sticky',
+                            top: 0,
+                            width: '100%',
+                        }}
+                    />
+                    <section
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            height: '100%',
+                            position: 'sticky',
+                            top: 0,
+                            width: '100%',
+                        }}
+                    />
+                    <section
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                            height: '100%',
+                            position: 'sticky',
+                            top: 0,
+                            width: '100%',
+                        }}
+                    />
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/sticky-table-column/index.tsx b/pages/sticky-table-column/index.tsx
new file mode 100644
index 0000000..c4d24a1
--- /dev/null
+++ b/pages/sticky-table-column/index.tsx
@@ -0,0 +1,156 @@
+// tslint:disable:prefer-object-spread
+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';
+
+const Details: React.FC<{}> = () => {
+    const numberOfColumns = 10;
+    return (
+        <PatternLayout pattern={Pattern.StickyTableColumn}>
+            <Head>
+                <meta name="description" content="Create sticky table column with CSS" />
+                <meta name="og:description" content="Create sticky table column with CSS" />
+                <meta name="twitter:description" content="Create sticky table column with CSS" />
+                <meta name="keywords" content="css position sticky, css sticky table column" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Try to scroll the main content of table horizontally to see the first column sticks to the left.
+            </div>
+            <BrowserFrame
+                html={`
+<table>
+    <thead>
+        <tr>
+            <th class="header">
+                ...
+            </th>
+
+            <!-- Repeat other header column ... -->
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+`}
+                css={`
+                    .header {
+                        /* Background color */
+                        background-color: #ddd;
+
+                        /* Stick to the left */
+                        left: 0;
+                        position: sticky;
+
+                        /* Displayed on top of other rows when scrolling */
+                        z-index: 9999;
+                    }
+                `}
+            >
+                <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)',
+                            height: '400px',
+                            overflow: 'auto',
+                            width: '60%',
+                        }}
+                    >
+                        <table
+                            style={{
+                                borderCollapse: 'collapse',
+                                width: '100%',
+                            }}
+                        >
+                            <thead>
+                                <tr>
+                                    {Array(numberOfColumns)
+                                        .fill(0)
+                                        .map((_, index) => {
+                                            return (
+                                                <th
+                                                    key={index}
+                                                    style={
+                                                        index === 0
+                                                            ? {
+                                                                  backgroundColor: '#ddd',
+                                                                  left: 0,
+                                                                  padding: '16px',
+                                                                  position: 'sticky',
+                                                              }
+                                                            : {
+                                                                  padding: '16px',
+                                                              }
+                                                    }
+                                                >
+                                                    <div style={{ width: '200px' }}>
+                                                        {index === 0 ? <Rectangle /> : <Block numberOfBlocks={3} />}
+                                                    </div>
+                                                </th>
+                                            );
+                                        })}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {Array(10)
+                                    .fill(0)
+                                    .map((_, row) => {
+                                        return (
+                                            <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                                                {Array(numberOfColumns)
+                                                    .fill(0)
+                                                    .map((__, col) => {
+                                                        return (
+                                                            <td
+                                                                key={col}
+                                                                style={
+                                                                    col === 0
+                                                                        ? {
+                                                                              backgroundColor: '#ddd',
+                                                                              left: 0,
+                                                                              padding: '16px',
+                                                                              position: 'sticky',
+                                                                          }
+                                                                        : {
+                                                                              padding: '16px',
+                                                                          }
+                                                                }
+                                                            >
+                                                                {col === 0 ? (
+                                                                    <Rectangle />
+                                                                ) : (
+                                                                    <Block numberOfBlocks={3} />
+                                                                )}
+                                                            </td>
+                                                        );
+                                                    })}
+                                            </tr>
+                                        );
+                                    })}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/sticky-table-headers/index.tsx b/pages/sticky-table-headers/index.tsx
new file mode 100644
index 0000000..15d35b8
--- /dev/null
+++ b/pages/sticky-table-headers/index.tsx
@@ -0,0 +1,130 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.StickyTableHeaders}>
+            <Head>
+                <meta name="description" content="Create sticky table headers with CSS" />
+                <meta name="og:description" content="Create sticky table headers with CSS" />
+                <meta name="twitter:description" content="Create sticky table headers with CSS" />
+                <meta name="keywords" content="css position sticky, css sticky table headers" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Try to scroll the main content of table to see the header sticks to the top.
+            </div>
+            <BrowserFrame
+                html={`
+<table>
+    <thead>
+        <tr>
+            <th class="header">
+                ...
+            </th>
+
+            <!-- Repeat other header column ... -->
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+`}
+                css={`
+                    .header {
+                        /* Background color */
+                        background-color: #ddd;
+
+                        /* Stick to the top */
+                        position: sticky;
+                        top: 0;
+
+                        /* Displayed on top of other rows when scrolling */
+                        z-index: 9999;
+                    }
+                `}
+            >
+                <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)',
+                            height: '400px',
+                            overflow: 'auto',
+                            width: '60%',
+                        }}
+                    >
+                        <table
+                            style={{
+                                borderCollapse: 'collapse',
+                                width: '100%',
+                            }}
+                        >
+                            <thead>
+                                <tr>
+                                    {Array(3)
+                                        .fill(0)
+                                        .map((_, index) => {
+                                            return (
+                                                <th
+                                                    key={index}
+                                                    style={{
+                                                        backgroundColor: '#ddd',
+                                                        padding: '16px',
+                                                        position: 'sticky',
+                                                        top: 0,
+                                                        zIndex: 9999,
+                                                    }}
+                                                >
+                                                    <Rectangle />
+                                                </th>
+                                            );
+                                        })}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {Array(10)
+                                    .fill(0)
+                                    .map((_, row) => {
+                                        return (
+                                            <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                                                {Array(3)
+                                                    .fill(0)
+                                                    .map((__, col) => {
+                                                        return (
+                                                            <td key={col} style={{ padding: '16px' }}>
+                                                                <Block numberOfBlocks={3} />
+                                                            </td>
+                                                        );
+                                                    })}
+                                            </tr>
+                                        );
+                                    })}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+
+            <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableColumn]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/switch/index.tsx b/pages/switch/index.tsx
new file mode 100644
index 0000000..39504ef
--- /dev/null
+++ b/pages/switch/index.tsx
@@ -0,0 +1,122 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    const [checked, setChecked] = React.useState(false);
+    const toggle = () => setChecked((c) => !c);
+
+    return (
+        <PatternLayout pattern={Pattern.Switch}>
+            <Head>
+                <meta name="description" content="Create a switch with CSS flexbox" />
+                <meta name="og:description" content="Create a switch with CSS flexbox" />
+                <meta name="twitter:description" content="Create a switch with CSS flexbox" />
+                <meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even
+                though it's hidden.
+            </div>
+            <BrowserFrame
+                html={`
+<label class="label">
+    <input type="checkbox" class="label__input" />
+
+    <!-- Circle -->
+    <div class="label__circle"></div>
+</label>
+`}
+                css={`
+                    .label {
+                        display: flex;
+
+                        /* Rounded border */
+                        border-radius: 9999px;
+
+                        /* Size */
+                        height: 32px;
+                        width: 64px;
+
+                        /* OFF status */
+                        background-color: rgba(0, 0, 0, 0.1);
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+
+                        /* ON status */
+                        background-color: #357edd;
+                        border: 1px solid #357edd;
+                        /* Push the circle to the right */
+                        justify-content: flex-end;
+                    }
+
+                    .label__input {
+                        /* Hide the input */
+                        display: none;
+                    }
+
+                    .label__circle {
+                        /* Rounded border */
+                        border-radius: 9999px;
+
+                        /* Size */
+                        width: 32px;
+
+                        background-color: #fff;
+
+                        /* OFF status */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <label
+                        htmlFor="checkbox-switch"
+                        style={{
+                            backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
+                            border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
+                            borderRadius: '9999px',
+                            display: 'flex',
+                            height: '32px',
+                            justifyContent: checked ? 'flex-end' : '',
+                            width: '64px',
+                        }}
+                    >
+                        <input
+                            id="checkbox-switch"
+                            type="checkbox"
+                            style={{ display: 'none' }}
+                            checked={checked}
+                            onChange={toggle}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: '#FFF',
+                                border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '9999px',
+                                width: '32px',
+                            }}
+                        />
+                    </label>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.RadioSwitch]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/tab/index.tsx b/pages/tab/index.tsx
new file mode 100644
index 0000000..5a222e9
--- /dev/null
+++ b/pages/tab/index.tsx
@@ -0,0 +1,122 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+interface TabProps {
+    tabIndex: number;
+}
+
+const Details: React.FC<{}> = () => {
+    const [activeTab, setActiveTab] = React.useState(0);
+
+    const Tab: React.FC<TabProps> = ({ tabIndex, children }) => {
+        const isActive = tabIndex === activeTab;
+        const click = () => setActiveTab(tabIndex);
+        return (
+            <div
+                style={{
+                    [isActive ? 'border' : 'borderBottom']: '1px solid rgba(0, 0, 0, 0.3)',
+                    borderBottomColor: isActive ? 'transparent' : 'rgba(0, 0, 0, 0.3)',
+                    borderTopLeftRadius: '4px',
+                    borderTopRightRadius: '4px',
+                    cursor: 'pointer',
+                    padding: '16px',
+                }}
+                onClick={click}
+            >
+                {children}
+            </div>
+        );
+    };
+
+    return (
+        <PatternLayout pattern={Pattern.Tab}>
+            <Head>
+                <meta name="description" content="Create tabs with CSS flexbox" />
+                <meta name="og:description" content="Create tabs with CSS flexbox" />
+                <meta name="twitter:description" content="Create tabs with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css navigation, css tab" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="tabs">
+    <!-- Active tab -->
+    <div class="tabs__tab--active">
+        ...
+    </div>
+
+    <!-- Inactive tab -->
+    <div class="tabs__tab--inactive">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .tabs {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                    .tabs__tab--active {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        /* Hide the bottom border */
+                        border-bottom-color: transparent;
+
+                        /* Border radius */
+                        border-top-left-radius: 2px;
+                        border-top-right-radius: 2px;
+                    }
+
+                    .tabs__tab--inactive {
+                        /* Has only the bottom border */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <Tab tabIndex={0}>
+                            <div style={{ width: '64px' }}>
+                                <Rectangle height={8} />
+                            </div>
+                        </Tab>
+                        <Tab tabIndex={1}>
+                            <div style={{ width: '32px' }}>
+                                <Rectangle height={8} />
+                            </div>
+                        </Tab>
+                        <Tab tabIndex={2}>
+                            <div style={{ width: '128px' }}>
+                                <Rectangle height={8} />
+                            </div>
+                        </Tab>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/teardrop/index.tsx b/pages/teardrop/index.tsx
new file mode 100644
index 0000000..1c091ed
--- /dev/null
+++ b/pages/teardrop/index.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Teardrop}>
+            <Head>
+                <meta name="description" content="Create a teardrop with CSS" />
+                <meta name="og:description" content="Create a teardrop with CSS" />
+                <meta name="twitter:description" content="Create a teardrop with CSS" />
+                <meta
+                    name="keywords"
+                    content="css border radius, css teardrop, css water drop shape, css water droplet"
+                />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Display the content vertically -->
+    <div class="container__content">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Border */
+                        border: 2px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 0px 50% 50% 50%;
+
+                        /* Angle at the top */
+                        transform: rotate(45deg);
+
+                        /* Size */
+                        height: 64px;
+                        width: 64px;
+                    }
+
+                    .container__content {
+                        transform: rotate(-45deg);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            border: '2px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '0 50% 50% 50%',
+                            display: 'flex',
+                            height: '64px',
+                            justifyContent: 'center',
+                            transform: 'rotate(45deg)',
+                            width: '64px',
+                        }}
+                    >
+                        <div style={{ transform: 'rotate(-45deg)' }}>
+                            <Circle />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/three-dimensions-card/index.tsx b/pages/three-dimensions-card/index.tsx
new file mode 100644
index 0000000..c569776
--- /dev/null
+++ b/pages/three-dimensions-card/index.tsx
@@ -0,0 +1,96 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.ThreeDimensionsCard}>
+            <Head>
+                <meta name="description" content="Create a 3D card with CSS" />
+                <meta name="og:description" content="Create a 3D card with CSS" />
+                <meta name="twitter:description" content="Create a 3D card with CSS" />
+                <meta name="keywords" content="css 3D card" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="three-dimensions-card">
+    ...
+</div>
+`}
+                css={`
+                    :root {
+                        --three-dimensions-card-left-side-width: 1rem;
+                    }
+
+                    .three-dimensions-card {
+                        position: relative;
+                    }
+
+                    /* The left side */
+                    .three-dimensions-card::before {
+                        background: rgba(0, 0, 0, 0.3);
+                        content: '';
+
+                        /* Position */
+                        top: var(--three-dimensions-card-left-side-width);
+                        left: 0px;
+                        position: absolute;
+                        transform: translate(-100%, 0) skewY(-45deg);
+                        transform-origin: left top;
+
+                        /* Size */
+                        height: 100%;
+                        width: var(--three-dimensions-card-left-side-width);
+                    }
+
+                    /* The bottom side */
+                    .three-dimensions-card::after {
+                        background: rgba(0, 0, 0, 0.3);
+                        content: '';
+
+                        /* Position */
+                        bottom: 0px;
+                        left: 0px;
+                        position: absolute;
+                        transform: translate(0, 100%) skewX(-45deg);
+                        transform-origin: left top;
+
+                        /* Size */
+                        height: var(--three-dimensions-card-left-side-width);
+                        width: 100%;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div className="three-dimensions-card">
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '8rem',
+                                width: '16rem',
+                            }}
+                        />
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.StackedCards]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/timeline/Details.tsx b/pages/timeline/index.tsx
similarity index 62%
rename from client/patterns/timeline/Details.tsx
rename to pages/timeline/index.tsx
index e83ddde..6ad9560 100644
--- a/client/patterns/timeline/Details.tsx
+++ b/pages/timeline/index.tsx
@@ -1,14 +1,10 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Spacer } from '@1milligram/design';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import DetailsLayout from '../../layouts/DetailsLayout';
+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';
@@ -16,15 +12,15 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Timeline}>
-            <Helmet>
+        <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" />
-            </Helmet>
+            </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="container">
     <!-- Left vertical line -->
     <div class="container__line"></div>
@@ -55,62 +51,62 @@ html={`
     </ul>
 </div>
 `}
-css={`
-.container {
-    /* Used to position the left vertical line */
-    position: relative;
-}
+                css={`
+                    .container {
+                        /* Used to position the left vertical line */
+                        position: relative;
+                    }
 
-.container__line {
-    /* Border */
-    border-right: 2px solid #aaa;
+                    .container__line {
+                        /* Border */
+                        border-right: 2px solid #aaa;
 
-    /* Positioned at the left */
-    left: 16px;
-    position: absolute;
-    top: 0px;
+                        /* Positioned at the left */
+                        left: 16px;
+                        position: absolute;
+                        top: 0px;
 
-    /* Take full height */
-    height: 100%;
-}
+                        /* Take full height */
+                        height: 100%;
+                    }
 
-.container__items {
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0px;
-    padding: 0px;
-}
+                    .container__items {
+                        /* Reset styles */
+                        list-style-type: none;
+                        margin: 0px;
+                        padding: 0px;
+                    }
 
-.container__item {
-    margin-bottom: 8px;
-}
+                    .container__item {
+                        margin-bottom: 8px;
+                    }
 
-.container__top {
-    /* Center the content horizontally */
-    align-items: center;
-    display: flex;
-}
+                    .container__top {
+                        /* Center the content horizontally */
+                        align-items: center;
+                        display: flex;
+                    }
 
-.container__circle {
-    /* Rounded border */
-    background-color: rgb(170, 170, 170);
-    border-radius: 9999px;
+                    .container__circle {
+                        /* Rounded border */
+                        background-color: rgb(170, 170, 170);
+                        border-radius: 9999px;
 
-    /* Size */
-    height: 32px;
-    width: 32px;
-}
+                        /* Size */
+                        height: 32px;
+                        width: 32px;
+                    }
 
-.container__title {
-    /* Take available width */
-    flex: 1;
-}
+                    .container__title {
+                        /* Take available width */
+                        flex: 1;
+                    }
 
-.container__desc {
-    /* Make it align with the title */
-    margin-left: 48px;
-}
-`}
+                    .container__desc {
+                        /* Make it align with the title */
+                        margin-left: 48px;
+                    }
+                `}
             >
                 <div
                     style={{
@@ -146,9 +142,11 @@ css={`
                         >
                             <li style={{ marginBottom: '8px' }}>
                                 <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                    <Circle backgroundColor='#aaa' size={32} />
+                                    <Circle backgroundColor="#aaa" size={32} />
                                     <div style={{ flex: 1, marginLeft: '16px' }}>
-                                        <div style={{ width: '80%' }}><Rectangle /></div>
+                                        <div style={{ width: '80%' }}>
+                                            <Rectangle />
+                                        </div>
                                     </div>
                                 </div>
                                 <div style={{ marginLeft: '48px' }}>
@@ -157,9 +155,11 @@ css={`
                             </li>
                             <li style={{ marginBottom: '8px' }}>
                                 <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                    <Circle backgroundColor='#aaa' size={32} />
+                                    <Circle backgroundColor="#aaa" size={32} />
                                     <div style={{ flex: 1, marginLeft: '16px' }}>
-                                        <div style={{ width: '60%' }}><Rectangle /></div>
+                                        <div style={{ width: '60%' }}>
+                                            <Rectangle />
+                                        </div>
                                     </div>
                                 </div>
                                 <div style={{ marginLeft: '48px' }}>
@@ -168,9 +168,11 @@ css={`
                             </li>
                             <li style={{ marginBottom: '8px' }}>
                                 <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                    <Circle backgroundColor='#aaa' size={32} />
+                                    <Circle backgroundColor="#aaa" size={32} />
                                     <div style={{ flex: 1, marginLeft: '16px' }}>
-                                        <div style={{ width: '60%' }}><Rectangle /></div>
+                                        <div style={{ width: '60%' }}>
+                                            <Rectangle />
+                                        </div>
                                     </div>
                                 </div>
                                 <div style={{ marginLeft: '48px' }}>
@@ -182,8 +184,9 @@ css={`
                 </div>
             </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.ZigzagTimeline]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/toggle-password-visibility/index.tsx b/pages/toggle-password-visibility/index.tsx
new file mode 100644
index 0000000..e9c4d0b
--- /dev/null
+++ b/pages/toggle-password-visibility/index.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    const [visible, setVisible] = React.useState(false);
+    const toggle = () => setVisible((v) => !v);
+
+    return (
+        <PatternLayout pattern={Pattern.TogglePasswordVisibility}>
+            <Head>
+                <meta name="description" content="Create a toggle password visibility with CSS flexbox" />
+                <meta name="og:description" content="Create a toggle password visibility with CSS flexbox" />
+                <meta name="twitter:description" content="Create a toggle password visibility with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, toggle password visibility" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Text input -->
+    <input type="text" class="container__input" />
+
+    <!-- Toggle button sticks to the right -->
+    <button>
+        ...
+    </button>
+</div>
+`}
+                css={`
+                    .container {
+                        display: flex;
+
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                    }
+
+                    .container__input {
+                        border-color: transparent;
+                        /* Take available width */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '256px' }}>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                            }}
+                        >
+                            <input
+                                type={visible ? 'text' : 'password'}
+                                autoComplete="off"
+                                style={{
+                                    borderColor: 'transparent',
+                                    flex: 1,
+                                    marginLeft: '1px',
+                                    padding: '4px',
+                                }}
+                            />
+                            <button
+                                style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
+                                onClick={toggle}
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    style={{
+                                        fill: 'none',
+                                        height: '24px',
+                                        stroke: 'rgba(0, 0, 0, 0.4)',
+                                        strokeLinecap: 'round',
+                                        strokeLinejoin: 'round',
+                                        strokeWidth: 1,
+                                        width: '24px',
+                                    }}
+                                >
+                                    <path
+                                        d={
+                                            visible
+                                                ? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
+                                                : `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
+                                        }
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/tooltip/index.tsx b/pages/tooltip/index.tsx
new file mode 100644
index 0000000..ffd3726
--- /dev/null
+++ b/pages/tooltip/index.tsx
@@ -0,0 +1,136 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Tooltip}>
+            <Head>
+                <meta name="description" content="Create a tooltip with CSS" />
+                <meta name="og:description" content="Create a tooltip with CSS" />
+                <meta name="twitter:description" content="Create a tooltip with CSS" />
+                <meta name="keywords" content="css tooltip" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                Move the mouser over the main element to see the tooltip.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The tooltip content -->
+    <div class="container__content">
+        ...
+    </div>
+
+    <!-- The tooltip arrow -->
+    <div class="container__arrow" />
+
+    <!-- The trigger element -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        /* Used to position the arrow */
+                        position: relative;
+                    }
+
+                    /* Show the arrow and content and restore pointer events when hovering the trigger element */
+                    .container:hover .container__arrow,
+                    .container:hover .container__content {
+                        opacity: 1;
+                        pointer-events: initial;
+                    }
+
+                    .container__arrow {
+                        /* Invisible by default */
+                        opacity: 0;
+
+                        /* To prevent accidental interactions with other elements  */
+                        pointer-events: none;
+
+                        /* Border */
+                        border: 8px solid transparent;
+                        border-top-color: #00439e;
+
+                        /* Position */
+                        bottom: 100%;
+                        left: 50%;
+                        position: absolute;
+                        transform: translate(-50%, 8px);
+
+                        /* Zero size */
+                        height: 0;
+                        width: 0;
+
+                        /* Displayed on top of other element */
+                        z-index: 10;
+                    }
+
+                    .container__content {
+                        /* Invisible by default */
+                        opacity: 0;
+
+                        /* To prevent accidental interactions with other elements  */
+                        pointer-events: none;
+
+                        /* Background color, must be the same as the border color of arrow */
+                        background-color: #00439e;
+                        border-radius: 2px;
+
+                        /* Position */
+                        bottom: 100%;
+                        left: 50%;
+                        position: absolute;
+                        transform: translate(-50%, -8px);
+
+                        /* Displayed on top of other element */
+                        z-index: 10;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        className="p-tooltip"
+                        style={{
+                            marginBottom: '16px',
+                            width: '150px',
+                        }}
+                    >
+                        <div
+                            className="p-tooltip-content"
+                            style={{
+                                padding: '8px',
+                                width: '200px',
+                            }}
+                        >
+                            <Block backgroundColor="#fff" justify="center" numberOfBlocks={5} />
+                        </div>
+                        <div className="p-tooltip-arrow" />
+                        <Rectangle height={32} />
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.PopoverArrow]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/tree-diagram/index.tsx b/pages/tree-diagram/index.tsx
new file mode 100644
index 0000000..b4a549e
--- /dev/null
+++ b/pages/tree-diagram/index.tsx
@@ -0,0 +1,197 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+import Square from '../../placeholders/Square';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.TreeDiagram}>
+            <Head>
+                <meta name="description" content="Create a tree diagram with CSS" />
+                <meta name="og:description" content="Create a tree diagram with CSS" />
+                <meta name="twitter:description" content="Create a tree diagram with CSS" />
+                <meta name="keywords" content="css sitemap, css tree diagram" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="tree-diagram">
+    <ul>
+        <li>
+            <!-- Content -->
+            ...
+
+            <!-- Sub items -->
+            <ul>
+                <li>
+                    <!-- Content -->
+                    ...
+
+                    <!-- Sub items -->
+                    <ul>
+                        <li>...</li>
+                        <li>...</li>
+                        ...
+                    </ul>
+                </li>
+                <li>...</li>
+                ...
+            </ul>
+        </li>
+        
+        <!-- Repeat other items -->
+        ...
+    </ul>
+</div>
+`}
+                css={`
+                    .tree-diagram ul {
+                        display: flex;
+                        position: relative;
+
+                        /* Reset */
+                        list-style-type: none;
+                        margin: 0;
+                        padding: 1rem 0.5rem 0rem 0.5rem;
+                    }
+
+                    .tree-diagram ul ul::before {
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        content: '';
+
+                        /* Position */
+                        position: absolute;
+                        top: 0;
+                        right: 50%;
+
+                        /* Size */
+                        height: 1rem;
+                        width: 50%;
+                    }
+
+                    .tree-diagram li {
+                        padding: 1rem 0.5rem 0rem 0.5rem;
+                        position: relative;
+
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        flex-direction: column;
+                    }
+
+                    .tree-diagram li::before {
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        content: '';
+
+                        /* Position */
+                        position: absolute;
+                        top: 0;
+                        right: 50%;
+
+                        /* Size */
+                        height: 1rem;
+                        width: 50%;
+                    }
+
+                    .tree-diagram li::after {
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        content: '';
+
+                        /* Position */
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+
+                        /* Size */
+                        width: 50%;
+                    }
+
+                    .tree-diagram li:first-child::before,
+                    .tree-diagram li:last-child::after {
+                        /* Remove the top of border from the first and last items */
+                        border-top: none;
+                    }
+
+                    /* Add a root item if you want */
+                    li.tree-diagram__root::before {
+                        border-right: none;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '0.5rem',
+                    }}
+                >
+                    <div className="tree-diagram">
+                        <ul>
+                            <li className="tree-diagram__root">
+                                <Square size="2.5rem" />
+                                <ul>
+                                    <li>
+                                        <Square size="2rem" />
+                                        <ul>
+                                            <li>
+                                                <Square size="1.5rem" />
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <Square size="2rem" />
+                                        <ul>
+                                            <li>
+                                                <Square size="1.5rem" />
+                                                <ul>
+                                                    <li>
+                                                        <Square size="1rem" />
+                                                    </li>
+                                                    <li>
+                                                        <Square size="1rem" />
+                                                    </li>
+                                                    <li>
+                                                        <Square size="1rem" />
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                            <li>
+                                                <Square size="1.5rem" />
+                                            </li>
+                                            <li>
+                                                <Square size="1.5rem" />
+                                                <ul>
+                                                    <li>
+                                                        <Square size="1rem" />
+                                                    </li>
+                                                    <li>
+                                                        <Square size="1rem" />
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <Square size="2rem" />
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.FolderStructure]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/triangle-buttons/index.tsx b/pages/triangle-buttons/index.tsx
new file mode 100644
index 0000000..a405e13
--- /dev/null
+++ b/pages/triangle-buttons/index.tsx
@@ -0,0 +1,242 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.TriangleButtons}>
+            <Head>
+                <meta name="description" content="Create triangle buttons with CSS" />
+                <meta name="og:description" content="Create triangle buttons with CSS" />
+                <meta name="twitter:description" content="Create triangle buttons with CSS" />
+                <meta name="keywords" content="css triangle buttons" />
+            </Head>
+            <BrowserFrame
+                html={`
+<!-- Up triangle button -->
+<button class="container">
+    <!-- Triangle -->
+    <div class="container__triangle container__triangle--up"></div>
+
+    <!-- Content -->
+    ...
+</button>
+
+<!-- Right triangle button -->
+<button class="container">
+    <!-- Content -->
+    ...
+
+    <!-- Triangle -->
+    <div class="container__triangle container__triangle--right"></div>
+</button>
+
+<!-- Down triangle button -->
+<button class="container">
+    <!-- Triangle -->
+    <div class="container__triangle container__triangle--down"></div>
+
+    <!-- Content -->
+    ...
+</button>
+
+<!-- Left triangle button -->
+<button class="container">
+    <!-- Triangle -->
+    <div class="container__triangle container__triangle--left"></div>
+
+    <!-- Content -->
+    ...
+</button>
+`}
+                css={`
+                    .container {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Spacing */
+                        padding: 8px;
+                    }
+
+                    .container__triangle {
+                        border-style: solid;
+
+                        /* Size */
+                        height: 0px;
+                        width: 0px;
+                    }
+
+                    .container__triangle--up {
+                        border-color: transparent transparent rgba(0, 0, 0, 0.3);
+                        border-width: 0px 8px 8px;
+                    }
+
+                    .container__triangle--right {
+                        border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
+                        border-width: 8px 0px 8px 8px;
+                    }
+
+                    .container__triangle--down {
+                        border-color: rgba(0, 0, 0, 0.3) transparent transparent;
+                        border-width: 8px 8px 0px;
+                    }
+
+                    .container__triangle--left {
+                        border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
+                        border-width: 8px 8px 8px 0px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '200px',
+                            position: 'relative',
+                            width: '200px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                left: '50%',
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(-50%, -50%)',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
+                                        borderStyle: 'solid',
+                                        borderWidth: '0px 8px 8px 8px',
+                                        height: 0,
+                                        width: 0,
+                                    }}
+                                />
+                                <div style={{ marginLeft: '8px' }}>Up</div>
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                position: 'absolute',
+                                right: 0,
+                                top: '50%',
+                                transform: 'translate(50%, -50%)',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <div style={{ marginRight: '8px' }}>Right</div>
+                                <div
+                                    style={{
+                                        borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
+                                        borderStyle: 'solid',
+                                        borderWidth: '8px 0px 8px 8px',
+                                        height: 0,
+                                        width: 0,
+                                    }}
+                                />
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                bottom: 0,
+                                left: '50%',
+                                position: 'absolute',
+                                transform: 'translate(-50%, 50%)',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
+                                        borderStyle: 'solid',
+                                        borderWidth: '8px 8px 0px 8px',
+                                        height: 0,
+                                        width: 0,
+                                    }}
+                                />
+                                <div style={{ marginLeft: '8px' }}>Down</div>
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                left: 0,
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
+                                        borderStyle: 'solid',
+                                        borderWidth: '8px 8px 8px 0px',
+                                        height: 0,
+                                        width: 0,
+                                    }}
+                                />
+                                <div style={{ marginLeft: '8px' }}>Left</div>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.PriceTag, Pattern.Voting]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/upload-button/index.tsx b/pages/upload-button/index.tsx
new file mode 100644
index 0000000..d00b902
--- /dev/null
+++ b/pages/upload-button/index.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.UploadButton}>
+            <Head>
+                <meta name="description" content="Create an upload button with CSS flexbox" />
+                <meta name="og:description" content="Create an upload button with CSS flexbox" />
+                <meta name="twitter:description" content="Create an upload button with CSS flexbox" />
+                <meta name="keywords" content="css file input, css flexbox, css upload button" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>You can click the button to choose a file.</div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The real file input -->
+    <input type="file" class="container__input" />
+
+    <!-- The upload icon -->
+    <div class="container__icon">...</div>
+
+    <!-- The label -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        /* Used to position the input */
+                        position: relative;
+
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                    }
+
+                    .container__input {
+                        /* Take the full size */
+                        height: 100%;
+                        left: 0;
+                        position: absolute;
+                        top: 0;
+                        width: 100%;
+
+                        /* Make it transparent */
+                        opacity: 0;
+                    }
+
+                    .container__icon {
+                        margin-right: 8px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ width: '128px' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                padding: '8px',
+                                position: 'relative',
+                                width: '100%',
+                            }}
+                        >
+                            <input
+                                type="file"
+                                style={{
+                                    height: '100%',
+                                    left: 0,
+                                    opacity: 0,
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            />
+                            <div style={{ marginRight: '8px' }}>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    style={{
+                                        fill: 'none',
+                                        height: '24',
+                                        stroke: 'rgba(0, 0, 0, 0.4)',
+                                        strokeLinecap: 'round',
+                                        strokeLinejoin: 'round',
+                                        strokeWidth: 1,
+                                        width: '24',
+                                    }}
+                                >
+                                    <path
+                                        d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
+                                            c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
+                                            H18.5z
+                                            M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
+                                    />
+                                </svg>
+                            </div>
+                            <Rectangle />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/validation-icon/index.tsx b/pages/validation-icon/index.tsx
new file mode 100644
index 0000000..2452e05
--- /dev/null
+++ b/pages/validation-icon/index.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import Head from 'next/head';
+
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.ValidationIcon}>
+            <Head>
+                <meta name="description" content="Add validation icons to input with CSS" />
+                <meta name="og:description" content="Add validation icons to input with CSS" />
+                <meta name="twitter:description" content="Add validation icons to input with CSS" />
+                <meta name="keywords" content="css validation icon" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The input -->
+    <input class="container__input" />
+
+    <!-- The icon container -->
+    <span class="container__icon">
+        <!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
+        ...
+    </span>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Used to position the validation icon */
+                        position: relative;
+                    }
+
+                    .container__input {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 4px;
+
+                        /* Take the full width */
+                        width: 100%;
+
+                        /* Don't overlap the icon */
+                        padding-right: 24px;
+                    }
+
+                    .container__icon {
+                        /* Positioned at the right side */
+                        position: absolute;
+                        right: 8px;
+                        top: 50%;
+                        transform: translate(0, -50%);
+
+                        z-index: 10;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div
+                        style={{
+                            marginBottom: '16px',
+                            position: 'relative',
+                            width: '200px',
+                        }}
+                    >
+                        <input
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                height: '32px',
+                                paddingRight: '24px',
+                                width: '100%',
+                            }}
+                        />
+                        <i
+                            style={{
+                                position: 'absolute',
+                                right: '8px',
+                                top: '50%',
+                                transform: 'translate(0, -50%)',
+                                zIndex: 10,
+                            }}
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                style={{
+                                    fill: 'none',
+                                    height: '16px',
+                                    stroke: 'rgba(0, 0, 0, 0.5)',
+                                    strokeLinecap: 'round',
+                                    strokeLinejoin: 'round',
+                                    strokeWidth: 2,
+                                    width: '16px',
+                                }}
+                            >
+                                <path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
+                            </svg>
+                        </i>
+                    </div>
+
+                    <div
+                        style={{
+                            marginBottom: '16px',
+                            position: 'relative',
+                            width: '200px',
+                        }}
+                    >
+                        <input
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                height: '32px',
+                                paddingRight: '24px',
+                                width: '100%',
+                            }}
+                        />
+                        <i
+                            style={{
+                                position: 'absolute',
+                                right: '8px',
+                                top: '50%',
+                                transform: 'translate(0, -50%)',
+                                zIndex: 10,
+                            }}
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                style={{
+                                    fill: 'none',
+                                    height: '16px',
+                                    stroke: '#e7040f',
+                                    strokeLinecap: 'round',
+                                    strokeLinejoin: 'round',
+                                    strokeWidth: 2,
+                                    width: '16px',
+                                }}
+                            >
+                                <path d={`M0.5,0.499l23,23 M23.5,0.499l-23,23`} />
+                            </svg>
+                        </i>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/video-background/index.tsx b/pages/video-background/index.tsx
new file mode 100644
index 0000000..697e535
--- /dev/null
+++ b/pages/video-background/index.tsx
@@ -0,0 +1,155 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.VideoBackground}>
+            <Head>
+                <meta name="description" content="Add video background with CSS flexbox" />
+                <meta name="og:description" content="Add video background with CSS flexbox" />
+                <meta name="twitter:description" content="Add video background with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, object fit cover" />
+            </Head>
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                In this pattern, the video is displayed in the background.
+            </div>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- The video container -->
+    <div class="container__wrapper">
+        <video class="container__video" src="...">
+            ...
+        </video>
+    </div>
+
+    <!-- The content -->
+    <div class="container__content">
+        ...
+    </div>
+</div>
+`}
+                css={`
+                    .container {
+                        /* Used to position the video and content */
+                        position: relative;
+                    }
+
+                    .container__wrapper {
+                        /* Positioned at the top left corner */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
+
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+
+                        /* Hide the scrollbar */
+                        overflow: hidden;
+                    }
+
+                    .container__video {
+                        object-fit: cover;
+
+                        /* Center the video */
+                        left: 50%;
+                        position: absolute;
+                        top: 50%;
+                        transform: translate(-50%, -50%);
+
+                        /* Take full width */
+                        width: 100%;
+                    }
+
+                    .container__content {
+                        /* Positioned at the top left corner */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
+
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '100%',
+                            position: 'relative',
+                            width: '100%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                height: '100%',
+                                left: 0,
+                                overflow: 'hidden',
+                                position: 'absolute',
+                                top: 0,
+                                width: '100%',
+                            }}
+                        >
+                            <video
+                                style={{
+                                    objectFit: 'cover',
+                                    width: '100%',
+                                }}
+                                autoPlay={true}
+                                loop={true}
+                                muted={true}
+                                playsInline={true}
+                                src="/assets/video-background-demo.mp4"
+                            />
+                        </div>
+
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                                width: '100%',
+                            }}
+                        >
+                            <div style={{ width: '250px' }}>
+                                <Block backgroundColor="#fff" justify="center" numberOfBlocks={10} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/voting/index.tsx b/pages/voting/index.tsx
new file mode 100644
index 0000000..bf8aef3
--- /dev/null
+++ b/pages/voting/index.tsx
@@ -0,0 +1,182 @@
+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 BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    const [value, setValue] = React.useState(900);
+    const decrease = () => setValue(value - 1);
+    const increase = () => setValue(value + 1);
+
+    return (
+        <PatternLayout pattern={Pattern.Voting}>
+            <Head>
+                <meta name="description" content="Create a voting control with CSS flexbox" />
+                <meta name="og:description" content="Create a voting control with CSS flexbox" />
+                <meta name="twitter:description" content="Create a voting control with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css triangle buttons, css voting control" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="voting">
+    <!-- Up button -->
+    <button class="voting__button">
+        <div class="voting__triangle voting__triangle--up"></div>
+    </button>
+
+    <!-- Number -->
+    <div class="voting__number">
+        ...
+    </div>
+
+    <!-- Down button -->
+    <button class="voting__button">
+        <div class="voting__triangle voting__triangle--down"></div>
+    </button>
+</div>
+`}
+                css={`
+                    .voting {
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 0.25rem;
+                        display: flex;
+                        flex-direction: column;
+                        height: 8rem;
+                    }
+
+                    .voting__button {
+                        /* Reset */
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+
+                        /* Size */
+                        height: 1rem;
+
+                        /* Position the triangle */
+                        position: relative;
+                    }
+
+                    .voting__triangle {
+                        border-style: solid;
+
+                        /* Size */
+                        height: 0;
+                        width: 0;
+                    }
+
+                    .voting__triangle--up {
+                        border-color: transparent transparent rgba(0, 0, 0, 0.3);
+                        border-width: 0 0.5rem 0.5rem;
+                    }
+
+                    .voting__triangle--down {
+                        border-color: rgba(0, 0, 0, 0.3) transparent transparent;
+                        border-width: 0.5rem 0.5rem 0px;
+                    }
+
+                    .voting__number {
+                        /* Take the available height */
+                        flex: 1;
+
+                        /* Center the number */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Spacing */
+                        padding: 0.25rem;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '0.5rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '0.25rem',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '8rem',
+                        }}
+                    >
+                        <button
+                            style={{
+                                background: 'none',
+                                border: 'none',
+                                cursor: 'pointer',
+                                height: '1rem',
+                                position: 'relative',
+                            }}
+                            onClick={increase}
+                        >
+                            <div
+                                style={{
+                                    borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
+                                    borderStyle: 'solid',
+                                    borderWidth: '0 0.5rem 0.5rem 0.5rem',
+                                    height: 0,
+                                    left: '50%',
+                                    position: 'absolute',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                    width: 0,
+                                }}
+                            />
+                        </button>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flex: 1,
+                                padding: '0.25rem',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            {value}
+                        </div>
+                        <button
+                            style={{
+                                background: 'none',
+                                border: 'none',
+                                cursor: 'pointer',
+                                height: '1rem',
+                                position: 'relative',
+                            }}
+                            onClick={decrease}
+                        >
+                            <div
+                                style={{
+                                    borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
+                                    borderStyle: 'solid',
+                                    borderWidth: '0.5rem 0.5rem 0 0.5rem',
+                                    height: 0,
+                                    left: '50%',
+                                    position: 'absolute',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                    width: 0,
+                                }}
+                            />
+                        </button>
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.SpinButton, Pattern.StepperInput, Pattern.TriangleButtons]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/watermark/index.tsx b/pages/watermark/index.tsx
new file mode 100644
index 0000000..3f02b08
--- /dev/null
+++ b/pages/watermark/index.tsx
@@ -0,0 +1,134 @@
+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.Watermark}>
+            <Head>
+                <meta name="description" content="Create a watermark with CSS" />
+                <meta name="og:description" content="Create a watermark with CSS" />
+                <meta name="twitter:description" content="Create a watermark with CSS" />
+                <meta name="keywords" content="css watermark" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="container">
+    <!-- Watermark container -->
+    <div class="container__wrapper">
+        <!-- The watermark -->
+        <div class="container__watermark">
+            Draft
+        </div>
+    </div>
+
+    <!-- Other content -->
+    ...
+</div>
+`}
+                css={`
+                    .container {
+                        /* Used to position the watermark */
+                        position: relative;
+                    }
+
+                    .container__wrapper {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Absolute position */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
+
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+                    }
+
+                    .container__watermark {
+                        /* Text color */
+                        color: rgba(0, 0, 0, 0.2);
+
+                        /* Text styles */
+                        font-size: 3rem;
+                        font-weight: bold;
+                        text-transform: uppercase;
+
+                        /* Rotate the text */
+                        transform: rotate(-45deg);
+
+                        /* Disable the selection */
+                        user-select: none;
+                    }
+                `}
+            >
+                <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)',
+                            padding: '16px',
+                            position: 'relative',
+                            width: '300px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                                width: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    color: 'rgba(0, 0, 0, 0.2)',
+                                    fontSize: '3rem',
+                                    fontWeight: 'bold',
+                                    textTransform: 'uppercase',
+                                    transform: 'rotate(-45deg)',
+                                    userSelect: 'none',
+                                }}
+                            >
+                                Draft
+                            </div>
+                        </div>
+
+                        <div style={{ marginBottom: '8px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+
+                        <div style={{ marginBottom: '8px' }}>
+                            <Block numberOfBlocks={15} />
+                        </div>
+
+                        <div style={{ marginBottom: '8px' }}>
+                            <Block numberOfBlocks={10} />
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/wizard/index.tsx b/pages/wizard/index.tsx
new file mode 100644
index 0000000..7505b7d
--- /dev/null
+++ b/pages/wizard/index.tsx
@@ -0,0 +1,196 @@
+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';
+import Circle from '../../placeholders/Circle';
+import Line from '../../placeholders/Line';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.Wizard}>
+            <Head>
+                <meta name="description" content="Create a wizard with CSS flexbox" />
+                <meta name="og:description" content="Create a wizard with CSS flexbox" />
+                <meta name="twitter:description" content="Create a wizard with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css stepper, css wizard" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="wizard">
+    <!-- Step -->
+    <div class="wizard__step">
+        <div class="wizard__dot">
+            <!-- The left connector -->
+            <div class="wizard__connector"></div>
+
+            <!-- The step number -->
+            <div class="wizard__number">
+                ...
+            </div>
+
+            <!-- The right connector -->
+            <div class="wizard__connector"></div>
+        </div>
+
+        <!-- Title of step -->
+        ...
+    </div>
+
+    <!-- Repeat other steps -->
+    ...
+</div>
+`}
+                css={`
+                    .wizard {
+                        display: flex;
+                    }
+
+                    .wizard__step {
+                        /* Make all steps have the same width */
+                        flex: 1;
+                    }
+
+                    .wizard__dot {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                    .wizard__connector {
+                        flex: 1;
+                        height: 1px;
+                        background-color: rgba(0, 0, 0, 0.3);
+                    }
+
+                    .wizard__step:first-child .wizard__connector,
+                    .wizard__step:last-child .wizard__connector {
+                        background-color: transparent;
+                    }
+
+                    .wizard__number {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+
+                        /* Rounded border */
+                        background-color: rgba(0, 0, 0, 0.3);
+                        border-radius: 9999px;
+                        height: 32px;
+                        width: 32px;
+
+                        /* OPTIONAL: Spacing between it and connectors */
+                        margin-left: 4px;
+                        margin-right: 4px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ display: 'flex', width: '80%' }}>
+                        <div style={{ flex: 1 }}>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginBottom: '16px',
+                                }}
+                            >
+                                <div style={{ flex: 1 }} />
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        margin: '0 4px',
+                                    }}
+                                >
+                                    <Circle size={32} />
+                                </div>
+                                <div style={{ flex: 1 }}>
+                                    <Line />
+                                </div>
+                            </div>
+                            <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
+                                <Block justify="center" numberOfBlocks={5} />
+                            </div>
+                        </div>
+                        <div style={{ flex: 1 }}>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginBottom: '16px',
+                                }}
+                            >
+                                <div style={{ flex: 1 }}>
+                                    <Line />
+                                </div>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        margin: '0 4px',
+                                    }}
+                                >
+                                    <Circle size={32} />
+                                </div>
+                                <div style={{ flex: 1 }}>
+                                    <Line />
+                                </div>
+                            </div>
+                            <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
+                                <Block justify="center" numberOfBlocks={5} />
+                            </div>
+                        </div>
+                        <div style={{ flex: 1 }}>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginBottom: '16px',
+                                }}
+                            >
+                                <div style={{ flex: 1 }}>
+                                    <Line />
+                                </div>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        margin: '0 4px',
+                                    }}
+                                >
+                                    <Circle size={32} />
+                                </div>
+                                <div style={{ flex: 1 }} />
+                            </div>
+                            <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
+                                <Block justify="center" numberOfBlocks={5} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/pages/zigzag-timeline/index.tsx b/pages/zigzag-timeline/index.tsx
new file mode 100644
index 0000000..dfe70d2
--- /dev/null
+++ b/pages/zigzag-timeline/index.tsx
@@ -0,0 +1,136 @@
+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 Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <PatternLayout pattern={Pattern.ZigzagTimeline}>
+            <Head>
+                <meta name="description" content="Create a zigzag timeline" />
+                <meta name="og:description" content="Create a zigzag timeline" />
+                <meta name="twitter:description" content="Create a zigzag timeline" />
+                <meta name="keywords" content="css timeline, css zigzag timeline" />
+            </Head>
+            <BrowserFrame
+                html={`
+<div class="zigzag-timeline__item">
+    <!-- Milestone -->
+    <div className="zigzag-timeline__milestone">...</div>
+
+    <!-- Content -->
+    ...
+</div>
+
+<!-- Repeat other items -->
+...
+`}
+                css={`
+                    .zigzag-timeline__item {
+                        /* Used to position the milestone */
+                        position: relative;
+
+                        /* Border */
+                        border-bottom: 1px solid #71717a;
+
+                        /* Take full width */
+                        width: 100%;
+                    }
+
+                    .zigzag-timeline__milestone {
+                        /* Absolute position */
+                        position: absolute;
+                        top: 50%;
+
+                        /* Circle it */
+                        border-radius: 50%;
+                        height: 2rem;
+                        width: 2rem;
+
+                        /* Misc */
+                        background: #71717a;
+                    }
+
+                    /* Styles for even items */
+                    .zigzag-timeline__item:nth-child(2n) {
+                        border-left: 1px solid #71717a;
+                    }
+                    .zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
+                        left: 0;
+                        transform: translate(-50%, -50%);
+                    }
+
+                    /* Styles for odd items */
+                    .zigzag-timeline__item:nth-child(2n + 1) {
+                        border-right: 1px solid #71717a;
+                    }
+                    .zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
+                        right: 0;
+                        transform: translate(50%, -50%);
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        margin: '0 auto',
+                        padding: '0.5rem',
+                        width: '60%',
+                    }}
+                >
+                    <div
+                        className="zigzag-timeline__item"
+                        style={{
+                            padding: '1rem 1.5rem',
+                        }}
+                    >
+                        <div className="zigzag-timeline__milestone" />
+                        <div style={{ marginBottom: '1rem', width: '80%' }}>
+                            <Rectangle />
+                        </div>
+                        <Block numberOfBlocks={10} />
+                    </div>
+                    <div
+                        className="zigzag-timeline__item"
+                        style={{
+                            padding: '1rem 1.5rem',
+                        }}
+                    >
+                        <div className="zigzag-timeline__milestone" />
+                        <div style={{ marginBottom: '1rem', width: '60%' }}>
+                            <Rectangle />
+                        </div>
+                        <Block numberOfBlocks={20} />
+                    </div>
+                    <div
+                        className="zigzag-timeline__item"
+                        style={{
+                            padding: '1rem 1.5rem',
+                        }}
+                    >
+                        <div className="zigzag-timeline__milestone" />
+                        <div style={{ marginBottom: '1rem', width: '70%' }}>
+                            <Rectangle />
+                        </div>
+                        <Block numberOfBlocks={15} />
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.Timeline]} />
+        </PatternLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/accordion/Cover.tsx b/patterns/accordion/Cover.tsx
similarity index 86%
rename from client/patterns/accordion/Cover.tsx
rename to patterns/accordion/Cover.tsx
index 695a2ab..a9f281f 100644
--- a/client/patterns/accordion/Cover.tsx
+++ b/patterns/accordion/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -40,7 +35,7 @@ const Cover: React.FC<{}> = () => {
                             }}
                         >
                             <div style={{ marginRight: '4px' }}>
-                                <Triangle corner='r' size={6} />
+                                <Triangle corner="r" size={6} />
                             </div>
                             <div style={{ flex: 1 }}>
                                 <Rectangle height={4} />
@@ -56,7 +51,7 @@ const Cover: React.FC<{}> = () => {
                             }}
                         >
                             <div style={{ marginRight: '4px' }}>
-                                <Triangle corner='b' size={6} />
+                                <Triangle corner="b" size={6} />
                             </div>
                             <div style={{ flex: 1 }}>
                                 <Rectangle height={4} />
@@ -64,8 +59,12 @@ const Cover: React.FC<{}> = () => {
                         </div>
                     </div>
                     <div style={{ padding: '8px' }}>
-                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/arrow-buttons/Cover.tsx b/patterns/arrow-buttons/Cover.tsx
similarity index 94%
rename from client/patterns/arrow-buttons/Cover.tsx
rename to patterns/arrow-buttons/Cover.tsx
index ab61a6e..c8720d9 100644
--- a/client/patterns/arrow-buttons/Cover.tsx
+++ b/patterns/arrow-buttons/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/avatar-list/Cover.tsx b/patterns/avatar-list/Cover.tsx
similarity index 84%
rename from client/patterns/avatar-list/Cover.tsx
rename to patterns/avatar-list/Cover.tsx
index 787b8b7..9f7f5b5 100644
--- a/client/patterns/avatar-list/Cover.tsx
+++ b/patterns/avatar-list/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -19,8 +14,9 @@ const Cover: React.FC<{}> = () => {
                     padding: '8px',
                 }}
             >
-                {
-                    Array(3).fill(null).map((_, i) => {
+                {Array(3)
+                    .fill(null)
+                    .map((_, i) => {
                         return (
                             <div key={i} style={{ marginLeft: '-4px' }}>
                                 <div
@@ -41,8 +37,7 @@ const Cover: React.FC<{}> = () => {
                                 </div>
                             </div>
                         );
-                    })
-                }
+                    })}
             </div>
         </Frame>
     );
diff --git a/client/patterns/avatar/Cover.tsx b/patterns/avatar/Cover.tsx
similarity index 88%
rename from client/patterns/avatar/Cover.tsx
rename to patterns/avatar/Cover.tsx
index ae747f5..ef07cb4 100644
--- a/client/patterns/avatar/Cover.tsx
+++ b/patterns/avatar/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -34,7 +29,7 @@ const Cover: React.FC<{}> = () => {
                         style={{
                             fill: 'none',
                             height: '100%',
-                            stroke: "#FFF",
+                            stroke: '#FFF',
                             strokeLinecap: 'round',
                             strokeLinejoin: 'round',
                             strokeWidth: 1,
diff --git a/client/patterns/badge/Cover.tsx b/patterns/badge/Cover.tsx
similarity index 86%
rename from client/patterns/badge/Cover.tsx
rename to patterns/badge/Cover.tsx
index 12ba360..b01d350 100644
--- a/client/patterns/badge/Cover.tsx
+++ b/patterns/badge/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/breadcrumb/Cover.tsx b/patterns/breadcrumb/Cover.tsx
similarity index 77%
rename from client/patterns/breadcrumb/Cover.tsx
rename to patterns/breadcrumb/Cover.tsx
index e739b09..6afc9ab 100644
--- a/client/patterns/breadcrumb/Cover.tsx
+++ b/patterns/breadcrumb/Cover.tsx
@@ -30,11 +30,17 @@ const Cover: React.FC<{}> = () => {
                         width: '80%',
                     }}
                 >
-                    <div style={{ width: '20%' }}><Rectangle /></div>
+                    <div style={{ width: '20%' }}>
+                        <Rectangle />
+                    </div>
                     <div style={{ color: '#000', margin: '0 4px' }}>/</div>
-                    <div style={{ width: '20%' }}><Rectangle /></div>
+                    <div style={{ width: '20%' }}>
+                        <Rectangle />
+                    </div>
                     <div style={{ color: '#000', margin: '0 4px' }}>/</div>
-                    <div style={{ width: '20%' }}><Rectangle /></div>
+                    <div style={{ width: '20%' }}>
+                        <Rectangle />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/button-with-icon/Cover.tsx b/patterns/button-with-icon/Cover.tsx
similarity index 81%
rename from client/patterns/button-with-icon/Cover.tsx
rename to patterns/button-with-icon/Cover.tsx
index b37d4b0..f584881 100644
--- a/client/patterns/button-with-icon/Cover.tsx
+++ b/patterns/button-with-icon/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -32,7 +27,9 @@ const Cover: React.FC<{}> = () => {
                         width: '100%',
                     }}
                 >
-                    <div style={{ marginRight: '4px' }}><Circle /></div>
+                    <div style={{ marginRight: '4px' }}>
+                        <Circle />
+                    </div>
                     <Rectangle />
                 </div>
             </div>
diff --git a/client/patterns/card-layout/Cover.tsx b/patterns/card-layout/Cover.tsx
similarity index 76%
rename from client/patterns/card-layout/Cover.tsx
rename to patterns/card-layout/Cover.tsx
index 53147b4..440d488 100644
--- a/client/patterns/card-layout/Cover.tsx
+++ b/patterns/card-layout/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -22,15 +17,15 @@ const Cover: React.FC<{}> = () => {
                 }}
             >
                 <div style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
-                    {
-                        Array(9).fill(0).map((_, index) => {
+                    {Array(9)
+                        .fill(0)
+                        .map((_, index) => {
                             return (
                                 <div key={index} style={{ flexBasis: '33%', padding: '4px' }}>
                                     <Rectangle height={20} />
                                 </div>
                             );
-                        })
-                    }
+                        })}
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/card/Cover.tsx b/patterns/card/Cover.tsx
similarity index 80%
rename from client/patterns/card/Cover.tsx
rename to patterns/card/Cover.tsx
index 57b798d..f29a4f3 100644
--- a/client/patterns/card/Cover.tsx
+++ b/patterns/card/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -24,10 +19,18 @@ const Cover: React.FC<{}> = () => {
                     <Rectangle height={32} />
                 </div>
                 <div style={{ flex: 1 }}>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                    <div style={{ marginBottom: '8px', width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '8px', width: '60%' }}>
+                        <Line />
+                    </div>
                     <div style={{ width: '30%' }}>
                         <Rectangle height={8} />
                     </div>
diff --git a/client/patterns/centering/Cover.tsx b/patterns/centering/Cover.tsx
similarity index 100%
rename from client/patterns/centering/Cover.tsx
rename to patterns/centering/Cover.tsx
diff --git a/client/patterns/chip/Cover.tsx b/patterns/chip/Cover.tsx
similarity index 94%
rename from client/patterns/chip/Cover.tsx
rename to patterns/chip/Cover.tsx
index 6bea894..b76a35e 100644
--- a/client/patterns/chip/Cover.tsx
+++ b/patterns/chip/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/circular-navigation/Cover.tsx b/patterns/circular-navigation/Cover.tsx
similarity index 96%
rename from client/patterns/circular-navigation/Cover.tsx
rename to patterns/circular-navigation/Cover.tsx
index cbca4a2..abba688 100644
--- a/client/patterns/circular-navigation/Cover.tsx
+++ b/patterns/circular-navigation/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/close-button/Cover.tsx b/patterns/close-button/Cover.tsx
similarity index 91%
rename from client/patterns/close-button/Cover.tsx
rename to patterns/close-button/Cover.tsx
index 04d173a..43c148a 100644
--- a/client/patterns/close-button/Cover.tsx
+++ b/patterns/close-button/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/color-swatch/Cover.tsx b/patterns/color-swatch/Cover.tsx
similarity index 70%
rename from client/patterns/color-swatch/Cover.tsx
rename to patterns/color-swatch/Cover.tsx
index 4bfc7e7..f220bb4 100644
--- a/client/patterns/color-swatch/Cover.tsx
+++ b/patterns/color-swatch/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -19,21 +14,21 @@ const Cover: React.FC<{}> = () => {
                     justifyContent: 'center',
                     padding: '8px',
                 }}
-            >   
-                {
-                    Array(4).fill(0).map((_, index) => (
+            >
+                {Array(4)
+                    .fill(0)
+                    .map((_, index) => (
                         <div
                             key={index}
                             style={{
                                 backgroundColor: `rgba(0, 0, 0, 0.${index * 2 + 1})`,
-                                borderRadius: '9999px',                                
+                                borderRadius: '9999px',
                                 height: '1.5rem',
                                 margin: '0.5rem',
                                 width: '1.5rem',
                             }}
                         />
-                    ))
-                }
+                    ))}
             </div>
         </Frame>
     );
diff --git a/client/patterns/concave-corners/Cover.tsx b/patterns/concave-corners/Cover.tsx
similarity index 91%
rename from client/patterns/concave-corners/Cover.tsx
rename to patterns/concave-corners/Cover.tsx
index 22b72b2..643fce0 100644
--- a/client/patterns/concave-corners/Cover.tsx
+++ b/patterns/concave-corners/Cover.tsx
@@ -1,7 +1,3 @@
-/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -61,7 +57,7 @@ const Cover: React.FC<{}> = () => {
                             background: 'var(--current-background-color, #FFF)',
                             borderRadius: '1rem 0 0 0',
                             bottom: 0,
-                            height: '1rem',                            
+                            height: '1rem',
                             position: 'absolute',
                             right: 0,
                             width: '1rem',
diff --git a/client/patterns/cookie-banner/Cover.tsx b/patterns/cookie-banner/Cover.tsx
similarity index 86%
rename from client/patterns/cookie-banner/Cover.tsx
rename to patterns/cookie-banner/Cover.tsx
index f8a9841..3f5180a 100644
--- a/client/patterns/cookie-banner/Cover.tsx
+++ b/patterns/cookie-banner/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -36,9 +31,15 @@ const Cover: React.FC<{}> = () => {
                     }}
                 >
                     <div style={{ flex: 1, marginRight: '4px' }}>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <div style={{ width: '32px' }}>
                         <Rectangle height={16} />
diff --git a/client/patterns/corner-ribbon/Cover.tsx b/patterns/corner-ribbon/Cover.tsx
similarity index 91%
rename from client/patterns/corner-ribbon/Cover.tsx
rename to patterns/corner-ribbon/Cover.tsx
index 2d7faa3..6a7793b 100644
--- a/client/patterns/corner-ribbon/Cover.tsx
+++ b/patterns/corner-ribbon/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/curved-background/Cover.tsx b/patterns/curved-background/Cover.tsx
similarity index 81%
rename from client/patterns/curved-background/Cover.tsx
rename to patterns/curved-background/Cover.tsx
index faaae13..5680c8b 100644
--- a/client/patterns/curved-background/Cover.tsx
+++ b/patterns/curved-background/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/custom-checkbox-button/Cover.tsx b/patterns/custom-checkbox-button/Cover.tsx
similarity index 89%
rename from client/patterns/custom-checkbox-button/Cover.tsx
rename to patterns/custom-checkbox-button/Cover.tsx
index 0e62c10..148d034 100644
--- a/client/patterns/custom-checkbox-button/Cover.tsx
+++ b/patterns/custom-checkbox-button/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -43,7 +38,7 @@ const Cover: React.FC<{}> = () => {
                             width: '24px',
                         }}
                     >
-                        <Square backgroundColor='transparent' />
+                        <Square backgroundColor="transparent" />
                     </div>
                     <div style={{ flex: 1 }}>
                         <Rectangle />
@@ -70,7 +65,7 @@ const Cover: React.FC<{}> = () => {
                             width: '24px',
                         }}
                     >
-                        <Square backgroundColor='#00449E' />
+                        <Square backgroundColor="#00449E" />
                     </div>
                     <div style={{ flex: 1 }}>
                         <Rectangle />
diff --git a/client/patterns/custom-radio-button/Cover.tsx b/patterns/custom-radio-button/Cover.tsx
similarity index 89%
rename from client/patterns/custom-radio-button/Cover.tsx
rename to patterns/custom-radio-button/Cover.tsx
index 54cb8be..2b3f1d4 100644
--- a/client/patterns/custom-radio-button/Cover.tsx
+++ b/patterns/custom-radio-button/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -41,7 +36,7 @@ const Cover: React.FC<{}> = () => {
                             padding: '4px',
                         }}
                     >
-                        <Circle backgroundColor='#00449E' />
+                        <Circle backgroundColor="#00449E" />
                     </div>
                     <div style={{ flex: 1 }}>
                         <Rectangle />
@@ -66,7 +61,7 @@ const Cover: React.FC<{}> = () => {
                             padding: '4px',
                         }}
                     >
-                        <Circle backgroundColor='transparent' />
+                        <Circle backgroundColor="transparent" />
                     </div>
                     <div style={{ flex: 1 }}>
                         <Rectangle />
diff --git a/client/patterns/diagonal-section/Cover.tsx b/patterns/diagonal-section/Cover.tsx
similarity index 83%
rename from client/patterns/diagonal-section/Cover.tsx
rename to patterns/diagonal-section/Cover.tsx
index dbf6703..175fb3c 100644
--- a/client/patterns/diagonal-section/Cover.tsx
+++ b/patterns/diagonal-section/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/docked-at-corner/Cover.tsx b/patterns/docked-at-corner/Cover.tsx
similarity index 89%
rename from client/patterns/docked-at-corner/Cover.tsx
rename to patterns/docked-at-corner/Cover.tsx
index 414b895..ae78e79 100644
--- a/client/patterns/docked-at-corner/Cover.tsx
+++ b/patterns/docked-at-corner/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/dot-leader/Cover.tsx b/patterns/dot-leader/Cover.tsx
similarity index 83%
rename from client/patterns/dot-leader/Cover.tsx
rename to patterns/dot-leader/Cover.tsx
index 72ea240..84a808e 100644
--- a/client/patterns/dot-leader/Cover.tsx
+++ b/patterns/dot-leader/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -31,7 +26,9 @@ const Cover: React.FC<{}> = () => {
                         width: '100%',
                     }}
                 >
-                    <div style={{ width: '60%' }}><Rectangle height={4} /></div>
+                    <div style={{ width: '60%' }}>
+                        <Rectangle height={4} />
+                    </div>
                     <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
                     <Circle size={8} />
                 </div>
@@ -44,7 +41,9 @@ const Cover: React.FC<{}> = () => {
                         width: '100%',
                     }}
                 >
-                    <div style={{ width: '40%' }}><Rectangle height={4} /></div>
+                    <div style={{ width: '40%' }}>
+                        <Rectangle height={4} />
+                    </div>
                     <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
                     <Circle size={8} />
                 </div>
@@ -56,7 +55,9 @@ const Cover: React.FC<{}> = () => {
                         width: '100%',
                     }}
                 >
-                    <div style={{ width: '30%' }}><Rectangle height={4} /></div>
+                    <div style={{ width: '30%' }}>
+                        <Rectangle height={4} />
+                    </div>
                     <div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
                     <Circle size={8} />
                 </div>
diff --git a/client/patterns/dot-navigation/Cover.tsx b/patterns/dot-navigation/Cover.tsx
similarity index 92%
rename from client/patterns/dot-navigation/Cover.tsx
rename to patterns/dot-navigation/Cover.tsx
index b4b111e..f7ffa50 100644
--- a/client/patterns/dot-navigation/Cover.tsx
+++ b/patterns/dot-navigation/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/drawer/Cover.tsx b/patterns/drawer/Cover.tsx
similarity index 65%
rename from client/patterns/drawer/Cover.tsx
rename to patterns/drawer/Cover.tsx
index c4d5d26..9a02405 100644
--- a/client/patterns/drawer/Cover.tsx
+++ b/patterns/drawer/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -30,10 +25,18 @@ const Cover: React.FC<{}> = () => {
                         width: '40%',
                     }}
                 >
-                    <div style={{ marginBottom: '4px' }}><Line /></div>
-                    <div style={{ marginBottom: '4px' }}><Line /></div>
-                    <div style={{ marginBottom: '4px' }}><Line /></div>
-                    <div style={{ width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px' }}>
+                        <Line />
+                    </div>
+                    <div style={{ width: '80%' }}>
+                        <Line />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/drop-area/Cover.tsx b/patterns/drop-area/Cover.tsx
similarity index 81%
rename from client/patterns/drop-area/Cover.tsx
rename to patterns/drop-area/Cover.tsx
index d673a98..561a74d 100644
--- a/client/patterns/drop-area/Cover.tsx
+++ b/patterns/drop-area/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -33,9 +28,15 @@ const Cover: React.FC<{}> = () => {
                         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 style={{ marginBottom: '4px', width: '60%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '50%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ width: '30%' }}>
+                        <Line />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/drop-cap/Cover.tsx b/patterns/drop-cap/Cover.tsx
similarity index 70%
rename from client/patterns/drop-cap/Cover.tsx
rename to patterns/drop-cap/Cover.tsx
index ebdd68f..38f453d 100644
--- a/client/patterns/drop-cap/Cover.tsx
+++ b/patterns/drop-cap/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -36,21 +31,45 @@ const Cover: React.FC<{}> = () => {
                         <Circle />
                     </div>
                     <div style={{ flex: 1 }}>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <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={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <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={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '40%' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
                 <div style={{ marginTop: '4px' }}>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '40%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '60%' }}>
+                        <Line />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/dropdown/Cover.tsx b/patterns/dropdown/Cover.tsx
similarity index 88%
rename from client/patterns/dropdown/Cover.tsx
rename to patterns/dropdown/Cover.tsx
index 2ebf3b5..53c37f1 100644
--- a/client/patterns/dropdown/Cover.tsx
+++ b/patterns/dropdown/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -34,7 +29,7 @@ const Cover: React.FC<{}> = () => {
                         width: '60%',
                     }}
                 >
-                    <Triangle corner='b' size={8} />
+                    <Triangle corner="b" size={8} />
                 </div>
                 <div
                     style={{
@@ -67,7 +62,9 @@ const Cover: React.FC<{}> = () => {
                             padding: '0 4px',
                         }}
                     >
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <div
                         style={{
@@ -77,7 +74,9 @@ const Cover: React.FC<{}> = () => {
                             padding: '0 4px',
                         }}
                     >
-                        <div style={{ width: '60%' }}><Line /></div>
+                        <div style={{ width: '60%' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/fading-long-section/Cover.tsx b/patterns/fading-long-section/Cover.tsx
similarity index 81%
rename from client/patterns/fading-long-section/Cover.tsx
rename to patterns/fading-long-section/Cover.tsx
index de131df..e60ad35 100644
--- a/client/patterns/fading-long-section/Cover.tsx
+++ b/patterns/fading-long-section/Cover.tsx
@@ -1,11 +1,6 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
-import random from '../../helpers/random';
+import { random } from '../../utils/random';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
@@ -30,15 +25,15 @@ const Cover: React.FC<{}> = () => {
                         width: '100%',
                     }}
                 >
-                    {
-                        Array(20).fill(0).map((_, index) => {
+                    {Array(20)
+                        .fill(0)
+                        .map((_, index) => {
                             return (
                                 <div key={index} style={{ marginBottom: '4px', width: `${random(4, 10) * 10}%` }}>
                                     <Line />
                                 </div>
                             );
-                        })
-                    }
+                        })}
                     <div
                         style={{
                             background: 'linear-gradient(rgba(255, 255, 255, 0.001), #fff)',
diff --git a/client/patterns/feature-comparison/Cover.tsx b/patterns/feature-comparison/Cover.tsx
similarity index 93%
rename from client/patterns/feature-comparison/Cover.tsx
rename to patterns/feature-comparison/Cover.tsx
index 9b8b059..11492be 100644
--- a/client/patterns/feature-comparison/Cover.tsx
+++ b/patterns/feature-comparison/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/feature-list/Cover.tsx b/patterns/feature-list/Cover.tsx
similarity index 58%
rename from client/patterns/feature-list/Cover.tsx
rename to patterns/feature-list/Cover.tsx
index 72b6c33..b53918c 100644
--- a/client/patterns/feature-list/Cover.tsx
+++ b/patterns/feature-list/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -24,21 +19,41 @@ const Cover: React.FC<{}> = () => {
                 }}
             >
                 <div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
-                    <div style={{ margin: '0 4px' }}><Circle size={32} /></div>
+                    <div style={{ margin: '0 4px' }}>
+                        <Circle size={32} />
+                    </div>
                     <div style={{ flex: 1 }}>
-                        <div style={{ marginBottom: '8px', width: '100%' }}><Rectangle height={4} /></div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '8px', width: '100%' }}>
+                            <Rectangle height={4} />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
                 <div style={{ display: 'flex', flexDirection: 'row-reverse', width: '100%' }}>
-                    <div style={{ margin: '0 4px' }}><Circle size={32} /></div>
+                    <div style={{ margin: '0 4px' }}>
+                        <Circle size={32} />
+                    </div>
                     <div style={{ flex: 1 }}>
-                        <div style={{ marginBottom: '8px', width: '100%' }}><Rectangle height={4} /></div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '8px', width: '100%' }}>
+                            <Rectangle height={4} />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/fixed-at-corner/Cover.tsx b/patterns/fixed-at-corner/Cover.tsx
similarity index 73%
rename from client/patterns/fixed-at-corner/Cover.tsx
rename to patterns/fixed-at-corner/Cover.tsx
index 1985bd2..d4b0887 100644
--- a/client/patterns/fixed-at-corner/Cover.tsx
+++ b/patterns/fixed-at-corner/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/fixed-at-side/Cover.tsx b/patterns/fixed-at-side/Cover.tsx
similarity index 83%
rename from client/patterns/fixed-at-side/Cover.tsx
rename to patterns/fixed-at-side/Cover.tsx
index ef9935c..6480892 100644
--- a/client/patterns/fixed-at-side/Cover.tsx
+++ b/patterns/fixed-at-side/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/floating-label/Cover.tsx b/patterns/floating-label/Cover.tsx
similarity index 89%
rename from client/patterns/floating-label/Cover.tsx
rename to patterns/floating-label/Cover.tsx
index ef5a5ef..7e50c7e 100644
--- a/client/patterns/floating-label/Cover.tsx
+++ b/patterns/floating-label/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/folder-structure/Cover.tsx b/patterns/folder-structure/Cover.tsx
similarity index 96%
rename from client/patterns/folder-structure/Cover.tsx
rename to patterns/folder-structure/Cover.tsx
index bbeb693..9514022 100644
--- a/client/patterns/folder-structure/Cover.tsx
+++ b/patterns/folder-structure/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/full-background/Cover.tsx b/patterns/full-background/Cover.tsx
similarity index 73%
rename from client/patterns/full-background/Cover.tsx
rename to patterns/full-background/Cover.tsx
index d52bb2a..259197f 100644
--- a/client/patterns/full-background/Cover.tsx
+++ b/patterns/full-background/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -23,13 +18,13 @@ const Cover: React.FC<{}> = () => {
                 }}
             >
                 <div style={{ marginBottom: '4px', width: '80%' }}>
-                    <Line backgroundColor='#fff' />
+                    <Line backgroundColor="#fff" />
                 </div>
                 <div style={{ marginBottom: '4px', width: '60%' }}>
-                    <Line backgroundColor='#fff' />
+                    <Line backgroundColor="#fff" />
                 </div>
                 <div style={{ width: '40%' }}>
-                    <Line backgroundColor='#fff' />
+                    <Line backgroundColor="#fff" />
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/full-screen-menu/Cover.tsx b/patterns/full-screen-menu/Cover.tsx
similarity index 86%
rename from client/patterns/full-screen-menu/Cover.tsx
rename to patterns/full-screen-menu/Cover.tsx
index 4ac2a84..f7aeec6 100644
--- a/client/patterns/full-screen-menu/Cover.tsx
+++ b/patterns/full-screen-menu/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -41,9 +36,15 @@ const Cover: React.FC<{}> = () => {
                             width: '100%',
                         }}
                     >
-                        <div style={{ marginBottom: '4px', width: '60%' }}><Rectangle /></div>
-                        <div style={{ marginBottom: '4px', width: '40%' }}><Rectangle /></div>
-                        <div style={{ marginBottom: '4px', width: '50%' }}><Rectangle /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}>
+                            <Rectangle />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '40%' }}>
+                            <Rectangle />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '50%' }}>
+                            <Rectangle />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/holy-grail/Cover.tsx b/patterns/holy-grail/Cover.tsx
similarity index 62%
rename from client/patterns/holy-grail/Cover.tsx
rename to patterns/holy-grail/Cover.tsx
index 7ccc0e0..a86d2d1 100644
--- a/client/patterns/holy-grail/Cover.tsx
+++ b/patterns/holy-grail/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -32,9 +27,15 @@ const Cover: React.FC<{}> = () => {
                             width: '100%',
                         }}
                     >
-                        <div style={{ width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
+                        <div style={{ width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: 'auto', width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
                 <div style={{ display: 'flex', flexGrow: 1 }}>
@@ -45,17 +46,33 @@ const Cover: React.FC<{}> = () => {
                             width: '30%',
                         }}
                     >
-                        <div style={{ marginBottom: '4px' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <div style={{ flex: 1, padding: '8px' }}>
-                        <div style={{ marginBottom: '4px' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
-                        <div style={{ marginBottom: '8px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '8px', width: '80%' }}>
+                            <Line />
+                        </div>
 
-                        <div style={{ marginBottom: '4px' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <div
                         style={{
@@ -64,8 +81,12 @@ const Cover: React.FC<{}> = () => {
                             width: '30%',
                         }}
                     >
-                        <div style={{ marginBottom: '4px' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
                 <div
@@ -82,9 +103,15 @@ const Cover: React.FC<{}> = () => {
                             width: '100%',
                         }}
                     >
-                        <div style={{ width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
+                        <div style={{ width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/initial-avatar/Cover.tsx b/patterns/initial-avatar/Cover.tsx
similarity index 86%
rename from client/patterns/initial-avatar/Cover.tsx
rename to patterns/initial-avatar/Cover.tsx
index 440e11c..1838daf 100644
--- a/client/patterns/initial-avatar/Cover.tsx
+++ b/patterns/initial-avatar/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/input-addon/Cover.tsx b/patterns/input-addon/Cover.tsx
similarity index 85%
rename from client/patterns/input-addon/Cover.tsx
rename to patterns/input-addon/Cover.tsx
index 5b653bf..b5c87a9 100644
--- a/client/patterns/input-addon/Cover.tsx
+++ b/patterns/input-addon/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -39,7 +34,9 @@ const Cover: React.FC<{}> = () => {
                             width: '30%',
                         }}
                     >
-                        <div style={{ width: '100%' }}><Line /></div>
+                        <div style={{ width: '100%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <div style={{ flex: 1 }} />
                 </div>
diff --git a/client/patterns/inverted-corners/Cover.tsx b/patterns/inverted-corners/Cover.tsx
similarity index 87%
rename from client/patterns/inverted-corners/Cover.tsx
rename to patterns/inverted-corners/Cover.tsx
index 83b319a..10acf14 100644
--- a/client/patterns/inverted-corners/Cover.tsx
+++ b/patterns/inverted-corners/Cover.tsx
@@ -1,7 +1,3 @@
-/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/keyboard-shortcut/Cover.tsx b/patterns/keyboard-shortcut/Cover.tsx
similarity index 85%
rename from client/patterns/keyboard-shortcut/Cover.tsx
rename to patterns/keyboard-shortcut/Cover.tsx
index de641ef..75479b8 100644
--- a/client/patterns/keyboard-shortcut/Cover.tsx
+++ b/patterns/keyboard-shortcut/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/layered-card/Cover.tsx b/patterns/layered-card/Cover.tsx
similarity index 89%
rename from client/patterns/layered-card/Cover.tsx
rename to patterns/layered-card/Cover.tsx
index fad822f..25423dd 100644
--- a/client/patterns/layered-card/Cover.tsx
+++ b/patterns/layered-card/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/lined-paper/Cover.tsx b/patterns/lined-paper/Cover.tsx
similarity index 83%
rename from client/patterns/lined-paper/Cover.tsx
rename to patterns/lined-paper/Cover.tsx
index f5f4e08..5db9f6d 100644
--- a/client/patterns/lined-paper/Cover.tsx
+++ b/patterns/lined-paper/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/masonry-grid/Cover.tsx b/patterns/masonry-grid/Cover.tsx
similarity index 61%
rename from client/patterns/masonry-grid/Cover.tsx
rename to patterns/masonry-grid/Cover.tsx
index 74a8e8d..8eab9c2 100644
--- a/client/patterns/masonry-grid/Cover.tsx
+++ b/patterns/masonry-grid/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -25,17 +20,33 @@ const Cover: React.FC<{}> = () => {
                     style={{
                         columnCount: 3,
                         columnGap: '0.25rem',
-                        width: '80%'
+                        width: '80%',
                     }}
                 >
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}><Rectangle height={16} /></div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}><Rectangle height={12} /></div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}><Rectangle height={8} /></div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}><Rectangle height={24} /></div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}><Rectangle height={16} /></div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}><Rectangle height={12} /></div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}><Rectangle height={16} /></div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}><Rectangle height={12} /></div>
+                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
+                        <Rectangle height={16} />
+                    </div>
+                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
+                        <Rectangle height={12} />
+                    </div>
+                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
+                        <Rectangle height={8} />
+                    </div>
+                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
+                        <Rectangle height={24} />
+                    </div>
+                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
+                        <Rectangle height={16} />
+                    </div>
+                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
+                        <Rectangle height={12} />
+                    </div>
+                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
+                        <Rectangle height={16} />
+                    </div>
+                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
+                        <Rectangle height={12} />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/media-object/Cover.tsx b/patterns/media-object/Cover.tsx
similarity index 68%
rename from client/patterns/media-object/Cover.tsx
rename to patterns/media-object/Cover.tsx
index 6b78fdb..51bf507 100644
--- a/client/patterns/media-object/Cover.tsx
+++ b/patterns/media-object/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -25,17 +20,35 @@ const Cover: React.FC<{}> = () => {
                     <Square />
                 </div>
                 <div style={{ flex: 1 }}>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '16px', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '16px', width: '80%' }}>
+                        <Line />
+                    </div>
 
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '16px', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '16px', width: '80%' }}>
+                        <Line />
+                    </div>
 
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}>
+                        <Line />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/mega-menu/Cover.tsx b/patterns/mega-menu/Cover.tsx
similarity index 63%
rename from client/patterns/mega-menu/Cover.tsx
rename to patterns/mega-menu/Cover.tsx
index 7135250..ca0c292 100644
--- a/client/patterns/mega-menu/Cover.tsx
+++ b/patterns/mega-menu/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -52,23 +47,47 @@ const Cover: React.FC<{}> = () => {
                     }}
                 >
                     <div style={{ flex: 1, padding: '4px' }}>
-                        <div style={{ marginBottom: '4px' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <div style={{ flex: 1, padding: '4px' }}>
-                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px' }}><Line /></div>
-                        <div style={{ width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '60%' }}>
+                            <Line />
+                        </div>
                     </div>
 
                     <div style={{ flex: 1, padding: '4px' }}>
-                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '40%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/menu/Cover.tsx b/patterns/menu/Cover.tsx
similarity index 87%
rename from client/patterns/menu/Cover.tsx
rename to patterns/menu/Cover.tsx
index ea3906d..8f1a3bc 100644
--- a/client/patterns/menu/Cover.tsx
+++ b/patterns/menu/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -51,7 +46,9 @@ const Cover: React.FC<{}> = () => {
                             padding: '0 8px',
                         }}
                     >
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <div
                         style={{
@@ -61,7 +58,9 @@ const Cover: React.FC<{}> = () => {
                             padding: '0 8px',
                         }}
                     >
-                        <div style={{ width: '60%' }}><Line /></div>
+                        <div style={{ width: '60%' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/modal/Cover.tsx b/patterns/modal/Cover.tsx
similarity index 72%
rename from client/patterns/modal/Cover.tsx
rename to patterns/modal/Cover.tsx
index 39b8673..762fd60 100644
--- a/client/patterns/modal/Cover.tsx
+++ b/patterns/modal/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -37,14 +32,24 @@ const Cover: React.FC<{}> = () => {
                             padding: '0 4px',
                         }}
                     >
-                        <div style={{ width: '60%' }}><Rectangle height={2} /></div>
+                        <div style={{ width: '60%' }}>
+                            <Rectangle height={2} />
+                        </div>
                         <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>&times;</div>
                     </div>
                     <div style={{ padding: '4px' }}>
-                        <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 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>
                     <div
                         style={{
@@ -54,8 +59,12 @@ const Cover: React.FC<{}> = () => {
                             padding: '4px',
                         }}
                     >
-                        <div style={{ marginRight: '8px', width: '33.3333%' }}><Rectangle height={8} /></div>
-                        <div style={{ width: '33.3333%' }}><Rectangle height={8} /></div>
+                        <div style={{ marginRight: '8px', width: '33.3333%' }}>
+                            <Rectangle height={8} />
+                        </div>
+                        <div style={{ width: '33.3333%' }}>
+                            <Rectangle height={8} />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/nested-dropdowns/Cover.tsx b/patterns/nested-dropdowns/Cover.tsx
similarity index 86%
rename from client/patterns/nested-dropdowns/Cover.tsx
rename to patterns/nested-dropdowns/Cover.tsx
index ab68f44..3632047 100644
--- a/client/patterns/nested-dropdowns/Cover.tsx
+++ b/patterns/nested-dropdowns/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -58,10 +53,18 @@ const Cover: React.FC<{}> = () => {
                                 width: '100%',
                             }}
                         >
-                            <div style={{ marginBottom: '4px' }}><Line /></div>
-                            <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
-                            <div style={{ marginBottom: '4px' }}><Line /></div>
-                            <div style={{ width: '80%' }}><Line /></div>
+                            <div style={{ marginBottom: '4px' }}>
+                                <Line />
+                            </div>
+                            <div style={{ marginBottom: '4px', width: '60%' }}>
+                                <Line />
+                            </div>
+                            <div style={{ marginBottom: '4px' }}>
+                                <Line />
+                            </div>
+                            <div style={{ width: '80%' }}>
+                                <Line />
+                            </div>
                         </div>
                     </div>
                     <div
diff --git a/client/patterns/notification/Cover.tsx b/patterns/notification/Cover.tsx
similarity index 82%
rename from client/patterns/notification/Cover.tsx
rename to patterns/notification/Cover.tsx
index 2539eff..f8ec777 100644
--- a/client/patterns/notification/Cover.tsx
+++ b/patterns/notification/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -32,7 +27,9 @@ const Cover: React.FC<{}> = () => {
                         width: '80%',
                     }}
                 >
-                    <div style={{ width: '60%' }}><Rectangle /></div>
+                    <div style={{ width: '60%' }}>
+                        <Rectangle />
+                    </div>
                     <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>&times;</div>
                 </div>
             </div>
diff --git a/client/patterns/overlay-play-button/Cover.tsx b/patterns/overlay-play-button/Cover.tsx
similarity index 88%
rename from client/patterns/overlay-play-button/Cover.tsx
rename to patterns/overlay-play-button/Cover.tsx
index e882318..bb9fb99 100644
--- a/client/patterns/overlay-play-button/Cover.tsx
+++ b/patterns/overlay-play-button/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -51,7 +46,7 @@ const Cover: React.FC<{}> = () => {
                                 width: '32px',
                             }}
                         >
-                            <Triangle backgroundColor='#FFF' corner='r' size={8} />
+                            <Triangle backgroundColor="#FFF" corner="r" size={8} />
                         </div>
                     </div>
                 </div>
diff --git a/client/patterns/pagination/Cover.tsx b/patterns/pagination/Cover.tsx
similarity index 92%
rename from client/patterns/pagination/Cover.tsx
rename to patterns/pagination/Cover.tsx
index fb35ebe..3cca9b8 100644
--- a/client/patterns/pagination/Cover.tsx
+++ b/patterns/pagination/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/popover-arrow/Cover.tsx b/patterns/popover-arrow/Cover.tsx
similarity index 90%
rename from client/patterns/popover-arrow/Cover.tsx
rename to patterns/popover-arrow/Cover.tsx
index 8defcec..d25dd23 100644
--- a/client/patterns/popover-arrow/Cover.tsx
+++ b/patterns/popover-arrow/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/presence-indicator/Cover.tsx b/patterns/presence-indicator/Cover.tsx
similarity index 89%
rename from client/patterns/presence-indicator/Cover.tsx
rename to patterns/presence-indicator/Cover.tsx
index 1dfb5a2..56f1cc4 100644
--- a/client/patterns/presence-indicator/Cover.tsx
+++ b/patterns/presence-indicator/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/previous-next-buttons/Cover.tsx b/patterns/previous-next-buttons/Cover.tsx
similarity index 90%
rename from client/patterns/previous-next-buttons/Cover.tsx
rename to patterns/previous-next-buttons/Cover.tsx
index 19911bb..68732ec 100644
--- a/client/patterns/previous-next-buttons/Cover.tsx
+++ b/patterns/previous-next-buttons/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/price-tag/Cover.tsx b/patterns/price-tag/Cover.tsx
similarity index 90%
rename from client/patterns/price-tag/Cover.tsx
rename to patterns/price-tag/Cover.tsx
index e7834cf..449767d 100644
--- a/client/patterns/price-tag/Cover.tsx
+++ b/patterns/price-tag/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -29,8 +24,8 @@ const Cover: React.FC<{}> = () => {
                         justifyContent: 'center',
                         position: 'relative',
                         width: '100%',
-                    }
-                }>
+                    }}
+                >
                     <div
                         style={{
                             borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
diff --git a/client/patterns/pricing-table/Cover.tsx b/patterns/pricing-table/Cover.tsx
similarity index 69%
rename from client/patterns/pricing-table/Cover.tsx
rename to patterns/pricing-table/Cover.tsx
index 5c45aa8..f15bc9e 100644
--- a/client/patterns/pricing-table/Cover.tsx
+++ b/patterns/pricing-table/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -35,11 +30,19 @@ const Cover: React.FC<{}> = () => {
                         padding: '4px',
                     }}
                 >
-                    <div style={{ marginBottom: '4px' }}><Circle /></div>
+                    <div style={{ marginBottom: '4px' }}>
+                        <Circle />
+                    </div>
                     <div style={{ marginBottom: '4px', width: '100%' }}>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <Rectangle />
                 </div>
@@ -56,13 +59,25 @@ const Cover: React.FC<{}> = () => {
                         padding: '4px',
                     }}
                 >
-                    <div style={{ marginBottom: '4px' }}><Circle /></div>
+                    <div style={{ marginBottom: '4px' }}>
+                        <Circle />
+                    </div>
                     <div style={{ marginBottom: '4px', width: '100%' }}>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <Rectangle />
                 </div>
@@ -78,10 +93,16 @@ const Cover: React.FC<{}> = () => {
                         padding: '4px',
                     }}
                 >
-                    <div style={{ marginBottom: '4px' }}><Circle /></div>
+                    <div style={{ marginBottom: '4px' }}>
+                        <Circle />
+                    </div>
                     <div style={{ marginBottom: '4px', width: '100%' }}>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '80%' }}>
+                            <Line />
+                        </div>
                     </div>
                     <Rectangle />
                 </div>
diff --git a/client/patterns/progress-bar/Cover.tsx b/patterns/progress-bar/Cover.tsx
similarity index 87%
rename from client/patterns/progress-bar/Cover.tsx
rename to patterns/progress-bar/Cover.tsx
index 9f5d4ed..8413d96 100644
--- a/client/patterns/progress-bar/Cover.tsx
+++ b/patterns/progress-bar/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/property-list/Cover.tsx b/patterns/property-list/Cover.tsx
similarity index 83%
rename from client/patterns/property-list/Cover.tsx
rename to patterns/property-list/Cover.tsx
index ed3b391..845b210 100644
--- a/client/patterns/property-list/Cover.tsx
+++ b/patterns/property-list/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -32,7 +27,9 @@ const Cover: React.FC<{}> = () => {
                             padding: '4px 0',
                         }}
                     >
-                        <div style={{ width: '60%' }}><Rectangle height={8} /></div>
+                        <div style={{ width: '60%' }}>
+                            <Rectangle height={8} />
+                        </div>
                         <Circle size={12} />
                     </div>
                     <div
@@ -44,7 +41,9 @@ const Cover: React.FC<{}> = () => {
                             padding: '4px 0',
                         }}
                     >
-                        <div style={{ width: '20%' }}><Rectangle height={8} /></div>
+                        <div style={{ width: '20%' }}>
+                            <Rectangle height={8} />
+                        </div>
                         <Circle size={12} />
                     </div>
                     <div
@@ -56,7 +55,9 @@ const Cover: React.FC<{}> = () => {
                             padding: '4px 0',
                         }}
                     >
-                        <div style={{ width: '40%' }}><Rectangle height={8} /></div>
+                        <div style={{ width: '40%' }}>
+                            <Rectangle height={8} />
+                        </div>
                         <Circle size={12} />
                     </div>
                 </div>
diff --git a/client/patterns/questions-and-answers/Cover.tsx b/patterns/questions-and-answers/Cover.tsx
similarity index 73%
rename from client/patterns/questions-and-answers/Cover.tsx
rename to patterns/questions-and-answers/Cover.tsx
index 5949d9b..0b7b099 100644
--- a/client/patterns/questions-and-answers/Cover.tsx
+++ b/patterns/questions-and-answers/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -32,7 +27,9 @@ const Cover: React.FC<{}> = () => {
                             marginBottom: '8px',
                         }}
                     >
-                        <div style={{ width: '60%' }}><Rectangle height={4} /></div>
+                        <div style={{ width: '60%' }}>
+                            <Rectangle height={4} />
+                        </div>
                         <Triangle size={6} corner="b" />
                     </div>
                     <div>
@@ -44,13 +41,23 @@ const Cover: React.FC<{}> = () => {
                                 marginBottom: '4px',
                             }}
                         >
-                            <div style={{ width: '40%' }}><Rectangle height={4} /></div>
+                            <div style={{ width: '40%' }}>
+                                <Rectangle height={4} />
+                            </div>
                             <Triangle size={6} corner="t" />
                         </div>
-                        <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 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>
                 </div>
             </div>
diff --git a/client/patterns/radial-progress-bar/Cover.tsx b/patterns/radial-progress-bar/Cover.tsx
similarity index 92%
rename from client/patterns/radial-progress-bar/Cover.tsx
rename to patterns/radial-progress-bar/Cover.tsx
index 42f6d26..cb20d3a 100644
--- a/client/patterns/radial-progress-bar/Cover.tsx
+++ b/patterns/radial-progress-bar/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/radio-button-group/Cover.tsx b/patterns/radio-button-group/Cover.tsx
similarity index 90%
rename from client/patterns/radio-button-group/Cover.tsx
rename to patterns/radio-button-group/Cover.tsx
index 691f508..0d6fb22 100644
--- a/client/patterns/radio-button-group/Cover.tsx
+++ b/patterns/radio-button-group/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/radio-switch/Cover.tsx b/patterns/radio-switch/Cover.tsx
similarity index 90%
rename from client/patterns/radio-switch/Cover.tsx
rename to patterns/radio-switch/Cover.tsx
index e49bc52..3b71288 100644
--- a/client/patterns/radio-switch/Cover.tsx
+++ b/patterns/radio-switch/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/rating/Cover.tsx b/patterns/rating/Cover.tsx
similarity index 89%
rename from client/patterns/rating/Cover.tsx
rename to patterns/rating/Cover.tsx
index 43b0d2a..1138012 100644
--- a/client/patterns/rating/Cover.tsx
+++ b/patterns/rating/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/resizable-element/Cover.tsx b/patterns/resizable-element/Cover.tsx
similarity index 96%
rename from client/patterns/resizable-element/Cover.tsx
rename to patterns/resizable-element/Cover.tsx
index 9020af2..7945733 100644
--- a/client/patterns/resizable-element/Cover.tsx
+++ b/patterns/resizable-element/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/ribbon/Cover.tsx b/patterns/ribbon/Cover.tsx
similarity index 93%
rename from client/patterns/ribbon/Cover.tsx
rename to patterns/ribbon/Cover.tsx
index cb082d4..002c25e 100644
--- a/client/patterns/ribbon/Cover.tsx
+++ b/patterns/ribbon/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/same-height-columns/Cover.tsx b/patterns/same-height-columns/Cover.tsx
similarity index 64%
rename from client/patterns/same-height-columns/Cover.tsx
rename to patterns/same-height-columns/Cover.tsx
index 236199b..441f7d1 100644
--- a/client/patterns/same-height-columns/Cover.tsx
+++ b/patterns/same-height-columns/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -17,21 +12,39 @@ const Cover: React.FC<{}> = () => {
                     <div style={{ height: '32px', marginBottom: '4px', width: '32px' }}>
                         <Square />
                     </div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                    <div style={{ width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ width: '60%' }}>
+                        <Line />
+                    </div>
                 </div>
                 <div style={{ flex: 1, margin: '0 4px' }}>
                     <div style={{ height: '32px', marginBottom: '4px', width: '32px' }}>
                         <Square />
                     </div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                    <div style={{ marginBottom: '8px', width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '8px', width: '60%' }}>
+                        <Line />
+                    </div>
 
-                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                    <div style={{ width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ width: '60%' }}>
+                        <Line />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/search-box/Cover.tsx b/patterns/search-box/Cover.tsx
similarity index 86%
rename from client/patterns/search-box/Cover.tsx
rename to patterns/search-box/Cover.tsx
index 43a1875..237f412 100644
--- a/client/patterns/search-box/Cover.tsx
+++ b/patterns/search-box/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/separator/Cover.tsx b/patterns/separator/Cover.tsx
similarity index 76%
rename from client/patterns/separator/Cover.tsx
rename to patterns/separator/Cover.tsx
index 726dcb5..17786e1 100644
--- a/client/patterns/separator/Cover.tsx
+++ b/patterns/separator/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -30,9 +25,15 @@ const Cover: React.FC<{}> = () => {
                         width: '80%',
                     }}
                 >
-                    <div style={{ flex: 1 }}><Line /></div>
-                    <div style={{ margin: '0 4px', width: '25%' }}><Rectangle /></div>
-                    <div style={{ flex: 1 }}><Line /></div>
+                    <div style={{ flex: 1 }}>
+                        <Line />
+                    </div>
+                    <div style={{ margin: '0 4px', width: '25%' }}>
+                        <Rectangle />
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        <Line />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/sidebar/Cover.tsx b/patterns/sidebar/Cover.tsx
similarity index 61%
rename from client/patterns/sidebar/Cover.tsx
rename to patterns/sidebar/Cover.tsx
index b2afd6a..f49b190 100644
--- a/client/patterns/sidebar/Cover.tsx
+++ b/patterns/sidebar/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -22,8 +17,12 @@ const Cover: React.FC<{}> = () => {
                         width: '30%',
                     }}
                 >
-                    <div style={{ marginBottom: '4px' }}><Line /></div>
-                    <div style={{ width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px' }}>
+                        <Line />
+                    </div>
+                    <div style={{ width: '80%' }}>
+                        <Line />
+                    </div>
                 </div>
                 <div
                     style={{
@@ -35,10 +34,18 @@ const Cover: React.FC<{}> = () => {
                         padding: '8px',
                     }}
                 >
-                    <div style={{ marginBottom: '8px' }}><Line /></div>
-                    <div style={{ marginBottom: '8px' }}><Line /></div>
-                    <div style={{ marginBottom: '8px' }}><Line /></div>
-                    <div style={{ width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '8px' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '8px' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '8px' }}>
+                        <Line />
+                    </div>
+                    <div style={{ width: '80%' }}>
+                        <Line />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/simple-grid/Cover.tsx b/patterns/simple-grid/Cover.tsx
similarity index 69%
rename from client/patterns/simple-grid/Cover.tsx
rename to patterns/simple-grid/Cover.tsx
index 530cabe..45e055f 100644
--- a/client/patterns/simple-grid/Cover.tsx
+++ b/patterns/simple-grid/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -23,18 +18,34 @@ const Cover: React.FC<{}> = () => {
             >
                 <div style={{ width: '80%' }}>
                     <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                        <div style={{ flex: '0 0 50%', padding: '0 4px' }}><Rectangle /></div>
-                        <div style={{ flex: '1', padding: '0 4px' }}><Rectangle /></div>
+                        <div style={{ flex: '0 0 50%', padding: '0 4px' }}>
+                            <Rectangle />
+                        </div>
+                        <div style={{ flex: '1', padding: '0 4px' }}>
+                            <Rectangle />
+                        </div>
                     </div>
                     <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
-                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
-                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
+                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}>
+                            <Rectangle />
+                        </div>
+                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}>
+                            <Rectangle />
+                        </div>
+                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}>
+                            <Rectangle />
+                        </div>
                     </div>
                     <div style={{ alignItems: 'center', display: 'flex' }}>
-                        <div style={{ flex: '0 0 25%', padding: '0 4px' }}><Rectangle /></div>
-                        <div style={{ flex: '1', padding: '0 4px' }}><Rectangle /></div>
-                        <div style={{ flex: '0 0 25%', padding: '0 4px' }}><Rectangle /></div>
+                        <div style={{ flex: '0 0 25%', padding: '0 4px' }}>
+                            <Rectangle />
+                        </div>
+                        <div style={{ flex: '1', padding: '0 4px' }}>
+                            <Rectangle />
+                        </div>
+                        <div style={{ flex: '0 0 25%', padding: '0 4px' }}>
+                            <Rectangle />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/slider/Cover.tsx b/patterns/slider/Cover.tsx
similarity index 76%
rename from client/patterns/slider/Cover.tsx
rename to patterns/slider/Cover.tsx
index 2112be3..38e9c8d 100644
--- a/client/patterns/slider/Cover.tsx
+++ b/patterns/slider/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -30,9 +25,13 @@ const Cover: React.FC<{}> = () => {
                         width: '80%',
                     }}
                 >
-                    <div style={{ width: '20%' }}><Line /></div>
+                    <div style={{ width: '20%' }}>
+                        <Line />
+                    </div>
                     <Circle />
-                    <div style={{ flex: 1 }}><Line /></div>
+                    <div style={{ flex: 1 }}>
+                        <Line />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/spin-button/Cover.tsx b/patterns/spin-button/Cover.tsx
similarity index 83%
rename from client/patterns/spin-button/Cover.tsx
rename to patterns/spin-button/Cover.tsx
index f40f16f..9e22e83 100644
--- a/client/patterns/spin-button/Cover.tsx
+++ b/patterns/spin-button/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -37,8 +32,12 @@ const Cover: React.FC<{}> = () => {
                             justifyContent: 'center',
                         }}
                     >
-                        <div style={{ flex: 1, padding: '4px 4px 2px 4px' }}><Triangle size={6} corner="t" /></div>
-                        <div style={{ flex: 1, padding: '2px 4px 4px 4px' }}><Triangle size={6} corner="b" /></div>
+                        <div style={{ flex: 1, padding: '4px 4px 2px 4px' }}>
+                            <Triangle size={6} corner="t" />
+                        </div>
+                        <div style={{ flex: 1, padding: '2px 4px 4px 4px' }}>
+                            <Triangle size={6} corner="b" />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/split-navigation/Cover.tsx b/patterns/split-navigation/Cover.tsx
similarity index 82%
rename from client/patterns/split-navigation/Cover.tsx
rename to patterns/split-navigation/Cover.tsx
index cb16c18..1f14756 100644
--- a/client/patterns/split-navigation/Cover.tsx
+++ b/patterns/split-navigation/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -31,9 +26,15 @@ const Cover: React.FC<{}> = () => {
                         width: '100%',
                     }}
                 >
-                    <div style={{ marginRight: '4px', width: '16px' }}><Rectangle /></div>
-                    <div style={{ marginRight: '4px', width: '16px' }}><Rectangle /></div>
-                    <div style={{ marginLeft: 'auto', width: '16px' }}><Rectangle /></div>
+                    <div style={{ marginRight: '4px', width: '16px' }}>
+                        <Rectangle />
+                    </div>
+                    <div style={{ marginRight: '4px', width: '16px' }}>
+                        <Rectangle />
+                    </div>
+                    <div style={{ marginLeft: 'auto', width: '16px' }}>
+                        <Rectangle />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/split-screen/Cover.tsx b/patterns/split-screen/Cover.tsx
similarity index 70%
rename from client/patterns/split-screen/Cover.tsx
rename to patterns/split-screen/Cover.tsx
index 9a1b097..39a6bda 100644
--- a/client/patterns/split-screen/Cover.tsx
+++ b/patterns/split-screen/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -23,7 +18,9 @@ const Cover: React.FC<{}> = () => {
                         justifyContent: 'center',
                     }}
                 >
-                    <div style={{ marginBottom: '4px' }}><Circle /></div>
+                    <div style={{ marginBottom: '4px' }}>
+                        <Circle />
+                    </div>
                 </div>
                 <div
                     style={{
@@ -33,11 +30,21 @@ const Cover: React.FC<{}> = () => {
                     }}
                 >
                     <div style={{ padding: '8px' }}>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
-                        <div style={{ width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '60%' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/stacked-cards/Cover.tsx b/patterns/stacked-cards/Cover.tsx
similarity index 92%
rename from client/patterns/stacked-cards/Cover.tsx
rename to patterns/stacked-cards/Cover.tsx
index a8dadd7..1a17b33 100644
--- a/client/patterns/stacked-cards/Cover.tsx
+++ b/patterns/stacked-cards/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/stamp-border/Cover.tsx b/patterns/stamp-border/Cover.tsx
similarity index 88%
rename from client/patterns/stamp-border/Cover.tsx
rename to patterns/stamp-border/Cover.tsx
index e183cb5..535b2cb 100644
--- a/client/patterns/stamp-border/Cover.tsx
+++ b/patterns/stamp-border/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/statistic/Cover.tsx b/patterns/statistic/Cover.tsx
similarity index 80%
rename from client/patterns/statistic/Cover.tsx
rename to patterns/statistic/Cover.tsx
index cec31ad..edf3994 100644
--- a/client/patterns/statistic/Cover.tsx
+++ b/patterns/statistic/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -28,9 +23,7 @@ const Cover: React.FC<{}> = () => {
                         justifyContent: 'center',
                     }}
                 >
-                    <div style={{ color: 'rgba(0, 0, 0, 0.7)', fontSize: '2.5rem', fontWeight: 500 }}>
-                        1k+
-                    </div>
+                    <div style={{ color: 'rgba(0, 0, 0, 0.7)', fontSize: '2.5rem', fontWeight: 500 }}>1k+</div>
                     <div style={{ color: 'rgba(0, 0, 0, 0.4)', fontSize: '.75rem', textTransform: 'uppercase' }}>
                         stars
                     </div>
diff --git a/client/patterns/status-light/Cover.tsx b/patterns/status-light/Cover.tsx
similarity index 89%
rename from client/patterns/status-light/Cover.tsx
rename to patterns/status-light/Cover.tsx
index ff4c6f7..397ebe6 100644
--- a/client/patterns/status-light/Cover.tsx
+++ b/patterns/status-light/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/stepper-input/Cover.tsx b/patterns/stepper-input/Cover.tsx
similarity index 91%
rename from client/patterns/stepper-input/Cover.tsx
rename to patterns/stepper-input/Cover.tsx
index 4d3ed5f..99a5101 100644
--- a/client/patterns/stepper-input/Cover.tsx
+++ b/patterns/stepper-input/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/sticky-footer/Cover.tsx b/patterns/sticky-footer/Cover.tsx
similarity index 71%
rename from client/patterns/sticky-footer/Cover.tsx
rename to patterns/sticky-footer/Cover.tsx
index 9135631..e63edc4 100644
--- a/client/patterns/sticky-footer/Cover.tsx
+++ b/patterns/sticky-footer/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -33,9 +28,15 @@ const Cover: React.FC<{}> = () => {
                             width: '100%',
                         }}
                     >
-                        <div style={{ width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
+                        <div style={{ width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: 'auto', width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
                 <div
@@ -45,9 +46,15 @@ const Cover: React.FC<{}> = () => {
                     }}
                 >
                     <div style={{ padding: '8px' }}>
-                        <div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
-                        <div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
-                        <div style={{ width: '32px' }}><Line /></div>
+                        <div style={{ marginBottom: '8px', width: '64px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '8px', width: '64px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '32px' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
                 <div>
@@ -60,9 +67,15 @@ const Cover: React.FC<{}> = () => {
                             width: '100%',
                         }}
                     >
-                        <div style={{ width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
+                        <div style={{ width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/sticky-header/Cover.tsx b/patterns/sticky-header/Cover.tsx
similarity index 72%
rename from client/patterns/sticky-header/Cover.tsx
rename to patterns/sticky-header/Cover.tsx
index ce207e9..8da811a 100644
--- a/client/patterns/sticky-header/Cover.tsx
+++ b/patterns/sticky-header/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -27,9 +22,15 @@ const Cover: React.FC<{}> = () => {
                             width: '100%',
                         }}
                     >
-                        <div style={{ width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
-                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
+                        <div style={{ width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: 'auto', width: '16px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}>
+                            <Line />
+                        </div>
                     </div>
                     <Line />
                 </div>
@@ -41,9 +42,15 @@ const Cover: React.FC<{}> = () => {
                     }}
                 >
                     <div style={{ padding: '8px' }}>
-                        <div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
-                        <div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
-                        <div style={{ width: '32px' }}><Line /></div>
+                        <div style={{ marginBottom: '8px', width: '64px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ marginBottom: '8px', width: '64px' }}>
+                            <Line />
+                        </div>
+                        <div style={{ width: '32px' }}>
+                            <Line />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/sticky-sections/Cover.tsx b/patterns/sticky-sections/Cover.tsx
similarity index 87%
rename from client/patterns/sticky-sections/Cover.tsx
rename to patterns/sticky-sections/Cover.tsx
index 1ad4f16..d0278a7 100644
--- a/client/patterns/sticky-sections/Cover.tsx
+++ b/patterns/sticky-sections/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/sticky-table-column/Cover.tsx b/patterns/sticky-table-column/Cover.tsx
similarity index 79%
rename from client/patterns/sticky-table-column/Cover.tsx
rename to patterns/sticky-table-column/Cover.tsx
index 7560501..ec0ecd0 100644
--- a/client/patterns/sticky-table-column/Cover.tsx
+++ b/patterns/sticky-table-column/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -31,8 +26,9 @@ const Cover: React.FC<{}> = () => {
                 >
                     <thead>
                         <tr>
-                            {
-                                Array(3).fill(0).map((_, index) => {
+                            {Array(3)
+                                .fill(0)
+                                .map((_, index) => {
                                     return (
                                         <th
                                             key={index}
@@ -44,17 +40,18 @@ const Cover: React.FC<{}> = () => {
                                             {index === 0 ? <Rectangle /> : <Line />}
                                         </th>
                                     );
-                                })
-                            }
+                                })}
                         </tr>
                     </thead>
                     <tbody>
-                        {
-                            Array(2).fill(0).map((_, row) => {
+                        {Array(2)
+                            .fill(0)
+                            .map((_, row) => {
                                 return (
                                     <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                                        {
-                                            Array(3).fill(0).map((__, col) => {
+                                        {Array(3)
+                                            .fill(0)
+                                            .map((__, col) => {
                                                 return (
                                                     <td
                                                         key={col}
@@ -66,12 +63,10 @@ const Cover: React.FC<{}> = () => {
                                                         {col === 0 ? <Rectangle /> : <Line />}
                                                     </td>
                                                 );
-                                            })
-                                        }
+                                            })}
                                     </tr>
                                 );
-                            })
-                        }
+                            })}
                     </tbody>
                 </table>
             </div>
diff --git a/client/patterns/sticky-table-headers/Cover.tsx b/patterns/sticky-table-headers/Cover.tsx
similarity index 74%
rename from client/patterns/sticky-table-headers/Cover.tsx
rename to patterns/sticky-table-headers/Cover.tsx
index cf8d82f..acaad3a 100644
--- a/client/patterns/sticky-table-headers/Cover.tsx
+++ b/patterns/sticky-table-headers/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -31,35 +26,35 @@ const Cover: React.FC<{}> = () => {
                 >
                     <thead style={{ backgroundColor: 'rgba(0, 0, 0, 0.1)' }}>
                         <tr>
-                            {
-                                Array(3).fill(0).map((_, index) => {
+                            {Array(3)
+                                .fill(0)
+                                .map((_, index) => {
                                     return (
                                         <th key={index} style={{ padding: '6px 4px' }}>
                                             <Rectangle />
                                         </th>
                                     );
-                                })
-                            }
+                                })}
                         </tr>
                     </thead>
                     <tbody>
-                        {
-                            Array(3).fill(0).map((_, row) => {
+                        {Array(3)
+                            .fill(0)
+                            .map((_, row) => {
                                 return (
                                     <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                                        {
-                                            Array(3).fill(0).map((__, col) => {
+                                        {Array(3)
+                                            .fill(0)
+                                            .map((__, col) => {
                                                 return (
                                                     <td key={col} style={{ padding: '6px 4px' }}>
                                                         <Line />
                                                     </td>
                                                 );
-                                            })
-                                        }
+                                            })}
                                     </tr>
                                 );
-                            })
-                        }
+                            })}
                     </tbody>
                 </table>
             </div>
diff --git a/client/patterns/switch/Cover.tsx b/patterns/switch/Cover.tsx
similarity index 88%
rename from client/patterns/switch/Cover.tsx
rename to patterns/switch/Cover.tsx
index 3c622e1..7b1540c 100644
--- a/client/patterns/switch/Cover.tsx
+++ b/patterns/switch/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/tab/Cover.tsx b/patterns/tab/Cover.tsx
similarity index 90%
rename from client/patterns/tab/Cover.tsx
rename to patterns/tab/Cover.tsx
index a2c1917..f4dbf95 100644
--- a/client/patterns/tab/Cover.tsx
+++ b/patterns/tab/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
diff --git a/client/patterns/teardrop/Cover.tsx b/patterns/teardrop/Cover.tsx
similarity index 86%
rename from client/patterns/teardrop/Cover.tsx
rename to patterns/teardrop/Cover.tsx
index e9d471a..802569b 100644
--- a/client/patterns/teardrop/Cover.tsx
+++ b/patterns/teardrop/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/three-dimensions-card/Cover.tsx b/patterns/three-dimensions-card/Cover.tsx
similarity index 86%
rename from client/patterns/three-dimensions-card/Cover.tsx
rename to patterns/three-dimensions-card/Cover.tsx
index 8ebd589..456be97 100644
--- a/client/patterns/three-dimensions-card/Cover.tsx
+++ b/patterns/three-dimensions-card/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -25,8 +20,8 @@ const Cover: React.FC<{}> = () => {
                         height: '2rem',
                         position: 'relative',
                         width: '100%',
-                    }
-                }>
+                    }}
+                >
                     <div
                         style={{
                             background: 'rgba(0, 0, 0, 0.3)',
@@ -43,7 +38,7 @@ const Cover: React.FC<{}> = () => {
                         style={{
                             background: 'rgba(0, 0, 0, 0.3)',
                             bottom: 0,
-                            height: '0.5rem',                   
+                            height: '0.5rem',
                             left: 0,
                             position: 'absolute',
                             transform: 'translate(0, 100%) skewX(-45deg)',
diff --git a/client/patterns/timeline/Cover.tsx b/patterns/timeline/Cover.tsx
similarity index 69%
rename from client/patterns/timeline/Cover.tsx
rename to patterns/timeline/Cover.tsx
index b99994a..19ef016 100644
--- a/client/patterns/timeline/Cover.tsx
+++ b/patterns/timeline/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -47,30 +42,50 @@ const Cover: React.FC<{}> = () => {
                     >
                         <li style={{ marginBottom: '8px' }}>
                             <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                                <Circle backgroundColor='#aaa' size={12} />
+                                <Circle backgroundColor="#aaa" size={12} />
                                 <div style={{ flex: 1, marginLeft: '8px' }}>
-                                    <div style={{ width: '80%' }}><Rectangle /></div>
+                                    <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 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} />
+                                <Circle backgroundColor="#aaa" size={12} />
                                 <div style={{ flex: 1, marginLeft: '8px' }}>
-                                    <div style={{ width: '60%' }}><Rectangle /></div>
+                                    <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 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>
diff --git a/client/patterns/toggle-password-visibility/Cover.tsx b/patterns/toggle-password-visibility/Cover.tsx
similarity index 73%
rename from client/patterns/toggle-password-visibility/Cover.tsx
rename to patterns/toggle-password-visibility/Cover.tsx
index c8bdf5f..d10385f 100644
--- a/client/patterns/toggle-password-visibility/Cover.tsx
+++ b/patterns/toggle-password-visibility/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Circle from '../../placeholders/Circle';
@@ -33,9 +28,15 @@ const Cover: React.FC<{}> = () => {
                     }}
                 >
                     <div style={{ alignItems: 'center', display: 'flex' }}>
-                        <div style={{ marginRight: '4px' }}><Circle size={8} /></div>
-                        <div style={{ marginRight: '4px' }}><Circle size={8} /></div>
-                        <div style={{ marginRight: '4px' }}><Circle size={8} /></div>
+                        <div style={{ marginRight: '4px' }}>
+                            <Circle size={8} />
+                        </div>
+                        <div style={{ marginRight: '4px' }}>
+                            <Circle size={8} />
+                        </div>
+                        <div style={{ marginRight: '4px' }}>
+                            <Circle size={8} />
+                        </div>
                     </div>
                     <Circle />
                 </div>
diff --git a/client/patterns/tooltip/Cover.tsx b/patterns/tooltip/Cover.tsx
similarity index 92%
rename from client/patterns/tooltip/Cover.tsx
rename to patterns/tooltip/Cover.tsx
index cc5bf68..ebd46e1 100644
--- a/client/patterns/tooltip/Cover.tsx
+++ b/patterns/tooltip/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/tree-diagram/Cover.tsx b/patterns/tree-diagram/Cover.tsx
similarity index 95%
rename from client/patterns/tree-diagram/Cover.tsx
rename to patterns/tree-diagram/Cover.tsx
index 7d8a2d9..b1e8725 100644
--- a/client/patterns/tree-diagram/Cover.tsx
+++ b/patterns/tree-diagram/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -20,10 +15,7 @@ const Cover: React.FC<{}> = () => {
                     padding: '0.5rem',
                 }}
             >
-                <div
-                    style={{
-                    }}
-                >
+                <div style={{}}>
                     <div
                         style={{
                             display: 'flex',
diff --git a/client/patterns/triangle-buttons/Cover.tsx b/patterns/triangle-buttons/Cover.tsx
similarity index 94%
rename from client/patterns/triangle-buttons/Cover.tsx
rename to patterns/triangle-buttons/Cover.tsx
index 70161e4..db023ef 100644
--- a/client/patterns/triangle-buttons/Cover.tsx
+++ b/patterns/triangle-buttons/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/upload-button/Cover.tsx b/patterns/upload-button/Cover.tsx
similarity index 90%
rename from client/patterns/upload-button/Cover.tsx
rename to patterns/upload-button/Cover.tsx
index b86d267..0637cd0 100644
--- a/client/patterns/upload-button/Cover.tsx
+++ b/patterns/upload-button/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -37,7 +32,7 @@ const Cover: React.FC<{}> = () => {
                             style={{
                                 fill: 'none',
                                 height: '16px',
-                                stroke: "rgba(0, 0, 0, 0.4)",
+                                stroke: 'rgba(0, 0, 0, 0.4)',
                                 strokeLinecap: 'round',
                                 strokeLinejoin: 'round',
                                 strokeWidth: 1,
diff --git a/client/patterns/validation-icon/Cover.tsx b/patterns/validation-icon/Cover.tsx
similarity index 88%
rename from client/patterns/validation-icon/Cover.tsx
rename to patterns/validation-icon/Cover.tsx
index e188fee..41dd6b3 100644
--- a/client/patterns/validation-icon/Cover.tsx
+++ b/patterns/validation-icon/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -42,7 +37,7 @@ const Cover: React.FC<{}> = () => {
                             style={{
                                 fill: 'none',
                                 height: '16px',
-                                stroke: "rgba(0, 0, 0, 0.5)",
+                                stroke: 'rgba(0, 0, 0, 0.5)',
                                 strokeLinecap: 'round',
                                 strokeLinejoin: 'round',
                                 strokeWidth: 1,
diff --git a/client/patterns/video-background/Cover.tsx b/patterns/video-background/Cover.tsx
similarity index 73%
rename from client/patterns/video-background/Cover.tsx
rename to patterns/video-background/Cover.tsx
index d52bb2a..259197f 100644
--- a/client/patterns/video-background/Cover.tsx
+++ b/patterns/video-background/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -23,13 +18,13 @@ const Cover: React.FC<{}> = () => {
                 }}
             >
                 <div style={{ marginBottom: '4px', width: '80%' }}>
-                    <Line backgroundColor='#fff' />
+                    <Line backgroundColor="#fff" />
                 </div>
                 <div style={{ marginBottom: '4px', width: '60%' }}>
-                    <Line backgroundColor='#fff' />
+                    <Line backgroundColor="#fff" />
                 </div>
                 <div style={{ width: '40%' }}>
-                    <Line backgroundColor='#fff' />
+                    <Line backgroundColor="#fff" />
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/voting/Cover.tsx b/patterns/voting/Cover.tsx
similarity index 94%
rename from client/patterns/voting/Cover.tsx
rename to patterns/voting/Cover.tsx
index 3a9ac4c..f98ac56 100644
--- a/client/patterns/voting/Cover.tsx
+++ b/patterns/voting/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/watermark/Cover.tsx b/patterns/watermark/Cover.tsx
similarity index 84%
rename from client/patterns/watermark/Cover.tsx
rename to patterns/watermark/Cover.tsx
index 28c2733..e306570 100644
--- a/client/patterns/watermark/Cover.tsx
+++ b/patterns/watermark/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
diff --git a/client/patterns/wizard/Cover.tsx b/patterns/wizard/Cover.tsx
similarity index 88%
rename from client/patterns/wizard/Cover.tsx
rename to patterns/wizard/Cover.tsx
index e4f4cb9..5361cad 100644
--- a/client/patterns/wizard/Cover.tsx
+++ b/patterns/wizard/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -46,7 +41,9 @@ const Cover: React.FC<{}> = () => {
                         >
                             1
                         </div>
-                        <div style={{ flex: 1 }}><Line /></div>
+                        <div style={{ flex: 1 }}>
+                            <Line />
+                        </div>
                     </div>
                     <div
                         style={{
@@ -56,7 +53,9 @@ const Cover: React.FC<{}> = () => {
                             justifyContent: 'center',
                         }}
                     >
-                        <div style={{ flex: 1 }}><Line /></div>
+                        <div style={{ flex: 1 }}>
+                            <Line />
+                        </div>
                         <div
                             style={{
                                 alignItems: 'center',
@@ -72,7 +71,9 @@ const Cover: React.FC<{}> = () => {
                         >
                             2
                         </div>
-                        <div style={{ flex: 1 }}><Line /></div>
+                        <div style={{ flex: 1 }}>
+                            <Line />
+                        </div>
                     </div>
                     <div
                         style={{
@@ -82,7 +83,9 @@ const Cover: React.FC<{}> = () => {
                             justifyContent: 'center',
                         }}
                     >
-                        <div style={{ flex: 1 }}><Line /></div>
+                        <div style={{ flex: 1 }}>
+                            <Line />
+                        </div>
                         <div
                             style={{
                                 alignItems: 'center',
diff --git a/client/patterns/zigzag-timeline/Cover.tsx b/patterns/zigzag-timeline/Cover.tsx
similarity index 84%
rename from client/patterns/zigzag-timeline/Cover.tsx
rename to patterns/zigzag-timeline/Cover.tsx
index 731839a..8659a2b 100644
--- a/client/patterns/zigzag-timeline/Cover.tsx
+++ b/patterns/zigzag-timeline/Cover.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 import Frame from '../../placeholders/Frame';
@@ -43,9 +38,15 @@ const Cover: React.FC<{}> = () => {
                             width: '.75rem',
                         }}
                     />
-                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Rectangle /></div>
-                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Line /></div>
-                    <div style={{ marginBottom: '0.25rem', width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}>
+                        <Rectangle />
+                    </div>
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '0.25rem', width: '60%' }}>
+                        <Line />
+                    </div>
                 </div>
                 <div
                     style={{
@@ -61,15 +62,21 @@ const Cover: React.FC<{}> = () => {
                             borderRadius: '50%',
                             height: '.75rem',
                             left: 0,
-                            position: 'absolute',                            
+                            position: 'absolute',
                             top: '50%',
                             transform: 'translate(-50%, -50%)',
                             width: '.75rem',
                         }}
                     />
-                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Rectangle /></div>
-                    <div style={{ marginBottom: '0.25rem', width: '60%' }}><Line /></div>
-                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}>
+                        <Rectangle />
+                    </div>
+                    <div style={{ marginBottom: '0.25rem', width: '60%' }}>
+                        <Line />
+                    </div>
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}>
+                        <Line />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/placeholders/Block.tsx b/placeholders/Block.tsx
similarity index 81%
rename from client/placeholders/Block.tsx
rename to placeholders/Block.tsx
index cec62ae..5e6c6c1 100644
--- a/client/placeholders/Block.tsx
+++ b/placeholders/Block.tsx
@@ -1,11 +1,6 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
-import random from '../helpers/random';
+import { random } from '../utils/random';
 
 interface BlockProps {
     backgroundColor?: string;
@@ -29,8 +24,9 @@ const Block: React.FC<BlockProps> = ({
                 width: '100%',
             }}
         >
-            {
-                Array(numberOfBlocks).fill(0).map((_, i) => {
+            {Array(numberOfBlocks)
+                .fill(0)
+                .map((_, i) => {
                     const s = random(1, 5);
                     return (
                         <div
@@ -51,8 +47,7 @@ const Block: React.FC<BlockProps> = ({
                             />
                         </div>
                     );
-                })
-            }
+                })}
         </div>
     );
 };
diff --git a/placeholders/BrowserFrame.tsx b/placeholders/BrowserFrame.tsx
new file mode 100644
index 0000000..c617eba
--- /dev/null
+++ b/placeholders/BrowserFrame.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Window } from '@1milligram/design';
+
+import { Code } from '../components/Code';
+
+interface BrowserFrameProps {
+    css: string;
+    html: string;
+}
+
+const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
+    return (
+        <Window>
+            <div className="demo__html">
+                <Code language="markup">{html}</Code>
+            </div>
+            <div className="demo__css">
+                <Code language="css">{css}</Code>
+            </div>
+            <div className="demo__live">{children}</div>
+        </Window>
+    );
+};
+
+export default BrowserFrame;
diff --git a/client/placeholders/Circle.tsx b/placeholders/Circle.tsx
similarity index 57%
rename from client/placeholders/Circle.tsx
rename to placeholders/Circle.tsx
index 228d1bc..ace592e 100644
--- a/client/placeholders/Circle.tsx
+++ b/placeholders/Circle.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 interface CircleProps {
@@ -10,10 +5,7 @@ interface CircleProps {
     size?: number;
 }
 
-const Circle: React.FC<CircleProps> = ({
-    backgroundColor = 'rgba(0, 0, 0, .3)',
-    size = 16,
-}) => {
+const Circle: React.FC<CircleProps> = ({ backgroundColor = 'rgba(0, 0, 0, .3)', size = 16 }) => {
     return (
         <div
             style={{
diff --git a/client/placeholders/Frame.tsx b/placeholders/Frame.tsx
similarity index 74%
rename from client/placeholders/Frame.tsx
rename to placeholders/Frame.tsx
index abf77ad..6868118 100644
--- a/client/placeholders/Frame.tsx
+++ b/placeholders/Frame.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 const Frame: React.FC<{}> = ({ children }) => {
diff --git a/client/placeholders/Line.tsx b/placeholders/Line.tsx
similarity index 53%
rename from client/placeholders/Line.tsx
rename to placeholders/Line.tsx
index 4e6560c..f5c7a22 100644
--- a/client/placeholders/Line.tsx
+++ b/placeholders/Line.tsx
@@ -1,17 +1,10 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 interface LineProps {
     backgroundColor?: string;
 }
 
-const Line: React.FC<LineProps> = ({
-    backgroundColor = 'rgba(0, 0, 0, 0.3)',
-}) => {
+const Line: React.FC<LineProps> = ({ backgroundColor = 'rgba(0, 0, 0, 0.3)' }) => {
     return (
         <div
             style={{
diff --git a/client/placeholders/Rectangle.tsx b/placeholders/Rectangle.tsx
similarity index 72%
rename from client/placeholders/Rectangle.tsx
rename to placeholders/Rectangle.tsx
index 10e4555..eb73e00 100644
--- a/client/placeholders/Rectangle.tsx
+++ b/placeholders/Rectangle.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 interface RectangleProps {
diff --git a/client/placeholders/Square.tsx b/placeholders/Square.tsx
similarity index 55%
rename from client/placeholders/Square.tsx
rename to placeholders/Square.tsx
index 8af7d2d..75a8e2d 100644
--- a/client/placeholders/Square.tsx
+++ b/placeholders/Square.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 interface SquareProps {
@@ -10,10 +5,7 @@ interface SquareProps {
     size?: string;
 }
 
-const Square: React.FC<SquareProps> = ({
-    backgroundColor = 'rgba(0, 0, 0, 0.3)',
-    size = '100%',
-}) => {
+const Square: React.FC<SquareProps> = ({ backgroundColor = 'rgba(0, 0, 0, 0.3)', size = '100%' }) => {
     return (
         <div
             style={{
diff --git a/client/placeholders/Triangle.tsx b/placeholders/Triangle.tsx
similarity index 85%
rename from client/placeholders/Triangle.tsx
rename to placeholders/Triangle.tsx
index d4ebe42..00d83dc 100644
--- a/client/placeholders/Triangle.tsx
+++ b/placeholders/Triangle.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 interface TriangleProps {
@@ -11,11 +6,7 @@ interface TriangleProps {
     size?: number;
 }
 
-const Triangle: React.FC<TriangleProps> = ({
-    backgroundColor = 'rgba(0, 0, 0, .3)',
-    size = 16,
-    corner = 'tl',
-}) => {
+const Triangle: React.FC<TriangleProps> = ({ backgroundColor = 'rgba(0, 0, 0, .3)', size = 16, corner = 'tl' }) => {
     let bw = '';
     let bc = '';
     switch (corner) {
diff --git a/client/placeholders/VerticalLine.tsx b/placeholders/VerticalLine.tsx
similarity index 65%
rename from client/placeholders/VerticalLine.tsx
rename to placeholders/VerticalLine.tsx
index 2f8865a..d931e93 100644
--- a/client/placeholders/VerticalLine.tsx
+++ b/placeholders/VerticalLine.tsx
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 import * as React from 'react';
 
 const VerticalLine: React.FC<{}> = () => {
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..c39f321
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+    printWidth: 120,
+    singleQuote: true,
+    tabWidth: 4,
+};
diff --git a/public/assets/1-loc.png b/public/assets/1-loc.png
deleted file mode 100644
index 726fd77..0000000
Binary files a/public/assets/1-loc.png and /dev/null differ
diff --git a/public/assets/blur-page.png b/public/assets/blur-page.png
deleted file mode 100644
index e6678a8..0000000
Binary files a/public/assets/blur-page.png and /dev/null differ
diff --git a/public/assets/check-browsers-support.png b/public/assets/check-browsers-support.png
deleted file mode 100644
index 40eaa33..0000000
Binary files a/public/assets/check-browsers-support.png and /dev/null differ
diff --git a/public/assets/css-layout.png b/public/assets/css-layout.png
deleted file mode 100644
index 5c3c3a8..0000000
Binary files a/public/assets/css-layout.png and /dev/null differ
diff --git a/public/assets/form-validation.png b/public/assets/form-validation.png
deleted file mode 100644
index f419d14..0000000
Binary files a/public/assets/form-validation.png and /dev/null differ
diff --git a/public/assets/front-end-tips.png b/public/assets/front-end-tips.png
deleted file mode 100644
index 2612a60..0000000
Binary files a/public/assets/front-end-tips.png and /dev/null differ
diff --git a/public/assets/html-dom.png b/public/assets/html-dom.png
deleted file mode 100644
index b5e2fa4..0000000
Binary files a/public/assets/html-dom.png and /dev/null differ
diff --git a/public/assets/intersection-observer-examples.png b/public/assets/intersection-observer-examples.png
deleted file mode 100644
index 46d915a..0000000
Binary files a/public/assets/intersection-observer-examples.png and /dev/null differ
diff --git a/public/assets/react-pdf-viewer.png b/public/assets/react-pdf-viewer.png
deleted file mode 100644
index 7bf42c7..0000000
Binary files a/public/assets/react-pdf-viewer.png and /dev/null differ
diff --git a/public/assets/responsive-design-patterns.png b/public/assets/responsive-design-patterns.png
deleted file mode 100644
index c5914b7..0000000
Binary files a/public/assets/responsive-design-patterns.png and /dev/null differ
diff --git a/public/assets/this-vs-that.png b/public/assets/this-vs-that.png
deleted file mode 100644
index a8b7a0c..0000000
Binary files a/public/assets/this-vs-that.png and /dev/null differ
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 81de73a..535ae92 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,108 +1,107 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
     <url><loc>https://csslayout.io</loc></url>
-    <url><loc>https://csslayout.io/patterns</loc></url>
 
     <!-- Patterns -->
-    <url><loc>https://csslayout.io/patterns/accordion</loc></url>
-    <url><loc>https://csslayout.io/patterns/arrow-buttons</loc></url>
-    <url><loc>https://csslayout.io/patterns/avatar</loc></url>
-    <url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
-    <url><loc>https://csslayout.io/patterns/badge</loc></url>
-    <url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
-    <url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
-    <url><loc>https://csslayout.io/patterns/card</loc></url>
-    <url><loc>https://csslayout.io/patterns/card-layout</loc></url>
-    <url><loc>https://csslayout.io/patterns/centering</loc></url>
-    <url><loc>https://csslayout.io/patterns/chip</loc></url>
-    <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
-    <url><loc>https://csslayout.io/patterns/close-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/color-swatch</loc></url>
-    <url><loc>https://csslayout.io/patterns/concave-corners</loc></url>
-    <url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
-    <url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
-    <url><loc>https://csslayout.io/patterns/curved-background</loc></url>
-    <url><loc>https://csslayout.io/patterns/custom-checkbox-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/custom-radio-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/diagonal-section</loc></url>
-    <url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
-    <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
-    <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
-    <url><loc>https://csslayout.io/patterns/drawer</loc></url>
-    <url><loc>https://csslayout.io/patterns/drop-area</loc></url>
-    <url><loc>https://csslayout.io/patterns/drop-cap</loc></url>
-    <url><loc>https://csslayout.io/patterns/dropdown</loc></url>
-    <url><loc>https://csslayout.io/patterns/fading-long-section</loc></url>
-    <url><loc>https://csslayout.io/patterns/feature-comparison</loc></url>
-    <url><loc>https://csslayout.io/patterns/feature-list</loc></url>
-    <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
-    <url><loc>https://csslayout.io/patterns/fixed-at-side</loc></url>
-    <url><loc>https://csslayout.io/patterns/floating-label</loc></url>
-    <url><loc>https://csslayout.io/patterns/folder-structure</loc></url>
-    <url><loc>https://csslayout.io/patterns/full-background</loc></url>
-    <url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
-    <url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
-    <url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>
-    <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
-    <url><loc>https://csslayout.io/patterns/inverted-corners</loc></url>
-    <url><loc>https://csslayout.io/patterns/keyboard-shortcut</loc></url>
-    <url><loc>https://csslayout.io/patterns/layered-card</loc></url>
-    <url><loc>https://csslayout.io/patterns/lined-paper</loc></url>
-    <url><loc>https://csslayout.io/patterns/masonry-grid</loc></url>
-    <url><loc>https://csslayout.io/patterns/media-object</loc></url>
-    <url><loc>https://csslayout.io/patterns/mega-menu</loc></url>
-    <url><loc>https://csslayout.io/patterns/menu</loc></url>
-    <url><loc>https://csslayout.io/patterns/modal</loc></url>
-    <url><loc>https://csslayout.io/patterns/nested-dropdowns</loc></url>
-    <url><loc>https://csslayout.io/patterns/notification</loc></url>
-    <url><loc>https://csslayout.io/patterns/overlay-play-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/pagination</loc></url>
-    <url><loc>https://csslayout.io/patterns/popover-arrow</loc></url>
-    <url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
-    <url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
-    <url><loc>https://csslayout.io/patterns/price-tag</loc></url>
-    <url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
-    <url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
-    <url><loc>https://csslayout.io/patterns/property-list</loc></url>
-    <url><loc>https://csslayout.io/patterns/questions-and-answers</loc></url>
-    <url><loc>https://csslayout.io/patterns/radial-progress-bar</loc></url>
-    <url><loc>https://csslayout.io/patterns/radio-button-group</loc></url>
-    <url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
-    <url><loc>https://csslayout.io/patterns/rating</loc></url>
-    <url><loc>https://csslayout.io/patterns/resizable-element</loc></url>
-    <url><loc>https://csslayout.io/patterns/ribbon</loc></url>
-    <url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>
-    <url><loc>https://csslayout.io/patterns/search-box</loc></url>
-    <url><loc>https://csslayout.io/patterns/separator</loc></url>
-    <url><loc>https://csslayout.io/patterns/sidebar</loc></url>
-    <url><loc>https://csslayout.io/patterns/simple-grid</loc></url>
-    <url><loc>https://csslayout.io/patterns/slider</loc></url>
-    <url><loc>https://csslayout.io/patterns/spin-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/split-navigation</loc></url>
-    <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
-    <url><loc>https://csslayout.io/patterns/stacked-cards</loc></url>
-    <url><loc>https://csslayout.io/patterns/stamp-border</loc></url>
-    <url><loc>https://csslayout.io/patterns/statistic</loc></url>
-    <url><loc>https://csslayout.io/patterns/status-light</loc></url>
-    <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-sections</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-table-column</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-table-headers</loc></url>
-    <url><loc>https://csslayout.io/patterns/switch</loc></url>
-    <url><loc>https://csslayout.io/patterns/tab</loc></url>
-    <url><loc>https://csslayout.io/patterns/teardrop</loc></url>
-    <url><loc>https://csslayout.io/patterns/three-dimensions-card</loc></url>
-    <url><loc>https://csslayout.io/patterns/timeline</loc></url>
-    <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
-    <url><loc>https://csslayout.io/patterns/tooltip</loc></url>
-    <url><loc>https://csslayout.io/patterns/tree-diagram</loc></url>
-    <url><loc>https://csslayout.io/patterns/triangle-buttons</loc></url>
-    <url><loc>https://csslayout.io/patterns/upload-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/validation-icon</loc></url>
-    <url><loc>https://csslayout.io/patterns/video-background</loc></url>
-    <url><loc>https://csslayout.io/patterns/voting</loc></url>
-    <url><loc>https://csslayout.io/patterns/watermark</loc></url>
-    <url><loc>https://csslayout.io/patterns/wizard</loc></url>
-    <url><loc>https://csslayout.io/patterns/zigzag-timeline</loc></url>
+    <url><loc>https://csslayout.io/accordion</loc></url>
+    <url><loc>https://csslayout.io/arrow-buttons</loc></url>
+    <url><loc>https://csslayout.io/avatar</loc></url>
+    <url><loc>https://csslayout.io/avatar-list</loc></url>
+    <url><loc>https://csslayout.io/badge</loc></url>
+    <url><loc>https://csslayout.io/breadcrumb</loc></url>
+    <url><loc>https://csslayout.io/button-with-icon</loc></url>
+    <url><loc>https://csslayout.io/card</loc></url>
+    <url><loc>https://csslayout.io/card-layout</loc></url>
+    <url><loc>https://csslayout.io/centering</loc></url>
+    <url><loc>https://csslayout.io/chip</loc></url>
+    <url><loc>https://csslayout.io/circular-navigation</loc></url>
+    <url><loc>https://csslayout.io/close-button</loc></url>
+    <url><loc>https://csslayout.io/color-swatch</loc></url>
+    <url><loc>https://csslayout.io/concave-corners</loc></url>
+    <url><loc>https://csslayout.io/cookie-banner</loc></url>
+    <url><loc>https://csslayout.io/corner-ribbon</loc></url>
+    <url><loc>https://csslayout.io/curved-background</loc></url>
+    <url><loc>https://csslayout.io/custom-checkbox-button</loc></url>
+    <url><loc>https://csslayout.io/custom-radio-button</loc></url>
+    <url><loc>https://csslayout.io/diagonal-section</loc></url>
+    <url><loc>https://csslayout.io/docked-at-corner</loc></url>
+    <url><loc>https://csslayout.io/dot-leader</loc></url>
+    <url><loc>https://csslayout.io/dot-navigation</loc></url>
+    <url><loc>https://csslayout.io/drawer</loc></url>
+    <url><loc>https://csslayout.io/drop-area</loc></url>
+    <url><loc>https://csslayout.io/drop-cap</loc></url>
+    <url><loc>https://csslayout.io/dropdown</loc></url>
+    <url><loc>https://csslayout.io/fading-long-section</loc></url>
+    <url><loc>https://csslayout.io/feature-comparison</loc></url>
+    <url><loc>https://csslayout.io/feature-list</loc></url>
+    <url><loc>https://csslayout.io/fixed-at-corner</loc></url>
+    <url><loc>https://csslayout.io/fixed-at-side</loc></url>
+    <url><loc>https://csslayout.io/floating-label</loc></url>
+    <url><loc>https://csslayout.io/folder-structure</loc></url>
+    <url><loc>https://csslayout.io/full-background</loc></url>
+    <url><loc>https://csslayout.io/full-screen-menu</loc></url>
+    <url><loc>https://csslayout.io/holy-grail</loc></url>
+    <url><loc>https://csslayout.io/initial-avatar</loc></url>
+    <url><loc>https://csslayout.io/input-addon</loc></url>
+    <url><loc>https://csslayout.io/inverted-corners</loc></url>
+    <url><loc>https://csslayout.io/keyboard-shortcut</loc></url>
+    <url><loc>https://csslayout.io/layered-card</loc></url>
+    <url><loc>https://csslayout.io/lined-paper</loc></url>
+    <url><loc>https://csslayout.io/masonry-grid</loc></url>
+    <url><loc>https://csslayout.io/media-object</loc></url>
+    <url><loc>https://csslayout.io/mega-menu</loc></url>
+    <url><loc>https://csslayout.io/menu</loc></url>
+    <url><loc>https://csslayout.io/modal</loc></url>
+    <url><loc>https://csslayout.io/nested-dropdowns</loc></url>
+    <url><loc>https://csslayout.io/notification</loc></url>
+    <url><loc>https://csslayout.io/overlay-play-button</loc></url>
+    <url><loc>https://csslayout.io/pagination</loc></url>
+    <url><loc>https://csslayout.io/popover-arrow</loc></url>
+    <url><loc>https://csslayout.io/presence-indicator</loc></url>
+    <url><loc>https://csslayout.io/previous-next-buttons</loc></url>
+    <url><loc>https://csslayout.io/price-tag</loc></url>
+    <url><loc>https://csslayout.io/pricing-table</loc></url>
+    <url><loc>https://csslayout.io/progress-bar</loc></url>
+    <url><loc>https://csslayout.io/property-list</loc></url>
+    <url><loc>https://csslayout.io/questions-and-answers</loc></url>
+    <url><loc>https://csslayout.io/radial-progress-bar</loc></url>
+    <url><loc>https://csslayout.io/radio-button-group</loc></url>
+    <url><loc>https://csslayout.io/radio-switch</loc></url>
+    <url><loc>https://csslayout.io/rating</loc></url>
+    <url><loc>https://csslayout.io/resizable-element</loc></url>
+    <url><loc>https://csslayout.io/ribbon</loc></url>
+    <url><loc>https://csslayout.io/same-height-columns</loc></url>
+    <url><loc>https://csslayout.io/search-box</loc></url>
+    <url><loc>https://csslayout.io/separator</loc></url>
+    <url><loc>https://csslayout.io/sidebar</loc></url>
+    <url><loc>https://csslayout.io/simple-grid</loc></url>
+    <url><loc>https://csslayout.io/slider</loc></url>
+    <url><loc>https://csslayout.io/spin-button</loc></url>
+    <url><loc>https://csslayout.io/split-navigation</loc></url>
+    <url><loc>https://csslayout.io/split-screen</loc></url>
+    <url><loc>https://csslayout.io/stacked-cards</loc></url>
+    <url><loc>https://csslayout.io/stamp-border</loc></url>
+    <url><loc>https://csslayout.io/statistic</loc></url>
+    <url><loc>https://csslayout.io/status-light</loc></url>
+    <url><loc>https://csslayout.io/stepper-input</loc></url>
+    <url><loc>https://csslayout.io/sticky-footer</loc></url>
+    <url><loc>https://csslayout.io/sticky-header</loc></url>
+    <url><loc>https://csslayout.io/sticky-sections</loc></url>
+    <url><loc>https://csslayout.io/sticky-table-column</loc></url>
+    <url><loc>https://csslayout.io/sticky-table-headers</loc></url>
+    <url><loc>https://csslayout.io/switch</loc></url>
+    <url><loc>https://csslayout.io/tab</loc></url>
+    <url><loc>https://csslayout.io/teardrop</loc></url>
+    <url><loc>https://csslayout.io/three-dimensions-card</loc></url>
+    <url><loc>https://csslayout.io/timeline</loc></url>
+    <url><loc>https://csslayout.io/toggle-password-visibility</loc></url>
+    <url><loc>https://csslayout.io/tooltip</loc></url>
+    <url><loc>https://csslayout.io/tree-diagram</loc></url>
+    <url><loc>https://csslayout.io/triangle-buttons</loc></url>
+    <url><loc>https://csslayout.io/upload-button</loc></url>
+    <url><loc>https://csslayout.io/validation-icon</loc></url>
+    <url><loc>https://csslayout.io/video-background</loc></url>
+    <url><loc>https://csslayout.io/voting</loc></url>
+    <url><loc>https://csslayout.io/watermark</loc></url>
+    <url><loc>https://csslayout.io/wizard</loc></url>
+    <url><loc>https://csslayout.io/zigzag-timeline</loc></url>
 </urlset>
\ No newline at end of file
diff --git a/styles/_reset.scss b/styles/_reset.scss
new file mode 100644
index 0000000..34a0d52
--- /dev/null
+++ b/styles/_reset.scss
@@ -0,0 +1,30 @@
+body {
+    -webkit-font-smoothing: antialiased;
+    color: #333;
+    font-family: 'Inter', sans-serif;
+    line-height: 1.5;
+    margin: 0;
+}
+* {
+    box-sizing: border-box;
+}
+a {
+    text-decoration: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+}
+img {
+    max-width: 100%;
+}
+ol,
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
diff --git a/styles/blocks/_ad.scss b/styles/blocks/_ad.scss
new file mode 100644
index 0000000..01e7eb2
--- /dev/null
+++ b/styles/blocks/_ad.scss
@@ -0,0 +1,22 @@
+.block-ad {
+    background: #e6e6e6;
+    border-radius: 0.25rem;
+    padding: 1rem;
+    margin: 0 auto;
+    max-width: 15rem;
+}
+
+/* Ads */
+.carbon-img {
+    display: block;
+    text-align: center;
+}
+.carbon-poweredby {
+    display: block;
+    font-size: 0.75rem;
+    text-align: right;
+}
+.carbon-text {
+    display: block;
+    font-size: 0.875rem;
+}
diff --git a/styles/blocks/_browser-frame.scss b/styles/blocks/_browser-frame.scss
new file mode 100644
index 0000000..476f78c
--- /dev/null
+++ b/styles/blocks/_browser-frame.scss
@@ -0,0 +1,8 @@
+.demo__live {
+    height: 32rem;
+    overflow: auto;
+}
+
+.demo__html {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+}
diff --git a/styles/blocks/_code.scss b/styles/blocks/_code.scss
new file mode 100644
index 0000000..51ca443
--- /dev/null
+++ b/styles/blocks/_code.scss
@@ -0,0 +1,8 @@
+.block-code {
+    font-size: 0.875rem;
+    font-family: 'Source code pro';
+    height: auto;
+    margin: 0;
+    overflow: auto;
+    padding: 1em;
+}
diff --git a/client/components/coverCard.css b/styles/blocks/_cover.scss
similarity index 63%
rename from client/components/coverCard.css
rename to styles/blocks/_cover.scss
index 2247ed7..0e2d30e 100644
--- a/client/components/coverCard.css
+++ b/styles/blocks/_cover.scss
@@ -1,9 +1,4 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.cover {
+.block-cover {
     align-items: center;
     color: var(--color-gray-9);
     display: flex;
@@ -13,7 +8,7 @@
     text-decoration: none;
     width: 7rem;
 }
-.cover__name {
+.block-cover__name {
     font-weight: normal;
     margin: 0;
     padding-top: 0.5rem;
@@ -21,7 +16,7 @@
 }
 
 @media (min-width: 768px) {
-    .cover {
+    .block-cover {
         width: 8rem;
     }
 }
diff --git a/styles/blocks/_footer.scss b/styles/blocks/_footer.scss
new file mode 100644
index 0000000..f23f0bc
--- /dev/null
+++ b/styles/blocks/_footer.scss
@@ -0,0 +1,11 @@
+/* Footer */
+.block-footer {
+    border-top: 1px solid #e1e1e1;
+    padding-top: 4rem;
+}
+.block-footer__copyright {
+    color: #afafaf;
+    margin: 2rem 0 4rem 0;
+    padding: 1rem 0;
+    text-align: center;
+}
diff --git a/styles/blocks/_header.scss b/styles/blocks/_header.scss
new file mode 100644
index 0000000..24656eb
--- /dev/null
+++ b/styles/blocks/_header.scss
@@ -0,0 +1,23 @@
+.block-header {
+    background: #fff;
+    border-bottom: 1px solid #e4e4e4;
+    position: sticky;
+    top: 0;
+    z-index: 9999;
+}
+.block-header__inner {
+    align-items: center;
+    display: flex;
+    height: 3rem;
+    justify-content: space-between;
+}
+.block-header__cta {
+    align-items: center;
+    background-color: var(--mgd-color-primary);
+    border-radius: 9999px;
+    color: #fff;
+    display: flex;
+    font-weight: 600;
+    height: 2rem;
+    padding: 0 1.5rem;
+}
diff --git a/styles/blocks/_layout.scss b/styles/blocks/_layout.scss
new file mode 100644
index 0000000..0171c00
--- /dev/null
+++ b/styles/blocks/_layout.scss
@@ -0,0 +1,13 @@
+.block-container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 64rem;
+}
+.block-hero {
+    text-align: center;
+}
+.block-hero__heading--secondary {
+    color: #808080;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
diff --git a/styles/index.scss b/styles/index.scss
new file mode 100644
index 0000000..8619a0d
--- /dev/null
+++ b/styles/index.scss
@@ -0,0 +1,33 @@
+@import './reset';
+
+// Blocks
+@import 'blocks/ad';
+@import 'blocks/browser-frame';
+@import 'blocks/code';
+@import 'blocks/cover';
+@import 'blocks/footer';
+@import 'blocks/header';
+@import 'blocks/layout';
+
+// Pages
+@import 'pages/home';
+
+// Patterns
+@import 'patterns/concave-corners';
+@import 'patterns/dropcap';
+@import 'patterns/dropdown';
+@import 'patterns/floating-label';
+@import 'patterns/folder-structure';
+@import 'patterns/inverted-corners';
+@import 'patterns/layered-card';
+@import 'patterns/masonry-grid';
+@import 'patterns/mega-menu';
+@import 'patterns/menu';
+@import 'patterns/nested-dropdowns';
+@import 'patterns/price-tag';
+@import 'patterns/radio-button-group';
+@import 'patterns/star';
+@import 'patterns/three-dimensions-card';
+@import 'patterns/tooltip';
+@import 'patterns/tree-diagram';
+@import 'patterns/zigzag-timeline';
diff --git a/styles/pages/_home.scss b/styles/pages/_home.scss
new file mode 100644
index 0000000..76a3429
--- /dev/null
+++ b/styles/pages/_home.scss
@@ -0,0 +1,28 @@
+.page-home__hero {
+    text-align: center;
+}
+
+.page-home__category {
+    background: #fff;
+    color: #808080;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    grid-gap: 1rem;
+    margin: 2rem 0;
+    position: sticky;
+    text-align: center;
+    top: 3rem;
+    z-index: 1;
+}
+
+.page-home__category::before,
+.page-home__category::after {
+    align-self: center;
+    border-top: 1px solid #e6e6e6;
+    content: '';
+}
+
+.page-home__collection {
+    display: flex;
+    flex-wrap: wrap;
+}
diff --git a/client/patterns/concave-corners/concave-corners.css b/styles/patterns/_concave-corners.scss
similarity index 75%
rename from client/patterns/concave-corners/concave-corners.css
rename to styles/patterns/_concave-corners.scss
index c7155ae..36aa876 100644
--- a/client/patterns/concave-corners/concave-corners.css
+++ b/styles/patterns/_concave-corners.scss
@@ -1,16 +1,11 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 :root {
-    --concave-corners-background: rgba(0, 0, 0, .3);
+    --concave-corners-background: rgba(0, 0, 0, 0.3);
     --concave-corners-size: 1rem;
 }
 
 .concave-corners {
     background-color: var(--concave-corners-background);
-    
+
     /* Used to position the corners */
     position: relative;
 
@@ -23,10 +18,10 @@
     position: absolute;
 
     /* Size */
-    height: var(--concave-corners-size);    
+    height: var(--concave-corners-size);
     width: var(--concave-corners-size);
 
-    background: #FFF;
+    background: #fff;
 }
 
 .concave-corners__corner--tl {
@@ -39,7 +34,7 @@
 }
 
 .concave-corners__corner--tr {
-    /* Position */ 
+    /* Position */
     right: 0;
     top: 0;
 
@@ -63,4 +58,4 @@
 
     /* Border radius */
     border-radius: var(--concave-corners-size) 0 0 0;
-}
\ No newline at end of file
+}
diff --git a/styles/patterns/_dropcap.scss b/styles/patterns/_dropcap.scss
new file mode 100644
index 0000000..979928a
--- /dev/null
+++ b/styles/patterns/_dropcap.scss
@@ -0,0 +1,9 @@
+.p-drop-cap:first-letter {
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    float: left;
+    font-size: 64px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0 8px 0 0;
+    padding: 0 8px;
+}
diff --git a/styles/patterns/_dropdown.scss b/styles/patterns/_dropdown.scss
new file mode 100644
index 0000000..955fb6d
--- /dev/null
+++ b/styles/patterns/_dropdown.scss
@@ -0,0 +1,7 @@
+.p-dropdown-content {
+    display: none;
+}
+
+.p-dropdown:hover .p-dropdown-content {
+    display: block;
+}
diff --git a/styles/patterns/_floating-label.scss b/styles/patterns/_floating-label.scss
new file mode 100644
index 0000000..b9bf8e4
--- /dev/null
+++ b/styles/patterns/_floating-label.scss
@@ -0,0 +1,9 @@
+.p-floating-container label {
+    opacity: 0;
+}
+
+.p-floating-container input:not(:placeholder-shown) + label {
+    background: #fff;
+    transform: translate(0, -50%);
+    opacity: 1;
+}
diff --git a/client/patterns/folder-structure/folder-structure.css b/styles/patterns/_folder-structure.scss
similarity index 80%
rename from client/patterns/folder-structure/folder-structure.css
rename to styles/patterns/_folder-structure.scss
index 502cec5..ef217f3 100644
--- a/client/patterns/folder-structure/folder-structure.css
+++ b/styles/patterns/_folder-structure.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 :root {
     --folder-structure-item-height: 1rem;
     --folder-structure-item-margin-left: 2rem;
@@ -21,9 +16,9 @@
 }
 
 .folder-structure li::before {
-    border-left: 1px solid rgba(0, 0, 0, .3);
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
     content: '';
-    
+
     /* Position */
     left: 0;
     position: absolute;
@@ -35,7 +30,7 @@
 }
 
 .folder-structure li::after {
-    border-bottom: 1px solid rgba(0, 0, 0, .3);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     content: '';
 
     /* Position */
diff --git a/client/patterns/inverted-corners/inverted-corners.css b/styles/patterns/_inverted-corners.scss
similarity index 82%
rename from client/patterns/inverted-corners/inverted-corners.css
rename to styles/patterns/_inverted-corners.scss
index b9b022b..830d8c2 100644
--- a/client/patterns/inverted-corners/inverted-corners.css
+++ b/styles/patterns/_inverted-corners.scss
@@ -1,16 +1,11 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 :root {
-    --inverted-corners-background: #52525B;
+    --inverted-corners-background: #52525b;
     --inverted-corners-size: 2rem;
 }
 
 .inverted-corners {
     background-color: var(--inverted-corners-background);
-    
+
     /* Used to position the corner */
     position: relative;
 
@@ -49,5 +44,5 @@
     justify-content: center;
 
     /* Misc */
-    color: #FFF;
-}
\ No newline at end of file
+    color: #fff;
+}
diff --git a/client/patterns/layered-card/styles.css b/styles/patterns/_layered-card.scss
similarity index 66%
rename from client/patterns/layered-card/styles.css
rename to styles/patterns/_layered-card.scss
index 4295d5a..1dd83e4 100644
--- a/client/patterns/layered-card/styles.css
+++ b/styles/patterns/_layered-card.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 .layered-card {
     position: relative;
 }
@@ -10,7 +5,7 @@
 .layered-card::before {
     background: rgba(0, 0, 0, 0.3);
     content: '';
-    
+
     /* Position */
     top: 0;
     left: 0;
diff --git a/client/patterns/masonry-grid/masonry-grid.css b/styles/patterns/_masonry-grid.scss
similarity index 60%
rename from client/patterns/masonry-grid/masonry-grid.css
rename to styles/patterns/_masonry-grid.scss
index f26a81b..ced6020 100644
--- a/client/patterns/masonry-grid/masonry-grid.css
+++ b/styles/patterns/_masonry-grid.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 .masonry-grid {
     column-count: 3;
     column-gap: 1rem;
diff --git a/client/patterns/mega-menu/mega-menu.css b/styles/patterns/_mega-menu.scss
similarity index 67%
rename from client/patterns/mega-menu/mega-menu.css
rename to styles/patterns/_mega-menu.scss
index b47f1b4..f7f4c56 100644
--- a/client/patterns/mega-menu/mega-menu.css
+++ b/styles/patterns/_mega-menu.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 .p-mega-menu-container {
     position: relative;
 }
diff --git a/styles/patterns/_menu.scss b/styles/patterns/_menu.scss
new file mode 100644
index 0000000..188aa84
--- /dev/null
+++ b/styles/patterns/_menu.scss
@@ -0,0 +1,3 @@
+.p-menu-item:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
diff --git a/client/patterns/nested-dropdowns/nested-dropdowns.css b/styles/patterns/_nested-dropdowns.scss
similarity index 79%
rename from client/patterns/nested-dropdowns/nested-dropdowns.css
rename to styles/patterns/_nested-dropdowns.scss
index 54cabce..7e43fbd 100644
--- a/client/patterns/nested-dropdowns/nested-dropdowns.css
+++ b/styles/patterns/_nested-dropdowns.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 .p-nested-dropdowns {
     border: 1px solid rgba(0, 0, 0, 0.3);
     display: flex;
diff --git a/client/patterns/price-tag/price-tag.css b/styles/patterns/_price-tag.scss
similarity index 69%
rename from client/patterns/price-tag/price-tag.css
rename to styles/patterns/_price-tag.scss
index f7be3ec..7416226 100644
--- a/client/patterns/price-tag/price-tag.css
+++ b/styles/patterns/_price-tag.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 :root {
     --price-tag-background: rgba(0, 0, 0, 0.3);
     --price-tag-height: 2rem;
@@ -10,7 +5,7 @@
 
 .price-tag {
     background: var(--price-tag-background);
-    color: #FFF;
+    color: #fff;
 
     /* Center the price */
     align-items: center;
@@ -33,11 +28,9 @@
 
     border-color: transparent var(--price-tag-background) transparent transparent;
     border-style: solid;
-    border-width: calc(var(--price-tag-height) / 2)
-                  calc(var(--price-tag-height) / 2)
-                  calc(var(--price-tag-height) / 2)
-                  0rem;
-    
+    border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
+        0rem;
+
     /* Position */
     left: 0px;
     position: absolute;
@@ -49,10 +42,10 @@
 .price-tag::after {
     content: '';
 
-    /* Make it like a cirle */ 
-    background: #FFF;
+    /* Make it like a cirle */
+    background: #fff;
     border-radius: 9999rem;
-    
+
     /* Position */
     left: 0;
     position: absolute;
diff --git a/styles/patterns/_radio-button-group.scss b/styles/patterns/_radio-button-group.scss
new file mode 100644
index 0000000..a617574
--- /dev/null
+++ b/styles/patterns/_radio-button-group.scss
@@ -0,0 +1,6 @@
+.p-radio-button-group label {
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+}
+.p-radio-button-group label:last-child {
+    border-right-color: transparent;
+}
diff --git a/client/patterns/rating/star.css b/styles/patterns/_star.scss
similarity index 77%
rename from client/patterns/rating/star.css
rename to styles/patterns/_star.scss
index 5494bb6..049148d 100644
--- a/client/patterns/rating/star.css
+++ b/styles/patterns/_star.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 .p-rating {
     align-items: center;
     display: flex;
diff --git a/client/patterns/three-dimensions-card/styles.css b/styles/patterns/_three-dimensions-card.scss
similarity index 78%
rename from client/patterns/three-dimensions-card/styles.css
rename to styles/patterns/_three-dimensions-card.scss
index 41f9ab6..914c135 100644
--- a/client/patterns/three-dimensions-card/styles.css
+++ b/styles/patterns/_three-dimensions-card.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 :root {
     --three-dimensions-card-left-side-width: 1rem;
 }
@@ -12,10 +7,10 @@
 }
 
 /* The left side */
-.three-dimensions-card::before { 
+.three-dimensions-card::before {
     background: rgba(0, 0, 0, 0.3);
     content: '';
-    
+
     /* Position */
     top: var(--three-dimensions-card-left-side-width);
     left: 0px;
@@ -31,8 +26,8 @@
 /* The bottom side */
 .three-dimensions-card::after {
     background: rgba(0, 0, 0, 0.3);
-    content: '';    
-    
+    content: '';
+
     /* Position */
     bottom: 0px;
     left: 0px;
diff --git a/client/patterns/tooltip/tooltip.css b/styles/patterns/_tooltip.scss
similarity index 80%
rename from client/patterns/tooltip/tooltip.css
rename to styles/patterns/_tooltip.scss
index 2447273..aca9649 100644
--- a/client/patterns/tooltip/tooltip.css
+++ b/styles/patterns/_tooltip.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 .p-tooltip {
     position: relative;
 }
diff --git a/client/patterns/tree-diagram/tree-diagram.css b/styles/patterns/_tree-diagram.scss
similarity index 71%
rename from client/patterns/tree-diagram/tree-diagram.css
rename to styles/patterns/_tree-diagram.scss
index 306134e..9aadbae 100644
--- a/client/patterns/tree-diagram/tree-diagram.css
+++ b/styles/patterns/_tree-diagram.scss
@@ -1,8 +1,3 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 .tree-diagram ul {
     display: flex;
     position: relative;
@@ -14,7 +9,7 @@
 }
 
 .tree-diagram ul ul::before {
-    border-right: 1px solid rgba(0, 0, 0, .3);
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
     content: '';
     height: 1rem;
     position: absolute;
@@ -29,13 +24,13 @@
 
     /* Center the content */
     align-items: center;
-    display: flex;    
+    display: flex;
     flex-direction: column;
 }
 
 .tree-diagram li::before {
-    border-right: 1px solid rgba(0, 0, 0, .3);
-    border-top: 1px solid rgba(0, 0, 0, .3);
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
     content: '';
     height: 1rem;
 
@@ -47,7 +42,7 @@
 }
 
 .tree-diagram li::after {
-    border-top: 1px solid rgba(0, 0, 0, .3);
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
     content: '';
 
     /* Position */
diff --git a/client/patterns/zigzag-timeline/zigzag-timeline.css b/styles/patterns/_zigzag-timeline.scss
similarity index 64%
rename from client/patterns/zigzag-timeline/zigzag-timeline.css
rename to styles/patterns/_zigzag-timeline.scss
index 46cbfde..60d979f 100644
--- a/client/patterns/zigzag-timeline/zigzag-timeline.css
+++ b/styles/patterns/_zigzag-timeline.scss
@@ -1,14 +1,9 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
 .zigzag-timeline__item {
     /* Used to position the milestone */
     position: relative;
 
     /* Border */
-    border-bottom: 1px solid #71717A;
+    border-bottom: 1px solid #71717a;
 
     /* Take full width */
     width: 100%;
@@ -16,7 +11,7 @@
 
 .zigzag-timeline__milestone {
     /* Absolute position */
-    position: absolute;    
+    position: absolute;
     top: 50%;
 
     /* Circle it */
@@ -25,24 +20,23 @@
     width: 2rem;
 
     /* Misc */
-    background: #71717A;
+    background: #71717a;
 }
 
 /* Styles for even items */
 .zigzag-timeline__item:nth-child(2n) {
-    border-left: 1px solid #71717A;
-    
+    border-left: 1px solid #71717a;
 }
 .zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
     left: 0;
-    transform: translate(-50%, -50%);    
+    transform: translate(-50%, -50%);
 }
 
 /* Styles for odd items */
 .zigzag-timeline__item:nth-child(2n + 1) {
-    border-right: 1px solid #71717A;
+    border-right: 1px solid #71717a;
 }
 .zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
     right: 0;
     transform: translate(50%, -50%);
-}
\ No newline at end of file
+}
diff --git a/tsconfig.json b/tsconfig.json
index 495fd53..ef9d48d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,16 @@
         "module": "esnext",
         "moduleResolution": "node",
         "target": "esnext",
-        "jsx": "react"
-    }
+        "jsx": "preserve",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": false,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["bin", "node_modules"]
 }
diff --git a/tslint.json b/tslint.json
index 2b35daa..7240ac9 100644
--- a/tslint.json
+++ b/tslint.json
@@ -8,4 +8,4 @@
         "quotemark": ["single"]
     },
     "rulesDirectory": []
-}
\ No newline at end of file
+}
diff --git a/utils/random.ts b/utils/random.ts
new file mode 100644
index 0000000..a2a4ce6
--- /dev/null
+++ b/utils/random.ts
@@ -0,0 +1 @@
+export const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
diff --git a/utils/randomFromArray.ts b/utils/randomFromArray.ts
new file mode 100644
index 0000000..2fcf84e
--- /dev/null
+++ b/utils/randomFromArray.ts
@@ -0,0 +1,3 @@
+export function randomFromArray<T>(array: T[]): T {
+    return array[Math.floor(Math.random() * array.length)];
+}
diff --git a/utils/randomIterms.ts b/utils/randomIterms.ts
new file mode 100644
index 0000000..b7e0c30
--- /dev/null
+++ b/utils/randomIterms.ts
@@ -0,0 +1,12 @@
+type Tuple<T> = [number, T[]];
+
+export function randomItems<T>(arr: T[], count: number): T[] {
+    const result = arr.concat().reduce(
+        (p, _, __, arr) => {
+            const [a, b] = p;
+            return a < count ? [a + 1, b.concat(arr.splice((Math.random() * arr.length) | 0, 1))] : p;
+        },
+        [0, []] as Tuple<T>
+    );
+    return (result as Tuple<T>)[1];
+}
diff --git a/utils/slug.ts b/utils/slug.ts
new file mode 100644
index 0000000..1cb5e26
--- /dev/null
+++ b/utils/slug.ts
@@ -0,0 +1 @@
+export const slug = (item: string) => item.toLowerCase().split(' ').join('-');
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index c4f4cb7..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-const path = require('path');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const HtmlWebPackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-const plugins = [
-    new HtmlWebPackPlugin({
-        template: './client/index.html',
-        filename: './index.html',
-    }),
-    new MiniCssExtractPlugin({
-        filename: '[name].[contenthash].css',
-        ignoreOrder: false, // Enable to remove warnings about conflicting order
-    }),
-];
-  
-if (process.env.NODE_ENV === "analyse") {
-    plugins.push(new BundleAnalyzerPlugin());
-}
-
-module.exports = {
-    mode: process.env.NODE_ENV,
-    entry: {
-        client: './client/index.tsx',
-    },
-    output: {
-        path: path.join(__dirname, 'dist'),
-        filename: '[name].[contenthash].js',
-        // If user browser enables ad blocking, then the pattern likes `Cookie banner` can't be loaded
-        // In order to fix that, we remove the `[name]` from the bundled output
-        chunkFilename: '[contenthash].js',
-        // It's very important
-        // All the chunk generated by webpack then will be loaded such as
-        // <script charset="utf-8" src="/[chunk-name].bundle.js"></script>
-        // The script is accessible from any page that exported by a 3rd party such as react-snap
-        publicPath: '/',
-    },
-    module: {
-        rules: [
-            {
-                test: /\.css$/,
-                use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader,
-                    },
-                    'css-loader',
-                ],
-            },
-            {
-                test: /\.ts(x?)$/,
-                exclude: /node_modules/,
-                // The order of loaders are very important
-                // It will make the @loadable/component work
-                use: ['babel-loader', 'ts-loader'],
-            },
-            {
-                enforce: "pre",
-                test: /\.js$/,
-                loader: 'source-map-loader',
-            },
-        ],
-    },
-    resolve: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    },
-    devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
-    devServer: {
-        contentBase: path.join(__dirname, 'dist'),
-        historyApiFallback: true,
-        port: 1234,
-    },
-    plugins,
-};
\ No newline at end of file