diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index ff855d0..42b1a97 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -36,6 +36,7 @@ enum Pattern {
     FixedAtCorner = 'Fixed at corner',
     FixedAtSide = 'Fixed at side',
     FloatingLabel = 'Floating label',
+    FolderStructure = 'Folder structure',
     FullBackground = 'Full background',
     FullScreenMenu = 'Full screen menu',
     HolyGrail = 'Holy grail',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index ada3725..3326d05 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -121,6 +121,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.FeatureList} />
                                 <CoverCard pattern={Pattern.FixedAtCorner} />
                                 <CoverCard pattern={Pattern.FixedAtSide} />
+                                <CoverCard pattern={Pattern.FolderStructure} />
                                 <CoverCard pattern={Pattern.FullBackground} />
                                 <CoverCard pattern={Pattern.InitialAvatar} />
                                 <CoverCard pattern={Pattern.KeyboardShortcut} />
diff --git a/client/patterns/folder-structure/Cover.tsx b/client/patterns/folder-structure/Cover.tsx
new file mode 100644
index 0000000..bbeb693
--- /dev/null
+++ b/client/patterns/folder-structure/Cover.tsx
@@ -0,0 +1,130 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Square from '../../placeholders/Square';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '0.5rem',
+                }}
+            >
+                <div>
+                    <div
+                        style={{
+                            padding: '0rem 0rem 0rem 1rem',
+                            position: 'relative',
+                        }}
+                    >
+                        <div
+                            style={{
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '100%',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                            }}
+                        />
+                        <div
+                            style={{
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                left: 0,
+                                position: 'absolute',
+                                top: '0.5rem',
+                                width: '1rem',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                borderRadius: '0.25rem',
+                                height: '1rem',
+                                width: '1rem',
+                            }}
+                        />
+                        <div
+                            style={{
+                                marginLeft: '0.5rem',
+                                padding: '0rem 0rem 0rem 1rem',
+                                position: 'relative',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '50%',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: 0,
+                                }}
+                            />
+                            <div
+                                style={{
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: '0.5rem',
+                                    width: '1rem',
+                                }}
+                            />
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '0.25rem',
+                                    height: '1rem',
+                                    width: '1rem',
+                                }}
+                            />
+                        </div>
+                    </div>
+                    <div
+                        style={{
+                            padding: '0rem 0rem 0rem 1rem',
+                            position: 'relative',
+                        }}
+                    >
+                        <div
+                            style={{
+                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                height: '50%',
+                                left: 0,
+                                position: 'absolute',
+                                top: 0,
+                            }}
+                        />
+                        <div
+                            style={{
+                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                left: 0,
+                                position: 'absolute',
+                                top: '0.5rem',
+                                width: '1rem',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                borderRadius: '0.25rem',
+                                height: '1rem',
+                                width: '1rem',
+                            }}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/folder-structure/Details.tsx b/client/patterns/folder-structure/Details.tsx
new file mode 100644
index 0000000..2c54e7c
--- /dev/null
+++ b/client/patterns/folder-structure/Details.tsx
@@ -0,0 +1,155 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Square from '../../placeholders/Square';
+import './folder-structure.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.FolderStructure}>
+            <Helmet>
+                <meta name="description" content="Create a folder structure with CSS" />
+                <meta name="keywords" content="css folder structure, css folder tree" />
+            </Helmet>
+            <BrowserFrame
+html={`
+<div className="folder-structure">
+    <ul>
+        <li>
+            <!-- Content -->
+            ...
+
+            <!-- Sub items -->
+            <ul>
+                <li>
+                    <!-- Content -->
+                    ...
+
+                    <!-- Sub items -->
+                    <ul>
+                        <li>...</li>
+                        <li>...</li>
+                        ...
+                    </ul>
+                </li>
+                <li>...</li>
+                ...
+            </ul>
+        </li>
+        
+        <!-- Repeat other items -->
+        ...
+    </ul>
+</div>
+`}
+css={`
+:root {
+    --folder-structure-item-height: 1rem;
+    --folder-structure-item-margin-left: 2rem;
+    --folder-structure-item-padding-top: 1rem;
+}
+
+.folder-structure ul {
+    /* Reset */
+    list-style-type: none;
+    margin: 0;
+}
+
+.folder-structure li {
+    padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
+    position: relative;
+}
+
+.folder-structure li::before {
+    border-left: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+    
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
+
+    /* Size */
+    height: 100%;
+}
+
+.folder-structure li::after {
+    border-bottom: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+    transform: translate(-100%, 0);
+
+    /* Size */
+    width: var(--folder-structure-item-margin-left);
+}
+
+/* Remove the border from the last item */
+.folder-structure li:last-child::before {
+    height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+}
+`}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '0.5rem',
+                    }}
+                >
+                    <div className="folder-structure">
+                        <ul>
+                            <li>
+                                <Square size='1rem' />
+                                <ul>
+                                    <li><Square size='1rem' /></li>
+                                </ul>
+                            </li>
+                            <li>
+                                <Square size='1rem' />
+                                <ul>
+                                    <li>
+                                        <Square size='1rem' />
+                                        <ul>
+                                            <li><Square size='1rem' /></li>
+                                            <li><Square size='1rem' /></li>
+                                            <li><Square size='1rem' /></li>
+                                        </ul>
+                                    </li>
+                                    <li><Square size='1rem' /></li>
+                                    <li>
+                                        <Square size='1rem' />
+                                        <ul>
+                                            <li><Square size='1rem' /></li>
+                                            <li><Square size='1rem' /></li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li><Square size='1rem' /></li>
+                        </ul>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <RelatedPatterns patterns={[Pattern.TreeDiagram]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/folder-structure/folder-structure.css b/client/patterns/folder-structure/folder-structure.css
new file mode 100644
index 0000000..502cec5
--- /dev/null
+++ b/client/patterns/folder-structure/folder-structure.css
@@ -0,0 +1,54 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --folder-structure-item-height: 1rem;
+    --folder-structure-item-margin-left: 2rem;
+    --folder-structure-item-padding-top: 1rem;
+}
+
+.folder-structure ul {
+    /* Reset */
+    list-style-type: none;
+    margin: 0;
+}
+
+.folder-structure li {
+    padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
+    position: relative;
+}
+
+.folder-structure li::before {
+    border-left: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+    
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
+
+    /* Size */
+    height: 100%;
+}
+
+.folder-structure li::after {
+    border-bottom: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+    transform: translate(-100%, 0);
+
+    /* Size */
+    width: var(--folder-structure-item-margin-left);
+}
+
+/* Remove the border from the last item */
+.folder-structure li:last-child::before {
+    height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+}
diff --git a/client/patterns/tree-diagram/Details.tsx b/client/patterns/tree-diagram/Details.tsx
index 5439ed7..fe77ba8 100644
--- a/client/patterns/tree-diagram/Details.tsx
+++ b/client/patterns/tree-diagram/Details.tsx
@@ -6,6 +6,7 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -13,18 +14,13 @@ import Square from '../../placeholders/Square';
 import './tree-diagram.css';
 
 const Details: React.FC<{}> = () => {
-    const [value, setValue] = React.useState(900);
-    const decrease = () => setValue(value - 1);
-    const increase = () => setValue(value + 1);
-
     return (
         <DetailsLayout pattern={Pattern.TreeDiagram}>
             <Helmet>
                 <meta name="description" content="Create a tree diagram with CSS" />
                 <meta name="keywords" content="css sitemap, css tree diagram" />
             </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
+            <BrowserFrame
 html={`
 <div className="tree-diagram">
     <ul>
@@ -129,56 +125,57 @@ li.tree-diagram__root::before {
     border-right: none;
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '0.5rem',
+                    }}
                 >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '0.5rem',
-                        }}
-                    >
-                        <div className="tree-diagram">
-                            <ul>
-                                <li className="tree-diagram__root">
-                                    <Square size='2.5rem' />
-                                    <ul>
-                                        <li>
-                                            <Square size='2rem' />
-                                            <ul>
-                                                <li><Square size='1.5rem' /></li>
-                                            </ul>
-                                        </li>
-                                        <li>
-                                            <Square size='2rem' />
-                                            <ul>
-                                                <li>
-                                                    <Square size='1.5rem' />
-                                                    <ul>
-                                                        <li><Square size='1rem' /></li>
-                                                        <li><Square size='1rem' /></li>
-                                                        <li><Square size='1rem' /></li>
-                                                    </ul>
-                                                </li>
-                                                <li><Square size='1.5rem' /></li>
-                                                <li>
-                                                    <Square size='1.5rem' />
-                                                    <ul>
-                                                        <li><Square size='1rem' /></li>
-                                                        <li><Square size='1rem' /></li>
-                                                    </ul>
-                                                </li>
-                                            </ul>
-                                        </li>
-                                        <li><Square size='2rem' /></li>
-                                    </ul>
-                                </li>                                
-                            </ul>
-                        </div>
+                    <div className="tree-diagram">
+                        <ul>
+                            <li className="tree-diagram__root">
+                                <Square size='2.5rem' />
+                                <ul>
+                                    <li>
+                                        <Square size='2rem' />
+                                        <ul>
+                                            <li><Square size='1.5rem' /></li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <Square size='2rem' />
+                                        <ul>
+                                            <li>
+                                                <Square size='1.5rem' />
+                                                <ul>
+                                                    <li><Square size='1rem' /></li>
+                                                    <li><Square size='1rem' /></li>
+                                                    <li><Square size='1rem' /></li>
+                                                </ul>
+                                            </li>
+                                            <li><Square size='1.5rem' /></li>
+                                            <li>
+                                                <Square size='1.5rem' />
+                                                <ul>
+                                                    <li><Square size='1rem' /></li>
+                                                    <li><Square size='1rem' /></li>
+                                                </ul>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li><Square size='2rem' /></li>
+                                </ul>
+                            </li>                                
+                        </ul>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
+
+            <RelatedPatterns patterns={[Pattern.FolderStructure]} />
         </DetailsLayout>
     );
 };
diff --git a/client/placeholders/Rectangle.tsx b/client/placeholders/Rectangle.tsx
index 63479e6..10e4555 100644
--- a/client/placeholders/Rectangle.tsx
+++ b/client/placeholders/Rectangle.tsx
@@ -14,7 +14,7 @@ const Rectangle: React.FC<RectangleProps> = ({ height = 8 }) => {
         <div
             style={{
                 backgroundColor: 'rgba(0, 0, 0, .3)',
-                borderRadius: '2px',
+                borderRadius: '0.25rem',
                 height: `${height}px`,
                 width: '100%',
             }}
diff --git a/public/sitemap.xml b/public/sitemap.xml
index bf2654b..9e0dcfc 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -32,6 +32,7 @@
     <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/fixed-at-side</loc></url>
     <url><loc>https://csslayout.io/patterns/floating-label</loc></url>
+    <url><loc>https://csslayout.io/patterns/folder-structure</loc></url>
     <url><loc>https://csslayout.io/patterns/full-background</loc></url>
     <url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
     <url><loc>https://csslayout.io/patterns/holy-grail</loc></url>