diff --git a/src/api/config.ts b/src/api/config.ts
index 31d19779..b1d863f5 100644
--- a/src/api/config.ts
+++ b/src/api/config.ts
@@ -132,6 +132,9 @@ export const addSubscriptions = (data: SubscriptionsData) => {
 export const deleteSubscription = (data: SubscriptionData) => {
   return http.delete('/subscribe', { data })
 }
+export const updateSubscription = (data: SubscriptionData) => {
+  return http.put('/subscribe', data)
+}
 
 export const querySubscription = async (node: string): Promise<Array<SubscriptionData>> => {
   try {
diff --git a/src/composables/config/useSubscription.ts b/src/composables/config/useSubscription.ts
index 21709bb6..9a35defe 100644
--- a/src/composables/config/useSubscription.ts
+++ b/src/composables/config/useSubscription.ts
@@ -1,4 +1,11 @@
-import { addSubscription, addSubscriptions, deleteSubscription, queryGroupList, querySubscription } from '@/api/config'
+import {
+  addSubscription,
+  addSubscriptions,
+  deleteSubscription,
+  updateSubscription,
+  queryGroupList,
+  querySubscription,
+} from '@/api/config'
 import type { GroupData, SubscriptionData, SubscriptionsData, SubscriptionDataForm } from '@/types/config'
 import type { Ref } from 'vue'
 import { ref, computed, nextTick } from 'vue'
@@ -10,6 +17,7 @@ import useSouthDriver from './useSouthDriver'
 import { createCommonErrorMessage, OmitArrayFields } from '@/utils/utils'
 import { EN_NUMBER_REGEX } from '@/utils/regexps'
 import { useDriverInfo } from '@/composables/config/useDriver'
+import { cloneDeep, omit } from 'lodash'
 
 interface SubscriptionDataInTable extends SubscriptionData {
   checked: boolean
@@ -21,6 +29,20 @@ export const useSubscriptionList = () => {
 
   const isListLoading = ref(false)
   const subscriptionList: Ref<Array<SubscriptionDataInTable>> = ref([])
+
+  const isEditGroup = ref(false)
+  const showEditGroupDailog = ref(false)
+  const isSubmitting = ref(false)
+  const editGroupForm: Ref<SubscriptionData> = ref({
+    app: '',
+    driver: '',
+    group: '',
+    params: {
+      topic: '',
+      productKey: '',
+    },
+  })
+
   const node = computed(() => route.params.node.toString())
 
   const allChecked = computed({
@@ -77,6 +99,32 @@ export const useSubscriptionList = () => {
 
   const batchUnsubscribeGroups = () => unsubscribe(t('config.unsubscribeInBulkConfirm'), subCheckedList.value)
 
+  const showEditGroupDialog = (group: SubscriptionDataInTable) => {
+    const groupData = cloneDeep(group)
+    isEditGroup.value = true
+    showEditGroupDailog.value = true
+    editGroupForm.value = omit(groupData, ['checked'])
+  }
+  const updateGroup = async (data: SubscriptionData) => {
+    try {
+      isSubmitting.value = true
+      const params = {
+        ...data,
+        app: node.value,
+      }
+      showEditGroupDailog.value = false
+
+      EmqxMessage.success(t('common.submitSuccess'))
+
+      await updateSubscription(params)
+      getSubscriptionList()
+    } catch (error) {
+      console.error(error)
+    } finally {
+      isSubmitting.value = false
+    }
+  }
+
   getSubscriptionList()
 
   return {
@@ -90,6 +138,13 @@ export const useSubscriptionList = () => {
     unsubscribeGroup,
     clearSubscription,
     batchUnsubscribeGroups,
+
+    isEditGroup,
+    showEditGroupDailog,
+    showEditGroupDialog,
+    editGroupForm,
+    updateGroup,
+    isSubmitting,
   }
 }
 
@@ -98,31 +153,8 @@ type AddSubscriptionProps = Readonly<{
   currentNode: string
 }>
 
-export const useAddSubscription = (props: AddSubscriptionProps) => {
+export const useSubscriptionGroup = () => {
   const { t } = useI18n()
-  const { isMQTTPugin, isGewuPugin, isSupportBatchSub } = useDriverInfo()
-
-  const createRawSubscriptionForm = (): SubscriptionDataForm => ({
-    app: null,
-    driver: '',
-    group: '',
-    driverGroups: {},
-    topic: '',
-    productKey: '',
-  })
-
-  const formCom = ref()
-
-  const topicWarning = computed(() => {
-    let warningContent = ''
-    const { topic } = subscriptionForm.value
-    if (topic) {
-      const isContainWildcard = topic.includes('#') || topic.includes('+')
-      warningContent = isContainWildcard ? t('config.topicContainWildcard') : ''
-    }
-    return warningContent
-  })
-
   const checkDriverGroups = async (rule: unknown, value: string, callback: any) => {
     const keys = Object.keys(value)
     const values = Object.values(value)
@@ -152,13 +184,49 @@ export const useAddSubscription = (props: AddSubscriptionProps) => {
         { required: true, message: createCommonErrorMessage('select', t('config.subscribeSouthDriverData')) },
         { validator: checkDriverGroups, trigger: ['blur'] },
       ],
+      'params.topic': [{ required: true, message: createCommonErrorMessage('input', t('config.topic')) }],
       topic: [{ required: true, message: createCommonErrorMessage('input', t('config.topic')) }],
+
+      'params.productKey': [
+        { required: true, message: createCommonErrorMessage('input', ' productKey') },
+        { validator: checkProductKey, trigger: ['blur'] },
+      ],
       productKey: [
         { required: true, message: createCommonErrorMessage('input', ' productKey') },
         { validator: checkProductKey, trigger: ['blur'] },
       ],
     }
   })
+  return {
+    rules,
+  }
+}
+export const useAddSubscription = (props: AddSubscriptionProps) => {
+  const { t } = useI18n()
+  const { isMQTTPugin, isGewuPugin, isSupportBatchSub } = useDriverInfo()
+
+  const createRawSubscriptionForm = (): SubscriptionDataForm => ({
+    app: null,
+    driver: '',
+    group: '',
+    driverGroups: {},
+    topic: '',
+    productKey: '',
+  })
+
+  const formCom = ref()
+
+  const topicWarning = computed(() => {
+    let warningContent = ''
+    const { topic } = subscriptionForm.value
+    if (topic) {
+      const isContainWildcard = topic.includes('#') || topic.includes('+')
+      warningContent = isContainWildcard ? t('config.topicContainWildcard') : ''
+    }
+    return warningContent
+  })
+
+  const { rules } = useSubscriptionGroup()
 
   const subscriptionForm: Ref<SubscriptionDataForm> = ref(createRawSubscriptionForm())
   const isSubmitting = ref(false)
diff --git a/src/composables/data/useWriteDataCheckNParse.ts b/src/composables/data/useWriteDataCheckNParse.ts
index ffd010e1..2212eead 100644
--- a/src/composables/data/useWriteDataCheckNParse.ts
+++ b/src/composables/data/useWriteDataCheckNParse.ts
@@ -79,7 +79,6 @@ export default (isWriteValue = true) => {
     try {
       await isJSONData(value)
       const arrValue = JSON.parse(value)
-      console.log('arrValue', arrValue)
       if (!Array.isArray(arrValue)) {
         return Promise.reject(new Error(WriteDataErrorCode.FormattingError.toString()))
       }
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index 0a33f3bf..c55adc06 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -50,8 +50,8 @@ export interface SubscriptionData extends SubscriptionDataForm {
   driver: string
   group: string
   params?: {
-    topic?: string
-    productKey?: string
+    topic?: string | null
+    productKey?: string | null
   }
 }
 
diff --git a/src/views/config/components/DriverListSelector.vue b/src/views/config/components/DriverListSelector.vue
new file mode 100644
index 00000000..c32f2cee
--- /dev/null
+++ b/src/views/config/components/DriverListSelector.vue
@@ -0,0 +1,96 @@
+<template>
+  <emqx-select
+    v-model="driver"
+    clearable
+    :size="size"
+    class="plugin_select"
+    :placeholder="selectorPlaceholder"
+    :disabled="disabled"
+    @change="changeDriver"
+  >
+    <emqx-option v-for="item in driverList" :key="item.name" :value="item.name" :label="item.name" />
+  </emqx-select>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineEmits, defineProps, watch, ref, nextTick } from 'vue'
+import type { PropType, Ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { DriverDirection } from '@/types/enums'
+import { querySouthDriverList, queryNorthDriverList } from '@/api/config'
+import type { RawDriverData } from '@/types/config'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  type: { type: Number as PropType<DriverDirection | null>, default: null },
+  placeholder: { type: String, default: '' },
+  size: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  width: { type: String, default: '220px' },
+})
+const emits = defineEmits(['update:modelValue', 'change'])
+
+const { t } = useI18n()
+
+const driverList: Ref<Array<RawDriverData>> = ref([])
+
+const driver = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emits('update:modelValue', val)
+  },
+})
+
+watch(
+  () => props.type,
+  (newV) => {
+    nextTick(() => {
+      getList(newV)
+    })
+  },
+  { immediate: true },
+)
+
+const getAllDrivers = async (): Promise<Array<RawDriverData>> => {
+  try {
+    const listArray = await Promise.all([await queryNorthDriverList(), await querySouthDriverList()])
+    const list = listArray.reduce((ret, cur) => {
+      return ret.concat(cur)
+    }, [])
+
+    return Promise.resolve(list)
+  } catch (error) {
+    console.error(error)
+    return Promise.reject(error)
+  }
+}
+
+const getList = async (type: DriverDirection | null | undefined) => {
+  try {
+    if (!type) {
+      driverList.value = await getAllDrivers()
+    }
+    if (type === DriverDirection.South) {
+      driverList.value = await querySouthDriverList()
+    }
+    if (type === DriverDirection.North) {
+      driverList.value = await queryNorthDriverList()
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const selectorPlaceholder = computed(() => {
+  return props.placeholder || t('config.southDeviceRequired')
+})
+const changeDriver = (val: string) => {
+  emits('change', val)
+}
+</script>
+
+<style lang="scss" scoped>
+.plugin_select {
+  width: v-bind(width);
+}
+</style>
diff --git a/src/views/config/components/GroupListSelector.vue b/src/views/config/components/GroupListSelector.vue
new file mode 100644
index 00000000..0f8e95c8
--- /dev/null
+++ b/src/views/config/components/GroupListSelector.vue
@@ -0,0 +1,73 @@
+<template>
+  <emqx-select
+    v-model="group"
+    clearable
+    :size="size"
+    class="plugin_select"
+    :placeholder="selectorPlaceholder"
+    :disabled="disabled"
+    @change="changeGroup"
+  >
+    <emqx-option v-for="{ name } in groupList" :key="name" :value="name" :label="name" />
+  </emqx-select>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineEmits, defineProps, watch, ref, nextTick } from 'vue'
+import type { Ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { queryGroupList } from '@/api/config'
+import type { GroupData } from '@/types/config'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  driver: { type: String, required: true },
+  placeholder: { type: String, default: '' },
+  size: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  width: { type: String, default: '220px' },
+})
+const emits = defineEmits(['update:modelValue', 'change'])
+
+const { t } = useI18n()
+
+const groupList: Ref<Array<GroupData>> = ref([])
+
+const group = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emits('update:modelValue', val)
+  },
+})
+
+watch(
+  () => props.driver,
+  (newV) => {
+    nextTick(() => {
+      getList(newV)
+    })
+  },
+  { immediate: true },
+)
+
+const getList = async (driver: string) => {
+  try {
+    groupList.value = driver ? await queryGroupList(driver as string) : []
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const selectorPlaceholder = computed(() => {
+  return props.placeholder || t('config.groupPlaceholder')
+})
+const changeGroup = (val: string) => {
+  emits('change', val)
+}
+</script>
+
+<style lang="scss" scoped>
+.plugin_select {
+  width: v-bind(width);
+}
+</style>
diff --git a/src/views/config/northDriver/Group.vue b/src/views/config/northDriver/Group.vue
index f80008ed..7f8a4f84 100644
--- a/src/views/config/northDriver/Group.vue
+++ b/src/views/config/northDriver/Group.vue
@@ -47,6 +47,9 @@
       </emqx-table-column>
       <emqx-table-column align="left" :label="$t('common.oper')" width="140px">
         <template #default="{ row }">
+          <AComWithDesc v-if="isMQTTPugin || isGewuPugin" :content="$t('common.edit')">
+            <i class="el-icon-edit-outline" @click.stop="showEditGroupDialog(row)" />
+          </AComWithDesc>
           <AComWithDesc :content="$t('config.unsubscribe')">
             <i class="iconfont icondelete" @click="unsubscribeGroup(row)" />
           </AComWithDesc>
@@ -55,6 +58,14 @@
     </emqx-table>
   </emqx-card>
   <AddSubscriptionDialog v-model="showAddSubscriptionDialog" :current-node="node" @submitted="getSubscriptionList" />
+
+  <EditSubcriptionGroup
+    v-model="editGroupForm"
+    v-model:dialog-visible="showEditGroupDailog"
+    :is-edit="isEditGroup"
+    :is-submitting="isSubmitting"
+    @submitted="updateGroup"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -63,6 +74,8 @@ import { useSubscriptionList } from '@/composables/config/useSubscription'
 import { useDriverInfo } from '@/composables/config/useDriver'
 import AddSubscriptionDialog from './components/AddSubscriptionDialog.vue'
 import AComWithDesc from '@/components/AComWithDesc.vue'
+import EditSubcriptionGroup from './components/EditSubcriptionGroup.vue'
+import { DriverDirection } from '@/types/enums'
 
 const { isMQTTPugin, isGewuPugin } = useDriverInfo()
 
@@ -77,6 +90,13 @@ const {
   clearSubscription,
   batchUnsubscribeGroups,
   getSubscriptionList,
+
+  isEditGroup,
+  showEditGroupDailog,
+  editGroupForm,
+  showEditGroupDialog,
+  updateGroup,
+  isSubmitting,
 } = useSubscriptionList()
 
 const showAddSubscriptionDialog = ref(false)
diff --git a/src/views/config/northDriver/components/EditSubcriptionGroup.vue b/src/views/config/northDriver/components/EditSubcriptionGroup.vue
new file mode 100644
index 00000000..ec978930
--- /dev/null
+++ b/src/views/config/northDriver/components/EditSubcriptionGroup.vue
@@ -0,0 +1,151 @@
+<template>
+  <el-dialog
+    v-model="showDialog"
+    :width="500"
+    custom-class="common-dialog"
+    :title="$t(`${dialogTitle}`)"
+    :z-index="2000"
+  >
+    <emqx-form ref="formRef" :model="groupForm" :rules="rules">
+      <emqx-form-item prop="driver" :label="$t('config.southDevice')" required>
+        <DriverListSelector
+          v-model.trim="groupForm.driver"
+          :type="DriverDirection.South"
+          :width="'100%'"
+          disabled
+          @change="changeDriver"
+        />
+      </emqx-form-item>
+      <emqx-form-item prop="group" :label="$t('config.group')" required>
+        <GroupListSelector v-model="groupForm.group" :driver="groupForm.driver" :width="'100%'" disabled />
+      </emqx-form-item>
+
+      <!-- mqtt -->
+      <emqx-form-item v-if="isMQTTPugin" prop="params.topic" :label="$t('config.topic')">
+        <emqx-input v-model="groupForm.params.topic" />
+      </emqx-form-item>
+
+      <!-- gewu -->
+      <emqx-form-item v-if="isGewuPugin" prop="params.productKey" label="productKey">
+        <emqx-input v-model="groupForm.params.productKey" />
+      </emqx-form-item>
+    </emqx-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <emqx-button type="primary" size="small" :loading="isSubmitting" @click="submit">
+          {{ $t(`${confirmBtnText}`) }}
+        </emqx-button>
+        <emqx-button size="small" @click="close">
+          {{ $t('common.cancel') }}
+        </emqx-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, defineProps, defineEmits, nextTick, watch } from 'vue'
+import type { PropType } from 'vue'
+// import { useI18n } from 'vue-i18n'
+import { ElDialog } from 'element-plus'
+import DriverListSelector from '../../components/DriverListSelector.vue'
+import GroupListSelector from '../../components/GroupListSelector.vue'
+import type { SubscriptionData } from '@/types/config'
+import { DriverDirection } from '@/types/enums'
+import { useDriverInfo } from '@/composables/config/useDriver'
+import { useSubscriptionGroup } from '@/composables/config/useSubscription'
+
+const createRawForm = (): SubscriptionData => ({
+  app: '',
+  driver: '',
+  group: '',
+  params: {
+    topic: undefined,
+    productKey: undefined,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:dialogVisible', 'submitted', 'close'])
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<SubscriptionData>,
+    default: () => {
+      return { group: '', interval: null }
+    },
+  },
+  dialogVisible: {
+    type: Boolean,
+    required: true,
+  },
+  isEdit: { type: Boolean, deafult: false },
+  isSubmitting: { type: Boolean, deafult: false },
+})
+
+const { isMQTTPugin, isGewuPugin } = useDriverInfo()
+
+const formRef = ref()
+const groupForm = computed({
+  get: () => props.modelValue,
+  set: (val: SubscriptionData) => {
+    emit('update:modelValue', val)
+  },
+})
+
+const { rules } = useSubscriptionGroup()
+
+const dialogTitle = computed(() => {
+  const title = props.isEdit ? 'config.editGroup' : 'config.createGroup'
+  return title
+})
+const confirmBtnText = computed(() => {
+  return !props.isEdit ? 'common.create' : 'common.submit'
+})
+
+const showDialog = computed({
+  get: () => props.dialogVisible,
+  set: (val: boolean) => {
+    emit('update:dialogVisible', val)
+  },
+})
+
+watch(showDialog, async (val) => {
+  nextTick(() => {
+    formRef.value.form.clearValidate()
+  })
+  if (!val) {
+    resetFields()
+    initForm()
+  }
+})
+
+const changeDriver = (driver: string) => {
+  if (!driver) {
+    groupForm.value.group = ''
+  }
+}
+
+const resetFields = () => {
+  formRef.value.form.resetFields()
+}
+const initForm = () => {
+  groupForm.value = createRawForm()
+}
+
+const submit = async () => {
+  // const { group, interval } = groupForm.value
+  // if (props.isEdit) {
+  //   groupForm.value = {
+  //     group: oldGroupName.value,
+  //     new_name: group,
+  //     interval,
+  //   }
+  // }
+  await formRef.value.validate()
+  emit('submitted', groupForm.value)
+}
+const close = () => {
+  showDialog.value = false
+  emit('close')
+}
+</script>