diff --git a/docs/scss/components/_modal.scss b/docs/scss/components/_modal.scss
new file mode 100644
index 00000000..f39ce7c5
--- /dev/null
+++ b/docs/scss/components/_modal.scss
@@ -0,0 +1,34 @@
+/**
+ * Docs: Modal
+ */
+
+dialog.example {
+  display: block;
+  z-index: inherit;
+  position: relative;
+  top: inherit;
+  right: inherit;
+  bottom: inherit;
+  left: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  width: inherit;
+  min-width: inherit;
+  height: inherit;
+  min-height: inherit;
+  padding: 0;
+  background-color:inherit;
+
+  article {
+    max-width: inherit;
+  }
+
+  &:not([open]),
+  &[open=false] {
+    display: none;
+  }
+}
+
+.dialog-is-open body > button {
+  filter: blur(0.125rem);
+}
\ No newline at end of file
diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss
index 189822c7..34974616 100644
--- a/docs/scss/layout/_documentation.scss
+++ b/docs/scss/layout/_documentation.scss
@@ -4,8 +4,14 @@
 
 // Docs: Themes
 #themes {
-  button i {
-    font-style: normal;
+  button.theme-switcher {
+    &:first-of-type {
+      --font-weight: bold;
+    }
+    
+    i {
+      font-style: normal;
+    }
   }
 }
 
@@ -115,3 +121,10 @@
 #forms div.grid {
   grid-row-gap: 0;
 }
+
+// Docs: Modal
+#modal {
+  button {
+    --font-weight: bold;
+  }
+}
diff --git a/docs/scss/pico.docs.scss b/docs/scss/pico.docs.scss
index cb4c3729..d4c17f01 100644
--- a/docs/scss/pico.docs.scss
+++ b/docs/scss/pico.docs.scss
@@ -19,5 +19,6 @@
 @import "content/code";
 
 // Components
+@import "components/modal";
 @import "components/nav";
 @import "components/theme-switcher";
diff --git a/docs/src/_sidebar.html b/docs/src/_sidebar.html
index 0676a247..f3d0dc34 100644
--- a/docs/src/_sidebar.html
+++ b/docs/src/_sidebar.html
@@ -43,6 +43,7 @@
       <ul>
         <li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
         <li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
+        <li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
         <li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
         <li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>
       </ul>
diff --git a/docs/src/customization.html b/docs/src/customization.html
index ec7af884..33b8b7ed 100644
--- a/docs/src/customization.html
+++ b/docs/src/customization.html
@@ -23,7 +23,7 @@
           <p>Example: <strong>pick a color!</strong></p>
 
           <article data-theme="generated" aria-label="Generated theme example">
-            <h4><span class="name">Custom theme</span></h4>
+            <h3><span class="name">Custom theme</span></h3>
             <form>
               <div class="grid">
                 <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
@@ -48,7 +48,7 @@
             </footer>
           </article>
           <p>There are 2 ways to customize your version of Pico.css:</p>
-          <h4>Overriding CSS variables</h4>
+          <h3>Overriding CSS variables</h3>
           <p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
 
 <pre><code><em>/* <span class="name"></span>Light scheme (Default) */
@@ -91,7 +91,7 @@
 </code></pre>
 
           <p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
-          <h4>Importing Pico SASS library</h4>
+          <h3>Importing Pico SASS library</h3>
           <p>We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
           <p>Compile the SASS file to CSS to get a custom version of Pico.</p>
 
diff --git a/docs/src/index.html b/docs/src/index.html
index 15ac6cdf..9f338886 100644
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -21,13 +21,13 @@
             <h2>Works without package manager or dependencies 🙂!</h2>
           </hgroup>
           <p>There are 3 ways to get started with pico.css:</p>
-          <h4>Install manually</h4>
+          <h3>Install manually</h3>
           <p><a href="https://github.com/picocss/pico/archive/refs/heads/master.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</p>
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
-          <h4>Install from CDN</h4>
+          <h3>Install from CDN</h3>
           <p>Alternatively, you can use <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>&gt;</code></pre>
-          <h4>Install with NPM</h4>
+          <h3>Install with NPM</h3>
           <pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
           <p>Starter HTML template:</p>
 
