diff --git a/bin/generateScreenshot.ts b/bin/generateScreenshot.ts
index 0081d4a..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: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/Product.tsx b/client/components/Product.tsx
deleted file mode 100644
index db153d1..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 '../../utils/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/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/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/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/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/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/CoverCard.tsx b/components/CoverCard.tsx
index 8769ef5..3b90aa3 100644
--- a/components/CoverCard.tsx
+++ b/components/CoverCard.tsx
@@ -142,9 +142,7 @@ export const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
         <Link href={`/${slug(pattern)}`}>
             <a className="block-cover">
                 <Cover />
-                <h4 className="block-cover__name">
-                    {pattern}
-                </h4>
+                <h4 className="block-cover__name">{pattern}</h4>
             </a>
         </Link>
     );
diff --git a/components/RelatedPatterns.tsx b/components/RelatedPatterns.tsx
index fd71706..357c7d8 100644
--- a/components/RelatedPatterns.tsx
+++ b/components/RelatedPatterns.tsx
@@ -1,22 +1,20 @@
 import * as React from 'react';
-import { Heading, Spacer } from '@1milligram/design';
+import { Heading } from '@1milligram/design';
 
 import { Pattern } from '../constants/Pattern';
 import { CoverCard } from './CoverCard';
 
-interface RelatedPatternsProps {
+export const RelatedPatterns: React.FC<{
     patterns: Pattern[];
-}
-
-export const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
+}> = ({ 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} />)
-                }
+                {patterns.map((pattern) => (
+                    <CoverCard key={pattern} pattern={pattern} />
+                ))}
             </div>
         </section>
     );
diff --git a/constants/Pattern.ts b/constants/Pattern.ts
index 72d8c5d..6242507 100644
--- a/constants/Pattern.ts
+++ b/constants/Pattern.ts
@@ -101,4 +101,4 @@ export enum Pattern {
     Watermark = 'Watermark',
     Wizard = 'Wizard',
     ZigzagTimeline = 'Zigzag timeline',
-};
+}
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/DetailsLayout.tsx b/layouts/PatternLayout.tsx
similarity index 79%
rename from layouts/DetailsLayout.tsx
rename to layouts/PatternLayout.tsx
index 9a72861..f485c23 100644
--- a/layouts/DetailsLayout.tsx
+++ b/layouts/PatternLayout.tsx
@@ -2,21 +2,20 @@ 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';
 
