diff --git a/web/e2e/settings/integrations.spec.ts b/web/e2e/settings/integrations.spec.ts
index ba25524103..99cac30c87 100644
--- a/web/e2e/settings/integrations.spec.ts
+++ b/web/e2e/settings/integrations.spec.ts
@@ -12,7 +12,6 @@ test("Integration CRUD and searching has succeeded", async ({ reearth, page }) =
   await reearth.goto("/", { waitUntil: "domcontentloaded" });
   await page.getByText("My Integrations").click();
 
-  await page.locator("div").filter({ hasText: "Create new integration" }).nth(4).click();
   await page
     .locator("div")
     .filter({ hasText: /^Create new integration$/ })
diff --git a/web/e2e/settings/member.spec.ts b/web/e2e/settings/member.spec.ts
index 1951405ca7..2d4ac7b297 100644
--- a/web/e2e/settings/member.spec.ts
+++ b/web/e2e/settings/member.spec.ts
@@ -13,8 +13,8 @@ test.afterEach(async ({ page }) => {
 test("Searching current members has succeeded", async ({ page }) => {
   await page.getByText("Member").click();
   await expect(page.getByRole("cell", { name: "OWNER" })).toBeVisible();
-  await page.getByPlaceholder("search for a member").click();
-  await page.getByPlaceholder("search for a member").fill("no member");
+  await page.getByPlaceholder("input search text").click();
+  await page.getByPlaceholder("input search text").fill("no member");
   await page.getByRole("button", { name: "search" }).click();
   await expect(page.getByRole("cell", { name: "OWNER" })).toBeHidden();
   await page.getByRole("button", { name: "close-circle" }).click();
diff --git a/web/src/components/molecules/Integration/IntegrationTable/index.tsx b/web/src/components/molecules/Integration/IntegrationTable/index.tsx
index dfd59bc637..224ca913f5 100644
--- a/web/src/components/molecules/Integration/IntegrationTable/index.tsx
+++ b/web/src/components/molecules/Integration/IntegrationTable/index.tsx
@@ -26,6 +26,11 @@ interface Props {
   onIntegrationSettingsModalOpen: (integrationMember: IntegrationMember) => void;
   setSelection: (input: { selectedRowKeys: Key[] }) => void;
   onIntegrationRemove: (integrationIds: string[]) => Promise<void>;
+  page: number;
+  pageSize: number;
+  onTableChange: (page: number, pageSize: number) => void;
+  loading: boolean;
+  onReload: () => void;
 }
 
 const IntegrationTable: React.FC<Props> = ({
@@ -36,6 +41,11 @@ const IntegrationTable: React.FC<Props> = ({
   onIntegrationSettingsModalOpen,
   setSelection,
   onIntegrationRemove,
+  page,
+  pageSize,
+  onTableChange,
+  loading,
+  onReload,
 }) => {
   const t = useT();
 
@@ -93,6 +103,15 @@ const IntegrationTable: React.FC<Props> = ({
     [onSearchTerm, t],
   );
 
+  const pagination = useMemo(
+    () => ({
+      showSizeChanger: true,
+      current: page,
+      pageSize: pageSize,
+    }),
+    [page, pageSize],
+  );
+
   const rowSelection: TableRowSelection = useMemo(
     () => ({
       selectedRowKeys: selection.selectedRowKeys,
@@ -106,30 +125,27 @@ const IntegrationTable: React.FC<Props> = ({
     [selection, setSelection],
   );
 
-  const AlertOptions = useCallback(
+  const alertOptions = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (props: any) => {
-      return (
-        <Space size={16}>
-          <DeselectButton onClick={props.onCleanSelected}>
-            <Icon icon="clear" /> {t("Deselect")}
-          </DeselectButton>
-          <DeleteButton onClick={() => onIntegrationRemove?.(props.selectedRowKeys)}>
-            <Icon icon="delete" /> {t("Remove")}
-          </DeleteButton>
-        </Space>
-      );
-    },
+    (props: any) => (
+      <Space size={16}>
+        <DeselectButton onClick={props.onCleanSelected}>
+          <Icon icon="clear" /> {t("Deselect")}
+        </DeselectButton>
+        <DeleteButton onClick={() => onIntegrationRemove(props.selectedRowKeys)}>
+          <Icon icon="delete" /> {t("Remove")}
+        </DeleteButton>
+      </Space>
+    ),
     [onIntegrationRemove, t],
   );
 
   const options = useMemo(
     () => ({
       fullScreen: true,
-      reload: false,
-      setting: true,
+      reload: onReload,
     }),
-    [],
+    [onReload],
   );
 
   return (
@@ -160,18 +176,24 @@ const IntegrationTable: React.FC<Props> = ({
             </Suggestion>
           </EmptyTableWrapper>
         )}>
-        <ResizableProTable
-          dataSource={integrationMembers}
-          columns={columns}
-          tableAlertOptionRender={AlertOptions}
-          search={false}
-          rowKey="id"
-          options={options}
-          pagination={false}
-          toolbar={toolbar}
-          rowSelection={rowSelection}
-          heightOffset={72}
-        />
+        <TableWrapper>
+          <ResizableProTable
+            dataSource={integrationMembers}
+            columns={columns}
+            tableAlertOptionRender={alertOptions}
+            search={false}
+            rowKey="id"
+            options={options}
+            pagination={pagination}
+            toolbar={toolbar}
+            rowSelection={rowSelection}
+            loading={loading}
+            heightOffset={0}
+            onChange={pagination => {
+              onTableChange(pagination.current ?? 1, pagination.pageSize ?? 10);
+            }}
+          />
+        </TableWrapper>
       </ConfigProvider>
     </Wrapper>
   );
@@ -179,6 +201,7 @@ const IntegrationTable: React.FC<Props> = ({
 
 const Wrapper = styled.div`
   height: 100%;
+  padding: 16px 16px 0;
 `;
 
 const EmptyTableWrapper = styled.div`
@@ -206,8 +229,6 @@ const Title = styled.h1`
   color: #000;
 `;
 
-export default IntegrationTable;
-
 const DeselectButton = styled.a`
   display: flex;
   align-items: center;
@@ -225,3 +246,11 @@ const StyledIcon = styled(Icon)`
   color: #1890ff;
   font-size: 18px;
 `;
+
+const TableWrapper = styled.div`
+  background-color: #fff;
+  border-top: 1px solid #f0f0f0;
+  height: calc(100% - 72px);
+`;
+
+export default IntegrationTable;
diff --git a/web/src/components/molecules/Member/MemberRoleModal/index.tsx b/web/src/components/molecules/Member/MemberRoleModal/index.tsx
index 73ddc663da..b5fe2c0f50 100644
--- a/web/src/components/molecules/Member/MemberRoleModal/index.tsx
+++ b/web/src/components/molecules/Member/MemberRoleModal/index.tsx
@@ -57,7 +57,7 @@ const MemberRoleModal: React.FC<Props> = ({ open, member, onClose, onSubmit }) =
         }}>
         <Form.Item
           name="role"
-          label="Role"
+          label={t("Role")}
           rules={[
             {
               required: true,
diff --git a/web/src/components/molecules/Member/MemberTable/index.tsx b/web/src/components/molecules/Member/MemberTable/index.tsx
index 1e3fabedc5..1611d92515 100644
--- a/web/src/components/molecules/Member/MemberTable/index.tsx
+++ b/web/src/components/molecules/Member/MemberTable/index.tsx
@@ -1,56 +1,39 @@
 import styled from "@emotion/styled";
-import { useCallback } from "react";
+import { Key, useCallback, useMemo } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import Content from "@reearth-cms/components/atoms/Content";
 import Icon from "@reearth-cms/components/atoms/Icon";
+import Input from "@reearth-cms/components/atoms/Input";
 import Modal from "@reearth-cms/components/atoms/Modal";
 import PageHeader from "@reearth-cms/components/atoms/PageHeader";
-import Search from "@reearth-cms/components/atoms/Search";
-import Table from "@reearth-cms/components/atoms/Table";
+import { ListToolBarProps, TableRowSelection } from "@reearth-cms/components/atoms/ProTable";
+import Space from "@reearth-cms/components/atoms/Space";
 import UserAvatar from "@reearth-cms/components/atoms/UserAvatar";
+import ResizableProTable from "@reearth-cms/components/molecules/Common/ResizableProTable";
 import { UserMember } from "@reearth-cms/components/molecules/Workspace/types";
 import { useT } from "@reearth-cms/i18n";
 
-const columns = [
-  {
-    title: "Name",
-    dataIndex: "name",
-    key: "name",
-  },
-  {
-    title: "Thumbnail",
-    dataIndex: "thumbnail",
-    key: "thumbnail",
-  },
-  {
-    title: "Email",
-    dataIndex: "email",
-    key: "email",
-  },
-  {
-    title: "Role",
-    dataIndex: "role",
-    key: "role",
-  },
-  {
-    title: "Action",
-    dataIndex: "action",
-    key: "action",
-  },
-];
-
 interface Props {
   me: {
     id?: string;
     myWorkspace?: string;
   };
   owner: boolean;
-  handleMemberRemoveFromWorkspace: (userId: string) => Promise<void>;
+  handleMemberRemoveFromWorkspace: (userIds: string[]) => Promise<void>;
   handleSearchTerm: (term?: string) => void;
   handleRoleModalOpen: (member: UserMember) => void;
   handleMemberAddModalOpen: () => void;
   workspaceUserMembers?: UserMember[];
+  selection: {
+    selectedRowKeys: Key[];
+  };
+  setSelection: (input: { selectedRowKeys: Key[] }) => void;
+  page: number;
+  pageSize: number;
+  onTableChange: (page: number, pageSize: number) => void;
+  loading: boolean;
+  onReload: () => void;
 }
 
 const MemberTable: React.FC<Props> = ({
@@ -61,13 +44,20 @@ const MemberTable: React.FC<Props> = ({
   handleRoleModalOpen,
   handleMemberAddModalOpen,
   workspaceUserMembers,
+  selection,
+  setSelection,
+  page,
+  pageSize,
+  onTableChange,
+  loading,
+  onReload,
 }) => {
   const t = useT();
 
   const { confirm } = Modal;
 
   const handleMemberDelete = useCallback(
-    (member: UserMember) => {
+    (userIds: string[]) => {
       confirm({
         title: t("Are you sure to remove this member?"),
         icon: <Icon icon="exclamationCircle" />,
@@ -75,35 +65,124 @@ const MemberTable: React.FC<Props> = ({
           "Remove this member from workspace means this member will not view any content of this workspace.",
         ),
         onOk() {
-          handleMemberRemoveFromWorkspace(member?.userId);
+          handleMemberRemoveFromWorkspace(userIds);
         },
       });
     },
     [confirm, handleMemberRemoveFromWorkspace, t],
   );
 
+  const columns = [
+    {
+      title: t("Name"),
+      dataIndex: "name",
+      key: "name",
+      width: 256,
+      minWidth: 256,
+    },
+    {
+      title: t("Thumbnail"),
+      dataIndex: "thumbnail",
+      key: "thumbnail",
+      width: 128,
+      minWidth: 128,
+    },
+    {
+      title: t("Email"),
+      dataIndex: "email",
+      key: "email",
+      width: 256,
+      minWidth: 256,
+    },
+    {
+      title: t("Role"),
+      dataIndex: "role",
+      key: "role",
+      width: 128,
+      minWidth: 128,
+    },
+    {
+      title: t("Action"),
+      dataIndex: "action",
+      key: "action",
+      width: 128,
+      minWidth: 128,
+    },
+  ];
+
   const dataSource = workspaceUserMembers?.map(member => ({
-    key: member.userId,
+    id: member.userId,
     name: member.user.name,
     thumbnail: <UserAvatar username={member.user.name} />,
     email: member.user.email,
     role: member.role,
-    action: (
-      <>
-        {member.userId !== me?.id && (
-          <Button type="link" onClick={() => handleRoleModalOpen(member)} disabled={!owner}>
-            {t("Change Role?")}
-          </Button>
-        )}
-        {member.userId !== me?.id && (
-          <StyledButton type="link" onClick={() => handleMemberDelete(member)} disabled={!owner}>
-            {t("Remove")}
-          </StyledButton>
-        )}
-      </>
+    action: member.userId !== me?.id && (
+      <RoleButton type="link" onClick={() => handleRoleModalOpen(member)} disabled={!owner}>
+        {t("Change Role?")}
+      </RoleButton>
     ),
   }));
 
+  const toolbar: ListToolBarProps = useMemo(
+    () => ({
+      search: (
+        <Input.Search
+          allowClear
+          placeholder={t("input search text")}
+          onSearch={(value: string) => {
+            handleSearchTerm(value);
+          }}
+        />
+      ),
+    }),
+    [handleSearchTerm, t],
+  );
+
+  const pagination = useMemo(
+    () => ({
+      showSizeChanger: true,
+      current: page,
+      pageSize: pageSize,
+    }),
+    [page, pageSize],
+  );
+
+  const rowSelection: TableRowSelection = useMemo(
+    () => ({
+      selectedRowKeys: selection.selectedRowKeys,
+      onChange: (selectedRowKeys: Key[]) => {
+        setSelection({
+          ...selection,
+          selectedRowKeys: selectedRowKeys,
+        });
+      },
+    }),
+    [selection, setSelection],
+  );
+
+  const alertOptions = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (props: any) => (
+      <Space size={16}>
+        <DeselectButton onClick={props.onCleanSelected}>
+          <Icon icon="clear" /> {t("Deselect")}
+        </DeselectButton>
+        <DeleteButton onClick={() => handleMemberDelete(props.selectedRowKeys)}>
+          <Icon icon="delete" /> {t("Remove")}
+        </DeleteButton>
+      </Space>
+    ),
+    [handleMemberDelete, t],
+  );
+
+  const options = useMemo(
+    () => ({
+      fullScreen: true,
+      reload: onReload,
+    }),
+    [onReload],
+  );
+
   return (
     <PaddedContent>
       <PageHeader
@@ -117,42 +196,52 @@ const MemberTable: React.FC<Props> = ({
           </Button>
         }
       />
-      <ActionHeader>
-        <StyledSearch
-          onSearch={handleSearchTerm}
-          placeholder={t("search for a member")}
-          allowClear
+      <TableWrapper>
+        <ResizableProTable
+          dataSource={dataSource}
+          columns={columns}
+          tableAlertOptionRender={alertOptions}
+          pagination={pagination}
+          toolbar={toolbar}
+          options={options}
+          rowSelection={rowSelection}
+          loading={loading}
+          heightOffset={0}
+          onChange={pagination => {
+            onTableChange(pagination.current ?? 1, pagination.pageSize ?? 10);
+          }}
         />
-      </ActionHeader>
-      <StyledTable dataSource={dataSource} columns={columns} />
+      </TableWrapper>
     </PaddedContent>
   );
 };
 
 const PaddedContent = styled(Content)`
-  margin: 16px;
-  background-color: #fff;
-  min-height: 100%;
+  padding: 16px 16px 0;
+  height: 100%;
 `;
 
-const ActionHeader = styled(Content)`
+const TableWrapper = styled.div`
+  background-color: #fff;
   border-top: 1px solid #f0f0f0;
-  padding: 16px;
-  display: flex;
-  justify-content: space-between;
+  height: calc(100% - 72px);
 `;
 
-const StyledButton = styled(Button)`
-  margin-left: 8px;
+const RoleButton = styled(Button)`
+  padding-left: 0;
 `;
 
-const StyledSearch = styled(Search)`
-  width: 264px;
+const DeselectButton = styled.a`
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `;
 
-const StyledTable = styled(Table)`
-  padding: 24px;
-  overflow-x: auto;
+const DeleteButton = styled.a`
+  color: #ff7875;
+  :hover {
+    color: #ff7875b3;
+  }
 `;
 
 export default MemberTable;
diff --git a/web/src/components/molecules/MyIntegrations/Content/index.tsx b/web/src/components/molecules/MyIntegrations/Content/index.tsx
index 0f8dbf3661..305e64eb96 100644
--- a/web/src/components/molecules/MyIntegrations/Content/index.tsx
+++ b/web/src/components/molecules/MyIntegrations/Content/index.tsx
@@ -94,8 +94,9 @@ const MyIntegrationContent: React.FC<Props> = ({
 };
 
 const MyIntegrationWrapper = styled.div`
-  min-height: 100%;
+  min-height: calc(100% - 16px);
   background-color: #fff;
+  margin: 16px 16px 0;
 `;
 
 const MyIntegrationTabs = styled(Tabs)`
diff --git a/web/src/components/molecules/MyIntegrations/List/index.tsx b/web/src/components/molecules/MyIntegrations/List/index.tsx
index ac79d79380..65480b6251 100644
--- a/web/src/components/molecules/MyIntegrations/List/index.tsx
+++ b/web/src/components/molecules/MyIntegrations/List/index.tsx
@@ -37,8 +37,9 @@ const MyIntegrationList: React.FC<Props> = ({
 };
 
 const Wrapper = styled.div`
+  min-height: calc(100% - 16px);
   background: #fff;
-  min-height: 100%;
+  margin: 16px 16px 0;
 `;
 
 const ListWrapper = styled.div`
diff --git a/web/src/components/molecules/ProjectOverview/ModelCard.tsx b/web/src/components/molecules/ProjectOverview/ModelCard.tsx
index 062778075d..a278bdc8b5 100644
--- a/web/src/components/molecules/ProjectOverview/ModelCard.tsx
+++ b/web/src/components/molecules/ProjectOverview/ModelCard.tsx
@@ -36,6 +36,7 @@ const ModelCard: React.FC<Props> = ({
         key: "delete",
         label: t("Delete"),
         onClick: () => onModelDeletionModalOpen(model),
+        danger: true,
       },
     ],
     [t, model, onModelUpdateModalOpen, onModelDeletionModalOpen],
diff --git a/web/src/components/organisms/Settings/Integration/hooks.ts b/web/src/components/organisms/Settings/Integration/hooks.ts
index e3ddd4aaa8..9a1bc2e540 100644
--- a/web/src/components/organisms/Settings/Integration/hooks.ts
+++ b/web/src/components/organisms/Settings/Integration/hooks.ts
@@ -21,7 +21,12 @@ export default (workspaceId?: string) => {
   const [selection, setSelection] = useState<{ selectedRowKeys: Key[] }>({
     selectedRowKeys: [],
   });
-  const { data, refetch } = useGetMeQuery();
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const { data, refetch, loading } = useGetMeQuery({
+    fetchPolicy: "cache-and-network",
+    notifyOnNetworkStatusChange: true,
+  });
   const t = useT();
 
   const workspaces = useMemo(() => data?.me?.workspaces, [data?.me?.workspaces]);
@@ -122,32 +127,41 @@ export default (workspaceId?: string) => {
   const [removeIntegrationFromWorkspaceMutation] = useRemoveIntegrationFromWorkspaceMutation();
 
   const handleIntegrationRemove = useCallback(
-    (integrationIds: string[]) =>
-      (async () => {
-        if (!workspaceId) return;
-        const results = await Promise.all(
-          integrationIds.map(async integrationId => {
-            const result = await removeIntegrationFromWorkspaceMutation({
-              variables: { workspaceId, integrationId },
-              refetchQueries: ["GetMe"],
-            });
-            if (result.errors) {
-              Notification.error({ message: t("Failed to delete one or more intagrations.") });
-            }
-          }),
-        );
-        if (results) {
-          Notification.success({
-            message: t("One or more integrations were successfully deleted!"),
+    async (integrationIds: string[]) => {
+      if (!workspaceId) return;
+      const results = await Promise.all(
+        integrationIds.map(async integrationId => {
+          const result = await removeIntegrationFromWorkspaceMutation({
+            variables: { workspaceId, integrationId },
+            refetchQueries: ["GetMe"],
           });
-          setSelection({ selectedRowKeys: [] });
-        }
-      })(),
+          if (result.errors) {
+            Notification.error({ message: t("Failed to delete one or more intagrations.") });
+          }
+        }),
+      );
+      if (results) {
+        Notification.success({
+          message: t("One or more integrations were successfully deleted!"),
+        });
+        setSelection({ selectedRowKeys: [] });
+      }
+    },
     [t, removeIntegrationFromWorkspaceMutation, workspaceId],
   );
 
   const handleSearchTerm = useCallback((term?: string) => {
     setSearchTerm(term);
+    setPage(1);
+  }, []);
+
+  const handleReload = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  const handleTableChange = useCallback((page: number, pageSize: number) => {
+    setPage(page);
+    setPageSize(pageSize);
   }, []);
 
   return {
@@ -168,5 +182,10 @@ export default (workspaceId?: string) => {
     selection,
     handleSearchTerm,
     setSelection,
+    page,
+    pageSize,
+    handleTableChange,
+    loading,
+    handleReload,
   };
 };
diff --git a/web/src/components/organisms/Settings/Integration/index.tsx b/web/src/components/organisms/Settings/Integration/index.tsx
index f86c1808fc..6346966fad 100644
--- a/web/src/components/organisms/Settings/Integration/index.tsx
+++ b/web/src/components/organisms/Settings/Integration/index.tsx
@@ -12,21 +12,26 @@ const Integration: React.FC = () => {
   const {
     integrations,
     workspaceIntegrationMembers,
-    handleIntegrationConnect,
     handleIntegrationConnectModalClose,
     handleIntegrationConnectModalOpen,
     addLoading,
+    handleIntegrationConnect,
+    handleIntegrationRemove,
     integrationConnectModalShown,
+    handleUpdateIntegration,
+    updateLoading,
     handleIntegrationSettingsModalClose,
     handleIntegrationSettingsModalOpen,
     integrationSettingsModalShown,
-    handleUpdateIntegration,
-    updateLoading,
     selectedIntegrationMember,
     selection,
     handleSearchTerm,
     setSelection,
-    handleIntegrationRemove,
+    page,
+    pageSize,
+    handleTableChange,
+    loading,
+    handleReload,
   } = useHooks(workspaceId);
 
   return (
@@ -39,6 +44,11 @@ const Integration: React.FC = () => {
         onIntegrationConnectModalOpen={handleIntegrationConnectModalOpen}
         setSelection={setSelection}
         onIntegrationRemove={handleIntegrationRemove}
+        page={page}
+        pageSize={pageSize}
+        onTableChange={handleTableChange}
+        loading={loading}
+        onReload={handleReload}
       />
       <IntegrationConnectModal
         integrations={integrations}
diff --git a/web/src/components/organisms/Settings/Members/hooks.ts b/web/src/components/organisms/Settings/Members/hooks.ts
index a12f84d3ce..23bf6c374a 100644
--- a/web/src/components/organisms/Settings/Members/hooks.ts
+++ b/web/src/components/organisms/Settings/Members/hooks.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { Key, useCallback, useEffect, useMemo, useState } from "react";
 
 import Notification from "@reearth-cms/components/atoms/Notification";
 import { User, RoleUnion } from "@reearth-cms/components/molecules/Member/types";
@@ -25,16 +25,25 @@ export default () => {
   const [selectedMember, setSelectedMember] = useState<UserMember>();
   const [searchTerm, setSearchTerm] = useState<string>();
   const [owner, setOwner] = useState(false);
+  const [selection, setSelection] = useState<{ selectedRowKeys: Key[] }>({
+    selectedRowKeys: [],
+  });
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const t = useT();
 
   const handleSearchTerm = useCallback((term?: string) => {
     setSearchTerm(term);
+    setPage(1);
   }, []);
 
   const [searchedUser, changeSearchedUser] = useState<User>();
   const [searchedUserList, changeSearchedUserList] = useState<User[]>([]);
 
-  const { data } = useGetWorkspacesQuery();
+  const { data, refetch, loading } = useGetWorkspacesQuery({
+    fetchPolicy: "cache-and-network",
+    notifyOnNetworkStatusChange: true,
+  });
   const me = useMemo(
     () => ({ id: data?.me?.id, myWorkspace: data?.me?.myWorkspace?.id }),
     [data?.me?.id, data?.me?.myWorkspace?.id],
@@ -58,10 +67,8 @@ export default () => {
   }, [isOwner]);
 
   useEffect(() => {
-    if (workspaceId && !currentWorkspace) {
-      setWorkspace(workspaces?.find(workspace => workspace.id === workspaceId));
-    }
-  }, [currentWorkspace, setWorkspace, workspaces, data?.me, workspaceId]);
+    setWorkspace(workspaces?.find(workspace => workspace.id === workspaceId));
+  }, [setWorkspace, workspaces, data?.me, workspaceId]);
 
   const [searchUserQuery, { data: searchUserData }] = useGetUserBySearchLazyQuery({
     fetchPolicy: "no-cache",
@@ -161,19 +168,27 @@ export default () => {
   const [removeMemberFromWorkspaceMutation] = useRemoveMemberFromWorkspaceMutation();
 
   const handleMemberRemoveFromWorkspace = useCallback(
-    async (userId: string) => {
+    async (userIds: string[]) => {
       if (!workspaceId) return;
-      const result = await removeMemberFromWorkspaceMutation({
-        variables: { workspaceId, userId },
-        refetchQueries: ["GetWorkspaces"],
-      });
-      const workspace = result.data?.removeUserFromWorkspace?.workspace;
-      if (result.errors || !workspace) {
-        Notification.error({ message: t("Failed to delete member from the workspace.") });
-        return;
+      const results = await Promise.all(
+        userIds.map(async userId => {
+          const result = await removeMemberFromWorkspaceMutation({
+            variables: { workspaceId, userId },
+            refetchQueries: ["GetWorkspaces"],
+          });
+          if (result.errors) {
+            Notification.error({
+              message: t("Failed to remove member(s) from the workspace."),
+            });
+          }
+        }),
+      );
+      if (results) {
+        Notification.success({
+          message: t("Successfully removed member(s) from the workspace!"),
+        });
+        setSelection({ selectedRowKeys: [] });
       }
-      setWorkspace(fromGraphQLWorkspace(workspace as GQLWorkspace));
-      Notification.success({ message: t("Successfully removed member from the workspace!") });
     },
     [workspaceId, removeMemberFromWorkspaceMutation, setWorkspace, t],
   );
@@ -198,6 +213,15 @@ export default () => {
     setSelectedMember(undefined);
   }, []);
 
+  const handleReload = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  const handleTableChange = useCallback((page: number, pageSize: number) => {
+    setPage(page);
+    setPageSize(pageSize);
+  }, []);
+
   return {
     me,
     owner,
@@ -219,5 +243,12 @@ export default () => {
     handleMemberAddModalOpen,
     MemberAddModalShown,
     workspaceUserMembers,
+    selection,
+    setSelection,
+    page,
+    pageSize,
+    handleTableChange,
+    loading,
+    handleReload,
   };
 };
diff --git a/web/src/components/organisms/Settings/Members/index.tsx b/web/src/components/organisms/Settings/Members/index.tsx
index eeaa4fdc93..4f0599f3eb 100644
--- a/web/src/components/organisms/Settings/Members/index.tsx
+++ b/web/src/components/organisms/Settings/Members/index.tsx
@@ -26,6 +26,13 @@ const Members: React.FC = () => {
     handleMemberAddModalOpen,
     MemberAddModalShown,
     workspaceUserMembers,
+    selection,
+    setSelection,
+    page,
+    pageSize,
+    handleTableChange,
+    loading,
+    handleReload,
   } = useHooks();
 
   return (
@@ -38,6 +45,13 @@ const Members: React.FC = () => {
         handleRoleModalOpen={handleRoleModalOpen}
         handleMemberAddModalOpen={handleMemberAddModalOpen}
         workspaceUserMembers={workspaceUserMembers}
+        selection={selection}
+        setSelection={setSelection}
+        page={page}
+        pageSize={pageSize}
+        onTableChange={handleTableChange}
+        loading={loading}
+        onReload={handleReload}
       />
       {selectedMember && (
         <MemberRoleModal
diff --git a/web/src/i18n/translations/en.yml b/web/src/i18n/translations/en.yml
index ab44d624a0..f73db8ce87 100644
--- a/web/src/i18n/translations/en.yml
+++ b/web/src/i18n/translations/en.yml
@@ -192,10 +192,12 @@ Role Settings: ''
 Please input the appropriate role for this member!: ''
 Are you sure to remove this member?: ''
 Remove this member from workspace means this member will not view any content of this workspace.: ''
+Thumbnail: ''
+Email: ''
+Action: ''
 Change Role?: ''
 Members: ''
 New Member: ''
-search for a member: ''
 Groups: ''
 Add: ''
 Models: ''
@@ -488,8 +490,8 @@ Failed to add one or more members.: ''
 Successfully added member(s) to the workspace!: ''
 Failed to update member's role.: ''
 Successfully updated member's role!: ''
-Failed to delete member from the workspace.: ''
-Successfully removed member from the workspace!: ''
+Failed to remove member(s) from the workspace.: ''
+Successfully removed member(s) from the workspace!: ''
 Failed to update integration.: ''
 Successfully updated integration!: ''
 Failed to delete integration.: ''
diff --git a/web/src/i18n/translations/ja.yml b/web/src/i18n/translations/ja.yml
index 8380924f5b..04bbf7c2d6 100644
--- a/web/src/i18n/translations/ja.yml
+++ b/web/src/i18n/translations/ja.yml
@@ -192,10 +192,12 @@ Role Settings: ロール設定
 Please input the appropriate role for this member!: このメンバーに付与するロールを入力してください
 Are you sure to remove this member?: 本当にメンバーをこのワークスペースから削除してもよろしいですか？
 Remove this member from workspace means this member will not view any content of this workspace.: メンバーをワークスペースから削除すると、そのメンバーはワークスペース内のいかなるコンテンツも閲覧することができなくなります。
+Thumbnail: サムネイル
+Email: メールアドレス
+Action: 操作
 Change Role?: ロールを変更
 Members: メンバー
 New Member: メンバーを追加
-search for a member: 検索
 Groups: グループ
 Add: 追加
 Models: モデル
@@ -488,8 +490,8 @@ Failed to add one or more members.: メンバーの追加に失敗しました
 Successfully added member(s) to the workspace!: メンバーの追加に成功しました。
 Failed to update member's role.: メンバーのロールの更新に失敗しました。
 Successfully updated member's role!: メンバーのロールの更新に成功しました。
-Failed to delete member from the workspace.: メンバーの削除に失敗しました。
-Successfully removed member from the workspace!: メンバーの削除に成功しました。
+Failed to remove member(s) from the workspace.: メンバーの削除に失敗しました。
+Successfully removed member(s) from the workspace!: メンバーの削除に成功しました。
 Failed to update integration.: インテグレーションの更新に失敗しました。
 Successfully updated integration!: インテグレーションの更新に成功しました。
 Failed to delete integration.: インテグレーションの削除に失敗しました。