diff --git a/web/src/tippyjs.ts b/web/src/tippyjs.ts
index 84d69630be..ead2bf7940 100644
--- a/web/src/tippyjs.ts
+++ b/web/src/tippyjs.ts
@@ -423,7 +423,7 @@ export function initialize(): void {
     });
 
     tippy.delegate("body", {
-        target: "#change_email_button_container.disabled_setting_tooltip",
+        target: "#email_field_container.disabled_setting_tooltip",
         content: $t({defaultMessage: "Email address changes are disabled in this organization."}),
         appendTo: () => document.body,
         onHidden(instance) {
diff --git a/web/templates/settings/account_settings.hbs b/web/templates/settings/account_settings.hbs
index 1adf40eb34..c20e80695c 100644
--- a/web/templates/settings/account_settings.hbs
+++ b/web/templates/settings/account_settings.hbs
@@ -9,9 +9,14 @@
                 <div class="input-group">
                     <label class="settings-field-label" for="change_email_button">{{t "Email" }}</label>
                     <div id="change_email_button_container" class="{{#unless user_can_change_email}}disabled_setting_tooltip{{/unless}}">
-                        <button id="change_email_button" type="button" class="button rounded tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Change your email' }}" {{#unless user_can_change_email}}disabled="disabled"{{/unless}}>
-                            {{current_user.delivery_email}}
-                        </button>
+                        <div id="email_field_container" class="inline-block {{#unless user_can_change_email}}disabled_setting_tooltip{{/unless}}">
+                            <input type="email" value="{{current_user.delivery_email}}" class="button rounded" disabled="disabled" />
+                        </div>
+                        {{#if user_can_change_email}}
+                            <button id="change_email_button" type="button" class="button rounded tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Change your email' }}" {{#unless user_can_change_email}}disabled="disabled"{{/unless}}>
+                                <i class="fa fa-pencil" aria-hidden="true"></i>
+                            </button>
+                        {{/if}}
                     </div>
                     <div id="email-change-status"></div>
                 </div>