diff --git a/app/assets/javascripts/discourse/controllers/avatar-selector.js.es6 b/app/assets/javascripts/discourse/controllers/avatar-selector.js.es6
index a39c7deacdc..c59c632e38a 100644
--- a/app/assets/javascripts/discourse/controllers/avatar-selector.js.es6
+++ b/app/assets/javascripts/discourse/controllers/avatar-selector.js.es6
@@ -28,9 +28,9 @@ export default Ember.Controller.extend(ModalFunctionality, {
   },
 
   actions: {
-    useUploadedAvatar() { this.set("selected", "uploaded"); },
-    useGravatar() { this.set("selected", "gravatar"); },
-    useSystem() { this.set("selected", "system"); },
+    uploadComplete() {
+      this.set("selected", "uploaded");
+    },
 
     refreshGravatar() {
       this.set("gravatarRefreshDisabled", true);
diff --git a/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs b/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs
index 760ab1a580f..7a7470f391d 100644
--- a/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs
@@ -1,18 +1,18 @@
-<div class="modal-body">
+{{#d-modal-body title="user.change_avatar.title" class="avatar-selector"}}
   <div>
     <div>
-      <input type="radio" id="system-avatar" name="avatar" value="system" {{action "useSystem"}}>
+      {{radio-button id="system-avatar" name="avatar" value="system" selection=selected}}
       <label class="radio" for="system-avatar">{{bound-avatar-template system_avatar_template "large"}} {{{i18n 'user.change_avatar.letter_based'}}}</label>
     </div>
     <div>
-      <input type="radio" id="gravatar" name="avatar" value="gravatar" {{action "useGravatar"}}>
+      {{radio-button id="gravatar" name="avatar" value="gravatar" selection=selected}}
       <label class="radio" for="gravatar">{{bound-avatar-template gravatar_avatar_template "large"}} {{{i18n 'user.change_avatar.gravatar'}}} {{email}}</label>
       {{d-button action="refreshGravatar" title="user.change_avatar.refresh_gravatar_title" disabled=gravatarRefreshDisabled icon="refresh"}}
     </div>
     {{#if allowAvatarUpload}}
       <div>
-        <input type="radio" id="uploaded_avatar" name="avatar" value="uploaded" {{action "useUploadedAvatar"}}>
-        <label class="radio" for="uploaded_avatar">
+        {{radio-button id="uploaded-avatar" name="avatar" value="uploaded" selection=selected}}
+        <label class="radio" for="uploaded-avatar">
           {{#if custom_avatar_template}}
             {{bound-avatar-template custom_avatar_template "large"}}
             {{i18n 'user.change_avatar.uploaded_avatar'}}
@@ -24,11 +24,11 @@
                           uploadedAvatarTemplate=custom_avatar_template
                           uploadedAvatarId=custom_avatar_upload_id
                           uploading=uploading
-                          done="useUploadedAvatar"}}
+                          done="uploadComplete"}}
       </div>
     {{/if}}
   </div>
-</div>
+{{/d-modal-body}}
 
 <div class="modal-footer">
   {{d-button action="saveAvatarSelection" class="btn-primary" disabled=uploading label="save"}}
diff --git a/app/assets/javascripts/discourse/views/avatar-selector.js.es6 b/app/assets/javascripts/discourse/views/avatar-selector.js.es6
deleted file mode 100644
index 6fcc5c9bc49..00000000000
--- a/app/assets/javascripts/discourse/views/avatar-selector.js.es6
+++ /dev/null
@@ -1,20 +0,0 @@
-import { on, observes } from "ember-addons/ember-computed-decorators";
-import ModalBodyView from "discourse/views/modal-body";
-
-export default ModalBodyView.extend({
-  templateName: 'modal/avatar_selector',
-  classNames: ['avatar-selector'],
-  title: I18n.t('user.change_avatar.title'),
-
-  // *HACK* used to select the proper radio button, because {{action}} stops the default behavior
-  @on("didInsertElement")
-  @observes("controller.selected")
-  selectedChanged() {
-    Em.run.next(() => $('input:radio[name="avatar"]').val([this.get('controller.selected')]));
-  },
-
-  @on("didInsertElement")
-  _focusSelectedButton() {
-    Em.run.next(() => $('input:radio[value="' + this.get('controller.selected') + '"]').focus());
-  }
-});