diff --git a/static/js/popovers.js b/static/js/popovers.js
index 79aec1aec9..a23238032e 100644
--- a/static/js/popovers.js
+++ b/static/js/popovers.js
@@ -932,7 +932,7 @@ export function register_click_handlers() {
     $("body").on("click", ".update_status_text", (e) => {
         hide_all();
 
-        user_status_ui.open_overlay();
+        user_status_ui.open_user_status_modal();
 
         e.stopPropagation();
         e.preventDefault();
diff --git a/static/js/user_status_ui.js b/static/js/user_status_ui.js
index b27dd4d06d..afc8460d5f 100644
--- a/static/js/user_status_ui.js
+++ b/static/js/user_status_ui.js
@@ -7,20 +7,18 @@ import * as people from "./people";
 import * as user_status from "./user_status";
 
 export function input_field() {
-    return $(".user_status_overlay input.user_status");
+    return $("#set_user_status_modal input.user_status");
 }
 
 export function submit_button() {
-    return $(".user_status_overlay .set_user_status");
+    return $("#set_user_status_modal .set_user_status");
 }
 
-export function open_overlay() {
-    const overlay = $(".user_status_overlay");
-    overlays.open_overlay({
-        name: "user_status_overlay",
-        overlay,
-        on_close() {},
-    });
+export function open_user_status_modal() {
+    const rendered_set_status_overlay = render_set_status_overlay();
+    $(".app").append(rendered_set_status_overlay);
+
+    overlays.open_modal("#set_user_status_modal", {autoremove: true});
 
     const user_id = people.my_current_user_id();
     const old_status_text = user_status.get_status_text(user_id);
@@ -34,8 +32,8 @@ export function open_overlay() {
     button.prop("disabled", true);
 }
 
-export function close_overlay() {
-    overlays.close_overlay("user_status_overlay");
+export function close_user_status_modal() {
+    overlays.close_modal("#set_user_status_modal");
 }
 
 export function submit_new_status() {
@@ -45,14 +43,14 @@ export function submit_new_status() {
     const new_status_text = input_field().val().trim();
 
     if (old_status_text === new_status_text) {
-        close_overlay();
+        close_user_status_modal();
         return;
     }
 
     user_status.server_update({
         status_text: new_status_text,
         success() {
-            close_overlay();
+            close_user_status_modal();
         },
     });
 }
@@ -86,9 +84,6 @@ export function clear_message() {
 }
 
 export function initialize() {
-    const rendered_set_status_overlay = render_set_status_overlay();
-    $(".app").append(rendered_set_status_overlay);
-
     $("body").on("click", ".user-status-value", (event) => {
         event.stopPropagation();
         const user_status_value = $(event.currentTarget).text();
@@ -97,11 +92,11 @@ export function initialize() {
         update_button();
     });
 
-    $("body").on("click", ".user_status_overlay .set_user_status", () => {
+    $("body").on("click", "#set_user_status_modal .set_user_status", () => {
         submit_new_status();
     });
 
-    $("body").on("keypress", ".user_status_overlay .user_status", (event) => {
+    $("body").on("keypress", "#set_user_status_modal .user_status", (event) => {
         if (event.key === "Enter") {
             event.preventDefault();
 
@@ -109,7 +104,7 @@ export function initialize() {
         }
     });
 
-    $("body").on("keyup", ".user_status_overlay input.user_status", () => {
+    $("body").on("keyup", "#set_user_status_modal input.user_status", () => {
         update_button();
         toggle_clear_message_button();
     });
diff --git a/static/styles/app_components.css b/static/styles/app_components.css
index 69b56f53ba..3c2a41ec3a 100644
--- a/static/styles/app_components.css
+++ b/static/styles/app_components.css
@@ -367,7 +367,7 @@ div.overlay {
         box-shadow: none;
         z-index: 5;
 
-        .user_status_overlay & {
+        #set_user_status_modal & {
             margin-left: -26px;
             right: 0;
             padding-top: 6px;
diff --git a/static/styles/user_status.css b/static/styles/user_status.css
index 05acd3e8d1..c527c0aaeb 100644
--- a/static/styles/user_status.css
+++ b/static/styles/user_status.css
@@ -1,60 +1,16 @@
-.user_status_overlay {
-    .overlay-content {
-        width: 384px;
-        margin: 0 auto;
-        position: relative;
-        top: calc((30vh - 50px) / 2);
-        border-radius: 4px;
-        overflow: hidden;
-        background-color: hsl(0, 0%, 100%);
-
-        @media (width < $ml_min) {
-            width: 100%;
-        }
-    }
+#set_user_status_modal {
+    /* A narrower width is more attractive for this modal. */
+    width: 384px;
 
     input.user_status {
-        width: 336px;
+        width: 95%;
         @media (width < $ml_min) {
-            width: 94%;
+            width: 92%;
         }
     }
 
-    .user-status-header {
-        padding-top: 4px;
-        padding-bottom: 4px;
-        height: 5%;
-        width: 100%;
-        text-align: center;
-        border-bottom: 1px solid hsl(0, 0%, 87%);
-    }
-
-    .user-status-header h1 {
-        margin: 0;
-        font-size: 1.5em;
-    }
-
-    .user-status-header .exit {
-        font-weight: 400;
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        color: hsl(0, 0%, 67%);
-        cursor: pointer;
-    }
-
-    .user-status-header .exit-sign {
-        position: relative;
-        top: 1px;
-        margin-left: 3px;
-        font-size: 1.5rem;
-        line-height: 1;
-        font-weight: 600;
-        cursor: pointer;
-    }
-
     .user-status-options {
-        padding: 0 20px 3px;
+        padding: 0 5px 3px;
 
         button.user-status-value:hover {
             /* Important is required for generic night them styling to not
diff --git a/static/templates/set_status_overlay.hbs b/static/templates/set_status_overlay.hbs
index 71c04c8573..5d2eb5f368 100644
--- a/static/templates/set_status_overlay.hbs
+++ b/static/templates/set_status_overlay.hbs
@@ -1,18 +1,14 @@
-<div class="user_status_overlay overlay new-style" data-overlay="user_status_overlay" aria-hidden="true">
-    <div class="overlay-content modal-bg">
-        <div class="user-status-header">
-            <h1>{{t "Set a status" }}</h1>
-            <div class="exit">
-                <span class="exit-sign">&times;</span>
-            </div>
-        </div>
-        <div class="modal-body">
-            <label for="user_status">{{t "Status message" }}</label>
-            <input type="text" class="user_status" maxlength="60" />
-            <button type="button" class="btn clear_search_button" id="clear_status_message_button" disabled="disabled">
-                <i class="fa fa-remove" aria-hidden="true"></i>
-            </button>
-        </div>
+<div id="set_user_status_modal" class="modal modal-bg hide fade new-style" tabindex="-1" role="dialog" aria-labelledby="set_user_status_modal_label" aria-hidden="true">
+    <div class="modal-header">
+        <button type="button" class="close close-modal-btn" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
+        <h3 id="set_user_status_modal_label">{{t "Set status" }} </h3>
+    </div>
+    <div class="modal-body">
+        <label for="user_status">{{t "Status message" }}</label>
+        <input type="text" class="user_status" maxlength="60" />
+        <button type="button" class="btn clear_search_button" id="clear_status_message_button" disabled="disabled">
+            <i class="fa fa-remove" aria-hidden="true"></i>
+        </button>
         <div class="user-status-options">
             <button type="button" class="button no-style user-status-value">{{t "In a meeting" }}</button>
             <button type="button" class="button no-style user-status-value">{{t "Commuting" }}</button>
@@ -20,11 +16,11 @@
             <button type="button" class="button no-style user-status-value">{{t "Vacationing" }}</button>
             <button type="button" class="button no-style user-status-value">{{t "Working remotely" }}</button>
         </div>
-        <div class="modal-footer">
-            <button class="button exit small rounded">{{t "Cancel" }}</button>
-            <button class="sea-green small rounded button set_user_status">
-                {{t "Save" }}
-            </button>
-        </div>
+    </div>
+    <div class="modal-footer">
+        <button class="button rounded close-modal-btn" data-dismiss="modal">{{t "Cancel" }}</button>
+        <button class="button rounded sea-green set_user_status">
+            {{t "Save" }}
+        </button>
     </div>
 </div>