diff --git a/amoro-web/src/components/Sidebar.vue b/amoro-web/src/components/Sidebar.vue
index 04176cf8b7..e86cf12711 100644
--- a/amoro-web/src/components/Sidebar.vue
+++ b/amoro-web/src/components/Sidebar.vue
@@ -74,8 +74,8 @@ export default defineComponent({
           icon: 'catalogs',
         },
         {
-          key: 'optimizing',
-          title: t('optimizing'),
+          key: 'execution',
+          title: t('execution'),
           icon: 'optimizers',
         },
         {
diff --git a/amoro-web/src/hooks/usePlaceholder.ts b/amoro-web/src/hooks/usePlaceholder.ts
index 923d34e17d..33f948e4cd 100644
--- a/amoro-web/src/hooks/usePlaceholder.ts
+++ b/amoro-web/src/hooks/usePlaceholder.ts
@@ -31,6 +31,7 @@ export function usePlaceholder() {
   const passwordPh = computed(() => t('password')).value
   const filterDBPh = computed(() => t('database', 2)).value
   const filterTablePh = computed(() => t('table', 2)).value
+  const filterDbTblPh = computed(() => t('dbTbl', 2)).value
   const namePh = computed(() => t('name')).value
   const containerPh = computed(() => t('container')).value
   return {
@@ -48,6 +49,7 @@ export function usePlaceholder() {
     passwordPh: t('inputPlaceholder', { inputPh: passwordPh }),
     filterDBPh: t('filterPlaceholder', { inputPh: filterDBPh }),
     filterTablePh: t('filterPlaceholder', { inputPh: filterTablePh }),
+    filterDbTblPh: t('filterPlaceholder', { inputPh: filterDbTblPh }),
     groupNamePh: t('inputPlaceholder', { inputPh: namePh }),
     groupContainer: t('selectPlaceholder', { selectPh: containerPh }),
   }
diff --git a/amoro-web/src/language/en.ts b/amoro-web/src/language/en.ts
index 5ae29ed7de..44f351d88a 100644
--- a/amoro-web/src/language/en.ts
+++ b/amoro-web/src/language/en.ts
@@ -28,7 +28,12 @@ export default {
   catalogs: 'Catalogs',
   catalog: 'Catalog',
   tables: 'Tables',
+  dbTbl: 'DB Table',
+  processes: 'Processes',
+  activeProcesses: 'Active Processes',
+  summary: 'Summary',
   optimizing: 'Optimizing',
+  execution: 'Execution',
   terminal: 'Terminal',
   settings: 'Settings',
   systemSetting: 'System Settings',
diff --git a/amoro-web/src/language/zh.ts b/amoro-web/src/language/zh.ts
index 269bce77c1..f9292976cd 100644
--- a/amoro-web/src/language/zh.ts
+++ b/amoro-web/src/language/zh.ts
@@ -28,7 +28,9 @@ export default {
   catalogs: '目录',
   catalog: '目录',
   tables: '表',
+  dbTbl: '数据库表',
   optimizing: '优化',
+  execution: '执行',
   terminal: '终端',
   settings: '设置',
   systemSetting: '系统设置',
@@ -44,6 +46,9 @@ export default {
   database: '库',
   tableSize: '表大小',
   table: '表',
+  processes: '进程',
+  activeProcesses: '活跃进程',
+  summary: '摘要',
   size: '大小',
   file: '文件',
   files: '文件',
diff --git a/amoro-web/src/router/index.ts b/amoro-web/src/router/index.ts
index 734395410e..9bb25a0f33 100644
--- a/amoro-web/src/router/index.ts
+++ b/amoro-web/src/router/index.ts
@@ -31,6 +31,7 @@ const Settings = () => import('@/views/settings/index.vue')
 const Terminal = () => import('@/views/terminal/index.vue')
 const Login = () => import('@/views/login/index.vue')
 const Resource = () => import('@/views/resource/index.vue')
+const Execution = () => import('@/views/execution/index.vue')
 const Overview = () => import('@/views/overview/index.vue')
 
 const routes: Array<RouteRecordRaw> = [
@@ -70,9 +71,9 @@ const routes: Array<RouteRecordRaw> = [
         ],
       },
       {
-        path: 'optimizing',
-        name: 'Optimizing',
-        component: Resource,
+        path: 'execution',
+        name: 'Execution',
+        component: Execution,
       },
       {
         path: 'settings',
diff --git a/amoro-web/src/views/execution/components/CreateOptimizerModal.vue b/amoro-web/src/views/execution/components/CreateOptimizerModal.vue
new file mode 100644
index 0000000000..2e0081027e
--- /dev/null
+++ b/amoro-web/src/views/execution/components/CreateOptimizerModal.vue
@@ -0,0 +1,125 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+/ -->
+
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue'
+import { Modal as AModal } from 'ant-design-vue'
+import { usePlaceholder } from '@/hooks/usePlaceholder'
+import { createOptimizerResource, getOptimizerGroups } from '@/services/optimize.service'
+
+interface FormState {
+  resourceGroup: string
+  parallelism: number
+}
+
+const emit = defineEmits<{ (e: 'cancel'): void, (e: 'refresh'): void }>()
+
+const confirmLoading = ref<boolean>(false)
+const placeholder = reactive(usePlaceholder())
+const formRef = ref()
+const formState: FormState = reactive({
+  resourceGroup: '',
+  parallelism: 1,
+})
+
+const resourceGroupOptions = ref<{ label: string, value: string }[]>([])
+
+async function loadResourceGroups() {
+  try {
+    const response = await getOptimizerGroups()
+    resourceGroupOptions.value = response.map((group: any) => ({
+      label: group.optimizerGroupName,
+      value: group.optimizerGroupName,
+    }))
+  }
+  catch (error) {
+    console.error('Failed to load resource groups:', error)
+  }
+}
+
+function handleOk() {
+  formRef.value
+    .validateFields()
+    .then(async () => {
+      confirmLoading.value = true
+      await createOptimizerResource({
+        optimizerGroup: formState.resourceGroup || '',
+        parallelism: Number(formState.parallelism),
+      })
+      formRef.value.resetFields()
+      emit('cancel')
+      emit('refresh')
+      confirmLoading.value = false
+    })
+    .catch(() => {
+      confirmLoading.value = false
+    })
+}
+
+function handleCancel() {
+  formRef.value.resetFields()
+  emit('cancel')
+}
+
+onMounted(() => {
+  loadResourceGroups()
+})
+</script>
+
+<template>
+  <AModal
+    :open="true"
+    :title="$t('createOptimizer')"
+    :confirm-loading="confirmLoading"
+    :closable="false"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="formState" class="label-120">
+      <a-form-item
+        name="resourceGroup"
+        :label="$t('resourceGroup')"
+        :rules="[{ required: true, message: `${placeholder.resourceGroupPh}` }]"
+      >
+        <a-select
+          v-model:value="formState.resourceGroup"
+          :placeholder="placeholder.resourceGroupPh"
+        >
+          <a-select-option
+            v-for="option in resourceGroupOptions"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        name="parallelism"
+        :label="$t('parallelism')"
+        :rules="[{ required: true, message: `${placeholder.parallelismPh}` }]"
+      >
+        <a-input
+          v-model:value="formState.parallelism"
+          type="number"
+          :placeholder="placeholder.parallelismPh"
+        />
+      </a-form-item>
+    </a-form>
+  </AModal>
+</template>
diff --git a/amoro-web/src/views/execution/components/GroupModal.vue b/amoro-web/src/views/execution/components/GroupModal.vue
new file mode 100644
index 0000000000..56500c3aca
--- /dev/null
+++ b/amoro-web/src/views/execution/components/GroupModal.vue
@@ -0,0 +1,148 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+/ -->
+
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue'
+import { Modal as AModal, message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+import { usePlaceholder } from '@/hooks/usePlaceholder'
+import type { IIOptimizeGroupItem } from '@/types/common.type'
+import {
+  addResourceGroupsAPI,
+  getGroupContainerListAPI,
+  updateResourceGroupsAPI,
+} from '@/services/optimize.service'
+import Properties from '@/views/catalogs/Properties.vue'
+
+const props = defineProps<{
+  edit: boolean
+  editRecord: IIOptimizeGroupItem | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'cancel'): void
+  (e: 'refresh'): void
+}>()
+
+const { t } = useI18n()
+
+interface FormState {
+  name: string
+  container: undefined | string
+  properties: { [prop: string]: string }
+}
+
+const placeholder = reactive(usePlaceholder())
+const selectList = ref<{ containerList: any }>({ containerList: [] })
+async function getContainerList() {
+  const result = await getGroupContainerListAPI()
+  const list = (result || []).map((item: string) => ({
+    label: item,
+    value: item,
+  }))
+  selectList.value.containerList = list
+}
+
+const formState: FormState = reactive({
+  name: '',
+  container: undefined,
+  properties: {},
+})
+
+const confirmLoading = ref<boolean>(false)
+function handleCancel() {
+  emit('cancel')
+}
+
+const formRef = ref()
+const propertiesRef = ref()
+function handleOk() {
+  formRef.value.validateFields().then(async () => {
+    try {
+      const properties = await propertiesRef.value.getProperties()
+      const params = {
+        name: formState.name,
+        container: formState.container as string,
+        properties,
+      }
+      if (props.edit) {
+        await updateResourceGroupsAPI(params)
+      }
+      else {
+        await addResourceGroupsAPI(params)
+      }
+      message.success(`${t('save')} ${t('success')}`)
+      emit('refresh')
+    }
+    catch (error) {
+      message.error(`${t('save')} ${t('failed')}`)
+    }
+  })
+}
+
+onMounted(() => {
+  getContainerList()
+  if (props.edit) {
+    formState.name = props.editRecord?.name as string
+    formState.container = props.editRecord?.container
+    formState.properties = props.editRecord?.resourceGroup.properties as {
+      [props: string]: string
+    }
+  }
+})
+</script>
+
+<template>
+  <AModal
+    :open="true"
+    :title="edit ? $t('editGroup') : $t('addGroup')"
+    :confirm-loading="confirmLoading"
+    :closable="false"
+    class="group-modal"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="formState" class="label-120">
+      <a-form-item name="name" :label="$t('name')" :rules="[{ required: true, message: `${placeholder.groupNamePh}` }]">
+        <a-input v-model:value="formState.name" :placeholder="placeholder.groupNamePh" :disabled="edit" />
+      </a-form-item>
+      <a-form-item
+        name="container" :label="$t('container')"
+        :rules="[{ required: true, message: `${placeholder.groupContainer}` }]"
+      >
+        <a-select
+          v-model:value="formState.container" :show-search="true" :options="selectList.containerList"
+          :placeholder="placeholder.groupContainer"
+        />
+      </a-form-item>
+      <a-form-item :label="$t('properties')" />
+      <a-form-item>
+        <Properties ref="propertiesRef" :properties-obj="formState.properties" :is-edit="true" />
+      </a-form-item>
+    </a-form>
+  </AModal>
+</template>
+
+<style lang="less">
+.group-modal {
+  .ant-modal-body {
+    max-height: 600px;
+    overflow: auto;
+  }
+}
+</style>
diff --git a/amoro-web/src/views/execution/components/List.vue b/amoro-web/src/views/execution/components/List.vue
new file mode 100644
index 0000000000..908c7193be
--- /dev/null
+++ b/amoro-web/src/views/execution/components/List.vue
@@ -0,0 +1,269 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+/ -->
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref, shallowReactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Modal, message } from 'ant-design-vue'
+import type { IIOptimizeGroupItem, IOptimizeResourceTableItem } from '@/types/common.type'
+import { getOptimizerResourceList, getResourceGroupsListAPI, groupDeleteAPI, groupDeleteCheckAPI, releaseResource } from '@/services/optimize.service'
+import { usePagination } from '@/hooks/usePagination'
+import { dateFormat, mbToSize } from '@/utils'
+
+const props = defineProps<{ curGroupName?: string, type: string }>()
+
+const emit = defineEmits<{
+  (e: 'editGroup', record: IIOptimizeGroupItem): void
+  (e: 'refresh'): void
+  (e: 'refreshCurGroupInfo'): void
+}>()
+
+const { t } = useI18n()
+
+const STATUS_CONFIG = shallowReactive({
+  pending: { title: 'pending', color: '#ffcc00' },
+  planning: { title: 'planning', color: '#076de3' },
+  idle: { title: 'idle', color: '#c9cdd4' },
+  minor: { title: 'minor', color: '#0ad787' },
+  major: { title: 'major', color: '#0ad787' },
+  full: { title: 'full', color: '#0ad787' },
+  committing: { title: 'committing', color: '#0ad787' },
+})
+
+const loading = ref<boolean>(false)
+const releaseLoading = ref<boolean>(false)
+const tableColumns = shallowReactive([
+  { dataIndex: 'name', title: t('name'), ellipsis: true },
+  { dataIndex: 'container', title: t('container'), width: '23%', ellipsis: true },
+  { dataIndex: 'resourceOccupation', title: t('resourceOccupation'), width: '23%', ellipsis: true },
+  { dataIndex: 'operationGroup', title: t('operation'), key: 'operationGroup', ellipsis: true, width: 230, scopedSlots: { customRender: 'operationGroup' } },
+])
+const optimizerColumns = shallowReactive([
+  { dataIndex: 'jobId', title: t('optimizerId'), width: '15%', ellipsis: true },
+  { dataIndex: 'token', title: t('token'), width: '10%', ellipsis: true },
+  { dataIndex: 'groupName', title: t('optimizerGroup'), ellipsis: true },
+  { dataIndex: 'container', title: t('container'), ellipsis: true },
+  { dataIndex: 'jobStatus', title: t('status'), ellipsis: true },
+  { dataIndex: 'resourceAllocation', title: t('resourceAllocation'), width: '10%', ellipsis: true },
+  { dataIndex: 'startTime', title: t('startTime'), width: 172, ellipsis: true },
+  { dataIndex: 'touchTime', title: t('touchTime'), width: 172, ellipsis: true },
+  { dataIndex: 'operation', title: t('operation'), key: 'operation', ellipsis: true, width: 160, scopedSlots: { customRender: 'operationGroup' } },
+])
+const pagination = reactive(usePagination())
+const optimizersList = reactive<IOptimizeResourceTableItem[]>([])
+const groupList = reactive<IIOptimizeGroupItem[]>([])
+
+const columns = computed(() => {
+  return props.type === 'optimizers' ? optimizerColumns : tableColumns
+})
+
+const dataSource = computed(() => {
+  return props.type === 'optimizers' ? optimizersList : groupList
+})
+
+function refresh(resetPage?: boolean) {
+  if (resetPage) {
+    pagination.current = 1
+  }
+  if (props.type === 'optimizers') {
+    getOptimizersList()
+  }
+  else {
+    getResourceGroupsList()
+  }
+}
+
+function releaseModal(record: any) {
+  if (record.container === 'external') {
+    return
+  }
+  Modal.confirm({
+    title: t('releaseOptModalTitle'),
+    onOk: () => {
+      releaseJob(record)
+    },
+  })
+}
+async function releaseJob(record: IOptimizeResourceTableItem) {
+  try {
+    releaseLoading.value = true
+    await releaseResource({
+      optimizerGroup: record.groupName,
+      jobId: (record.jobId) as unknown as string,
+    })
+    refresh(true)
+    emit('refreshCurGroupInfo')
+  }
+  finally {
+    releaseLoading.value = false
+  }
+}
+
+async function getOptimizersList() {
+  try {
+    optimizersList.length = 0
+    loading.value = true
+    const params = {
+      optimizerGroup: 'all',
+      page: pagination.current,
+      pageSize: pagination.pageSize,
+    }
+    const result = await getOptimizerResourceList(params)
+    const { list, total } = result
+    pagination.total = total;
+    (list || []).forEach((p: IOptimizeResourceTableItem, index: number) => {
+      p.resourceAllocation = `${p.coreNumber} ${t('core')} ${mbToSize(p.memory)}`
+      p.index = (pagination.current - 1) * pagination.pageSize + index + 1
+      p.startTime = p.startTime ? dateFormat(p.startTime) : '-'
+      p.touchTime = p.touchTime ? dateFormat(p.touchTime) : '-'
+      optimizersList.push(p)
+    })
+  }
+  catch (error) {
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+async function getResourceGroupsList() {
+  try {
+    groupList.length = 0
+    loading.value = true
+    const result = await getResourceGroupsListAPI()
+    pagination.total = result.length;
+    (result || []).forEach((p: IIOptimizeGroupItem) => {
+      p.name = p.resourceGroup.name
+      p.container = p.resourceGroup.container
+      p.resourceOccupation = `${p.occupationCore} ${t('core')} ${mbToSize(p.occupationMemory)}`
+      groupList.push(p)
+    })
+  }
+  catch (error) {
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function editGroup(record: IIOptimizeGroupItem) {
+  emit('editGroup', record)
+}
+async function removeGroup(record: IIOptimizeGroupItem) {
+  const res = await groupDeleteCheckAPI({ name: record.name })
+  if (res) {
+    Modal.confirm({
+      title: t('deleteGroupModalTitle'),
+      onOk: async () => {
+        await groupDeleteAPI({ name: record.name })
+        message.success(`${t('remove')} ${t('success')}`)
+        refresh()
+      },
+    })
+    return
+  }
+  Modal.warning({
+    title: t('cannotDeleteGroupModalTitle'),
+    content: t('cannotDeleteGroupModalContent'),
+  })
+}
+
+function changeTable({ current = pagination.current, pageSize = pagination.pageSize }) {
+  pagination.current = current
+  const resetPage = pageSize !== pagination.pageSize
+  pagination.pageSize = pageSize
+  refresh(resetPage)
+}
+
+onMounted(() => {
+  refresh()
+})
+</script>
+
+<template>
+  <div class="list-wrap">
+    <a-table
+      class="ant-table-common"
+      :columns="columns"
+      :data-source="dataSource"
+      :pagination="pagination"
+      :loading="loading" @change="changeTable"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'durationDisplay'">
+          <span :title="record.durationDesc">
+            {{ record.durationDisplay }}
+          </span>
+        </template>
+        <template v-if="column.dataIndex === 'optimizeStatus'">
+          <span
+            :style="{ 'background-color': (STATUS_CONFIG[record.optimizeStatus as keyof typeof STATUS_CONFIG] as any)?.color }"
+            class="status-icon"
+          />
+          <span>{{ record.optimizeStatus }}</span>
+        </template>
+        <template v-if="column.dataIndex === 'operation'">
+          <span
+            class="primary-link" :class="{ disabled: record.container === 'external' }"
+            @click="releaseModal(record)"
+          >
+            {{ t('release') }}
+          </span>
+        </template>
+        <template v-if="column.dataIndex === 'operationGroup'">
+          <span class="primary-link g-mr-12" @click="editGroup(record)">
+            {{ t('edit') }}
+          </span>
+          <span class="primary-link" @click="removeGroup(record)">
+            {{ t('remove') }}
+          </span>
+        </template>
+      </template>
+    </a-table>
+  </div>
+  <u-loading v-if="releaseLoading" />
+</template>
+
+<style lang="less" scoped>
+.list-wrap {
+  .primary-link {
+    color: @primary-color;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.disabled {
+      color: #999;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .status-icon {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: #c9cdd4;
+    display: inline-block;
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/amoro-web/src/views/execution/components/ProcessList.vue b/amoro-web/src/views/execution/components/ProcessList.vue
new file mode 100644
index 0000000000..5b8c043a81
--- /dev/null
+++ b/amoro-web/src/views/execution/components/ProcessList.vue
@@ -0,0 +1,286 @@
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+/ -->
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref, shallowReactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { Modal } from 'ant-design-vue'
+import type { IIOptimizeGroupItem, ILableAndValue, IOptimizeResourceTableItem, IOptimizeTableItem } from '@/types/common.type'
+import { getOptimizerAction, getOptimizerTableList, getResourceGroupsListAPI, releaseResource } from '@/services/optimize.service'
+import { usePagination } from '@/hooks/usePagination'
+import { usePlaceholder } from '@/hooks/usePlaceholder'
+import { bytesToSize, formatMS2DisplayTime, formatMS2Time } from '@/utils'
+import { getTableMaxWidth } from '@/utils/table'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const STATUS_CONFIG = shallowReactive({
+  pending: { title: 'pending', color: '#ffcc00' },
+  planning: { title: 'planning', color: '#076de3' },
+  idle: { title: 'idle', color: '#c9cdd4' },
+  minor: { title: 'minor', color: '#0ad787' },
+  major: { title: 'major', color: '#0ad787' },
+  full: { title: 'full', color: '#0ad787' },
+  committing: { title: 'committing', color: '#0ad787' },
+})
+
+const loading = ref<boolean>(false)
+const releaseLoading = ref<boolean>(false)
+const optimizerGroupList = ref<ILableAndValue[]>([])
+
+const columns = computed(() => [
+  { dataIndex: 'tableName', title: t('table'), width: 300, scopedSlots: { customRender: 'tableName' } },
+    { dataIndex: 'type', title: t('type'), width: 180, ellipsis: true },
+    { dataIndex: 'status', title: t('status'), width: 180, ellipsis: true },
+    { dataIndex: 'duration', title: t('duration'), width: 150, ellipsis: true },
+    { dataIndex: 'quota', title: t('quota'), width: 150, ellipsis: true },
+    { dataIndex: 'quotaOccupation', title: t('occupation'), width: 120, ellipsis: true },
+    { dataIndex: 'summary', title: t('summary'), width: 150, ellipsis: true },
+])
+
+const pagination = reactive(usePagination())
+const dataSource = ref<IOptimizeTableItem[]>([])
+const optimizerGroup = ref<ILableAndValue>()
+const actions = ref<string[]>()
+const dbSearchInput = ref<ILableAndValue>()
+const tableSearchInput = ref<ILableAndValue>()
+const placeholder = reactive(usePlaceholder())
+
+const actionOptions = ref<string[]>([])
+async function fetchOptimizerAction() {
+  try {
+    const res = await getOptimizerAction()
+    actionOptions.value = (res || []).map((value: string) => ({ label: value, value }))
+  }
+  catch (error) {
+  }
+}
+
+async function getOptimizerGroupList() {
+  const res = await getResourceGroupsListAPI()
+  const list = (res || []).map((item: IIOptimizeGroupItem) => ({ lable: item.resourceGroup.name, value: item.resourceGroup.name }))
+  optimizerGroupList.value = list
+}
+
+function refresh(resetPage?: boolean) {
+  if (resetPage) {
+    pagination.current = 1
+  }
+  getTableList()
+}
+
+async function getTableList() {
+  try {
+    loading.value = true
+    const params = {
+      optimizerGroup: optimizerGroup.value ? encodeURIComponent(optimizerGroup.value) : 'all',
+      dbSearchInput: dbSearchInput.value || '',
+      tableSearchInput: tableSearchInput.value || '',
+      page: pagination.current,
+      pageSize: pagination.pageSize,
+      actions: actions.value,
+    }
+    const result = await getOptimizerTableList(params as any)
+    const { list, total } = result
+    pagination.total = total
+    dataSource.value = (list || []).map((p: IOptimizeTableItem) => {
+      return {
+        ...p,
+        quotaOccupationDesc: p.quotaOccupation - 0.0005 > 0 ? `${(p.quotaOccupation * 100).toFixed(1)}%` : '0',
+        durationDesc: p.duration ? formatMS2DisplayTime(p.duration) : '-',
+        fileSizeDesc: bytesToSize(p.fileSize),
+      }
+    })
+  }
+  catch (error) {
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function releaseModal(record: any) {
+  if (record.container === 'external') {
+    return
+  }
+  Modal.confirm({
+    title: t('releaseOptModalTitle'),
+    onOk: () => {
+      releaseJob(record)
+    },
+  })
+}
+async function releaseJob(record: IOptimizeResourceTableItem) {
+  try {
+    releaseLoading.value = true
+    await releaseResource({
+      optimizerGroup: record.groupName,
+      jobId: record.jobId as unknown as string,
+    })
+    refresh(true)
+  }
+  finally {
+    releaseLoading.value = false
+  }
+}
+function changeTable({ current = pagination.current, pageSize = pagination.pageSize }) {
+  pagination.current = current
+  const resetPage = pageSize !== pagination.pageSize
+  pagination.pageSize = pageSize
+
+  refresh(resetPage)
+}
+
+function goTableDetail(record: IOptimizeTableItem) {
+  const { catalog, database, tableName } = record.tableIdentifier
+  router.push({
+    path: '/tables',
+    query: {
+      catalog,
+      db: database,
+      table: tableName,
+    },
+  })
+}
+
+function reset() {
+  optimizerGroup.value = undefined
+  dbSearchInput.value = undefined
+  tableSearchInput.value = undefined
+  actions.value = undefined
+  refresh(true)
+}
+
+onMounted(async () => {
+  refresh()
+  await getOptimizerGroupList()
+  await fetchOptimizerAction()
+})
+</script>
+
+<template>
+  <div class="list-wrap">
+    <a-space class="filter-form">
+      <a-input
+        v-model:value="dbSearchInput"
+        :placeholder="placeholder.filterDBPh"
+      />
+
+      <a-input
+        v-model:value="tableSearchInput"
+        :placeholder="placeholder.filterTablePh"
+      />
+
+      <a-select
+        v-model:value="actions" allow-clear placeholder="Types" :options="actionOptions" mode="multiple"
+        style="min-width: 150px;"
+      />
+
+      <a-button type="primary" @click="refresh">
+        {{ t('search') }}
+      </a-button>
+      <a-button @click="reset">
+        {{ t('reset') }}
+      </a-button>
+    </a-space>
+    <a-table
+      :columns="columns"
+      :data-source="dataSource"
+      :pagination="pagination"
+      :loading="loading"
+      :scroll="{ x: getTableMaxWidth(columns) }"
+      class="ant-table-common"
+      @change="changeTable"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'tableName'">
+          <a-typography-text
+            style="display: block;"
+            :ellipsis="{
+              tooltip: record.tableName,
+            }"
+            class="primary-link"
+            :content="record.tableName"
+            @click="goTableDetail(record)"
+          />
+        </template>
+        <template v-if="column.dataIndex === 'duration'">
+          <span :title="record.durationDesc">
+            {{ formatMS2Time(record.duration || 0) }}
+          </span>
+        </template>
+        <template v-if="column.dataIndex === 'quotaOccupation'">
+          <span :title="record.quotaOccupationDesc">
+            {{ record.quotaOccupationDesc }}
+          </span>
+        </template>
+        <template v-if="column.dataIndex === 'optimizeStatus'">
+          <span
+            :style="{ 'background-color': (STATUS_CONFIG[record.optimizeStatus as keyof typeof STATUS_CONFIG] as any)?.color }"
+            class="status-icon"
+          />
+          <span>{{ record.optimizeStatus }}</span>
+        </template>
+        <template v-if="column.dataIndex === 'operation'">
+          <span class="primary-link" :class="{ disabled: record.container === 'external' }" @click="releaseModal(record)">
+            {{ t('release') }}
+          </span>
+        </template>
+      </template>
+    </a-table>
+  </div>
+  <u-loading v-if="releaseLoading" />
+</template>
+
+<style lang="less" scoped>
+.list-wrap {
+
+  .filter-form {
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+  .primary-link {
+    color: @primary-color;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.disabled {
+      color: #999;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .status-icon {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: #c9cdd4;
+    display: inline-block;
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/amoro-web/src/views/execution/components/ScaleOut.vue b/amoro-web/src/views/execution/components/ScaleOut.vue
new file mode 100644
index 0000000000..001d403565
--- /dev/null
+++ b/amoro-web/src/views/execution/components/ScaleOut.vue
@@ -0,0 +1,99 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+/ -->
+
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue'
+import { Modal as AModal } from 'ant-design-vue'
+import { usePlaceholder } from '@/hooks/usePlaceholder'
+import type { IIOptimizeGroupItem } from '@/types/common.type'
+import { scaleoutResource } from '@/services/optimize.service'
+
+interface FormState {
+  resourceGroup: undefined | string
+  parallelism: number
+}
+
+const props = defineProps<{ groupRecord: IIOptimizeGroupItem }>()
+
+const emit = defineEmits<{
+  (e: 'cancel'): void
+  (e: 'refresh'): void
+}>()
+
+const confirmLoading = ref<boolean>(false)
+const placeholder = reactive(usePlaceholder())
+const formRef = ref()
+const formState: FormState = reactive({
+  resourceGroup: props.groupRecord?.name || '',
+  parallelism: 1,
+})
+
+function handleOk() {
+  formRef.value
+    .validateFields()
+    .then(async () => {
+      confirmLoading.value = true
+      await scaleoutResource({
+        optimizerGroup: formState.resourceGroup || '',
+        parallelism: Number(formState.parallelism),
+      })
+      formRef.value.resetFields()
+      emit('cancel')
+      emit('refresh')
+      confirmLoading.value = false
+    })
+    .catch(() => {
+      confirmLoading.value = false
+    })
+}
+
+function handleCancel() {
+  formRef.value.resetFields()
+  emit('cancel')
+}
+onMounted(() => {
+})
+</script>
+
+<template>
+  <AModal
+    :open="true"
+    :title="$t('scaleOut')"
+    :confirm-loading="confirmLoading"
+    :closable="false"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="formState" class="label-120">
+      <a-form-item name="resourceGroup" :label="$t('resourceGroup')">
+        {{ formState.resourceGroup }}
+      </a-form-item>
+      <a-form-item
+        name="parallelism"
+        :label="$t('parallelism')"
+        :rules="[{ required: true, message: `${placeholder.parallelismPh}` }]"
+      >
+        <a-input
+          v-model:value="formState.parallelism"
+          type="number"
+          :placeholder="placeholder.parallelismPh"
+        />
+      </a-form-item>
+    </a-form>
+  </AModal>
+</template>
diff --git a/amoro-web/src/views/execution/components/TableList.vue b/amoro-web/src/views/execution/components/TableList.vue
new file mode 100644
index 0000000000..2866bf2f27
--- /dev/null
+++ b/amoro-web/src/views/execution/components/TableList.vue
@@ -0,0 +1,284 @@
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+/ -->
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref, shallowReactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { Modal } from 'ant-design-vue'
+import type { IIOptimizeGroupItem, ILableAndValue, IOptimizeResourceTableItem, IOptimizeTableItem } from '@/types/common.type'
+import { getOptimizerAction, getOptimizerTableList, getResourceGroupsListAPI, releaseResource } from '@/services/optimize.service'
+import { usePagination } from '@/hooks/usePagination'
+import { usePlaceholder } from '@/hooks/usePlaceholder'
+import { bytesToSize, formatMS2DisplayTime, formatMS2Time } from '@/utils'
+import { getTableMaxWidth } from '@/utils/table'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const STATUS_CONFIG = shallowReactive({
+  pending: { title: 'pending', color: '#ffcc00' },
+  planning: { title: 'planning', color: '#076de3' },
+  idle: { title: 'idle', color: '#c9cdd4' },
+  minor: { title: 'minor', color: '#0ad787' },
+  major: { title: 'major', color: '#0ad787' },
+  full: { title: 'full', color: '#0ad787' },
+  committing: { title: 'committing', color: '#0ad787' },
+})
+
+const loading = ref<boolean>(false)
+const releaseLoading = ref<boolean>(false)
+const optimizerGroupList = ref<ILableAndValue[]>([])
+
+const columns = computed(() => [
+  { dataIndex: 'tableName', title: t('table'), width: 300, scopedSlots: { customRender: 'tableName' } },
+  { dataIndex: 'groupName', title: t('optimizerGroup'), width: 180, ellipsis: true },
+  { dataIndex: 'activeProcesses', title: t('activeProcesses'), width: 150, ellipsis: true },
+  { dataIndex: 'quota', title: t('quota'), width: 150, ellipsis: true },
+  { dataIndex: 'quotaOccupation', title: t('occupation'), width: 120, ellipsis: true },
+])
+
+const pagination = reactive(usePagination())
+const dataSource = ref<IOptimizeTableItem[]>([])
+const optimizerGroup = ref<ILableAndValue>()
+const actions = ref<string[]>()
+const dbSearchInput = ref<ILableAndValue>()
+const tableSearchInput = ref<ILableAndValue>()
+const placeholder = reactive(usePlaceholder())
+
+const actionOptions = ref<string[]>([])
+async function fetchOptimizerAction() {
+  try {
+    const res = await getOptimizerAction()
+    actionOptions.value = (res || []).map((value: string) => ({ label: value, value }))
+  }
+  catch (error) {
+  }
+}
+
+async function getOptimizerGroupList() {
+  const res = await getResourceGroupsListAPI()
+  const list = (res || []).map((item: IIOptimizeGroupItem) => ({ lable: item.resourceGroup.name, value: item.resourceGroup.name }))
+  optimizerGroupList.value = list
+}
+
+function refresh(resetPage?: boolean) {
+  if (resetPage) {
+    pagination.current = 1
+  }
+  getTableList()
+}
+
+async function getTableList() {
+  try {
+    loading.value = true
+    const params = {
+      optimizerGroup: optimizerGroup.value ? encodeURIComponent(optimizerGroup.value) : 'all',
+      dbSearchInput: dbSearchInput.value || '',
+      tableSearchInput: tableSearchInput.value || '',
+      page: pagination.current,
+      pageSize: pagination.pageSize,
+      actions: actions.value,
+    }
+    const result = await getOptimizerTableList(params as any)
+    const { list, total } = result
+    pagination.total = total
+    dataSource.value = (list || []).map((p: IOptimizeTableItem) => {
+      return {
+        ...p,
+        quotaOccupationDesc: p.quotaOccupation - 0.0005 > 0 ? `${(p.quotaOccupation * 100).toFixed(1)}%` : '0',
+        durationDesc: p.duration ? formatMS2DisplayTime(p.duration) : '-',
+        fileSizeDesc: bytesToSize(p.fileSize),
+      }
+    })
+  }
+  catch (error) {
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function releaseModal(record: any) {
+  if (record.container === 'external') {
+    return
+  }
+  Modal.confirm({
+    title: t('releaseOptModalTitle'),
+    onOk: () => {
+      releaseJob(record)
+    },
+  })
+}
+async function releaseJob(record: IOptimizeResourceTableItem) {
+  try {
+    releaseLoading.value = true
+    await releaseResource({
+      optimizerGroup: record.groupName,
+      jobId: record.jobId as unknown as string,
+    })
+    refresh(true)
+  }
+  finally {
+    releaseLoading.value = false
+  }
+}
+function changeTable({ current = pagination.current, pageSize = pagination.pageSize }) {
+  pagination.current = current
+  const resetPage = pageSize !== pagination.pageSize
+  pagination.pageSize = pageSize
+
+  refresh(resetPage)
+}
+
+function goTableDetail(record: IOptimizeTableItem) {
+  const { catalog, database, tableName } = record.tableIdentifier
+  router.push({
+    path: '/tables',
+    query: {
+      catalog,
+      db: database,
+      table: tableName,
+    },
+  })
+}
+
+function reset() {
+  optimizerGroup.value = undefined
+  dbSearchInput.value = undefined
+  tableSearchInput.value = undefined
+  actions.value = undefined
+  refresh(true)
+}
+
+onMounted(async () => {
+  refresh()
+  await getOptimizerGroupList()
+  await fetchOptimizerAction()
+})
+</script>
+
+<template>
+  <div class="list-wrap">
+    <a-space class="filter-form">
+      <a-select
+        v-model:value="optimizerGroup" allow-clear placeholder="Optimizer group" :options="optimizerGroupList"
+        style="min-width: 150px;"
+      />
+
+      <a-input
+        v-model:value="dbSearchInput"
+        :placeholder="placeholder.filterDBPh"
+      />
+
+      <a-input
+        v-model:value="tableSearchInput"
+        :placeholder="placeholder.filterTablePh"
+      />
+
+      <a-button type="primary" @click="refresh">
+        {{ t('search') }}
+      </a-button>
+      <a-button @click="reset">
+        {{ t('reset') }}
+      </a-button>
+    </a-space>
+    <a-table
+      :columns="columns"
+      :data-source="dataSource"
+      :pagination="pagination"
+      :loading="loading"
+      :scroll="{ x: getTableMaxWidth(columns) }"
+      class="ant-table-common"
+      @change="changeTable"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'tableName'">
+          <a-typography-text
+            style="display: block;"
+            :ellipsis="{
+              tooltip: record.tableName,
+            }"
+            class="primary-link"
+            :content="record.tableName"
+            @click="goTableDetail(record)"
+          />
+        </template>
+        <template v-if="column.dataIndex === 'duration'">
+          <span :title="record.durationDesc">
+            {{ formatMS2Time(record.duration || 0) }}
+          </span>
+        </template>
+        <template v-if="column.dataIndex === 'quotaOccupation'">
+          <span :title="record.quotaOccupationDesc">
+            {{ record.quotaOccupationDesc }}
+          </span>
+        </template>
+        <template v-if="column.dataIndex === 'optimizeStatus'">
+          <span
+            :style="{ 'background-color': (STATUS_CONFIG[record.optimizeStatus as keyof typeof STATUS_CONFIG] as any)?.color }"
+            class="status-icon"
+          />
+          <span>{{ record.optimizeStatus }}</span>
+        </template>
+        <template v-if="column.dataIndex === 'operation'">
+          <span class="primary-link" :class="{ disabled: record.container === 'external' }" @click="releaseModal(record)">
+            {{ t('release') }}
+          </span>
+        </template>
+      </template>
+    </a-table>
+  </div>
+  <u-loading v-if="releaseLoading" />
+</template>
+
+<style lang="less" scoped>
+.list-wrap {
+
+  .filter-form {
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+  .primary-link {
+    color: @primary-color;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.disabled {
+      color: #999;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .status-icon {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: #c9cdd4;
+    display: inline-block;
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/amoro-web/src/views/execution/index.vue b/amoro-web/src/views/execution/index.vue
new file mode 100644
index 0000000000..7192fe5ccd
--- /dev/null
+++ b/amoro-web/src/views/execution/index.vue
@@ -0,0 +1,233 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+/ -->
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  shallowReactive,
+  toRefs,
+  watch,
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import TableList from './components/TableList.vue'
+import ProcessList from './components/ProcessList.vue'
+import List from './components/List.vue'
+import { usePlaceholder } from '@/hooks/usePlaceholder'
+import { usePagination } from '@/hooks/usePagination'
+import type { IIOptimizeGroupItem, ILableAndValue } from '@/types/common.type'
+import GroupModal from '@/views/execution/components/GroupModal.vue'
+import CreateOptimizerModal from '@/views/execution/components/CreateOptimizerModal.vue'
+
+export default defineComponent({
+  name: 'Resource',
+  components: {
+    List,
+    GroupModal,
+    TableList,
+    ProcessList,
+    CreateOptimizerModal,
+  },
+  setup() {
+    const { t } = useI18n()
+    const router = useRouter()
+    const route = useRoute()
+    const tabConfig: ILableAndValue[] = shallowReactive([
+      { label: t('optimizerGroups'), value: 'optimizerGroups' },
+      { label: t('optimizers'), value: 'optimizers' },
+    ])
+    const placeholder = reactive(usePlaceholder())
+    const pagination = reactive(usePagination())
+    const state = reactive({
+      activeTab: 'optimizerGroups' as string,
+      showGroupModal: false as boolean,
+      groupEdit: false,
+      groupEditRecord: {
+        resourceGroup: {
+          name: '',
+          container: '',
+          properties: {},
+        },
+        occupationCore: 0,
+        occupationMemory: 0,
+        name: '',
+        container: '',
+        resourceOccupation: '',
+      },
+      groupKeyCount: 1,
+      showTab: false as boolean,
+      showCreateOptimizer: false as boolean,
+      optimizerEdit: false,
+      optimizerEditRecord: null,
+    })
+
+    watch(
+      () => route.query,
+      (value) => {
+        state.activeTab = (value.tab as string) || 'tables'
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    const editGroup = (editRecord: IIOptimizeGroupItem | null) => {
+      if (editRecord) {
+        state.groupEdit = true
+        state.groupEditRecord = { ...editRecord }
+      }
+      else {
+        state.groupEdit = false
+      }
+      state.showGroupModal = true
+    }
+
+    const createOptimizer = (editRecord: any | null) => {
+      if (editRecord) {
+        state.optimizerEdit = true
+        state.optimizerEditRecord = { ...editRecord }
+      }
+      else {
+        state.optimizerEdit = false
+      }
+      state.showCreateOptimizer = true
+    }
+
+    const onChangeTab = (key: string) => {
+      const query = { ...route.query }
+      query.tab = key
+      router.replace({ query: { ...query } })
+    }
+
+    onMounted(() => {
+      state.showTab = true
+    })
+
+    return {
+      placeholder,
+      pagination,
+      ...toRefs(state),
+      tabConfig,
+      onChangeTab,
+      editGroup,
+      createOptimizer,
+      t,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="border-wrap">
+    <div class="resource-wrap">
+      <div class="content">
+        <a-tabs
+          v-model:activeKey="activeTab"
+          destroy-inactive-tab-pane
+          @change="onChangeTab"
+        >
+          <a-tab-pane
+            key="tables"
+            :tab="t('tables')"
+            :class="[activeTab === 'tables' ? 'active' : '']"
+          >
+            <TableList />
+          </a-tab-pane>
+          <a-tab-pane
+              key="processes"
+              :tab="t('processes')"
+              :class="[activeTab === 'processes' ? 'active' : '']"
+          >
+            <ProcessList />
+          </a-tab-pane>
+          <a-tab-pane
+            key="optimizers"
+            :tab="t('optimizers')"
+            :class="[activeTab === 'optimizers' ? 'active' : '']"
+          >
+            <a-button type="primary" class="g-mb-16" @click="createOptimizer(null)">
+              {{ t("createOptimizer") }}
+            </a-button>
+            <List type="optimizers" />
+          </a-tab-pane>
+          <a-tab-pane
+            key="optimizerGroups"
+            :tab="t('optimizerGroups')"
+            :class="[activeTab === 'optimizerGroups' ? 'active' : '']"
+          >
+            <a-button type="primary" class="g-mb-16" @click="editGroup(null)">
+              {{ t("addGroup") }}
+            </a-button>
+            <List
+              :key="groupKeyCount"
+              type="optimizerGroups"
+              @edit-group="editGroup"
+            />
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </div>
+    <GroupModal
+      v-if="showGroupModal"
+      :edit="groupEdit"
+      :edit-record="groupEditRecord"
+      @cancel="showGroupModal = false"
+      @refresh="
+        groupKeyCount++;
+        showGroupModal = false;
+      "
+    />
+    <CreateOptimizerModal
+      v-if="showCreateOptimizer"
+      @cancel="showCreateOptimizer = false"
+      @refresh="showCreateOptimizer = false"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.border-wrap {
+  padding: 16px 24px;
+  height: 100%;
+}
+.resource-wrap {
+  height: 100%;
+  overflow-y: auto;
+  .status-icon {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+  }
+  .tabs {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    padding: 0 12px;
+    border: 1px solid #e5e5e5;
+  }
+  .table-name {
+    color: @primary-color;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/amoro-web/src/views/resource/index.vue b/amoro-web/src/views/resource/index.vue
index d4ab7ab4fa..08996ad994 100644
--- a/amoro-web/src/views/resource/index.vue
+++ b/amoro-web/src/views/resource/index.vue
@@ -148,6 +148,13 @@ export default defineComponent({
           >
             <TableList />
           </a-tab-pane>
+          <a-tab-pane
+              key="processes"
+              :tab="t('processes')"
+              :class="[activeTab === 'processes' ? 'active' : '']"
+          >
+            <TableList />
+          </a-tab-pane>
           <a-tab-pane
             key="optimizers"
             :tab="t('optimizers')"