-interface DetailsLayoutProps {
+export const PatternLayout: React.FC<{
     pattern: Pattern;
-}
-
-export const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
+}> = ({ pattern, children }) => {
     const patternSlug = slug(pattern);
 
     return (
         <Layout title={pattern}>
             <Head>
-                <title>CSS Layout ∙ {pattern}</title>
+                <title>{pattern} - CSS Layout</title>
                 <meta name="title" content={`${pattern} - CSS Layout`} />
 
                 <meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
@@ -33,9 +32,13 @@ export const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children
                     <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/package.json b/package.json
index a882596..dc8d833 100644
--- a/package.json
+++ b/package.json
@@ -32,9 +32,7 @@
         "screenshot": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshot.ts"
     },
     "dependencies": {
-        "@loadable/component": "^5.14.1",
         "@1milligram/design": "^0.4.0",
-        "@1milligram/frame": "^1.0.0",
         "@mdx-js/loader": "^1.6.22",
         "@mdx-js/react": "^1.6.22",
         "@next/mdx": "^11.1.2",
@@ -44,8 +42,6 @@
         "react-dom": "^17.0.2"
     },
     "devDependencies": {
-        "@types/linkifyjs": "^2.1.4",
-        "@types/loadable__component": "^5.13.3",
         "@types/react": "^17.0.20",
         "@types/react-dom": "^17.0.9",
         "puppeteer": "^10.4.0",
diff --git a/pages/_document.tsx b/pages/_document.tsx
index d0bfb8d..6343080 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -9,16 +9,25 @@ class MyDocument extends Document {
                     <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="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: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="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" />
diff --git a/pages/accordion/index.tsx b/pages/accordion/index.tsx
index 7fbf2d8..7cce5b9 100644
--- a/pages/accordion/index.tsx
+++ b/pages/accordion/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -23,7 +19,7 @@ const Details: React.FC<{}> = () => {
     const [activeItem, setActiveItem] = React.useState(1);
 
     const Item: React.FC<ItemProps> = ({ index, title, children }) => {
-        const isOpened = (index === activeItem);
+        const isOpened = index === activeItem;
         const click = () => setActiveItem(isOpened ? -1 : index);
         return (
             <>
@@ -57,16 +53,15 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout pattern={Pattern.Accordion}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <!-- Container -->
 <div class="accordion">
     <!-- Each accordion item -->
@@ -92,93 +87,112 @@ html={`
     ...
 </div>
 `}
-css={`
-.accordion {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-bottom-color: transparent;
-    border-radius: 4px;
-}
+                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__item {
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                    }
 
-.accordion__header {
-    /* Center the content horizontally */
-    align-items: center;
-    display: flex;
+                    .accordion__header {
+                        /* Center the content horizontally */
+                        align-items: center;
+                        display: flex;
 
-    cursor: pointer;
-    padding: 16px;
-}
+                        cursor: pointer;
+                        padding: 16px;
+                    }
 
-.accordion__toggle {
-    margin-right: 12px;
-}
+                    .accordion__toggle {
+                        margin-right: 12px;
+                    }
 
-.accordion__title {
-    /* Take remaining width */
-    flex: 1;
-}
+                    .accordion__title {
+                        /* Take remaining width */
+                        flex: 1;
+                    }
 
-.accordion__content {
-    /* For not selected item */
-    display: none;
+                    .accordion__content {
+                        /* For not selected item */
+                        display: none;
 
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    padding: 16px;
-}
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        padding: 16px;
+                    }
 
-.accordion__content--selected {
-    /* For selected item */
-    display: block;
-}
-`}
+                    .accordion__content--selected {
+                        /* For selected item */
+                        display: block;
+                    }
+                `}
+            >
+                <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)',
+                            borderBottomColor: 'transparent',
+                            borderRadius: '4px',
+                            width: '60%',
                         }}
                     >
-                        <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>
+                            }
                         >
-                            <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 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>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
 
             <RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/arrow-buttons/index.tsx b/pages/arrow-buttons/index.tsx
index 1b4ad1e..6117f8e 100644
--- a/pages/arrow-buttons/index.tsx
+++ b/pages/arrow-buttons/index.tsx
@@ -1,28 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.ArrowButtons}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <!-- Up arrow button -->
 <button class="button">
     <!-- Arrow -->
@@ -59,202 +54,202 @@ html={`
     ...
 </button>
 `}
-css={`
-.button {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                css={`
+                    .button {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Spacing */
-    padding: 8px;
-}
+                        /* Spacing */
+                        padding: 8px;
+                    }
 
-.button__arrow {
-    /* Transparent background */
-    background-color: transparent;
+                    .button__arrow {
+                        /* Transparent background */
+                        background-color: transparent;
 
-    /* Size */
-    height: 12px;
-    width: 12px;
-}
+                        /* 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--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--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--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);
-}
-`}
+                    .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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            height: '200px',
+                            position: 'relative',
+                            width: '200px',
                         }}
                     >
                         <div
                             style={{
-                                height: '200px',
-                                position: 'relative',
-                                width: '200px',
+                                left: '50%',
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(-50%, -50%)',
                             }}
                         >
-                            <div
+                            <button
                                 style={{
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%)',
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
                                 }}
                             >
-                                <button
+                                <div
                                     style={{
-                                        alignItems: 'center',
                                         backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
+                                        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={{
-                                            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
+                                />
+                                <div style={{ marginLeft: '8px' }}>Up</div>
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                position: 'absolute',
+                                right: 0,
+                                top: '50%',
+                                transform: 'translate(50%, -50%)',
+                            }}
+                        >
+                            <button
                                 style={{
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translate(50%, -50%)',
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
                                 }}
                             >
-                                <button
+                                <div style={{ marginRight: '8px' }}>Right</div>
+                                <div
                                     style={{
-                                        alignItems: 'center',
                                         backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
+                                        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',
                                     }}
-                                >
-                                    <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
+                                />
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                bottom: 0,
+                                left: '50%',
+                                position: 'absolute',
+                                transform: 'translate(-50%, 50%)',
+                            }}
+                        >
+                            <button
                                 style={{
-                                    bottom: 0,
-                                    left: '50%',
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, 50%)',
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
                                 }}
                             >
-                                <button
+                                <div
                                     style={{
-                                        alignItems: 'center',
                                         backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
+                                        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={{
-                                            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
+                                />
+                                <div style={{ marginLeft: '8px' }}>Down</div>
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                left: 0,
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
+                            }}
+                        >
+                            <button
                                 style={{
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
                                 }}
                             >
-                                <button
+                                <div
                                     style={{
-                                        alignItems: 'center',
                                         backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
+                                        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={{
-                                            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 style={{ marginLeft: '8px' }}>Left</div>
+                            </button>
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/avatar-list/index.tsx b/pages/avatar-list/index.tsx
index ad9e787..52719a0 100644
--- a/pages/avatar-list/index.tsx
+++ b/pages/avatar-list/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Avatar: React.FC<{}> = ({ children }) => {
@@ -33,16 +29,15 @@ const Avatar: React.FC<{}> = ({ children }) => {
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.AvatarList}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="avatars">
     <!-- Avatar item -->
     <div class="avatars__item">
@@ -56,52 +51,63 @@ html={`
     ...
 </div>
 `}
-css={`
-.avatars {
-    display: flex;
-}
+                css={`
+                    .avatars {
+                        display: flex;
+                    }
 
-.avatars__item {
-    /* Nagative margin make avatar overlap to previous one */
-    margin-left: -4px;
-}
+                    .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;
+                    .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;
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Rounded border */
-    border-radius: 9999px;
-}
-`}
+                        /* Rounded border */
+                        border-radius: 9999px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <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 style={{ marginLeft: '-4px' }}>
+                        <Avatar />
                     </div>
-                </BrowserFrame>
-            </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]}
             />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/avatar/index.tsx b/pages/avatar/index.tsx
index 82691b0..510a2a0 100644
--- a/pages/avatar/index.tsx
+++ b/pages/avatar/index.tsx
@@ -1,19 +1,15 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Avatar}>
+        <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" />
@@ -21,29 +17,29 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css avatar, css flexbox" />
             </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
index 8c7db88..09553e3 100644
--- a/pages/badge/index.tsx
+++ b/pages/badge/index.tsx
@@ -1,82 +1,77 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Badge}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="badge">
     ...
 </div>
 `}
-css={`
-.badge {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                css={`
+                    .badge {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-    color: #FFF;
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.3);
+                        color: #fff;
 
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 32px;
-    width: 32px;
-}
-`}
+                        /* 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',
-                            height: '100%',
+                            fontSize: '20px',
+                            height: '32px',
                             justifyContent: 'center',
-                            padding: '8px',
+                            width: '32px',
                         }}
                     >
-                        <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>
+                        1
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/breadcrumb/index.tsx b/pages/breadcrumb/index.tsx
index e9be28b..3a775db 100644
--- a/pages/breadcrumb/index.tsx
+++ b/pages/breadcrumb/index.tsx
@@ -1,28 +1,22 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.Breadcrumb}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="breadcrumb">
     <!-- Breadcrumb item -->
     <a>...</a>
@@ -34,41 +28,48 @@ html={`
     ...
 </div>
 `}
-css={`
-.breadcrumb {
-    /* Content is centered vertically */
-    align-items: center;
-    display: flex;
-}
+                css={`
+                    .breadcrumb {
+                        /* Content is centered vertically */
+                        align-items: center;
+                        display: flex;
+                    }
 
-.breadcrumb__separator {
-    margin: 0 8px;
-}
-`}
+                    .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',
-                            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 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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/button-with-icon/index.tsx b/pages/button-with-icon/index.tsx
index 3489995..d1fa12c 100644
--- a/pages/button-with-icon/index.tsx
+++ b/pages/button-with-icon/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.ButtonWithIcon}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <button class="button">
     <!-- Icon -->
     ...
@@ -32,46 +26,47 @@ html={`
     ...
 </div>
 `}
-css={`
-.button {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-`}
+                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={{
-                            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 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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/card-layout/index.tsx b/pages/card-layout/index.tsx
index 05c0ff5..bae1ae7 100644
--- a/pages/card-layout/index.tsx
+++ b/pages/card-layout/index.tsx
@@ -1,20 +1,16 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.CardLayout}>
+        <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" />
@@ -22,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css card layout, css flexbox, css layout" />
             </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/pages/card/index.tsx b/pages/card/index.tsx
index d60abfe..b1b6f68 100644
--- a/pages/card/index.tsx
+++ b/pages/card/index.tsx
@@ -1,21 +1,17 @@
-/**
- * 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 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 { 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}>
+        <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" />
@@ -23,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css card, css flexbox" />
             </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
index 727fe3d..9f98624 100644
--- a/pages/centering/index.tsx
+++ b/pages/centering/index.tsx
@@ -1,59 +1,58 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.Centering}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     ...
 </div>
 `}
-css={`
-.container {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-`}
+                css={`
+                    .container {
+                        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',
-                        }}
-                    >
-                        <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>
+                    <Circle size={64} />
+                    <div style={{ marginTop: '16px', width: '40%' }}>
+                        <Rectangle />
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                    <div style={{ marginTop: '8px', width: '30%' }}>
+                        <Rectangle />
+                    </div>
+                    <div style={{ marginTop: '8px', width: '20%' }}>
+                        <Rectangle />
+                    </div>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/chip/InputChip.tsx b/pages/chip/InputChip.tsx
deleted file mode 100644
index ea8748d..0000000
--- a/pages/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/pages/chip/index.tsx b/pages/chip/index.tsx
index 71340b4..e264bab 100644
--- a/pages/chip/index.tsx
+++ b/pages/chip/index.tsx
@@ -1,33 +1,81 @@
-/**
- * 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 Head from 'next/head';
-import { Link } from 'react-router-dom';
+import Link from 'next/link';
+import { Spacer } from '@1milligram/design';
 
 import { RelatedPatterns } from '../../components/RelatedPatterns';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import InputChip from './InputChip';
+
+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 (
-        <DetailsLayout pattern={Pattern.Chip}>
+        <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 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 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">
@@ -39,44 +87,44 @@ html={`
     ...
 </div>
 `}
-css={`
-.chip {
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
+                css={`
+                    .chip {
+                        /* Center the content */
+                        align-items: center;
+                        display: inline-flex;
+                        justify-content: center;
 
-    /* Background color */
-    background-color: rgba(0, 0, 0, .1);
+                        /* Background color */
+                        background-color: rgba(0, 0, 0, 0.1);
 
-    /* Rounded border */
-    border-radius: 9999px;
+                        /* Rounded border */
+                        border-radius: 9999px;
 
-    /* Spacing */
-    padding: 4px 8px;
-}
+                        /* Spacing */
+                        padding: 4px 8px;
+                    }
 
-.chip__content {
-    margin-right: 4px;
-}
-`}
+                    .chip__content {
+                        margin-right: 4px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <InputChip>CSS</InputChip>
-                    </div>
-                </BrowserFrame>
-            </div>
+                    <InputChip>CSS</InputChip>
+                </div>
+            </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.CloseButton]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/circular-navigation/index.tsx b/pages/circular-navigation/index.tsx
index 4899062..0703484 100644
--- a/pages/circular-navigation/index.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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-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}>
+        <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" />
             </Head>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <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
index 87a6600..2a2224f 100644
--- a/pages/close-button/index.tsx
+++ b/pages/close-button/index.tsx
@@ -1,135 +1,130 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.CloseButton}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <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;
+                css={`
+                    .button {
+                        /* Reset */
+                        background-color: transparent;
+                        border-color: transparent;
 
-    /* Cursor */
-    cursor: pointer;
+                        /* Cursor */
+                        cursor: pointer;
 
-    /* Size */
-    height: 32px;
-    width: 32px;
+                        /* Size */
+                        height: 32px;
+                        width: 32px;
 
-    /* Used to position the inner */
-    position: relative;
-}
+                        /* Used to position the inner */
+                        position: relative;
+                    }
 
-.button__line {
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
+                    .button__line {
+                        /* Background color */
+                        background-color: rgba(0, 0, 0, 0.3);
 
-    /* Position */
-    position: absolute;
+                        /* Position */
+                        position: absolute;
 
-    /* Size */
-    height: 1px;
-    width: 100%;
-}
+                        /* Size */
+                        height: 1px;
+                        width: 100%;
+                    }
 
-.button__line--first {
-    /* Position */
-    left: 0px;
-    top: 50%;
-    transform: translate(0%, -50%) rotate(45deg);
+                    .button__line--first {
+                        /* Position */
+                        left: 0px;
+                        top: 50%;
+                        transform: translate(0%, -50%) rotate(45deg);
 
-    /* Size */
-    height: 1px;
-    width: 100%;
-}
+                        /* Size */
+                        height: 1px;
+                        width: 100%;
+                    }
 
-.button__line--second {
-    /* Position */
-    left: 50%;
-    top: 0px;
-    transform: translate(-50%, 0%) rotate(45deg);
+                    .button__line--second {
+                        /* Position */
+                        left: 50%;
+                        top: 0px;
+                        transform: translate(-50%, 0%) rotate(45deg);
 
-    /* Size */
-    height: 100%;
-    width: 1px;
-}
-`}
+                        /* Size */
+                        height: 100%;
+                        width: 1px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <div
+                    <button
                         style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            backgroundColor: 'transparent',
+                            borderColor: 'transparent',
+                            cursor: 'pointer',
+                            height: '32px',
+                            position: 'relative',
+                            width: '32px',
                         }}
                     >
-                        <button
+                        <div
                             style={{
-                                backgroundColor: 'transparent',
-                                borderColor: 'transparent',
-                                cursor: 'pointer',
-                                height: '32px',
-                                position: 'relative',
-                                width: '32px',
+                                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: '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>
+                        />
+                        <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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/color-swatch/index.tsx b/pages/color-swatch/index.tsx
index 41b15a6..e3df502 100644
--- a/pages/color-swatch/index.tsx
+++ b/pages/color-swatch/index.tsx
@@ -1,18 +1,13 @@
-/**
- * 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 Head from 'next/head';
 
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.ColorSwatch}>
+        <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" />
@@ -20,7 +15,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css color swatch, css flexbox" />
             </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="swatch">
     <div class="swatch__item" style="background-color: ..."></div>
 
@@ -28,22 +23,22 @@ html={`
     ...
 </div>
 `}
-css={`
-.swatch {
-    /* Wrap the items */
-    display: flex;
-    flex-wrap: wrap;
-}
-.swatch__item {
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 1.5rem;
-    width: 1.5rem;
+                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;
-}
-`}
+                        /* Space between items */
+                        margin: 0.5rem;
+                    }
+                `}
             >
                 <div
                     style={{
@@ -60,24 +55,24 @@ css={`
                             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',
-                                }}
-                            />
-                        ))
-                    }
+                        {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>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/concave-corners/index.tsx b/pages/concave-corners/index.tsx
index cab7c7e..dcf9565 100644
--- a/pages/concave-corners/index.tsx
+++ b/pages/concave-corners/index.tsx
@@ -1,19 +1,15 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.ConcaveCorners}>
+        <PatternLayout pattern={Pattern.ConcaveCorners}>
             <Head>
                 <meta name="description" content="Create concave corners with CSS" />
                 <meta name="og:description" content="Create concave corners with CSS" />
@@ -21,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css border radius, css concave border radius, css concave corners" />
             </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="concave-corners">
     <!-- The top-left corner -->
     <div class="concave-corners__corner concave-corners__corner--tl"></div>
@@ -39,69 +35,69 @@ html={`
     ...
 </div>
 `}
-css={`
-:root {
-    --concave-corners-background: rgba(0, 0, 0, .3);
-    --concave-corners-size: 1rem;
-}
+                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;
+                    .concave-corners {
+                        background-color: var(--concave-corners-background);
 
-    /* Misc */
-    height: 100%;
-}
+                        /* Used to position the corners */
+                        position: relative;
 
-.concave-corners__corner {
-    /* Absolute position */
-    position: absolute;
+                        /* Misc */
+                        height: 100%;
+                    }
 
-    /* Size */
-    height: var(--concave-corners-size);    
-    width: var(--concave-corners-size);
+                    .concave-corners__corner {
+                        /* Absolute position */
+                        position: absolute;
 
-    background: #FFF;
-}
+                        /* Size */
+                        height: var(--concave-corners-size);
+                        width: var(--concave-corners-size);
 
-.concave-corners__corner--tl {
-    /* Position */
-    left: 0;
-    top: 0;
+                        background: #fff;
+                    }
 
-    /* Border radius */
-    border-radius: 0 0 var(--concave-corners-size) 0;
-}
+                    .concave-corners__corner--tl {
+                        /* Position */
+                        left: 0;
+                        top: 0;
 
-.concave-corners__corner--tr {
-    /* Position */ 
-    right: 0;
-    top: 0;
+                        /* Border radius */
+                        border-radius: 0 0 var(--concave-corners-size) 0;
+                    }
 
-    /* Border radius */
-    border-radius: 0 0 0 var(--concave-corners-size);
-}
+                    .concave-corners__corner--tr {
+                        /* Position */
+                        right: 0;
+                        top: 0;
 
-.concave-corners__corner--bl {
-    /* Position */
-    bottom: 0;
-    left: 0;
+                        /* Border radius */
+                        border-radius: 0 0 0 var(--concave-corners-size);
+                    }
 
-    /* Border radius */
-    border-radius: 0 var(--concave-corners-size) 0 0;
-}
+                    .concave-corners__corner--bl {
+                        /* Position */
+                        bottom: 0;
+                        left: 0;
 
-.concave-corners__corner--br {
-    /* Position */
-    bottom: 0;
-    right: 0;
+                        /* Border radius */
+                        border-radius: 0 var(--concave-corners-size) 0 0;
+                    }
 
-    /* Border radius */
-    border-radius: var(--concave-corners-size) 0 0 0;
-}
-`}
+                    .concave-corners__corner--br {
+                        /* Position */
+                        bottom: 0;
+                        right: 0;
+
+                        /* Border radius */
+                        border-radius: var(--concave-corners-size) 0 0 0;
+                    }
+                `}
             >
                 <div
                     style={{
@@ -119,18 +115,19 @@ css={`
                             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 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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/cookie-banner/index.tsx b/pages/cookie-banner/index.tsx
index cea829b..f49a4da 100644
--- a/pages/cookie-banner/index.tsx
+++ b/pages/cookie-banner/index.tsx
@@ -1,30 +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 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 { 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.CookieBanner}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="banner">
     <!-- Tells visitors that the website uses cookie -->
     <div class="banner__content">
@@ -35,61 +30,62 @@ html={`
     ...
 </div>
 `}
-css={`
-.banner {
-    /* Banner is displayed at the bottom */
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    width: 100%;
+                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;
-}
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
 
-.banner__content {
-    /* Take available width */
-    flex: 1;
-}
-`}
+                    .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',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            position: 'relative',
+                            left: 0,
+                            padding: '8px',
+                            position: 'absolute',
+                            width: '100%',
                         }}
                     >
-                        <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 style={{ flex: 1, marginRight: '12px' }}>
+                            <Block numberOfBlocks={5} />
+                        </div>
+                        <div style={{ width: '96px' }}>
+                            <Rectangle height={32} />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/corner-ribbon/index.tsx b/pages/corner-ribbon/index.tsx
index b1ddbc9..702b040 100644
--- a/pages/corner-ribbon/index.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 Head from 'next/head';
-import { Link } from 'react-router-dom';
+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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.CornerRibbon}>
+        <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" />
             </Head>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <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
index c5782e5..c44b463 100644
--- a/pages/curved-background/index.tsx
+++ b/pages/curved-background/index.tsx
@@ -1,67 +1,62 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.CurvedBackground}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     ...
 </div>
 `}
-css={`
-.container {
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
+                css={`
+                    .container {
+                        /* Background color */
+                        background-color: rgba(0, 0, 0, 0.3);
 
-    /* You can use gradient background color such as
+                        /* 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%;
-}
-`}
+                        /* Curved corners */
+                        border-bottom-left-radius: 50% 40%;
+                        border-bottom-right-radius: 50% 40%;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        padding: '8px',
+                    }}
                 >
                     <div
                         style={{
-                            height: '100%',
-                            padding: '8px',
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            borderBottomLeftRadius: '50% 40%',
+                            borderBottomRightRadius: '50% 40%',
+                            height: '50%',
+                            width: '100%',
                         }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderBottomLeftRadius: '50% 40%',
-                                borderBottomRightRadius: '50% 40%',
-                                height: '50%',
-                                width: '100%',
-                            }}
-                        />
-                    </div>
-                </BrowserFrame>
-            </div>
+                    />
+                </div>
+            </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.DiagonalSection]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/custom-checkbox-button/index.tsx b/pages/custom-checkbox-button/index.tsx
index 0fce33c..1f5fb96 100644
--- a/pages/custom-checkbox-button/index.tsx
+++ b/pages/custom-checkbox-button/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -63,16 +59,15 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout pattern={Pattern.CustomCheckboxButton}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <label class="label">
     <!-- The real checkbox -->
     <input type="checkbox" class="label__input" />
@@ -87,91 +82,97 @@ html={`
     ...
 </div>
 `}
-css={`
-.label {
-    /* Center the content horizontally */
-    align-items: center;
-    display: inline-flex;
+                css={`
+                    .label {
+                        /* Center the content horizontally */
+                        align-items: center;
+                        display: inline-flex;
 
-    /* Cursor */
-    cursor: pointer;
-}
+                        /* Cursor */
+                        cursor: pointer;
+                    }
 
-.label__input {
-    /* Hide it */
-    display: none;
-}
+                    .label__input {
+                        /* Hide it */
+                        display: none;
+                    }
 
-.label__square {
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
+                    .label__square {
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 4px;
 
-    /* Spacing */
-    margin-right: 8px;
-    padding: 4px;
-}
+                        /* Spacing */
+                        margin-right: 8px;
+                        padding: 4px;
+                    }
 
-.label__checkbox {
-    background-color: transparent;
-    border-radius: 4px;
-    height: 16px;
-    width: 16px;
-}
+                    .label__checkbox {
+                        background-color: transparent;
+                        border-radius: 4px;
+                        height: 16px;
+                        width: 16px;
+                    }
 
-.label__checkbox--selected {
-    /* For selected checkbox */
-    background-color: #00449E;
-}
-`}
+                    .label__checkbox--selected {
+                        /* For selected checkbox */
+                        background-color: #00449e;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <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 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>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/custom-radio-button/index.tsx b/pages/custom-radio-button/index.tsx
index 9aded3e..a07bc52 100644
--- a/pages/custom-radio-button/index.tsx
+++ b/pages/custom-radio-button/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -49,9 +45,7 @@ const Details: React.FC<{}> = () => {
                 >
                     <div
                         style={{
-                            backgroundColor: value === selectedValue
-                                ? '#00449E'
-                                : 'transparent',
+                            backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
                             borderRadius: '9999px',
                             height: '16px',
                             width: '16px',
@@ -64,16 +58,15 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout pattern={Pattern.CustomRadioButton}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <label class="label">
     <!-- The real radio -->
     <input type="radio" class="label__input" />
@@ -88,95 +81,101 @@ html={`
     ...
 </div>
 `}
-css={`
-.label {
-    /* Center the content horizontally */
-    align-items: center;
-    display: inline-flex;
+                css={`
+                    .label {
+                        /* Center the content horizontally */
+                        align-items: center;
+                        display: inline-flex;
 
-    /* Cursor */
-    cursor: pointer;
-}
+                        /* Cursor */
+                        cursor: pointer;
+                    }
 
-.label__input {
-    /* Hide it */
-    display: none;
-}
+                    .label__input {
+                        /* Hide it */
+                        display: none;
+                    }
 
-.label__circle {
-    /* Rounded border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 9999px;
+                    .label__circle {
+                        /* Rounded border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 9999px;
 
-    /* Spacing */
-    margin-right: 8px;
-    padding: 4px;
-}
+                        /* Spacing */
+                        margin-right: 8px;
+                        padding: 4px;
+                    }
 
-.label__radio {
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 16px;
-    width: 16px;
+                    .label__radio {
+                        /* Rounded border */
+                        border-radius: 9999px;
+                        height: 16px;
+                        width: 16px;
 
-    /* For not selected radio */
-    background-color: transparent;
-}
+                        /* For not selected radio */
+                        background-color: transparent;
+                    }
 
-.label__radio--selected {
-    /* For selected radio */
-    background-color: #00449E;
-}
-`}
+                    .label__radio--selected {
+                        /* For selected radio */
+                        background-color: #00449e;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <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 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>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/diagonal-section/index.tsx b/pages/diagonal-section/index.tsx
index b664b24..dc943b0 100644
--- a/pages/diagonal-section/index.tsx
+++ b/pages/diagonal-section/index.tsx
@@ -1,29 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.DiagonalSection}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- The diagonal area -->
     <div class="container__diagonal"></div>
@@ -32,75 +27,74 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    /* Used to position the diagonal area */
-    position: relative;
-}
+                css={`
+                    .container {
+                        /* Used to position the diagonal area */
+                        position: relative;
+                    }
 
-.container__diagonal {
-    /* Absolute position */
-    left: 0px;
-    position: absolute;
-    top: 0px;
+                    .container__diagonal {
+                        /* Absolute position */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
 
-    /* Take full size */
-    height: 100%;
-    width: 100%;
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
 
-    /* Create diagonal sides */
-    transform: skewY(-5deg);
+                        /* Create diagonal sides */
+                        transform: skewY(-5deg);
 
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
+                        /* Background color */
+                        background-color: rgba(0, 0, 0, 0.3);
 
-    /* Displayed under the main content */
-    z-index: -1;
-}
-`}
+                        /* 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: '100%',
+                            height: '200px',
                             justifyContent: 'center',
+                            position: 'relative',
+                            width: '75%',
                         }}
                     >
                         <div
                             style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '200px',
-                                justifyContent: 'center',
-                                position: 'relative',
-                                width: '75%',
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '100%',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'skewY(-5deg)',
+                                width: '100%',
+                                zIndex: -1,
                             }}
-                        >
-                            <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 style={{ width: '60%' }}>
+                            <Block backgroundColor="#fff" justify="center" numberOfBlocks={5} />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.CurvedBackground]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/docked-at-corner/index.tsx b/pages/docked-at-corner/index.tsx
index 15f139f..c7a7b45 100644
--- a/pages/docked-at-corner/index.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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.DockedAtCorner}>
+        <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" />
             </Head>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <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/pages/dot-leader/index.tsx b/pages/dot-leader/index.tsx
index b80b0fe..3ca9b7b 100644
--- a/pages/dot-leader/index.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 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 { 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}>
+        <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" />
             </Head>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <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
index c6140e4..cec851e 100644
--- a/pages/dot-navigation/index.tsx
+++ b/pages/dot-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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 interface DotProps {
@@ -37,16 +32,15 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout pattern={Pattern.DotNavigation}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <ul class="dots">
     <li class="dots__item"></li>
 
@@ -54,66 +48,65 @@ html={`
     ...
 </div>
 `}
-css={`
-.dots {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                css={`
+                    .dots {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
+                        /* Reset styles */
+                        list-style-type: none;
+                        margin: 0;
+                        padding: 0;
+                    }
 
-.dots__item {
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 12px;
-    width: 12px;
+                    .dots__item {
+                        /* Rounded border */
+                        border-radius: 9999px;
+                        height: 12px;
+                        width: 12px;
 
-    /* Active dot */
-    background-color: rgba(0, 0, 0, .3);
+                        /* Active dot */
+                        background-color: rgba(0, 0, 0, 0.3);
 
-    /* Inactive dot */
-    background-color: transparent;
-    border: 1px solid rgba(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;
-}
-`}
+                        /* OPTIONAL: Spacing between dots */
+                        margin: 0 4px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <div
+                    <ul
                         style={{
                             alignItems: 'center',
                             display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
                             justifyContent: 'center',
-                            padding: '8px',
+                            listStyleType: 'none',
+                            margin: 0,
+                            padding: 0,
                         }}
                     >
-                        <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>
+                        <Dot index={0} />
+                        <Dot index={1} />
+                        <Dot index={2} />
+                        <Dot index={3} />
+                    </ul>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/drawer/index.tsx b/pages/drawer/index.tsx
index 7f9081a..f2e67a2 100644
--- a/pages/drawer/index.tsx
+++ b/pages/drawer/index.tsx
@@ -1,31 +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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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 (
-        <DetailsLayout pattern={Pattern.Drawer}>
+        <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 className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    This pattern is also known as off-canvas.
-                </div>
-                <BrowserFrame
-html={`
+            <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>
@@ -36,79 +28,78 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    /* Container takes full size */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
+                css={`
+                    .container {
+                        /* Container takes full size */
+                        height: 100%;
+                        left: 0;
+                        position: fixed;
+                        top: 0;
+                        width: 100%;
 
-    z-index: 9999;
-}
+                        z-index: 9999;
+                    }
 
-.container__overlay {
-    /* Take full size */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
+                    .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);
+                        /* User still can see the content of main page */
+                        background-color: rgba(0, 0, 0, 0.5);
 
-    z-index: -1;
-}
+                        z-index: -1;
+                    }
 
-.container__sidebar {
-    /* Take full height */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 200px;
+                    .container__sidebar {
+                        /* Take full height */
+                        height: 100%;
+                        left: 0;
+                        position: fixed;
+                        top: 0;
+                        width: 200px;
 
-    /* Background */
-    background-color: #fff;
-}
-`}
+                        /* Background */
+                        background-color: #fff;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
                 >
                     <div
                         style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
                             height: '100%',
-                            position: 'relative',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
                             width: '100%',
                         }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: '#fff',
+                            height: '100%',
+                            left: 0,
+                            padding: '16px',
+                            position: 'absolute',
+                            top: 0,
+                            width: '250px',
+                        }}
                     >
-                        <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>
+                        <Block numberOfBlocks={20} />
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/drop-area/index.tsx b/pages/drop-area/index.tsx
index 11a6943..5df7f1d 100644
--- a/pages/drop-area/index.tsx
+++ b/pages/drop-area/index.tsx
@@ -1,33 +1,27 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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 (
-        <DetailsLayout pattern={Pattern.DropArea}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     ...
 </div>
 `}
-css={`
+                css={`
 .container {
     /* Center the content */
     align-items: center;
@@ -39,37 +33,36 @@ css={`
     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: '100%',
+                            height: '80%',
                             justifyContent: 'center',
-                            padding: '8px',
+                            width: '80%',
                         }}
                     >
-                        <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 style={{ width: '40%' }}>
+                            <Block justify="center" numberOfBlocks={10} />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/drop-cap/index.tsx b/pages/drop-cap/index.tsx
index e901dfb..61e2dcb 100644
--- a/pages/drop-cap/index.tsx
+++ b/pages/drop-cap/index.tsx
@@ -1,70 +1,62 @@
-/**
- * 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 Head from 'next/head';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import { Pattern } from '../../constants/Pattern';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.DropCap}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     ...
 </div>
 `}
-css={`
-/* Styles for the first letter */
-.container:first-letter {
-    /* Display at the left */
-    float: left;
-    line-height: 1;
+                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;
+                        /* Spacing */
+                        margin: 0 8px 0 0;
+                        padding: 0 8px;
 
-    /* Optional */
-    font-size: 64px;
-    font-weight: 700;
-}
-`}
+                        /* Optional */
+                        font-size: 64px;
+                        font-weight: 700;
+                    }
+                `}
+            >
+                <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={{ 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 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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/dropdown/index.tsx b/pages/dropdown/index.tsx
index 10de112..942b630 100644
--- a/pages/dropdown/index.tsx
+++ b/pages/dropdown/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -16,19 +12,18 @@ import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Dropdown}>
+        <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 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 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>
@@ -39,108 +34,110 @@ html={`
     </div>
 </div>
 `}
-css={`
-.dropdown {
-    position: relative;   
-}
+                css={`
+                    .dropdown {
+                        position: relative;
+                    }
 
-/* Hide the dropdown's content by default */
-.dropdown__content {
-    display: none;
+                    /* 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%;
+                        /* 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;
+                        /* It should be on the top of other elements */
+                        background-color: #fff;
+                        zindex: 9999;
 
-    /* Size */
-    height: 200px;
-    width: 200px;
-}
+                        /* Size */
+                        height: 200px;
+                        width: 200px;
+                    }
 
-/* Show the content when hover on the container */
-.dropdown:hover .dropdown__content {
-    display: block;
-}
-`}
+                    /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            position: 'relative',
                         }}
                     >
-                        <div
-                            className="p-dropdown"
+                        <button
                             style={{
-                                position: 'relative',
+                                alignItems: 'center',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                height: '32px',
+                                width: '128px',
                             }}
                         >
-                            <button
+                            <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: '32px',
-                                    width: '128px',
+                                    height: '100%',
+                                    justifyContent: 'center',
+                                    padding: '16px',
+                                    width: '100%',
                                 }}
                             >
-                                <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>
+                                <Block numberOfBlocks={10} justify="center" />
                             </div>
                         </div>
-                        <div
-                            style={{
-                                marginTop: '16px',
-                                width: '256px',
-                            }}
-                        >
-                            <Block numberOfBlocks={20} justify='center' />
-                        </div>
                     </div>
-                </BrowserFrame>
-            </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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/fading-long-section/index.tsx b/pages/fading-long-section/index.tsx
index 1a1cfcc..a96c267 100644
--- a/pages/fading-long-section/index.tsx
+++ b/pages/fading-long-section/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 Head from 'next/head';
 import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.FadingLongSection}>
+        <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 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 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">
@@ -36,70 +30,69 @@ html={`
     <div class="container__fading"></div>
 </div>
 `}
-css={`
-.container {
-    /* Used to position the faded element */
-    position: relative;
-}
+                css={`
+                    .container {
+                        /* Used to position the faded element */
+                        position: relative;
+                    }
 
-.container__content {
-    /* Height */
-    height: 200px;
+                    .container__content {
+                        /* Height */
+                        height: 200px;
 
-    /* Scrollable */
-    overflow-y: scroll;
-}
+                        /* Scrollable */
+                        overflow-y: scroll;
+                    }
 
-.container__fading {
-    /* Displayed at the bottom */
-    bottom: 0;
-    left: 0;
-    position: absolute;
+                    .container__fading {
+                        /* Displayed at the bottom */
+                        bottom: 0;
+                        left: 0;
+                        position: absolute;
 
-    /* Size */
-    height: 30px;
-    width: 100%;
+                        /* Size */
+                        height: 30px;
+                        width: 100%;
 
-    /* Gradient background */
-    background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
-}
-`}
+                        /* 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={{
-                            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 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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/feature-comparison/index.tsx b/pages/feature-comparison/index.tsx
index 0f849c1..120c061 100644
--- a/pages/feature-comparison/index.tsx
+++ b/pages/feature-comparison/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -16,16 +12,15 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.FeatureComparison}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Feature name -->
     <div class="container__feature">
@@ -48,145 +43,179 @@ html={`
 <!-- Repeated items -->
 ...
 `}
-css={`
-.container {
-    align-items: center;
-    display: flex;
+                css={`
+                    .container {
+                        align-items: center;
+                        display: flex;
 
-    /* Bottom border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        /* Bottom border */
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 
-    /* Spacing */
-    padding: 12px 0px;
-}
+                        /* Spacing */
+                        padding: 12px 0px;
+                    }
 
-.container__feature {
-    /* Take available width */
-    flex: 1;
+                    .container__feature {
+                        /* Take available width */
+                        flex: 1;
 
-    /* Spacing */
-    margin-right: 16px;
-}
+                        /* Spacing */
+                        margin-right: 16px;
+                    }
 
-.container__model {
-    /* Center the content */
-    display: flex;
-    justify-content: center;
+                    .container__model {
+                        /* Center the content */
+                        display: flex;
+                        justify-content: center;
 
-    /* Spacing */
-    margin-right: 16px;
-}
-`}
+                        /* Spacing */
+                        margin-right: 16px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
                 >
-                    <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 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={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
                                     display: 'flex',
-                                    padding: '8px 0',
-                                    width: '100%',
+                                    justifyContent: 'center',
+                                    marginRight: '16px',
+                                    width: '75px',
                                 }}
                             >
-                                <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>
+                                <Rectangle />
                             </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 style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                <Rectangle />
                             </div>
                         </div>
-                    </div>
-                </BrowserFrame>
-            </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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/feature-list/index.tsx b/pages/feature-list/index.tsx
index 6749aa2..84da562 100644
--- a/pages/feature-list/index.tsx
+++ b/pages/feature-list/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -16,16 +12,15 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.FeatureList}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <!-- Feature item -->
 <div class="container">
     <!-- Image -->
@@ -42,57 +37,64 @@ html={`
 <!-- Repeated items -->
 ...
 `}
-css={`
-.container {
-    display: flex;
+                css={`
+                    .container {
+                        display: flex;
 
-    /* OPTIONAL: Reverse the order of image and content */
-    flex-direction: row-reverse;
+                        /* OPTIONAL: Reverse the order of image and content */
+                        flex-direction: row-reverse;
 
-    /* OPTIONAL: Spacing between items */
-    margin: 16px 0;
-}
+                        /* OPTIONAL: Spacing between items */
+                        margin: 16px 0;
+                    }
 
-.container__image {
-    width: 128px;
-}
+                    .container__image {
+                        width: 128px;
+                    }
 
-.container__feature {
-    /* Take the remaining width */
-    flex: 1;
-}
-`}
+                    .container__feature {
+                        /* Take the remaining width */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
                 >
-                    <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 style={{ width: '60%' }}>
+                        <div style={{ display: 'flex', marginBottom: '32px' }}>
+                            <div style={{ margin: '0 16px' }}>
+                                <Circle size={128} />
                             </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 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>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/fixed-at-corner/index.tsx b/pages/fixed-at-corner/index.tsx
index 251e237..bc1bf19 100644
--- a/pages/fixed-at-corner/index.tsx
+++ b/pages/fixed-at-corner/index.tsx
@@ -1,29 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.FixedAtCorner}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Top-left corner -->
     <div class="container__corner container__corner--tl">
@@ -46,54 +41,54 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    position: relative;
-}
+                css={`
+                    .container {
+                        position: relative;
+                    }
 
-.container__corner {
-    position: absolute;
-}
+                    .container__corner {
+                        position: absolute;
+                    }
 
-.container__corner--tl {
-    left: 0;        
-    top: 0;
-}
+                    .container__corner--tl {
+                        left: 0;
+                        top: 0;
+                    }
 
-.container__corner--tr {
-    top: 0;
-    right: 0;
-}
+                    .container__corner--tr {
+                        top: 0;
+                        right: 0;
+                    }
 
-.container__corner--br {
-    bottom: 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>
+                    .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>
-                </BrowserFrame>
-            </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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/fixed-at-side/index.tsx b/pages/fixed-at-side/index.tsx
index a854466..4498ad8 100644
--- a/pages/fixed-at-side/index.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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.FixedAtSide}>
+        <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" />
             </Head>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <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
index 88b7725..16b638d 100644
--- a/pages/floating-label/index.tsx
+++ b/pages/floating-label/index.tsx
@@ -1,32 +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 Head from 'next/head';
 
-import './floating-label.css';
-
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import { Pattern } from '../../constants/Pattern';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.FloatingLabel}>
+        <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 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 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" />
@@ -35,80 +27,79 @@ html={`
     <label class="container__label">Placeholder</label>
 </div>
 `}
-css={`
-.container {
-    position: relative;
-}
+                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__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;
+                    .container__label {
+                        /* Position the label */
+                        left: 8px;
+                        position: absolute;
+                        top: 0;
 
-    /* Hide it by default */
-    opacity: 0;
-    transition: all 200ms;
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            padding: '0 1px',
+                            position: 'relative',
+                            width: '200px',
                         }}
                     >
-                        <div
-                            className="p-floating-container"
+                        <input
+                            id="floating-label-input"
+                            placeholder="Placeholder"
+                            type="text"
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                padding: '0 1px',
-                                position: 'relative',
-                                width: '200px',
+                                borderColor: 'transparent',
+                                padding: '8px',
+                                width: '100%',
+                            }}
+                        />
+                        <label
+                            htmlFor="floating-label-input"
+                            style={{
+                                left: '8px',
+                                padding: '0 8px',
+                                position: 'absolute',
+                                top: 0,
+                                transition: 'all 200ms',
                             }}
                         >
-                            <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>
+                            Placeholder
+                        </label>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/folder-structure/index.tsx b/pages/folder-structure/index.tsx
index f450e14..41a402d 100644
--- a/pages/folder-structure/index.tsx
+++ b/pages/folder-structure/index.tsx
@@ -1,21 +1,17 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Square from '../../placeholders/Square';
 import './folder-structure.css';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.FolderStructure}>
+        <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" />
@@ -23,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css folder structure, css folder tree" />
             </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="folder-structure">
     <ul>
         <li>
@@ -53,57 +49,59 @@ html={`
     </ul>
 </div>
 `}
-css={`
-:root {
-    --folder-structure-item-height: 1rem;
-    --folder-structure-item-margin-left: 2rem;
-    --folder-structure-item-padding-top: 1rem;
-}
+                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 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 {
+                        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);
+                    .folder-structure li::before {
+                        border-left: 1px solid rgba(0, 0, 0, 0.3);
+                        content: '';
 
-    /* Size */
-    height: 100%;
-}
+                        /* Position */
+                        left: 0;
+                        position: absolute;
+                        top: 0;
+                        transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
 
-.folder-structure li::after {
-    border-bottom: 1px solid rgba(0, 0, 0, .3);
-    content: '';
+                        /* Size */
+                        height: 100%;
+                    }
 
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
-    transform: translate(-100%, 0);
+                    .folder-structure li::after {
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        content: '';
 
-    /* Size */
-    width: var(--folder-structure-item-margin-left);
-}
+                        /* Position */
+                        left: 0;
+                        position: absolute;
+                        top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+                        transform: translate(-100%, 0);
 
-/* 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);
-}
-`}
+                        /* 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={{
@@ -117,40 +115,57 @@ css={`
                     <div className="folder-structure">
                         <ul>
                             <li>
-                                <Square size='1rem' />
+                                <Square size="1rem" />
                                 <ul>
-                                    <li><Square size='1rem' /></li>
+                                    <li>
+                                        <Square size="1rem" />
+                                    </li>
                                 </ul>
                             </li>
                             <li>
-                                <Square size='1rem' />
+                                <Square size="1rem" />
                                 <ul>
                                     <li>
-                                        <Square size='1rem' />
+                                        <Square size="1rem" />
                                         <ul>
-                                            <li><Square size='1rem' /></li>
-                                            <li><Square size='1rem' /></li>
-                                            <li><Square size='1rem' /></li>
+                                            <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' />
+                                        <Square size="1rem" />
+                                    </li>
+                                    <li>
+                                        <Square size="1rem" />
                                         <ul>
-                                            <li><Square size='1rem' /></li>
-                                            <li><Square size='1rem' /></li>
+                                            <li>
+                                                <Square size="1rem" />
+                                            </li>
+                                            <li>
+                                                <Square size="1rem" />
+                                            </li>
                                         </ul>
                                     </li>
                                 </ul>
                             </li>
-                            <li><Square size='1rem' /></li>
+                            <li>
+                                <Square size="1rem" />
+                            </li>
                         </ul>
                     </div>
                 </div>
             </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.TreeDiagram]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/full-background/index.tsx b/pages/full-background/index.tsx
index e92b0f2..7ba8e24 100644
--- a/pages/full-background/index.tsx
+++ b/pages/full-background/index.tsx
@@ -1,80 +1,74 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.FullBackground}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     ...
 </div>
 `}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+                css={`
+                    .container {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
 
-    /* Take full size */
-    height: 100vh;
-    width: 100%;
+                        /* Take full size */
+                        height: 100vh;
+                        width: 100%;
 
-    /* Background */
-    background: url('/assets/full-background.jpeg') center center / cover no-repeat;
-}
-`}
+                        /* 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={{
-                                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 style={{ width: '250px' }}>
+                            <Block backgroundColor="#fff" justify="center" numberOfBlocks={10} />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.VideoBackground]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/full-screen-menu/index.tsx b/pages/full-screen-menu/index.tsx
index 2695c02..664e94a 100644
--- a/pages/full-screen-menu/index.tsx
+++ b/pages/full-screen-menu/index.tsx
@@ -1,28 +1,22 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.FullScreenMenu}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- The close button -->
     <button class="container__close">
@@ -35,104 +29,111 @@ html={`
     </ul>
 </div>
 `}
-css={`
-.container {
-    /* Full screen overlay */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
+                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;
-}
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
+                    }
 
