diff --git a/bin/generateScreenshot.ts b/bin/generateScreenshot.ts
index d3bc33f..0081d4a 100644
--- a/bin/generateScreenshot.ts
+++ b/bin/generateScreenshot.ts
@@ -18,7 +18,7 @@ const main = () => {
         const browser = await puppeteer.launch();    
            
         const page = await browser.newPage();
-        await page.goto(`http://localhost:3000/patterns/${pattern}`);
+        await page.goto(`http://localhost:3000/${pattern}`);
 
         await page.waitForSelector('.demo__live');
         const element = await page.$('.demo__live');
diff --git a/client/components/Heading.tsx b/client/components/Heading.tsx
deleted file mode 100644
index f402640..0000000
--- a/client/components/Heading.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import './heading.css';
-
-interface HeadingProps {
-    title: string;
-}
-
-const Heading: React.FC<HeadingProps> = ({ title }) => {
-    return (
-        <h3 className="heading">{title}</h3>
-    );
-};
-
-export default Heading;
diff --git a/client/components/RelatedPatterns.tsx b/client/components/RelatedPatterns.tsx
deleted file mode 100644
index da38ae7..0000000
--- a/client/components/RelatedPatterns.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import Pattern from '../constants/Pattern';
-import CoverCard from '../../components/CoverCard';
-import Heading from './Heading';
-
-interface RelatedPatternsProps {
-    patterns: Pattern[];
-}
-
-const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
-    return (
-        <section>
-            <Heading title="Related patterns" />
-
-            <div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '24px' }}>
-                {
-                    patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
-                }
-            </div>
-        </section>
-    );
-};
-
-export default RelatedPatterns;
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
deleted file mode 100644
index a45f0f6..0000000
--- a/client/layouts/DetailsLayout.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Ad from '../components/Ad';
-import Product from '../components/Product';
-import { ProductList } from '../constants/ProductList';
-import Pattern from '../constants/Pattern';
-import randomItems from '../helpers/randomIterms';
-import slug from '../../utils/slug';
-import CoverLoader from '../../components/CoverLoader';
-import Layout from './Layout';
-
-interface DetailsLayoutProps {
-    pattern: Pattern;
-}
-
-const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
-    const products = React.useMemo(() => randomItems(ProductList, 3), []);
-    const patternSlug = slug(pattern);
-
-    return (
-        <Layout>
-            <Helmet>
-                <title>CSS Layout ∙ {pattern}</title>
-                <meta name="title" content={`CSS Layout ∙ ${pattern}`} />
-
-                <meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
-                <meta property="og:title" content={`CSS Layout ∙ ${pattern}`} />
-                <meta property="og:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
-
-                <meta property="twitter:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
-                <meta property="twitter:title" content={`CSS Layout ∙ ${pattern}`} />
-                <meta property="twitter:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
-            </Helmet>
-            <div className="hero">
-                <div className="container">
-                    <div className="hero__logo">
-                        <CoverLoader pattern={pattern} />
-                    </div>
-                    <h1 className="hero__heading">{pattern}</h1>
-                </div>
-            </div>
-            <div className="container">
-                <div className="content">
-                    <main className="main">
-                        {children}
-                    </main>
-                    <div className="sidebar">
-                        <div className="sidebar__inner">
-                            <Ad />
-                            {
-                                products.map(product => <Product key={product.name} product={product} />)
-                            }
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
-};
-
-export default DetailsLayout;
diff --git a/components/Code.tsx b/components/Code.tsx
new file mode 100644
index 0000000..6cb88d8
--- /dev/null
+++ b/components/Code.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import theme from 'prism-react-renderer/themes/vsDark';
+
+export const Code = ({ children, className }) => {
+    const lang = className ? className.split('-').pop() : 'js';
+
+    return (
+        <Highlight {...defaultProps} theme={theme} code={children.trim()} language={lang}>
+            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                <pre className={`block-code ${className}`} style={{ ...style }}>
+                    {tokens.map((line, i) => (
+                        <div key={i} {...getLineProps({ line, key: i })}>
+                            {line.map((token, key) => (
+                                <span key={key} {...getTokenProps({ token, key })} />
+                            ))}
+                        </div>
+                    ))}
+                </pre>
+            )}
+        </Highlight>
+    );
+};
diff --git a/components/CoverCard.tsx b/components/CoverCard.tsx
index a956a2c..8769ef5 100644
--- a/components/CoverCard.tsx
+++ b/components/CoverCard.tsx
@@ -139,7 +139,7 @@ export const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
     const Cover = CoverList[pattern];
 
     return (
-        <Link href={`/patterns/${slug(pattern)}`}>
+        <Link href={`/${slug(pattern)}`}>
             <a className="block-cover">
                 <Cover />
                 <h4 className="block-cover__name">
diff --git a/components/RelatedPatterns.tsx b/components/RelatedPatterns.tsx
new file mode 100644
index 0000000..fd71706
--- /dev/null
+++ b/components/RelatedPatterns.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Heading, Spacer } from '@1milligram/design';
+
+import { Pattern } from '../constants/Pattern';
+import { CoverCard } from './CoverCard';
+
+interface RelatedPatternsProps {
+    patterns: Pattern[];
+}
+
+export const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
+    return (
+        <section>
+            <Heading level={2}>See also</Heading>
+
+            <div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '1.5rem' }}>
+                {
+                    patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
+                }
+            </div>
+        </section>
+    );
+};
diff --git a/layouts/DetailsLayout.tsx b/layouts/DetailsLayout.tsx
new file mode 100644
index 0000000..9a72861
--- /dev/null
+++ b/layouts/DetailsLayout.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { Heading, Spacer } from '@1milligram/design';
+
+import { Pattern } from '../constants/Pattern';
+import { slug } from '../utils/slug';
+import { Layout } from './Layout';
+
+interface DetailsLayoutProps {
+    pattern: Pattern;
+}
+
+export const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
+    const patternSlug = slug(pattern);
+
+    return (
+        <Layout title={pattern}>
+            <Head>
+                <title>CSS Layout ∙ {pattern}</title>
+                <meta name="title" content={`${pattern} - CSS Layout`} />
+
+                <meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
+                <meta property="og:title" content={`${pattern} - CSS Layout`} />
+                <meta property="og:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
+
+                <meta property="twitter:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
+                <meta property="twitter:title" content={`${pattern} - CSS Layout`} />
+                <meta property="twitter:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
+            </Head>
+
+            <div className="block-container">
+                <div className="page-home__hero">
+                    <Spacer size="extraLarge" />
+                    <Heading level={1}>{pattern}</Heading>
+                    <Spacer size="large" />
+                </div>
+
+                {children}
+            </div>
+        </Layout>
+    );
+};
diff --git a/pages/accordion/index.tsx b/pages/accordion/index.tsx
index 23d6a77..7fbf2d8 100644
--- a/pages/accordion/index.tsx
+++ b/pages/accordion/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -58,12 +58,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.Accordion}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/arrow-buttons/index.tsx b/pages/arrow-buttons/index.tsx
index 7557c75..1b4ad1e 100644
--- a/pages/arrow-buttons/index.tsx
+++ b/pages/arrow-buttons/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ArrowButtons}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/avatar-list/index.tsx b/pages/avatar-list/index.tsx
index a457c6c..ad9e787 100644
--- a/pages/avatar-list/index.tsx
+++ b/pages/avatar-list/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Avatar: React.FC<{}> = ({ children }) => {
@@ -34,12 +34,12 @@ const Avatar: React.FC<{}> = ({ children }) => {
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.AvatarList}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/avatar/index.tsx b/pages/avatar/index.tsx
index d910415..82691b0 100644
--- a/pages/avatar/index.tsx
+++ b/pages/avatar/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Avatar}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create an avatar component with CSS flexbox" />
                 <meta name="og:description" content="Create an avatar component with CSS flexbox" />
                 <meta name="twitter:description" content="Create an avatar component with CSS flexbox" />
                 <meta name="keywords" content="css avatar, css flexbox" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="avatar">
