diff --git a/backend/plugins/webhook/api/deployments.go b/backend/plugins/webhook/api/deployments.go
index 70c90f9e2f5..366cf11b71c 100644
--- a/backend/plugins/webhook/api/deployments.go
+++ b/backend/plugins/webhook/api/deployments.go
@@ -21,7 +21,6 @@ import (
 	"crypto/md5"
 	"fmt"
 	"net/http"
-	"strings"
 	"time"
 
 	"github.com/apache/incubator-devlake/core/dal"
@@ -135,20 +134,16 @@ func CreateDeploymentAndDeploymentCommits(connection *models.WebhookConnection,
 		request.Environment = devops.PRODUCTION
 	}
 	duration := float64(request.FinishedDate.Sub(*request.StartedDate).Milliseconds() / 1e3)
-	name := request.Name
-	if name == "" {
-		var commitShaList []string
-		for _, commit := range request.DeploymentCommits {
-			commitShaList = append(commitShaList, commit.CommitSha)
-		}
-		name = fmt.Sprintf(`deploy %s to %s`, strings.Join(commitShaList, ","), request.Environment)
-	}
 	createdDate := time.Now()
 	if request.CreatedDate != nil {
 		createdDate = *request.CreatedDate
 	} else if request.StartedDate != nil {
 		createdDate = *request.StartedDate
 	}
+	name := request.Name
+	if name == "" {
+		name = fmt.Sprintf(`deploy to %s at %s`, request.Environment, createdDate.Format(time.RFC3339))
+	}
 
 	// prepare deploymentCommits and deployment records
 	// queuedDuration := dateInfo.CalculateQueueDuration()
diff --git a/config-ui/package.json b/config-ui/package.json
index 99d10bf1997..62fe1e327ad 100644
--- a/config-ui/package.json
+++ b/config-ui/package.json
@@ -24,6 +24,11 @@
   "dependencies": {
     "@ahooksjs/use-url-state": "^3.5.1",
     "@ant-design/icons": "^5.3.0",
+    "@fontsource/roboto": "^5.0.14",
+    "@mints/miller-columns": "^2.0.0-beta.1",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@reduxjs/toolkit": "^2.2.1",
     "ahooks": "^3.7.10",
     "antd": "^5.14.2",
@@ -34,7 +39,6 @@
     "dayjs": "^1.11.10",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
-    "miller-columns-select": "1.4.1",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
@@ -69,5 +73,8 @@
     "typescript": "^5.1.6",
     "vite": "^5.1.4",
     "vite-plugin-svgr": "^4.2.0"
+  },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@^6.0.0-alpha.18"
   }
 }
