diff --git a/web/src/settings_components.ts b/web/src/settings_components.ts
index 10626c9a19..7d30933230 100644
--- a/web/src/settings_components.ts
+++ b/web/src/settings_components.ts
@@ -718,7 +718,7 @@ export let get_input_element_value = (
         case "field-data-setting":
             return get_field_data_input_value($input_elem);
         case "language-setting":
-            return $input_elem.find(".language_selection_button span").attr("data-language-code");
+            return $input_elem.attr("data-language-code");
         case "auth-methods":
             return JSON.stringify(get_auth_method_list_data());
         case "group-setting-type": {
@@ -882,9 +882,9 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea
             proposed_val = get_jitsi_server_url_setting_value($(elem), false);
             break;
         case "realm_default_language":
-            proposed_val = $(
-                "#org-notifications .language_selection_widget .language_selection_button span",
-            ).attr("data-language-code");
+            proposed_val = $("#org-notifications .language_selection_widget").attr(
+                "data-language-code",
+            );
             break;
         default:
             if (current_val !== undefined) {
diff --git a/web/src/settings_org.ts b/web/src/settings_org.ts
index b411b09329..7a430e1a99 100644
--- a/web/src/settings_org.ts
+++ b/web/src/settings_org.ts
@@ -536,11 +536,11 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void
         }
         case "realm_default_language":
             assert(typeof property_value === "string");
-            $("#org-notifications .language_selection_widget .language_selection_button span").attr(
+            $("#org-notifications .language_selection_widget").attr(
                 "data-language-code",
                 property_value,
             );
-            $("#org-notifications .language_selection_widget .language_selection_button span").text(
+            $("#org-notifications .language_selection_widget .language_selection_button").text(
                 // We know this is defined, since we got the `property_value` from a dropdown
                 // of valid language options.
                 get_language_name(property_value)!,
diff --git a/web/src/settings_preferences.ts b/web/src/settings_preferences.ts
index 4a5bce94fb..12b264da40 100644
--- a/web/src/settings_preferences.ts
+++ b/web/src/settings_preferences.ts
@@ -118,10 +118,8 @@ function org_notification_default_language_modal_post_render(): void {
             assert(setting_value !== undefined);
             const new_language = $link.attr("data-name");
             assert(new_language !== undefined);
-            const $language_element = $(
-                "#org-notifications .language_selection_widget .language_selection_button span",
-            );
-            $language_element.text(new_language);
+            const $language_element = $("#org-notifications .language_selection_widget");
+            $language_element.find(".language_selection_button").text(new_language);
             $language_element.attr("data-language-code", setting_value);
             settings_components.save_discard_realm_settings_widget_status_handler(
                 $("#org-notifications"),
@@ -144,10 +142,10 @@ function user_default_language_modal_post_render(): void {
 
             const new_language = $link.attr("data-name");
             assert(new_language !== undefined);
-            $("#user-preferences .language_selection_widget .language_selection_button span").text(
+            $("#user-preferences .language_selection_widget .language_selection_button").text(
                 new_language,
             );
-            $("#user-preferences .language_selection_widget .language_selection_button span").attr(
+            $("#user-preferences .language_selection_widget").attr(
                 "data-language-code",
                 setting_value,
             );
@@ -442,7 +440,7 @@ export function update_page(property: UserSettingsProperty): void {
     // The default_language button text updates to the language
     // name and not the value of the user_settings property.
     if (property === "default_language") {
-        $container.find(".default_language_name").text(user_default_language_name ?? "");
+        $container.find(".language_selection_button").text(user_default_language_name ?? "");
         return;
     }
 
diff --git a/web/styles/settings.css b/web/styles/settings.css
index dd97d2b66e..a44eb08a42 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -468,6 +468,10 @@ input[type="checkbox"] {
     }
 }
 
+.send_test_notification {
+    margin-bottom: 15px;
+}
+
 .preferences-settings-form {
     .tab-picker {
         width: 325px;
diff --git a/web/templates/settings/language_selection_widget.hbs b/web/templates/settings/language_selection_widget.hbs
index ac1aa5d584..0bcd049f0d 100644
--- a/web/templates/settings/language_selection_widget.hbs
+++ b/web/templates/settings/language_selection_widget.hbs
@@ -1,11 +1,16 @@
-<div class="language_selection_widget input-group prop-element" id="id_{{section_name}}" data-setting-widget-type="language-setting">
+<div class="language_selection_widget input-group prop-element" id="id_{{section_name}}" data-language-code="{{language_code}}" data-setting-widget-type="language-setting">
     <label class="settings-field-label" for="id_language_selection_button">
         {{section_title}}
         {{#if help_link_widget_link}}
         {{> ../help_link_widget link=help_link_widget_link }}
         {{/if}}
     </label>
-    <button type="button" id="id_language_selection_button" class="language_selection_button button rounded tippy-zulip-delayed-tooltip" data-section="{{section_name}}" data-tippy-content="{{t 'Change language' }}">
-        <span class="{{section_name}}" data-language-code="{{language_code}}">{{setting_value}}</span>
-    </button>
+    {{> ../components/action_button
+      label=setting_value
+      custom_classes="language_selection_button tippy-zulip-delayed-tooltip"
+      data-tippy-content=(t "Change language")
+      id="id_language_selection_button"
+      intent="neutral"
+      attention="quiet"
+      }}
 </div>
diff --git a/web/templates/settings/notification_settings.hbs b/web/templates/settings/notification_settings.hbs
index 8c0009531d..8dd27a9968 100644
--- a/web/templates/settings/notification_settings.hbs
+++ b/web/templates/settings/notification_settings.hbs
@@ -134,7 +134,12 @@
         <div class="desktop-notification-settings-banners banner-wrapper"></div>
 
         {{#unless for_realm_settings}}
-        <p><a class="send_test_notification">{{t "Send a test notification" }}</a></p>
+        {{> ../components/action_button
+          label=(t "Send a test notification")
+          attention="quiet"
+          intent="neutral"
+          custom_classes="send_test_notification"
+          }}
         {{/unless}}
 
         {{#each notification_settings.desktop_notification_settings}}