diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 9e8b96f..58bb830 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -8,6 +8,7 @@ enum Pattern {
     Card = 'Card',
     Centering = 'Centering',
     CircularNavigation = 'Circular navigation',
+    CloseButton = 'Close button',
     CookieBanner = 'Cookie banner',
     CornerRibbon = 'Corner ribbon',
     CustomCheckboxButton = 'Custom checkbox button',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 5d4dc49..677bf17 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -62,7 +62,7 @@ const ExplorePage = () => {
                         textAlign: 'center',
                     }}
                 >
-                    Here is the collection of patterns
+                    Here is the collection of 63 patterns
                 </h2>
                 <div style={{ marginBottom: '32px', textAlign: 'center' }}>
                     All covers you see in this page are made with CSS only. Inspect them! 🎉
@@ -135,6 +135,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Card} />
                         <CoverCard pattern={Pattern.Centering} />
+                        <CoverCard pattern={Pattern.CloseButton} />
                         <CoverCard pattern={Pattern.CookieBanner} />
                         <CoverCard pattern={Pattern.CornerRibbon} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 93ccd3b..94c85fb 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -170,7 +170,7 @@ const HomePage = () => {
                                 marginBottom: '16px',
                             }}
                         >
-                            62 patterns
+                            63 patterns
                         </div>
                         <Link
                             to="/patterns"
diff --git a/client/patterns/close-button/Cover.tsx b/client/patterns/close-button/Cover.tsx
new file mode 100644
index 0000000..b78072b
--- /dev/null
+++ b/client/patterns/close-button/Cover.tsx
@@ -0,0 +1,56 @@
+import 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',
+                }}
+            >
+                <button
+                    style={{
+                        backgroundColor: 'transparent',
+                        borderColor: 'transparent',
+                        cursor: 'pointer',
+                        height: '32px',
+                        position: 'relative',
+                        width: '32px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            height: '1px',
+                            left: 0,
+                            position: 'absolute',
+                            top: '50%',
+                            transform: 'translate(0%, -50%) rotate(45deg)',
+                            width: '100%',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            height: '100%',
+                            left: '50%',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'translate(-50%, 0%) rotate(45deg)',
+                            width: '1px',
+                        }}
+                    />
+                </button>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
new file mode 100644
index 0000000..01be7aa
--- /dev/null
+++ b/client/patterns/close-button/Details.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+
+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 title="Close button">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    backgroundColor: 'transparent',
+                                    borderColor: 'transparent',
+                                    cursor: 'pointer',
+                                    height: '32px',
+                                    position: 'relative',
+                                    width: '32px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                        height: '1px',
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: '50%',
+                                        transform: 'translate(0%, -50%) rotate(45deg)',
+                                        width: '100%',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                        height: '100%',
+                                        left: '50%',
+                                        position: 'absolute',
+                                        top: 0,
+                                        transform: 'translate(-50%, 0%) rotate(45deg)',
+                                        width: '1px',
+                                    }}
+                                />
+                            </button>
+                        </div>
+                    )}
+                    source={`
+<button style="
+    /* Reset */
+    background-color: transparent;
+    border-color: transparent;
+
+    /* Cursor */
+    cursor: pointer;
+
+    /* Size */
+    height: 32px;
+    width: 32px;
+
+    /* Used to position the inner */
+    position: relative;
+">
+    <div style="
+        /* Background color */
+        background-color: rgba(0, 0, 0, 0.3);
+
+        /* Position */
+        left: 0px;
+        position: absolute;
+        top: 50%;
+        transform: translate(0%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 1px;
+        width: 100%;
+    " />
+
+    <div style="
+        /* Background color */
+        background-color: rgba(0, 0, 0, 0.3);
+
+        /* Position */
+        left: 50%;
+        position: absolute;
+        top: 0px;
+        transform: translate(-50%, 0%) rotate(45deg);
+
+        /* Size */
+        height: 100%;
+        width: 1px;
+    " />
+</button>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.Modal, Pattern.Notification]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
index 62c97a8..775143f 100644
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -10,6 +11,10 @@ const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Modal">
             <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    You can use the <Link to='/patterns/close-button'>close button</Link> to
+                    represent the button for closing the modal.
+                </div>
                 <BrowserFrame
                     content={(
                         <div
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
index 1554c12..6607bd4 100644
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -9,6 +10,10 @@ const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Notification">
             <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    You can use the <Link to='/patterns/close-button'>close button</Link> to
+                    represent the button for closing the notification.
+                </div>
                 <BrowserFrame
                     content={(
                         <div
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 67453dd..52da664 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -14,6 +14,7 @@
     <url><loc>https://csslayout.io/patterns/card</loc></url>
     <url><loc>https://csslayout.io/patterns/centering</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/cookie-banner</loc></url>
     <url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
     <url><loc>https://csslayout.io/patterns/custom-checkbox-button</loc></url>