diff --git a/frontend_tests/node_tests/templates.js b/frontend_tests/node_tests/templates.js
index 603795ac10..f59f0ece30 100644
--- a/frontend_tests/node_tests/templates.js
+++ b/frontend_tests/node_tests/templates.js
@@ -598,6 +598,7 @@ run_test('custom_user_profile_field', () => {
 run_test('deactivate_stream_modal', () => {
     var args = {
         stream_name: "Public stream",
+        stream_id: 1,
     };
     var html = render('deactivation-stream-modal', args);
 
@@ -606,6 +607,7 @@ run_test('deactivate_stream_modal', () => {
 
     var button = $(html).find("#do_deactivate_stream_button");
     assert.equal(button.text(), "translated: Yes, delete this stream");
+    assert.equal(button.data('stream-id'), args.stream_id);
 });
 
 run_test('dev_env_email_access', () => {
diff --git a/static/js/stream_edit.js b/static/js/stream_edit.js
index 1d6ca183d5..9e521aa9cb 100644
--- a/static/js/stream_edit.js
+++ b/static/js/stream_edit.js
@@ -598,13 +598,17 @@ exports.initialize = function () {
             return;
         }
         var stream_name = stream_data.maybe_get_stream_name(stream_id);
-        var deactivate_stream_modal = templates.render("deactivation-stream-modal", {stream_name: stream_name});
-        $(".subscription_settings").append(deactivate_stream_modal);
+        var deactivate_stream_modal = templates.render("deactivation-stream-modal", {
+            stream_name: stream_name,
+            stream_id: stream_id,
+        });
+        $("#deactivation_stream_modal").remove();
+        $("#subscriptions_table").append(deactivate_stream_modal);
         overlays.open_modal('deactivation_stream_modal');
     });
 
     $("#subscriptions_table").on("click", "#do_deactivate_stream_button", function (e) {
-        var stream_id = get_stream_id(e.target);
+        var stream_id = $(e.target).data("stream-id");
         overlays.close_modal('deactivation_stream_modal');
         $("#deactivation_stream_modal").remove();
         if (!stream_id) {
diff --git a/static/templates/settings/deactivation-stream-modal.handlebars b/static/templates/settings/deactivation-stream-modal.handlebars
index 9a5f6f933e..e2dc5a0d8d 100644
--- a/static/templates/settings/deactivation-stream-modal.handlebars
+++ b/static/templates/settings/deactivation-stream-modal.handlebars
@@ -1,4 +1,4 @@
-<div id="deactivation_stream_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_stream_modal_label" aria-hidden="true">
+<div id="deactivation_stream_modal" class="modal modal-bg hide fade new-style" tabindex="-1" role="dialog" aria-labelledby="deactivation_stream_modal_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="deactivation_stream_modal_label">{{t "Delete stream" }} <span class="stream_name">{{stream_name}}</span></h3>
@@ -8,6 +8,6 @@
     </div>
     <div class="modal-footer">
         <button class="button rounded" data-dismiss="modal">{{t "Cancel" }}</button>
-        <button class="button rounded btn-danger" id="do_deactivate_stream_button">{{t "Yes, delete this stream" }}</button>
+        <button class="button rounded btn-danger" id="do_deactivate_stream_button" data-stream-id="{{stream_id}}">{{t "Yes, delete this stream" }}</button>
     </div>
 </div>