diff --git a/web/src/compose_validate.ts b/web/src/compose_validate.ts
index 21b721719fd90..45a50e8b14854 100644
--- a/web/src/compose_validate.ts
+++ b/web/src/compose_validate.ts
@@ -66,7 +66,10 @@ function update_send_button_status(): void {
 
 export function get_disabled_send_tooltip(): string {
     if (message_too_long) {
-        return $t({defaultMessage: "Message length shouldn't be greater than 10000 characters."});
+        return $t(
+            {defaultMessage: `Message length shouldn't be greater than {max_length} characters.`},
+            {max_length: realm.max_message_length},
+        );
     } else if (upload_in_progress) {
         return $t({defaultMessage: "Cannot send message while files are being uploaded."});
     }
@@ -689,6 +692,7 @@ export function check_overflow_text(): number {
     // expensive.
     const text = compose_state.message_content();
     const max_length = realm.max_message_length;
+    const remaining_characters = max_length - text.length;
     const $indicator = $("#compose-limit-indicator");
 
     if (text.length > max_length) {
@@ -696,8 +700,7 @@ export function check_overflow_text(): number {
         $("textarea#compose-textarea").addClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
-                max_length,
+                remaining_characters,
             }),
         );
         compose_banner.show_error_message(
@@ -712,13 +715,12 @@ export function check_overflow_text(): number {
             $("#compose_banners"),
         );
         set_message_too_long(true);
-    } else if (text.length > 0.9 * max_length) {
+    } else if (remaining_characters <= 900) {
         $indicator.removeClass("over_limit");
         $("textarea#compose-textarea").removeClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
-                max_length,
+                remaining_characters,
             }),
         );
         set_message_too_long(false);
diff --git a/web/src/ui_init.js b/web/src/ui_init.js
index 7cf66cb46641f..fb6ea0bb6cff1 100644
--- a/web/src/ui_init.js
+++ b/web/src/ui_init.js
@@ -181,6 +181,7 @@ function initialize_compose_box() {
                 giphy_enabled: giphy.is_giphy_enabled(),
                 max_stream_name_length: realm.max_stream_name_length,
                 max_topic_length: realm.max_topic_length,
+                max_message_length: realm.max_message_length,
             }),
         ),
     );
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index b92931f731c2d..7b6bf37a89839 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -276,6 +276,8 @@
         231deg 100% 90% / 50%
     );
     --color-compose-chevron-arrow: hsl(0deg 0% 58%);
+    --color-limit-indicator: hsl(38deg 100% 36%);
+    --color-limit-indicator-over-limit: hsl(3deg 80% 40%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 20%);
@@ -585,6 +587,8 @@
         235deg 100% 70% / 11%
     );
     --color-background-popover: hsl(212deg 32% 14%);
+    --color-limit-indicator: hsl(38deg 100% 70%);
+    --color-limit-indicator-over-limit: hsl(3deg 80% 60%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 100% / 75%);
diff --git a/web/styles/compose.css b/web/styles/compose.css
index c954b3d4b7420..1c92537aee127 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -304,14 +304,16 @@
 
 #compose-limit-indicator {
     font-size: 12px;
-    color: hsl(39deg 100% 50%);
+    color: var(--color-limit-indicator);
+    width: max-content;
 
-    /* Keep the limit indicator
-       just above the send button */
+    /* Keep the limit indicator just above
+       and aligned with the send button */
     margin-top: auto;
+    padding: 3px 3px 3px 0;
 
     &.over_limit {
-        color: hsl(0deg 76% 65%);
+        color: var(--color-limit-indicator-over-limit);
         font-weight: bold;
     }
 }
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index eccc4a4a52e3f..9e479f50bb284 100644
--- a/web/templates/compose.hbs
+++ b/web/templates/compose.hbs
@@ -89,7 +89,7 @@
                                 <a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">
                                     <span class="compose-drafts-text">{{t 'Drafts' }}</span><span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span>
                                 </a>
-                                <span id="compose-limit-indicator"></span>
+                                <span id="compose-limit-indicator" class="tippy-zulip-tooltip" data-tippy-content="{{t 'Maximum message length: {max_message_length} characters' }}"></span>
                                 <div class="message-send-controls">
                                     <button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
                                         <img class="loader" alt="" src="" />
diff --git a/web/templates/compose_limit_indicator.hbs b/web/templates/compose_limit_indicator.hbs
index 6fe0baf92bcd3..ba72353563272 100644
--- a/web/templates/compose_limit_indicator.hbs
+++ b/web/templates/compose_limit_indicator.hbs
@@ -1,2 +1 @@
-{{! Include a zero-width-space to allow breaks in narrow compose boxes. }}
-{{text_length}}&ZeroWidthSpace;/{{max_length}}
+{{remaining_characters}}
diff --git a/web/tests/compose_validate.test.js b/web/tests/compose_validate.test.js
index 57d26cc399285..44949bde46809 100644
--- a/web/tests/compose_validate.test.js
+++ b/web/tests/compose_validate.test.js
@@ -546,24 +546,24 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
     $textarea.val("a".repeat(10000 + 1));
     compose_validate.check_overflow_text();
     assert.ok($indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "10001&ZeroWidthSpace;/10000\n");
+    assert.equal(limit_indicator_html, "-1\n");
     assert.ok($textarea.hasClass("over_limit"));
     assert.ok(banner_rendered);
     assert.ok($(".message-send-controls").hasClass("disabled-message-send-controls"));
 
     // Indicator should show orange colored text
     banner_rendered = false;
-    $textarea.val("a".repeat(9000 + 1));
+    $textarea.val("a".repeat(9100));
     compose_validate.check_overflow_text();
     assert.ok(!$indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "9001&ZeroWidthSpace;/10000\n");
+    assert.equal(limit_indicator_html, "900\n");
     assert.ok(!$textarea.hasClass("over_limit"));
     assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
     assert.ok(!banner_rendered);
 
     // Indicator must be empty
     banner_rendered = false;
-    $textarea.val("a".repeat(9000));
+    $textarea.val("a".repeat(9100 - 1));
     compose_validate.check_overflow_text();
     assert.ok(!$indicator.hasClass("over_limit"));
     assert.equal($indicator.text(), "");