diff --git a/frontend/src/components/application_spaces/NewApplicationSpace.vue b/frontend/src/components/application_spaces/NewApplicationSpace.vue
index fc70c96af..ac0f8f719 100644
--- a/frontend/src/components/application_spaces/NewApplicationSpace.vue
+++ b/frontend/src/components/application_spaces/NewApplicationSpace.vue
@@ -256,7 +256,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item
-          :label="t('endpoints.new.cluster')"
+          :label="t('application_spaces.new.cluster')"
           class="w-full"
           prop="space_cluster">
           <el-select
@@ -288,18 +288,24 @@
             size="large"
             style="width: 100%"
           >
-            <el-option
-              v-for="item in spaceResources"
-              :key="item.name"
-              :label="item.name"
-              :value="item.id"
-              :disabled="!item.is_available"
-            />
+            <el-option-group
+              v-for="group in spaceResources"
+              :key="group.label"
+              :label="group.label"
+            >
+              <el-option
+                v-for="item in group.options"
+                :key="item.name"
+                :label="item.label"
+                :value="item.id"
+                :disabled="!item.is_available"
+              />
+            </el-option-group>
           </el-select>
-          <p class="text-gray-600 mt-[8px] font-light">
+          <p class="text-[#475467] mt-[8px] font-light">
             {{ $t('application_spaces.new.cloudResourceDesc1') }}
           </p>
-          <p class="text-gray-600 font-light">
+          <p class="text-[#475467] font-light">
             {{ $t('application_spaces.new.cloudResourceDesc2') }}
           </p>
         </el-form-item>
@@ -361,6 +367,12 @@
     visibility: 'public',
     sdk: 'gradio'
   })
+  const payModeMapping = {
+    "free": t('all.free'),
+    "minute": t('all.minutePay'),
+    "month": t('all.yearMonthPay'),
+    "year": t('all.yearMonthPay')
+  };
   const loading = ref(false)
 
   const rules = ref({
@@ -451,7 +463,7 @@
   }
 
   const fetchSpaceResources = async () => {
-    const { data, error } = await useFetchApi('/space_resources').json()
+    const { data, error } = await useFetchApi(`/space_resources?cluster_id=${dataForm.value.space_cluster}`).json()
 
     if (error.value) {
       ElMessage({
@@ -460,11 +472,35 @@
       })
     } else {
       const body = data.value
+      const allResources = body.data
       const firstAvailableResource = body.data.find(
         (item) => item.is_available
       )
       dataForm.value.cloud_resource = firstAvailableResource?.id || ''
-      spaceResources.value = body.data
+      const categories = {};
+      // Category data
+      allResources.forEach(item => {
+        const category = payModeMapping[item.pay_mode] || "Others"
+        if (!categories[category]) {
+          categories[category] = [];
+        }
+        if(item.pay_mode == "minute"){
+          item.label = `${item.name} ${item.price / 100}${t('all.hourUnit')}`
+        }else if(item.pay_mode == "month"){
+          item.label = `${item.name} ${item.price / 100}${t('all.monthUnit')}`
+        }else if(item.pay_mode == "year"){
+          item.label = `${item.name} ${item.price / 100}${t('all.yearUnit')}`
+        }else{
+          item.label = item.name
+        }
+        categories[category].push(item);
+      });
+      // Generate formatted options
+      const options = Object.keys(categories).map(category => ({
+        label: category,
+        options: categories[category],
+      }));
+      spaceResources.value = options
     }
   }
 
diff --git a/frontend/src/locales/en_js/all.js b/frontend/src/locales/en_js/all.js
index 943685a1b..cf884b203 100644
--- a/frontend/src/locales/en_js/all.js
+++ b/frontend/src/locales/en_js/all.js
@@ -84,5 +84,11 @@ export const all = {
   sdkTips: "Please register first and then obtain the Token from OpenCSG's account page",
   public: "Public",
   private: "Private",
-  parquet: "Dataset Preview"
+  parquet: "Dataset Preview",
+  free: "Free",
+  minutePay: "Pay-as-you-go",
+  yearMonthPay: "Yearly Subscription",
+  hourUnit:'¥/hour',
+  monthUnit:'¥/month',
+  yearUnit:'¥/year'
 }
\ No newline at end of file
diff --git a/frontend/src/locales/zh_js/all.js b/frontend/src/locales/zh_js/all.js
index 7e319f4a1..79a53accf 100644
--- a/frontend/src/locales/zh_js/all.js
+++ b/frontend/src/locales/zh_js/all.js
@@ -84,5 +84,11 @@ export const all = {
   sdkTips: "请先注册，然后从 OpenCSG 的账号页面获取 Token",
   public: "公开",
   private: "私有",
-  parquet: "数据集预览"
+  parquet: "数据集预览",
+  free: "免费",
+  minutePay: "按需付费",
+  yearMonthPay: "包年包月",
+  hourUnit:'元/时',
+  monthUnit:'元/月',
+  yearUnit:'元/年'
 }
\ No newline at end of file