diff --git a/contents/_includes/patterns/radio-button-group.njk b/contents/_includes/patterns/radio-button-group.njk
new file mode 100644
index 0000000..2d02215
--- /dev/null
+++ b/contents/_includes/patterns/radio-button-group.njk
@@ -0,0 +1,14 @@
+<div class="radio-button-group">
+    <label class="radio-button-group__label">
+        <input type="radio" class="radio-button-group__input" /> S
+    </label>
+    <label class="radio-button-group__label radio-button-group__label--selected">
+        <input type="radio" class="radio-button-group__input" /> M
+    </label>
+    <label class="radio-button-group__label">
+        <input type="radio" class="radio-button-group__input" /> L
+    </label>
+    <label class="radio-button-group__label">
+        <input type="radio" class="radio-button-group__input" /> XL
+    </label>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 6ef6110..bf31725 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -93,6 +93,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Custom radio button" %}{% include "patterns/custom-radio-button.njk" %}{% endpattern %}
             {% pattern "Floating label" %}{% include "patterns/floating-label.njk" %}{% endpattern %}
             {% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %}
+            {% pattern "Radio button group" %}{% include "patterns/radio-button-group.njk" %}{% endpattern %}
             {% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %}
             {% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %}
             {% pattern "Search box" %}{% include "patterns/search-box.njk" %}{% endpattern %}
