diff --git a/apps/vue/src/components/Abp/LocalizableInput/LocalizableInput.vue b/apps/vue/src/components/Abp/LocalizableInput/LocalizableInput.vue
index 64798b8cd..2761ad6d0 100644
--- a/apps/vue/src/components/Abp/LocalizableInput/LocalizableInput.vue
+++ b/apps/vue/src/components/Abp/LocalizableInput/LocalizableInput.vue
@@ -2,7 +2,7 @@
   <div style="width: 100%">
     <ItemReset>
       <InputGroup>
-        <Row :gutter="4" style="margin-top: 10px;">
+        <Row :gutter="4">
           <Col :span="8">
             <Select
               :class="`${prefixCls}__resource`"
@@ -11,7 +11,7 @@
               :placeholder="t('component.localizable_input.placeholder')"
               v-model:value="state.resourceName"
               :options="getResources"
-              @change="handleResourceChange"
+              @change="(value) => handleResourceChange(value?.toString(), true)"
             />
           </Col>
           <Col :span="16">
@@ -107,6 +107,7 @@
       const info = deserialize(value);
       if (state.resourceName !== info.resourceName) {
         state.resourceName = isNullOrWhiteSpace(info.resourceName) ? undefined : info.resourceName;
+        handleResourceChange(state.resourceName, false);
       }
       if (state.displayName !== info.name) {
         state.displayName = isNullOrWhiteSpace(info.name) ? undefined : info.name;
@@ -117,7 +118,7 @@
     }
   );
 