-.container__close {
-    /* Shown at top right corner */
-    position: absolute;
-    right: 16px;
-    top: 16px;
-}
-`}
+                    .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',
-                            padding: '8px',
-                            position: 'relative',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '100%',
                         }}
                     >
-                        <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
+                        <ul
                             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%',
+                                listStyleType: 'none',
+                                margin: 0,
+                                padding: 0,
                             }}
                         >
-                            <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>
+                            <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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/holy-grail/index.tsx b/pages/holy-grail/index.tsx
index 5114ba5..34388ed 100644
--- a/pages/holy-grail/index.tsx
+++ b/pages/holy-grail/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.HolyGrail}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <header>
         ...
@@ -43,87 +37,90 @@ html={`
     </footer>
 </div>
 `}
-css={`
-.container {
-    display: flex;
-    flex-direction: column;
-}
+                css={`
+                    .container {
+                        display: flex;
+                        flex-direction: column;
+                    }
 
-.container__main {
-    /* Take the remaining height */
-    flex-grow: 1;
+                    .container__main {
+                        /* Take the remaining height */
+                        flex-grow: 1;
 
-    /* Layout the left sidebar, main content and right sidebar */
-    display: flex;
-    flex-direction: row;
-}
+                        /* Layout the left sidebar, main content and right sidebar */
+                        display: flex;
+                        flex-direction: row;
+                    }
 
-.container__left {
-    width: 25%;
-}
+                    .container__left {
+                        width: 25%;
+                    }
 
-.container__middle {
-    /* Take the remaining width */
-    flex-grow: 1;
-}
+                    .container__middle {
+                        /* Take the remaining width */
+                        flex-grow: 1;
+                    }
 
-.container__right {
-    width: 20%;
-}
-`}
+                    .container__right {
+                        width: 20%;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                    }}
                 >
                     <div
                         style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            flexShrink: 0,
+                            padding: '16px',
                         }}
                     >
-                        <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 style={{ width: '50%' }}>
+                            <Rectangle />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                    <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>
     );
 };
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 0b611cd..838d6f5 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -17,7 +17,9 @@ const HomePage = () => {
                     <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__category">
+                    <Heading level={2}>Display</Heading>
+                </div>
                 <div className="page-home__collection">
                     <CoverCard pattern={Pattern.Accordion} />
                     <CoverCard pattern={Pattern.ArrowButtons} />
@@ -74,7 +76,9 @@ const HomePage = () => {
                     <CoverCard pattern={Pattern.ZigzagTimeline} />
                 </div>
 
-                <div className="page-home__category"><Heading level={2}>Feedback</Heading></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} />
@@ -86,8 +90,10 @@ const HomePage = () => {
                     <CoverCard pattern={Pattern.Tooltip} />
                     <CoverCard pattern={Pattern.ValidationIcon} />
                 </div>
-                
-                <div className="page-home__category"><Heading level={2}>Input</Heading></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} />
@@ -107,7 +113,9 @@ const HomePage = () => {
                     <CoverCard pattern={Pattern.UploadButton} />
                 </div>
 
-                <div className="page-home__category"><Heading level={2}>Layout</Heading></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} />
@@ -121,7 +129,9 @@ const HomePage = () => {
                     <CoverCard pattern={Pattern.StickySections} />
                 </div>
 
-                <div className="page-home__category"><Heading level={2}>Navigation</Heading></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} />
diff --git a/pages/initial-avatar/index.tsx b/pages/initial-avatar/index.tsx
index 733adfd..730e179 100644
--- a/pages/initial-avatar/index.tsx
+++ b/pages/initial-avatar/index.tsx
@@ -1,33 +1,31 @@
-/**
- * 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 Head from 'next/head';
-import { Link } from 'react-router-dom';
+import Link from 'next/link';
+import { Spacer } from '@1milligram/design';
 
 import { RelatedPatterns } from '../../components/RelatedPatterns';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.InitialAvatar}>
+        <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 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 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 -->
@@ -35,71 +33,72 @@ html={`
     </div>
 </div>
 `}
-css={`
-.avatar {
-    /* Center the content */
-    display: inline-block;
-    vertical-align: middle;
+                css={`
+                    .avatar {
+                        /* Center the content */
+                        display: inline-block;
+                        vertical-align: middle;
 
-    /* Used to position the content */
-    position: relative;
+                        /* Used to position the content */
+                        position: relative;
 
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-    color: #FFF;
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.3);
+                        color: #fff;
 
-    /* Rounded border */
-    border-radius: 50%;
-    height: 48px;
-    width: 48px;
-}
+                        /* Rounded border */
+                        border-radius: 50%;
+                        height: 48px;
+                        width: 48px;
+                    }
 
-.avatar__letters {
-    /* Center the content */
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-`}
+                    .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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            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={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderRadius: '50%',
-                                color: '#FFF',
-                                display: 'inline-block',
-                                fontSize: '24px',
-                                height: '48px',
-                                position: 'relative',
-                                verticalAlign: 'middle',
-                                width: '48px',
+                                left: '50%',
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
                             }}
                         >
-                            <div
-                                style={{
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                PN
-                            </div>
+                            PN
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
 
             <RelatedPatterns
                 patterns={[
@@ -110,7 +109,7 @@ css={`
                     Pattern.PresenceIndicator,
                 ]}
             />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/input-addon/index.tsx b/pages/input-addon/index.tsx
index a9f1ee0..3328b33 100644
--- a/pages/input-addon/index.tsx
+++ b/pages/input-addon/index.tsx
@@ -1,28 +1,22 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.InputAddon}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <!-- Add-on prepended -->
 <div class="container">
     <!-- Add-on -->
@@ -61,153 +55,152 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    display: flex;
+                css={`
+                    .container {
+                        display: flex;
 
-    /* Take full size */
-    width: 100%;
-}
+                        /* Take full size */
+                        width: 100%;
+                    }
 
-.container__input {
-    /* Take the remaining width */
-    flex: 1;
-}
+                    .container__input {
+                        /* Take the remaining width */
+                        flex: 1;
+                    }
 
-.container__addon {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-`}
+                    .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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
+                    <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={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
                                     display: 'flex',
-                                    height: '32px',
-                                    marginBottom: '16px',
-                                    width: '100%',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                    width: '30%',
                                 }}
                             >
-                                <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',
-                                    }}
-                                />
+                                <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={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
                                     display: 'flex',
-                                    height: '32px',
-                                    marginBottom: '16px',
-                                    width: '100%',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                    width: '40%',
                                 }}
                             >
-                                <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>
+                                <Rectangle />
                             </div>
+                        </div>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                display: 'flex',
+                                height: '32px',
+                                width: '100%',
+                            }}
+                        >
                             <div
                                 style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
                                     display: 'flex',
-                                    height: '32px',
-                                    width: '100%',
+                                    justifyContent: 'center',
+                                    padding: '8px',
+                                    width: '20%',
                                 }}
                             >
-                                <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>
+                                <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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/inverted-corners/index.tsx b/pages/inverted-corners/index.tsx
index 8872413..403f33d 100644
--- a/pages/inverted-corners/index.tsx
+++ b/pages/inverted-corners/index.tsx
@@ -1,22 +1,17 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 import './inverted-corners.css';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.InvertedCorners}>
+        <PatternLayout pattern={Pattern.InvertedCorners}>
             <Head>
                 <meta name="description" content="Create inverted corners with CSS" />
                 <meta name="og:description" content="Create inverted corners with CSS" />
@@ -24,43 +19,43 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
             </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="inverted-corners">
     ...
 </div>
 `}
-css={`
-:root {
-    --inverted-corners-background: #52525B;
-    --inverted-corners-size: 2rem;
-}
+                css={`
+                    :root {
+                        --inverted-corners-background: #52525b;
+                        --inverted-corners-size: 2rem;
+                    }
 
-.inverted-corners {
-    background-color: var(--inverted-corners-background);
+                    .inverted-corners {
+                        background-color: var(--inverted-corners-background);
 
-    /* Used to position the corner */
-    position: relative;
-}
+                        /* Used to position the corner */
+                        position: relative;
+                    }
 
-.inverted-corners::before {
-    content: '';
+                    .inverted-corners::before {
+                        content: '';
 
-    /* Absolute position */
-    bottom: calc(-2 * var(--inverted-corners-size));
-    left: 0;
-    position: absolute;
+                        /* 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);
+                        /* 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;
-}
-`}
+                        /* 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={{
@@ -78,13 +73,15 @@ css={`
                             width: '16rem',
                         }}
                     >
-                        <div className='inverted-corners'></div>
+                        <div className="inverted-corners"></div>
                     </div>
                 </div>
             </BrowserFrame>
 
+            <Spacer size="extraLarge" />
+
             <section>
-                <Heading title="Use case" />
+                <Heading level={2}>Use cases</Heading>
 
                 <div
                     style={{
@@ -92,12 +89,13 @@ css={`
                         width: '16rem',
                     }}
                 >
-                    <div className='inverted-corners inverted-corners--speech'>Speech Bubble</div>
+                    <div className="inverted-corners inverted-corners--speech">Speech Bubble</div>
                 </div>
             </section>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.ConcaveCorners]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/keyboard-shortcut/index.tsx b/pages/keyboard-shortcut/index.tsx
index 6abe5c2..c478027 100644
--- a/pages/keyboard-shortcut/index.tsx
+++ b/pages/keyboard-shortcut/index.tsx
@@ -1,15 +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 Head from 'next/head';
-import { Link } from 'react-router-dom';
+import Link from 'next/link';
+import { Heading, Spacer } from '@1milligram/design';
 
-import Heading from '../../components/Heading';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 interface ItemProps {
@@ -46,71 +41,72 @@ const Item: React.FC<ItemProps> = ({ action, keys }) => {
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.KeyboardShortcut}>
+        <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 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={`
+            <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);
+                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;
+                        /* 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;
-}
-`}
+                        /* Spacing */
+                        padding: 8px;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <div
+                    <kbd
                         style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
+                            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',
                         }}
                     >
-                        <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>
+                        ⌘ + C
+                    </kbd>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
 
             <section>
-                <Heading title="Use cases" />
+                <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 to="/patterns/property-list">property list</Link> pattern
-                        to create shortkey preferences as following:
+                        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" />
@@ -119,7 +115,7 @@ css={`
                     </div>
                 </div>
             </section>
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/layered-card/index.tsx b/pages/layered-card/index.tsx
index f906f7f..31d2551 100644
--- a/pages/layered-card/index.tsx
+++ b/pages/layered-card/index.tsx
@@ -1,20 +1,16 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import './styles.css';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.LayeredCard}>
+        <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" />
@@ -22,35 +18,35 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css layered card" />
             </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 +69,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
index f7b9eec..465cdd7 100644
--- a/pages/lined-paper/index.tsx
+++ b/pages/lined-paper/index.tsx
@@ -1,78 +1,70 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.LinedPaper}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <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;
+                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;
-}
-`}
+                        background-position-y: 24px;
+                        line-height: 2em;
+                    }
+                `}
+            >
+                <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',
+                            backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
+                            backgroundPositionY: '24px',
+                            backgroundSize: '100% 2em',
+                            height: '200px',
+                            lineHeight: '2em',
+                            width: '75%',
                         }}
                     >
-                        <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>
+                            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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/masonry-grid/index.tsx b/pages/masonry-grid/index.tsx
index e90c6c2..37ef354 100644
--- a/pages/masonry-grid/index.tsx
+++ b/pages/masonry-grid/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -16,7 +12,7 @@ import './masonry-grid.css';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.MasonryGrid}>
+        <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" />
@@ -24,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css column-count, css column-gap, css masonry, css masonry grid" />
             </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="masonry-grid">
     <!--Item -->
     <div class="masonry-grid__item">...</div>
@@ -32,26 +28,26 @@ html={`
     <!-- Repeat other items -->
 </div>
 `}
-css={`
-.masonry-grid {
-    /* It is split into 3 columns */
-    column-count: 3;
+                css={`
+                    .masonry-grid {
+                        /* It is split into 3 columns */
+                        column-count: 3;
 
-    /* The space between columns */
-    column-gap: 1rem;
+                        /* The space between columns */
+                        column-gap: 1rem;
 
-    /* Misc */
-    width: 100%;
-}
+                        /* Misc */
+                        width: 100%;
+                    }
 
-.masonry-grid__item {
-    /* Prevent a column from breaking into multiple columns */
-    break-inside: avoid;
+                    .masonry-grid__item {
+                        /* Prevent a column from breaking into multiple columns */
+                        break-inside: avoid;
 
-    /* Misc */
-    margin-bottom: 1rem;
-}
-`}
+                        /* Misc */
+                        margin-bottom: 1rem;
+                    }
+                `}
             >
                 <div
                     style={{
@@ -63,23 +59,44 @@ css={`
                         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 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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/media-object/index.tsx b/pages/media-object/index.tsx
index bf2c2ec..fd0b134 100644
--- a/pages/media-object/index.tsx
+++ b/pages/media-object/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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';
@@ -15,16 +10,15 @@ import Square from '../../placeholders/Square';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.MediaObject}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Media object -->
     <div class="container__media">
@@ -37,48 +31,51 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    /* Align sub-items to top */
-    align-items: start;
-    display: flex;
-}
+                css={`
+                    .container {
+                        /* Align sub-items to top */
+                        align-items: start;
+                        display: flex;
+                    }
 
-.container__media {
-    margin-right: 16px;
+                    .container__media {
+                        margin-right: 16px;
 
-    /* Set the width for the media object */
-    width: 200px;
-}
+                        /* Set the width for the media object */
+                        width: 200px;
+                    }
 
-.container__content {
-    /* Take the remaining width */
-    flex: 1;
-}
-`}
+                    .container__content {
+                        /* Take the remaining width */
+                        flex: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'flex-start',
+                        display: 'flex',
+                        height: '100%',
+                        padding: '16px',
+                    }}
                 >
-                    <div
-                        style={{
-                            alignItems: 'flex-start',
-                            display: 'flex',
-                            height: '100%',
-                            padding: '16px',
-                        }}
-                    >
-                        <div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
-                            <Square />
+                    <div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
+                        <Square />
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        <div style={{ marginBottom: '32px', width: '80%' }}>
+                            <Rectangle />
                         </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 style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div style={{ marginBottom: '32px' }}>
+                            <Block numberOfBlocks={15} />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/mega-menu/index.tsx b/pages/mega-menu/index.tsx
index aa99747..52a0be3 100644
--- a/pages/mega-menu/index.tsx
+++ b/pages/mega-menu/index.tsx
@@ -1,16 +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 Head from 'next/head';
-
-import './mega-menu.css';
+import { Spacer } from '@1milligram/design';
 
 import { RelatedPatterns } from '../../components/RelatedPatterns';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -18,19 +12,18 @@ import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.MegaMenu}>
+        <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 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 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 -->
     ...
@@ -47,106 +40,107 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    /* Used to position the mega menu */
-    position: relative;
-}
+                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__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;
+                    .container__content {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        margin-top: -1px;
 
-    /* Hidden by default */
-    display: none;
+                        /* Hidden by default */
+                        display: none;
 
-    /* Absolute position */
-    left: 0px;
-    position: absolute;
-    top: 100%;
+                        /* Absolute position */
+                        left: 0px;
+                        position: absolute;
+                        top: 100%;
 
-    /* Take full width */
-    width: 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'>
+                        /* 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={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'inline-flex',
-                                    justifyContent: 'center',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    padding: '16px',
+                                    width: '150px',
                                 }}
                             >
-                                <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' />
+                                <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>
-                                    <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>
+                                    <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
-                                    style={{
-                                        padding: '16px',
-                                        width: '120px',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
+                            </div>
+                            <div
+                                style={{
+                                    padding: '16px',
+                                    width: '120px',
+                                }}
+                            >
+                                <Rectangle />
                             </div>
                         </div>
-
-                        <div style={{ marginTop: '16px' }}>
-                            <Block numberOfBlocks={10} />
-                        </div>
                     </div>
-                </BrowserFrame>
-            </div>
 
+                    <div style={{ marginTop: '16px' }}>
+                        <Block numberOfBlocks={10} />
+                    </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/menu/index.tsx b/pages/menu/index.tsx
index f5fda6d..380a848 100644
--- a/pages/menu/index.tsx
+++ b/pages/menu/index.tsx
@@ -1,32 +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 Head from 'next/head';
-
-import './menu.css';
+import { Spacer } from '@1milligram/design';
 
 import { RelatedPatterns } from '../../components/RelatedPatterns';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.Menu}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="menu">
     <!-- Normal menu item -->
     <div class="menu__item">
@@ -61,146 +54,162 @@ html={`
     <div class="menu__divider"></div>
 </div>
 `}
-css={`
-.menu {
-    display: flex;
-    flex-direction: column;
+                css={`
+                    .menu {
+                        display: flex;
+                        flex-direction: column;
 
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-}
+                        /* 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__item {
+                        /* Center the content horizontally */
+                        align-items: center;
+                        display: flex;
+                    }
 
-.menu__hotkey {
-    /* Push the hot key to the right */
-    margin-left: auto;
-}
+                    .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;
-}
-`}
+                    .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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            width: '40%',
                         }}
                     >
                         <div
+                            className="p-menu-item"
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                width: '40%',
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '32px',
+                                padding: '0 8px',
                             }}
                         >
-                            <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 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>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
+
             <RelatedPatterns
                 patterns={[
                     Pattern.DotLeader,
@@ -210,7 +219,7 @@ css={`
                     Pattern.SplitNavigation,
                 ]}
             />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/modal/index.tsx b/pages/modal/index.tsx
index ee38a2c..e5c0ca8 100644
--- a/pages/modal/index.tsx
+++ b/pages/modal/index.tsx
@@ -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>
- */
-
 import * as React from 'react';
 import Head from 'next/head';
-import { Link } from 'react-router-dom';
-import { Pattern } from '../../constants/Pattern';
+import Link from 'next/link';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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';
@@ -16,20 +11,22 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Modal}>
+        <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 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 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">
@@ -48,80 +45,87 @@ html={`
     </div>
 </div>
 `}
-css={`
-.modal {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0.3);
-    border-radius: 4px;
-}
+                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__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);
-}
-`}
+                    .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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            width: '50%',
                         }}
                     >
                         <div
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                width: '50%',
+                                alignItems: 'center',
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                padding: '16px',
                             }}
                         >
-                            <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 style={{ width: '60%' }}>
+                                <Rectangle />
                             </div>
-                            <div style={{ padding: '16px' }}>
-                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
-                                <Block numberOfBlocks={5} />
+                            <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
+                                <Circle />
                             </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 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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/nested-dropdowns/index.tsx b/pages/nested-dropdowns/index.tsx
index 3c4d8ec..d3a08d9 100644
--- a/pages/nested-dropdowns/index.tsx
+++ b/pages/nested-dropdowns/index.tsx
@@ -1,33 +1,29 @@
-/**
- * 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 Head from 'next/head';
-
-import './nested-dropdowns.css';
+import { Spacer } from '@1milligram/design';
 
 import { RelatedPatterns } from '../../components/RelatedPatterns';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.NestedDropdowns}>
+        <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" />
+                <meta
+                    name="keywords"
+                    content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu"
+                />
             </Head>
-            <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={`
+            <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>
@@ -54,100 +50,99 @@ html={`
     <li>About</li>
 </ul>
 `}
-css={`
-.dropdown {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    display: flex;
+                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;
-}
+                        /* Reset list styles */
+                        list-style-type: none;
+                        margin: 0;
+                        padding: 0;
+                    }
 
-.dropdown li {
-    /* Spacing */
-    padding: 8px;
+                    .dropdown li {
+                        /* Spacing */
+                        padding: 8px;
 
-    /* Used to position the sub dropdown */
-    position: relative;
-}
+                        /* Used to position the sub dropdown */
+                        position: relative;
+                    }
 
-/* The sub dropdown */
-.dropdown ul {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
+                    /* The sub dropdown */
+                    .dropdown ul {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
 
-    /* Hidden by default */
-    display: none;
+                        /* Hidden by default */
+                        display: none;
 
-    /* Absolute position */
-    left: 0;
-    position: absolute;
-    top: 100%;
+                        /* Absolute position */
+                        left: 0;
+                        position: absolute;
+                        top: 100%;
 
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+                        /* Reset styles */
+                        list-style-type: none;
+                        margin: 0;
+                        padding: 0;
 
-    /* Width */
-    width: 200px;
-}
+                        /* Width */
+                        width: 200px;
+                    }
 
-/* The second level sub dropdown */
-.dropdown ul ul {
-    left: 100%;
-    position: absolute;
-    top: 0;
-}
+                    /* 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);
-}
+                    /* 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;
-}
-`}
+                    /* Show the direct sub dropdown when hovering the list item */
+                    .dropdown li:hover > ul {
+                        display: block;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        padding: '8px',
+                    }}
                 >
