diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index b1f32e8..b810f06 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -16,6 +16,7 @@ enum Pattern {
     DockedAtCorner = 'Docked at corner',
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
+    Drawer = 'Drawer',
     DropArea = 'Drop area',
     DropCap = 'Drop cap',
     Dropdown = 'Dropdown',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 328ec18..664a284 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -62,7 +62,7 @@ const ExplorePage = () => {
                         textAlign: 'center',
                     }}
                 >
-                    Here is the collection of 66 patterns
+                    Here is the collection of 67 patterns
                 </h2>
                 <div style={{ marginBottom: '32px', textAlign: 'center' }}>
                     All covers you see in this page are made with CSS only. Inspect them! 🎉
@@ -93,6 +93,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.CircularNavigation} />
                         <CoverCard pattern={Pattern.DotNavigation} />
+                        <CoverCard pattern={Pattern.Drawer} />
                         <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FullScreenMenu} />
                         <CoverCard pattern={Pattern.Menu} />
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 4b176fb..7fe2d86 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -170,7 +170,7 @@ const HomePage = () => {
                                 marginBottom: '16px',
                             }}
                         >
-                            66 patterns
+                            67 patterns
                         </div>
                         <Link
                             to="/patterns"
diff --git a/client/patterns/drawer/Cover.tsx b/client/patterns/drawer/Cover.tsx
new file mode 100644
index 0000000..ecc4295
--- /dev/null
+++ b/client/patterns/drawer/Cover.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                    height: '100%',
+                    position: 'relative',
+                    width: '100%',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: '#fff',
+                        height: '100%',
+                        left: 0,
+                        padding: '4px',
+                        position: 'absolute',
+                        top: 0,
+                        width: '40%',
+                    }}
+                >
+                    <div style={{ marginBottom: '4px' }}><Line /></div>
+                    <div style={{ marginBottom: '4px' }}><Line /></div>
+                    <div style={{ marginBottom: '4px' }}><Line /></div>
+                    <div style={{ width: '80%' }}><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/drawer/Details.tsx b/client/patterns/drawer/Details.tsx
new file mode 100644
index 0000000..584cf27
--- /dev/null
+++ b/client/patterns/drawer/Details.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Drawer">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    This pattern is also known as off-canvas.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                height: '100%',
+                                position: 'relative',
+                                width: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    height: '100%',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: '#fff',
+                                    height: '100%',
+                                    left: 0,
+                                    padding: '16px',
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '250px',
+                                }}
+                            >
+                                <Block numberOfBlocks={20} />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Container takes full size */
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+
+    z-index: 9999;
+">
+    <!-- Backdrop -->
+    <div style="
+        /* Take full size */
+        height: 100%;
+        left: 0;
+        position: fixed;
+        top: 0;
+        width: 100%;
+
+        /* User still can see the content of main page */
+        background-color: rgba(0, 0, 0, 0.5);
+
+        z-index: -1;
+    " />
+
+    <!-- Sidebar -->
+    <div style="
+        /* Take full height */
+        height: 100%;
+        left: 0;
+        position: fixed;
+        top: 0;
+        width: 200px;
+
+        /* Background */
+        background-color: #fff;
+    ">
+        ...
+    </div>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/placeholders/Frame.tsx b/client/placeholders/Frame.tsx
index e789bff..588872c 100644
--- a/client/placeholders/Frame.tsx
+++ b/client/placeholders/Frame.tsx
@@ -5,7 +5,7 @@ const Frame: React.FC<{}> = ({ children }) => {
         <div
             style={{
                 border: '1px solid rgba(0, 0, 0, 0.3)',
-                borderRadius: '4px',
+                borderRadius: '2px',
                 boxShadow: 'rgba(0, 0, 0, 0.2) 0px 16px 24px -4px, rgba(0, 0, 0, 0.05) 0px 8px 8px -4px',
                 height: '100px',
                 width: '100px',
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 1ced200..b456414 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -22,6 +22,7 @@
     <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>