diff --git a/_scripts/lib/modal.js b/_scripts/lib/modal.js
deleted file mode 100644
index fb1d41afdf..0000000000
--- a/_scripts/lib/modal.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * _scripts/lib/modal.js
- * Loads jQuery.leanModal2 from cdn address
- *
- * @exports {Promise} default - a promise of the jQuery with jQuery.leanModal2 loaded
- */
-
-import Script from 'scriptjs'
-
-import jQuery from '~/lib/jquery'
-
-export default jQuery.then(($) => {
-    return new Promise((resolve, reject) => {
-        Script('https://cdn.jsdelivr.net/gh/eustasy/jQuery.leanModal2@2.6.3/jQuery.leanModal2.min.js', () => {
-            console.log('jQuery.leanModal2 loaded')
-            return resolve(window.jQuery)
-        })
-    })
-})
diff --git a/_scripts/widgets/download-modal.js b/_scripts/widgets/download-modal.js
index f24b9b254b..c21a02ecc7 100644
--- a/_scripts/widgets/download-modal.js
+++ b/_scripts/widgets/download-modal.js
@@ -3,18 +3,37 @@
  * Code for opening the download overlay widget on the homepage
  */
 
-import modal from '~/lib/modal'
+function detectDialogSupport () {
+    return typeof document.createElement('dialog').showModal === 'function'
+}
+
+// Some browsers have styling for the native dialog element but they dont actually support it.
+function swapDialogToDiv ($dialog) {
+    $dialog.outerHTML = $dialog.outerHTML.replace('<dialog', '<div').replace('</dialog>', '</div>')
+}
+
+function moveToAnchor (id) {
+    const originalURL = location.href
+    window.location.href = window.location.href.split('#')[0] + '#' + id
+    // Remove hash from URL after jumping
+    window.history.replaceState(null, null, originalURL)
+}
 
 export function openDownloadOverlay () {
-    modal.then(($) => {
-        const $openModal = $('.open-modal')
-        console.log('Open the download overlay!')
-        $openModal.leanModal({
-            // Add this class to download buttons to make them close it.
-            closeButton: '.close-modal',
-            disableCloseOnOverlayClick: true
-        })
-        // This is what actually opens the modal overlay.
-        $openModal.click()
-    })
+    const modalId = 'download-modal'
+    const $downloadModal = document.getElementById(modalId)
+    if (!$downloadModal) {
+        return
+    }
+    const supportsDialog = detectDialogSupport()
+    if (!supportsDialog) {
+        swapDialogToDiv($downloadModal)
+        moveToAnchor(modalId)
+        return
+    }
+    $downloadModal.showModal()
+    const $closeButton = $downloadModal.querySelector('.js-close-button')
+    $closeButton.addEventListener('click', () => {
+        $downloadModal.close()
+    }, { once: true })
 }