-                    <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>
-
+                    <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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/notification/index.tsx b/pages/notification/index.tsx
index 0a7f01e..5d7a6e9 100644
--- a/pages/notification/index.tsx
+++ b/pages/notification/index.tsx
@@ -1,34 +1,31 @@
-/**
- * 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 Head from 'next/head';
-import { Link } from 'react-router-dom';
-import { Pattern } from '../../constants/Pattern';
+import Link from 'next/link';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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 (
-        <DetailsLayout pattern={Pattern.Notification}>
+        <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 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 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 -->
     ...
@@ -37,53 +34,54 @@ html={`
     ...
 </div>
 `}
-css={`
-.notification {
-    display: flex;
-    justify-content: space-between;
-}
-`}
+                css={`
+                    .notification {
+                        display: flex;
+                        justify-content: space-between;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
                             display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            justifyContent: 'space-between',
+                            width: '60%',
                         }}
                     >
-                        <div
+                        <div style={{ padding: '16px', width: '80%' }}>
+                            <Block numberOfBlocks={5} />
+                        </div>
+                        <button
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
+                                alignItems: 'center',
+                                borderColor: 'transparent',
+                                color: 'rgba(0, 0, 0, .3)',
                                 display: 'flex',
-                                justifyContent: 'space-between',
-                                width: '60%',
+                                fontSize: '36px',
+                                height: '32px',
+                                justifyContent: 'center',
+                                marginRight: '1px',
+                                width: '32px',
                             }}
                         >
-                            <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>
+                            <Circle />
+                        </button>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/overlay-play-button/index.tsx b/pages/overlay-play-button/index.tsx
index 0cd0cf5..5c11427 100644
--- a/pages/overlay-play-button/index.tsx
+++ b/pages/overlay-play-button/index.tsx
@@ -1,29 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.OverlayPlayButton}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- The video element -->
     <video src="..." />
@@ -35,82 +30,82 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    /* Used to position the overlay */
-    position: relative;
-}
+                css={`
+                    .container {
+                        /* Used to position the overlay */
+                        position: relative;
+                    }
 
-.container__overlay {
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 0;
+                    .container__overlay {
+                        /* Position */
+                        left: 0;
+                        position: absolute;
+                        top: 0;
 
-    /* Take full size */
-    height: 100%;
-    width: 100%;
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
 
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Add a dark background */
-    background-color: rgba(0, 0, 0, 0.25);
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
                             height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            position: 'relative',
+                            width: '100%',
                         }}
                     >
                         <div
                             style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                                display: 'flex',
                                 height: '100%',
-                                position: 'relative',
+                                justifyContent: 'center',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
                                 width: '100%',
                             }}
                         >
                             <div
                                 style={{
                                     alignItems: 'center',
-                                    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                                    border: '4px solid #FFF',
+                                    borderRadius: '9999px',
                                     display: 'flex',
-                                    height: '100%',
+                                    height: '64px',
                                     justifyContent: 'center',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
+                                    width: '64px',
                                 }}
                             >
-                                <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>
+                                <Triangle backgroundColor="#FFF" corner="r" size={8} />
                             </div>
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.VideoBackground]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/pagination/index.tsx b/pages/pagination/index.tsx
index 28c4780..258ad72 100644
--- a/pages/pagination/index.tsx
+++ b/pages/pagination/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.Pagination}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="pagination">
     <!-- Pagination item -->
     <div class="pagination__item">
@@ -34,119 +28,118 @@ html={`
     ...
 </div>
 `}
-css={`
-.pagination {
-    display: flex;
+                css={`
+                    .pagination {
+                        display: flex;
 
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-}
+                        /* 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;
+                    .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;
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
                             display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
                         }}
                     >
                         <div
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
+                                alignItems: 'center',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
                                 display: 'flex',
+                                justifyContent: 'center',
+                                padding: '8px',
+                                width: '128px',
                             }}
                         >
-                            <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>
+                            <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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/popover-arrow/index.tsx b/pages/popover-arrow/index.tsx
index 9603cf8..76762e1 100644
--- a/pages/popover-arrow/index.tsx
+++ b/pages/popover-arrow/index.tsx
@@ -1,28 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.PopoverArrow}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- The content -->
     ...
@@ -64,343 +59,342 @@ html={`
     <div class="container__arrow container__arrow--lb"></div>
 </div>
 `}
-css={`
-.container {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
+                css={`
+                    .container {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
 
-    /* Used to position the arrow */
-    position: relative;
-}
+                        /* Used to position the arrow */
+                        position: relative;
+                    }
 
-.container__arrow {
-    /* Size */
-    height: 16px;
-    width: 16px;
+                    .container__arrow {
+                        /* Size */
+                        height: 16px;
+                        width: 16px;
 
-    background-color: #FFF;
-    position: absolute;
-}
+                        background-color: #fff;
+                        position: absolute;
+                    }
 
-.container__arrow--tl {
-    /* Position at the top left corner */
-    left: 32px;
-    top: 0px;
+                    .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);
-}
+                        /* 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;
+                    .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);
-}
+                        /* 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;
+                    .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);
-}
+                        /* 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;
+                    .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);
-}
+                        /* 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%;
+                    .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);
-}
+                        /* 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;
+                    .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);
-}
+                        /* 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;
+                    .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);
-}
+                        /* 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%;
+                    .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);
-}
+                        /* 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;
+                    .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);
-}
+                        /* 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;
+                    .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);
-}
+                        /* 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%;
+                    .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);
-}
+                        /* 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;
+                    .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);
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            height: '300px',
+                            marginBottom: '16px',
+                            position: 'relative',
+                            width: '300px',
                         }}
                     >
                         <div
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                height: '300px',
-                                marginBottom: '16px',
-                                position: 'relative',
-                                width: '300px',
+                                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: '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',
+                                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',
+                                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)',
+                                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
+                            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>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/presence-indicator/index.tsx b/pages/presence-indicator/index.tsx
index 13c0cb4..0454afa 100644
--- a/pages/presence-indicator/index.tsx
+++ b/pages/presence-indicator/index.tsx
@@ -1,29 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.PresenceIndicator}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Other element such as avatar -->
     ...
@@ -32,7 +27,7 @@ html={`
     <div class="container__indicator"></div>
 </div>
 `}
-css={`
+                css={`
 .container {
     position: relative;
 }
@@ -53,46 +48,47 @@ css={`
     background-color: #FF4136;
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            height: '64px',
+                            marginRight: '16px',
+                            position: 'relative',
+                            width: '64px',
                         }}
                     >
+                        <Circle size={64} />
                         <div
                             style={{
-                                height: '64px',
-                                marginRight: '16px',
-                                position: 'relative',
-                                width: '64px',
+                                backgroundColor: '#FF4136',
+                                borderRadius: '9999px',
+                                bottom: 0,
+                                height: '16px',
+                                position: 'absolute',
+                                right: 0,
+                                transform: 'translate(50%, 50%)',
+                                width: '16px',
                             }}
-                        >
-                            <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>
+                </div>
+            </BrowserFrame>
+
+            <Spacer size="extraLarge" />
 
             <RelatedPatterns
                 patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
             />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/previous-next-buttons/index.tsx b/pages/previous-next-buttons/index.tsx
index 9e9f720..a3db379 100644
--- a/pages/previous-next-buttons/index.tsx
+++ b/pages/previous-next-buttons/index.tsx
@@ -1,28 +1,22 @@
-/**
- * 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 Head from 'next/head';
 import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.PreviousNextButtons}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Previous link sticks to the left -->
     <a>..</a>
@@ -31,67 +25,66 @@ html={`
     <a>..</a>
 </div>
 `}
-css={`
-.container {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-}
-`}
+                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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '50%' }}>
-                            <div
+                    <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',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
                                     padding: '8px',
-                                    width: '100%',
+                                    width: '30%',
                                 }}
                             >
-                                <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 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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/price-tag/index.tsx b/pages/price-tag/index.tsx
index 0102c2a..0739082 100644
--- a/pages/price-tag/index.tsx
+++ b/pages/price-tag/index.tsx
@@ -1,112 +1,103 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import './price-tag.css';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.PriceTag}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="price-tag">
     ...
 </div>
 `}
-css={`
-:root {
-    --price-tag-background: rgba(0, 0, 0, 0.3);
-    --price-tag-height: 2rem;
-}
+                css={`
+                    :root {
+                        --price-tag-background: rgba(0, 0, 0, 0.3);
+                        --price-tag-height: 2rem;
+                    }
 
-.price-tag {
-    background: var(--price-tag-background);
-    color: #FFF;
+                    .price-tag {
+                        background: var(--price-tag-background);
+                        color: #fff;
 
-    /* Center the price */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                        /* Center the price */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Used to position the triangle */
-    position: relative;
+                        /* Used to position the triangle */
+                        position: relative;
 
-    /* Size */
-    height: var(--price-tag-height);
+                        /* Size */
+                        height: var(--price-tag-height);
 
-    /* Spacing */
-    padding: 0.25rem 0.5rem;
-}
+                        /* Spacing */
+                        padding: 0.25rem 0.5rem;
+                    }
 
-/* The triangle */
-.price-tag::before {
-    content: '';
+                    /* 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);
-}
+                        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;
 
-/* The dot */
-.price-tag::after {
-    content: '';
+                        /* Position */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
+                        transform: translate(-100%, 0px);
+                    }
 
-    /* Make it like a cirle */ 
-    background: #FFF;
-    border-radius: 9999rem;
-    
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 50%;
-    transform: translate(-0.5rem, -50%);
+                    /* The dot */
+                    .price-tag::after {
+                        content: '';
 
-    /* Size */
-    height: 0.5rem;
-    width: 0.5rem;
-}
-`}
+                        /* 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
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div className="price-tag">99.99$</div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
+                    <div className="price-tag">99.99$</div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.TriangleButtons]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/pricing-table/index.tsx b/pages/pricing-table/index.tsx
index 7236bcd..07ecabe 100644
--- a/pages/pricing-table/index.tsx
+++ b/pages/pricing-table/index.tsx
@@ -1,15 +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>
- */
-
 import * as React from 'react';
 import Head from 'next/head';
-import { Link } from 'react-router-dom';
+import Link from 'next/link';
+import { Spacer } from '@1milligram/design';
 
 import { RelatedPatterns } from '../../components/RelatedPatterns';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -17,20 +13,25 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.PricingTable}>
+        <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 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 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">
@@ -51,117 +52,134 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
+                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;
+                    .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;
+                        /* Make all columns have the same width */
+                        flex: 1;
 
-    /* OPTIONAL: Space between columns */
-    margin: 0 8px;
+                        /* OPTIONAL: Space between columns */
+                        margin: 0 8px;
 
-    /* OPTIONAL: Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-}
-`}
+                        /* 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',
-                            height: '100%',
                             justifyContent: 'center',
-                            padding: '16px',
+                            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',
-                                width: '60%',
+                                margin: '0 8px',
+                                padding: '16px',
                             }}
                         >
-                            <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 style={{ marginBottom: '16px', width: '60%' }}>
+                                <Rectangle />
                             </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 style={{ marginBottom: '16px' }}>
+                                <Circle size={64} />
                             </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 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>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/progress-bar/index.tsx b/pages/progress-bar/index.tsx
index 1260623..378cc61 100644
--- a/pages/progress-bar/index.tsx
+++ b/pages/progress-bar/index.tsx
@@ -1,33 +1,27 @@
-/**
- * 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 Head from 'next/head';
 import { Pattern } from '../../constants/Pattern';
 
 import useInterval from '../../hooks/useInterval';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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);
+        setProgress((v) => (v === 100 ? 0 : v + 1));
     }, 1 * 100);
 
     return (
-        <DetailsLayout pattern={Pattern.ProgressBar}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <div class="container__progress" style="
         /* Width based on the number of percentages */
@@ -38,69 +32,68 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    /* Colors */
-    background-color: rgba(0, 0, 0, .1);
+                css={`
+                    .container {
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.1);
 
-    /* Rounded border */
-    border-radius: 9999px;
-}
+                        /* Rounded border */
+                        border-radius: 9999px;
+                    }
 
-.container__progress {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                    .container__progress {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Colors */
-    background-color: #357edd;
-    color: #fff;
+                        /* Colors */
+                        background-color: #357edd;
+                        color: #fff;
 
-    /* Rounded border */
-    border-radius: 9999px;
-}
-`}
+                        /* Rounded border */
+                        border-radius: 9999px;
+                    }
+                `}
+            >
+                <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',
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            borderRadius: '9999px',
+                            height: '16px',
+                            width: '50%',
                         }}
                     >
                         <div
                             style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                alignItems: 'center',
+                                backgroundColor: '#357EDD',
                                 borderRadius: '9999px',
-                                height: '16px',
-                                width: '50%',
+                                color: '#FFF',
+                                display: 'flex',
+                                fontSize: '12px',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '4px',
+                                width: `${progress}%`,
                             }}
                         >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: '#357EDD',
-                                    borderRadius: '9999px',
-                                    color: '#FFF',
-                                    display: 'flex',
-                                    fontSize: '12px',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    padding: '4px',
-                                    width: `${progress}%`,
-                                }}
-                            >
-                                {progress}%
-                            </div>
+                            {progress}%
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/property-list/index.tsx b/pages/property-list/index.tsx
index c0653ca..1b4a8ca 100644
--- a/pages/property-list/index.tsx
+++ b/pages/property-list/index.tsx
@@ -1,15 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
@@ -33,16 +28,15 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout pattern={Pattern.PropertyList}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <!-- A property item -->
 <dl class="container">
     <!-- Property name -->
@@ -52,59 +46,76 @@ html={`
     <dd>...</dd>
 </dl>
 `}
-css={`
-.container {
-    /* Content is center horizontally */
-    align-items: center;
-    display: flex;
+                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;
+                        justify-content: space-between;
 
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 
-    /* Spacing */
-    margin: 0px;
-    padding: 8px 0px;
-}
-`}
+                        /* Spacing */
+                        margin: 0px;
+                        padding: 8px 0px;
+                    }
+                `}
+            >
+                <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={{ 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 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>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+
             <section>
-                <Heading title="Use cases" />
+                <Heading level={2}>Use cases</Heading>
 
                 <div style={{ padding: '32px', width: '500px' }}>
                     <Item>
@@ -125,8 +136,9 @@ css={`
                     </Item>
                 </div>
             </section>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.SplitNavigation]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/questions-and-answers/index.tsx b/pages/questions-and-answers/index.tsx
index bec9b14..b7c85b0 100644
--- a/pages/questions-and-answers/index.tsx
+++ b/pages/questions-and-answers/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -23,7 +19,7 @@ const Details: React.FC<{}> = () => {
     const [activeItem, setActiveItem] = React.useState(-1);
 
     const Item: React.FC<ItemProps> = ({ index, title, children }) => {
-        const isOpened = (index === activeItem);
+        const isOpened = index === activeItem;
         const click = () => setActiveItem(isOpened ? -1 : index);
         return (
             <>
@@ -53,16 +49,15 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout pattern={Pattern.QuestionsAndAnswers}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <!-- Each question and answer item -->
 <div class="container">
     <!-- Heading -->
@@ -77,78 +72,89 @@ html={`
     <!-- Answer -->
 </div>
 `}
-css={`
-.container {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-}
+                css={`
+                    .container {
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+                    }
 
-.container__heading {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-`}
+                    .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={{
-                            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',
-                                }}
+                    <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>
+                                }
                             >
-                                <Rectangle />
-                            </div>
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                }}
+                                <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>
+                                }
                             >
-                                <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)',
-                                }}
+                                <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>
+                                }
                             >
-                                <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>
+                                <Block numberOfBlocks={10} />
+                            </Item>
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.Accordion]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/radial-progress-bar/index.tsx b/pages/radial-progress-bar/index.tsx
index 9f735e3..1936b12 100644
--- a/pages/radial-progress-bar/index.tsx
+++ b/pages/radial-progress-bar/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 interface RadialProgressProps {
@@ -34,9 +29,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
             </div>
             <div
                 style={{
-                    clip: percentages >= 50
-                            ? 'rect(auto, auto, auto, auto)'
-                            : 'rect(0px, 128px, 128px, 64px)',
+                    clip: percentages >= 50 ? 'rect(auto, auto, auto, auto)' : 'rect(0px, 128px, 128px, 64px)',
                     height: '100%',
                     left: 0,
                     position: 'absolute',
@@ -51,7 +44,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
                         clip: 'rect(0px, 64px, 128px, 0px)',
                         height: '100%',
                         position: 'absolute',
-                        transform: `rotate(${percentages * 360 / 100}deg)`,
+                        transform: `rotate(${(percentages * 360) / 100}deg)`,
                         width: '100%',
                     }}
                 />
@@ -73,16 +66,15 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.RadialProgressBar}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Show number of percentages -->
     <div class="container__percentages">
@@ -99,90 +91,91 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    position: relative;
-}
+                css={`
+                    .container {
+                        position: relative;
+                    }
 
-.container__percentages {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                    .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;
+                        /* Rounded border */
+                        border: 12px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 9999px;
 
-    /* Size */
-    height: 128px;
-    width: 128px;
-}
+                        /* Size */
+                        height: 128px;
+                        width: 128px;
+                    }
 
-.container__curve {
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 0;
+                    .container__curve {
+                        /* Position */
+                        left: 0;
+                        position: absolute;
+                        top: 0;
 
-    /* Take full size */
-    height: 100%;
-    width: 100%;
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
 
-    /* If percentages is less than 50 */
-    clip: rect(0px, 128px, 128px, 64px);
+                        /* 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);
-}
+                        /* 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%;
+                    .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;
-}
+                        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--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);
+                    .container__half--second {
+                        /* Position */
+                        clip: rect(0px, 64px, 128px, 0px);
 
-    /* If percentages is less than 50 */
-    transform: rotate(0deg);
+                        /* If percentages is less than 50 */
+                        transform: rotate(0deg);
 
-    /* If percentages is greater than or equals to 50 */
-    transform: rotate(180deg);
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
-                        <RadialProgress percentages={80} />
+                    <div style={{ marginRight: '16px' }}>
+                        <RadialProgress percentages={45} />
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                    <RadialProgress percentages={80} />
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/radio-button-group/index.tsx b/pages/radio-button-group/index.tsx
index 14b7444..5d25da7 100644
--- a/pages/radio-button-group/index.tsx
+++ b/pages/radio-button-group/index.tsx
@@ -1,16 +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 Head from 'next/head';
-
-import './radio-button-group.css';
+import { Spacer } from '@1milligram/design';
 
 import { RelatedPatterns } from '../../components/RelatedPatterns';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -49,16 +43,15 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout pattern={Pattern.RadioButtonGroup}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Each radio item -->
     <label class="container__label">
@@ -73,81 +66,86 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    display: flex;
+                css={`
+                    .container {
+                        display: flex;
 
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    height: 32px;
-}
+                        /* 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;
+                    .container__label {
+                        /* Center the content */
+                        align-items: center;
+                        display: inline-flex;
 
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    padding: 8px;
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        padding: 8px;
 
-    /* For not selected radio */
-    background-color: transparent;
-    color: #CCC;
-}
+                        /* 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: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__label--selected {
+                        /* For selected radio */
+                        background-color: #00449e;
+                        color: #fff;
+                    }
 
-.container__input {
-    /* Hide it */
-    display: none;
-}
-`}
+                    .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={{
-                            alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
                             display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            height: '32px',
                         }}
                     >
-                        <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>
+                        <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>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/radio-switch/index.tsx b/pages/radio-switch/index.tsx
index 61ee331..1c50c8c 100644
--- a/pages/radio-switch/index.tsx
+++ b/pages/radio-switch/index.tsx
@@ -1,15 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -17,16 +12,15 @@ const Details: React.FC<{}> = () => {
     const toggle = () => setFirstChecked((c) => !c);
 
     return (
-        <DetailsLayout pattern={Pattern.RadioSwitch}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <!-- Container -->
 <div class="container">
     <!-- Radio container -->
@@ -41,107 +35,108 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    background-color: rgba(0, 0, 0, .1);
-    border-radius: 9999px;
-    display: inline-flex;
-    padding: 4px;
-}
+                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 {
+                        border-radius: 9999px;
+                        cursor: pointer;
+                        padding: 4px 8px;
+                    }
 
-.container__label--selected {
-    /* For selected radio only */
-    background-color: #357edd;
-    color: #fff;
-}
+                    .container__label--selected {
+                        /* For selected radio only */
+                        background-color: #357edd;
+                        color: #fff;
+                    }
 
-.container__input {
-    display: none
-}
-`}
+                    .container__input {
+                        display: none;
+                    }
+                `}
+            >
+                <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',
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            borderRadius: '9999px',
+                            display: 'inline-flex',
+                            padding: '4px',
                         }}
                     >
-                        <div
+                        <label
+                            htmlFor="radio-switch-first"
                             style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                backgroundColor: isFirstChecked ? '#357EDD' : '',
                                 borderRadius: '9999px',
-                                display: 'inline-flex',
-                                padding: '4px',
+                                color: isFirstChecked ? '#FFF' : '',
+                                cursor: 'pointer',
+                                padding: '16px 8px',
                             }}
                         >
-                            <label
-                                htmlFor="radio-switch-first"
+                            <input
+                                id="radio-switch-first"
+                                type="radio"
+                                style={{ display: 'none' }}
+                                checked={isFirstChecked}
+                                onChange={toggle}
+                            />
+                            <div
                                 style={{
-                                    backgroundColor: isFirstChecked ? '#357EDD' : '',
-                                    borderRadius: '9999px',
-                                    color: isFirstChecked ? '#FFF' : '',
-                                    cursor: 'pointer',
-                                    padding: '16px 8px',
+                                    backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
+                                    borderRadius: '4px',
+                                    height: '8px',
+                                    width: '64px',
                                 }}
-                            >
-                                <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"
+                            />
+                        </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 ? '' : '#357EDD',
-                                    borderRadius: '9999px',
-                                    color: isFirstChecked ? '' : '#FFF',
-                                    cursor: 'pointer',
-                                    padding: '16px 8px',
+                                    backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
+                                    borderRadius: '4px',
+                                    height: '8px',
+                                    width: '64px',
                                 }}
-                            >
-                                <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>
+                            />
+                        </label>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+
             <section>
-                <Heading title="Use cases" />
+                <Heading level={2}>Use cases</Heading>
 
                 <div style={{ padding: '32px' }}>
                     <div
@@ -179,8 +174,9 @@ css={`
                     </div>
                 </div>
             </section>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.Switch]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/rating/Star.tsx b/pages/rating/Star.tsx
deleted file mode 100644
index 428d112..0000000
--- a/pages/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/pages/rating/index.tsx b/pages/rating/index.tsx
index ca8fa33..4206a9b 100644
--- a/pages/rating/index.tsx
+++ b/pages/rating/index.tsx
@@ -1,28 +1,29 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import Star from './Star';
+
+interface StarProps {
+    isActive: boolean;
+}
+
+const Star: React.FC<StarProps> = ({ isActive }) => {
+    return <button className="p-rating-star">{isActive ? '★' : '☆'}</button>;
+};
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Rating}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="rating">
     <button class="rating__star">☆</button>
     <button class="rating__star">☆</button>
@@ -31,66 +32,65 @@ html={`
     <button class="rating__star">★</button>
 </div>
 `}
-css={`
-.rating {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                css={`
+                    .rating {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    flex-direction: row-reverse;
+                        flex-direction: row-reverse;
 
-    font-size: 32px;
-}
+                        font-size: 32px;
+                    }
 
-.rating__star:hover,
-.rating__star:hover ~ .rating__star {
-    color: transparent;
-}
+                    .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: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;
+                    .rating__star {
+                        /* Reset styles for button */
+                        background-color: transparent;
+                        border: transparent;
+                        margin: 0 2px;
+                        padding: 0;
 
-    /* Used to position the hover state */
-    position: relative;
-}
-`}
+                        /* Used to position the hover state */
+                        position: relative;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
                 >
-                    <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 className="p-rating">
+                        <Star isActive={false} />
+                        <Star isActive={false} />
+                        <Star isActive={false} />
+                        <Star isActive={false} />
+                        <Star isActive={true} />
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/resizable-element/index.tsx b/pages/resizable-element/index.tsx
index 24ca215..e5f87a3 100644
--- a/pages/resizable-element/index.tsx
+++ b/pages/resizable-element/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.ResizableElement}>
+        <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 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 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 -->
     ...
@@ -55,225 +49,224 @@ html={`
     <div class="container__resizer container__resizer--lc"></div>
 </div>
 `}
-css={`
-.container {
-    /* Border */
-    border: 1px dashed rgba(0, 0, 0, 0.3);
+                css={`
+                    .container {
+                        /* Border */
+                        border: 1px dashed rgba(0, 0, 0, 0.3);
 
-    /* Used to position the squares */
-    position: relative;
-}
+                        /* Used to position the squares */
+                        position: relative;
+                    }
 
-.container__resizer {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    position: absolute;
+                    .container__resizer {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        position: absolute;
 
-    /* Size */
-    height: 12px;
-    width: 12px;
-}
+                        /* Size */
+                        height: 12px;
+                        width: 12px;
+                    }
 
-.container__resizer--tl {
-    /* Resize cursor */
-    cursor: nwse-resize;
+                    .container__resizer--tl {
+                        /* Resize cursor */
+                        cursor: nwse-resize;
 
-    /* Positioned at the top left corner */
-    left: 0px;
-    top: 0px;
-    transform: translate(-50%, -50%);
-}
+                        /* Positioned at the top left corner */
+                        left: 0px;
+                        top: 0px;
+                        transform: translate(-50%, -50%);
+                    }
 
-.container__resizer--tc {
-    /* Resize cursor */
-    cursor: ns-resize;
+                    .container__resizer--tc {
+                        /* Resize cursor */
+                        cursor: ns-resize;
 
-    /* Positioned at the middle of top side */
-    left: 50%;
-    top: 0px;
-    transform: translate(-50%, -50%);
-}
+                        /* Positioned at the middle of top side */
+                        left: 50%;
+                        top: 0px;
+                        transform: translate(-50%, -50%);
+                    }
 
-.container__resizer--tr {
-    /* Resize cursor */
-    cursor: nesw-resize;
+                    .container__resizer--tr {
+                        /* Resize cursor */
+                        cursor: nesw-resize;
 
-    /* Positioned at the top right corner */
-    right: 0px;
-    top: 0px;
-    transform: translate(50%, -50%);
-}
+                        /* Positioned at the top right corner */
+                        right: 0px;
+                        top: 0px;
+                        transform: translate(50%, -50%);
+                    }
 
-.container__resizer--rc {
-    /* Resize cursor */
-    cursor: ew-resize;
+                    .container__resizer--rc {
+                        /* Resize cursor */
+                        cursor: ew-resize;
 
-    /* Positioned at the middle of right side */
-    right: 0px;
-    top: 50%;
-    transform: translate(50%, -50%);
-}
+                        /* Positioned at the middle of right side */
+                        right: 0px;
+                        top: 50%;
+                        transform: translate(50%, -50%);
+                    }
 
-.container__resizer--rb {
-    /* Resize cursor */
-    cursor: nwse-resize;
+                    .container__resizer--rb {
+                        /* Resize cursor */
+                        cursor: nwse-resize;
 
-    /* Positioned at the right bottom corner */
-    bottom: 0px;
-    right: 0px;
-    transform: translate(50%, 50%);
-}
+                        /* Positioned at the right bottom corner */
+                        bottom: 0px;
+                        right: 0px;
+                        transform: translate(50%, 50%);
+                    }
 
-.container__resizer--bc {
-    /* Resize cursor */
-    cursor: ns-resize;
+                    .container__resizer--bc {
+                        /* Resize cursor */
+                        cursor: ns-resize;
 
-    /* Positioned at the middle of bottom side */
-    bottom: 0px;
-    right: 50%;
-    transform: translate(50%, 50%);
-}
+                        /* Positioned at the middle of bottom side */
+                        bottom: 0px;
+                        right: 50%;
+                        transform: translate(50%, 50%);
+                    }
 
-.container__resizer--bl {
-    /* Resize cursor */
-    cursor: nesw-resize;
+                    .container__resizer--bl {
+                        /* Resize cursor */
+                        cursor: nesw-resize;
 
-    /* Positioned at the bottom left corner */
-    bottom: 0px;
-    left: 0px;
-    transform: translate(-50%, 50%);
-}
+                        /* Positioned at the bottom left corner */
+                        bottom: 0px;
+                        left: 0px;
+                        transform: translate(-50%, 50%);
+                    }
 
-.container__resizer--lc {
-    /* Resize cursor */
-    cursor: ew-resize;
+                    .container__resizer--lc {
+                        /* Resize cursor */
+                        cursor: ew-resize;
 
-    /* Positioned at the middle of left side */
-    left: 0px;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            border: '1px dashed rgba(0, 0, 0, 0.3)',
+                            height: '200px',
+                            position: 'relative',
+                            width: '200px',
                         }}
                     >
                         <div
                             style={{
-                                border: '1px dashed rgba(0, 0, 0, 0.3)',
-                                height: '200px',
-                                position: 'relative',
-                                width: '200px',
+                                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: '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
+                            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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/ribbon/index.tsx b/pages/ribbon/index.tsx
index 9519787..0b2c7e8 100644
--- a/pages/ribbon/index.tsx
+++ b/pages/ribbon/index.tsx
@@ -1,29 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Ribbon}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- The content -->
     ...
@@ -41,137 +36,136 @@ html={`
     <div class="container__side container__side--right"></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;
 
-    /* Background color */
-    background-color: #BBB;
+                        /* Background color */
+                        background-color: #bbb;
 
-    /* Size */
-    height: 32px;
+                        /* Size */
+                        height: 32px;
 
-    /* Use to position the corners */
-    position: relative;
-}
+                        /* Use to position the corners */
+                        position: relative;
+                    }
 