diff --git a/pages/badge/index.tsx b/pages/badge/index.tsx
index b9164b4..8c7db88 100644
--- a/pages/badge/index.tsx
+++ b/pages/badge/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Badge}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/breadcrumb/index.tsx b/pages/breadcrumb/index.tsx
index d137565..e9be28b 100644
--- a/pages/breadcrumb/index.tsx
+++ b/pages/breadcrumb/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Breadcrumb}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/button-with-icon/index.tsx b/pages/button-with-icon/index.tsx
index fcf1325..3489995 100644
--- a/pages/button-with-icon/index.tsx
+++ b/pages/button-with-icon/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ButtonWithIcon}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/card-layout/index.tsx b/pages/card-layout/index.tsx
index f464b77..05c0ff5 100644
--- a/pages/card-layout/index.tsx
+++ b/pages/card-layout/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.CardLayout}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a card layout with CSS flexbox" />
                 <meta name="og:description" content="Create a card layout with CSS flexbox" />
                 <meta name="twitter:description" content="Create a card layout with CSS flexbox" />
                 <meta name="keywords" content="css card layout, css flexbox, css layout" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="cards">
diff --git a/pages/card/index.tsx b/pages/card/index.tsx
index 5104ac8..d60abfe 100644
--- a/pages/card/index.tsx
+++ b/pages/card/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Card}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a card with CSS flexbox" />
                 <meta name="og:description" content="Create a card with CSS flexbox" />
                 <meta name="twitter:description" content="Create a card with CSS flexbox" />
                 <meta name="keywords" content="css card, css flexbox" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="card">
diff --git a/pages/centering/index.tsx b/pages/centering/index.tsx
index 9cfdbfd..727fe3d 100644
--- a/pages/centering/index.tsx
+++ b/pages/centering/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Centering}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/chip/index.tsx b/pages/chip/index.tsx
index 9c838b8..71340b4 100644
--- a/pages/chip/index.tsx
+++ b/pages/chip/index.tsx
@@ -4,24 +4,24 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { Link } from 'react-router-dom';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import InputChip from './InputChip';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Chip}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/circular-navigation/index.tsx b/pages/circular-navigation/index.tsx
index 5f55b75..4899062 100644
--- a/pages/circular-navigation/index.tsx
+++ b/pages/circular-navigation/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Square from '../../placeholders/Square';
 
@@ -50,12 +50,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.CircularNavigation}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a circular navigation with CSS flexbox" />
                 <meta name="og:description" content="Create a circular navigation with CSS flexbox" />
                 <meta name="twitter:description" content="Create a circular navigation with CSS flexbox" />
                 <meta name="keywords" content="css circular navigation, css flexbox" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/close-button/index.tsx b/pages/close-button/index.tsx
index e99fc6e..87a6600 100644
--- a/pages/close-button/index.tsx
+++ b/pages/close-button/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.CloseButton}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/color-swatch/index.tsx b/pages/color-swatch/index.tsx
index 3fdf9ef..41b15a6 100644
--- a/pages/color-swatch/index.tsx
+++ b/pages/color-swatch/index.tsx
@@ -4,21 +4,21 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ColorSwatch}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a color swatch with CSS flexbox" />
                 <meta name="og:description" content="Create a color swatch with CSS flexbox" />
                 <meta name="twitter:description" content="Create a color swatch with CSS flexbox" />
                 <meta name="keywords" content="css color swatch, css flexbox" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="swatch">
diff --git a/pages/concave-corners/index.tsx b/pages/concave-corners/index.tsx
index 46f4fd3..cab7c7e 100644
--- a/pages/concave-corners/index.tsx
+++ b/pages/concave-corners/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ConcaveCorners}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create concave corners with CSS" />
                 <meta name="og:description" content="Create concave corners with CSS" />
                 <meta name="twitter:description" content="Create concave corners with CSS" />
                 <meta name="keywords" content="css border radius, css concave border radius, css concave corners" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="concave-corners">
diff --git a/pages/cookie-banner/index.tsx b/pages/cookie-banner/index.tsx
index a1d7efe..cea829b 100644
--- a/pages/cookie-banner/index.tsx
+++ b/pages/cookie-banner/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.CookieBanner}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/corner-ribbon/index.tsx b/pages/corner-ribbon/index.tsx
index 4294e43..b1ddbc9 100644
--- a/pages/corner-ribbon/index.tsx
+++ b/pages/corner-ribbon/index.tsx
@@ -4,24 +4,24 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { Link } from 'react-router-dom';
 
 import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.CornerRibbon}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a corner ribbon with CSS flexbox" />
                 <meta name="og:description" content="Create a corner ribbon with CSS flexbox" />
                 <meta name="twitter:description" content="Create a corner ribbon with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css ribbon" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/curved-background/index.tsx b/pages/curved-background/index.tsx
index f099015..c5782e5 100644
--- a/pages/curved-background/index.tsx
+++ b/pages/curved-background/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.CurvedBackground}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/custom-checkbox-button/index.tsx b/pages/custom-checkbox-button/index.tsx
index bfebb40..0fce33c 100644
--- a/pages/custom-checkbox-button/index.tsx
+++ b/pages/custom-checkbox-button/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -64,12 +64,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.CustomCheckboxButton}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/custom-radio-button/index.tsx b/pages/custom-radio-button/index.tsx
index 520f6c9..9aded3e 100644
--- a/pages/custom-radio-button/index.tsx
+++ b/pages/custom-radio-button/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -65,12 +65,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.CustomRadioButton}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/diagonal-section/index.tsx b/pages/diagonal-section/index.tsx
index 28c9f37..b664b24 100644
--- a/pages/diagonal-section/index.tsx
+++ b/pages/diagonal-section/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.DiagonalSection}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/docked-at-corner/index.tsx b/pages/docked-at-corner/index.tsx
index 583e3d1..15f139f 100644
--- a/pages/docked-at-corner/index.tsx
+++ b/pages/docked-at-corner/index.tsx
@@ -4,24 +4,24 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.DockedAtCorner}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Dock an element at corner with CSS" />
                 <meta name="og:description" content="Dock an element at corner with CSS" />
                 <meta name="twitter:description" content="Dock an element at corner with CSS" />
                 <meta name="keywords" content="css docked, css flexbox" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/dot-leader/index.tsx b/pages/dot-leader/index.tsx
