diff --git a/devcloud/web/src/api/index.js b/devcloud/web/src/api/index.js
new file mode 100644
index 0000000..462f230
--- /dev/null
+++ b/devcloud/web/src/api/index.js
@@ -0,0 +1,9 @@
+import MCENTER_API from './mcenter'
+import MPAAS_API from './mppas'
+
+var API = {
+  mcenter: MCENTER_API,
+  mpaas: MPAAS_API,
+}
+
+export default API
diff --git a/devcloud/web/src/api/mcenter.js b/devcloud/web/src/api/mcenter.js
index b97ee2a..a26e1d1 100644
--- a/devcloud/web/src/api/mcenter.js
+++ b/devcloud/web/src/api/mcenter.js
@@ -1,9 +1,9 @@
 import client from './client'
 
-var API = {
+var MCENTER_API = {
   Login: (data) => {
     return client.post('/api/devcloud/v1/token', data)
   },
 }
 
-export default API
+export default MCENTER_API
diff --git a/devcloud/web/src/api/mppas.js b/devcloud/web/src/api/mppas.js
new file mode 100644
index 0000000..00cee91
--- /dev/null
+++ b/devcloud/web/src/api/mppas.js
@@ -0,0 +1,9 @@
+import client from './client'
+
+var MPAAS_API = {
+  AppList: (params) => {
+    return client.get('/api/devcloud/v1/applications', { params })
+  },
+}
+
+export default MPAAS_API
diff --git a/devcloud/web/src/pages/LoginPage.vue b/devcloud/web/src/pages/LoginPage.vue
index c9a8e79..572ce6d 100644
--- a/devcloud/web/src/pages/LoginPage.vue
+++ b/devcloud/web/src/pages/LoginPage.vue
@@ -74,7 +74,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import mcenter from '@/api/mcenter'
+import API from '@/api'
 import token from '@/storage/token'
 import { useRouter } from 'vue-router';
 
@@ -91,7 +91,7 @@ const router = useRouter();
 
 const handleSubmit = async (data) => {
   if (data.errors == null) {
-    const resp = await mcenter.Login(data.values);
+    const resp = await API.mcenter.Login(data.values);
     token.value = resp;
     router.push({ name: 'DashBoard' });
   }
diff --git a/devcloud/web/src/pages/develop/AppPage.vue b/devcloud/web/src/pages/develop/AppPage.vue
index d29e776..2f2f400 100644
--- a/devcloud/web/src/pages/develop/AppPage.vue
+++ b/devcloud/web/src/pages/develop/AppPage.vue
@@ -1,113 +1,75 @@
 <template>
-  <a-form layout="inline" :model="form">
-    <a-form-item label="Border" field="border">
-      <a-switch v-model="form.border" />
-    </a-form-item>
-    <a-form-item label="Hover" field="hover">
-      <a-switch v-model="form.hover" />
-    </a-form-item>
-    <a-form-item label="stripe" field="stripe">
-      <a-switch v-model="form.stripe" />
-    </a-form-item>
-    <a-form-item label="checkbox" field="checkbox">
-      <a-switch v-model="form.checkbox" />
-    </a-form-item>
-    <a-form-item label="checkAll" field="checkAll">
-      <a-switch v-model="rowSelection.showCheckedAll" />
-    </a-form-item>
-    <a-form-item label="loading" field="loading">
-      <a-switch v-model="form.loading" />
-    </a-form-item>
-    <a-form-item label="tableHeader" field="tableHeader">
-      <a-switch v-model="form.tableHeader" />
-    </a-form-item>
-    <a-form-item label="noData" field="noData">
-      <a-switch v-model="form.noData" />
-    </a-form-item>
+  <a-form layout="inline" :model="query">
+    <div>
+    </div>
+    <div>
+      <a-form-item label="Hover" field="hover">
+        <a-switch v-model="query.hover" />
+      </a-form-item>
+    </div>
   </a-form>
-  <a-table :columns="columns" :data="form.noData ? [] : data" :bordered="form.border" :hoverable="form.hover"
-    :stripe="form.stripe" :loading="form.loading" :show-header="form.tableHeader"
-    :row-selection="form.checkbox ? rowSelection : undefined" />
+  <a-table :data="data.items" :loading="fetchAppLoading">
+    <template #columns>
+      <a-table-column title="名称" data-index="name"></a-table-column>
+      <a-table-column title="描述" data-index="description"></a-table-column>
+      <a-table-column title="团队" data-index="label.team"></a-table-column>
+      <a-table-column title="创建时间" data-index="create_at"></a-table-column>
+      <a-table-column title="类型" data-index="type"></a-table-column>
+      <a-table-column title="仓库地址" data-index="code_repository.ssh_url"></a-table-column>
+      <a-table-column title="是否就绪" data-index="ready">
+        <template #cell="{ record }">
+          <a-switch type="round" disabled v-model="record.ready">
+            <template #checked>
+              就绪
+            </template>
+            <template #unchecked>
+              未就绪
+            </template>
+          </a-switch>
+        </template>
+      </a-table-column>
+      <a-table-column title="操作">
+        <template #cell="{ record }">
+          <a-space>
+            <a-button @click="editApp(record)">编辑</a-button>
+            <a-button @click="deleteApp(record)" type="primary">删除</a-button>
+          </a-space>
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
 </template>
 
-<script>
-import { reactive } from 'vue';
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import API from '@/api'
 
-export default {
-  setup() {
-    const form = reactive({
-      border: true,
-      borderCell: false,
-      hover: true,
-      stripe: false,
-      checkbox: true,
-      loading: false,
-      tableHeader: true,
-      noData: false
-    });
+const query = reactive({
+  page_size: 20,
+  page_number: 1,
 
-    const rowSelection = reactive({
-      type: 'checkbox',
-      showCheckedAll: true
-    });
+});
 
-    const columns = [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-      },
-      {
-        title: 'Salary',
-        dataIndex: 'salary',
-      },
-      {
-        title: 'Address',
-        dataIndex: 'address',
-      },
-      {
-        title: 'Email',
-        dataIndex: 'email',
-      },
-    ];
+// 通过API获取应用列表
+const data = ref({
+  items: [],
+  total: 0,
+});
+const fetchAppLoading = ref(false);
+const fetchAppList = async () => {
+  try {
+    fetchAppLoading.value = true;
+    const resp = await API.mpaas.AppList(query);
+    data.value = resp;
+    console.log('Fetched app list:', data.value);
+  } catch (error) {
+    console.error('Error fetching app list:', error);
+  } finally {
+    fetchAppLoading.value = false;
+  }
+};
 
-    const data = [{
-      key: '1',
-      name: 'Jane Doe',
-      salary: 23000,
-      address: '32 Park Road, London',
-      email: 'jane.doe@example.com'
-    }, {
-      key: '2',
-      name: 'Alisa Ross',
-      salary: 25000,
-      address: '35 Park Road, London',
-      email: 'alisa.ross@example.com'
-    }, {
-      key: '3',
-      name: 'Kevin Sandra',
-      salary: 22000,
-      address: '31 Park Road, London',
-      email: 'kevin.sandra@example.com'
-    }, {
-      key: '4',
-      name: 'Ed Hellen',
-      salary: 17000,
-      address: '42 Park Road, London',
-      email: 'ed.hellen@example.com'
-    }, {
-      key: '5',
-      name: 'William Smith',
-      salary: 27000,
-      address: '62 Park Road, London',
-      email: 'william.smith@example.com'
-    }];
-
-    return {
-      form,
-      rowSelection,
-      columns,
-      data
-    }
-  },
-}
+onMounted(() => {
+  fetchAppList();
+});
 </script>
diff --git a/devcloud/web/src/pages/project/components/ProjectCard.vue b/devcloud/web/src/pages/project/components/ProjectCard.vue
index 2f489de..dffda0a 100644
--- a/devcloud/web/src/pages/project/components/ProjectCard.vue
+++ b/devcloud/web/src/pages/project/components/ProjectCard.vue
@@ -1,10 +1,10 @@
 <template>
-  <a-card class="project-card" :style="{ borderTop: `4px solid ${statusColor}` }" hoverable>
+  <a-card class="project-card" hoverable>
     <a-card-meta :title="project.name">
       <template #description>
         <div class="project-meta">
           <div class="project-desc">{{ project.description }}</div>
-
+          <div class="project-desc">状态: {{ project.status }}</div>
           <div class="project-footer">
             <a-space>
               <a-avatar-group :max-count="3">
@@ -47,14 +47,14 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { } from 'vue';
 import {
   IconEdit,
   IconDelete,
   IconMore
 } from '@arco-design/web-vue/es/icon';
 
-const props = defineProps({
+defineProps({
   project: {
     type: Object,
     required: true,
@@ -71,14 +71,14 @@ const props = defineProps({
 
 defineEmits(['edit', 'delete', 'archive']);
 
-const statusColor = computed(() => {
-  const map = {
-    active: '#00B42A',
-    archived: '#86909C',
-    planning: '#FF7D00'
-  };
-  return map[props.project.status] || '#86909C';
-});
+// const statusColor = computed(() => {
+//   const map = {
+//     active: '#00B42A',
+//     archived: '#86909C',
+//     planning: '#FF7D00'
+//   };
+//   return map[props.project.status] || '#86909C';
+// });
 
 const formatDate = (timestamp) => {
   return new Date(timestamp).toLocaleDateString('zh-CN');
@@ -90,7 +90,7 @@ const formatDate = (timestamp) => {
   margin-bottom: 16px;
   border-radius: 4px;
   transition: all 0.2s;
-  height: 100%;
+  height: 220px;
 }
 
 .project-card:hover {