diff --git a/app/assets/javascripts/discourse/views/modal.js.es6 b/app/assets/javascripts/discourse/components/d-modal.js.es6
similarity index 83%
rename from app/assets/javascripts/discourse/views/modal.js.es6
rename to app/assets/javascripts/discourse/components/d-modal.js.es6
index 10599d23749..a8de2b82eae 100644
--- a/app/assets/javascripts/discourse/views/modal.js.es6
+++ b/app/assets/javascripts/discourse/components/d-modal.js.es6
@@ -1,9 +1,8 @@
 import { on } from "ember-addons/ember-computed-decorators";
 
-export default Ember.View.extend({
+export default Ember.Component.extend({
   elementId: 'discourse-modal',
-  templateName: 'modal/modal',
-  classNameBindings: [':modal', ':hidden', 'controller.modalClass'],
+  classNameBindings: [':modal', ':hidden', 'modalClass'],
   attributeBindings: ['data-keyboard'],
 
   // We handle ESC ourselves
@@ -19,7 +18,7 @@ export default Ember.View.extend({
 
     this.appEvents.on('modal:body-shown', data => {
       if (data.title) {
-        this.set('controller.title', I18n.t(data.title));
+        this.set('title', I18n.t(data.title));
       }
     });
   },
diff --git a/app/assets/javascripts/discourse/templates/modal.hbs b/app/assets/javascripts/discourse/templates/modal.hbs
new file mode 100644
index 00000000000..3d778a0476e
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/modal.hbs
@@ -0,0 +1,21 @@
+{{#d-modal modalClass=modalClass title=title}}
+  <div class="modal-outer-container">
+    <div class="modal-middle-container">
+      <div class="modal-inner-container">
+        <div class="modal-header">
+          <a class="close" {{action "closeModal"}}>{{fa-icon "times"}}</a>
+          <h3>{{title}}</h3>
+          <div class="clearfix"></div>
+        </div>
+        <div id='modal-alert'></div>
+        {{outlet "modalBody"}}
+        {{#each errors as |error|}}
+          <div class="alert alert-error">
+            <button class="close" data-dismiss="alert">×</button>
+            {{error}}
+          </div>
+        {{/each}}
+      </div>
+    </div>
+  </div>
+{{/d-modal}}
diff --git a/app/assets/javascripts/discourse/templates/modal/modal.hbs b/app/assets/javascripts/discourse/templates/modal/modal.hbs
deleted file mode 100644
index afe0296f979..00000000000
--- a/app/assets/javascripts/discourse/templates/modal/modal.hbs
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="modal-outer-container">
-  <div class="modal-middle-container">
-    <div class="modal-inner-container">
-      <div class="modal-header">
-        <a class="close" {{action "closeModal"}}>{{fa-icon "times"}}</a>
-        <h3>{{title}}</h3>
-        <div class="clearfix"></div>
-      </div>
-      <div id='modal-alert'></div>
-      {{outlet "modalBody"}}
-      {{#each errors as |error|}}
-        <div class="alert alert-error">
-          <button class="close" data-dismiss="alert">×</button>
-          {{error}}
-        </div>
-      {{/each}}
-    </div>
-  </div>
-</div>