diff --git a/web/src/user_profile.ts b/web/src/user_profile.ts
index 3e26379ab2..583624979e 100644
--- a/web/src/user_profile.ts
+++ b/web/src/user_profile.ts
@@ -54,6 +54,7 @@ import * as subscriber_api from "./subscriber_api.ts";
 import * as timerender from "./timerender.ts";
 import type {HTMLSelectOneElement} from "./types.ts";
 import * as ui_report from "./ui_report.ts";
+import * as ui_util from "./ui_util.ts";
 import type {UploadWidget} from "./upload_widget.ts";
 import * as user_deactivation_ui from "./user_deactivation_ui.ts";
 import * as user_group_edit_members from "./user_group_edit_members.ts";
@@ -233,19 +234,13 @@ function change_state_of_subscribe_button(
     assert(user_profile_subscribe_widget !== undefined);
     user_profile_subscribe_widget.render();
     const $subscribe_button = $("#user-profile-modal .add-subscription-button");
-    const $element: (tippy.ReferenceElement & HTMLElement) | undefined =
-        $subscribe_button.parent()[0];
-    assert($element !== undefined);
-    $element._tippy?.destroy();
-    $subscribe_button.prop("disabled", false);
+    ui_util.enable_element_and_remove_tooltip($subscribe_button);
 }
 
 function reset_subscribe_widget(): void {
-    $("#user-profile-modal .add-subscription-button").prop("disabled", true);
-    settings_components.initialize_disable_button_hint_popover(
-        $("#user-profile-modal .add-subscription-button-wrapper"),
+    ui_util.disable_element_and_add_tooltip(
+        $("#user-profile-modal .add-subscription-button"),
         $t({defaultMessage: "Select a channel to subscribe"}),
-        {},
     );
     $("#user_profile_subscribe_widget .dropdown_widget_value").text(
         $t({defaultMessage: "Select a channel"}),
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 85c07c11ea..793d211f35 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -1554,7 +1554,3 @@ ul.popover-menu-list {
     flex: 1;
     min-width: 0;
 }
-
-.add-groups-button-wrapper {
-    flex: 0 0 auto;
-}
diff --git a/web/templates/user_profile_modal.hbs b/web/templates/user_profile_modal.hbs
index 66298c41e4..2f7b2bab77 100644
--- a/web/templates/user_profile_modal.hbs
+++ b/web/templates/user_profile_modal.hbs
@@ -146,11 +146,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="add-groups-button-wrapper">
-                                    <button type="button" name="subscribe" class="add-groups-button button small rounded">
-                                        {{t 'Add' }}
-                                    </button>
-                                </div>
+                                {{> components/action_button label=(t "Add") custom_classes="add-groups-button" attention="quiet" intent="brand" aria-label=(t "Add") }}
                             </div>
                         {{/if}}
                         <div class="group-list-top-section">
diff --git a/web/templates/user_profile_subscribe_widget.hbs b/web/templates/user_profile_subscribe_widget.hbs
index 0ebd5f0184..fd68f26aea 100644
--- a/web/templates/user_profile_subscribe_widget.hbs
+++ b/web/templates/user_profile_subscribe_widget.hbs
@@ -1,8 +1,4 @@
 <div class="user_profile_subscribe_widget">
     {{> dropdown_widget widget_name="user_profile_subscribe"}}
-    <div class="add-subscription-button-wrapper">
-        <button type="button" name="subscribe" class="add-subscription-button button small rounded">
-            {{t 'Subscribe' }}
-        </button>
-    </div>
+    {{> components/action_button label=(t "Subscribe") custom_classes="add-subscription-button" attention="quiet" intent="brand" aria-label=(t "Subscribe") }}
 </div>