-.container__side {
-    bottom: -8px;
-    position: absolute;
+                    .container__side {
+                        bottom: -8px;
+                        position: absolute;
 
-    /* Displayed under the container */
-    z-index: -1;
+                        /* Displayed under the container */
+                        z-index: -1;
 
-    /* Background */
-    border: 16px solid #CCC;
-    border-left-color: transparent;
-}
+                        /* Background */
+                        border: 16px solid #ccc;
+                        border-left-color: transparent;
+                    }
 
-.container__side--left {
-    /* Position */
-    left: -24px;
-}
+                    .container__side--left {
+                        /* Position */
+                        left: -24px;
+                    }
 
-.container__side--right {
-    /* Position */
-    right: -24px;
-}
+                    .container__side--right {
+                        /* Position */
+                        right: -24px;
+                    }
 
-.container__triangle {
-    position: absolute;
-    top: 100%;
+                    .container__triangle {
+                        position: absolute;
+                        top: 100%;
 
-    border: 8px solid transparent;
-    border-bottom-width: 0;
-    border-top-color: #AAA;
-}
+                        border: 8px solid transparent;
+                        border-bottom-width: 0;
+                        border-top-color: #aaa;
+                    }
 
-.container__triangle--left {
-    border-right-width: 0;
-    left: 0;
-}
+                    .container__triangle--left {
+                        border-right-width: 0;
+                        left: 0;
+                    }
 
-.container__triangle--right {
-    border-left-width: 0;
-    right: 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',
-                            flexDirection: 'column',
-                            height: '100%',
+                            height: '32px',
                             justifyContent: 'center',
-                            padding: '8px',
+                            padding: '0 16px',
+                            position: 'relative',
+                            width: '150px',
                         }}
                     >
+                        <Rectangle />
                         <div
                             style={{
-                                alignItems: 'center',
-                                backgroundColor: '#BBB',
-                                display: 'flex',
-                                height: '32px',
-                                justifyContent: 'center',
-                                padding: '0 16px',
-                                position: 'relative',
-                                width: '150px',
+                                border: '16px solid #CCC',
+                                borderLeftColor: 'transparent',
+                                bottom: '-8px',
+                                left: '-24px',
+                                position: 'absolute',
+                                zIndex: -1,
                             }}
-                        >
-                            <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
+                            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>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.CornerRibbon]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/same-height-columns/index.tsx b/pages/same-height-columns/index.tsx
index 1a4b264..00b3b39 100644
--- a/pages/same-height-columns/index.tsx
+++ b/pages/same-height-columns/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.SameHeightColumns}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Column -->
     <div class="container__column">
@@ -43,99 +37,102 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    display: flex;
-}
+                css={`
+                    .container {
+                        display: flex;
+                    }
 
-.container__column {
-    flex: 1;
-    /* Space between columns */
-    margin: 0 8px;
+                    .container__column {
+                        flex: 1;
+                        /* Space between columns */
+                        margin: 0 8px;
 
-    /* Layout each column */
-    display: flex;
-    flex-direction: column;
-}
+                        /* Layout each column */
+                        display: flex;
+                        flex-direction: column;
+                    }
 
-.container__content {
-    /* Take available height */
-    flex: 1;
-}
-`}
+                    .container__content {
+                        /* Take available height */
+                        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',
-                        }}
-                    >
-                        <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 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={{
-                                    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>
+                            <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>
-                                <div style={{ padding: '16px', width: '128px' }}>
-                                    <Rectangle height={32} />
-                                </div>
+                                <Block numberOfBlocks={10} />
                             </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 style={{ padding: '16px', width: '128px' }}>
+                                <Rectangle height={32} />
                             </div>
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/search-box/index.tsx b/pages/search-box/index.tsx
index c8678d2..b292b4d 100644
--- a/pages/search-box/index.tsx
+++ b/pages/search-box/index.tsx
@@ -1,28 +1,22 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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 (
-        <DetailsLayout pattern={Pattern.SearchBox}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Text input -->
     <input type="text" class="container__input" />
@@ -31,83 +25,82 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    display: flex;
+                css={`
+                    .container {
+                        display: flex;
 
-    /* If you want to place the icon before the text input */
-    flex-direction: row-reverse;
+                        /* 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);
-}
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                    }
 
-.container__input {
-    border-color: transparent;
-    /* Take available width */
-    flex: 1;
-}
-`}
+                    .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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <div
+                    <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={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '2px',
-                                    display: 'flex',
-                                    marginBottom: '16px',
+                                    borderColor: 'transparent',
+                                    flex: 1,
+                                    padding: '4px',
                                 }}
-                            >
-                                <input
-                                    type="text"
-                                    placeholder="Search"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        padding: '4px',
-                                    }}
-                                />
-                                <div style={{ padding: '8px' }}>
-                                    <Circle />
-                                </div>
+                            />
+                            <div style={{ padding: '8px' }}>
+                                <Circle />
                             </div>
+                        </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={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '2px',
-                                    display: 'flex',
-                                    flexDirection: 'row-reverse',
+                                    borderColor: 'transparent',
+                                    flex: 1,
+                                    padding: '4px',
                                 }}
-                            >
-                                <input
-                                    type="text"
-                                    placeholder="Search"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        padding: '4px',
-                                    }}
-                                />
-                                <div style={{ padding: '8px' }}>
-                                    <Circle />
-                                </div>
+                            />
+                            <div style={{ padding: '8px' }}>
+                                <Circle />
                             </div>
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/separator/index.tsx b/pages/separator/index.tsx
index 6e3aa49..d178dd2 100644
--- a/pages/separator/index.tsx
+++ b/pages/separator/index.tsx
@@ -1,28 +1,22 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.Separator}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Text -->
     <div class="container__content">
@@ -33,76 +27,77 @@ html={`
     <div class="container__separator"></div>
 </div>
 `}
-css={`
-.container {
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
+                css={`
+                    .container {
+                        /* Content is centered horizontally */
+                        align-items: center;
+                        display: flex;
 
-    /* Used to set the position of text */
-    position: relative;
-}
+                        /* Used to set the position of text */
+                        position: relative;
+                    }
 
-.container__content {
-    /* We won't see the separator line */
-    background: #FFF;
+                    .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%);
-}
+                        /* 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%;
-}
-`}
+                    .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',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            position: 'relative',
+                            width: '60%',
                         }}
                     >
                         <div
                             style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                position: 'relative',
-                                width: '60%',
+                                backgroundColor: '#FFF',
+                                left: '50%',
+                                padding: '0 8px',
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
                             }}
                         >
-                            <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 style={{ width: '128px' }}>
+                                <Rectangle height={16} />
                             </div>
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '1px',
-                                    width: '100%',
-                                }}
-                            />
                         </div>
+                        <div
+                            style={{
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '1px',
+                                width: '100%',
+                            }}
+                        />
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/sidebar/index.tsx b/pages/sidebar/index.tsx
index 476a839..adc005e 100644
--- a/pages/sidebar/index.tsx
+++ b/pages/sidebar/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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 (
-        <DetailsLayout pattern={Pattern.Sidebar}>
+        <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 className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
-                <BrowserFrame
-html={`
+            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Sidebar -->
     <aside class="container__sidebar">
@@ -36,55 +30,68 @@ html={`
     </main>
 </div>
 `}
-css={`
-.container {
-    display: flex;
-}
+                css={`
+                    .container {
+                        display: flex;
+                    }
 
-.container__sidebar {
-    width: 30%;
-}
+                    .container__sidebar {
+                        width: 30%;
+                    }
 
-.container__main {
-    /* Take the remaining width */
-    flex: 1;
+                    .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>
+                        /* 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={{
-                                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 style={{ width: '80%' }}>
+                            <Block numberOfBlocks={4} />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                    <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>
     );
 };
 
diff --git a/pages/simple-grid/index.tsx b/pages/simple-grid/index.tsx
index d0e687d..61d0d9e 100644
--- a/pages/simple-grid/index.tsx
+++ b/pages/simple-grid/index.tsx
@@ -1,20 +1,16 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.SimpleGrid}>
+        <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" />
@@ -22,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
             </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
index 9bb791f..97e1915 100644
--- a/pages/slider/index.tsx
+++ b/pages/slider/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.Slider}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Left side -->
     <!-- Width based on the current value -->
@@ -36,71 +30,74 @@ html={`
     <div class="container__right"></div>
 </div>
 `}
-css={`
-.container {
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
+                css={`
+                    .container {
+                        /* Content is centered horizontally */
+                        align-items: center;
+                        display: flex;
 
-    /* Size */
-    height: 32px;
-}
+                        /* Size */
+                        height: 32px;
+                    }
 
-.container__left {
-    height: 2px;
+                    .container__left {
+                        height: 2px;
 
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-}
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.3);
+                    }
 
-.container__circle {
-    /* Size */
-    height: 32px;
-    width: 32px;
+                    .container__circle {
+                        /* Size */
+                        height: 32px;
+                        width: 32px;
 
-    /* Rounded border */
-    border-radius: 9999px;
+                        /* Rounded border */
+                        border-radius: 9999px;
 
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-}
+                        /* Colors */
+                        background-color: rgba(0, 0, 0, 0.3);
+                    }
 
-.container__right {
-    /* Take the remaining width */
-    flex: 1;
-    height: 2px;
+                    .container__right {
+                        /* Take the remaining width */
+                        flex: 1;
+                        height: 2px;
 
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-}
-`}
+                        /* 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',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            height: '16px',
+                            width: '256px',
                         }}
                     >
-                        <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 style={{ width: '20%' }}>
+                            <Rectangle height={2} />
+                        </div>
+                        <Circle size={32} />
+                        <div style={{ flex: 1 }}>
+                            <Rectangle height={2} />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/spin-button/index.tsx b/pages/spin-button/index.tsx
index 89c1846..4a26a1e 100644
--- a/pages/spin-button/index.tsx
+++ b/pages/spin-button/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
 
@@ -19,16 +15,15 @@ const Details: React.FC<{}> = () => {
     const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
 
     return (
-        <DetailsLayout pattern={Pattern.SpinButton}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Input -->
     <input type="text" class="container__input" />
@@ -47,97 +42,97 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 2px;
-    display: flex;
-}
+                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__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__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,
-}
-`}
+                    .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={{
-                            alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '2px',
                             display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
                         }}
                     >
+                        <input
+                            type="text"
+                            style={{
+                                borderColor: 'transparent',
+                                marginRight: '4px',
+                                padding: '4px',
+                                width: '100px',
+                            }}
+                            value={value}
+                            onChange={change}
+                        />
                         <div
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '2px',
                                 display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'center',
                             }}
                         >
-                            <input
-                                type="text"
+                            <button
                                 style={{
                                     borderColor: 'transparent',
-                                    marginRight: '4px',
-                                    padding: '4px',
-                                    width: '100px',
-                                }}
-                                value={value}
-                                onChange={change}
-                            />
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
+                                    cursor: 'pointer',
+                                    flex: 1,
+                                    padding: '4px 4px 2px 4px',
                                 }}
+                                onClick={increase}
                             >
-                                <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>
+                                <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>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.StepperInput, Pattern.Voting]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/split-navigation/index.tsx b/pages/split-navigation/index.tsx
index ad3128f..554b88c 100644
--- a/pages/split-navigation/index.tsx
+++ b/pages/split-navigation/index.tsx
@@ -1,29 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.SplitNavigation}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <ul class="container">
     <!-- Navigation item -->
     <li>
@@ -36,55 +31,63 @@ html={`
     </li>
 </ul>
 `}
-css={`
-.container {
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
+                css={`
+                    .container {
+                        /* Content is centered horizontally */
+                        align-items: center;
+                        display: flex;
 
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0;
-}
+                        /* Reset styles */
+                        list-style-type: none;
+                        margin: 0;
+                    }
 
-.container__item--right {
-    /* Sticks to the right */
-    margin-left: auto;
-}
-`}
+                    .container__item--right {
+                        /* Sticks to the right */
+                        margin-left: auto;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <div
+                    <ul
                         style={{
                             alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '8px',
                             display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            listStyleType: 'none',
+                            margin: 0,
+                            padding: '16px',
+                            width: '60%',
                         }}
                     >
-                        <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>
+                        <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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/split-screen/index.tsx b/pages/split-screen/index.tsx
index a387a6e..d89914b 100644
--- a/pages/split-screen/index.tsx
+++ b/pages/split-screen/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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';
@@ -15,16 +10,15 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.SplitScreen}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Left content -->
     <div class="container__half">
@@ -37,48 +31,55 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    display: flex;
-}
+                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>
+                    .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={{
-                                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 style={{ width: '60%' }}>
+                            <Rectangle />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                    <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>
     );
 };
 
diff --git a/pages/stacked-cards/index.tsx b/pages/stacked-cards/index.tsx
index 4d31544..791bae8 100644
--- a/pages/stacked-cards/index.tsx
+++ b/pages/stacked-cards/index.tsx
@@ -1,19 +1,15 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.StackedCards}>
+        <PatternLayout pattern={Pattern.StackedCards}>
             <Head>
                 <meta name="description" content="Create stacked cards with CSS" />
                 <meta name="og:description" content="Create stacked cards with CSS" />
@@ -21,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css card, css stacked cards, css transform rotate" />
             </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
index 0cb6d87..399ee9d 100644
--- a/pages/stamp-border/index.tsx
+++ b/pages/stamp-border/index.tsx
@@ -1,27 +1,21 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.StampBorder}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Inner -->
     <div class="container__inner">
@@ -30,58 +24,57 @@ html={`
     </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;
+                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;
-}
+                        /* Spacing */
+                        padding: 5px;
+                    }
 
-.container__inner {
-    /* Background */
-    background-color: #ccc;
-}
-`}
+                    .container__inner {
+                        /* Background */
+                        background-color: #ccc;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
+                            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',
-                                backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
-                                backgroundPosition: '-5px -5px',
-                                backgroundRepeat: 'repeat',
-                                backgroundSize: '10px 10px',
-                                height: '200px',
-                                padding: '5px',
-                                width: '200px',
+                                height: '100%',
+                                width: '100%',
                             }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: '#ccc',
-                                    height: '100%',
-                                    width: '100%',
-                                }}
-                            />
-                        </div>
+                        />
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/statistic/index.tsx b/pages/statistic/index.tsx
index cf0887e..32c9666 100644
--- a/pages/statistic/index.tsx
+++ b/pages/statistic/index.tsx
@@ -1,28 +1,22 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
+import { Pattern } from '../../constants/Pattern';
 import { random } from '../../utils/random';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Statistic}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Value -->
     <div class="container__value">
@@ -35,58 +29,53 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-    flex-direction: column;
-}
+                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__value {
+                        /* Big font size */
+                        font-size: 4rem;
+                        font-weight: 500;
+                    }
 
-.container__label {
-    /* Smaller font size */
-    font-size: 1rem;
-    font-weight: 700;
+                    .container__label {
+                        /* Smaller font size */
+                        font-size: 1rem;
+                        font-weight: 700;
 
-    /* Uppercase the label */
-    text-transform: uppercase;
-}
-`}
+                        /* 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: 'flex',
+                            display: 'inline-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 style={{ fontSize: '4rem', fontWeight: 500 }}>{random(1000, 9999).toLocaleString()}</div>
+                        <div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>stars</div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/status-light/index.tsx b/pages/status-light/index.tsx
index 26bc963..297485e 100644
--- a/pages/status-light/index.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 Head from 'next/head';
 
-import Heading from '../../components/Heading';
+import { Heading, Spacer } from '@1milligram/design';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.StatusLight}>
+        <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" />
             </Head>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <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
index 45b5df7..f04cc3d 100644
--- a/pages/stepper-input/index.tsx
+++ b/pages/stepper-input/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -22,16 +18,15 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout pattern={Pattern.StepperInput}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="stepper">
     <!-- Minus button -->
     <button class="stepper__button">-</button>
@@ -45,112 +40,112 @@ html={`
     <button class="stepper__button">+</button>
 </div>
 `}
-css={`
-.stepper {
-    display: flex;
+                css={`
+                    .stepper {
+                        display: flex;
 
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, .3);
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
 
-    /* Size */
-    height: 32px;
-    width: 128px;
-}
+                        /* Size */
+                        height: 32px;
+                        width: 128px;
+                    }
 
-.stepper__button {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                    .stepper__button {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Size */
-    width: 32px;
-}
+                        /* Size */
+                        width: 32px;
+                    }
 
-.stepper__content {
-    flex: 1;
-}
+                    .stepper__content {
+                        flex: 1;
+                    }
 
-.stepper__input {
-    /* Take full size of its container */
-    height: 100%;
-    width: 100%;
-}
-`}
+                    .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={{
-                            alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '8px',
                             display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            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={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '8px',
-                                display: 'flex',
-                                height: '32px',
-                                width: '128px',
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                flex: 1,
+                                height: '100%',
                             }}
                         >
-                            <button
+                            <input
+                                type="text"
                                 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%',
+                                    padding: '8px',
+                                    width: '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>
+                                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>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.SpinButton, Pattern.Voting]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/sticky-footer/index.tsx b/pages/sticky-footer/index.tsx
index 57cc2f5..a1e2814 100644
--- a/pages/sticky-footer/index.tsx
+++ b/pages/sticky-footer/index.tsx
@@ -1,32 +1,26 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.StickyFooter}>
+        <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 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 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">
         ...
@@ -39,55 +33,58 @@ html={`
     </footer>
 </div>
 `}
-css={`
-.container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
+                css={`
+                    .container {
+                        display: flex;
+                        flex-direction: column;
+                        height: 100%;
+                    }
 
-.container__header,
-.container__footer {
-    flex-shrink: 0;
-}
+                    .container__header,
+                    .container__footer {
+                        flex-shrink: 0;
+                    }
 
-.container__main {
-    flex-grow: 1;
-}
-`}
+                    .container__main {
+                        flex-grow: 1;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                    }}
                 >
                     <div
                         style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            flexShrink: 0,
+                            padding: '16px',
                         }}
                     >
-                        <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 style={{ width: '50%' }}>
+                            <Rectangle />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                    <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>
     );
 };
 
diff --git a/pages/sticky-header/index.tsx b/pages/sticky-header/index.tsx
index 6697e6a..14d5548 100644
--- a/pages/sticky-header/index.tsx
+++ b/pages/sticky-header/index.tsx
@@ -1,33 +1,28 @@
-/**
- * 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 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 { 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.StickyHeader}>
+        <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 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 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">
         ...
@@ -37,41 +32,48 @@ html={`
     </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>
+                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>
-                </BrowserFrame>
-            </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,
-                ]}
+                patterns={[Pattern.StickySections, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]}
             />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/sticky-sections/index.tsx b/pages/sticky-sections/index.tsx
index b424f54..faac991 100644
--- a/pages/sticky-sections/index.tsx
+++ b/pages/sticky-sections/index.tsx
@@ -1,31 +1,26 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.StickySections}>
+        <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 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 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">
         ...
@@ -35,62 +30,61 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    height: 100%;
-    overflow: scroll;
-}
+                css={`
+                    .container {
+                        height: 100%;
+                        overflow: scroll;
+                    }
 
-.container__section {
-    /* Take full size */
-    height: 100%;
-    width: 100%;
+                    .container__section {
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
 
-    /* Stick to the top */
-    position: sticky;
-    top: 0;
-}
-`}
+                        /* Stick to the top */
+                        position: sticky;
+                        top: 0;
+                    }
+                `}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        overflow: 'scroll',
+                    }}
                 >
-                    <div
+                    <section
                         style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
                             height: '100%',
-                            overflow: 'scroll',
+                            position: 'sticky',
+                            top: 0,
+                            width: '100%',
                         }}
