diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
index ff0c6259..d31051c9 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
@@ -29,6 +29,7 @@ import { physicalNodeTypes } from 'resources/nova/instance';
 import { getOptions } from 'utils';
 import CreateKeyPair from 'pages/compute/containers/Keypair/actions/Create';
 import ItemActionButtons from 'components/Tables/Base/ItemActionButtons';
+import { has } from 'lodash';
 import styles from '../index.less';
 
 export class SystemStep extends Base {
@@ -85,15 +86,10 @@ export class SystemStep extends Base {
   }
 
   get serverGroups() {
-    return (this.serverGroupStore.list.data || [])
-      .filter((it) => {
-        const { servergroup } = this.locationParams;
-        return servergroup ? it.id === servergroup : true;
-      })
-      .map((it) => ({
-        ...it,
-        key: it.id,
-      }));
+    return (this.serverGroupStore.list.data || []).filter((it) => {
+      const { servergroup } = this.locationParams;
+      return servergroup ? it.id === servergroup : true;
+    });
   }
 
   get serverGroupRequired() {
@@ -198,6 +194,10 @@ export class SystemStep extends Base {
   async getServerGroups() {
     await this.serverGroupStore.fetchList();
     this.updateDefaultValue();
+    const { servergroup } = this.locationParams;
+    if (servergroup) {
+      this.onServerGroupChange({ selectedRows: this.serverGroups });
+    }
   }
 
   get nameForStateUpdate() {
@@ -208,6 +208,7 @@ export class SystemStep extends Base {
       'confirmPassword',
       'more',
       'physicalNodeType',
+      'serverGroup',
     ];
   }
 
@@ -235,6 +236,19 @@ export class SystemStep extends Base {
     }
   };
 
+  onValuesChange = (changedFields) => {
+    if (has(changedFields, 'serverGroup')) {
+      this.onServerGroupChange(changedFields.serverGroup);
+    }
+  };
+
+  onServerGroupChange = (value) => {
+    const { selectedRows = [] } = value || {};
+    this.updateContext({
+      serverGroupRow: selectedRows[0] || null,
+    });
+  };
+
   getKeyPairHeader() {
     const { isLoading } = this.keyPairStore.list || {};
     if (isLoading) {
@@ -377,6 +391,7 @@ export class SystemStep extends Base {
         data: this.serverGroups,
         isLoading: this.serverGroupStore.list.isLoading,
         required: this.serverGroupRequired,
+        // onChange: this.onServerGroupChange,
         extra: t(
           'Using server groups, you can create cloud hosts on the same/different physical nodes as much as possible to meet the affinity/non-affinity requirements of business applications.'
         ),
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
index c732a695..5c75472f 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
@@ -212,13 +212,18 @@ export class StepCreate extends StepAction {
       title: t('Volume Size'),
       type: 'line',
     };
-    return [
+    const serverGroupQuota = this.getServerGroupQuota();
+    const quotaInfo = [
       instanceQuotaInfo,
       cpuQuotaInfo,
       ramQuotaInfo,
       volumeQuotaInfo,
       volumeSizeQuotaInfo,
     ];
+    if (serverGroupQuota) {
+      quotaInfo.push(serverGroupQuota);
+    }
+    return quotaInfo;
   }
 
   get errorText() {
@@ -404,6 +409,40 @@ export class StepCreate extends StepAction {
     return '';
   }
 
+  getServerGroupQuota() {
+    const { data } = this.state;
+    const { serverGroupRow, count = 1 } = data;
+    if (!serverGroupRow) {
+      return null;
+    }
+    const { server_group_members: { limit = 0 } = {} } =
+      this.projectStore.novaQuota;
+    const { members = [] } = serverGroupRow || {};
+    const used = members.length;
+    const left = limit === -1 ? -1 : limit - used;
+    return {
+      add: count,
+      used,
+      limit,
+      left,
+      title: t('Server Group Member'),
+      name: 'serverGroupMember',
+      type: 'line',
+    };
+  }
+
+  checkSeverGroupQuota() {
+    const quota = this.getServerGroupQuota();
+    if (!quota) {
+      return '';
+    }
+    const { add, left } = quota || {};
+    if (left !== -1 && left < add) {
+      return this.getQuotaMessage(add, quota, t('Server Group Member'));
+    }
+    return '';
+  }
+
   get badgeStyle() {
     return { marginTop: 8, marginBottom: 8, marginLeft: 10, maxWidth: 600 };
   }
@@ -411,13 +450,14 @@ export class StepCreate extends StepAction {
   renderBadge() {
     const flavorMsg = this.checkFlavorQuota();
     const volumeMsg = this.checkVolumeQuota();
-    if (!flavorMsg && !volumeMsg) {
+    const serverGroupMsg = this.checkSeverGroupQuota();
+    if (!flavorMsg && !volumeMsg && !serverGroupMsg) {
       this.status = 'success';
       this.errorMsg = '';
       return null;
     }
     this.status = 'error';
-    const msg = flavorMsg || volumeMsg;
+    const msg = flavorMsg || volumeMsg || serverGroupMsg;
     if (this.errorMsg !== msg) {
       $message.error(msg);
     }