index dcb05ad..b80b0fe 100644
--- a/pages/dot-leader/index.tsx
+++ b/pages/dot-leader/index.tsx
@@ -4,12 +4,12 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.DotLeader}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create dot leaders with CSS flexbox" />
                 <meta name="og:description" content="Create dot leaders with CSS flexbox" />
                 <meta name="twitter:description" content="Create dot leaders with CSS flexbox" />
                 <meta name="keywords" content="css dot leader, css flexbox" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/dot-navigation/index.tsx b/pages/dot-navigation/index.tsx
index 7ffcb85..c6140e4 100644
--- a/pages/dot-navigation/index.tsx
+++ b/pages/dot-navigation/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 interface DotProps {
@@ -38,12 +38,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.DotNavigation}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/drawer/index.tsx b/pages/drawer/index.tsx
index 5f72e9d..7f9081a 100644
--- a/pages/drawer/index.tsx
+++ b/pages/drawer/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Drawer}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     This pattern is also known as off-canvas.
diff --git a/pages/drop-area/index.tsx b/pages/drop-area/index.tsx
index 82582f6..11a6943 100644
--- a/pages/drop-area/index.tsx
+++ b/pages/drop-area/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.DropArea}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/drop-cap/index.tsx b/pages/drop-cap/index.tsx
index 6373792..e901dfb 100644
--- a/pages/drop-cap/index.tsx
+++ b/pages/drop-cap/index.tsx
@@ -4,21 +4,21 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import Pattern from '../../constants/Pattern';
+import { Pattern } from '../../constants/Pattern';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.DropCap}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/dropdown/index.tsx b/pages/dropdown/index.tsx
index 5b8ae12..10de112 100644
--- a/pages/dropdown/index.tsx
+++ b/pages/dropdown/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -17,12 +17,12 @@ import Triangle from '../../placeholders/Triangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Dropdown}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Move the mouse over the button to see the dropdown.
diff --git a/pages/fading-long-section/index.tsx b/pages/fading-long-section/index.tsx
index a7ac997..1a1cfcc 100644
--- a/pages/fading-long-section/index.tsx
+++ b/pages/fading-long-section/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.FadingLongSection}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Fading a long section to indicate there is more content.
diff --git a/pages/feature-comparison/index.tsx b/pages/feature-comparison/index.tsx
index 05b1552..0f849c1 100644
--- a/pages/feature-comparison/index.tsx
+++ b/pages/feature-comparison/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.FeatureComparison}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/feature-list/index.tsx b/pages/feature-list/index.tsx
index bf50729..6749aa2 100644
--- a/pages/feature-list/index.tsx
+++ b/pages/feature-list/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.FeatureList}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/fixed-at-corner/index.tsx b/pages/fixed-at-corner/index.tsx
index 376fe0e..251e237 100644
--- a/pages/fixed-at-corner/index.tsx
+++ b/pages/fixed-at-corner/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.FixedAtCorner}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/fixed-at-side/index.tsx b/pages/fixed-at-side/index.tsx
index 3e9e539..a854466 100644
--- a/pages/fixed-at-side/index.tsx
+++ b/pages/fixed-at-side/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.FixedAtSide}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Fix an element at the middle of side with CSS" />
                 <meta name="og:description" content="Fix an element at the middle of side with CSS" />
                 <meta name="twitter:description" content="Fix an element at the middle of side with CSS" />
                 <meta name="keywords" content="css fixed" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/floating-label/index.tsx b/pages/floating-label/index.tsx
index fdb859f..88b7725 100644
--- a/pages/floating-label/index.tsx
+++ b/pages/floating-label/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import './floating-label.css';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import Pattern from '../../constants/Pattern';
+import { Pattern } from '../../constants/Pattern';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.FloatingLabel}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/folder-structure/index.tsx b/pages/folder-structure/index.tsx
index 4c34210..f450e14 100644
--- a/pages/folder-structure/index.tsx
+++ b/pages/folder-structure/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Square from '../../placeholders/Square';
 import './folder-structure.css';
@@ -16,12 +16,12 @@ import './folder-structure.css';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.FolderStructure}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a folder structure with CSS" />
                 <meta name="og:description" content="Create a folder structure with CSS" />
                 <meta name="twitter:description" content="Create a folder structure with CSS" />
                 <meta name="keywords" content="css folder structure, css folder tree" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="folder-structure">
diff --git a/pages/full-background/index.tsx b/pages/full-background/index.tsx
index ff47c62..e92b0f2 100644
--- a/pages/full-background/index.tsx
+++ b/pages/full-background/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.FullBackground}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/full-screen-menu/index.tsx b/pages/full-screen-menu/index.tsx
index 8242e0f..2695c02 100644
--- a/pages/full-screen-menu/index.tsx
+++ b/pages/full-screen-menu/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.FullScreenMenu}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/holy-grail/index.tsx b/pages/holy-grail/index.tsx
index cadf394..5114ba5 100644
--- a/pages/holy-grail/index.tsx
+++ b/pages/holy-grail/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.HolyGrail}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/initial-avatar/index.tsx b/pages/initial-avatar/index.tsx
index 5ba2788..733adfd 100644
--- a/pages/initial-avatar/index.tsx
+++ b/pages/initial-avatar/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { Link } from 'react-router-dom';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.InitialAvatar}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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
diff --git a/pages/input-addon/index.tsx b/pages/input-addon/index.tsx
index bf1a4bd..a9f1ee0 100644
--- a/pages/input-addon/index.tsx
+++ b/pages/input-addon/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.InputAddon}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/inverted-corners/index.tsx b/pages/inverted-corners/index.tsx
index f4d6708..8872413 100644
--- a/pages/inverted-corners/index.tsx
+++ b/pages/inverted-corners/index.tsx
@@ -4,12 +4,12 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 import './inverted-corners.css';
@@ -17,12 +17,12 @@ import './inverted-corners.css';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.InvertedCorners}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create inverted corners with CSS" />
                 <meta name="og:description" content="Create inverted corners with CSS" />
                 <meta name="twitter:description" content="Create inverted corners with CSS" />
                 <meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="inverted-corners">
