diff --git a/assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs b/assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs
index 2e2eddf..3155f4a 100644
--- a/assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs
+++ b/assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs
@@ -1,14 +1,18 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DEditor from "discourse/components/d-editor";
+import withEventValue from "discourse/helpers/with-event-value";
 import { i18n } from "discourse-i18n";
 
 export default class SignaturePreferences extends Component {
   @service currentUser;
   @service siteSettings;
 
+  @tracked _signatureRaw = this.args.model.custom_fields?.signature_raw || "";
+
   get canHaveSignature() {
     return this.currentUser?.can_have_signature !== false;
   }
@@ -18,8 +22,7 @@ export default class SignaturePreferences extends Component {
   }
 
   get charactersRemaining() {
-    const raw = this.args.model.custom_fields?.signature_raw || "";
-    return this.maxLength - raw.length;
+    return this.maxLength - this._signatureRaw.length;
   }
 
   @action
@@ -34,6 +37,12 @@ export default class SignaturePreferences extends Component {
     this.args.model.set("custom_fields.signature_url", event.target.value);
   }
 
+  @action
+  updateRawSignature(value) {
+    this._signatureRaw = value;
+    this.args.model.set("custom_fields.signature_raw", value);
+  }
+
   <template>
     {{#if this.siteSettings.signatures_enabled}}
       <div class="user-custom-preferences-outlet signature-preferences">
@@ -59,7 +68,10 @@ export default class SignaturePreferences extends Component {
               }}</label>
             <div class="controls input-xxlarge">
               {{#if this.siteSettings.signatures_advanced_mode}}
-                <DEditor @value={{@model.custom_fields.signature_raw}} />
+                <DEditor
+                  @value={{@model.custom_fields.signature_raw}}
+                  @change={{withEventValue this.updateRawSignature}}
+                />
                 <span class="signature-char-count">
                   {{i18n
                     "signatures.characters_remaining"
diff --git a/config/settings.yml b/config/settings.yml
index 2fc28c3..045c8a5 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -22,6 +22,7 @@ plugins:
     default: false
     client: true
   signatures_max_length:
+    client: true
     default: 500
     min: 50
     max: 10000
diff --git a/spec/system/signature_character_count_spec.rb b/spec/system/signature_character_count_spec.rb
new file mode 100644
index 0000000..4134dac
--- /dev/null
+++ b/spec/system/signature_character_count_spec.rb
@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+RSpec.describe "Signature character count" do
+  fab!(:user)
+
+  before do
+    enable_current_plugin
+    SiteSetting.signatures_enabled = true
+    SiteSetting.signatures_advanced_mode = true
+    SiteSetting.signatures_max_length = 500
+  end
+
+  it "shows max length when user has no signature" do
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 500),
+    )
+  end
+
+  it "shows max length when user has a null signature_raw" do
+    user.custom_fields["signature_raw"] = nil
+    user.save_custom_fields
+
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 500),
+    )
+  end
+
+  it "shows correct remaining characters when user has an existing signature" do
+    user.custom_fields["signature_raw"] = "Hello world"
+    user.save_custom_fields
+
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 489),
+    )
+  end
+
+  it "updates remaining characters as user types" do
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 500),
+    )
+
+    find(".signature-preferences .d-editor-input").send_keys("Test signature")
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 486),
+    )
+  end
+end