diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index 36213347..3859b1a6 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -12,6 +12,7 @@ import { useThemeVars } from 'naive-ui'
 import useBrowserStore from 'stores/browser.js'
 import Delete from '@/components/icons/Delete.vue'
 import Add from '@/components/icons/Add.vue'
+import AddGroup from '@/components/icons/AddGroup.vue'
 import IconButton from '@/components/common/IconButton.vue'
 
 /**
@@ -300,6 +301,15 @@ const onClose = () => {
     dialogStore.closeConnDialog()
 }
 
+const onNewGroupClick = () => {
+    dialogStore.openNewGroupDialog(newGroup)
+}
+
+function newGroup(newGroupName)
+{
+    generalForm.value.group = newGroupName;
+}
+
 const pasteFromClipboard = async () => {
     // url example:
     // rediss://user:password@localhost:6789/3?dial_timeout=3&db=1&read_timeout=6s&max_retries=2
@@ -379,7 +389,16 @@ const pasteFromClipboard = async () => {
                                 <n-select
                                     v-model:value="generalForm.group"
                                     :options="groupOptions"
-                                    :render-label="({ label, value }) => (value === '' ? $t(label) : label)" />
+                                    :render-label="({ label, value }) => (value === '' ? $t(label) : label)" 
+                                    />
+                                    <div style="margin-left:4px;">
+                                        <icon-button
+                                            :icon="AddGroup"
+                                            :stroke-width="3.5"
+                                            size="20"
+                                            t-tooltip="interface.new_group"
+                                            @click="onNewGroupClick()" />
+                                    </div>
                             </n-form-item-gi>
                             <n-form-item-gi :label="$t('dialogue.connection.addr')" :span="24" path="addr" required>
                                 <n-input-group>
diff --git a/frontend/src/components/dialogs/GroupDialog.vue b/frontend/src/components/dialogs/GroupDialog.vue
index a85a3c35..63bd86de 100644
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@@ -64,6 +64,8 @@ const onConfirm = async () => {
             const { success, msg } = await connectionStore.createGroup(name)
             if (success) {
                 $message.success(i18n.t('dialogue.handle_succ'))
+                if (dialogStore.newGroupCallback != null)
+                    dialogStore.newGroupCallback(name);
             } else {
                 $message.error(msg)
             }
diff --git a/frontend/src/stores/dialog.js b/frontend/src/stores/dialog.js
index 5be88ea0..4786a81c 100644
--- a/frontend/src/stores/dialog.js
+++ b/frontend/src/stores/dialog.js
@@ -18,6 +18,7 @@ const useDialogStore = defineStore('dialog', {
         connParam: null,
 
         groupDialogVisible: false,
+        newGroupCallback: null,
         editGroup: '',
 
         /**
@@ -153,9 +154,10 @@ const useDialogStore = defineStore('dialog', {
             this.connDialogVisible = true
         },
 
-        openNewGroupDialog() {
+        openNewGroupDialog(callback = null) {
             this.editGroup = ''
             this.groupDialogVisible = true
+            this.newGroupCallback = callback;
         },
         closeNewGroupDialog() {
             this.groupDialogVisible = false