diff --git a/templates/zerver/register.html b/templates/zerver/register.html
index 394c128cd5..15558f05bf 100644
--- a/templates/zerver/register.html
+++ b/templates/zerver/register.html
@@ -143,12 +143,14 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
                 </div>
                 {% elif password_required %}
                 <div class="input-box password-div">
+                    <div class="password-label-container">
+                        <span><label for="id_password">{{ _('Password') }}</label></span>
+                        <span id="password-limit-indicator" class="limit-indicator" data-tippy-content="{{ _('Maximum password length: 100 characters') }}" data-tippy-placement="top"></span>
+                    </div>
                     <input id="id_password" class="required" type="password" name="password" autocomplete="new-password"
                       value="{% if form.password.value() %}{{ form.password.value() }}{% endif %}"
-                      maxlength="{{ MAX_PASSWORD_LENGTH }}"
                       data-min-length="{{password_min_length}}"
                       data-min-guesses="{{password_min_guesses}}" required />
-                    <label for="id_password" class="inline-block">{{ _('Password') }}</label>
                     <i class="fa fa-eye-slash password_visibility_toggle" role="button" tabindex="0"></i>
                     {% if full_name %}
                     <span class="help-inline">
@@ -252,7 +254,7 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
                 </div>
                 {% endif %}
                 <div class="register-button-box">
-                    <button class="register-button" type="submit">
+                    <button class="register-button" id="signup-button" type="submit">
                         <span>{{ _('Sign up') }}</span>
                         <object class="loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
                     </button>
diff --git a/templates/zerver/reset_confirm.html b/templates/zerver/reset_confirm.html
index 8a8c02ce38..bcd250b2cb 100644
--- a/templates/zerver/reset_confirm.html
+++ b/templates/zerver/reset_confirm.html
@@ -28,10 +28,12 @@
                 </div>
 
                 <div class="input-box password-div">
-                    <label for="id_new_password1" class="">{{ _('Password') }}</label>
+                    <div class="password-label-container">
+                        <span><label for="id_new_password1" class="">{{ _('Password') }}</label></span>
+                        <span id="reset-password-limit-indicator" class="limit-indicator" data-tippy-content="{{ _('Maximum password length: 100 characters') }}" data-tippy-placement="top"></span>
+                    </div>
                     <input id="id_new_password1" class="required" type="password" name="new_password1" autocomplete="new-password"
                       value="{% if form.new_password1.value() %}{{ form.new_password1.value() }}{% endif %}"
-                      maxlength="100"
                       data-min-length="{{password_min_length}}"
                       data-min-guesses="{{password_min_guesses}}" autofocus required />
                     <i class="fa fa-eye-slash password_visibility_toggle" role="button" tabindex="0"></i>
@@ -52,7 +54,7 @@
                     <label for="id_new_password2" class="">{{ _('Confirm password') }}</label>
                     <input id="id_new_password2" class="required" type="password" name="new_password2" autocomplete="off"
                       value="{% if form.new_password2.value() %}{{ form.new_password2.value() }}{% endif %}"
-                      maxlength="100" required />
+                      required />
                     <i class="fa fa-eye-slash password_visibility_toggle" role="button" tabindex="0"></i>
                     {% if form.new_password2.errors %}
                         {% for error in form.new_password2.errors %}
@@ -63,7 +65,7 @@
 
                 <div class="input-box m-t-30">
                     <div class="centered-button">
-                        <button type="submit" class="" value="Submit">Submit</button>
+                        <button type="submit" id="reset-button" class="" value="Submit">Submit</button>
                     </div>
                 </div>
             </form>
diff --git a/web/src/bundles/portico.ts b/web/src/bundles/portico.ts
index 3b94d55f9b..b502856c09 100644
--- a/web/src/bundles/portico.ts
+++ b/web/src/bundles/portico.ts
@@ -6,3 +6,4 @@ import "../portico/tippyjs.ts";
 import "../../third/bootstrap/css/bootstrap.portico.css";
 import "../../styles/portico/portico_styles.css";
 import "tippy.js/dist/tippy.css";
+import "../../styles/app_variables.css";
diff --git a/web/src/portico/signup.ts b/web/src/portico/signup.ts
index 82c3c486e5..47b2fe9ec8 100644
--- a/web/src/portico/signup.ts
+++ b/web/src/portico/signup.ts
@@ -2,6 +2,7 @@ import $ from "jquery";
 import assert from "minimalistic-assert";
 import {z} from "zod";
 
+import render_compose_limit_indicator from "../../templates/compose_limit_indicator.hbs";
 import * as common from "../common.ts";
 import {$t} from "../i18n.ts";
 import {password_quality, password_warning} from "../password_quality.ts";
@@ -342,3 +343,49 @@ $(() => {
         }
     });
 });
+
+const $password_elem: JQuery<HTMLInputElement> = $("input#id_password");
+const $new_password1_elem: JQuery<HTMLInputElement> = $("input#id_new_password1");
+
+if ($password_elem.length) {
+    $password_elem.on("input", () => {
+        check_overflow_password($password_elem);
+    });
+}
+
+if ($new_password1_elem.length) {
+    $new_password1_elem.on("input", () => {
+        check_overflow_password($new_password1_elem);
+    });
+}
+
+export function check_overflow_password($password_elem: JQuery<HTMLInputElement>): void {
+    const password = $password_elem.val() ?? "";
+    const max_length = 100;
+    const remaining_characters = max_length - password.length;
+
+    const $indicator = $password_elem.closest(".input-box").find(".limit-indicator");
+    const $button = $password_elem.closest("form").find("button[type='submit']");
+
+    const password_too_long = password.length > max_length;
+    $button.prop("disabled", password_too_long);
+
+    // Update the limit indicator
+    if (password_too_long) {
+        $indicator.addClass("over_limit");
+        $indicator.html(
+            render_compose_limit_indicator({
+                remaining_characters,
+            }),
+        );
+    } else if (remaining_characters <= 20) {
+        $indicator.removeClass("over_limit");
+        $indicator.html(
+            render_compose_limit_indicator({
+                remaining_characters,
+            }),
+        );
+    } else {
+        $indicator.text("");
+    }
+}
diff --git a/web/styles/portico/portico_signin.css b/web/styles/portico/portico_signin.css
index 2b48fb8532..97185d3ed1 100644
--- a/web/styles/portico/portico_signin.css
+++ b/web/styles/portico/portico_signin.css
@@ -1461,3 +1461,34 @@ button#register_auth_button_gitlab {
     margin-top: 5px;
     display: none;
 }
+
+#signup-button,
+#reset-button {
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+#reset-password-limit-indicator,
+#password-limit-indicator {
+    &:not(:empty) {
+        font-size: 16px;
+        color: var(--color-limit-indicator);
+        cursor: pointer;
+        height: 0;
+        margin-right: 5px;
+        z-index: 10;
+    }
+
+    &.over_limit {
+        color: var(--color-limit-indicator-over-limit);
+        font-weight: bold;
+    }
+}
+
+.password-label-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}