diff --git a/pages/keyboard-shortcut/index.tsx b/pages/keyboard-shortcut/index.tsx
index cafcff9..6abe5c2 100644
--- a/pages/keyboard-shortcut/index.tsx
+++ b/pages/keyboard-shortcut/index.tsx
@@ -4,12 +4,12 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { Link } from 'react-router-dom';
 
 import Heading from '../../components/Heading';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 interface ItemProps {
@@ -47,12 +47,12 @@ const Item: React.FC<ItemProps> = ({ action, keys }) => {
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.KeyboardShortcut}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/layered-card/index.tsx b/pages/layered-card/index.tsx
index e643dfe..f906f7f 100644
--- a/pages/layered-card/index.tsx
+++ b/pages/layered-card/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import './styles.css';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.LayeredCard}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a layered card with CSS" />
                 <meta name="og:description" content="Create a layered card with CSS" />
                 <meta name="twitter:description" content="Create a layered card with CSS" />
                 <meta name="keywords" content="css layered card" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="layered-card">
diff --git a/pages/lined-paper/index.tsx b/pages/lined-paper/index.tsx
index b6b50b7..f7b9eec 100644
--- a/pages/lined-paper/index.tsx
+++ b/pages/lined-paper/index.tsx
@@ -4,21 +4,21 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.LinedPaper}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/masonry-grid/index.tsx b/pages/masonry-grid/index.tsx
index 9c3d08c..e90c6c2 100644
--- a/pages/masonry-grid/index.tsx
+++ b/pages/masonry-grid/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -17,12 +17,12 @@ import './masonry-grid.css';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.MasonryGrid}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a masonry grid with CSS" />
                 <meta name="og:description" content="Create a masonry grid with CSS" />
                 <meta name="twitter:description" content="Create a masonry grid with CSS" />
                 <meta name="keywords" content="css column-count, css column-gap, css masonry, css masonry grid" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="masonry-grid">
diff --git a/pages/media-object/index.tsx b/pages/media-object/index.tsx
index 64afa34..bf2c2ec 100644
--- a/pages/media-object/index.tsx
+++ b/pages/media-object/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Square from '../../placeholders/Square';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.MediaObject}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/mega-menu/index.tsx b/pages/mega-menu/index.tsx
index 6de8dbd..aa99747 100644
--- a/pages/mega-menu/index.tsx
+++ b/pages/mega-menu/index.tsx
@@ -4,13 +4,13 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import './mega-menu.css';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -19,12 +19,12 @@ import Triangle from '../../placeholders/Triangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.MegaMenu}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/menu/index.tsx b/pages/menu/index.tsx
index 1f8626c..f5fda6d 100644
--- a/pages/menu/index.tsx
+++ b/pages/menu/index.tsx
@@ -4,13 +4,13 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import './menu.css';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
@@ -18,12 +18,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Menu}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/modal/index.tsx b/pages/modal/index.tsx
index bd13a15..ee38a2c 100644
--- a/pages/modal/index.tsx
+++ b/pages/modal/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { Link } from 'react-router-dom';
-import Pattern from '../../constants/Pattern';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Modal}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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
diff --git a/pages/nested-dropdowns/index.tsx b/pages/nested-dropdowns/index.tsx
index 58fadab..3c4d8ec 100644
--- a/pages/nested-dropdowns/index.tsx
+++ b/pages/nested-dropdowns/index.tsx
@@ -4,24 +4,24 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import './nested-dropdowns.css';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.NestedDropdowns}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/notification/index.tsx b/pages/notification/index.tsx
index 99a1c43..0a7f01e 100644
--- a/pages/notification/index.tsx
+++ b/pages/notification/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { Link } from 'react-router-dom';
-import Pattern from '../../constants/Pattern';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -16,12 +16,12 @@ import Circle from '../../placeholders/Circle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Notification}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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
diff --git a/pages/overlay-play-button/index.tsx b/pages/overlay-play-button/index.tsx
index 706c48e..0cd0cf5 100644
--- a/pages/overlay-play-button/index.tsx
+++ b/pages/overlay-play-button/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.OverlayPlayButton}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/pagination/index.tsx b/pages/pagination/index.tsx
index 61e499b..28c4780 100644
--- a/pages/pagination/index.tsx
+++ b/pages/pagination/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Pagination}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/popover-arrow/index.tsx b/pages/popover-arrow/index.tsx
index 6bffa7a..9603cf8 100644
--- a/pages/popover-arrow/index.tsx
+++ b/pages/popover-arrow/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.PopoverArrow}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/presence-indicator/index.tsx b/pages/presence-indicator/index.tsx
index 7848215..13c0cb4 100644
--- a/pages/presence-indicator/index.tsx
+++ b/pages/presence-indicator/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.PresenceIndicator}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/previous-next-buttons/index.tsx b/pages/previous-next-buttons/index.tsx
index cda4f86..9e9f720 100644
--- a/pages/previous-next-buttons/index.tsx
+++ b/pages/previous-next-buttons/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.PreviousNextButtons}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/price-tag/index.tsx b/pages/price-tag/index.tsx
index 6399870..0102c2a 100644
--- a/pages/price-tag/index.tsx
+++ b/pages/price-tag/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import './price-tag.css';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.PriceTag}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/pricing-table/index.tsx b/pages/pricing-table/index.tsx
index ea72d7d..7236bcd 100644
--- a/pages/pricing-table/index.tsx
+++ b/pages/pricing-table/index.tsx
@@ -4,12 +4,12 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 import { Link } from 'react-router-dom';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -18,12 +18,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.PricingTable}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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
diff --git a/pages/progress-bar/index.tsx b/pages/progress-bar/index.tsx
index 175152b..1260623 100644
--- a/pages/progress-bar/index.tsx
+++ b/pages/progress-bar/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
 import useInterval from '../../hooks/useInterval';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -19,12 +19,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.ProgressBar}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/property-list/index.tsx b/pages/property-list/index.tsx