-  function handleResourceChange(value?: string) {
+  function handleResourceChange(value?: string, triggerChanged?: boolean) {
     state.displayNames = [];
     if (value && resources[value]) {
       state.displayNames = Object.keys(resources[value]).map((key) => {
@@ -128,7 +129,9 @@
       }); 
     }
     state.displayName = undefined;
-    triggerDisplayNameChange(state.displayName);
+    if (triggerChanged === true) {
+      triggerDisplayNameChange(state.displayName);
+    }
   }
 
   function handleDisplayNameChange(value?: string) {
diff --git a/apps/vue/src/views/webhooks/definitions/webhooks/components/WebhookDefinitionModal.vue b/apps/vue/src/views/webhooks/definitions/webhooks/components/WebhookDefinitionModal.vue
index 3f62fc03b..bede54f23 100644
--- a/apps/vue/src/views/webhooks/definitions/webhooks/components/WebhookDefinitionModal.vue
+++ b/apps/vue/src/views/webhooks/definitions/webhooks/components/WebhookDefinitionModal.vue
@@ -17,6 +17,13 @@
     >
       <Tabs v-model:active-key="state.activeTab">
         <TabPane key="basic" :tab="L('BasicInfo')">
+          <FormItem name="isEnabled" :label="L('DisplayName:IsEnabled')">
+            <Checkbox
+              :disabled="!state.allowedChange"
+              v-model:checked="state.entity.isEnabled"
+            >{{ L('DisplayName:IsEnabled') }}
+            </Checkbox>
+          </FormItem>
           <FormItem name="groupName" :label="L('DisplayName:GroupName')">
             <Select
               :disabled="!state.allowedChange"
@@ -25,13 +32,6 @@
               :options="getGroupOptions"
             />
           </FormItem>
-          <FormItem name="isEnabled" :label="L('DisplayName:IsEnabled')">
-            <Checkbox
-              :disabled="!state.allowedChange"
-              v-model:checked="state.entity.isEnabled"
-            >{{ L('DisplayName:IsEnabled') }}
-            </Checkbox>
-          </FormItem>
           <FormItem name="name" :label="L('DisplayName:Name')">
             <Input :disabled="state.entityEditFlag && !state.allowedChange" :allow-clear="true" v-model:value="state.entity.name" />
           </FormItem>
diff --git a/apps/vue/src/views/webhooks/definitions/webhooks/components/WebhookDefinitionTable.vue b/apps/vue/src/views/webhooks/definitions/webhooks/components/WebhookDefinitionTable.vue
index cd340f578..5037e810c 100644
--- a/apps/vue/src/views/webhooks/definitions/webhooks/components/WebhookDefinitionTable.vue
+++ b/apps/vue/src/views/webhooks/definitions/webhooks/components/WebhookDefinitionTable.vue
@@ -16,45 +16,51 @@
         </Button>
       </template>
       <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'groupName'">
-          <span>{{ getGroupDisplayName(record.groupName) }}</span>
-        </template>
-        <template v-else-if="column.key === 'displayName'">
-          <span>{{ getDisplayName(record.displayName) }}</span>
-        </template>
-        <template v-else-if="column.key === 'description'">
-          <span>{{ getDisplayName(record.description) }}</span>
-        </template>
-        <template v-else-if="column.key === 'isEnabled'">
-          <CheckOutlined v-if="record.isEnabled" class="enable" />
-          <CloseOutlined v-else class="disable" />
-        </template>
-        <template v-else-if="column.key === 'isStatic'">
-          <CheckOutlined v-if="record.isStatic" class="enable" />
-          <CloseOutlined v-else class="disable" />
-        </template>
-        <template v-else-if="column.key === 'action'">
-          <TableAction
-            :stop-button-propagation="true"
-            :actions="[
-              {
-                auth: 'AbpWebhooks.Definitions.Update',
-                label: L('Edit'),
-                icon: 'ant-design:edit-outlined',
-                onClick: handleEdit.bind(null, record),
-              },
-              {
-                auth: 'AbpWebhooks.Definitions.Delete',
-                label: L('Delete'),
-                color: 'error',
-                icon: 'ant-design:delete-outlined',
-                ifShow: !record.isStatic,
-                onClick: handleDelete.bind(null, record),
-              },
-            ]"
-          />
+        <template v-if="column.key === 'displayName'">
+          <span>{{ getGroupDisplayName(record.displayName) }}</span>
         </template>
       </template>
+      <template #expandedRowRender="{ record }">
+        <BasicTable @register="registerSubTable" :data-source="record.webhooks">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'displayName'">
+              <span>{{ getDisplayName(record.displayName) }}</span>
+            </template>
+            <template v-else-if="column.key === 'description'">
+              <span>{{ getDisplayName(record.description) }}</span>
+            </template>
+            <template v-else-if="column.key === 'isEnabled'">
+              <CheckOutlined v-if="record.isEnabled" class="enable" />
+              <CloseOutlined v-else class="disable" />
+            </template>
+            <template v-else-if="column.key === 'isStatic'">
+              <CheckOutlined v-if="record.isStatic" class="enable" />
+              <CloseOutlined v-else class="disable" />
+            </template>
+            <template v-else-if="column.key === 'action'">
+              <TableAction
+                :stop-button-propagation="true"
+                :actions="[
+                  {
+                    auth: 'AbpWebhooks.Definitions.Update',
+                    label: L('Edit'),
+                    icon: 'ant-design:edit-outlined',
+                    onClick: handleEdit.bind(null, record),
+                  },
+                  {
+                    auth: 'AbpWebhooks.Definitions.Delete',
+                    label: L('Delete'),
+                    color: 'error',
+                    icon: 'ant-design:delete-outlined',
+                    ifShow: !record.isStatic,
+                    onClick: handleDelete.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </template>
     </BasicTable>
     <WebhookDefinitionModal @register="registerModal" @change="fetch" />
   </div>
@@ -73,10 +79,18 @@
   import { GetListAsyncByInput as getGroupDefinitions } from '/@/api/webhooks/definitions/groups';
   import { WebhookGroupDefinitionDto } from '/@/api/webhooks/definitions/groups/model';
   import { GetListAsyncByInput, DeleteAsyncByName } from '/@/api/webhooks/definitions/webhooks';
+  import { WebhookDefinitionDto } from '/@/api/webhooks/definitions/webhooks/model';
   import { getSearchFormSchemas } from '../datas/ModalData';
+  import { groupBy } from '/@/utils/array';
+  import { sorter } from '/@/utils/table';
   import WebhookDefinitionModal from './WebhookDefinitionModal.vue';
 
   const FormItem = Form.Item;
+  interface WebhookGroup {
+    name: string;
+    displayName: string;
+    webhooks: WebhookDefinitionDto[];
+  }
   interface State {
     groups: WebhookGroupDefinitionDto[],
   }
@@ -88,7 +102,16 @@
   const [registerTable, { setLoading, getForm, setTableData }] = useTable({
     rowKey: 'name',
     title: L('WebhookDefinitions'),
-    columns: getDataColumns(),
+    columns: [
+      {
+        title: L('DisplayName:DisplayName'),
+        dataIndex: 'displayName',
+        align: 'left',
+        width: 180,
+        resizable: true,
+        sorter: (a, b) => sorter(a, b, 'displayName'),
+      },
+    ],
     pagination: true,
     striped: false,
     useSearchForm: true,
@@ -105,8 +128,18 @@
     bordered: true,
     canResize: true,
     immediate: false,
+  });
+  const [registerSubTable] = useTable({
+    rowKey: 'name',
+    columns: getDataColumns(),
+    pagination: false,
+    striped: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    immediate: false,
+    scroll: { x: 2000, y: 900 },
     actionColumn: {
-      width: 120,
+      width: 150,
       title: L('Actions'),
       dataIndex: 'action',
     },
@@ -151,7 +184,18 @@
       setTableData([]);
       var input = form.getFieldsValue();
       GetListAsyncByInput(input).then((res) => {
-        setTableData(res.items);
+        const webhookGroup = groupBy(res.items, 'groupName');
+        const webhookGroupData: WebhookGroup[] = [];
+        Object.keys(webhookGroup).forEach((gk) => {
+          const groupData: WebhookGroup = {
+            name: gk,
+            displayName: gk,
+            webhooks: [],
+          };
+          groupData.webhooks.push(...webhookGroup[gk]);
+          webhookGroupData.push(groupData);
+        });
+        setTableData(webhookGroupData);
       }).finally(() => {
         setLoading(false);
       });
diff --git a/apps/vue/src/views/webhooks/definitions/webhooks/datas/ModalData.ts b/apps/vue/src/views/webhooks/definitions/webhooks/datas/ModalData.ts
index f069872fb..562a4301e 100644
--- a/apps/vue/src/views/webhooks/definitions/webhooks/datas/ModalData.ts
+++ b/apps/vue/src/views/webhooks/definitions/webhooks/datas/ModalData.ts
@@ -8,7 +8,7 @@ export function getSearchFormSchemas():FormSchema[] {
     {
       field: 'groupName',
       component: 'ApiSelect',
-      label: L('DisplayName:Providers'),
+      label: L('DisplayName:GroupName'),
       colProps: { span: 6 },
       slot: 'groupName',
     },
diff --git a/apps/vue/src/views/webhooks/definitions/webhooks/datas/TableData.ts b/apps/vue/src/views/webhooks/definitions/webhooks/datas/TableData.ts
index 583eb623f..5007ef38c 100644
--- a/apps/vue/src/views/webhooks/definitions/webhooks/datas/TableData.ts
+++ b/apps/vue/src/views/webhooks/definitions/webhooks/datas/TableData.ts
@@ -14,14 +14,6 @@ export function getDataColumns(): BasicColumn[] {
       resizable: true,
       sorter: (a, b) => sorter(a, b, 'isEnabled'),
     },
-    {
-      title: L('DisplayName:GroupName'),
-      dataIndex: 'groupName',
-      align: 'left',
-      width: 150,
-      resizable: true,
-      sorter: (a, b) => sorter(a, b, 'groupName'),
-    },
     {
       title: L('DisplayName:Name'),
       dataIndex: 'name',