diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 58bb830..0ee4c23 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -19,6 +19,7 @@ enum Pattern {
     DropArea = 'Drop area',
     DropCap = 'Drop cap',
     Dropdown = 'Dropdown',
+    FeatureComparison = 'Feature comparison',
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',
     FloatingLabel = 'Floating label',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 677bf17..db0689a 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -62,7 +62,7 @@ const ExplorePage = () => {
                         textAlign: 'center',
                     }}
                 >
-                    Here is the collection of 63 patterns
+                    Here is the collection of 64 patterns
                 </h2>
                 <div style={{ marginBottom: '32px', textAlign: 'center' }}>
                     All covers you see in this page are made with CSS only. Inspect them! 🎉
@@ -77,6 +77,7 @@ const ExplorePage = () => {
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
                         <CoverCard pattern={Pattern.HolyGrail} />
+                        <CoverCard pattern={Pattern.SameHeightColumns} />
                         <CoverCard pattern={Pattern.Sidebar} />
                         <CoverCard pattern={Pattern.SimpleGrid} />
                         <CoverCard pattern={Pattern.SplitScreen} />
@@ -142,6 +143,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DropArea} />
                         <CoverCard pattern={Pattern.DropCap} />
+                        <CoverCard pattern={Pattern.FeatureComparison} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.InitialAvatar} />
@@ -151,7 +153,6 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.PropertyList} />
                         <CoverCard pattern={Pattern.QuestionsAndAnswers} />
                         <CoverCard pattern={Pattern.Ribbon} />
-                        <CoverCard pattern={Pattern.SameHeightColumns} />
                         <CoverCard pattern={Pattern.Separator} />
                     </div>
                 </section>
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 94c85fb..218443e 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -170,7 +170,7 @@ const HomePage = () => {
                                 marginBottom: '16px',
                             }}
                         >
-                            63 patterns
+                            64 patterns
                         </div>
                         <Link
                             to="/patterns"
diff --git a/client/patterns/feature-comparison/Cover.tsx b/client/patterns/feature-comparison/Cover.tsx
new file mode 100644
index 0000000..7a32afb
--- /dev/null
+++ b/client/patterns/feature-comparison/Cover.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                    width: '100%',
+                }}
+            >
+                <div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
+                    <div style={{ flex: 1, marginRight: '8px' }}>
+                        <Rectangle height={4} />
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }}>
+                        <Circle size={4} />
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }}>
+                        <Circle size={4} />
+                    </div>
+                </div>
+                <div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
+                    <div style={{ flex: 1, marginRight: '8px' }}>
+                        <Rectangle height={4} />
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }} />
+                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }}>
+                        <Circle size={4} />
+                    </div>
+                </div>
+                <div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
+                    <div style={{ flex: 1, marginRight: '8px' }}>
+                        <Rectangle height={4} />
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }}>
+                        <Circle size={4} />
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }} />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx
new file mode 100644
index 0000000..607430b
--- /dev/null
+++ b/client/patterns/feature-comparison/Details.tsx
@@ -0,0 +1,175 @@
+import React from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Feature comparison">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div style={{ width: '60%' }}>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        padding: '12px 0',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div style={{ flex: 1, marginRight: '16px' }}>
+                                        <Rectangle />
+                                    </div>
+                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
+                                        <Rectangle />
+                                    </div>
+                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                        <Rectangle />
+                                    </div>
+                                </div>
+
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        padding: '8px 0',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div style={{ flex: 1, marginRight: '16px' }}>
+                                        <Block numberOfBlocks={4} />
+                                    </div>
+                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
+                                        <Circle size={8} />
+                                    </div>
+                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                        <Circle size={8} />
+                                    </div>
+                                </div>
+
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        padding: '8px 0',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div style={{ flex: 1, marginRight: '16px' }}>
+                                        <Block numberOfBlocks={5} />
+                                    </div>
+                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
+                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
+                                        <Circle size={8} />
+                                    </div>
+                                </div>
+
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        padding: '8px 0',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div style={{ flex: 1, marginRight: '16px' }}>
+                                        <Block numberOfBlocks={4} />
+                                    </div>
+                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
+                                        <Circle size={8} />
+                                    </div>
+                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
+                                </div>
+
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        padding: '8px 0',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div style={{ flex: 1, marginRight: '16px' }}>
+                                        <Block numberOfBlocks={6} />
+                                    </div>
+                                    <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
+                                        <Circle size={8} />
+                                    </div>
+                                    <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    align-items: center;
+    display: flex;
+
+    /* Bottom border */
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+
+    /* Spacing */
+    padding: 12px 0px;
+">
+    <!-- Feature name -->
+    <div style="
+        /* Take available width */
+        flex: 1;
+
+        /* Spacing */
+        margin-right: 16px;
+    ">
+        ...
+    </div>
+
+    <!-- The model -->
+    <div style="
+        /* Center the content */
+        display: flex;
+        justify-content: center;
+
+        /* Spacing */
+        margin-right: 16px;
+    ">
+        <!--
+        For the first row: display the model name (Basic, Pro, etc.)
+        From the second row: display a yes/no icon indicating the feature is available or not
+        -->
+        ...
+    </div>
+
+    <!-- Repeated other models -->
+    ...
+</div>
+
+<!-- Repeated items -->
+...
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
index 02f4094..0f271d0 100644
--- a/client/patterns/feature-list/Details.tsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+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';
@@ -70,6 +72,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index 6c85d61..da4d633 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -141,6 +143,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
         </DetailsLayout>
     );
 };
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 52da664..5f7d88a 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -25,6 +25,7 @@
     <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/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/floating-label</loc></url>