index eece0e4..c0653ca 100644
--- a/pages/property-list/index.tsx
+++ b/pages/property-list/index.tsx
@@ -4,12 +4,12 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
@@ -34,12 +34,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.PropertyList}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/questions-and-answers/index.tsx b/pages/questions-and-answers/index.tsx
index d8c30b7..bec9b14 100644
--- a/pages/questions-and-answers/index.tsx
+++ b/pages/questions-and-answers/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -54,12 +54,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.QuestionsAndAnswers}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/radial-progress-bar/index.tsx b/pages/radial-progress-bar/index.tsx
index f41d4cb..9f735e3 100644
--- a/pages/radial-progress-bar/index.tsx
+++ b/pages/radial-progress-bar/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 interface RadialProgressProps {
@@ -74,12 +74,12 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.RadialProgressBar}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/radio-button-group/index.tsx b/pages/radio-button-group/index.tsx
index 2dae615..14b7444 100644
--- a/pages/radio-button-group/index.tsx
+++ b/pages/radio-button-group/index.tsx
@@ -4,13 +4,13 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import './radio-button-group.css';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -50,12 +50,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.RadioButtonGroup}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/radio-switch/index.tsx b/pages/radio-switch/index.tsx
index 721e7ab..61ee331 100644
--- a/pages/radio-switch/index.tsx
+++ b/pages/radio-switch/index.tsx
@@ -4,12 +4,12 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -18,12 +18,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.RadioSwitch}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/rating/index.tsx b/pages/rating/index.tsx
index 5756dc2..ca8fa33 100644
--- a/pages/rating/index.tsx
+++ b/pages/rating/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Star from './Star';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Rating}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/resizable-element/index.tsx b/pages/resizable-element/index.tsx
index 5c56c43..24ca215 100644
--- a/pages/resizable-element/index.tsx
+++ b/pages/resizable-element/index.tsx
@@ -4,21 +4,21 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ResizableElement}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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
diff --git a/pages/ribbon/index.tsx b/pages/ribbon/index.tsx
index eb9f5ec..9519787 100644
--- a/pages/ribbon/index.tsx
+++ b/pages/ribbon/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Ribbon}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/same-height-columns/index.tsx b/pages/same-height-columns/index.tsx
index 7cf0b39..1a4b264 100644
--- a/pages/same-height-columns/index.tsx
+++ b/pages/same-height-columns/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.SameHeightColumns}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/search-box/index.tsx b/pages/search-box/index.tsx
index 47671fc..c8678d2 100644
--- a/pages/search-box/index.tsx
+++ b/pages/search-box/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.SearchBox}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/separator/index.tsx b/pages/separator/index.tsx
index 786089f..6e3aa49 100644
--- a/pages/separator/index.tsx
+++ b/pages/separator/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Separator}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/sidebar/index.tsx b/pages/sidebar/index.tsx
index 03fe7ee..476a839 100644
--- a/pages/sidebar/index.tsx
+++ b/pages/sidebar/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Sidebar}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
                 <BrowserFrame
diff --git a/pages/simple-grid/index.tsx b/pages/simple-grid/index.tsx
index 842afc1..d0e687d 100644
--- a/pages/simple-grid/index.tsx
+++ b/pages/simple-grid/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.SimpleGrid}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a simple grid with CSS flexbox" />
                 <meta name="og:description" content="Create a simple grid with CSS flexbox" />
                 <meta name="twitter:description" content="Create a simple grid with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <!-- Row -->
diff --git a/pages/slider/index.tsx b/pages/slider/index.tsx
index 239b629..9bb791f 100644
--- a/pages/slider/index.tsx
+++ b/pages/slider/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Slider}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/spin-button/index.tsx b/pages/spin-button/index.tsx
index 9568f69..89c1846 100644
--- a/pages/spin-button/index.tsx
+++ b/pages/spin-button/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
 
@@ -20,12 +20,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.SpinButton}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/split-navigation/index.tsx b/pages/split-navigation/index.tsx
index 6386ab3..ad3128f 100644
--- a/pages/split-navigation/index.tsx
+++ b/pages/split-navigation/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.SplitNavigation}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/split-screen/index.tsx b/pages/split-screen/index.tsx
index 6639267..a387a6e 100644
--- a/pages/split-screen/index.tsx
+++ b/pages/split-screen/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.SplitScreen}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/stacked-cards/index.tsx b/pages/stacked-cards/index.tsx
index 3df76bf..4d31544 100644
--- a/pages/stacked-cards/index.tsx
+++ b/pages/stacked-cards/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.StackedCards}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create stacked cards with CSS" />
                 <meta name="og:description" content="Create stacked cards with CSS" />
                 <meta name="twitter:description" content="Create stacked cards with CSS" />
                 <meta name="keywords" content="css card, css stacked cards, css transform rotate" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="container">
diff --git a/pages/stamp-border/index.tsx b/pages/stamp-border/index.tsx
index 03a755c..0cb6d87 100644
--- a/pages/stamp-border/index.tsx
+++ b/pages/stamp-border/index.tsx
@@ -4,21 +4,21 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.StampBorder}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/statistic/index.tsx b/pages/statistic/index.tsx
index dfbe402..cf0887e 100644
--- a/pages/statistic/index.tsx
+++ b/pages/statistic/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
 import { random } from '../../utils/random';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Statistic}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/status-light/index.tsx b/pages/status-light/index.tsx
index 2088f14..26bc963 100644
--- a/pages/status-light/index.tsx
+++ b/pages/status-light/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import Heading from '../../components/Heading';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.StatusLight}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a status light with CSS flexbox" />
                 <meta name="og:description" content="Create a status light with CSS flexbox" />
                 <meta name="twitter:description" content="Create a status light with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css status light" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/stepper-input/index.tsx b/pages/stepper-input/index.tsx
index 528db75..45b5df7 100644
--- a/pages/stepper-input/index.tsx
+++ b/pages/stepper-input/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -23,12 +23,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.StepperInput}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/sticky-footer/index.tsx b/pages/sticky-footer/index.tsx
index 7a4ef89..57cc2f5 100644
--- a/pages/sticky-footer/index.tsx
+++ b/pages/sticky-footer/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -15,12 +15,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.StickyFooter}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/sticky-header/index.tsx b/pages/sticky-header/index.tsx
index acec56b..6697e6a 100644
--- a/pages/sticky-header/index.tsx
+++ b/pages/sticky-header/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.StickyHeader}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/sticky-sections/index.tsx b/pages/sticky-sections/index.tsx
index dc146f9..b424f54 100644
--- a/pages/sticky-sections/index.tsx
+++ b/pages/sticky-sections/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.StickySections}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/sticky-table-column/index.tsx b/pages/sticky-table-column/index.tsx
index aee55ff..60d708d 100644
--- a/pages/sticky-table-column/index.tsx
+++ b/pages/sticky-table-column/index.tsx
@@ -5,11 +5,11 @@
 
 // tslint:disable:prefer-object-spread
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -18,12 +18,12 @@ const Details: React.FC<{}> = () => {
     const numberOfColumns = 10;
     return (
         <DetailsLayout pattern={Pattern.StickyTableColumn}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/sticky-table-headers/index.tsx b/pages/sticky-table-headers/index.tsx
index 21d7a1f..e4d6164 100644
--- a/pages/sticky-table-headers/index.tsx
+++ b/pages/sticky-table-headers/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -16,12 +16,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.StickyTableHeaders}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/switch/index.tsx b/pages/switch/index.tsx
index 031c11c..3fc6fb8 100644
--- a/pages/switch/index.tsx
+++ b/pages/switch/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -17,12 +17,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.Switch}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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,
diff --git a/pages/tab/index.tsx b/pages/tab/index.tsx
index a3d07ec..326ddf0 100644
--- a/pages/tab/index.tsx
+++ b/pages/tab/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -40,12 +40,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.Tab}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/teardrop/index.tsx b/pages/teardrop/index.tsx
index 4d5ed39..3d72f1c 100644
--- a/pages/teardrop/index.tsx
+++ b/pages/teardrop/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Teardrop}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/three-dimensions-card/index.tsx b/pages/three-dimensions-card/index.tsx
index 10d1257..6f27e68 100644
--- a/pages/three-dimensions-card/index.tsx
+++ b/pages/three-dimensions-card/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import './styles.css';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ThreeDimensionsCard}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a 3D card with CSS" />
                 <meta name="og:description" content="Create a 3D card with CSS" />
                 <meta name="twitter:description" content="Create a 3D card with CSS" />
                 <meta name="keywords" content="css 3D card" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="three-dimensions-card">