-                    >
-                        <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>
-
+                    />
+                    <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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/sticky-table-column/index.tsx b/pages/sticky-table-column/index.tsx
index 60d708d..c4d24a1 100644
--- a/pages/sticky-table-column/index.tsx
+++ b/pages/sticky-table-column/index.tsx
@@ -1,15 +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>
- */
-
 // 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 { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -17,19 +13,18 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     const numberOfColumns = 10;
     return (
-        <DetailsLayout pattern={Pattern.StickyTableColumn}>
+        <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 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={`
+            <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>
@@ -44,120 +39,117 @@ html={`
     </tbody>
 </table>
 `}
-css={`
-.header {
-    /* Background color */
-    background-color: #ddd;
+                css={`
+                    .header {
+                        /* Background color */
+                        background-color: #ddd;
 
-    /* Stick to the left */
-    left: 0;
-    position: sticky;
+                        /* Stick to the left */
+                        left: 0;
+                        position: sticky;
 
-    /* Displayed on top of other rows when scrolling */
-    z-index: 9999;
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            height: '400px',
+                            overflow: 'auto',
+                            width: '60%',
                         }}
                     >
-                        <div
+                        <table
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '400px',
-                                overflow: 'auto',
-                                width: '60%',
+                                borderCollapse: 'collapse',
+                                width: '100%',
                             }}
                         >
-                            <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) => {
+                            <thead>
+                                <tr>
+                                    {Array(numberOfColumns)
+                                        .fill(0)
+                                        .map((_, index) => {
                                             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>
-                                                            );
-                                                        })
+                                                <th
+                                                    key={index}
+                                                    style={
+                                                        index === 0
+                                                            ? {
+                                                                  backgroundColor: '#ddd',
+                                                                  left: 0,
+                                                                  padding: '16px',
+                                                                  position: 'sticky',
+                                                              }
+                                                            : {
+                                                                  padding: '16px',
+                                                              }
                                                     }
-                                                </tr>
+                                                >
+                                                    <div style={{ width: '200px' }}>
+                                                        {index === 0 ? <Rectangle /> : <Block numberOfBlocks={3} />}
+                                                    </div>
+                                                </th>
                                             );
-                                        })
-                                    }
-                                </tbody>
-                            </table>
-                        </div>
+                                        })}
+                                </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>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/sticky-table-headers/index.tsx b/pages/sticky-table-headers/index.tsx
index e4d6164..15d35b8 100644
--- a/pages/sticky-table-headers/index.tsx
+++ b/pages/sticky-table-headers/index.tsx
@@ -1,33 +1,28 @@
-/**
- * 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 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 { 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.StickyTableHeaders}>
+        <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 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={`
+            <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>
@@ -42,97 +37,93 @@ html={`
     </tbody>
 </table>
 `}
-css={`
-.header {
-    /* Background color */
-    background-color: #ddd;
+                css={`
+                    .header {
+                        /* Background color */
+                        background-color: #ddd;
 
-    /* Stick to the top */
-    position: sticky;
-    top: 0;
+                        /* Stick to the top */
+                        position: sticky;
+                        top: 0;
 
-    /* Displayed on top of other rows when scrolling */
-    z-index: 9999;
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            height: '400px',
+                            overflow: 'auto',
+                            width: '60%',
                         }}
                     >
-                        <div
+                        <table
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '400px',
-                                overflow: 'auto',
-                                width: '60%',
+                                borderCollapse: 'collapse',
+                                width: '100%',
                             }}
                         >
-                            <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) => {
+                            <thead>
+                                <tr>
+                                    {Array(3)
+                                        .fill(0)
+                                        .map((_, index) => {
                                             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>
+                                                <th
+                                                    key={index}
+                                                    style={{
+                                                        backgroundColor: '#ddd',
+                                                        padding: '16px',
+                                                        position: 'sticky',
+                                                        top: 0,
+                                                        zIndex: 9999,
+                                                    }}
+                                                >
+                                                    <Rectangle />
+                                                </th>
                                             );
-                                        })
-                                    }
-                                </tbody>
-                            </table>
-                        </div>
+                                        })}
+                                </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>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
 
-            <RelatedPatterns
-                patterns={[
-                    Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableColumn,
-                ]}
-            />
-        </DetailsLayout>
+            <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableColumn]} />
+        </PatternLayout>
     );
 };
 
diff --git a/pages/switch/index.tsx b/pages/switch/index.tsx
index 3fc6fb8..39504ef 100644
--- a/pages/switch/index.tsx
+++ b/pages/switch/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -16,20 +12,19 @@ const Details: React.FC<{}> = () => {
     const toggle = () => setChecked((c) => !c);
 
     return (
-        <DetailsLayout pattern={Pattern.Switch}>
+        <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 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={`
+            <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" />
 
@@ -37,90 +32,90 @@ html={`
     <div class="label__circle"></div>
 </label>
 `}
-css={`
-.label {
-    display: flex;
+                css={`
+                    .label {
+                        display: flex;
 
-    /* Rounded border */
-    border-radius: 9999px;
+                        /* Rounded border */
+                        border-radius: 9999px;
 
-    /* Size */
-    height: 32px;
-    width: 64px;
+                        /* Size */
+                        height: 32px;
+                        width: 64px;
 
-    /* OFF status */
-    background-color: rgba(0, 0, 0, .1);
-    border: 1px solid rgba(0, 0, 0, .3);
+                        /* 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;
-}
+                        /* 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__input {
+                        /* Hide the input */
+                        display: none;
+                    }
 
-.label__circle {
-    /* Rounded border */
-    border-radius: 9999px;
+                    .label__circle {
+                        /* Rounded border */
+                        border-radius: 9999px;
 
-    /* Size */
-    width: 32px;
+                        /* Size */
+                        width: 32px;
 
-    background-color: #FFF;
+                        background-color: #fff;
 
-    /* OFF status */
-    border: 1px solid rgba(0, 0, 0, .3);
-}
-`}
+                        /* 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',
+                    }}
                 >
-                    <div
+                    <label
+                        htmlFor="checkbox-switch"
                         style={{
-                            alignItems: 'center',
+                            backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
+                            border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
+                            borderRadius: '9999px',
                             display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            height: '32px',
+                            justifyContent: checked ? 'flex-end' : '',
+                            width: '64px',
                         }}
                     >
-                        <label
-                            htmlFor="checkbox-switch"
+                        <input
+                            id="checkbox-switch"
+                            type="checkbox"
+                            style={{ display: 'none' }}
+                            checked={checked}
+                            onChange={toggle}
+                        />
+                        <div
                             style={{
-                                backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
-                                border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
+                                backgroundColor: '#FFF',
+                                border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
                                 borderRadius: '9999px',
-                                display: 'flex',
-                                height: '32px',
-                                justifyContent: checked ? 'flex-end' : '',
-                                width: '64px',
+                                width: '32px',
                             }}
-                        >
-                            <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>
+                        />
+                    </label>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.RadioSwitch]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/tab/index.tsx b/pages/tab/index.tsx
index 326ddf0..5a222e9 100644
--- a/pages/tab/index.tsx
+++ b/pages/tab/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -39,16 +34,15 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout pattern={Pattern.Tab}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="tabs">
     <!-- Active tab -->
     <div class="tabs__tab--active">
@@ -61,68 +55,67 @@ html={`
     </div>
 </div>
 `}
-css={`
-.tabs {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
+                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;
+                    .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;
-}
+                        /* 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);
-}
-`}
+                    .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',
-                            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>
+                        <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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/teardrop/index.tsx b/pages/teardrop/index.tsx
index 3d72f1c..1c091ed 100644
--- a/pages/teardrop/index.tsx
+++ b/pages/teardrop/index.tsx
@@ -1,28 +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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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 (
-        <DetailsLayout pattern={Pattern.Teardrop}>
+        <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" />
+                <meta
+                    name="keywords"
+                    content="css border radius, css teardrop, css water drop shape, css water droplet"
+                />
             </Head>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Display the content vertically -->
     <div class="container__content">
@@ -30,60 +27,59 @@ html={`
     </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;
 
-    /* Border */
-    border: 2px solid rgba(0, 0, 0, 0.3);
-    border-radius: 0px 50% 50% 50%;
+                        /* Border */
+                        border: 2px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 0px 50% 50% 50%;
 
-    /* Angle at the top */
-    transform: rotate(45deg);
+                        /* Angle at the top */
+                        transform: rotate(45deg);
 
-    /* Size */
-    height: 64px;
-    width: 64px;
-}
+                        /* Size */
+                        height: 64px;
+                        width: 64px;
+                    }
 
-.container__content {
-    transform: rotate(-45deg);
-}
-`}
+                    .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',
-                            flexDirection: 'column',
-                            height: '100%',
+                            height: '64px',
                             justifyContent: 'center',
-                            padding: '8px',
+                            transform: 'rotate(45deg)',
+                            width: '64px',
                         }}
                     >
-                        <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 style={{ transform: 'rotate(-45deg)' }}>
+                            <Circle />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/three-dimensions-card/index.tsx b/pages/three-dimensions-card/index.tsx
index 6f27e68..acf75b6 100644
--- a/pages/three-dimensions-card/index.tsx
+++ b/pages/three-dimensions-card/index.tsx
@@ -1,20 +1,16 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import './styles.css';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.ThreeDimensionsCard}>
+        <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" />
@@ -22,54 +18,54 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css 3D card" />
             </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="three-dimensions-card">
     ...
 </div>
 `}
-css={`
-:root {
-    --three-dimensions-card-left-side-width: 1rem;
-}
+                css={`
+                    :root {
+                        --three-dimensions-card-left-side-width: 1rem;
+                    }
 
-.three-dimensions-card {
-    position: relative;
-}
+                    .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;
+                    /* The left side */
+                    .three-dimensions-card::before {
+                        background: rgba(0, 0, 0, 0.3);
+                        content: '';
 
-    /* Size */
-    height: 100%;
-    width: var(--three-dimensions-card-left-side-width);
-}
+                        /* Position */
+                        top: var(--three-dimensions-card-left-side-width);
+                        left: 0px;
+                        position: absolute;
+                        transform: translate(-100%, 0) skewY(-45deg);
+                        transform-origin: left top;
 
-/* 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: 100%;
+                        width: var(--three-dimensions-card-left-side-width);
+                    }
 
-    /* Size */
-    height: var(--three-dimensions-card-left-side-width);
-    width: 100%;
-}
-`}
+                    /* 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={{
@@ -92,8 +88,9 @@ css={`
                 </div>
             </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.StackedCards]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/timeline/index.tsx b/pages/timeline/index.tsx
index cfe1ce7..6ad9560 100644
--- a/pages/timeline/index.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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
+import { Spacer } from '@1milligram/design';
 
+import { Pattern } from '../../constants/Pattern';
 import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -16,7 +12,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Timeline}>
+        <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" />
@@ -24,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css flexbox, css timeline" />
             </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
index fc9a3c7..e9c4d0b 100644
--- a/pages/toggle-password-visibility/index.tsx
+++ b/pages/toggle-password-visibility/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -15,16 +10,15 @@ const Details: React.FC<{}> = () => {
     const toggle = () => setVisible((v) => !v);
 
     return (
-        <DetailsLayout pattern={Pattern.TogglePasswordVisibility}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Text input -->
     <input type="text" class="container__input" />
@@ -35,80 +29,79 @@ html={`
     </button>
 </div>
 `}
-css={`
-.container {
-    display: flex;
+                css={`
+                    .container {
+                        display: flex;
 
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-}
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                    }
 
-.container__input {
-    border-color: transparent;
-    /* Take available width */
-    flex: 1;
-}
-`}
+                    .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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <div
+                    <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={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
+                                    borderColor: 'transparent',
+                                    flex: 1,
+                                    marginLeft: '1px',
+                                    padding: '4px',
                                 }}
+                            />
+                            <button
+                                style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
+                                onClick={toggle}
                             >
-                                <input
-                                    type={visible ? 'text' : 'password'}
-                                    autoComplete="off"
+                                <svg
+                                    viewBox="0 0 24 24"
                                     style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        marginLeft: '1px',
-                                        padding: '4px',
+                                        fill: 'none',
+                                        height: '24px',
+                                        stroke: 'rgba(0, 0, 0, 0.4)',
+                                        strokeLinecap: 'round',
+                                        strokeLinejoin: 'round',
+                                        strokeWidth: 1,
+                                        width: '24px',
                                     }}
-                                />
-                                <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
+                                    <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>
+                                        }
+                                    />
+                                </svg>
+                            </button>
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/tooltip/index.tsx b/pages/tooltip/index.tsx
index 7aa3030..ffd3726 100644
--- a/pages/tooltip/index.tsx
+++ b/pages/tooltip/index.tsx
@@ -1,35 +1,28 @@
-/**
- * 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 Head from 'next/head';
-
-import './tooltip.css';
+import { Spacer } from '@1milligram/design';
 
 import { RelatedPatterns } from '../../components/RelatedPatterns';
 import { Pattern } from '../../constants/Pattern';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.Tooltip}>
+        <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 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 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">
@@ -43,101 +36,100 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    /* Used to position the arrow */
-    position: relative;
-}
+                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;
-}
+                    /* 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;
+                    .container__arrow {
+                        /* Invisible by default */
+                        opacity: 0;
 
-    /* To prevent accidental interactions with other elements  */
-    pointer-events: none;
+                        /* To prevent accidental interactions with other elements  */
+                        pointer-events: none;
 
-    /* Border */
-    border: 8px solid transparent;
-    border-top-color: #00439e;
+                        /* Border */
+                        border: 8px solid transparent;
+                        border-top-color: #00439e;
 
-    /* Position */
-    bottom: 100%;
-    left: 50%;
-    position: absolute;
-    transform: translate(-50%, 8px);
+                        /* Position */
+                        bottom: 100%;
+                        left: 50%;
+                        position: absolute;
+                        transform: translate(-50%, 8px);
 
-    /* Zero size */
-    height: 0;
-    width: 0;
+                        /* Zero size */
+                        height: 0;
+                        width: 0;
 
-    /* Displayed on top of other element */
-    z-index: 10;
-}
+                        /* Displayed on top of other element */
+                        z-index: 10;
+                    }
 
-.container__content {
-    /* Invisible by default */
-    opacity: 0;
+                    .container__content {
+                        /* Invisible by default */
+                        opacity: 0;
 
-    /* To prevent accidental interactions with other elements  */
-    pointer-events: none;
+                        /* 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;
+                        /* 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);
+                        /* Position */
+                        bottom: 100%;
+                        left: 50%;
+                        position: absolute;
+                        transform: translate(-50%, -8px);
 
-    /* Displayed on top of other element */
-    z-index: 10;
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            marginBottom: '16px',
+                            width: '150px',
                         }}
                     >
                         <div
-                            className="p-tooltip"
+                            className="p-tooltip-content"
                             style={{
-                                marginBottom: '16px',
-                                width: '150px',
+                                padding: '8px',
+                                width: '200px',
                             }}
                         >
-                            <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} />
+                            <Block backgroundColor="#fff" justify="center" numberOfBlocks={5} />
                         </div>
+                        <div className="p-tooltip-arrow" />
+                        <Rectangle height={32} />
                     </div>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.PopoverArrow]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/tree-diagram/index.tsx b/pages/tree-diagram/index.tsx
index f7659c3..b4a549e 100644
--- a/pages/tree-diagram/index.tsx
+++ b/pages/tree-diagram/index.tsx
@@ -1,21 +1,16 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Square from '../../placeholders/Square';
-import './tree-diagram.css';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.TreeDiagram}>
+        <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" />
@@ -23,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css sitemap, css tree diagram" />
             </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="tree-diagram">
     <ul>
         <li>
@@ -53,80 +48,80 @@ html={`
     </ul>
 </div>
 `}
-css={`
-.tree-diagram ul {
-    display: flex;
-    position: relative;
+                css={`
+                    .tree-diagram ul {
+                        display: flex;
+                        position: relative;
 
-    /* Reset */
-    list-style-type: none;
-    margin: 0;
-    padding: 1rem 0.5rem 0rem 0.5rem;
-}
+                        /* 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%;
+                    .tree-diagram ul ul::before {
+                        border-right: 1px solid rgba(0, 0, 0, 0.3);
+                        content: '';
 
-    /* Size */
-    height: 1rem;
-    width: 50%;
-}
+                        /* Position */
+                        position: absolute;
+                        top: 0;
+                        right: 50%;
 
-.tree-diagram li {
-    padding: 1rem 0.5rem 0rem 0.5rem;
-    position: relative;
+                        /* Size */
+                        height: 1rem;
+                        width: 50%;
+                    }
 
-    /* Center the content */
-    align-items: center;
-    display: flex;    
-    flex-direction: column;
-}
+                    .tree-diagram li {
+                        padding: 1rem 0.5rem 0rem 0.5rem;
+                        position: relative;
 
-.tree-diagram li::before {
-    border-right: 1px solid rgba(0, 0, 0, .3);
-    border-top: 1px solid rgba(0, 0, 0, .3);
-    content: '';    
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        flex-direction: column;
+                    }
 
-    /* Position */
-    position: absolute;
-    top: 0;
-    right: 50%;
+                    .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: '';
 
-    /* Size */
-    height: 1rem;
-    width: 50%;
-}
+                        /* Position */
+                        position: absolute;
+                        top: 0;
+                        right: 50%;
 
-.tree-diagram li::after {
-    border-top: 1px solid rgba(0, 0, 0, .3);
-    content: '';
+                        /* Size */
+                        height: 1rem;
+                        width: 50%;
+                    }
 
-    /* Position */
-    position: absolute;
-    top: 0;
-    right: 0;
+                    .tree-diagram li::after {
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        content: '';
 
-    /* Size */
-    width: 50%;
-}
+                        /* Position */
+                        position: absolute;
+                        top: 0;
+                        right: 0;
 
-.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;
-}
+                        /* Size */
+                        width: 50%;
+                    }
 
-/* Add a root item if you want */
-li.tree-diagram__root::before {
-    border-right: none;
-}
-`}
+                    .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={{
@@ -140,45 +135,62 @@ li.tree-diagram__root::before {
                     <div className="tree-diagram">
                         <ul>
                             <li className="tree-diagram__root">
-                                <Square size='2.5rem' />
+                                <Square size="2.5rem" />
                                 <ul>
                                     <li>
-                                        <Square size='2rem' />
+                                        <Square size="2rem" />
                                         <ul>
-                                            <li><Square size='1.5rem' /></li>
+                                            <li>
+                                                <Square size="1.5rem" />
+                                            </li>
                                         </ul>
                                     </li>
                                     <li>
-                                        <Square size='2rem' />
+                                        <Square size="2rem" />
                                         <ul>
                                             <li>
-                                                <Square size='1.5rem' />
+                                                <Square size="1.5rem" />
                                                 <ul>
-                                                    <li><Square size='1rem' /></li>
-                                                    <li><Square size='1rem' /></li>
-                                                    <li><Square size='1rem' /></li>
+                                                    <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' />
+                                                <Square size="1.5rem" />
+                                            </li>
+                                            <li>
+                                                <Square size="1.5rem" />
                                                 <ul>
-                                                    <li><Square size='1rem' /></li>
-                                                    <li><Square size='1rem' /></li>
+                                                    <li>
+                                                        <Square size="1rem" />
+                                                    </li>
+                                                    <li>
+                                                        <Square size="1rem" />
+                                                    </li>
                                                 </ul>
                                             </li>
                                         </ul>
                                     </li>
-                                    <li><Square size='2rem' /></li>
+                                    <li>
+                                        <Square size="2rem" />
+                                    </li>
                                 </ul>
-                            </li>                                
+                            </li>
                         </ul>
                     </div>
                 </div>
             </BrowserFrame>
 
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.FolderStructure]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/triangle-buttons/index.tsx b/pages/triangle-buttons/index.tsx
index c73b196..a405e13 100644
--- a/pages/triangle-buttons/index.tsx
+++ b/pages/triangle-buttons/index.tsx
@@ -1,28 +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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.TriangleButtons}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <!-- Up triangle button -->
 <button class="container">
     <!-- Triangle -->
@@ -59,189 +54,188 @@ html={`
     ...
 </button>
 `}
-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;
 
-    /* Spacing */
-    padding: 8px;
-}
+                        /* Spacing */
+                        padding: 8px;
+                    }
 
-.container__triangle {
-    border-style: solid;
+                    .container__triangle {
+                        border-style: solid;
 
-    /* Size */
-    height: 0px;
-    width: 0px;
-}
+                        /* 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--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--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--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;
-}
-`}
+                    .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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            height: '200px',
+                            position: 'relative',
+                            width: '200px',
                         }}
                     >
                         <div
                             style={{
-                                height: '200px',
-                                position: 'relative',
-                                width: '200px',
+                                left: '50%',
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(-50%, -50%)',
                             }}
                         >
-                            <div
+                            <button
                                 style={{
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%)',
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
                                 }}
                             >
-                                <button
+                                <div
                                     style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
+                                        borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
+                                        borderStyle: 'solid',
+                                        borderWidth: '0px 8px 8px 8px',
+                                        height: 0,
+                                        width: 0,
                                     }}
-                                >
-                                    <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
+                                />
+                                <div style={{ marginLeft: '8px' }}>Up</div>
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                position: 'absolute',
+                                right: 0,
+                                top: '50%',
+                                transform: 'translate(50%, -50%)',
+                            }}
+                        >
+                            <button
                                 style={{
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translate(50%, -50%)',
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
                                 }}
                             >
-                                <button
+                                <div style={{ marginRight: '8px' }}>Right</div>
+                                <div
                                     style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
+                                        borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
+                                        borderStyle: 'solid',
+                                        borderWidth: '8px 0px 8px 8px',
+                                        height: 0,
+                                        width: 0,
                                     }}
-                                >
-                                    <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
+                                />
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                bottom: 0,
+                                left: '50%',
+                                position: 'absolute',
+                                transform: 'translate(-50%, 50%)',
+                            }}
+                        >
+                            <button
                                 style={{
-                                    bottom: 0,
-                                    left: '50%',
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, 50%)',
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
                                 }}
                             >
-                                <button
+                                <div
                                     style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
+                                        borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
+                                        borderStyle: 'solid',
+                                        borderWidth: '8px 8px 0px 8px',
+                                        height: 0,
+                                        width: 0,
                                     }}
-                                >
-                                    <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
+                                />
+                                <div style={{ marginLeft: '8px' }}>Down</div>
+                            </button>
+                        </div>
+                        <div
+                            style={{
+                                left: 0,
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(-50%, -50%)',
+                            }}
+                        >
+                            <button
                                 style={{
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
+                                    alignItems: 'center',
+                                    backgroundColor: 'transparent',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    padding: '8px',
                                 }}
                             >
-                                <button
+                                <div
                                     style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
+                                        borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
+                                        borderStyle: 'solid',
+                                        borderWidth: '8px 8px 8px 0px',
+                                        height: 0,
+                                        width: 0,
                                     }}
-                                >
-                                    <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 style={{ marginLeft: '8px' }}>Left</div>
+                            </button>
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.PriceTag, Pattern.Voting]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/upload-button/index.tsx b/pages/upload-button/index.tsx
index c8ba22c..d00b902 100644
--- a/pages/upload-button/index.tsx
+++ b/pages/upload-button/index.tsx
@@ -1,31 +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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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.UploadButton}>
+        <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 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 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" />
@@ -37,97 +29,96 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    /* Used to position the input */
-    position: relative;
+                css={`
+                    .container {
+                        /* Used to position the input */
+                        position: relative;
 
-    /* Center the content */
-    align-items: center;
-    display: flex;
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
 
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-}
+                        /* 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%;
+                    .container__input {
+                        /* Take the full size */
+                        height: 100%;
+                        left: 0;
+                        position: absolute;
+                        top: 0;
+                        width: 100%;
 
-    /* Make it transparent */
-    opacity: 0;
-}
+                        /* Make it transparent */
+                        opacity: 0;
+                    }
 
-.container__icon {
-    margin-right: 8px
-}
-`}
+                    .container__icon {
+                        margin-right: 8px;
+                    }
+                `}
+            >
+                <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={{ width: '128px' }}>
-                            <div
+                    <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={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    padding: '8px',
-                                    position: 'relative',
+                                    height: '100%',
+                                    left: 0,
+                                    opacity: 0,
+                                    position: 'absolute',
+                                    top: 0,
                                     width: '100%',
                                 }}
-                            >
-                                <input
-                                    type="file"
+                            />
+                            <div style={{ marginRight: '8px' }}>
+                                <svg
+                                    viewBox="0 0 24 24"
                                     style={{
-                                        height: '100%',
-                                        left: 0,
-                                        opacity: 0,
-                                        position: 'absolute',
-                                        top: 0,
-                                        width: '100%',
+                                        fill: 'none',
+                                        height: '24',
+                                        stroke: 'rgba(0, 0, 0, 0.4)',
+                                        strokeLinecap: 'round',
+                                        strokeLinejoin: 'round',
+                                        strokeWidth: 1,
+                                        width: '24',
                                     }}
-                                />
-                                <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
+                                >
+                                    <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 />
+                                    />
+                                </svg>
                             </div>
+                            <Rectangle />
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/validation-icon/index.tsx b/pages/validation-icon/index.tsx
index af692e1..2452e05 100644
--- a/pages/validation-icon/index.tsx
+++ b/pages/validation-icon/index.tsx
@@ -1,27 +1,21 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.ValidationIcon}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- The input -->
     <input class="container__input" />
@@ -33,132 +27,131 @@ html={`
     </span>
 </div>
 `}
-css={`
-.container {
-    /* Used to position the validation icon */
-    position: relative;
-}
+                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;
+                    .container__input {
+                        /* Border */
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        border-radius: 4px;
 
-    /* Take the full width */
-    width: 100%;
+                        /* Take the full width */
+                        width: 100%;
 
-    /* Don't overlap the icon */
-    padding-right: 24px;
-}
+                        /* 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%);
+                    .container__icon {
+                        /* Positioned at the right side */
+                        position: absolute;
+                        right: 8px;
+                        top: 50%;
+                        transform: translate(0, -50%);
 
-    z-index: 10;
-}
-`}
+                        z-index: 10;
+                    }
+                `}
+            >
+                <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',
+                            marginBottom: '16px',
+                            position: 'relative',
+                            width: '200px',
                         }}
                     >