diff --git a/config-ui/src/api/scope/index.ts b/config-ui/src/api/scope/index.ts
index 7007314f694..b9d19a6729a 100644
--- a/config-ui/src/api/scope/index.ts
+++ b/config-ui/src/api/scope/index.ts
@@ -91,7 +91,7 @@ export const searchRemote = (
   plugin: string,
   connectionId: ID,
   data: SearchRemoteQuery,
-): Promise<{ children: RemoteScope[]; count: number }> =>
+): Promise<{ children: RemoteScope[]; page: number; pageSize: number }> =>
   request(`/plugins/${plugin}/connections/${connectionId}/search-remote-scopes`, {
     method: 'get',
     data,
diff --git a/config-ui/src/app/routrer.tsx b/config-ui/src/app/routrer.tsx
index ccb5ef1646f..f59b0a58a97 100644
--- a/config-ui/src/app/routrer.tsx
+++ b/config-ui/src/app/routrer.tsx
@@ -45,6 +45,10 @@ const PATH_PREFIX = import.meta.env.DEVLAKE_PATH_PREFIX ?? '/';
 
 export const router = createBrowserRouter(
   [
+    {
+      path: 'db-migrate',
+      element: <DBMigrate />,
+    },
     {
       path: '/',
       element: <App />,
@@ -54,10 +58,6 @@ export const router = createBrowserRouter(
           index: true,
           element: <Navigate to="projects" />,
         },
-        {
-          path: 'db-migrate',
-          element: <DBMigrate />,
-        },
         {
           path: 'onboard',
           element: <Onboard />,
diff --git a/config-ui/src/features/connections/slice.ts b/config-ui/src/features/connections/slice.ts
index 8e2309bc0e0..01d1db6af08 100644
--- a/config-ui/src/features/connections/slice.ts
+++ b/config-ui/src/features/connections/slice.ts
@@ -33,7 +33,7 @@ const initialState: {
   connections: IConnection[];
   webhooks: IWebhook[];
 } = {
-  status: 'idle',
+  status: 'loading',
   plugins: [],
   connections: [],
   webhooks: [],
diff --git a/config-ui/src/features/onboard/slice.ts b/config-ui/src/features/onboard/slice.ts
index 11400f43d6a..6542c2c12b5 100644
--- a/config-ui/src/features/onboard/slice.ts
+++ b/config-ui/src/features/onboard/slice.ts
@@ -69,7 +69,7 @@ export const done = createAsyncThunk('onboard/done', async (_, { getState }) =>
 });
 
 const initialState: { status: IStatus; error?: unknown; data: DataType } = {
-  status: 'idle',
+  status: 'loading',
   data: {
     initial: true,
     step: 0,
diff --git a/config-ui/src/features/version/slice.ts b/config-ui/src/features/version/slice.ts
index 873d9a46ed6..f335f08684a 100644
--- a/config-ui/src/features/version/slice.ts
+++ b/config-ui/src/features/version/slice.ts
@@ -32,7 +32,7 @@ const initialState: {
   error?: unknown;
   version: string;
 } = {
-  status: 'idle',
+  status: 'loading',
   version: '',
 };
 
diff --git a/config-ui/src/plugins/components/data-scope-remote/search-local.tsx b/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
index 70660c71fc5..716abf0e074 100644
--- a/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
+++ b/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
@@ -16,20 +16,50 @@
  *
  */
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useReducer, useCallback } from 'react';
 import { CheckCircleFilled, SearchOutlined } from '@ant-design/icons';
-import { Space, Tag, Button, Input, Modal, message } from 'antd';
-import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
-import { MillerColumnsSelect } from 'miller-columns-select';
+import { Space, Tag, Button, Input, Modal } from 'antd';
+import { MillerColumns } from '@mints/miller-columns';
 import { useDebounce } from 'ahooks';
 
 import API from '@/api';
-import { Loading, Block, Message } from '@/components';
-import { IPluginConfig } from '@/types';
+import { Block, Loading, Message } from '@/components';
+import type { IPluginConfig } from '@/types';
 
-import * as T from './types';
 import * as S from './styled';
 
+type StateType = {
+  status: string;
+  scope: any[];
+  originData: any[];
+};
+
+const reducer = (
+  state: StateType,
+  action: { type: string; payload?: Pick<Partial<StateType>, 'scope' | 'originData'> },
+) => {
+  switch (action.type) {
+    case 'LOADING':
+      return {
+        ...state,
+        status: 'loading',
+      };
+    case 'APPEND':
+      return {
+        ...state,
+        scope: [...state.scope, ...(action.payload?.scope ?? [])],
+        originData: [...state.originData, ...(action.payload?.originData ?? [])],
+      };
+    case 'DONE':
+      return {
+        ...state,
+        status: 'done',
+      };
+    default:
+      return state;
+  }
+};
+
 interface Props {
   mode: 'single' | 'multiple';
   plugin: string;
@@ -40,149 +70,85 @@ interface Props {
   onChange: (selectedScope: any[]) => void;
 }
 
-let canceling = false;
-
 export const SearchLocal = ({ mode, plugin, connectionId, config, disabledScope, selectedScope, onChange }: Props) => {
-  const [miller, setMiller] = useState<{
-    items: McsItem<T.ResItem>[];
-    loadedIds: ID[];
-    expandedIds: ID[];
-    errorId?: ID | null;
-    nextTokenMap: Record<ID, string>;
-  }>({
-    items: [],
-    loadedIds: [],
-    expandedIds: [],
-    nextTokenMap: {},
-  });
-
   const [open, setOpen] = useState(false);
-  const [status, setStatus] = useState('init');
-
-  const [query, setQuery] = useState('');
-  const search = useDebounce(query, { wait: 500 });
-
-  const scopes = useMemo(
-    () =>
-      search
-        ? miller.items
-            .filter((it) => it.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
-            .filter((it) => it.type !== 'group')
-            .map((it) => ({
-              ...it,
-              parentId: null,
-            }))
-        : miller.items,
-    [search, miller.items],
-  );
+  const [search, setSearch] = useState('');
 
-  const getItems = async ({
-    groupId,
-    currentPageToken,
-    loadAll,
-  }: {
-    groupId: ID | null;
-    currentPageToken?: string;
-    loadAll?: boolean;
-  }) => {
-    if (canceling) {
-      canceling = false;
-      setStatus('init');
-      return;
-    }
+  const [{ status, scope, originData }, dispatch] = useReducer(reducer, {
+    status: 'idle',
+    scope: [],
+    originData: [],
+  });
 
-    let newItems: McsItem<T.ResItem>[] = [];
-    let nextPageToken = '';
-    let errorId: ID | null;
+  const searchDebounce = useDebounce(search, { wait: 500 });
+
+  const request = useCallback(
+    async (groupId?: string | number, params?: any) => {
+      if (scope.length) {
+        return {
+          data: searchDebounce
+            ? scope
+                .filter((it) => it.title.includes(searchDebounce) && !it.canExpand)
+                .map((it) => ({ ...it, parentId: null }))
+            : scope.filter((it) => it.parentId === (groupId ?? null)),
+          hasMore: status === 'loading' ? true : false,
+          originData,
+        };
+      }
 
-    try {
       const res = await API.scope.remote(plugin, connectionId, {
-        groupId,
-        pageToken: currentPageToken,
+        groupId: groupId ?? null,
+        pageToken: params?.nextPageToken,
       });
 
-      newItems = (res.children ?? []).map((it) => ({
-        ...it,
-        title: it.name,
+      const data = res.children.map((it) => ({
+        parentId: it.parentId,
+        id: it.id,
+        title: it.name ?? it.fullName,
+        canExpand: it.type === 'group',
       }));
 
-      nextPageToken = res.nextPageToken;
-    } catch (err: any) {
-      errorId = groupId;
-      message.error(err.response.data.message);
-    }
-
-    if (nextPageToken) {
-      setMiller((m) => ({
-        ...m,
-        items: [...m.items, ...newItems],
-        expandedIds: [...m.expandedIds, groupId ?? 'root'],
-        nextTokenMap: {
-          ...m.nextTokenMap,
-          [`${groupId ? groupId : 'root'}`]: nextPageToken,
+      return {
+        data,
+        hasMore: !!res.nextPageToken,
+        params: {
+          nextPageToken: res.nextPageToken,
         },
-      }));
-
-      if (loadAll) {
-        await getItems({ groupId, currentPageToken: nextPageToken, loadAll });
-      }
-    } else {
-      setMiller((m) => ({
-        ...m,
-        items: [...m.items, ...newItems],
-        expandedIds: [...m.expandedIds, groupId ?? 'root'],
-        loadedIds: [...m.loadedIds, groupId ?? 'root'],
-        errorId,
-      }));
+        originData: res.children,
+      };
+    },
+    [plugin, connectionId, scope, status, searchDebounce],
+  );
 
-      const groupItems = newItems.filter((it) => it.type === 'group');
+  const handleRequestAll = async () => {
+    setOpen(false);
+    dispatch({ type: 'LOADING' });
 
-      if (loadAll && groupItems.length) {
-        groupItems.forEach(async (it) => await getItems({ groupId: it.id, loadAll: true }));
-      }
-    }
-  };
+    const getData = async (groupId?: string | number, currentPageToken?: string) => {
+      const res = await API.scope.remote(plugin, connectionId, {
+        groupId: groupId ?? null,
+        pageToken: currentPageToken,
+      });
 
-  useEffect(() => {
-    getItems({ groupId: null });
-  }, []);
+      const data = res.children.map((it) => ({
+        parentId: it.parentId,
+        id: it.id,
+        title: it.name ?? it.fullName,
+        canExpand: it.type === 'group',
+      }));
 
-  useEffect(() => {
-    if (
-      miller.items.length &&
-      !miller.items.filter((it) => it.type === 'group' && !miller.loadedIds.includes(it.id)).length
-    ) {
-      setStatus('loaded');
-    }
-  }, [miller]);
+      dispatch({ type: 'APPEND', payload: { scope: data, originData: res.children } });
 
-  const handleLoadAllScopes = async () => {
-    setOpen(false);
-    setStatus('loading');
+      if (res.nextPageToken) {
+        await getData(groupId, res.nextPageToken);
+      }
 
-    if (!miller.loadedIds.includes('root')) {
-      await getItems({
-        groupId: null,
-        currentPageToken: miller.nextTokenMap['root'],
-        loadAll: true,
-      });
-    }
+      await Promise.all(data.filter((it) => it.canExpand).map((it) => getData(it.id)));
+    };
 
-    const noLoadedItems = miller.items.filter((it) => it.type === 'group' && !miller.loadedIds.includes(it.id));
-    if (noLoadedItems.length) {
-      noLoadedItems.forEach(async (it) => {
-        await getItems({
-          groupId: it.id,
-          currentPageToken: miller.nextTokenMap[it.id],
-          loadAll: true,
-        });
-      });
-    }
-  };
+    await getData();
 
-  const handleCancelLoadAllScopes = () => {
-    setStatus('cancel');
-    canceling = true;
+    dispatch({ type: 'DONE' });
   };
 
   return (
@@ -209,59 +175,54 @@ export const SearchLocal = ({ mode, plugin, connectionId, config, disabledScope,
         {(status === 'loading' || status === 'cancel') && (
           <S.JobLoad>
             <Loading style={{ marginRight: 8 }} size={20} />
-            Loading: <span className="count">{miller.items.length}</span> scopes found
-            <Button style={{ marginLeft: 8 }} loading={status === 'cancel'} onClick={handleCancelLoadAllScopes}>
-              Cancel
-            </Button>
+            Loading: <span className="count">{scope.length}</span> scopes found
           </S.JobLoad>
         )}
 
-        {status === 'loaded' && (
+        {status === 'done' && (
           <S.JobLoad>
             <CheckCircleFilled style={{ color: '#4DB764' }} />
-            <span className="count">{miller.items.length}</span> scopes found
+            <span className="count">{scope.length}</span> scopes found
           </S.JobLoad>
         )}
 
-        {status === 'init' && (
+        {status === 'idle' && (
           <S.JobLoad>
-            <Button type="primary" disabled={!miller.items.length} onClick={() => setOpen(true)}>
+            <Button type="primary" onClick={() => setOpen(true)}>
               Load all scopes to search by keywords
             </Button>
           </S.JobLoad>
         )}
       </Block>
       <Block>
-        {status === 'loaded' && (
-          <Input prefix={<SearchOutlined />} value={query} onChange={(e) => setQuery(e.target.value)} />
+        {status === 'done' && (
+          <Input prefix={<SearchOutlined />} value={search} onChange={(e) => setSearch(e.target.value)} />
         )}
-        <MillerColumnsSelect
-          mode={mode}
-          items={scopes}
+        <MillerColumns
+          bordered
+          theme={{
+            colorPrimary: '#7497f7',
+            borderColor: '#dbe4fd',
+          }}
+          request={request}
           columnCount={search ? 1 : config.millerColumn?.columnCount ?? 1}
           columnHeight={300}
-          getCanExpand={(it) => it.type === 'group'}
-          getHasMore={(id) => !miller.loadedIds.includes(id ?? 'root')}
-          getHasError={(id) => id === miller.errorId}
-          onExpand={(id: McsID) => getItems({ groupId: id })}
-          onScroll={(id: McsID | null) =>
-            getItems({ groupId: id, currentPageToken: miller.nextTokenMap[id ?? 'root'] })
-          }
-          renderTitle={(column: McsColumn) =>
-            !column.parentId &&
+          mode={mode}
+          renderTitle={(id) =>
+            !id &&
             config.millerColumn?.firstColumnTitle && (
               <S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>
             )
           }
           renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
           renderError={() => <span style={{ color: 'red' }}>Something Error</span>}
+          selectable
           disabledIds={(disabledScope ?? []).map((it) => it.id)}
           selectedIds={selectedScope.map((it) => it.id)}
-          onSelectItemIds={(selectedIds: ID[]) => onChange(miller.items.filter((it) => selectedIds.includes(it.id)))}
-          expandedIds={miller.expandedIds}
+          onSelectedIds={(ids, data) => onChange((data ?? []).filter((it) => ids.includes(it.id)))}
         />
       </Block>
-      <Modal open={open} centered onOk={handleLoadAllScopes} onCancel={() => setOpen(false)}>
+      <Modal open={open} centered onOk={handleRequestAll} onCancel={() => setOpen(false)}>
         <Message content={`This operation may take a long time, as it iterates through all the ${config.title}.`} />
       </Modal>
     </>
diff --git a/config-ui/src/plugins/components/data-scope-remote/search-remote.tsx b/config-ui/src/plugins/components/data-scope-remote/search-remote.tsx
index 4679b856409..0f6710fe8ec 100644
--- a/config-ui/src/plugins/components/data-scope-remote/search-remote.tsx
+++ b/config-ui/src/plugins/components/data-scope-remote/search-remote.tsx
@@ -16,19 +16,16 @@
  *
  */
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useCallback } from 'react';
 import { SearchOutlined } from '@ant-design/icons';
-import { Space, Tag, Input, message } from 'antd';
-import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
-import MillerColumnsSelect from 'miller-columns-select';
+import { Space, Tag, Input } from 'antd';
 import { useDebounce } from 'ahooks';
-import { uniqBy } from 'lodash';
+import { MillerColumns } from '@mints/miller-columns';
 
 import API from '@/api';
-import { Loading, Block } from '@/components';
-import { IPluginConfig } from '@/types';
+import { Block, Loading } from '@/components';
+import type { IPluginConfig } from '@/types';
 
-import * as T from './types';
 import * as S from './styled';
 
 interface Props {
@@ -42,116 +39,67 @@ interface Props {
 }
 
 export const SearchRemote = ({ mode, plugin, connectionId, config, disabledScope, selectedScope, onChange }: Props) => {
-  const [miller, setMiller] = useState<{
-    items: McsItem<T.ResItem>[];
-    loadedIds: ID[];
-    errorId?: ID | null;
-    nextTokenMap: Record<ID, string>;
-  }>({
-    items: [],
-    loadedIds: [],
-    nextTokenMap: {},
-  });
-
-  const [search, setSearch] = useState<{
-    loading: boolean;
-    items: McsItem<T.ResItem>[];
-    currentItems: McsItem<T.ResItem>[];
-    query: string;
-    page: number;
-    total: number;
-  }>({
-    loading: true,
-    items: [],
-    currentItems: [],
-    query: '',
-    page: 1,
-    total: 0,
-  });
-
-  const searchDebounce = useDebounce(search.query, { wait: 500 });
-
-  const allItems = useMemo(
-    () =>
-      uniqBy(
-        [...miller.items, ...search.items].filter((it) => it.type === 'scope'),
-        'id',
-      ),
-    [miller.items, search.items],
+  const [search, setSearch] = useState('');
+
+  const searchDebounce = useDebounce(search, { wait: 500 });
+
+  const request = useCallback(
+    async (groupId?: string | number, params?: any) => {
+      let data = [];
+      let hasMore = false;
+      let newParams = {};
+      let originData = [];
+
+      if (!searchDebounce) {
+        const res = await API.scope.remote(plugin, connectionId, {
+          groupId: groupId ?? null,
+          pageToken: params?.pageToken,
+        });
+
+        data = res.children.map((it) => ({
+          parentId: it.parentId,
+          id: it.id,
+          title: it.name ?? it.fullName,
+          canExpand: it.type === 'group',
+        }));
+
+        hasMore = !!res.nextPageToken;
+        newParams = {
+          pageToken: res.nextPageToken,
+        };
+        originData = res.children;
+      } else {
+        const res = await API.scope.searchRemote(plugin, connectionId, {
+          search: searchDebounce,
+          page: params?.page ?? 1,
+          pageSize: 20,
+        });
+
+        data = res.children.map((it) => ({
+          parentId: it.parentId,
+          id: it.id,
+          title: it.fullName ?? it.name,
+          canExpand: it.type === 'group',
+        }));
+
+        hasMore = res.children.length === res.pageSize;
+        newParams = {
+          page: (params?.page ?? 0) + 1,
+          count: (params?.count ?? 0) + res.children.length,
+        };
+        originData = res.children;
+      }
+
+      return {
+        data,
+        hasMore,
+        params: newParams,
+        originData,
+      };
+    },
+    [plugin, connectionId, searchDebounce],
   );
 
-  const getItems = async (groupId: ID | null, currentPageToken?: string) => {
-    let newItems: McsItem<T.ResItem>[] = [];
-    let nextPageToken = '';
-    let errorId: ID | null;
-
-    try {
-      const res = await API.scope.remote(plugin, connectionId, {
-        groupId,
-        pageToken: currentPageToken,
-      });
-
-      newItems = (res.children ?? []).map((it) => ({
-        ...it,
-        title: it.name,
-      }));
-
-      nextPageToken = res.nextPageToken;
-    } catch (err: any) {
-      errorId = groupId;
-      message.error(err.response.data.message);
-    }
-
-    if (nextPageToken && newItems.length) {
-      setMiller((m) => ({
-        ...m,
-        items: [...m.items, ...newItems],
-        nextTokenMap: {
-          ...m.nextTokenMap,
-          [`${groupId ? groupId : 'root'}`]: nextPageToken,
-        },
-      }));
-    } else {
-      setMiller((m) => ({
-        ...m,
-        items: [...m.items, ...newItems],
-        loadedIds: [...m.loadedIds, groupId ?? 'root'],
-        errorId,
-      }));
-    }
-  };
-
-  useEffect(() => {
-    getItems(null);
-  }, []);
-
-  const searchItems = async () => {
-    if (!searchDebounce) return;
-
-    const res = await API.scope.searchRemote(plugin, connectionId, {
-      search: searchDebounce,
-      page: search.page,
-      pageSize: 20,
-    });
-
-    const newItems = (res.children ?? []).map((it) => ({
-      ...it,
-      title: it.fullName ?? it.name,
-    }));
-
-    setSearch((s) => ({
-      ...s,
-      loading: false,
-      items: [...allItems, ...newItems],
-      currentItems: newItems,
-      total: res.count,
-    }));
-  };
-
-  useEffect(() => {
-    searchItems();
-  }, [searchDebounce, search.page]);
-
   return (
     <>
       <Block title={config.title} required>
@@ -176,47 +124,31 @@ export const SearchRemote = ({ mode, plugin, connectionId, config, disabledScope
         <Input
           prefix={<SearchOutlined />}
           placeholder={config.searchPlaceholder ?? 'Search'}
-          value={search.query}
-          onChange={(e) => setSearch({ ...search, query: e.target.value, loading: true, currentItems: [] })}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <MillerColumns
+          bordered
+          theme={{
+            colorPrimary: '#7497f7',
+            borderColor: '#dbe4fd',
+          }}
+          request={request}
+          columnCount={searchDebounce ? 1 : config.millerColumn?.columnCount ?? 1}
+          columnHeight={300}
+          mode={mode}
+          renderTitle={(id?) =>
+            !id &&
+            config.millerColumn?.firstColumnTitle && (
+              <S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>
+            )
+          }
+          renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
+          selectable
+          disabledIds={disabledScope.map((it) => it.id)}
+          selectedIds={selectedScope.map((it) => it.id)}
+          onSelectedIds={(ids, data) => onChange((data ?? []).filter((it) => ids.includes(it.id)))}
         />
-        {!searchDebounce ? (
-          <MillerColumnsSelect
-            mode={mode}
-            items={miller.items}
-            columnCount={config.millerColumn?.columnCount ?? 1}
-            columnHeight={300}
-            getCanExpand={(it) => it.type === 'group'}
-            getHasMore={(id) => !miller.loadedIds.includes(id ?? 'root')}
-            getHasError={(id) => id === miller.errorId}
-            onExpand={(id: McsID) => getItems(id, miller.nextTokenMap[id])}
-            onScroll={(id: McsID | null) => getItems(id, miller.nextTokenMap[id ?? 'root'])}
-            renderTitle={(column: McsColumn) =>
-              !column.parentId &&
-              config.millerColumn?.firstColumnTitle && (
-                <S.ColumnTitle>{config.millerColumn.firstColumnTitle}</S.ColumnTitle>
-              )
-            }
-            renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
-            renderError={() => <span style={{ color: 'red' }}>Something Error</span>}
-            disabledIds={(disabledScope ?? []).map((it) => it.id)}
-            selectedIds={selectedScope.map((it) => it.id)}
-            onSelectItemIds={(selectedIds: ID[]) => onChange(allItems.filter((it) => selectedIds.includes(it.id)))}
-          />
-        ) : (
-          <MillerColumnsSelect
-            mode={mode}
-            items={search.currentItems}
-            columnCount={1}
-            columnHeight={300}
-            getCanExpand={() => false}
-            getHasMore={() => search.loading}
-            onScroll={() => setSearch({ ...search, page: search.page + 1 })}
-            renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
-            disabledIds={(disabledScope ?? []).map((it) => it.id)}
-            selectedIds={selectedScope.map((it) => it.id)}
-            onSelectItemIds={(selectedIds: ID[]) => onChange(allItems.filter((it) => selectedIds.includes(it.id)))}
-          />
-        )}
       </Block>
     </>
   );
diff --git a/config-ui/src/plugins/components/data-scope-select/index.tsx b/config-ui/src/plugins/components/data-scope-select/index.tsx
index 213b7ed25a4..02f252ef491 100644
--- a/config-ui/src/plugins/components/data-scope-select/index.tsx
+++ b/config-ui/src/plugins/components/data-scope-select/index.tsx
@@ -16,16 +16,14 @@
  *
  */
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { RedoOutlined, PlusOutlined } from '@ant-design/icons';
-import { Flex, Select, Button } from 'antd';
+import { Flex, Button, Input, Space, Tag } from 'antd';
 import { useDebounce } from 'ahooks';
-import type { McsItem } from 'miller-columns-select';
-import MillerColumnsSelect from 'miller-columns-select';
+import { MillerColumns } from '@mints/miller-columns';
 
 import API from '@/api';
 import { Loading, Block, ExternalLink, Message } from '@/components';
-import { useRefreshData } from '@/hooks';
 import { getPluginScopeId } from '@/plugins';
 
 interface Props {
@@ -45,74 +43,51 @@ export const DataScopeSelect = ({
   onSubmit,
   onCancel,
 }: Props) => {
-  const [loading, setLoading] = useState(false);
-  const [query, setQuery] = useState('');
-  const [items, setItems] = useState<McsItem<{ data: any }>[]>([]);
   const [selectedIds, setSelectedIds] = useState<ID[]>([]);
-  // const [selectedItems, setSelecteItems] = useState<any>([]);
-  const [page, setPage] = useState(1);
-  const [pageSize] = useState(10);
-  const [total, setTotal] = useState(0);
+  const [originData, setOriginData] = useState<any[]>([]);
+  const [search, setSearch] = useState('');
+  const [version, setVersion] = useState(0);
+
+  const searchDebounce = useDebounce(search, { wait: 500 });
 
   useEffect(() => {
     setSelectedIds((initialScope ?? []).map((sc) => sc.id));
   }, []);
 
-  const getDataScope = async (page: number) => {
-    if (page === 1) {
-      setLoading(true);
-    }
+  const request = useCallback(
+    async (_?: string | number, params?: any) => {
+      const res = await API.scope.list(plugin, connectionId, {
+        page: params?.page ?? 1,
+        pageSize: 20,
+        searchTerm: searchDebounce,
+      });
 
-    const res = await API.scope.list(plugin, connectionId, { page, pageSize });
-    setItems((items) => [
-      ...items,
-      ...res.scopes.map((sc) => ({
+      const data = res.scopes.map((it) => ({
         parentId: null,
-        id: getPluginScopeId(plugin, sc.scope),
-        title: sc.scope.fullName ?? sc.scope.name,
-        data: sc.scope,
-      })),
-    ]);
-
-    setTotal(res.count);
-    setLoading(false);
-  };
-
-  useEffect(() => {
-    getDataScope(page);
-  }, [page]);
-
-  const search = useDebounce(query, { wait: 500 });
-
-  const { ready, data } = useRefreshData(
-    async () => await API.scope.list(plugin, connectionId, { searchTerm: search }),
-    [search],
-  );
-
-  const searchOptions = useMemo(
-    () =>
-      data?.scopes.map((sc) => ({
-        label: sc.scope.fullName ?? sc.scope.name,
-        value: getPluginScopeId(plugin, sc.scope),
-      })) ?? [],
-    [data],
+        id: getPluginScopeId(plugin, it.scope),
+        title: it.scope.fullName ?? it.scope.name,
+        canExpand: false,
+      }));
+
+      return {
+        data,
+        hasMore: res.count > (params?.page ?? 1) * 20,
+        params: {
+          page: (params?.page ?? 1) + 1,
+        },
+        originData: res.scopes,
+      };
+    },
+    [plugin, connectionId, searchDebounce, version],
   );
 
-  const handleScroll = () => setPage(page + 1);
-
   const handleSubmit = () => onSubmit?.(selectedIds);
 
-  const handleRefresh = () => {
-    setQuery('');
-    setItems([]);
-    getDataScope(1);
-  };
-
   return (
     <Block
       title="Select Data Scope"
       description={
-        items.length ? (
+        originData.length ? (
           <>
             Select the data scope in this Connection that you wish to associate with this Project. If you wish to add
             more Data Scope to this Connection, please{' '}
@@ -130,65 +105,80 @@ export const DataScopeSelect = ({
       }
       required
     >
-      {loading ? (
-        <Loading />
-      ) : items.length ? (
-        <Flex vertical gap="middle">
-          {showWarning ? (
-            <Message
-              style={{ marginBottom: 24 }}
-              content={
-                <>
-                  Unchecking Data Scope below will only remove it from the current Project and will not delete the
-                  historical data. If you would like to delete the data of Data Scope, please{' '}
-                  <ExternalLink link={`/connections/${plugin}/${connectionId}`}>go to the Connection page</ExternalLink>
-                  .
-                </>
-              }
-            />
+      <Flex vertical gap="middle">
+        {showWarning ? (
+          <Message
+            style={{ marginBottom: 24 }}
+            content={
+              <>
+                Unchecking Data Scope below will only remove it from the current Project and will not delete the
+                historical data. If you would like to delete the data of Data Scope, please{' '}
+                <ExternalLink link={`/connections/${plugin}/${connectionId}`}>go to the Connection page</ExternalLink>.
+              </>
+            }
+          />
+        ) : (
+          <Flex>
+            <Button type="primary" icon={<RedoOutlined />} onClick={() => setVersion(version + 1)}>
+              Refresh Data Scope
+            </Button>
+          </Flex>
+        )}
+        <Space wrap>
+          {selectedIds.length ? (
+            selectedIds.map((id) => {
+              const item = originData.find((it) => getPluginScopeId(plugin, it.scope) === `${id}`);
+              return (
+                <Tag
+                  key={id}
+                  color="blue"
+                  closable
+                  onClose={() => setSelectedIds(selectedIds.filter((it) => it !== id))}
+                >
+                  {item?.scope.fullName ?? item?.scope.name}
+                </Tag>
+              );
+            })
           ) : (
-            <Flex>
-              <Button type="primary" icon={<RedoOutlined />} onClick={handleRefresh}>
-                Refresh Data Scope
-              </Button>
-            </Flex>
+            <span>Please select scope...</span>
           )}
-          <Select
-            filterOption={false}
-            loading={!ready}
-            showSearch
-            mode="multiple"
-            options={searchOptions}
-            value={selectedIds}
-            onChange={(value) => setSelectedIds(value)}
-            onSearch={(value) => setQuery(value)}
-          />
-          <MillerColumnsSelect
-            showSelectAll
-            columnCount={1}
+        </Space>
+        <div>
+          <Input.Search value={search} onChange={(e) => setSearch(e.target.value)} />
+          <MillerColumns
+            bordered
+            theme={{
+              colorPrimary: '#7497f7',
+              borderColor: '#dbe4fd',
+            }}
+            request={request}
             columnHeight={200}
-            items={items}
-            getHasMore={() => items.length < total}
-            onScroll={handleScroll}
+            renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
+            renderError={() => <span style={{ color: 'red' }}>Something Error</span>}
+            renderNoData={() => (
+              <Flex style={{ height: '100%' }} justify="center" align="center">
+                <ExternalLink link={`/connections/${plugin}/${connectionId}`}>
+                  <Button type="primary" icon={<PlusOutlined />}>
+                    Add Data Scope
+                  </Button>
+                </ExternalLink>
+              </Flex>
+            )}
+            selectable
             selectedIds={selectedIds}
-            onSelectItemIds={setSelectedIds}
+            onSelectedIds={(ids, data) => {
+              setSelectedIds(ids);
+              setOriginData(data ?? []);
+            }}
           />
-          <Flex justify="flex-end" gap="small">
-            <Button onClick={onCancel}>Cancel</Button>
-            <Button type="primary" disabled={!selectedIds.length} onClick={handleSubmit}>
-              Save
-            </Button>
-          </Flex>
-        </Flex>
-      ) : (
-        <Flex>
-          <ExternalLink link={`/connections/${plugin}/${connectionId}`}>
-            <Button type="primary" icon={<PlusOutlined />}>
-              Add Data Scope
-            </Button>
-          </ExternalLink>
+        </div>
+        <Flex justify="flex-end" gap="small">
+          <Button onClick={onCancel}>Cancel</Button>
+          <Button type="primary" disabled={!selectedIds.length} onClick={handleSubmit}>
+            Save
+          </Button>
         </Flex>
-      )}
+      </Flex>
     </Block>
   );
 };
diff --git a/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx b/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx
index 4c0c4951195..a0c972dee37 100644
--- a/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx
+++ b/config-ui/src/plugins/register/webhook/components/selector-dialog.tsx
@@ -16,9 +16,9 @@
  *
  */
 
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Modal } from 'antd';
-import MillerColumnsSelect from 'miller-columns-select';
+import { MillerColumns } from '@mints/miller-columns';
 
 import { useAppSelector } from '@/hooks';
 import { Block, Loading } from '@/components';
@@ -39,6 +39,17 @@ export const SelectorDialog = ({ open, saving, onCancel, onSubmit }: Props) => {
 
   const webhooks = useAppSelector(selectWebhooks);
 
+  const request = useCallback(async () => {
+    return {
+      data: webhooks.map((it) => ({
+        parentId: null,
+        id: it.id,
+        title: it.name,
+      })),
+      hasMore: false,
+    };
+  }, [webhooks]);
+
   const handleSubmit = () => onSubmit(webhooks.filter((it) => selectedIds.includes(it.id)));
 
   return (
@@ -57,19 +68,18 @@ export const SelectorDialog = ({ open, saving, onCancel, onSubmit }: Props) => {
     >
       <S.Wrapper>
         <Block title="Webhooks" description="Select an existing Webhook to import to the current project.">
-          <MillerColumnsSelect
-            columnCount={1}
+          <MillerColumns
+            bordered
+            theme={{
+              colorPrimary: '#7497f7',
+              borderColor: '#dbe4fd',
+            }}
+            request={request}
             columnHeight={160}
-            getHasMore={() => false}
             renderLoading={() => <Loading size={20} style={{ padding: '4px 12px' }} />}
-            items={webhooks.map((it) => ({
-              parentId: null,
-              id: it.id,
-              title: it.name,
-              name: it.name,
-            }))}
+            selectable
             selectedIds={selectedIds}
-            onSelectItemIds={setSelectedIds}
+            onSelectedIds={setSelectedIds}
           />
         </Block>
       </S.Wrapper>
diff --git a/config-ui/src/routes/blueprint/detail/configuration-panel.tsx b/config-ui/src/routes/blueprint/detail/configuration-panel.tsx
index cd1dd8ae8f9..0a010226ae6 100644
--- a/config-ui/src/routes/blueprint/detail/configuration-panel.tsx
+++ b/config-ui/src/routes/blueprint/detail/configuration-panel.tsx
@@ -89,7 +89,8 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
         }),
       {
         setOperating,
-        formatMessage: () => 'Update blueprint successful.',
+        formatMessage: () =>
+          from === FromEnum.project ? 'Update project successful.' : 'Update blueprint successful.',
       },
     );
 
diff --git a/config-ui/src/routes/blueprint/detail/status-panel.tsx b/config-ui/src/routes/blueprint/detail/status-panel.tsx
index 0dbf72a9b65..4e1b6b5907a 100644
--- a/config-ui/src/routes/blueprint/detail/status-panel.tsx
+++ b/config-ui/src/routes/blueprint/detail/status-panel.tsx
@@ -98,7 +98,8 @@ export const StatusPanel = ({ from, blueprint, pipelineId, onRefresh }: Props) =
         }),
       {
         setOperating,
-        formatMessage: () => 'Update blueprint successful.',
+        formatMessage: () =>
+          from === FromEnum.project ? 'Update project successful.' : 'Update blueprint successful.',
       },
     );
 
diff --git a/config-ui/src/types/status.ts b/config-ui/src/types/status.ts
index a363098ebca..0dcdb5b9e06 100644
--- a/config-ui/src/types/status.ts
+++ b/config-ui/src/types/status.ts
@@ -16,4 +16,4 @@
  *
  */
 
-export type IStatus = 'idle' | 'loading' | 'success' | 'failed';
+export type IStatus = 'loading' | 'success' | 'failed';
diff --git a/config-ui/yarn.lock b/config-ui/yarn.lock
index 2ea91ec1bdc..a4dc8623d07 100644
--- a/config-ui/yarn.lock
+++ b/config-ui/yarn.lock
@@ -280,7 +280,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.22.5":
+"@babel/helper-module-imports@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/helper-module-imports@npm:7.22.15"
   dependencies:
@@ -690,7 +690,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.22.5, @babel/plugin-syntax-jsx@npm:^7.23.3":
+"@babel/plugin-syntax-jsx@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
   dependencies:
@@ -1655,6 +1655,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
+  version: 7.25.6
+  resolution: "@babel/runtime@npm:7.25.6"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: ee1a69d3ac7802803f5ee6a96e652b78b8addc28c6a38c725a4ad7d61a059d9e6cb9f6550ed2f63cce67a1bd82e0b1ef66a1079d895be6bfb536a5cfbd9ccc32
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0":
   version: 7.24.0
   resolution: "@babel/template@npm:7.24.0"
@@ -1666,7 +1675,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.4.5":
+"@babel/traverse@npm:^7.24.0":
   version: 7.24.0
   resolution: "@babel/traverse@npm:7.24.0"
   dependencies:
@@ -1718,7 +1727,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.1.0":
+"@emotion/is-prop-valid@npm:1.2.2":
   version: 1.2.2
   resolution: "@emotion/is-prop-valid@npm:1.2.2"
   dependencies:
@@ -1734,13 +1743,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/stylis@npm:^0.8.4":
-  version: 0.8.5
-  resolution: "@emotion/stylis@npm:0.8.5"
-  checksum: 67ff5958449b2374b329fb96e83cb9025775ffe1e79153b499537c6c8b2eb64b77f32d7b5d004d646973662356ceb646afd9269001b97c54439fceea3203ce65
-  languageName: node
-  linkType: hard
-
 "@emotion/unitless@npm:0.8.0":
   version: 0.8.0
   resolution: "@emotion/unitless@npm:0.8.0"
@@ -1748,7 +1750,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.7.4, @emotion/unitless@npm:^0.7.5":
+"@emotion/unitless@npm:0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/unitless@npm:0.8.1"
+  checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:^0.7.5":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
   checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
@@ -1958,6 +1967,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/roboto@npm:^5.0.14":
+  version: 5.0.14
+  resolution: "@fontsource/roboto@npm:5.0.14"
+  checksum: c7a47aedd55233c84270e8ccb36fc529d37815b49acaab276de572dc67c694f9e76e9dd566cbb32b948d542bed5dc151b58c62641325c043e1eb8140e327da55
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.11.14":
   version: 0.11.14
   resolution: "@humanwhocodes/config-array@npm:0.11.14"
@@ -2039,6 +2055,178 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mints/miller-columns@npm:^2.0.0-beta.1":
+  version: 2.0.0-beta.1
+  resolution: "@mints/miller-columns@npm:2.0.0-beta.1"
+  dependencies:
+    "@fontsource/roboto": ^5.0.14
+    "@mui/material": ^5.16.7
+    "@mui/styled-engine-sc": ^6.0.0-alpha.18
+    lodash: ^4.17.21
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    react-infinite-scroll-component: ^6.1.0
+    styled-components: ^6.1.12
+  peerDependencies:
+    "@fontsource/roboto": ^5.0.14
+    "@mui/material": ^5.16.7
+    "@mui/styled-engine-sc": ^6.0.0-alpha.18
+    lodash: ^4.17.21
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    react-infinite-scroll-component: ^6.1.0
+    styled-components: ^6.1.12
+  checksum: ca49de90e123850029cf1db5ac41567bdd04c0d8b60db3783260265e5b283fddd576c38b573de804a7f35c44e228045b8fa5000d9b8e8a75c53c3ce05ca5deec
+  languageName: node
+  linkType: hard
+
+"@mui/core-downloads-tracker@npm:^5.16.7":
+  version: 5.16.7
+  resolution: "@mui/core-downloads-tracker@npm:5.16.7"
+  checksum: b65c48ba2bf6bba6435ba9f2d6c33db0c8a85b3ff7599136a9682b72205bec76470ab5ed5e6e625d5bd012ed9bcbc641ed677548be80d217c9fb5d0435567062
+  languageName: node
+  linkType: hard
+
+"@mui/icons-material@npm:^5.16.7":
+  version: 5.16.7
+  resolution: "@mui/icons-material@npm:5.16.7"
+  dependencies:
+    "@babel/runtime": ^7.23.9
+  peerDependencies:
+    "@mui/material": ^5.0.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a875f2837897d79a83173d80461e06ab090b64d08913d26433cf2cbeb8e7c7456468632a7aa495d722718f09111a8043255777d73b4dfbe9e0f863a170fc7190
+  languageName: node
+  linkType: hard
+
+"@mui/material@npm:^5.16.7":
+  version: 5.16.7
+  resolution: "@mui/material@npm:5.16.7"
+  dependencies:
+    "@babel/runtime": ^7.23.9
+    "@mui/core-downloads-tracker": ^5.16.7
+    "@mui/system": ^5.16.7
+    "@mui/types": ^7.2.15
+    "@mui/utils": ^5.16.6
+    "@popperjs/core": ^2.11.8
+    "@types/react-transition-group": ^4.4.10
+    clsx: ^2.1.0
+    csstype: ^3.1.3
+    prop-types: ^15.8.1
+    react-is: ^18.3.1
+    react-transition-group: ^4.4.5
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 5057b48c3ce554247de9a8f675bda9bbda079bc83a696c500525f3ebbd63315a44f1c2a7c83c2025dbd02d2722892e397a0af10c1219d45f6534e41d91a43cc0
+  languageName: node
+  linkType: hard
+
+"@mui/private-theming@npm:^5.16.6":
+  version: 5.16.6
+  resolution: "@mui/private-theming@npm:5.16.6"
+  dependencies:
+    "@babel/runtime": ^7.23.9
+    "@mui/utils": ^5.16.6
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 314ba598ab17cd425a36e4cab677ed26fe0939b23e53120da77cfbc3be6dada5428fa8e2a55cb697417599a4e3abfee6d4711de0a7318b9fb2c3a822b2d5b5a8
+  languageName: node
+  linkType: hard
+
+"@mui/styled-engine-sc@npm:^6.0.0-alpha.18, @mui/styled-engine@npm:@mui/styled-engine-sc@^6.0.0-alpha.18":
+  version: 6.0.2
+  resolution: "@mui/styled-engine-sc@npm:6.0.2"
+  dependencies:
+    "@babel/runtime": ^7.25.0
+    csstype: ^3.1.3
+    hoist-non-react-statics: ^3.3.2
+    prop-types: ^15.8.1
+  peerDependencies:
+    styled-components: ^6.0.0
+  checksum: 027972651eb83d6ec68ba4f56fa1dbd84334036707af98ca403c5009a95db0ad6bb2583097b8e533a94663f7d2f35a707a527c802f1759cf9e17e24b913de092
+  languageName: node
+  linkType: hard
+
+"@mui/system@npm:^5.16.7":
+  version: 5.16.7
+  resolution: "@mui/system@npm:5.16.7"
+  dependencies:
+    "@babel/runtime": ^7.23.9
+    "@mui/private-theming": ^5.16.6
+    "@mui/styled-engine": ^5.16.6
+    "@mui/types": ^7.2.15
+    "@mui/utils": ^5.16.6
+    clsx: ^2.1.0
+    csstype: ^3.1.3
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 86cc11d062645b6742328178ca3a9e2aa2c6d064a559e4fb8c6c6bb8251794959b9dad385f9508fdcab2ae2764503c80f7c3d4f6eb1e0e8aa649f28d4f59133b
+  languageName: node
+  linkType: hard
+
+"@mui/types@npm:^7.2.15":
+  version: 7.2.16
+  resolution: "@mui/types@npm:7.2.16"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 7bb86487be8e55a4e138a6a5878ab272caee71546a7a2368223274afae65229f673334e59b8e3f7717ea7ea8d44af5f068b2eb4c212cddb98fefecfa873b868a
+  languageName: node
+  linkType: hard
+
+"@mui/utils@npm:^5.16.6":
+  version: 5.16.6
+  resolution: "@mui/utils@npm:5.16.6"
+  dependencies:
+    "@babel/runtime": ^7.23.9
+    "@mui/types": ^7.2.15
+    "@types/prop-types": ^15.7.12
+    clsx: ^2.1.1
+    prop-types: ^15.8.1
+    react-is: ^18.3.1
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 6f8068f07f60a842fcb2e2540eecbd9c5f04df695bcc427184720e8ae138ae689fefd3c20147ab7c76e809ede6e10f5e08d1c34cd3a8b09bd22d2020a666a96f
+  languageName: node
+  linkType: hard
+
 "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
   version: 5.1.1-v1
   resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
@@ -2104,6 +2292,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.11.8":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+  languageName: node
+  linkType: hard
+
 "@rc-component/color-picker@npm:~1.5.2":
   version: 1.5.2
   resolution: "@rc-component/color-picker@npm:1.5.2"
@@ -2629,6 +2824,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:^15.7.12":
+  version: 15.7.12
+  resolution: "@types/prop-types@npm:15.7.12"
+  checksum: ac16cc3d0a84431ffa5cfdf89579ad1e2269549f32ce0c769321fdd078f84db4fbe1b461ed5a1a496caf09e637c0e367d600c541435716a55b1d9713f5035dfe
+  languageName: node
+  linkType: hard
+
 "@types/react-copy-to-clipboard@npm:^5.0.7":
   version: 5.0.7
   resolution: "@types/react-copy-to-clipboard@npm:5.0.7"
@@ -2677,6 +2879,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-transition-group@npm:^4.4.10":
+  version: 4.4.11
+  resolution: "@types/react-transition-group@npm:4.4.11"
+  dependencies:
+    "@types/react": "*"
+  checksum: a6e3b2e4363cb019e256ae4f19dadf9d7eb199da1a5e4109bbbf6a132821884044d332e9c74b520b1e5321a7f545502443fd1ce0b18649c8b510fa4220b0e5c2
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:*, @types/react@npm:^18.2.56":
   version: 18.2.60
   resolution: "@types/react@npm:18.2.60"
@@ -2720,6 +2931,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:4.2.5":
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^3.0.0":
   version: 3.0.2
   resolution: "@types/unist@npm:3.0.2"
@@ -3320,21 +3538,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-styled-components@npm:>= 1.12.0":
-  version: 2.1.4
-  resolution: "babel-plugin-styled-components@npm:2.1.4"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.22.5
-    "@babel/helper-module-imports": ^7.22.5
-    "@babel/plugin-syntax-jsx": ^7.22.5
-    lodash: ^4.17.21
-    picomatch: ^2.3.1
-  peerDependencies:
-    styled-components: ">= 2"
-  checksum: d791aed68d975dae4f73055f86cd47afa99cb402b8113acdaf5678c8b6fba2cbc15543f2debe8ed09becb198aae8be2adfe268ad41f4bca917288e073a622bf8
-  languageName: node
-  linkType: hard
-
 "babel-plugin-transform-react-remove-prop-types@npm:^0.4.24":
   version: 0.4.24
   resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24"
@@ -3586,6 +3789,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.0, clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -3668,6 +3878,11 @@ __metadata:
   dependencies:
     "@ahooksjs/use-url-state": ^3.5.1
     "@ant-design/icons": ^5.3.0
+    "@fontsource/roboto": ^5.0.14
+    "@mints/miller-columns": ^2.0.0-beta.1
+    "@mui/icons-material": ^5.16.7
+    "@mui/material": ^5.16.7
+    "@mui/styled-engine-sc": ^6.0.0-alpha.18
     "@reduxjs/toolkit": ^2.2.1
     "@types/file-saver": ^2.0.5
     "@types/node": ^18.19.20
@@ -3694,7 +3909,6 @@ __metadata:
     husky: ^8.0.0
     lint-staged: ^13.1.0
     lodash: ^4.17.21
-    miller-columns-select: 1.4.1
     prettier: ^2.7.1
     react: ^18.2.0
     react-copy-to-clipboard: ^5.1.0
@@ -3812,7 +4026,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:3.2.0, css-to-react-native@npm:^3.0.0":
+"css-to-react-native@npm:3.2.0":
   version: 3.2.0
   resolution: "css-to-react-native@npm:3.2.0"
   dependencies:
@@ -3830,7 +4044,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.1.3":
+"csstype@npm:3.1.3, csstype@npm:^3.0.2, csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
@@ -3967,6 +4181,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-helpers@npm:^5.0.1":
+  version: 5.2.1
+  resolution: "dom-helpers@npm:5.2.1"
+  dependencies:
+    "@babel/runtime": ^7.8.7
+    csstype: ^3.0.2
+  checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
+  languageName: node
+  linkType: hard
+
 "dot-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "dot-case@npm:3.0.4"
@@ -5202,7 +5426,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0":
+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -6416,20 +6640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"miller-columns-select@npm:1.4.1":
-  version: 1.4.1
-  resolution: "miller-columns-select@npm:1.4.1"
-  dependencies:
-    classnames: ^2.3.2
-    react-infinite-scroll-component: ^6.1.0
-    styled-components: ^5.3.6
-  peerDependencies:
-    react: ^18.2.0
-    react-dom: ^18.2.0
-  checksum: 88452c6d09d27116c1ef05dda7cab26f5d565ef2d63eac007ef9cc3d331cd0510997bcf0b45191678b323b0089b9bbca4973fabb12732c2c3ebc1d940164e8a5
-  languageName: node
-  linkType: hard
-
 "mime-db@npm:1.52.0":
   version: 1.52.0
   resolution: "mime-db@npm:1.52.0"
@@ -6989,6 +7199,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: ^3.3.7
+    picocolors: ^1.0.0
+    source-map-js: ^1.2.0
+  checksum: 649f9e60a763ca4b5a7bbec446a069edf07f057f6d780a5a0070576b841538d1ecf7dd888f2fbfd1f76200e26c969e405aeeae66332e6927dbdc8bdcb90b9451
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.35":
   version: 8.4.35
   resolution: "postcss@npm:8.4.35"
@@ -7042,7 +7263,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -7713,6 +7934,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "react-is@npm:18.3.1"
+  checksum: e20fe84c86ff172fc8d898251b7cc2c43645d108bf96d0b8edf39b98f9a2cae97b40520ee7ed8ee0085ccc94736c4886294456033304151c3f94978cec03df21
+  languageName: node
+  linkType: hard
+
 "react-markdown@npm:^9.0.1":
   version: 9.0.1
   resolution: "react-markdown@npm:9.0.1"
@@ -7806,6 +8034,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-transition-group@npm:^4.4.5":
+  version: 4.4.5
+  resolution: "react-transition-group@npm:4.4.5"
+  dependencies:
+    "@babel/runtime": ^7.5.5
+    dom-helpers: ^5.0.1
+    loose-envify: ^1.4.0
+    prop-types: ^15.6.2
+  peerDependencies:
+    react: ">=16.6.0"
+    react-dom: ">=16.6.0"
+  checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -8230,7 +8473,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0":
+"shallowequal@npm:1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
@@ -8341,6 +8584,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97
+  languageName: node
+  linkType: hard
+
 "space-separated-tokens@npm:^2.0.0":
   version: 2.0.2
   resolution: "space-separated-tokens@npm:2.0.2"
@@ -8529,25 +8779,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.3.6":
-  version: 5.3.11
-  resolution: "styled-components@npm:5.3.11"
+"styled-components@npm:^6.1.12":
+  version: 6.1.13
+  resolution: "styled-components@npm:6.1.13"
   dependencies:
-    "@babel/helper-module-imports": ^7.0.0
-    "@babel/traverse": ^7.4.5
-    "@emotion/is-prop-valid": ^1.1.0
-    "@emotion/stylis": ^0.8.4
-    "@emotion/unitless": ^0.7.4
-    babel-plugin-styled-components: ">= 1.12.0"
-    css-to-react-native: ^3.0.0
-    hoist-non-react-statics: ^3.0.0
-    shallowequal: ^1.1.0
-    supports-color: ^5.5.0
+    "@emotion/is-prop-valid": 1.2.2
+    "@emotion/unitless": 0.8.1
+    "@types/stylis": 4.2.5
+    css-to-react-native: 3.2.0
+    csstype: 3.1.3
+    postcss: 8.4.38
+    shallowequal: 1.1.0
+    stylis: 4.3.2
+    tslib: 2.6.2
   peerDependencies:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
-    react-is: ">= 16.8.0"
-  checksum: 10edd4dae3b0231ec02d86bdd09c88e894eedfa7e9d4f8e562b09fb69c67a27d586cbcf35c785002d59b3bf11e6c0940b0efce40d13ae9ed148b26b1dc8f3284
+  checksum: cb836c5d4cc8d183f4b70a4a1b1aa13551c57389e9c8fe3286619eef9fc81466fee09c39a1c8b5aa03deb0e466e4d5ee04921f7d9f3b7afe4744e539e6047550
   languageName: node
   linkType: hard
 
@@ -8578,7 +8826,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
+"stylis@npm:4.3.2":
+  version: 4.3.2
+  resolution: "stylis@npm:4.3.2"
+  checksum: 0faa8a97ff38369f47354376cd9f0def9bf12846da54c28c5987f64aaf67dcb6f00dce88a8632013bfb823b2c4d1d62a44f4ac20363a3505a7ab4e21b70179fc
+  languageName: node
+  linkType: hard
+
+"supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
   dependencies:
@@ -8708,6 +8963,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.6.2, tslib@npm:^2.0.3, tslib@npm:^2.4.1":
+  version: 2.6.2
+  resolution: "tslib@npm:2.6.2"
+  checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.8.1":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -8715,13 +8977,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.3, tslib@npm:^2.4.1":
-  version: 2.6.2
-  resolution: "tslib@npm:2.6.2"
-  checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
-  languageName: node
-  linkType: hard
-
 "tsutils@npm:^3.21.0":
   version: 3.21.0
   resolution: "tsutils@npm:3.21.0"