diff --git a/static/js/user_group_edit.js b/static/js/user_group_edit.js
index f5209b6d1a..5e8e13a148 100644
--- a/static/js/user_group_edit.js
+++ b/static/js/user_group_edit.js
@@ -1,15 +1,19 @@
 import $ from "jquery";
 
+import render_change_user_group_info_modal from "../templates/user_group_settings/change_user_group_info_modal.hbs";
 import render_user_group_settings from "../templates/user_group_settings/user_group_settings.hbs";
 
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
+import * as channel from "./channel";
 import * as components from "./components";
+import * as dialog_widget from "./dialog_widget";
 import * as hash_util from "./hash_util";
-import {$t} from "./i18n";
+import {$t, $t_html} from "./i18n";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as settings_data from "./settings_data";
+import * as settings_ui from "./settings_ui";
 import * as ui from "./ui";
 import * as user_group_ui_updates from "./user_group_ui_updates";
 import * as user_groups from "./user_groups";
@@ -24,7 +28,7 @@ function setup_group_edit_hash(group) {
 }
 
 function get_user_group_id(target) {
-    const $row = $(target).closest(".group-row");
+    const $row = $(target).closest(".group-row, .user_group_settings_wrapper, .save-button");
     return Number.parseInt($row.attr("data-group-id"), 10);
 }
 
@@ -59,7 +63,9 @@ export function can_edit(group_id) {
 }
 
 export function get_edit_container(group) {
-    return $(`#groups_overlay .user_group_settings[data-group-id='${CSS.escape(group.id)}']`);
+    return $(
+        `#groups_overlay .user_group_settings_wrapper[data-group-id='${CSS.escape(group.id)}']`,
+    );
 }
 
 export function show_settings_for(node) {
@@ -76,7 +82,7 @@ export function show_settings_for(node) {
     const $edit_container = get_edit_container(group);
     $(".nothing-selected").hide();
 
-    $edit_container.addClass("show");
+    $edit_container.show();
 }
 
 export function setup_group_settings(node) {
@@ -112,4 +118,59 @@ export function initialize() {
             open_group_edit_panel_for_row(this);
         }
     });
+
+    $("#manage_groups_container").on("click", "#open_group_info_modal", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const user_group_id = get_user_group_id(e.target);
+        const user_group = user_groups.get_user_group_from_id(user_group_id);
+        const template_data = {
+            group_name: user_group.name,
+            group_description: user_group.description,
+        };
+        const change_user_group_info_modal = render_change_user_group_info_modal(template_data);
+        dialog_widget.launch({
+            html_heading: $t_html(
+                {defaultMessage: "Edit {group_name}"},
+                {group_name: user_group.name},
+            ),
+            html_body: change_user_group_info_modal,
+            id: "change_group_info_modal",
+            on_click: save_group_info,
+            post_render: () => {
+                $("#change_group_info_modal .dialog_submit_button")
+                    .addClass("save-button")
+                    .attr("data-group-id", user_group_id);
+            },
+        });
+    });
+
+    function save_group_info(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const group = get_user_group_for_target(e.currentTarget);
+
+        const url = `/json/user_groups/${group.id}`;
+        const data = {};
+        const new_name = $("#change_user_group_name").val().trim();
+        const new_description = $("#change_user_group_description").val().trim();
+
+        if (new_name === group.name && new_description === group.description) {
+            return;
+        }
+        if (new_name !== group.name) {
+            data.name = new_name;
+        } else {
+            data.name = group.name;
+        }
+        if (new_description !== group.description) {
+            data.description = new_description;
+        } else {
+            data.description = group.description;
+        }
+
+        const $status_element = $(".group_change_property_info");
+        dialog_widget.close_modal();
+        settings_ui.do_settings_change(channel.patch, url, data, $status_element);
+    }
 }
diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css
index 5cf6986eb4..60303742ad 100644
--- a/static/styles/subscriptions.css
+++ b/static/styles/subscriptions.css
@@ -598,7 +598,7 @@ h4.user_group_setting_subsection_title {
         }
 
         .top-bar .stream-name,
