diff --git a/contents/_includes/covers/circular-navigation.njk b/contents/_includes/covers/circular-navigation.njk
new file mode 100644
index 0000000..5bdf8a9
--- /dev/null
+++ b/contents/_includes/covers/circular-navigation.njk
@@ -0,0 +1,7 @@
+<div class="circular-navigation">
+    {% for i in range(0, 6) -%}
+    <div class="circular-navigation__circle circular-navigation__circle--{{ i + 1 }}">
+        <div class="circular-navigation__content">{{ i + 1 }}</div>
+    </div>
+    {%- endfor %}
+</div>
\ No newline at end of file
diff --git a/contents/circular-navigation.md b/contents/circular-navigation.md
new file mode 100644
index 0000000..e01008c
--- /dev/null
+++ b/contents/circular-navigation.md
@@ -0,0 +1,73 @@
+---
+layout: layouts/post.njk
+title: Circular navigation
+description: Create a circular navigation with CSS flexbox
+keywords: css circular navigation, css flexbox
+---
+
+## HTML
+
+```html
+<div class="circular-navigation">
+    <!-- The trigger element that will show all circles when user clicks it -->
+    ...
+
+    <!-- A circle menu item -->
+    <div class="circular-navigation__circle">
+        <!-- The content -->
+        <div class="circular-navigation__content">            
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat menu items -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.circular-navigation {
+    position: relative;
+}
+
+.circular-navigation__circle {
+    /* Position */
+    position: absolute;
+    top: 0;
+
+    /*
+    3rem is the distance from the item to the trigger element.
+    Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
+    in case you want to have a total of 6 menu items.
+    The formulation is 360 / numberOfItems * indexOfItem
+    */
+    transform: rotate(0deg) translateX(-3rem);
+
+    /* Must have the same size as the trigger element */
+    height: 2rem;
+    width: 2rem;
+}
+
+.circular-navigation__content {
+    /*
+    Rotate it to make it displayed vertically
+    Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
+    in case you want to have a total of 6 menu items.
+    The formulation is -(360 / numberOfItems * indexOfItem)
+    */
+    transform: rotate(-0deg);
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+}
+```
+
+{% demo %}{% include "covers/circular-navigation.njk" %}{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index ff8aefb..74e4140 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -126,6 +126,7 @@ eleventyExcludeFromCollections: true
         <h2 class="category__name">Navigation</h2>
         <div class="category__posts">
             {% pattern "Breadcrumb" %}{% include "covers/breadcrumb.njk" %}{% endpattern %}
+            {% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/pages/circular-navigation/index.tsx b/pages/circular-navigation/index.tsx
deleted file mode 100644
index 0703484..0000000
--- a/pages/circular-navigation/index.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Square from '../../placeholders/Square';
-
-interface CircularItemProps {
-    degree: number;
-}
-
-const CircularItem: React.FC<CircularItemProps> = ({ degree, children }) => {
-    return (
-        <div
-            style={{
-                backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                borderRadius: '9999px',
-                color: '#FFF',
-                height: '32px',
-                position: 'absolute',
-                top: 0,
-                transform: `rotate(${degree}deg) translateX(-80px)`,
-                width: '32px',
-            }}
-        >
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    height: '100%',
-                    justifyContent: 'center',
-                    transform: `rotate(-${degree}deg)`,
-                    width: '100%',
-                }}
-            >
-                {children}
-            </div>
-        </div>
-    );
-};
-
-const Details: React.FC<{}> = () => {
-    const numItems = 6;
-
-    return (
-        <PatternLayout pattern={Pattern.CircularNavigation}>
-            <Head>
-                <meta name="description" content="Create a circular navigation with CSS flexbox" />
-                <meta name="og:description" content="Create a circular navigation with CSS flexbox" />
-                <meta name="twitter:description" content="Create a circular navigation with CSS flexbox" />
-                <meta name="keywords" content="css circular navigation, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="navigation">
-    <!-- The trigger element that will show all circles when user clicks it -->
-    ...
-
-    <!-- A circle menu item -->
-    <div class="navigation__circle">
-        <!-- The content -->
-        <div class="navigation__content">            
-            ...
-        </div>
-    </div>
-
-    <!-- Repeat menu items -->
-    ...
-</div>
-`}
-                css={`
-                    .navigation {
-                        position: relative;
-                    }
-
-                    .navigation__circle {
-                        /* Position */
-                        position: absolute;
-                        top: 0;
-
-                        /*
-    80px is the distance from the item to the trigger element.
-    Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
-    in case you want to have a total of 6 menu items.
-    The formulation is 360 / numberOfItems * indexOfItem
-    */
-                        transform: rotate(0deg) translateX(-80px);
-
-                        /* Must have the same size as the trigger element */
-                        height: 32px;
-                        width: 32px;
-                    }
-
-                    .navigation__content {
-                        /*
-    Rotate it to make it displayed vertically
-    Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
-    in case you want to have a total of 6 menu items.
-    The formulation is -(360 / numberOfItems * indexOfItem)
-    */
-                        transform: rotate(-0deg);
-
-                        /* Center the content */
-                        align-items: center;
-                        display: flex;
-                        justify-content: center;
-
-                        /* Take full size */
-                        height: 100%;
-                        width: 100%;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div style={{ position: 'relative' }}>
-                        <div style={{ height: '32px', width: '32px' }}>
-                            <Square />
-                        </div>
-                        {Array(numItems)
-                            .fill(0)
-                            .map((_, i) => {
-                                return (
-                                    <CircularItem key={i} degree={(360 / numItems) * i}>
-                                        {i + 1}
-                                    </CircularItem>
-                                );
-                            })}
-                    </div>
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/circular-navigation/Cover.tsx b/patterns/circular-navigation/Cover.tsx
deleted file mode 100644
index 6a7e7dd..0000000
--- a/patterns/circular-navigation/Cover.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div style={{ position: 'relative' }}>
-                    <div
-                        style={{
-                            backgroundColor: '#d1d5db',
-                            borderRadius: '4px',
-                            color: '#FFF',
-                            height: '16px',
-                            width: '16px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                            borderRadius: '9999px',
-                            color: '#FFF',
-                            height: '16px',
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'rotate(0deg) translateX(-32px)',
-                            width: '16px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                            borderRadius: '9999px',
-                            color: '#FFF',
-                            height: '16px',
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'rotate(60deg) translateX(-32px)',
-                            width: '16px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                            borderRadius: '9999px',
-                            color: '#FFF',
-                            height: '16px',
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'rotate(120deg) translateX(-32px)',
-                            width: '16px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                            borderRadius: '9999px',
-                            color: '#FFF',
-                            height: '16px',
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'rotate(180deg) translateX(-32px)',
-                            width: '16px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                            borderRadius: '9999px',
-                            color: '#FFF',
-                            height: '16px',
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'rotate(240deg) translateX(-32px)',
-                            width: '16px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                            borderRadius: '9999px',
-                            color: '#FFF',
-                            height: '16px',
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'rotate(300deg) translateX(-32px)',
-                            width: '16px',
-                        }}
-                    />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index bb893f5..c21bc79 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -22,6 +22,7 @@
 @import './patterns/card';
 @import './patterns/centering';
 @import './patterns/chip';
+@import './patterns/circular-navigation';
 @import './patterns/close-button';
 @import './patterns/color-swatch';
 @import './patterns/concave-corners';
diff --git a/styles/patterns/_circular-navigation.scss b/styles/patterns/_circular-navigation.scss
new file mode 100644
index 0000000..e5d39f9
--- /dev/null
+++ b/styles/patterns/_circular-navigation.scss
@@ -0,0 +1,77 @@
+.circular-navigation {
+    position: relative;
+
+    /* Demo */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    height: 8rem;
+    width: 8rem;
+}
+
+.circular-navigation__circle {
+    /* Position */
+    position: absolute;
+    top: 0;
+
+    /*
+    3rem is the distance from the item to the trigger element.
+    Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
+    in case you want to have a total of 6 menu items.
+    The formulation is 360 / numberOfItems * indexOfItem
+    */
+    transform: rotate(var(--circular-navigation__circle-degree)) translateX(-3rem);
+
+    /* Must have the same size as the trigger element */
+    height: 2rem;
+    width: 2rem;
+
+    /* Demo */
+    background-color: #d1d5db;
+    border-radius: 9999px;
+}
+
+.circular-navigation__content {
+    /*
+    Rotate it to make it displayed vertically
+    Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
+    in case you want to have a total of 6 menu items.
+    The formulation is -(360 / numberOfItems * indexOfItem)
+    */
+    transform: rotate(var(--circular-navigation__content-degree));
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+}
+
+.circular-navigation__circle--1 {
+    --circular-navigation__circle-degree: 0deg;
+    --circular-navigation__content-degree: -0deg;
+}
+.circular-navigation__circle--2 {
+    --circular-navigation__circle-degree: 60deg;
+    --circular-navigation__content-degree: -60deg;
+}
+.circular-navigation__circle--3{
+    --circular-navigation__circle-degree: 120deg;
+    --circular-navigation__content-degree: -120deg;
+}
+.circular-navigation__circle--4 {
+    --circular-navigation__circle-degree: 180deg;
+    --circular-navigation__content-degree: -180deg;
+}
+.circular-navigation__circle--5 {
+    --circular-navigation__circle-degree: 240deg;
+    --circular-navigation__content-degree: -240deg;
+}
+.circular-navigation__circle--6 {
+    --circular-navigation__circle-degree: 300deg;
+    --circular-navigation__content-degree: -300deg;
+}