-                        <div
+                        <input
                             style={{
-                                marginBottom: '16px',
-                                position: 'relative',
-                                width: '200px',
+                                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,
                             }}
                         >
-                            <input
+                            <svg
+                                viewBox="0 0 24 24"
                                 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,
+                                    fill: 'none',
+                                    height: '16px',
+                                    stroke: 'rgba(0, 0, 0, 0.5)',
+                                    strokeLinecap: 'round',
+                                    strokeLinejoin: 'round',
+                                    strokeWidth: 2,
+                                    width: '16px',
                                 }}
                             >
-                                <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>
+                                <path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
+                            </svg>
+                        </i>
                     </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+
+                    <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>
     );
 };
 
diff --git a/pages/video-background/index.tsx b/pages/video-background/index.tsx
index c829ec7..697e535 100644
--- a/pages/video-background/index.tsx
+++ b/pages/video-background/index.tsx
@@ -1,32 +1,27 @@
-/**
- * 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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.VideoBackground}>
+        <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 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 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">
@@ -41,119 +36,119 @@ html={`
     </div>
 </div>
 `}
-css={`
-.container {
-    /* Used to position the video and content */
-    position: relative;
-}
+                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;
+                    .container__wrapper {
+                        /* Positioned at the top left corner */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
 
-    /* Take full size */
-    height: 100%;
-    width: 100%;
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
 
-    /* Hide the scrollbar */
-    overflow: hidden;
-}
+                        /* Hide the scrollbar */
+                        overflow: hidden;
+                    }
 
-.container__video {
-    object-fit: cover;
+                    .container__video {
+                        object-fit: cover;
 
-    /* Center the video */
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
+                        /* Center the video */
+                        left: 50%;
+                        position: absolute;
+                        top: 50%;
+                        transform: translate(-50%, -50%);
 
-    /* Take full width */
-    width: 100%;
-}
+                        /* Take full width */
+                        width: 100%;
+                    }
 
-.container__content {
-    /* Positioned at the top left corner */
-    left: 0px;
-    position: absolute;
-    top: 0px;
+                    .container__content {
+                        /* Positioned at the top left corner */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
 
-    /* Take full size */
-    height: 100%;
-    width: 100%;
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
 
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
                             height: '100%',
-                            justifyContent: 'center',
+                            position: 'relative',
+                            width: '100%',
                         }}
                     >
                         <div
                             style={{
                                 height: '100%',
-                                position: 'relative',
+                                left: 0,
+                                overflow: 'hidden',
+                                position: 'absolute',
+                                top: 0,
                                 width: '100%',
                             }}
                         >
-                            <div
+                            <video
                                 style={{
-                                    height: '100%',
-                                    left: 0,
-                                    overflow: 'hidden',
-                                    position: 'absolute',
-                                    top: 0,
+                                    objectFit: 'cover',
                                     width: '100%',
                                 }}
-                            >
-                                <video
-                                    style={{
-                                        objectFit: 'cover',
-                                        width: '100%',
-                                    }}
-                                    autoPlay={true}
-                                    loop={true}
-                                    muted={true}
-                                    playsInline={true}
-                                    src="/assets/video-background-demo.mp4"
-                                />
-                            </div>
+                                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
+                            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>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
             <RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/voting/index.tsx b/pages/voting/index.tsx
index a9cbbeb..bf8aef3 100644
--- a/pages/voting/index.tsx
+++ b/pages/voting/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 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 { PatternLayout } from '../../layouts/PatternLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -17,16 +13,15 @@ const Details: React.FC<{}> = () => {
     const increase = () => setValue(value + 1);
 
     return (
-        <DetailsLayout pattern={Pattern.Voting}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="voting">
     <!-- Up button -->
     <button class="voting__button">
@@ -44,148 +39,143 @@ html={`
     </button>
 </div>
 `}
-css={`
-.voting {
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 0.25rem;
-    display: flex;
-    flex-direction: column;
-    height: 8rem;
-}
+                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;
+                    .voting__button {
+                        /* Reset */
+                        background: none;
+                        border: none;
+                        cursor: pointer;
 
-    /* Position the triangle */
-    position: relative;
-}
+                        /* Size */
+                        height: 1rem;
 
-.voting__triangle {
-    border-style: solid;
+                        /* Position the triangle */
+                        position: relative;
+                    }
 
-    /* Size */
-    height: 0;
-    width: 0;
-}
+                    .voting__triangle {
+                        border-style: solid;
 
-.voting__triangle--up {
-    border-color: transparent transparent rgba(0, 0, 0, 0.3);
-    border-width: 0 0.5rem 0.5rem;
-}
+                        /* Size */
+                        height: 0;
+                        width: 0;
+                    }
 
-.voting__triangle--down {
-    border-color: rgba(0, 0, 0, 0.3) transparent transparent;
-    border-width: 0.5rem 0.5rem 0px;
-}
+                    .voting__triangle--up {
+                        border-color: transparent transparent rgba(0, 0, 0, 0.3);
+                        border-width: 0 0.5rem 0.5rem;
+                    }
 
-.voting__number {
-    /* Take the available height */
-    flex: 1;
+                    .voting__triangle--down {
+                        border-color: rgba(0, 0, 0, 0.3) transparent transparent;
+                        border-width: 0.5rem 0.5rem 0px;
+                    }
 
-    /* Center the number */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                    .voting__number {
+                        /* Take the available height */
+                        flex: 1;
 
-    /* Spacing */
-    padding: 0.25rem;
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '0.25rem',
                             display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '0.5rem',
+                            flexDirection: 'column',
+                            height: '8rem',
                         }}
                     >
-                        <div
+                        <button
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '0.25rem',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '8rem',
+                                background: 'none',
+                                border: 'none',
+                                cursor: 'pointer',
+                                height: '1rem',
+                                position: 'relative',
                             }}
+                            onClick={increase}
                         >
-                            <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',
+                                    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,
                                 }}
-                            >
-                                {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>
+                            />
+                        </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>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[
-                    Pattern.SpinButton, Pattern.StepperInput, Pattern.TriangleButtons
-                ]}
-            />
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+            <Spacer size="extraLarge" />
+            <RelatedPatterns patterns={[Pattern.SpinButton, Pattern.StepperInput, Pattern.TriangleButtons]} />
+        </PatternLayout>
     );
 };
 
diff --git a/pages/watermark/index.tsx b/pages/watermark/index.tsx
index 9ae70af..3f02b08 100644
--- a/pages/watermark/index.tsx
+++ b/pages/watermark/index.tsx
@@ -1,28 +1,22 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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 (
-        <DetailsLayout pattern={Pattern.Watermark}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="container">
     <!-- Watermark container -->
     <div class="container__wrapper">
@@ -36,105 +30,104 @@ html={`
     ...
 </div>
 `}
-css={`
-.container {
-    /* Used to position the watermark */
-    position: relative;
-}
+                css={`
+                    .container {
+                        /* Used to position the watermark */
+                        position: relative;
+                    }
 
-.container__wrapper {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
+                    .container__wrapper {
+                        /* Center the content */
+                        align-items: center;
+                        display: flex;
+                        justify-content: center;
 
-    /* Absolute position */
-    left: 0px;
-    position: absolute;
-    top: 0px;
+                        /* Absolute position */
+                        left: 0px;
+                        position: absolute;
+                        top: 0px;
 
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-}
+                        /* Take full size */
+                        height: 100%;
+                        width: 100%;
+                    }
 
-.container__watermark {
-    /* Text color */
-    color: rgba(0, 0, 0, 0.2);
+                    .container__watermark {
+                        /* Text color */
+                        color: rgba(0, 0, 0, 0.2);
 
-    /* Text styles */
-    font-size: 3rem;
-    font-weight: bold;
-    text-transform: uppercase;
+                        /* Text styles */
+                        font-size: 3rem;
+                        font-weight: bold;
+                        text-transform: uppercase;
 
-    /* Rotate the text */
-    transform: rotate(-45deg);
+                        /* Rotate the text */
+                        transform: rotate(-45deg);
 
-    /* Disable the selection */
-    user-select: none;
-}
-`}
+                        /* Disable the selection */
+                        user-select: none;
+                    }
+                `}
+            >
+                <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)',
+                            padding: '16px',
+                            position: 'relative',
+                            width: '300px',
                         }}
                     >
                         <div
                             style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                padding: '16px',
-                                position: 'relative',
-                                width: '300px',
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                                width: '100%',
                             }}
                         >
                             <div
                                 style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
+                                    color: 'rgba(0, 0, 0, 0.2)',
+                                    fontSize: '3rem',
+                                    fontWeight: 'bold',
+                                    textTransform: 'uppercase',
+                                    transform: 'rotate(-45deg)',
+                                    userSelect: 'none',
                                 }}
                             >
-                                <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} />
+                                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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/wizard/index.tsx b/pages/wizard/index.tsx
index 858b771..7505b7d 100644
--- a/pages/wizard/index.tsx
+++ b/pages/wizard/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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
 
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+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';
@@ -15,16 +10,15 @@ import Line from '../../placeholders/Line';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout pattern={Pattern.Wizard}>
+        <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>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
+            <BrowserFrame
+                html={`
 <div class="wizard">
     <!-- Step -->
     <div class="wizard__step">
@@ -49,146 +43,153 @@ html={`
     ...
 </div>
 `}
-css={`
-.wizard {
-    display: flex;
-}
+                css={`
+                    .wizard {
+                        display: flex;
+                    }
 
-.wizard__step {
-    /* Make all steps have the same width */
-    flex: 1;
-}
+                    .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__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__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__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;
+                    .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;
+                        /* 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;
-}
-`}
+                        /* 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={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ display: 'flex', width: '80%' }}>
-                            <div style={{ flex: 1 }}>
+                    <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',
-                                        marginBottom: '16px',
+                                        margin: '0 4px',
                                     }}
                                 >
-                                    <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>
+                                    <Circle size={32} />
                                 </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
-                                    <Block justify='center' numberOfBlocks={5} />
+                                <div style={{ flex: 1 }}>
+                                    <Line />
                                 </div>
                             </div>
-                            <div style={{ flex: 1 }}>
+                            <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',
-                                        marginBottom: '16px',
+                                        margin: '0 4px',
                                     }}
                                 >
-                                    <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>
+                                    <Circle size={32} />
                                 </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
-                                    <Block justify='center' numberOfBlocks={5} />
+                                <div style={{ flex: 1 }}>
+                                    <Line />
                                 </div>
                             </div>
-                            <div style={{ flex: 1 }}>
+                            <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',
-                                        marginBottom: '16px',
+                                        margin: '0 4px',
                                     }}
                                 >
-                                    <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} />
+                                    <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>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
+                </div>
+            </BrowserFrame>
+        </PatternLayout>
     );
 };
 
diff --git a/pages/zigzag-timeline/index.tsx b/pages/zigzag-timeline/index.tsx
index 2da8843..dfe70d2 100644
--- a/pages/zigzag-timeline/index.tsx
+++ b/pages/zigzag-timeline/index.tsx
@@ -1,23 +1,17 @@
-/**
- * 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 Head from 'next/head';
-import { Pattern } from '../../constants/Pattern';
+import { Spacer } from '@1milligram/design';
 
+import { Pattern } from '../../constants/Pattern';
 import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { DetailsLayout } from '../../layouts/DetailsLayout';
+import { PatternLayout } from '../../layouts/PatternLayout';
 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}>
+        <PatternLayout pattern={Pattern.ZigzagTimeline}>
             <Head>
                 <meta name="description" content="Create a zigzag timeline" />
                 <meta name="og:description" content="Create a zigzag timeline" />
@@ -25,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="keywords" content="css timeline, css zigzag timeline" />
             </Head>
             <BrowserFrame
-html={`
+                html={`
 <div class="zigzag-timeline__item">
     <!-- Milestone -->
     <div className="zigzag-timeline__milestone">...</div>
@@ -37,51 +31,50 @@ html={`
 <!-- Repeat other items -->
 ...
 `}
-css={`
-.zigzag-timeline__item {
-    /* Used to position the milestone */
-    position: relative;
+                css={`
+                    .zigzag-timeline__item {
+                        /* Used to position the milestone */
+                        position: relative;
 
-    /* Border */
-    border-bottom: 1px solid #71717A;
+                        /* Border */
+                        border-bottom: 1px solid #71717a;
 
-    /* Take full width */
-    width: 100%;
-}
+                        /* Take full width */
+                        width: 100%;
+                    }
 
-.zigzag-timeline__milestone {
-    /* Absolute position */
-    position: absolute;    
-    top: 50%;
+                    .zigzag-timeline__milestone {
+                        /* Absolute position */
+                        position: absolute;
+                        top: 50%;
 
-    /* Circle it */
-    border-radius: 50%;
-    height: 2rem;
-    width: 2rem;
+                        /* Circle it */
+                        border-radius: 50%;
+                        height: 2rem;
+                        width: 2rem;
 
-    /* Misc */
-    background: #71717A;
-}
+                        /* 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 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%);
-}
-`}
+                    /* 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={{
@@ -96,40 +89,47 @@ css={`
                     }}
                 >
                     <div
-                        className='zigzag-timeline__item'
-                        style={{                                
+                        className="zigzag-timeline__item"
+                        style={{
                             padding: '1rem 1.5rem',
                         }}
                     >
-                        <div className='zigzag-timeline__milestone'/>
-                        <div style={{ marginBottom: '1rem', width: '80%' }}><Rectangle /></div>
+                        <div className="zigzag-timeline__milestone" />
+                        <div style={{ marginBottom: '1rem', width: '80%' }}>
+                            <Rectangle />
+                        </div>
                         <Block numberOfBlocks={10} />
                     </div>
                     <div
-                        className='zigzag-timeline__item'
+                        className="zigzag-timeline__item"
                         style={{
                             padding: '1rem 1.5rem',
                         }}
                     >
-                        <div className='zigzag-timeline__milestone' />
-                        <div style={{ marginBottom: '1rem', width: '60%' }}><Rectangle /></div>
+                        <div className="zigzag-timeline__milestone" />
+                        <div style={{ marginBottom: '1rem', width: '60%' }}>
+                            <Rectangle />
+                        </div>
                         <Block numberOfBlocks={20} />
                     </div>
                     <div
-                        className='zigzag-timeline__item'
+                        className="zigzag-timeline__item"
                         style={{
                             padding: '1rem 1.5rem',
                         }}
                     >
-                        <div className='zigzag-timeline__milestone' />
-                        <div style={{ marginBottom: '1rem', width: '70%' }}><Rectangle /></div>
+                        <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]} />
-        </DetailsLayout>
+        </PatternLayout>
     );
 };
 
diff --git a/patterns/accordion/Cover.tsx b/patterns/accordion/Cover.tsx
index 695a2ab..83336b3 100644
--- a/patterns/accordion/Cover.tsx
+++ b/patterns/accordion/Cover.tsx
@@ -40,7 +40,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 +56,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 +64,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/patterns/avatar-list/Cover.tsx b/patterns/avatar-list/Cover.tsx
index 787b8b7..7b2f244 100644
--- a/patterns/avatar-list/Cover.tsx
+++ b/patterns/avatar-list/Cover.tsx
@@ -19,8 +19,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 +42,7 @@ const Cover: React.FC<{}> = () => {
                                 </div>
                             </div>
                         );
-                    })
-                }
+                    })}
             </div>
         </Frame>
     );
diff --git a/patterns/avatar/Cover.tsx b/patterns/avatar/Cover.tsx
index ae747f5..a2fe4c4 100644
--- a/patterns/avatar/Cover.tsx
+++ b/patterns/avatar/Cover.tsx
@@ -34,7 +34,7 @@ const Cover: React.FC<{}> = () => {
                         style={{
                             fill: 'none',
                             height: '100%',
-                            stroke: "#FFF",
+                            stroke: '#FFF',
                             strokeLinecap: 'round',
                             strokeLinejoin: 'round',
                             strokeWidth: 1,
diff --git a/patterns/breadcrumb/Cover.tsx b/patterns/breadcrumb/Cover.tsx
index e739b09..6afc9ab 100644
--- a/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/patterns/button-with-icon/Cover.tsx b/patterns/button-with-icon/Cover.tsx
index b37d4b0..5a7bdc5 100644
--- a/patterns/button-with-icon/Cover.tsx
+++ b/patterns/button-with-icon/Cover.tsx
@@ -32,7 +32,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/patterns/card-layout/Cover.tsx b/patterns/card-layout/Cover.tsx
index 53147b4..74f946d 100644
--- a/patterns/card-layout/Cover.tsx
+++ b/patterns/card-layout/Cover.tsx
@@ -22,15 +22,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/patterns/card/Cover.tsx b/patterns/card/Cover.tsx
index 57b798d..89fff53 100644
--- a/patterns/card/Cover.tsx
+++ b/patterns/card/Cover.tsx
@@ -24,10 +24,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/patterns/chip/InputChip.tsx b/patterns/chip/InputChip.tsx
index ea8748d..f197878 100644
--- a/patterns/chip/InputChip.tsx
+++ b/patterns/chip/InputChip.tsx
@@ -17,9 +17,7 @@ const InputChip: React.FC<{}> = ({ children }) => {
                 padding: '4px 8px',
             }}
         >
-            <div style={{ flex: 1, marginRight: '4px' }}>
-                {children}
-            </div>
+            <div style={{ flex: 1, marginRight: '4px' }}>{children}</div>
             <button
                 style={{
                     backgroundColor: 'transparent',
diff --git a/patterns/color-swatch/Cover.tsx b/patterns/color-swatch/Cover.tsx
index 4bfc7e7..11ab0f9 100644
--- a/patterns/color-swatch/Cover.tsx
+++ b/patterns/color-swatch/Cover.tsx
@@ -19,21 +19,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/patterns/concave-corners/Cover.tsx b/patterns/concave-corners/Cover.tsx
index 22b72b2..6adaa32 100644
--- a/patterns/concave-corners/Cover.tsx
+++ b/patterns/concave-corners/Cover.tsx
@@ -61,7 +61,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/patterns/concave-corners/concave-corners.css b/patterns/concave-corners/concave-corners.css
index c7155ae..0c6b66e 100644
--- a/patterns/concave-corners/concave-corners.css
+++ b/patterns/concave-corners/concave-corners.css
@@ -4,13 +4,13 @@
  */
 
 :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 +23,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 +39,7 @@
 }
 
 .concave-corners__corner--tr {
-    /* Position */ 
+    /* Position */
     right: 0;
     top: 0;
 
@@ -63,4 +63,4 @@
 
     /* Border radius */
     border-radius: var(--concave-corners-size) 0 0 0;
-}
\ No newline at end of file
+}
diff --git a/patterns/cookie-banner/Cover.tsx b/patterns/cookie-banner/Cover.tsx
index f8a9841..2f1d6a4 100644
--- a/patterns/cookie-banner/Cover.tsx
+++ b/patterns/cookie-banner/Cover.tsx
@@ -36,9 +36,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/patterns/custom-checkbox-button/Cover.tsx b/patterns/custom-checkbox-button/Cover.tsx
index 0e62c10..f99e943 100644
--- a/patterns/custom-checkbox-button/Cover.tsx
+++ b/patterns/custom-checkbox-button/Cover.tsx
@@ -43,7 +43,7 @@ const Cover: React.FC<{}> = () => {
                             width: '24px',
                         }}
                     >
-                        <Square backgroundColor='transparent' />
+                        <Square backgroundColor="transparent" />
                     </div>
                     <div style={{ flex: 1 }}>
                         <Rectangle />
@@ -70,7 +70,7 @@ const Cover: React.FC<{}> = () => {
                             width: '24px',
                         }}
                     >
-                        <Square backgroundColor='#00449E' />
+                        <Square backgroundColor="#00449E" />
                     </div>
                     <div style={{ flex: 1 }}>
                         <Rectangle />
diff --git a/patterns/custom-radio-button/Cover.tsx b/patterns/custom-radio-button/Cover.tsx
index 54cb8be..7b90bf5 100644
--- a/patterns/custom-radio-button/Cover.tsx
+++ b/patterns/custom-radio-button/Cover.tsx
@@ -41,7 +41,7 @@ const Cover: React.FC<{}> = () => {
                             padding: '4px',
                         }}
                     >
-                        <Circle backgroundColor='#00449E' />
+                        <Circle backgroundColor="#00449E" />
                     </div>
                     <div style={{ flex: 1 }}>
                         <Rectangle />
@@ -66,7 +66,7 @@ const Cover: React.FC<{}> = () => {
                             padding: '4px',
                         }}
                     >
-                        <Circle backgroundColor='transparent' />
+                        <Circle backgroundColor="transparent" />
                     </div>
                     <div style={{ flex: 1 }}>
                         <Rectangle />
diff --git a/patterns/dot-leader/Cover.tsx b/patterns/dot-leader/Cover.tsx
index 72ea240..38dd9bd 100644
--- a/patterns/dot-leader/Cover.tsx
+++ b/patterns/dot-leader/Cover.tsx
@@ -31,7 +31,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 +46,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 +60,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/patterns/drawer/Cover.tsx b/patterns/drawer/Cover.tsx
index c4d5d26..31097e6 100644
--- a/patterns/drawer/Cover.tsx
+++ b/patterns/drawer/Cover.tsx
@@ -30,10 +30,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/patterns/drop-area/Cover.tsx b/patterns/drop-area/Cover.tsx
index d673a98..5117f9c 100644
--- a/patterns/drop-area/Cover.tsx
+++ b/patterns/drop-area/Cover.tsx
@@ -33,9 +33,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/patterns/drop-cap/Cover.tsx b/patterns/drop-cap/Cover.tsx
index ebdd68f..b7373ee 100644
--- a/patterns/drop-cap/Cover.tsx
+++ b/patterns/drop-cap/Cover.tsx
@@ -36,21 +36,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/patterns/drop-cap/dropcap.css b/patterns/drop-cap/dropcap.css
index b12883d..c59c774 100644
--- a/patterns/drop-cap/dropcap.css
+++ b/patterns/drop-cap/dropcap.css
@@ -10,5 +10,5 @@
     font-weight: 700;
     line-height: 1;
     margin: 0 8px 0 0;
-    padding: 0 8px; 
+    padding: 0 8px;
 }
diff --git a/patterns/dropdown/Cover.tsx b/patterns/dropdown/Cover.tsx
index 2ebf3b5..e36476b 100644
--- a/patterns/dropdown/Cover.tsx
+++ b/patterns/dropdown/Cover.tsx
@@ -34,7 +34,7 @@ const Cover: React.FC<{}> = () => {
                         width: '60%',
                     }}
                 >
