diff --git a/static/styles/portico/email_log.css b/static/styles/portico/email_log.css
new file mode 100644
index 0000000000..cbe13a92e9
--- /dev/null
+++ b/static/styles/portico/email_log.css
@@ -0,0 +1,18 @@
+#dev-emails-container {
+    .header {
+        position: fixed;
+    }
+
+    .config-options {
+        text-align: right;
+    }
+
+    .emails {
+        padding-top: 100px;
+    }
+
+    #smtp_form_status,
+    .hide {
+        display: none;
+    }
+}
diff --git a/templates/zerver/development/email_log.html b/templates/zerver/development/email_log.html
index 570f92fdff..121d6c7866 100644
--- a/templates/zerver/development/email_log.html
+++ b/templates/zerver/development/email_log.html
@@ -6,14 +6,14 @@
 {% endblock %}
 
 {% block content %}
-<div class="container">
-    <div style="position: fixed">
+<div class="container" id="dev-emails-container">
+    <div class="header">
         <div class="alert">
             All the emails sent in the Zulip development environment are logged here. You can also
             manually generate most of the emails by clicking <a href="/emails/generate">here</a>.
             To clear this log click <a href="/emails/clear">here</a>
         </div>
-        <div style="text-align:right">
+        <div class="config-options">
             <label>
                 <input type="checkbox" autocomplete="off" id="toggle"/>
                 <strong>Show text only version</strong>
@@ -23,7 +23,7 @@
             </a>
         </div>
     </div>
-    <div style="padding-top:100px">
+    <div class="emails">
         {{ log |safe }}
     </div>
     <div id="forward_email_modal" class="modal hide" tabindex="-1" role="dialog" aria-hidden="true">
@@ -32,7 +32,7 @@
                 <form id="smtp_form">
                     {{ csrf_input }}
                     <div class="alert alert-info"
-                      id="smtp_form_status" style="display:none;">
+                      id="smtp_form_status">
                         Updated successfully.
                     </div>
                     <label for="forward">
@@ -47,7 +47,7 @@
                     <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 %}style="display:none;"{% endif %}>
+                    <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>
diff --git a/tools/webpack.dev-assets.json b/tools/webpack.dev-assets.json
index 1dfffdf2df..0485e706d3 100644
--- a/tools/webpack.dev-assets.json
+++ b/tools/webpack.dev-assets.json
@@ -10,6 +10,7 @@
     "dev-email-log": [
         "./static/js/bundles/common",
         "./static/js/portico/email_log",
+        "./static/styles/portico/email_log.css",
         "./static/js/reload_state",
         "./static/js/channel"
     ]