diff --git a/contents/radio-button-group.md b/contents/radio-button-group.md
new file mode 100644
index 0000000..b94ff6d
--- /dev/null
+++ b/contents/radio-button-group.md
@@ -0,0 +1,76 @@
+---
+layout: layouts/post.njk
+title: Radio button group
+description: Create a radio button group with CSS flexbox
+keywords: css flexbox, css radio button
+---
+
+## HTML
+
+```html
+<div class="radio-button-group">
+    <!-- Each radio item -->
+    <label class="radio-button-group__label">
+        <!-- The radio input -->
+        <input type="radio" class="radio-button-group__input" />
+
+        <!-- The text -->
+        ...
+    </label>
+
+    <!-- Selected item -->
+    <label class="radio-button-group__label radio-button-group__label--selected">
+        ...
+    </label>
+
+    <!-- Repeat other items -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.radio-button-group {
+    display: flex;
+
+    /* Border */
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    height: 2rem;
+}
+
+.radio-button-group__label {
+    /* Center the content */
+    align-items: center;
+    display: inline-flex;
+
+    border-right: 1px solid #d1d5db;
+    padding: 0.5rem;
+
+    /* For not selected radio */
+    background-color: transparent;
+    color: #ccc;
+}
+
+.radio-button-group__label:last-child {
+    /* Remove the right border from the last label */
+    border-right-color: transparent;
+}
+
+.radio-button-group__label--selected {
+    /* For selected radio */
+    background-color: #3b82f6;
+    color: #fff;
+
+    margin-top: -1px;
+    margin-bottom: -1px;
+}
+
+.radio-button-group__input {
+    /* Hide it */
+    display: none;
+}
+```
+
+{% demo %}{% include "patterns/radio-button-group.njk" %}{% enddemo %}
diff --git a/pages/radio-button-group/index.tsx b/pages/radio-button-group/index.tsx
deleted file mode 100644
index bd97835..0000000
--- a/pages/radio-button-group/index.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-interface RadioProps {
-    value: string;
-}
-
-const Details: React.FC<{}> = () => {
-    const [selectedValue, setSelectedValue] = React.useState('1');
-
-    const Radio: React.FC<RadioProps> = ({ value, children }) => {
-        const click = () => setSelectedValue(value);
-
-        return (
-            <label
-                htmlFor="radio-button-group"
-                style={{
-                    alignItems: 'center',
-                    backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
-                    cursor: 'pointer',
-                    display: 'inline-flex',
-                    padding: '8px',
-                }}
-            >
-                <input
-                    id="radio-button-group"
-                    type="radio"
-                    name="option"
-                    value={value}
-                    style={{ display: 'none' }}
-                    onChange={click}
-                />
-                {children}
-            </label>
-        );
-    };
-
-    return (
-        <PatternLayout pattern={Pattern.RadioButtonGroup}>
-            <Head>
-                <meta name="description" content="Create a radio button group with CSS flexbox" />
-                <meta name="og:description" content="Create a radio button group with CSS flexbox" />
-                <meta name="twitter:description" content="Create a radio button group with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css radio button" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- Each radio item -->
-    <label class="container__label">
-        <!-- The radio input -->
-        <input type="radio" class="container__input" />
-
-        <!-- The text -->
-        ...
-    </label>
-
-    <!-- Repeat other items -->
-    ...
-</div>
-`}
-                css={`
-                    .container {
-                        display: flex;
-
-                        /* Border */
-                        border: 1px solid #d1d5db;
-                        border-radius: 4px;
-                        height: 32px;
-                    }
-
-                    .container__label {
-                        /* Center the content */
-                        align-items: center;
-                        display: inline-flex;
-
-                        border-right: 1px solid #d1d5db;
-                        padding: 8px;
-
-                        /* For not selected radio */
-                        background-color: transparent;
-                        color: #ccc;
-                    }
-
-                    .container__label:last-child {
-                        /* Remove the right border from the last label */
-                        border-right-color: transparent;
-                    }
-
-                    .container__label--selected {
-                        /* For selected radio */
-                        background-color: #00449e;
-                        color: #fff;
-                    }
-
-                    .container__input {
-                        /* Hide it */
-                        display: none;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        className="p-radio-button-group"
-                        style={{
-                            border: '1px solid #d1d5db',
-                            borderRadius: '4px',
-                            display: 'flex',
-                            height: '32px',
-                        }}
-                    >
-                        <Radio value="1">
-                            <div style={{ width: '80px' }}>
-                                <Rectangle />
-                            </div>
-                        </Radio>
-                        <Radio value="2">
-                            <div style={{ width: '120px' }}>
-                                <Rectangle />
-                            </div>
-                        </Radio>
-                        <Radio value="3">
-                            <div style={{ width: '100px' }}>
-                                <Rectangle />
-                            </div>
-                        </Radio>
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/radio-button-group/Cover.tsx b/patterns/radio-button-group/Cover.tsx
deleted file mode 100644
index c0efda9..0000000
--- a/patterns/radio-button-group/Cover.tsx
+++ /dev/null
@@ -1,51 +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={{
-                        border: '1px solid #d1d5db',
-                        borderRadius: '4px',
-                        display: 'flex',
-                        height: '24px',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: '#00449E',
-                            borderRight: '1px solid #d1d5db',
-                            flex: 1,
-                        }}
-                    />
-                    <div
-                        style={{
-                            borderRight: '1px solid #d1d5db',
-                            flex: 1,
-                        }}
-                    />
-                    <div
-                        style={{
-                            flex: 1,
-                        }}
-                    />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index c3e76db..702df5c 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -59,6 +59,7 @@
 @import './patterns/property-list';
 @import './patterns/questions-and-answers';
 @import './patterns/radial-progress-bar';
+@import './patterns/radio-button-group';
 @import './patterns/radio-switch';
 @import './patterns/rating';
 @import './patterns/resizable-element';
diff --git a/styles/patterns/_radio-button-group.scss b/styles/patterns/_radio-button-group.scss
new file mode 100644
index 0000000..f5fcf14
--- /dev/null
+++ b/styles/patterns/_radio-button-group.scss
@@ -0,0 +1,40 @@
+.radio-button-group {
+    display: flex;
+
+    /* Border */
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    height: 2rem;
+}
+
+.radio-button-group__label {
+    /* Center the content */
+    align-items: center;
+    display: inline-flex;
+
+    border-right: 1px solid #d1d5db;
+    padding: 0.5rem;
+
+    /* For not selected radio */
+    background-color: transparent;
+    color: #ccc;
+}
+
+.radio-button-group__label:last-child {
+    /* Remove the right border from the last label */
+    border-right-color: transparent;
+}
+
+.radio-button-group__label--selected {
+    /* For selected radio */
+    background-color: #3b82f6;
+    color: #fff;
+
+    margin-top: -1px;
+    margin-bottom: -1px;
+}
+
+.radio-button-group__input {
+    /* Hide it */
+    display: none;
+}
\ No newline at end of file