diff --git a/pages/timeline/index.tsx b/pages/timeline/index.tsx
index e83ddde..cfe1ce7 100644
--- a/pages/timeline/index.tsx
+++ b/pages/timeline/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -17,12 +17,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Timeline}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a timeline with CSS flexbox" />
                 <meta name="og:description" content="Create a timeline with CSS flexbox" />
                 <meta name="twitter:description" content="Create a timeline with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css timeline" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="container">
diff --git a/pages/toggle-password-visibility/index.tsx b/pages/toggle-password-visibility/index.tsx
index 9367628..fc9a3c7 100644
--- a/pages/toggle-password-visibility/index.tsx
+++ b/pages/toggle-password-visibility/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -16,12 +16,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.TogglePasswordVisibility}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/tooltip/index.tsx b/pages/tooltip/index.tsx
index d2510cb..7aa3030 100644
--- a/pages/tooltip/index.tsx
+++ b/pages/tooltip/index.tsx
@@ -4,13 +4,13 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
 import './tooltip.css';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -18,12 +18,12 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Tooltip}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </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.
diff --git a/pages/tree-diagram/index.tsx b/pages/tree-diagram/index.tsx
index 5556548..f7659c3 100644
--- a/pages/tree-diagram/index.tsx
+++ b/pages/tree-diagram/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Square from '../../placeholders/Square';
 import './tree-diagram.css';
@@ -16,12 +16,12 @@ import './tree-diagram.css';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.TreeDiagram}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a tree diagram with CSS" />
                 <meta name="og:description" content="Create a tree diagram with CSS" />
                 <meta name="twitter:description" content="Create a tree diagram with CSS" />
                 <meta name="keywords" content="css sitemap, css tree diagram" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="tree-diagram">
diff --git a/pages/triangle-buttons/index.tsx b/pages/triangle-buttons/index.tsx
index ed96922..c73b196 100644
--- a/pages/triangle-buttons/index.tsx
+++ b/pages/triangle-buttons/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.TriangleButtons}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/upload-button/index.tsx b/pages/upload-button/index.tsx
index 3fcd714..c8ba22c 100644
--- a/pages/upload-button/index.tsx
+++ b/pages/upload-button/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.UploadButton}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can click the button to choose a file.
diff --git a/pages/validation-icon/index.tsx b/pages/validation-icon/index.tsx
index c001018..af692e1 100644
--- a/pages/validation-icon/index.tsx
+++ b/pages/validation-icon/index.tsx
@@ -4,21 +4,21 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ValidationIcon}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/video-background/index.tsx b/pages/video-background/index.tsx
index 739695e..c829ec7 100644
--- a/pages/video-background/index.tsx
+++ b/pages/video-background/index.tsx
@@ -4,23 +4,23 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.VideoBackground}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     In this pattern, the video is displayed in the background.
diff --git a/pages/voting/index.tsx b/pages/voting/index.tsx
index a8b627a..a9cbbeb 100644
--- a/pages/voting/index.tsx
+++ b/pages/voting/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Head from 'next/head';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { Pattern } from '../../constants/Pattern';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
@@ -18,12 +18,12 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout pattern={Pattern.Voting}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/watermark/index.tsx b/pages/watermark/index.tsx
index f605a28..9ae70af 100644
--- a/pages/watermark/index.tsx
+++ b/pages/watermark/index.tsx
@@ -4,22 +4,22 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Watermark}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/wizard/index.tsx b/pages/wizard/index.tsx
index abe3604..858b771 100644
--- a/pages/wizard/index.tsx
+++ b/pages/wizard/index.tsx
@@ -4,10 +4,10 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -16,12 +16,12 @@ import Line from '../../placeholders/Line';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.Wizard}>
-            <Helmet>
+            <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" />
-            </Helmet>
+            </Head>
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
diff --git a/pages/zigzag-timeline/index.tsx b/pages/zigzag-timeline/index.tsx
index 47fa6f3..2da8843 100644
--- a/pages/zigzag-timeline/index.tsx
+++ b/pages/zigzag-timeline/index.tsx
@@ -4,11 +4,11 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
+import Head from 'next/head';
+import { Pattern } from '../../constants/Pattern';
 
-import RelatedPatterns from '../../components/RelatedPatterns';
-import DetailsLayout from '../../layouts/DetailsLayout';
+import { RelatedPatterns } from '../../components/RelatedPatterns';
+import { DetailsLayout } from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -18,12 +18,12 @@ import './zigzag-timeline.css';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ZigzagTimeline}>
-            <Helmet>
+            <Head>
                 <meta name="description" content="Create a zigzag timeline" />
                 <meta name="og:description" content="Create a zigzag timeline" />
                 <meta name="twitter:description" content="Create a zigzag timeline" />
                 <meta name="keywords" content="css timeline, css zigzag timeline" />