diff --git a/_styles/main.css b/_styles/main.css
index 959c2c7ccd..f9e3f28bd1 100644
--- a/_styles/main.css
+++ b/_styles/main.css
@@ -1018,47 +1018,19 @@ input:focus::placeholder {
 * Modal Dialogs *
 ****************/
 
-.modal {
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  box-shadow:
-    inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
-    inset -1px 0 0 0 rgba(255, 255, 255, 0.2),
-    inset 0 1px 0 0 #fff,
-    0 0 0 1px rgba(0, 0, 0, 0.2),
-    0 10px 20px rgba(0, 0, 0, 0.19),
-    0 6px 6px rgba(0, 0, 0, 0.23);
-  max-height: 100vh;
-  max-width: 100vw;
-  padding: 12px;
-  z-index: 11000;
-  display: none;
-  text-align: center;
-}
-
-.modal p {
-  text-align: center;
-  margin: 0 6px;
-  max-width: 388px;
-}
-
-.modal .row.actions {
-  margin-top: 24px;
-  padding: 0;
-}
-
-.modal .row.actions .column {
-  margin: 6px !important;
-}
-
-@media only screen and (max-width: 425px) {
-  .dialog {
-    width: calc(100vw - 32px);
-  }
-}
+/*
+The use of the [open] selector is to distinguish between
+browsers that support the <dialog> element and therefore <dialog open>
+So that for browsers that dont we can have a sensible inline style that can be anchored to.
+*/
 
 .dialog {
+  padding: 24px;
+  text-align: center;
   background-color: #f5f5f5;
+}
+.dialog[open] {
+  border: none;
   border-radius: 3px;
   box-shadow:
     inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
@@ -1068,41 +1040,61 @@ input:focus::placeholder {
     0 8px 20px 1px rgba(0, 0, 0, 0.14),
     0 3px 28px 2px rgba(0, 0, 0, 0.12),
     0 5px 10px -3px rgba(0, 0, 0, 0.4);
-  margin: 0 auto;
   padding: 12px;
   padding-top: 24px;
+  text-align: initial;
+}
+
+@media only screen and (max-width: 425px) {
+  .dialog[open] {
+    width: calc(100vw - 32px);
+  }
 }
 
-.dialog img {
+.dialog[open]::backdrop {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.dialog[open] .dialog-title {
+  font-weight: 700;
+  font-size: 1em;
+  text-align: left;
+  line-height: 24px;
+  margin: 0;
+}
+
+.dialog[open] img {
   display: inline-block;
   margin-right: 12px;
   user-select: none;
   vertical-align: top;
 }
 
-.dialog .content-area {
+.dialog[open] .content-area {
   display: inline-block;
   width: calc(100% - 48px - 18px); /* Subtract icon width and right margin */
 }
 
 .dialog p {
+  margin: 0 auto;
+  text-align: left;
   line-height: 24px;
-  margin: 6px 0 0;
   max-width: 380px;
-  text-align: left;
 }
 
-.dialog p.primary {
-  font-weight: 700;
-  margin-top: 0;
+.dialog[open] p {
+  margin: 6px 0 0;
 }
 
 .dialog .action-area {
+  margin-top: 12px;
+}
+
+.dialog[open] .action-area {
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
   justify-content: flex-end;
-  margin-top: 12px;
 }
 
 .dialog .button {
@@ -1121,9 +1113,12 @@ input:focus::placeholder {
   margin-left: 6px;
 }
 
-i.fa.fa-close.close-modal {
-  cursor: pointer;
-  float: left;
+/* If the dialog is inline hide the close button */
+.dialog .close-modal {
+  display: none;
+}
+.dialog[open] .close-modal {
+  display: block;
 }
 
 /*********
diff --git a/index.php b/index.php
index 799cc3c0f1..482bc1fdb5 100644
--- a/index.php
+++ b/index.php
@@ -467,21 +467,21 @@
 
     <span id="translate-download" style="display:none;" hidden>Download elementary OS</span>
     <span id="translate-purchase" style="display:none;" hidden>Purchase elementary OS</span>
-    <div id="download-modal" class="dialog modal">
-      <img alt="Download elementary OS icon" src="images/icons/apps/48/system-os-installer.svg">
+    <dialog id="download-modal" class="dialog" aria-labelledby="download-modal-title">
+      <img src="images/icons/apps/48/system-os-installer.svg" alt=""/>
       <div class="content-area">
-        <p class="primary">Choose a Download</p>
+        <h2 id="download-modal-title" class="dialog-title">Choose a Download</h2>
         <p>Download from a localized server or by magnet link. For help and more info, see the <a class="read-more" href="docs/installation" target="_blank" rel="noopener">installation guide</a></p>
       </div>
       <div class="action-area">
-        <a class="button clickable close-modal">Close</a>
+        <button class="js-close-button button clickable close-modal">Close</button>
         <div class="linked">
           <a class="button suggested-action download-link http" href="<?php echo $download_link.$config['release_filename']; ?>">Download</a>
           <a class="button suggested-action download-link magnet" title="Torrent Magnet Link" href="<?php echo 'magnet:?xt=urn:btih:'.$config['release_magnet'].'&dn='.$config['release_filename']; ?>&tr=https%3A%2F%2Fashrise.com%3A443%2Fphoenix%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&ws=http%3A<?php echo urlencode($download_link.$config['release_filename']); ?>"><i class="fa fa-magnet"></i></a>
         </div>
       </div>
-    </div>
-    <a style="display:none;" class="open-modal" href="#download-modal"></a>
+    </dialog>
+
     <!--[if lt IE 10]><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/eligrey/classList.js@1.1.20170427/classList.min.js"></script><![endif]-->
 <?php
   include $template['footer'];