diff --git a/docs/src/modal.html b/docs/src/modal.html
new file mode 100644
index 00000000..c6afd51b
--- /dev/null
+++ b/docs/src/modal.html
@@ -0,0 +1,166 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    ${require('./_head.html') 
+      title="Modal" 
+      description="A flexible container with graceful spacings across devices and viewports."
+      canonical="modal.html"
+    }
+  </head>
+
+  <body>
+    ${require('./_nav.html')}
+    
+    <main class="container" id="docs">
+      ${require('./_sidebar.html') active="modal-link"}
+      
+      <div role="document">
+        <section id="modal">
+          <hgroup>
+            <h1>Modal</h1>
+            <h2>The classic modal element with graceful spacings across devices and viewports.</h2>
+          </hgroup>
+
+          <p>Modals are built with <code>&lt;<b>dialog</b>&gt;</code> as a wrapper and <code>&lt;<b>article</b>&gt;</code> as a content container.</p>
+          <p>Inside <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>a</b> <i>class</i>=<u>"close"</u>&gt;</code> is defined to <code><i>float</i>: <u>right</u>;</code> allowing a close icon to be top aligned with a title.</p>
+
+          <dialog class="example" open>
+            <article>
+              <header>
+                <a href="#close" aria-label="Close" class="close" onclick="event.preventDefault()"></a>
+                <p>Modal title</p>
+              </header>
+              <p>
+                Nunc nec ligula a tortor sollicitudin dictum in vel enim. 
+                Quisque facilisis turpis vel eros dictum aliquam et nec turpis. 
+                Sed eleifend a dui nec ullamcorper. 
+                Praesent vehicula lacus ac justo accumsan ullamcorper.
+              </p>
+            </article>
+          </dialog>
+
+<pre><code>&lt;<b>dialog</b> <i>open</i>&gt;
+  &lt;<b>article</b>&gt;
+    &lt;<b>header</b>&gt;
+      &lt;<b>a</b> <i>href</i>=<u>"#close"</u> <i>aria-label</i>=<u>"Close"</u> <i>class</i>=<u>"close"</u>&gt;&lt;/<b>a</b>&gt;
+      Modal title
+    &lt;/<b>header</b>&gt;
+    &lt;<b>p</b>&gt;
+      Nunc nec ligula a tortor sollicitudin dictum in vel enim. 
+      Quisque facilisis turpis vel eros dictum aliquam et nec turpis. 
+      Sed eleifend a dui nec ullamcorper. 
+      Praesent vehicula lacus ac justo accumsan ullamcorper.
+    &lt;/<b>p</b>&gt;
+  &lt;/<b>article</b>&gt;
+&lt;/<b>dialog</b>&gt;</code></pre>
+
+          <p>Inside <code>&lt;<b>footer</b>&gt;</code>, the content is right aligned by default.</p>
+
+          <dialog class="example" open>
+            <article>
+              <h3>Confirm your action!</h3>
+              <p>
+                Mauris non nibh vel nisi sollicitudin malesuada. 
+                Donec ut sagittis erat. Praesent eu eros felis. 
+                Ut consectetur placerat pulvinar.
+              </p>
+              <footer>
+                <a href="#cancel" role="button" class="secondary" onclick="event.preventDefault()">Cancel</a><a href="#confirm" role="button" onclick="event.preventDefault()">Confirm</a>
+              </footer>
+            </article>
+          </dialog>
+
+
+<pre><code>&lt;<b>dialog</b> <i>open</i>&gt;
+  &lt;<b>article</b>&gt;
+    &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
+    &lt;<b>p</b>&gt;
+      Mauris non nibh vel nisi sollicitudin malesuada. 
+      Donec ut sagittis erat. Praesent eu eros felis. 
+      Ut consectetur placerat pulvinar.
+    &lt;/<b>p</b>&gt;
+    &lt;<b>footer</b>&gt;
+      &lt;<b>a</b> <i>href</i>=<u>"#cancel"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Cancel&lt;/<b>a</b>&gt;
+      &lt;<b>a</b> <i>href</i>=<u>"#confirm"</u> <i>role</i>=<u>"button"</u>&gt;Confirm&lt;/<b>a</b>&gt;
+    &lt;/<b>footer</b>&gt;
+  &lt;/<b>article</b>&gt;
+&lt;/<b>dialog</b>&gt;</code></pre>
+
+          <hgroup>
+            <h2>Live demo</h2>
+            <h3>Toggle a modal by clicking the button below.</h3>
+          </hgroup>
+
+          <article>
+            <button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button>
+            <footer class="code">
+
+<pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
+&lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
+  <i>data-target</i>=<u>"modal-example"</u>
+  <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+  Launch demo modal
+&lt;/<b>button</b>&gt;
+
+<em>&lt;!-- Modal --&gt;</em>
+&lt;<b>dialog</b> <i>id</i>=<u>"modal-example"</u>&gt;
+  &lt;<b>article</b>&gt;
+    &lt;<b>a</b> <i>href</i>=<u>"#close"</u>
+      <i>aria-label</i>=<u>"Close"</u>&gt;
+      <i>class</i>=<u>"close"</u>
+      <i>data-target</i>=<u>"modal-example"</u>
+      <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+    &lt;/<b>a</b>&gt;
+    &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
+    &lt;<b>p</b>&gt;
+      Cras sit amet maximus risus. 
+      Pellentesque sodales odio sit amet augue finibus pellentesque. 
+      Nullam finibus risus non semper euismod.
+    &lt;/<b>p</b>&gt;
+    &lt;<b>footer</b>&gt;
+      &lt;<b>a</b> <i>href</i>=<u>"#cancel"</u>
+        <i>role</i>=<u>"button"</u>&gt;
+        <i>class</i>=<u>"secondary"</u>
+        <i>data-target</i>=<u>"modal-example"</u>
+        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        Cancel
+      &lt;/<b>a</b>&gt;
+      &lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
+        <i>role</i>=<u>"button"</u>
+        <i>data-target</i>=<u>"modal-example"</u>
+        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        Confirm
+      &lt;/<b>a</b>&gt;
+    &lt;/<b>footer</b>&gt;
+  &lt;/<b>article</b>&gt;
+&lt;/<b>dialog</b>&gt;</code></pre>
+
+            </footer>
+          </article>
+
+          <p>As Pico focuses on CSS styles, we have not integrated any JavaScript in the library.</p>
+
+        </section>
+
+        ${require('./_footer.html')}
+        
+      </div>
+    </main>
+
+    <dialog id="modal-example">
+      <article>
+        <a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a>
+        <h3>Confirm your action!</h3>
+        <p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p>
+        <footer>
+          <a href="#cancel" role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</a><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)">Confirm</a>
+        </footer>
+      </article>
+    </dialog>
+
+    <script src="js/commons.min.js"></script>
+    <script src="js/modal.min.js"></script>
+    
+    </script>
+  </body>
+</html>
diff --git a/docs/src/themes.html b/docs/src/themes.html
index d60d3f6c..7fccd347 100644
--- a/docs/src/themes.html
+++ b/docs/src/themes.html
@@ -26,7 +26,7 @@
           </article>
           <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code></p>
           <article data-theme="light" aria-label="Forced light theme example">
-            <h4>Light theme</h4>
+            <h3>Light theme</h3>
             <form class="grid">
               <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
               <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
@@ -41,7 +41,7 @@
             </footer>
           </article>
           <article data-theme="dark" aria-label="Forced dark theme example">
-            <h4>Dark theme</h4>
+            <h3>Dark theme</h3>
             <form class="grid">
               <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
               <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
diff --git a/docs/src/typography.html b/docs/src/typography.html
index 6d699488..f866f195 100644
--- a/docs/src/typography.html
+++ b/docs/src/typography.html
@@ -171,7 +171,8 @@
           <p>Blockquote:</p>
           <article aria-label="Blockquote example">
             <blockquote>
-              "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
+              "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
+              Nam at dui sit amet ipsum cursus ornare."
               <footer>
                 <cite>- Phasellus eget lacinia</cite>
               </footer>
@@ -179,7 +180,8 @@
             <footer class="code">
 
 <pre><code>&lt;<b>blockquote</b>&gt;
-  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
+  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
+  Nam at dui sit amet ipsum cursus ornare."
   &lt;<b>footer</b>&gt;
     &lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
   &lt;/<b>footer</b>&gt;