diff --git a/frontend_tests/node_tests/deprecated_feature_notice.js b/frontend_tests/node_tests/deprecated_feature_notice.js
index 8a7413786a..03cc32b3f0 100644
--- a/frontend_tests/node_tests/deprecated_feature_notice.js
+++ b/frontend_tests/node_tests/deprecated_feature_notice.js
@@ -13,7 +13,7 @@ const deprecated_feature_notice = zrequire("deprecated_feature_notice");
 
 run_test("get_hotkey_deprecation_notice", () => {
     const expected =
-        'translated: We\'ve replaced the "*" hotkey with "Ctrl + s" to make this common shortcut easier to trigger.';
+        'translated HTML: We\'ve replaced the "*" hotkey with "Ctrl + s" to make this common shortcut easier to trigger.';
     const actual = deprecated_feature_notice.get_hotkey_deprecation_notice("*", "Ctrl + s");
     assert.equal(actual, expected);
 });
@@ -22,7 +22,7 @@ run_test("get_hotkey_deprecation_notice_mac", () => {
     navigator.userAgent =
         "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36";
     const expected =
-        'translated: We\'ve replaced the "*" hotkey with "Cmd + s" to make this common shortcut easier to trigger.';
+        'translated HTML: We\'ve replaced the "*" hotkey with "Cmd + s" to make this common shortcut easier to trigger.';
     const actual = deprecated_feature_notice.get_hotkey_deprecation_notice("*", "Cmd + s");
     assert.equal(actual, expected);
     // Reset userAgent
diff --git a/static/js/deprecated_feature_notice.js b/static/js/deprecated_feature_notice.js
index 09b87870f9..4fc6f8aa41 100644
--- a/static/js/deprecated_feature_notice.js
+++ b/static/js/deprecated_feature_notice.js
@@ -1,15 +1,11 @@
-import $ from "jquery";
-
-import render_deprecated_feature_notice from "../templates/deprecated_feature_notice.hbs";
-
 import * as blueslip from "./blueslip";
 import * as common from "./common";
-import {$t} from "./i18n";
+import * as dialog_widget from "./dialog_widget";
+import {$t_html} from "./i18n";
 import {localstorage} from "./localstorage";
-import * as overlays from "./overlays";
 
 export function get_hotkey_deprecation_notice(originalHotkey, replacementHotkey) {
-    return $t(
+    return $t_html(
         {
             defaultMessage:
                 'We\'ve replaced the "{originalHotkey}" hotkey with "{replacementHotkey}" to make this common shortcut easier to trigger.',
@@ -44,14 +40,16 @@ export function maybe_show_deprecation_notice(key) {
     }
 
     if (!shown_deprecation_notices.includes(key)) {
-        const rendered_deprecated_feature_notice = render_deprecated_feature_notice({message});
-        const deprecated_feature_notice = $(rendered_deprecated_feature_notice);
+        dialog_widget.launch({
+            html_heading: $t_html({defaultMessage: "Deprecation notice"}),
+            html_body: message,
+            html_submit_button: $t_html({defaultMessage: "Got it"}),
+            on_click: () => {},
+            close_on_submit: true,
+            focus_submit_on_open: true,
+            single_footer_button: true,
+        });
 
-        $(".app").append(deprecated_feature_notice);
-
-        overlays.open_modal("#deprecation-notice-modal", {autoremove: true});
-        $("#deprecation-notice-message").text(message);
-        $("#close-deprecation-notice").trigger("focus");
         shown_deprecation_notices.push(key);
         if (localstorage.supported()) {
             localStorage.setItem(
diff --git a/static/templates/deprecated_feature_notice.hbs b/static/templates/deprecated_feature_notice.hbs
deleted file mode 100644
index 0911698844..0000000000
--- a/static/templates/deprecated_feature_notice.hbs
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="modal hide modal-bg new-style" id="deprecation-notice-modal" role="dialog"
-  aria-labelledby="deprecation-notice-label" aria-hidden="true">
-
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
-        <h3 id="deprecation-notice-label">{{t "Deprecation notice" }}</h3>
-    </div>
-
-    <div class="modal-body">
-        <p id="deprecation-notice-message">{{message}}</p>
-    </div>
-
-    <div class="modal-footer">
-        <button type="button" class="button rounded" id="close-deprecation-notice" data-dismiss="modal">{{t "Got it" }}</button>
-    </div>
-</div>