diff --git a/app/assets/javascripts/discourse/controllers/preferences/second-factor-backup.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/second-factor-backup.js.es6
index 08bab005baa..208398eda5d 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/second-factor-backup.js.es6
+++ b/app/assets/javascripts/discourse/controllers/preferences/second-factor-backup.js.es6
@@ -7,6 +7,7 @@ export default Ember.Controller.extend({
   errorMessage: null,
   successMessage: null,
   backupEnabled: Ember.computed.alias("model.second_factor_backup_enabled"),
+  remainingCodes: Ember.computed.alias("model.second_factor_remaining_backup_codes"),
   backupCodes: null,
 
   @computed("secondFactorToken")
@@ -74,7 +75,6 @@ export default Ember.Controller.extend({
 
     generateSecondFactorCodes() {
       if (!this.get("secondFactorToken")) return;
-      const model = this.get("model");
       this.set("loading", true);
       this.get("content")
         .generateSecondFactorCodes(this.get("secondFactorToken"))
@@ -86,9 +86,10 @@ export default Ember.Controller.extend({
 
           this.setProperties({
             errorMessage: null,
-            backupCodes: response.backup_codes
+            backupCodes: response.backup_codes,
+            backupEnabled: true,
+            remainingCodes: response.backup_codes.length
           });
-          model.set("second_factor_backup_enabled", true);
         })
         .catch(popupAjaxError)
         .finally(() => {
diff --git a/app/assets/javascripts/discourse/templates/preferences-second-factor-backup.hbs b/app/assets/javascripts/discourse/templates/preferences-second-factor-backup.hbs
index 8b49faa123c..a8a9edc1b9a 100644
--- a/app/assets/javascripts/discourse/templates/preferences-second-factor-backup.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences-second-factor-backup.hbs
@@ -1,9 +1,11 @@
 <section class="user-preferences second-factor-backup-preferences">
   <form class="form-horizontal">
-
     <div class="control-group">
       <div class="controls">
         <h3>{{i18n "user.second_factor_backup.title"}}</h3>
+        {{#if backupEnabled}}
+          <p>{{{i18n "user.second_factor_backup.remaining_codes" count=remainingCodes}}}</p>
+        {{/if}}
       </div>
       <div class="controls">
         {{#if successMessage}}
diff --git a/app/models/concerns/second_factor_manager.rb b/app/models/concerns/second_factor_manager.rb
index 5ed61241b61..1761d645287 100644
--- a/app/models/concerns/second_factor_manager.rb
+++ b/app/models/concerns/second_factor_manager.rb
@@ -45,6 +45,10 @@ module SecondFactorManager
       SiteSetting.enable_local_logins
   end
 
+  def remaining_backup_codes
+    self&.user_second_factors&.backup_codes&.count
+  end
+
   def authenticate_second_factor(token, second_factor_method)
     if second_factor_method == UserSecondFactor.methods[:totp]
       authenticate_totp(token)
diff --git a/app/serializers/user_serializer.rb b/app/serializers/user_serializer.rb
index 9f7c88be66e..3d5a15132a3 100644
--- a/app/serializers/user_serializer.rb
+++ b/app/serializers/user_serializer.rb
@@ -74,7 +74,8 @@ class UserSerializer < BasicUserSerializer
              :primary_group_flair_color,
              :staged,
              :second_factor_enabled,
-             :second_factor_backup_enabled
+             :second_factor_backup_enabled,
+             :second_factor_remaining_backup_codes
 
   has_one :invited_by, embed: :object, serializer: BasicUserSerializer
   has_many :groups, embed: :object, serializer: BasicGroupSerializer
@@ -160,6 +161,14 @@ class UserSerializer < BasicUserSerializer
     object.backup_codes_enabled?
   end
 
+  def include_second_factor_remaining_backup_codes?
+    (object&.id == scope.user&.id) && object.backup_codes_enabled?
+  end
+
+  def second_factor_remaining_backup_codes
+    object.remaining_backup_codes
+  end
+
   def can_change_bio
     !(SiteSetting.enable_sso && SiteSetting.sso_overrides_bio)
   end
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 02d91d0f29a..8f5f4267e7f 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -747,6 +747,7 @@ en:
         manage: "Manage backup codes"
         copied_to_clipboard: "Copied to Clipboard"
         copy_to_clipboard_error: "Error copying data to Clipboard"
+        remaining_codes: "You have <strong>{{count}}</strong> backup codes remaining."
         codes:
           title: "Backup codes"
           description: "Each line is a different backup code which can only be used once. It's recommended to save this file in a safe place."