-            </Helmet>
+            </Head>
             <BrowserFrame
 html={`
 <div class="zigzag-timeline__item">
diff --git a/placeholders/Block.tsx b/placeholders/Block.tsx
index cec62ae..33113bb 100644
--- a/placeholders/Block.tsx
+++ b/placeholders/Block.tsx
@@ -5,7 +5,7 @@
 
 import * as React from 'react';
 
-import random from '../helpers/random';
+import { random } from '../utils/random';
 
 interface BlockProps {
     backgroundColor?: string;
diff --git a/placeholders/BrowserFrame.tsx b/placeholders/BrowserFrame.tsx
index 6c4ef83..c77d4d9 100644
--- a/placeholders/BrowserFrame.tsx
+++ b/placeholders/BrowserFrame.tsx
@@ -5,8 +5,7 @@
 
 import * as React from 'react';
 
-import SampleCode from '../components/SampleCode';
-import './browserFrame.css';
+import { Code } from '../components/Code';
 
 interface BrowserFrameProps {
     css: string;
@@ -17,10 +16,10 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
     return (
         <>
             <div className="demo__html">
-                <SampleCode fullHeight={true} lang="html" code={html} />
+                <Code className="lang-html">{html}</Code>
             </div>
             <div className="demo__css">
-                <SampleCode fullHeight={true} lang="css" code={css} />
+                <Code className="lang-css">{css}</Code>
             </div>
             <div className="demo__live">
                 {children}
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 81de73a..535ae92 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,108 +1,107 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
     <url><loc>https://csslayout.io</loc></url>
-    <url><loc>https://csslayout.io/patterns</loc></url>
 
     <!-- Patterns -->
-    <url><loc>https://csslayout.io/patterns/accordion</loc></url>
-    <url><loc>https://csslayout.io/patterns/arrow-buttons</loc></url>
-    <url><loc>https://csslayout.io/patterns/avatar</loc></url>
-    <url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
-    <url><loc>https://csslayout.io/patterns/badge</loc></url>
-    <url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
-    <url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
-    <url><loc>https://csslayout.io/patterns/card</loc></url>
-    <url><loc>https://csslayout.io/patterns/card-layout</loc></url>
-    <url><loc>https://csslayout.io/patterns/centering</loc></url>
-    <url><loc>https://csslayout.io/patterns/chip</loc></url>
-    <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
-    <url><loc>https://csslayout.io/patterns/close-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/color-swatch</loc></url>
-    <url><loc>https://csslayout.io/patterns/concave-corners</loc></url>
-    <url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
-    <url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
-    <url><loc>https://csslayout.io/patterns/curved-background</loc></url>
-    <url><loc>https://csslayout.io/patterns/custom-checkbox-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/custom-radio-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/diagonal-section</loc></url>
-    <url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
-    <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
-    <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
-    <url><loc>https://csslayout.io/patterns/drawer</loc></url>
-    <url><loc>https://csslayout.io/patterns/drop-area</loc></url>
-    <url><loc>https://csslayout.io/patterns/drop-cap</loc></url>
-    <url><loc>https://csslayout.io/patterns/dropdown</loc></url>
-    <url><loc>https://csslayout.io/patterns/fading-long-section</loc></url>
-    <url><loc>https://csslayout.io/patterns/feature-comparison</loc></url>
-    <url><loc>https://csslayout.io/patterns/feature-list</loc></url>
-    <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
-    <url><loc>https://csslayout.io/patterns/fixed-at-side</loc></url>
-    <url><loc>https://csslayout.io/patterns/floating-label</loc></url>
-    <url><loc>https://csslayout.io/patterns/folder-structure</loc></url>
-    <url><loc>https://csslayout.io/patterns/full-background</loc></url>
-    <url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
-    <url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
-    <url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>
-    <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
-    <url><loc>https://csslayout.io/patterns/inverted-corners</loc></url>
-    <url><loc>https://csslayout.io/patterns/keyboard-shortcut</loc></url>
-    <url><loc>https://csslayout.io/patterns/layered-card</loc></url>
-    <url><loc>https://csslayout.io/patterns/lined-paper</loc></url>
-    <url><loc>https://csslayout.io/patterns/masonry-grid</loc></url>
-    <url><loc>https://csslayout.io/patterns/media-object</loc></url>
-    <url><loc>https://csslayout.io/patterns/mega-menu</loc></url>
-    <url><loc>https://csslayout.io/patterns/menu</loc></url>
-    <url><loc>https://csslayout.io/patterns/modal</loc></url>
-    <url><loc>https://csslayout.io/patterns/nested-dropdowns</loc></url>
-    <url><loc>https://csslayout.io/patterns/notification</loc></url>
-    <url><loc>https://csslayout.io/patterns/overlay-play-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/pagination</loc></url>
-    <url><loc>https://csslayout.io/patterns/popover-arrow</loc></url>
-    <url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
-    <url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
-    <url><loc>https://csslayout.io/patterns/price-tag</loc></url>
-    <url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
-    <url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
-    <url><loc>https://csslayout.io/patterns/property-list</loc></url>
-    <url><loc>https://csslayout.io/patterns/questions-and-answers</loc></url>
-    <url><loc>https://csslayout.io/patterns/radial-progress-bar</loc></url>
-    <url><loc>https://csslayout.io/patterns/radio-button-group</loc></url>
-    <url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
-    <url><loc>https://csslayout.io/patterns/rating</loc></url>
-    <url><loc>https://csslayout.io/patterns/resizable-element</loc></url>
-    <url><loc>https://csslayout.io/patterns/ribbon</loc></url>
-    <url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>
-    <url><loc>https://csslayout.io/patterns/search-box</loc></url>
-    <url><loc>https://csslayout.io/patterns/separator</loc></url>
-    <url><loc>https://csslayout.io/patterns/sidebar</loc></url>
-    <url><loc>https://csslayout.io/patterns/simple-grid</loc></url>
-    <url><loc>https://csslayout.io/patterns/slider</loc></url>
-    <url><loc>https://csslayout.io/patterns/spin-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/split-navigation</loc></url>
-    <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
-    <url><loc>https://csslayout.io/patterns/stacked-cards</loc></url>
-    <url><loc>https://csslayout.io/patterns/stamp-border</loc></url>
-    <url><loc>https://csslayout.io/patterns/statistic</loc></url>
-    <url><loc>https://csslayout.io/patterns/status-light</loc></url>
-    <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-sections</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-table-column</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-table-headers</loc></url>
-    <url><loc>https://csslayout.io/patterns/switch</loc></url>
-    <url><loc>https://csslayout.io/patterns/tab</loc></url>
-    <url><loc>https://csslayout.io/patterns/teardrop</loc></url>
-    <url><loc>https://csslayout.io/patterns/three-dimensions-card</loc></url>
-    <url><loc>https://csslayout.io/patterns/timeline</loc></url>
-    <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
-    <url><loc>https://csslayout.io/patterns/tooltip</loc></url>
-    <url><loc>https://csslayout.io/patterns/tree-diagram</loc></url>
-    <url><loc>https://csslayout.io/patterns/triangle-buttons</loc></url>
-    <url><loc>https://csslayout.io/patterns/upload-button</loc></url>
-    <url><loc>https://csslayout.io/patterns/validation-icon</loc></url>
-    <url><loc>https://csslayout.io/patterns/video-background</loc></url>
-    <url><loc>https://csslayout.io/patterns/voting</loc></url>
-    <url><loc>https://csslayout.io/patterns/watermark</loc></url>
-    <url><loc>https://csslayout.io/patterns/wizard</loc></url>
-    <url><loc>https://csslayout.io/patterns/zigzag-timeline</loc></url>
+    <url><loc>https://csslayout.io/accordion</loc></url>
+    <url><loc>https://csslayout.io/arrow-buttons</loc></url>
+    <url><loc>https://csslayout.io/avatar</loc></url>
+    <url><loc>https://csslayout.io/avatar-list</loc></url>
+    <url><loc>https://csslayout.io/badge</loc></url>
+    <url><loc>https://csslayout.io/breadcrumb</loc></url>
+    <url><loc>https://csslayout.io/button-with-icon</loc></url>
+    <url><loc>https://csslayout.io/card</loc></url>
+    <url><loc>https://csslayout.io/card-layout</loc></url>
+    <url><loc>https://csslayout.io/centering</loc></url>
+    <url><loc>https://csslayout.io/chip</loc></url>
+    <url><loc>https://csslayout.io/circular-navigation</loc></url>
+    <url><loc>https://csslayout.io/close-button</loc></url>
+    <url><loc>https://csslayout.io/color-swatch</loc></url>
+    <url><loc>https://csslayout.io/concave-corners</loc></url>
+    <url><loc>https://csslayout.io/cookie-banner</loc></url>
+    <url><loc>https://csslayout.io/corner-ribbon</loc></url>
+    <url><loc>https://csslayout.io/curved-background</loc></url>
+    <url><loc>https://csslayout.io/custom-checkbox-button</loc></url>
+    <url><loc>https://csslayout.io/custom-radio-button</loc></url>
+    <url><loc>https://csslayout.io/diagonal-section</loc></url>
+    <url><loc>https://csslayout.io/docked-at-corner</loc></url>
+    <url><loc>https://csslayout.io/dot-leader</loc></url>
+    <url><loc>https://csslayout.io/dot-navigation</loc></url>
+    <url><loc>https://csslayout.io/drawer</loc></url>
+    <url><loc>https://csslayout.io/drop-area</loc></url>
+    <url><loc>https://csslayout.io/drop-cap</loc></url>
+    <url><loc>https://csslayout.io/dropdown</loc></url>
+    <url><loc>https://csslayout.io/fading-long-section</loc></url>
+    <url><loc>https://csslayout.io/feature-comparison</loc></url>
+    <url><loc>https://csslayout.io/feature-list</loc></url>
+    <url><loc>https://csslayout.io/fixed-at-corner</loc></url>
+    <url><loc>https://csslayout.io/fixed-at-side</loc></url>
+    <url><loc>https://csslayout.io/floating-label</loc></url>
+    <url><loc>https://csslayout.io/folder-structure</loc></url>
+    <url><loc>https://csslayout.io/full-background</loc></url>
+    <url><loc>https://csslayout.io/full-screen-menu</loc></url>
+    <url><loc>https://csslayout.io/holy-grail</loc></url>
+    <url><loc>https://csslayout.io/initial-avatar</loc></url>
+    <url><loc>https://csslayout.io/input-addon</loc></url>
+    <url><loc>https://csslayout.io/inverted-corners</loc></url>
+    <url><loc>https://csslayout.io/keyboard-shortcut</loc></url>
+    <url><loc>https://csslayout.io/layered-card</loc></url>
+    <url><loc>https://csslayout.io/lined-paper</loc></url>
+    <url><loc>https://csslayout.io/masonry-grid</loc></url>
+    <url><loc>https://csslayout.io/media-object</loc></url>
+    <url><loc>https://csslayout.io/mega-menu</loc></url>
+    <url><loc>https://csslayout.io/menu</loc></url>
+    <url><loc>https://csslayout.io/modal</loc></url>
+    <url><loc>https://csslayout.io/nested-dropdowns</loc></url>
+    <url><loc>https://csslayout.io/notification</loc></url>
+    <url><loc>https://csslayout.io/overlay-play-button</loc></url>
+    <url><loc>https://csslayout.io/pagination</loc></url>
+    <url><loc>https://csslayout.io/popover-arrow</loc></url>
+    <url><loc>https://csslayout.io/presence-indicator</loc></url>
+    <url><loc>https://csslayout.io/previous-next-buttons</loc></url>
+    <url><loc>https://csslayout.io/price-tag</loc></url>
+    <url><loc>https://csslayout.io/pricing-table</loc></url>
+    <url><loc>https://csslayout.io/progress-bar</loc></url>
+    <url><loc>https://csslayout.io/property-list</loc></url>
+    <url><loc>https://csslayout.io/questions-and-answers</loc></url>
+    <url><loc>https://csslayout.io/radial-progress-bar</loc></url>
+    <url><loc>https://csslayout.io/radio-button-group</loc></url>
+    <url><loc>https://csslayout.io/radio-switch</loc></url>
+    <url><loc>https://csslayout.io/rating</loc></url>
+    <url><loc>https://csslayout.io/resizable-element</loc></url>
+    <url><loc>https://csslayout.io/ribbon</loc></url>
+    <url><loc>https://csslayout.io/same-height-columns</loc></url>
+    <url><loc>https://csslayout.io/search-box</loc></url>
+    <url><loc>https://csslayout.io/separator</loc></url>
+    <url><loc>https://csslayout.io/sidebar</loc></url>
+    <url><loc>https://csslayout.io/simple-grid</loc></url>
+    <url><loc>https://csslayout.io/slider</loc></url>
+    <url><loc>https://csslayout.io/spin-button</loc></url>
+    <url><loc>https://csslayout.io/split-navigation</loc></url>
+    <url><loc>https://csslayout.io/split-screen</loc></url>
+    <url><loc>https://csslayout.io/stacked-cards</loc></url>
+    <url><loc>https://csslayout.io/stamp-border</loc></url>
+    <url><loc>https://csslayout.io/statistic</loc></url>
+    <url><loc>https://csslayout.io/status-light</loc></url>
+    <url><loc>https://csslayout.io/stepper-input</loc></url>
+    <url><loc>https://csslayout.io/sticky-footer</loc></url>
+    <url><loc>https://csslayout.io/sticky-header</loc></url>
+    <url><loc>https://csslayout.io/sticky-sections</loc></url>
+    <url><loc>https://csslayout.io/sticky-table-column</loc></url>
+    <url><loc>https://csslayout.io/sticky-table-headers</loc></url>
+    <url><loc>https://csslayout.io/switch</loc></url>
+    <url><loc>https://csslayout.io/tab</loc></url>
+    <url><loc>https://csslayout.io/teardrop</loc></url>
+    <url><loc>https://csslayout.io/three-dimensions-card</loc></url>
+    <url><loc>https://csslayout.io/timeline</loc></url>
+    <url><loc>https://csslayout.io/toggle-password-visibility</loc></url>
+    <url><loc>https://csslayout.io/tooltip</loc></url>
+    <url><loc>https://csslayout.io/tree-diagram</loc></url>
+    <url><loc>https://csslayout.io/triangle-buttons</loc></url>
+    <url><loc>https://csslayout.io/upload-button</loc></url>
+    <url><loc>https://csslayout.io/validation-icon</loc></url>
+    <url><loc>https://csslayout.io/video-background</loc></url>
+    <url><loc>https://csslayout.io/voting</loc></url>
+    <url><loc>https://csslayout.io/watermark</loc></url>
+    <url><loc>https://csslayout.io/wizard</loc></url>
+    <url><loc>https://csslayout.io/zigzag-timeline</loc></url>
 </urlset>
\ No newline at end of file
diff --git a/placeholders/browserFrame.css b/styles/blocks/_browser-frame.scss
similarity index 100%
rename from placeholders/browserFrame.css
rename to styles/blocks/_browser-frame.scss
diff --git a/styles/index.scss b/styles/index.scss
index 6d1b231..0c41a96 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,6 +1,7 @@
 @import './reset';
 
 // Blocks
+@import 'blocks/_browser-frame';
 @import 'blocks/cover';
 @import 'blocks/footer';
 @import 'blocks/header';