diff --git a/ghost/admin/app/components/modal-select-user-role.hbs b/ghost/admin/app/components/modal-select-user-role.hbs
new file mode 100644
index 0000000000..d58c53c826
--- /dev/null
+++ b/ghost/admin/app/components/modal-select-user-role.hbs
@@ -0,0 +1,16 @@
+<header class="modal-header">
+    <h1>Select role</h1>
+</header>
+<a class="close" href="" role="button" title="Close" {{on "click" this.close}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
+
+<div class="modal-body" {{did-insert this.setRoleFromModel}}>
+    <GhRoleSelection
+        @selected={{this.role}}
+        @setRole={{fn (mut this.role)}}
+    />
+</div>
+
+<div class="modal-footer">
+    <button {{on "click" this.close}} class="gh-btn"><span>Cancel</span></button>
+    <button {{on "click" this.confirmAction}} class="gh-btn gh-btn-black"><span>Set role</span></button>
+</div>
diff --git a/ghost/admin/app/components/modal-select-user-role.js b/ghost/admin/app/components/modal-select-user-role.js
new file mode 100644
index 0000000000..4ece7edfba
--- /dev/null
+++ b/ghost/admin/app/components/modal-select-user-role.js
@@ -0,0 +1,39 @@
+import ModalBase from 'ghost-admin/components/modal-base';
+import classic from 'ember-classic-decorator';
+import {action} from '@ember/object';
+import {tracked} from '@glimmer/tracking';
+
+// TODO: update modals to work fully with Glimmer components
+@classic
+export default class ModalPostPreviewComponent extends ModalBase {
+    @tracked role;
+
+    // TODO: rename to confirm() when modals have full Glimmer support
+    @action
+    confirmAction() {
+        this.confirm(this.role);
+        this.close();
+    }
+
+    @action
+    close(event) {
+        event?.preventDefault?.();
+        this.closeModal();
+    }
+
+    @action
+    setRoleFromModel() {
+        this.role = this.model;
+    }
+
+    actions = {
+        confirm() {
+            this.confirmAction(...arguments);
+        },
+
+        // needed because ModalBase uses .send() for keyboard events
+        closeModal() {
+            this.args.close();
+        }
+    }
+}
diff --git a/ghost/admin/app/controllers/staff/user.js b/ghost/admin/app/controllers/staff/user.js
index 50176e2aac..d82e5089fc 100644
--- a/ghost/admin/app/controllers/staff/user.js
+++ b/ghost/admin/app/controllers/staff/user.js
@@ -28,8 +28,9 @@ export default Controller.extend({
     showSuspendUserModal: false,
     showTransferOwnerModal: false,
     showUploadCoverModal: false,
-    showUplaodImageModal: false,
+    showUploadImageModal: false,
     showRegenerateTokenModal: false,
+    showRoleSelectionModal: false,
     _scratchFacebook: null,
     _scratchTwitter: null,
 
@@ -82,6 +83,11 @@ export default Controller.extend({
     }),
 
     actions: {
+        toggleRoleSelectionModal(event) {
+            event?.preventDefault?.();
+            this.toggleProperty('showRoleSelectionModal');
+        },
+
         changeRole(newRole) {
             this.user.set('role', newRole);
             this.set('dirtyAttributes', true);
diff --git a/ghost/admin/app/templates/staff/user.hbs b/ghost/admin/app/templates/staff/user.hbs
index d51e47d581..dcac6670f4 100644
--- a/ghost/admin/app/templates/staff/user.hbs
+++ b/ghost/admin/app/templates/staff/user.hbs
@@ -190,18 +190,18 @@
                         {{#if this.rolesDropdownIsVisible}}
                             <div class="form-group">
                                 <label for="user-role">Role</label>
-                                <span class="gh-select" tabindex="0">
-                                    <OneWaySelect
-                                        @id="new-user-role"
-                                        @options={{this.roles}}
-                                        @optionValuePath="id"
-                                        @optionLabelPath="name"
-                                        @value={{this.user.role}}
-                                        @update={{action "changeRole"}}
-                                    />
-                                </span>
+                                <div class="gh-input pointer" {{on "click" (action "toggleRoleSelectionModal")}}>{{this.user.role.name}}</div>
                                 <p>What permissions should this user have?</p>
                             </div>
+
+                            {{#if this.showRoleSelectionModal}}
+                                <GhFullscreenModal
+                                    @modal="select-user-role"
+                                    @model={{readonly this.user.role}}
+                                    @confirm={{action "changeRole"}}
+                                    @close={{action "toggleRoleSelectionModal"}}
+                                />
+                            {{/if}}
                         {{/if}}
 
                         <GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="location">