diff --git a/templates/zerver/development/email_log.html b/templates/zerver/development/email_log.html
index 121d6c7866..cd29c54b32 100644
--- a/templates/zerver/development/email_log.html
+++ b/templates/zerver/development/email_log.html
@@ -18,7 +18,7 @@
                 <input type="checkbox" autocomplete="off" id="toggle"/>
                 <strong>Show text only version</strong>
             </label>
-            <a href="#" data-toggle="modal" data-target="#forward_email_modal">
+            <a href="#" class="open-forward-email-modal">
                 <strong>Forward emails to an email account</strong>
             </a>
         </div>
@@ -26,44 +26,52 @@
     <div class="emails">
         {{ log |safe }}
     </div>
-    <div id="forward_email_modal" class="modal hide" tabindex="-1" role="dialog" aria-hidden="true">
-        <div class="modal-body">
-            <div class="input-group">
-                <form id="smtp_form">
-                    {{ csrf_input }}
-                    <div class="alert alert-info"
-                      id="smtp_form_status">
-                        Updated successfully.
+    <div id="forward_email_modal" class="micromodal" aria-hidden="true">
+        <div class="modal__overlay" tabindex="-1">
+            <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
+                <header class="modal__header">
+                    <h1 class="modal__title dialog_heading">
+                        {{ _('Forward emails to an email account') }}
+                    </h1>
+                    <button class="modal__close" aria-label="{{ _('Close modal') }}" data-micromodal-close></button>
+                </header>
+                <main class="modal__content">
+                    <div class="input-group">
+                        <form id="smtp_form">
+                            {{ csrf_input }}
+                            <div class="alert alert-info" id="smtp_form_status">
+                                Updated successfully.
+                            </div>
+                            <label for="forward">
+                                Forwards all emails sent in the development environment to an external mail account.
+                            </label>
+                            <label class="radio">
+                                <input name="forward" type="radio" value="enabled" {% if forward_address %}checked{% endif %}/>Yes
+                            </label>
+                            <label class="radio">
+                                <input name="forward" type="radio" value="disabled" {% if not forward_address %}checked{% endif %}/>No
+                            </label>
+                            <div id="forward_address_sections" {% if not forward_address %}class="hide"{% endif %} >
+                                <label for="forward_address"><strong>Address to which emails should be forwarded</strong></label>
+                                <input type="text" id="address" name="forward_address" placeholder="eg: your-email@example.com" value="{{forward_address}}"/>
+                            </div>
+                            <br />
+                            <div class="alert alert-info">
+                                You must set up SMTP as described
+                                <a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/subsystems/email.html#development-and-testing"> here</a>
+                                first before enabling this.
+                            </div>
+                        </form>
                     </div>
-                    <label for="forward">
-                        <strong>Forwards all emails sent in the
-                            development environment to an external
-                            mail account.
-                        </strong>
-                    </label>
-                    <label class="radio">
-                        <input name="forward" type="radio" value="enabled" {% if forward_address %}checked{% endif %}/>Yes
-                    </label>
-                    <label class="radio">
-                        <input name="forward" type="radio" value="disabled" {% if not forward_address %}checked{% endif %}/>No
-                    </label>
-                    <div id="forward_address_sections" {% if not forward_address %}class="hide"{% endif %} >
-                        <label for="forward_address"><strong>Address to which emails should be forwarded</strong></label>
-                        <input type="text" id="address" name="forward_address" placeholder="eg: your-email@example.com" value="{{forward_address}}"/>
-                    </div>
-                    <br />
-                    <div class="alert alert-info">
-                        You must set up SMTP as described
-                        <a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/subsystems/email.html#development-and-testing"> here</a>
-                        first before enabling this.
-                    </div>
-                </form>
+                </main>
+                <footer class="modal__footer">
+                    <button class="modal__btn dialog_exit_button" aria-label="{{ '(Close this dialog window)' }}" data-micromodal-close>{{ _('Close') }}</button>
+                    <button class="modal__btn dialog_submit_button">
+                        <span>{{ _('Update') }}</span>
+                    </button>
+                </footer>
             </div>
         </div>
-        <div class="modal-footer">
-            <button id='save_smptp_details'>Update</button>
-            <button data-dismiss="modal">Close</button>
-        </div>
     </div>
 </div>
 {% endblock %}
diff --git a/web/src/portico/email_log.js b/web/src/portico/email_log.js
index 40c956d0b7..230ce66dbc 100644
--- a/web/src/portico/email_log.js
+++ b/web/src/portico/email_log.js
@@ -2,6 +2,8 @@ import $ from "jquery";
 
 import * as channel from "../channel";
 
+import * as portico_modals from "./portico_modals";
+
 $(() => {
     // This code will be executed when the user visits /emails in
     // development mode and email_log.html is rendered.
@@ -29,7 +31,7 @@ $(() => {
             $("#forward_address_sections").hide();
         }
     });
-    $("#save_smptp_details").on("click", () => {
+    $("#forward_email_modal .dialog_submit_button").on("click", () => {
         const address =
             $("input[name=forward]:checked").val() === "enabled" ? $("#address").val() : "";
         const csrf_token = $('input[name="csrfmiddlewaretoken"]').attr("value");
@@ -46,4 +48,8 @@ $(() => {
             },
         });
     });
+    $(".open-forward-email-modal").on("click", (e) => {
+        e.preventDefault();
+        portico_modals.open_modal("forward_email_modal");
+    });
 });
diff --git a/web/styles/portico/email_log.css b/web/styles/portico/email_log.css
index f5604d23d4..0527494398 100644
--- a/web/styles/portico/email_log.css
+++ b/web/styles/portico/email_log.css
@@ -1,3 +1,7 @@
+:root {
+    --color-background-modal: hsl(0deg 0% 98%);
+}
+
 #dev-emails-container {
     .header {
         position: fixed;
@@ -17,6 +21,14 @@
     }
 
     #forward_email_modal {
+        .modal__content label {
+            font-size: 1rem;
+        }
+
+        #forward_address_sections {
+            margin-top: 20px;
+        }
+
         & label.radio {
             padding-left: 20px;
         }
diff --git a/web/webpack.dev-assets.json b/web/webpack.dev-assets.json
index 534539d657..376599af98 100644
--- a/web/webpack.dev-assets.json
+++ b/web/webpack.dev-assets.json
@@ -10,6 +10,7 @@
     "dev-email-log": [
         "./src/bundles/common",
         "./src/portico/email_log",
+        "./src/portico/portico_modals",
         "./styles/portico/email_log.css",
         "./src/reload_state",
         "./src/channel"