-        .top-bar .group-name,
+        .top-bar .group-name-wrapper,
         .bottom-bar .description {
             white-space: nowrap;
             overflow: hidden;
@@ -624,7 +624,7 @@ h4.user_group_setting_subsection_title {
         }
 
         .top-bar .stream-name,
-        .top-bar .group-name {
+        .top-bar .group-name-wrapper {
             font-weight: 600;
         }
 
@@ -766,10 +766,12 @@ h4.user_group_setting_subsection_title {
         }
     }
 
+    .group-header,
     .stream-header {
         white-space: nowrap;
         padding-top: 10px;
 
+        .group-name-wrapper,
         .stream-name {
             display: inline-block;
             position: relative;
@@ -780,6 +782,7 @@ h4.user_group_setting_subsection_title {
             white-space: nowrap;
             max-width: 260px;
 
+            .group-name,
             .sub-stream-name {
                 display: block;
                 max-width: 20ch;
@@ -825,12 +828,14 @@ h4.user_group_setting_subsection_title {
             }
         }
 
+        .group_change_property_info,
         .stream_change_property_info {
             vertical-align: top;
             margin: -5px 0 0;
         }
     }
 
+    .group-description-wrapper,
     .stream-description {
         margin-bottom: 5px;
 
@@ -995,6 +1000,7 @@ h4.user_group_setting_subsection_title {
     margin: 5.5px 0 1px;
 }
 
+#change_user_group_description,
 #change_stream_description {
     width: 100%;
     height: 80px;
@@ -1115,6 +1121,7 @@ h4.user_group_setting_subsection_title {
 }
 
 @media (width < $sm_min) {
+    #groups_overlay .user_group_settings_wrapper,
     #subscription_overlay .subscription_settings {
         .button-group {
             display: block;
@@ -1122,10 +1129,14 @@ h4.user_group_setting_subsection_title {
             margin-top: 10px;
         }
 
-        .stream-header .button-group {
-            margin-top: -5px;
+        .group-header,
+        .stream-header {
+            .button-group {
+                margin-top: -5px;
+            }
         }
 
+        .group_change_property_info,
         .stream_change_property_info {
             /* For small widths where there is not enough space
             to show alert beside stream name we set its display
diff --git a/static/templates/user_group_settings/change_user_group_info_modal.hbs b/static/templates/user_group_settings/change_user_group_info_modal.hbs
new file mode 100644
index 0000000000..6a8808c1c1
--- /dev/null
+++ b/static/templates/user_group_settings/change_user_group_info_modal.hbs
@@ -0,0 +1,12 @@
+<div>
+    <label for="change_user_group_name">
+        {{t 'User group name' }}
+    </label>
+    <input type="text" id="change_user_group_name" value="{{ group_name }}" />
+</div>
+<div>
+    <label for="change_user_group_description">
+        {{t 'User group description' }}
+    </label>
+    <textarea id="change_user_group_description">{{ group_description }}</textarea>
+</div>
diff --git a/static/templates/user_group_settings/user_group_settings.hbs b/static/templates/user_group_settings/user_group_settings.hbs
index 2f04d20c04..73d91365b2 100644
--- a/static/templates/user_group_settings/user_group_settings.hbs
+++ b/static/templates/user_group_settings/user_group_settings.hbs
@@ -1,11 +1,26 @@
 <div class="group_settings_header" data-group-id="{{group.id}}">
     <div class="tab-container"></div>
 </div>
-<div class="user_group_settings_wrapper" data-group-id="{{group.id}}">
+<div class="user_group_settings_wrapper hide" data-group-id="{{group.id}}">
     <div class="inner-box">
 
         <div class="group_general_settings group_setting_section">
-            General group settings.
+            <div class="group-header">
+                <div class="group-name-wrapper">
+                    <span class="group-name" title="{{group.name}}">{{group.name}}</span>
+                </div>
+                <div class="group_change_property_info alert-notification"></div>
+                <div class="button-group" {{#unless can_edit}}style="display:none"{{/unless}}>
+                    <button id="open_group_info_modal" class="button rounded small btn-warning tippy-zulip-tooltip" data-tippy-content="{{t 'Change group info' }}">
+                        <i class="fa fa-pencil" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="group-description-wrapper">
+                <span class="group-description">
+                    {{group.description}}
+                </span>
+            </div>
         </div>
 
         <div class="group_member_settings group_setting_section">