-                    <Triangle corner='b' size={8} />
+                    <Triangle corner="b" size={8} />
                 </div>
                 <div
                     style={{
@@ -67,7 +67,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 +79,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/patterns/fading-long-section/Cover.tsx b/patterns/fading-long-section/Cover.tsx
index 50b02b2..87fcaba 100644
--- a/patterns/fading-long-section/Cover.tsx
+++ b/patterns/fading-long-section/Cover.tsx
@@ -30,15 +30,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/patterns/feature-list/Cover.tsx b/patterns/feature-list/Cover.tsx
index 72b6c33..d5f9d97 100644
--- a/patterns/feature-list/Cover.tsx
+++ b/patterns/feature-list/Cover.tsx
@@ -24,21 +24,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/patterns/floating-label/floating-label.css b/patterns/floating-label/floating-label.css
index 9fef476..98e4193 100644
--- a/patterns/floating-label/floating-label.css
+++ b/patterns/floating-label/floating-label.css
@@ -8,7 +8,7 @@
 }
 
 .p-floating-container input:not(:placeholder-shown) + label {
-    background: #FFF;
+    background: #fff;
     transform: translate(0, -50%);
     opacity: 1;
 }
diff --git a/patterns/folder-structure/folder-structure.css b/patterns/folder-structure/folder-structure.css
index 502cec5..9117cdc 100644
--- a/patterns/folder-structure/folder-structure.css
+++ b/patterns/folder-structure/folder-structure.css
@@ -21,9 +21,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 +35,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/patterns/full-background/Cover.tsx b/patterns/full-background/Cover.tsx
index d52bb2a..0962f64 100644
--- a/patterns/full-background/Cover.tsx
+++ b/patterns/full-background/Cover.tsx
@@ -23,13 +23,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/patterns/full-screen-menu/Cover.tsx b/patterns/full-screen-menu/Cover.tsx
index 4ac2a84..71b2d9c 100644
--- a/patterns/full-screen-menu/Cover.tsx
+++ b/patterns/full-screen-menu/Cover.tsx
@@ -41,9 +41,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/patterns/holy-grail/Cover.tsx b/patterns/holy-grail/Cover.tsx
index 7ccc0e0..eee4907 100644
--- a/patterns/holy-grail/Cover.tsx
+++ b/patterns/holy-grail/Cover.tsx
@@ -32,9 +32,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 +51,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 +86,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 +108,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/patterns/input-addon/Cover.tsx b/patterns/input-addon/Cover.tsx
index 5b653bf..5ee68a1 100644
--- a/patterns/input-addon/Cover.tsx
+++ b/patterns/input-addon/Cover.tsx
@@ -39,7 +39,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/patterns/inverted-corners/inverted-corners.css b/patterns/inverted-corners/inverted-corners.css
index b9b022b..7a64565 100644
--- a/patterns/inverted-corners/inverted-corners.css
+++ b/patterns/inverted-corners/inverted-corners.css
@@ -4,13 +4,13 @@
  */
 
 :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 +49,5 @@
     justify-content: center;
 
     /* Misc */
-    color: #FFF;
-}
\ No newline at end of file
+    color: #fff;
+}
diff --git a/patterns/layered-card/styles.css b/patterns/layered-card/styles.css
index 4295d5a..04d7913 100644
--- a/patterns/layered-card/styles.css
+++ b/patterns/layered-card/styles.css
@@ -10,7 +10,7 @@
 .layered-card::before {
     background: rgba(0, 0, 0, 0.3);
     content: '';
-    
+
     /* Position */
     top: 0;
     left: 0;
diff --git a/patterns/masonry-grid/Cover.tsx b/patterns/masonry-grid/Cover.tsx
index 74a8e8d..2bfe9f9 100644
--- a/patterns/masonry-grid/Cover.tsx
+++ b/patterns/masonry-grid/Cover.tsx
@@ -25,17 +25,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/patterns/media-object/Cover.tsx b/patterns/media-object/Cover.tsx
index 6b78fdb..c77259d 100644
--- a/patterns/media-object/Cover.tsx
+++ b/patterns/media-object/Cover.tsx
@@ -25,17 +25,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/patterns/mega-menu/Cover.tsx b/patterns/mega-menu/Cover.tsx
index 7135250..3aed34a 100644
--- a/patterns/mega-menu/Cover.tsx
+++ b/patterns/mega-menu/Cover.tsx
@@ -52,23 +52,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/patterns/menu/Cover.tsx b/patterns/menu/Cover.tsx
index ea3906d..5a8f097 100644
--- a/patterns/menu/Cover.tsx
+++ b/patterns/menu/Cover.tsx
@@ -51,7 +51,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 +63,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/patterns/modal/Cover.tsx b/patterns/modal/Cover.tsx
index 39b8673..9f643d1 100644
--- a/patterns/modal/Cover.tsx
+++ b/patterns/modal/Cover.tsx
@@ -37,14 +37,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 +64,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/patterns/nested-dropdowns/Cover.tsx b/patterns/nested-dropdowns/Cover.tsx
index ab68f44..55fd9d1 100644
--- a/patterns/nested-dropdowns/Cover.tsx
+++ b/patterns/nested-dropdowns/Cover.tsx
@@ -58,10 +58,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/patterns/notification/Cover.tsx b/patterns/notification/Cover.tsx
index 2539eff..391da72 100644
--- a/patterns/notification/Cover.tsx
+++ b/patterns/notification/Cover.tsx
@@ -32,7 +32,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/patterns/overlay-play-button/Cover.tsx b/patterns/overlay-play-button/Cover.tsx
index e882318..de24313 100644
--- a/patterns/overlay-play-button/Cover.tsx
+++ b/patterns/overlay-play-button/Cover.tsx
@@ -51,7 +51,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/patterns/price-tag/Cover.tsx b/patterns/price-tag/Cover.tsx
index e7834cf..a71b8bc 100644
--- a/patterns/price-tag/Cover.tsx
+++ b/patterns/price-tag/Cover.tsx
@@ -29,8 +29,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/patterns/price-tag/price-tag.css b/patterns/price-tag/price-tag.css
index f7be3ec..4972c76 100644
--- a/patterns/price-tag/price-tag.css
+++ b/patterns/price-tag/price-tag.css
@@ -10,7 +10,7 @@
 
 .price-tag {
     background: var(--price-tag-background);
-    color: #FFF;
+    color: #fff;
 
     /* Center the price */
     align-items: center;
@@ -33,11 +33,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 +47,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/patterns/pricing-table/Cover.tsx b/patterns/pricing-table/Cover.tsx
index 5c45aa8..71400e6 100644
--- a/patterns/pricing-table/Cover.tsx
+++ b/patterns/pricing-table/Cover.tsx
@@ -35,11 +35,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 +64,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 +98,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/patterns/property-list/Cover.tsx b/patterns/property-list/Cover.tsx
index ed3b391..e3532e2 100644
--- a/patterns/property-list/Cover.tsx
+++ b/patterns/property-list/Cover.tsx
@@ -32,7 +32,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 +46,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 +60,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/patterns/questions-and-answers/Cover.tsx b/patterns/questions-and-answers/Cover.tsx
index 5949d9b..48f34da 100644
--- a/patterns/questions-and-answers/Cover.tsx
+++ b/patterns/questions-and-answers/Cover.tsx
@@ -32,7 +32,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 +46,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/patterns/rating/Star.tsx b/patterns/rating/Star.tsx
index 428d112..c2546b5 100644
--- a/patterns/rating/Star.tsx
+++ b/patterns/rating/Star.tsx
@@ -12,11 +12,7 @@ interface StarProps {
 }
 
 const Star: React.FC<StarProps> = ({ isActive }) => {
-    return (
-        <button className="p-rating-star">
-            {isActive ? '★' : '☆'}
-        </button>
-    );
+    return <button className="p-rating-star">{isActive ? '★' : '☆'}</button>;
 };
 
 export default Star;
diff --git a/patterns/same-height-columns/Cover.tsx b/patterns/same-height-columns/Cover.tsx
index 236199b..54fc4db 100644
--- a/patterns/same-height-columns/Cover.tsx
+++ b/patterns/same-height-columns/Cover.tsx
@@ -17,21 +17,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/patterns/separator/Cover.tsx b/patterns/separator/Cover.tsx
index 726dcb5..2b36c8f 100644
--- a/patterns/separator/Cover.tsx
+++ b/patterns/separator/Cover.tsx
@@ -30,9 +30,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/patterns/sidebar/Cover.tsx b/patterns/sidebar/Cover.tsx
index b2afd6a..c8b78f8 100644
--- a/patterns/sidebar/Cover.tsx
+++ b/patterns/sidebar/Cover.tsx
@@ -22,8 +22,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 +39,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/patterns/simple-grid/Cover.tsx b/patterns/simple-grid/Cover.tsx
index 530cabe..315fd9e 100644
--- a/patterns/simple-grid/Cover.tsx
+++ b/patterns/simple-grid/Cover.tsx
@@ -23,18 +23,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/patterns/slider/Cover.tsx b/patterns/slider/Cover.tsx
index 2112be3..99c0fd7 100644
--- a/patterns/slider/Cover.tsx
+++ b/patterns/slider/Cover.tsx
@@ -30,9 +30,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/patterns/spin-button/Cover.tsx b/patterns/spin-button/Cover.tsx
index f40f16f..5505591 100644
--- a/patterns/spin-button/Cover.tsx
+++ b/patterns/spin-button/Cover.tsx
@@ -37,8 +37,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/patterns/split-navigation/Cover.tsx b/patterns/split-navigation/Cover.tsx
index cb16c18..8e12eaa 100644
--- a/patterns/split-navigation/Cover.tsx
+++ b/patterns/split-navigation/Cover.tsx
@@ -31,9 +31,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/patterns/split-screen/Cover.tsx b/patterns/split-screen/Cover.tsx
index 9a1b097..5e07615 100644
--- a/patterns/split-screen/Cover.tsx
+++ b/patterns/split-screen/Cover.tsx
@@ -23,7 +23,9 @@ const Cover: React.FC<{}> = () => {
                         justifyContent: 'center',
                     }}
                 >
-                    <div style={{ marginBottom: '4px' }}><Circle /></div>
+                    <div style={{ marginBottom: '4px' }}>
+                        <Circle />
+                    </div>
                 </div>
                 <div
                     style={{
@@ -33,11 +35,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/patterns/statistic/Cover.tsx b/patterns/statistic/Cover.tsx
index cec31ad..785dcfa 100644
--- a/patterns/statistic/Cover.tsx
+++ b/patterns/statistic/Cover.tsx
@@ -28,9 +28,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/patterns/sticky-footer/Cover.tsx b/patterns/sticky-footer/Cover.tsx
index 9135631..cb3f870 100644
--- a/patterns/sticky-footer/Cover.tsx
+++ b/patterns/sticky-footer/Cover.tsx
@@ -33,9 +33,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 +51,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 +72,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/patterns/sticky-header/Cover.tsx b/patterns/sticky-header/Cover.tsx
index ce207e9..f5355c2 100644
--- a/patterns/sticky-header/Cover.tsx
+++ b/patterns/sticky-header/Cover.tsx
@@ -27,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>
                     <Line />
                 </div>
@@ -41,9 +47,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/patterns/sticky-table-column/Cover.tsx b/patterns/sticky-table-column/Cover.tsx
index 7560501..9116e14 100644
--- a/patterns/sticky-table-column/Cover.tsx
+++ b/patterns/sticky-table-column/Cover.tsx
@@ -31,8 +31,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 +45,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 +68,10 @@ const Cover: React.FC<{}> = () => {
                                                         {col === 0 ? <Rectangle /> : <Line />}
                                                     </td>
                                                 );
-                                            })
-                                        }
+                                            })}
                                     </tr>
                                 );
-                            })
-                        }
+                            })}
                     </tbody>
                 </table>
             </div>
diff --git a/patterns/sticky-table-headers/Cover.tsx b/patterns/sticky-table-headers/Cover.tsx
index cf8d82f..2424ca0 100644
--- a/patterns/sticky-table-headers/Cover.tsx
+++ b/patterns/sticky-table-headers/Cover.tsx
@@ -31,35 +31,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/patterns/three-dimensions-card/Cover.tsx b/patterns/three-dimensions-card/Cover.tsx
index 8ebd589..7abdf58 100644
--- a/patterns/three-dimensions-card/Cover.tsx
+++ b/patterns/three-dimensions-card/Cover.tsx
@@ -25,8 +25,8 @@ const Cover: React.FC<{}> = () => {
                         height: '2rem',
                         position: 'relative',
                         width: '100%',
-                    }
-                }>
+                    }}
+                >
                     <div
                         style={{
                             background: 'rgba(0, 0, 0, 0.3)',
@@ -43,7 +43,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/patterns/three-dimensions-card/styles.css b/patterns/three-dimensions-card/styles.css
index 41f9ab6..6fcd4a8 100644
--- a/patterns/three-dimensions-card/styles.css
+++ b/patterns/three-dimensions-card/styles.css
@@ -12,10 +12,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 +31,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/patterns/timeline/Cover.tsx b/patterns/timeline/Cover.tsx
index b99994a..bb0cdcf 100644
--- a/patterns/timeline/Cover.tsx
+++ b/patterns/timeline/Cover.tsx
@@ -47,30 +47,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/patterns/toggle-password-visibility/Cover.tsx b/patterns/toggle-password-visibility/Cover.tsx
index c8bdf5f..63673cd 100644
--- a/patterns/toggle-password-visibility/Cover.tsx
+++ b/patterns/toggle-password-visibility/Cover.tsx
@@ -33,9 +33,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/patterns/tree-diagram/Cover.tsx b/patterns/tree-diagram/Cover.tsx
index 7d8a2d9..2eed0a9 100644
--- a/patterns/tree-diagram/Cover.tsx
+++ b/patterns/tree-diagram/Cover.tsx
@@ -20,10 +20,7 @@ const Cover: React.FC<{}> = () => {
                     padding: '0.5rem',
                 }}
             >
-                <div
-                    style={{
-                    }}
-                >
+                <div style={{}}>
                     <div
                         style={{
                             display: 'flex',
diff --git a/patterns/tree-diagram/tree-diagram.css b/patterns/tree-diagram/tree-diagram.css
index 306134e..5c5656f 100644
--- a/patterns/tree-diagram/tree-diagram.css
+++ b/patterns/tree-diagram/tree-diagram.css
@@ -14,7 +14,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 +29,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 +47,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/patterns/upload-button/Cover.tsx b/patterns/upload-button/Cover.tsx
index b86d267..581115c 100644
--- a/patterns/upload-button/Cover.tsx
+++ b/patterns/upload-button/Cover.tsx
@@ -37,7 +37,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/patterns/validation-icon/Cover.tsx b/patterns/validation-icon/Cover.tsx
index e188fee..b14f0bd 100644
--- a/patterns/validation-icon/Cover.tsx
+++ b/patterns/validation-icon/Cover.tsx
@@ -42,7 +42,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/patterns/video-background/Cover.tsx b/patterns/video-background/Cover.tsx
index d52bb2a..0962f64 100644
--- a/patterns/video-background/Cover.tsx
+++ b/patterns/video-background/Cover.tsx
@@ -23,13 +23,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/patterns/wizard/Cover.tsx b/patterns/wizard/Cover.tsx
index e4f4cb9..a90e379 100644
--- a/patterns/wizard/Cover.tsx
+++ b/patterns/wizard/Cover.tsx
@@ -46,7 +46,9 @@ const Cover: React.FC<{}> = () => {
                         >
                             1
                         </div>
-                        <div style={{ flex: 1 }}><Line /></div>
+                        <div style={{ flex: 1 }}>
+                            <Line />
+                        </div>
                     </div>
                     <div
                         style={{
@@ -56,7 +58,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 +76,9 @@ const Cover: React.FC<{}> = () => {
                         >
                             2
                         </div>
-                        <div style={{ flex: 1 }}><Line /></div>
+                        <div style={{ flex: 1 }}>
+                            <Line />
+                        </div>
                     </div>
                     <div
                         style={{
@@ -82,7 +88,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/patterns/zigzag-timeline/Cover.tsx b/patterns/zigzag-timeline/Cover.tsx
index 731839a..540dc6f 100644
--- a/patterns/zigzag-timeline/Cover.tsx
+++ b/patterns/zigzag-timeline/Cover.tsx
@@ -43,9 +43,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 +67,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/patterns/zigzag-timeline/zigzag-timeline.css b/patterns/zigzag-timeline/zigzag-timeline.css
index 46cbfde..5e45f4f 100644
--- a/patterns/zigzag-timeline/zigzag-timeline.css
+++ b/patterns/zigzag-timeline/zigzag-timeline.css
@@ -8,7 +8,7 @@
     position: relative;
 
     /* Border */
-    border-bottom: 1px solid #71717A;
+    border-bottom: 1px solid #71717a;
 
     /* Take full width */
     width: 100%;
@@ -16,7 +16,7 @@
 
 .zigzag-timeline__milestone {
     /* Absolute position */
-    position: absolute;    
+    position: absolute;
     top: 50%;
 
     /* Circle it */
@@ -25,24 +25,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/placeholders/Block.tsx b/placeholders/Block.tsx
index 33113bb..35680ab 100644
--- a/placeholders/Block.tsx
+++ b/placeholders/Block.tsx
@@ -29,8 +29,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 +52,7 @@ const Block: React.FC<BlockProps> = ({
                             />
                         </div>
                     );
-                })
-            }
+                })}
         </div>
     );
 };
diff --git a/placeholders/BrowserFrame.tsx b/placeholders/BrowserFrame.tsx
index c77d4d9..a406012 100644
--- a/placeholders/BrowserFrame.tsx
+++ b/placeholders/BrowserFrame.tsx
@@ -4,27 +4,26 @@
  */
 
 import * as React from 'react';
+import { Window } from '@1milligram/design';
 
 import { Code } from '../components/Code';
 
 interface BrowserFrameProps {
     css: string;
-    html: string;    
+    html: string;
 }
 
 const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
     return (
-        <>
+        <Window>
             <div className="demo__html">
                 <Code className="lang-html">{html}</Code>
             </div>
             <div className="demo__css">
                 <Code className="lang-css">{css}</Code>
             </div>
-            <div className="demo__live">
-                {children}
-            </div>
-        </>
+            <div className="demo__live">{children}</div>
+        </Window>
     );
 };
 
diff --git a/placeholders/Circle.tsx b/placeholders/Circle.tsx
index 228d1bc..8e1f71c 100644
--- a/placeholders/Circle.tsx
+++ b/placeholders/Circle.tsx
@@ -10,10 +10,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/placeholders/Line.tsx b/placeholders/Line.tsx
index 4e6560c..5ce76a4 100644
--- a/placeholders/Line.tsx
+++ b/placeholders/Line.tsx
@@ -9,9 +9,7 @@ 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/placeholders/Square.tsx b/placeholders/Square.tsx
index 8af7d2d..4025134 100644
--- a/placeholders/Square.tsx
+++ b/placeholders/Square.tsx
@@ -10,10 +10,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/placeholders/Triangle.tsx b/placeholders/Triangle.tsx
index d4ebe42..43e311a 100644
--- a/placeholders/Triangle.tsx
+++ b/placeholders/Triangle.tsx
@@ -11,11 +11,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/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
index 188aaac..997741f 100644
--- a/styles/blocks/_browser-frame.scss
+++ b/styles/blocks/_browser-frame.scss
@@ -4,11 +4,10 @@
  */
 
 .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/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/styles/index.scss b/styles/index.scss
index 0c41a96..8619a0d 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,7 +1,9 @@
 @import './reset';
 
 // Blocks
-@import 'blocks/_browser-frame';
+@import 'blocks/ad';
+@import 'blocks/browser-frame';
+@import 'blocks/code';
 @import 'blocks/cover';
 @import 'blocks/footer';
 @import 'blocks/header';
@@ -28,4 +30,4 @@
 @import 'patterns/three-dimensions-card';
 @import 'patterns/tooltip';
 @import 'patterns/tree-diagram';
-@import 'patterns/zigzag-timeline';
\ No newline at end of file
+@import 'patterns/zigzag-timeline';
diff --git a/styles/pages/_home.scss b/styles/pages/_home.scss
index 69d62a9..76a3429 100644
--- a/styles/pages/_home.scss
+++ b/styles/pages/_home.scss
@@ -25,4 +25,4 @@
 .page-home__collection {
     display: flex;
     flex-wrap: wrap;
-}
\ No newline at end of file
+}
diff --git a/styles/patterns/_concave-corners.scss b/styles/patterns/_concave-corners.scss
index c7155ae..0c6b66e 100644
--- a/styles/patterns/_concave-corners.scss
+++ b/styles/patterns/_concave-corners.scss
@@ -4,13 +4,13 @@
  */
 
 :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 +23,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 +39,7 @@
 }
 
 .concave-corners__corner--tr {
-    /* Position */ 
+    /* Position */
     right: 0;
     top: 0;
 
@@ -63,4 +63,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
index b12883d..c59c774 100644
--- a/styles/patterns/_dropcap.scss
+++ b/styles/patterns/_dropcap.scss
@@ -10,5 +10,5 @@
     font-weight: 700;
     line-height: 1;
     margin: 0 8px 0 0;
-    padding: 0 8px; 
+    padding: 0 8px;
 }
diff --git a/styles/patterns/_floating-label.scss b/styles/patterns/_floating-label.scss
index 9fef476..98e4193 100644
--- a/styles/patterns/_floating-label.scss
+++ b/styles/patterns/_floating-label.scss
@@ -8,7 +8,7 @@
 }
 
 .p-floating-container input:not(:placeholder-shown) + label {
-    background: #FFF;
+    background: #fff;
     transform: translate(0, -50%);
     opacity: 1;
 }
diff --git a/styles/patterns/_folder-structure.scss b/styles/patterns/_folder-structure.scss
index 502cec5..9117cdc 100644
--- a/styles/patterns/_folder-structure.scss
+++ b/styles/patterns/_folder-structure.scss
@@ -21,9 +21,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 +35,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/styles/patterns/_inverted-corners.scss b/styles/patterns/_inverted-corners.scss
index b9b022b..7a64565 100644
--- a/styles/patterns/_inverted-corners.scss
+++ b/styles/patterns/_inverted-corners.scss
@@ -4,13 +4,13 @@
  */
 
 :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 +49,5 @@
     justify-content: center;
 
     /* Misc */
-    color: #FFF;
-}
\ No newline at end of file
+    color: #fff;
+}
diff --git a/styles/patterns/_layered-card.scss b/styles/patterns/_layered-card.scss
index 4295d5a..04d7913 100644
--- a/styles/patterns/_layered-card.scss
+++ b/styles/patterns/_layered-card.scss
@@ -10,7 +10,7 @@
 .layered-card::before {
     background: rgba(0, 0, 0, 0.3);
     content: '';
-    
+
     /* Position */
     top: 0;
     left: 0;
diff --git a/styles/patterns/_price-tag.scss b/styles/patterns/_price-tag.scss
index f7be3ec..4972c76 100644
--- a/styles/patterns/_price-tag.scss
+++ b/styles/patterns/_price-tag.scss
@@ -10,7 +10,7 @@
 
 .price-tag {
     background: var(--price-tag-background);
-    color: #FFF;
+    color: #fff;
 
     /* Center the price */
     align-items: center;
@@ -33,11 +33,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 +47,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/_three-dimensions-card.scss b/styles/patterns/_three-dimensions-card.scss
index 41f9ab6..6fcd4a8 100644
--- a/styles/patterns/_three-dimensions-card.scss
+++ b/styles/patterns/_three-dimensions-card.scss
@@ -12,10 +12,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 +31,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/styles/patterns/_tree-diagram.scss b/styles/patterns/_tree-diagram.scss
index 306134e..5c5656f 100644
--- a/styles/patterns/_tree-diagram.scss
+++ b/styles/patterns/_tree-diagram.scss
@@ -14,7 +14,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 +29,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 +47,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/styles/patterns/_zigzag-timeline.scss b/styles/patterns/_zigzag-timeline.scss
index 46cbfde..5e45f4f 100644
--- a/styles/patterns/_zigzag-timeline.scss
+++ b/styles/patterns/_zigzag-timeline.scss
@@ -8,7 +8,7 @@
     position: relative;
 
     /* Border */
-    border-bottom: 1px solid #71717A;
+    border-bottom: 1px solid #71717a;
 
     /* Take full width */
     width: 100%;
@@ -16,7 +16,7 @@
 
 .zigzag-timeline__milestone {
     /* Absolute position */
-    position: absolute;    
+    position: absolute;
     top: 50%;
 
     /* Circle it */
@@ -25,24 +25,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 041f562..5f93c3d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,32 +1,22 @@
 {
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "target": "esnext",
-    "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": [
-    "node_modules"
-  ]
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "esModuleInterop": true,
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "target": "esnext",
+        "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": ["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/randomFromArray.ts b/utils/randomFromArray.ts
index c71f34f..2fcf84e 100644
--- a/utils/randomFromArray.ts
+++ b/utils/randomFromArray.ts
@@ -1,3 +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
index a17f775..b7e0c30 100644
--- a/utils/randomIterms.ts
+++ b/utils/randomIterms.ts
@@ -4,11 +4,9 @@ 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;
+            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];
-};
+}