diff --git a/streampark-console/streampark-console-webapp/src/api/flink/catalog.ts b/streampark-console/streampark-console-webapp/src/api/flink/catalog.ts
new file mode 100644
index 0000000000..828eedd9db
--- /dev/null
+++ b/streampark-console/streampark-console-webapp/src/api/flink/catalog.ts
@@ -0,0 +1,53 @@
+import { defHttp } from '/@/utils/http/axios';
+import { CatalogParams, DatabaseParams, TableParams } from './catalog.type';
+
+enum API {
+  CATALOG_LIST = '/flink/catalog/list',
+  CATALOG_CREATE = '/flink/catalog/create',
+  CATALOG_DELETE = '/flink/catalog/delete',
+  DATABASE_LIST = '/flink/database/list',
+  DATABASE_CREATE = '/flink/database/create',
+  DATABASE_DELETE = '/flink/database/delete',
+  TABLE_LIST = '/flink/table/list',
+  TABLE_CREATE = '/flink/table/create',
+  TABLE_DELETE = '/flink/table/delete',
+}
+
+
+export function fetchCatalogList(params?: any) {
+  return defHttp.post({ url: API.CATALOG_LIST, params });
+}
+
+export function fetchCreateCatalog(data: CatalogParams) {
+  return defHttp.post({ url: API.CATALOG_CREATE, data });
+}
+
+export function fetchRemoveCatalog(id: string) {
+  return defHttp.post({ url: API.CATALOG_DELETE, data: { id } });
+}
+
+
+export function fetchDatabaseList(params: { catalogId: string }) {
+  return defHttp.post({ url: API.DATABASE_LIST, params });
+}
+
+export function fetchCreateDatabase(data: DatabaseParams) {
+  return defHttp.post({ url: API.DATABASE_CREATE, data });
+}
+
+export function fetchRemoveDatabase(data: { catalogId: string; name: string }) {
+  return defHttp.post({ url: API.DATABASE_DELETE, data });
+}
+
+
+export function fetchTableList(params: { catalogId: string; databaseName: string }) {
+  return defHttp.post({ url: API.TABLE_LIST, params });
+}
+
+export function fetchCreateTable(data: TableParams) {
+  return defHttp.post({ url: API.TABLE_CREATE, data });
+}
+
+export function fetchRemoveTable(data: { catalogId: string; databaseName: string; name: string }) {
+  return defHttp.post({ url: API.TABLE_DELETE, data });
+}
diff --git a/streampark-console/streampark-console-webapp/src/api/flink/catalog.type.ts b/streampark-console/streampark-console-webapp/src/api/flink/catalog.type.ts
new file mode 100644
index 0000000000..ed3669e5ed
--- /dev/null
+++ b/streampark-console/streampark-console-webapp/src/api/flink/catalog.type.ts
@@ -0,0 +1,54 @@
+export interface CatalogParams {
+  catalogName: string;
+  catalogType: string;
+  description?: string;
+  config?: Record<string, string>;
+}
+
+export interface CatalogRecord {
+  id: string;
+  catalogName: string;
+  catalogType: string;
+  createTime: string;
+  updateTime: string;
+}
+
+export interface DatabaseParams {
+  name: string;
+  catalogId: string;
+  catalogName?: string;
+  description?: string;
+  ignoreIfExits?: boolean;
+}
+
+export interface DatabaseRecord {
+  name: string;
+  catalogId: string;
+  catalogName: string;
+  description?: string;
+}
+
+export interface TableColumn {
+  name: string;
+  type: string;
+  comment?: string;
+}
+
+export interface TableParams {
+  catalogId: string;
+  catalogName?: string;
+  databaseName: string;
+  name: string;
+  description?: string;
+  tableColumns?: TableColumn[];
+  partitionKey?: string[];
+  tableOptions?: Record<string, string>;
+}
+
+export interface TableRecord {
+  name: string;
+  catalogId: string;
+  catalogName: string;
+  databaseName: string;
+  description?: string;
+}
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/catalog.ts b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/catalog.ts
new file mode 100644
index 0000000000..89fb0e02c5
--- /dev/null
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/catalog.ts
@@ -0,0 +1,9 @@
+export default {
+  browser: 'Catalog Browser',
+  tableInfo: 'Table Information',
+  tableName: 'Table Name',
+  tableList: 'Table List',
+  selectDbHint: 'Please select a database from the left tree',
+  catalogName: 'Catalog Name',
+  databaseName: 'Database Name',
+};
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/catalog.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/catalog.ts
new file mode 100644
index 0000000000..bc224b8c8d
--- /dev/null
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/catalog.ts
@@ -0,0 +1,9 @@
+export default {
+  browser: 'Catalog 浏览',
+  tableInfo: '表信息',
+  tableName: '表名称',
+  tableList: '表列表',
+  selectDbHint: '请从左侧树中选择一个数据库',
+  catalogName: 'Catalog 名称',
+  databaseName: '数据库名称',
+};
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/catalog/View.vue b/streampark-console/streampark-console-webapp/src/views/flink/catalog/View.vue
new file mode 100644
index 0000000000..74e933a156
--- /dev/null
+++ b/streampark-console/streampark-console-webapp/src/views/flink/catalog/View.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup name="CatalogView">
+  import { ref, onMounted } from 'vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Card, Empty } from 'ant-design-vue';
+  import { BasicTree } from '/@/components/Tree';
+  import { fetchCatalogList, fetchDatabaseList, fetchTableList } from '/@/api/flink/catalog';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  const { t } = useI18n();
+  const treeData = ref<any[]>([]);
+  const currentCatalogId = ref<string>('');
+  const currentDatabaseName = ref<string>('');
+
+  const [registerTable, { reload, setColumns }] = useTable({
+    title: t('flink.catalog.tableList'),
+    api: fetchTableList,
+    columns: [
+      { dataIndex: 'name', title: t('flink.catalog.tableName') },
+      { dataIndex: 'description', title: t('common.description') },
+    ],
+    beforeFetch: (params) => {
+      params.catalogId = currentCatalogId.value;
+      params.databaseName = currentDatabaseName.value;
+      return params;
+    },
+    immediate: false,
+    useSearchForm: false,
+    showTableSetting: true,
+    canResize: true,
+  });
+
+  async function loadTree() {
+    const catalogs = await fetchCatalogList();
+    if (!catalogs) return;
+
+    treeData.value = await Promise.all(
+      catalogs.map(async (catalog) => {
+        const dbs = await fetchDatabaseList({ catalogId: catalog.id });
+        return {
+          title: catalog.catalogName,
+          key: catalog.id,
+          children: dbs?.map((db) => ({
+            title: db.name,
+            key: `${catalog.id}:${db.name}`,
+            isLeaf: true,
+            catalogId: catalog.id,
+            dbName: db.name,
+          })),
+        };
+      }),
+    );
+  }
+
+  function handleSelect(keys: string[], { node }) {
+    if (keys.length === 0) return;
+    if (node.dataRef.children) {
+      // It's a catalog, maybe expand?
+      return;
+    }
+    // It's a database
+    currentCatalogId.value = node.dataRef.catalogId;
+    currentDatabaseName.value = node.dataRef.dbName;
+    reload();
+  }
+
+  onMounted(() => {
+    loadTree();
+  });
+</script>
+
+<template>
+  <PageWrapper contentFullHeight class="flex p-4">
+    <Card class="w-1/4 mr-4 !h-full overflow-auto" :title="t('flink.catalog.browser')">
+      <BasicTree :treeData="treeData" @select="handleSelect" defaultExpandAll />
+    </Card>
+    <Card class="w-3/4 !h-full" :title="t('flink.catalog.tableInfo')">
+      <div v-if="!currentDatabaseName" class="flex justify-center items-center h-full">
+        <Empty :description="t('flink.catalog.selectDbHint')" />
+      </div>
+      <BasicTable v-else @register="registerTable" />
+    </Card>
+  </PageWrapper>
+</template>