diff --git a/react/src/components/UserCredentialList.tsx b/react/src/components/UserCredentialList.tsx
index 66c42b8468..2a23d012b5 100644
--- a/react/src/components/UserCredentialList.tsx
+++ b/react/src/components/UserCredentialList.tsx
@@ -3,6 +3,7 @@ import {
   filterNonNullItems,
   transformSorterToOrderString,
 } from '../helper';
+import { exportCSVWithFormattingRules } from '../helper/csv-util';
 import { useUpdatableState } from '../hooks';
 import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
 import BAIPropertyFilter from './BAIPropertyFilter';
@@ -29,6 +30,7 @@ import {
   Button,
   Popconfirm,
   Radio,
+  TableColumnsType,
   Tag,
   Tooltip,
   Typography,
@@ -38,7 +40,7 @@ import graphql from 'babel-plugin-relay/macro';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { BanIcon, UndoIcon } from 'lucide-react';
-import { useState, useTransition } from 'react';
+import { useEffect, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery, useMutation } from 'react-relay';
 
@@ -150,6 +152,306 @@ const UserCredentialList: React.FC = () => {
       }
     `);
 
+  const columns: TableColumnsType<Keypair> = filterEmptyItem([
+    {
+      key: 'user_id',
+      title: t('credential.UserID'),
+      dataIndex: 'email',
+      fixed: 'left',
+      sorter: true,
+      // TODO: user_id field in keypair_list is used as user's email, but sorting is done by email field
+      render: (value, record) => {
+        return record.user_id;
+      },
+    },
+    {
+      key: 'access_key',
+      title: t('credential.AccessKey'),
+      dataIndex: 'access_key',
+      sorter: true,
+    },
+    {
+      key: 'is_admin',
+      title: t('credential.Permission'),
+      dataIndex: 'is_admin',
+      render: (isAdmin) =>
+        isAdmin ? (
+          <>
+            <Tag color="red">admin</Tag>
+            <Tag color="green">user</Tag>
+          </>
+        ) : (
+          <Tag color="green">user</Tag>
+        ),
+      sorter: true,
+    },
+    {
+      key: 'key_age',
+      title: t('credential.KeyAge'),
+      dataIndex: 'created_at',
+      render: (createdAt) => {
+        return `${dayjs().diff(createdAt, 'day')}${t('credential.Days')}`;
+      },
+      sorter: true,
+    },
+    {
+      key: 'created_at',
+      title: t('credential.CreatedAt'),
+      dataIndex: 'created_at',
+      render: (createdAt) => dayjs(createdAt).format('lll'),
+      sorter: true,
+    },
+    {
+      key: 'resource_policy',
+      title: t('credential.ResourcePolicy'),
+      dataIndex: 'resource_policy',
+      sorter: true,
+    },
+    {
+      key: 'allocation',
+      title: t('credential.Allocation'),
+      render: (value, record) => {
+        return (
+          <Flex direction="column" align="start">
+            <Typography.Text>
+              {record.concurrency_used}
+              <Typography.Text
+                type="secondary"
+                style={{
+                  marginLeft: token.marginXXS,
+                  fontSize: token.fontSizeSM,
+                }}
+              >
+                {t('credential.Sessions')}
+              </Typography.Text>
+            </Typography.Text>
+            <Typography.Text
+              style={{
+                fontSize: token.fontSizeSM,
+              }}
+            >
+              {record.rate_limit}
+              <Typography.Text
+                type="secondary"
+                style={{
+                  marginLeft: token.marginXXS,
+                  fontSize: token.fontSizeSM,
+                }}
+              >
+                {t('credential.ReqPer15Min')}
+              </Typography.Text>
+            </Typography.Text>
+            <Typography.Text
+              style={{
+                fontSize: token.fontSizeSM,
+              }}
+            >
+              {record.num_queries}
+              <Typography.Text
+                type="secondary"
+                style={{
+                  marginLeft: token.marginXXS,
+                  fontSize: token.fontSizeSM,
+                }}
+              >
+                {t('credential.Queries')}
+              </Typography.Text>
+            </Typography.Text>
+          </Flex>
+        );
+      },
+    },
+    {
+      key: 'control',
+      title: t('general.Control'),
+      fixed: 'right',
+      render: (value, record) => {
+        return (
+          <Flex gap={token.marginXS}>
+            <Button
+              type="text"
+              icon={
+                <InfoCircleOutlined style={{ color: token.colorSuccess }} />
+              }
+              onClick={() => {
+                startInfoModalOpenTransition(() => {
+                  setKeypairInfoModalFrgmt(record);
+                });
+              }}
+            />
+            <Button
+              type="text"
+              icon={<SettingOutlined style={{ color: token.colorInfo }} />}
+              onClick={() => {
+                startSettingModalOpenTransition(() => {
+                  setKeypairSettingModalFrgmt(record);
+                });
+              }}
+            />
+            {activeType === 'inactive' && (
+              <Tooltip title={t('credential.Active')}>
+                <Popconfirm
+                  title={t('credential.ConfirmUpdateStatusToActive')}
+                  description={record.user_id}
+                  okType="danger"
+                  okText={t('credential.Active')}
+                  placement="left"
+                  onConfirm={() => {
+                    commitModifyKeypair({
+                      variables: {
+                        access_key: record.access_key ?? '',
+                        props: {
+                          is_active: true,
+                        },
+                      },
+                      onCompleted: (res, errors) => {
+                        if (!res?.modify_keypair?.ok || errors) {
+                          message.error(res?.modify_keypair?.msg);
+                          return;
+                        }
+                        message.success(t('environment.SuccessfullyModified'));
+                        startRefreshTransition(() => {
+                          updateFetchKey();
+                        });
+                      },
+                      onError: (error) => {
+                        message.error(error?.message);
+                        console.error(error);
+                      },
+                    });
+                  }}
+                >
+                  <Button type="text" icon={<UndoIcon />} />
+                </Popconfirm>
+              </Tooltip>
+            )}
+            <Tooltip
+              title={
+                activeType === 'active' ? t('credential.Inactive') : undefined
+              }
+            >
+              <Popconfirm
+                title={
+                  activeType === 'active'
+                    ? t('credential.ConfirmUpdateStatusToInActive')
+                    : t('dialog.ask.DoYouWantToProceed')
+                }
+                description={
+                  activeType === 'active'
+                    ? record.user_id
+                    : t('dialog.warning.CannotBeUndone')
+                }
+                okButtonProps={{
+                  loading:
+                    isInFlightCommitModifyKeypair ||
+                    isInFlightCommitDeleteKeypair,
+                }}
+                okType="danger"
+                okText={
+                  activeType === 'active'
+                    ? t('credential.Inactive')
+                    : t('button.Delete')
+                }
+                placement="left"
+                onConfirm={() => {
+                  activeType === 'active'
+                    ? commitModifyKeypair({
+                        variables: {
+                          access_key: record.access_key ?? '',
+                          props: {
+                            is_active: false,
+                          },
+                        },
+                        onCompleted: (res, errors) => {
+                          if (!res?.modify_keypair?.ok || errors) {
+                            message.error(res?.modify_keypair?.msg);
+                            return;
+                          }
+                          message.success(
+                            t('credential.KeySeccessfullyDeleted'),
+                          );
+                          startRefreshTransition(() => {
+                            updateFetchKey();
+                          });
+                        },
+                        onError: (error) => {
+                          message.error(error?.message);
+                          console.error(error);
+                        },
+                      })
+                    : commitDeleteKeypair({
+                        variables: {
+                          access_key: record.access_key ?? '',
+                        },
+                        onCompleted: (res, errors) => {
+                          if (!res?.delete_keypair?.ok || errors) {
+                            message.error(res?.delete_keypair?.msg);
+                            return;
+                          }
+                          message.success(
+                            t('credential.KeySeccessfullyDeleted'),
+                          );
+                          startRefreshTransition(() => {
+                            updateFetchKey();
+                          });
+                        },
+                        onError: (error) => {
+                          message.error(error?.message);
+                          console.error(error);
+                        },
+                      });
+                }}
+              >
+                <Button
+                  type="text"
+                  danger
+                  icon={
+                    activeType === 'active' ? <BanIcon /> : <DeleteOutlined />
+                  }
+                />
+              </Popconfirm>
+            </Tooltip>
+          </Flex>
+        );
+      },
+    },
+  ]);
+
+  useEffect(() => {
+    const handleExportCSV = () => {
+      if (!keypair_list?.items || _.isEmpty(keypair_list?.items)) {
+        message.error(t('credential.NoDataToExport'));
+        return;
+      }
+
+      const columnKeys = _.without(
+        _.map(columns, (column) => _.toString(column.key)),
+        'control',
+      );
+      const responseData: Partial<Keypair>[] = _.map(
+        keypair_list?.items,
+        (item) => {
+          return _.pick(item, columnKeys);
+        },
+      );
+
+      exportCSVWithFormattingRules(
+        responseData,
+        `${activeType === 'active' ? 'active' : 'inactive'}_credentials_list`,
+        {
+          is_admin: (value) => (value ? 'admin' : 'user'),
+          created_at: (value) => dayjs(value).format('lll'),
+        },
+      );
+    };
+
+    document.addEventListener('export-csv', handleExportCSV);
+    return () => {
+      document.removeEventListener('export-csv', handleExportCSV);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keypair_list, columns, activeType]);
+
   return (
     <Flex direction="column" align="stretch">
       <Flex
@@ -262,282 +564,7 @@ const UserCredentialList: React.FC = () => {
           indicator: <LoadingOutlined />,
         }}
         dataSource={filterNonNullItems(keypair_list?.items)}
-        columns={filterEmptyItem([
-          {
-            key: 'userID',
-            title: t('credential.UserID'),
-            dataIndex: 'email',
-            fixed: 'left',
-            sorter: true,
-            // TODO: user_id field in keypair_list is used as user's email, but sorting is done by email field
-            render: (value, record) => {
-              return record.user_id;
-            },
-          },
-          {
-            key: 'accessKey',
-            title: t('credential.AccessKey'),
-            dataIndex: 'access_key',
-            sorter: true,
-          },
-          {
-            key: 'permission',
-            title: t('credential.Permission'),
-            dataIndex: 'is_admin',
-            render: (isAdmin) =>
-              isAdmin ? (
-                <>
-                  <Tag color="red">admin</Tag>
-                  <Tag color="green">user</Tag>
-                </>
-              ) : (
-                <Tag color="green">user</Tag>
-              ),
-            sorter: true,
-          },
-          {
-            key: 'keyAge',
-            title: t('credential.KeyAge'),
-            dataIndex: 'created_at',
-            render: (createdAt) => {
-              return `${dayjs().diff(createdAt, 'day')}${t('credential.Days')}`;
-            },
-            sorter: true,
-          },
-          {
-            key: 'createdAt',
-            title: t('credential.CreatedAt'),
-            dataIndex: 'created_at',
-            render: (createdAt) => dayjs(createdAt).format('lll'),
-            sorter: true,
-          },
-          {
-            key: 'resourcePolicy',
-            title: t('credential.ResourcePolicy'),
-            dataIndex: 'resource_policy',
-            sorter: true,
-          },
-          {
-            key: 'allocation',
-            title: t('credential.Allocation'),
-            render: (record) => {
-              return (
-                <Flex direction="column" align="start">
-                  <Typography.Text>
-                    {record.concurrency_used}
-                    <Typography.Text
-                      type="secondary"
-                      style={{
-                        marginLeft: token.marginXXS,
-                        fontSize: token.fontSizeSM,
-                      }}
-                    >
-                      {t('credential.Sessions')}
-                    </Typography.Text>
-                  </Typography.Text>
-                  <Typography.Text
-                    style={{
-                      fontSize: token.fontSizeSM,
-                    }}
-                  >
-                    {record.rate_limit}
-                    <Typography.Text
-                      type="secondary"
-                      style={{
-                        marginLeft: token.marginXXS,
-                        fontSize: token.fontSizeSM,
-                      }}
-                    >
-                      {t('credential.ReqPer15Min')}
-                    </Typography.Text>
-                  </Typography.Text>
-                  <Typography.Text
-                    style={{
-                      fontSize: token.fontSizeSM,
-                    }}
-                  >
-                    {record.num_queries}
-                    <Typography.Text
-                      type="secondary"
-                      style={{
-                        marginLeft: token.marginXXS,
-                        fontSize: token.fontSizeSM,
-                      }}
-                    >
-                      {t('credential.Queries')}
-                    </Typography.Text>
-                  </Typography.Text>
-                </Flex>
-              );
-            },
-          },
-          {
-            key: 'control',
-            title: t('general.Control'),
-            fixed: 'right',
-            render: (value, record) => {
-              return (
-                <Flex gap={token.marginXS}>
-                  <Button
-                    type="text"
-                    icon={
-                      <InfoCircleOutlined
-                        style={{ color: token.colorSuccess }}
-                      />
-                    }
-                    onClick={() => {
-                      startInfoModalOpenTransition(() => {
-                        setKeypairInfoModalFrgmt(record);
-                      });
-                    }}
-                  />
-                  <Button
-                    type="text"
-                    icon={
-                      <SettingOutlined style={{ color: token.colorInfo }} />
-                    }
-                    onClick={() => {
-                      startSettingModalOpenTransition(() => {
-                        setKeypairSettingModalFrgmt(record);
-                      });
-                    }}
-                  />
-                  {activeType === 'inactive' && (
-                    <Tooltip title={t('credential.Active')}>
-                      <Popconfirm
-                        title={t('credential.ConfirmUpdateStatusToActive')}
-                        description={record.user_id}
-                        okType="danger"
-                        okText={t('credential.Active')}
-                        placement="left"
-                        onConfirm={() => {
-                          commitModifyKeypair({
-                            variables: {
-                              access_key: record.access_key ?? '',
-                              props: {
-                                is_active: true,
-                              },
-                            },
-                            onCompleted: (res, errors) => {
-                              if (!res?.modify_keypair?.ok || errors) {
-                                message.error(res?.modify_keypair?.msg);
-                                return;
-                              }
-                              message.success(
-                                t('environment.SuccessfullyModified'),
-                              );
-                              startRefreshTransition(() => {
-                                updateFetchKey();
-                              });
-                            },
-                            onError: (error) => {
-                              message.error(error?.message);
-                              console.error(error);
-                            },
-                          });
-                        }}
-                      >
-                        <Button type="text" icon={<UndoIcon />} />
-                      </Popconfirm>
-                    </Tooltip>
-                  )}
-                  <Tooltip
-                    title={
-                      activeType === 'active'
-                        ? t('credential.Inactive')
-                        : undefined
-                    }
-                  >
-                    <Popconfirm
-                      title={
-                        activeType === 'active'
-                          ? t('credential.ConfirmUpdateStatusToInActive')
-                          : t('dialog.ask.DoYouWantToProceed')
-                      }
-                      description={
-                        activeType === 'active'
-                          ? record.user_id
-                          : t('dialog.warning.CannotBeUndone')
-                      }
-                      okButtonProps={{
-                        loading:
-                          isInFlightCommitModifyKeypair ||
-                          isInFlightCommitDeleteKeypair,
-                      }}
-                      okType="danger"
-                      okText={
-                        activeType === 'active'
-                          ? t('credential.Inactive')
-                          : t('button.Delete')
-                      }
-                      placement="left"
-                      onConfirm={() => {
-                        activeType === 'active'
-                          ? commitModifyKeypair({
-                              variables: {
-                                access_key: record.access_key ?? '',
-                                props: {
-                                  is_active: false,
-                                },
-                              },
-                              onCompleted: (res, errors) => {
-                                if (!res?.modify_keypair?.ok || errors) {
-                                  message.error(res?.modify_keypair?.msg);
-                                  return;
-                                }
-                                message.success(
-                                  t('credential.KeySeccessfullyDeleted'),
-                                );
-                                startRefreshTransition(() => {
-                                  updateFetchKey();
-                                });
-                              },
-                              onError: (error) => {
-                                message.error(error?.message);
-                                console.error(error);
-                              },
-                            })
-                          : commitDeleteKeypair({
-                              variables: {
-                                access_key: record.access_key ?? '',
-                              },
-                              onCompleted: (res, errors) => {
-                                if (!res?.delete_keypair?.ok || errors) {
-                                  message.error(res?.delete_keypair?.msg);
-                                  return;
-                                }
-                                message.success(
-                                  t('credential.KeySeccessfullyDeleted'),
-                                );
-                                startRefreshTransition(() => {
-                                  updateFetchKey();
-                                });
-                              },
-                              onError: (error) => {
-                                message.error(error?.message);
-                                console.error(error);
-                              },
-                            });
-                      }}
-                    >
-                      <Button
-                        type="text"
-                        danger
-                        icon={
-                          activeType === 'active' ? (
-                            <BanIcon />
-                          ) : (
-                            <DeleteOutlined />
-                          )
-                        }
-                      />
-                    </Popconfirm>
-                  </Tooltip>
-                </Flex>
-              );
-            },
-          },
-        ])}
+        columns={columns}
         showSorterTooltip={false}
         pagination={{
           pageSize: tablePaginationOption.pageSize,
diff --git a/react/src/components/UserNodeList.tsx b/react/src/components/UserNodeList.tsx
index a059893d70..03e3f19b4a 100644
--- a/react/src/components/UserNodeList.tsx
+++ b/react/src/components/UserNodeList.tsx
@@ -5,27 +5,46 @@ import {
   filterNonNullItems,
   transformSorterToOrderString,
 } from '../helper';
+import { exportCSVWithFormattingRules } from '../helper/csv-util';
 import { useUpdatableState } from '../hooks';
 import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
 import UserInfoModal from './UserInfoModal';
 import UserSettingModal from './UserSettingModal';
 import { UserNodeListModifyMutation } from './__generated__/UserNodeListModifyMutation.graphql';
-import { UserNodeListQuery } from './__generated__/UserNodeListQuery.graphql';
+import {
+  UserNodeListQuery,
+  UserNodeListQuery$data,
+} from './__generated__/UserNodeListQuery.graphql';
 import {
   ReloadOutlined,
   LoadingOutlined,
   InfoCircleOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
-import { Tooltip, Button, Table, theme, Radio, Popconfirm, App } from 'antd';
+import {
+  Tooltip,
+  Button,
+  Table,
+  theme,
+  Radio,
+  Popconfirm,
+  App,
+  TableColumnsType,
+} from 'antd';
 import graphql from 'babel-plugin-relay/macro';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { BanIcon, PlusIcon, UndoIcon } from 'lucide-react';
-import React, { useState, useTransition } from 'react';
+import React, { useEffect, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery, useMutation } from 'react-relay';
 
+type UserNode = NonNullable<
+  NonNullable<
+    NonNullable<UserNodeListQuery$data['user_nodes']>
+  >['edges'][number]
+>['node'];
+
 interface UserNodeListProps {}
 
 const UserNodeList: React.FC<UserNodeListProps> = () => {
@@ -124,6 +143,163 @@ const UserNodeList: React.FC<UserNodeListProps> = () => {
       }
     `);
 
+  const columns: TableColumnsType<UserNode> = filterEmptyItem([
+    {
+      key: 'email',
+      title: t('credential.UserID'),
+      dataIndex: 'email',
+      sorter: true,
+    },
+    {
+      key: 'username',
+      title: t('credential.Name'),
+      dataIndex: 'username',
+      sorter: true,
+    },
+    {
+      key: 'role',
+      title: t('credential.Role'),
+      dataIndex: 'role',
+      sorter: true,
+    },
+    {
+      key: 'description',
+      title: t('credential.Description'),
+      dataIndex: 'description',
+    },
+    {
+      key: 'created_at',
+      title: t('credential.CreatedAt'),
+      dataIndex: 'created_at',
+      render: (text) => dayjs(text).format('lll'),
+      sorter: true,
+      defaultSortOrder: 'descend',
+    },
+    activeFilter === 'status != "active"' && {
+      key: 'status',
+      title: t('credential.Status'),
+      dataIndex: 'status',
+      sorter: true,
+    },
+    {
+      key: 'control',
+      title: t('general.Control'),
+      render: (value, record) => {
+        const isActive = record?.status === 'active';
+        return (
+          <Flex gap={token.marginXS}>
+            <Button
+              type="text"
+              icon={
+                <InfoCircleOutlined style={{ color: token.colorSuccess }} />
+              }
+              onClick={() => {
+                startInfoModalOpenTransition(() => {
+                  setEmailForInfoModal(record?.email || null);
+                });
+              }}
+            />
+            <Button
+              type="text"
+              icon={<SettingOutlined style={{ color: token.colorInfo }} />}
+              onClick={() => {
+                startSettingModalOpenTransition(() => {
+                  setEmailForSettingModal(record?.email || null);
+                });
+              }}
+            />
+            <Tooltip
+              title={
+                isActive ? t('credential.Inactive') : t('credential.Active')
+              }
+            >
+              <Popconfirm
+                title={
+                  isActive
+                    ? t('credential.ConfirmUpdateStatusToInActive')
+                    : t('credential.ConfirmUpdateStatusToActive')
+                }
+                placement="left"
+                okType={isActive ? 'danger' : 'primary'}
+                okText={isActive ? t('credential.Inactive') : undefined}
+                description={record?.email}
+                onConfirm={() => {
+                  setPendingUserId(record?.id || '');
+                  commitModifyUser({
+                    variables: {
+                      email: record?.email || '',
+                      props: {
+                        status: isActive ? 'inactive' : 'active',
+                      },
+                    },
+                    onCompleted: () => {
+                      message.success(
+                        t('credential.StatusUpdatedSuccessfully'),
+                      );
+                      startRefreshTransition(() => {
+                        updateFetchKey();
+                      });
+                    },
+                    onError: (error) => {
+                      message.error(error?.message);
+                      console.error(error);
+                    },
+                  });
+                }}
+              >
+                <Button
+                  type="text"
+                  danger={isActive}
+                  icon={isActive ? <BanIcon /> : <UndoIcon />}
+                  disabled={
+                    isInFlightCommitModifyUser && pendingUserId !== record?.id
+                  }
+                  loading={
+                    isInFlightCommitModifyUser && pendingUserId === record?.id
+                  }
+                />
+              </Popconfirm>
+            </Tooltip>
+          </Flex>
+        );
+      },
+    },
+  ]);
+
+  useEffect(() => {
+    const handleExportCSV = () => {
+      if (!user_nodes?.edges || _.isEmpty(user_nodes?.edges)) {
+        message.error(t('credential.NoDataToExport'));
+        return;
+      }
+
+      const columnKeys = _.without(
+        _.map(columns, (column) => _.toString(column?.key)),
+        'control',
+      );
+      const responseData: Partial<UserNode>[] = _.map(
+        user_nodes?.edges,
+        (e) => {
+          return _.pick(e?.node, columnKeys);
+        },
+      );
+
+      exportCSVWithFormattingRules(
+        responseData,
+        `${activeFilter === 'status == "active"' ? 'active' : 'inactive'}_users_list`,
+        {
+          created_at: (value) => dayjs(value).format('lll'),
+        },
+      );
+    };
+
+    document.addEventListener('export-csv', handleExportCSV);
+    return () => {
+      document.removeEventListener('export-csv', handleExportCSV);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user_nodes, columns, activeFilter]);
+
   return (
     <Flex direction="column" align="stretch">
       <Flex
@@ -237,134 +413,7 @@ const UserNodeList: React.FC<UserNodeListProps> = () => {
         scroll={{ x: 'max-content' }}
         rowKey={'id'}
         dataSource={_.map(filterNonNullItems(user_nodes?.edges), (e) => e.node)}
-        columns={filterEmptyItem([
-          {
-            key: 'email',
-            title: t('credential.UserID'),
-            dataIndex: 'email',
-            sorter: true,
-          },
-          {
-            key: 'username',
-            title: t('credential.Name'),
-            dataIndex: 'username',
-            sorter: true,
-          },
-          {
-            key: 'role',
-            title: t('credential.Role'),
-            dataIndex: 'role',
-            sorter: true,
-          },
-          {
-            key: 'description',
-            title: t('credential.Description'),
-            dataIndex: 'description',
-          },
-          {
-            title: t('credential.CreatedAt'),
-            dataIndex: 'created_at',
-            render: (text) => dayjs(text).format('lll'),
-            sorter: true,
-            defaultSortOrder: 'descend',
-          },
-          activeFilter === 'status != "active"' && {
-            key: 'status',
-            title: t('credential.Status'),
-            dataIndex: 'status',
-            sorter: true,
-          },
-          {
-            title: t('general.Control'),
-            render: (record) => {
-              const isActive = record?.status === 'active';
-              return (
-                <Flex gap={token.marginXS}>
-                  <Button
-                    type="text"
-                    icon={
-                      <InfoCircleOutlined
-                        style={{ color: token.colorSuccess }}
-                      />
-                    }
-                    onClick={() => {
-                      startInfoModalOpenTransition(() => {
-                        setEmailForInfoModal(record?.email || null);
-                      });
-                    }}
-                  />
-                  <Button
-                    type="text"
-                    icon={
-                      <SettingOutlined style={{ color: token.colorInfo }} />
-                    }
-                    onClick={() => {
-                      startSettingModalOpenTransition(() => {
-                        setEmailForSettingModal(record?.email || null);
-                      });
-                    }}
-                  />
-                  <Tooltip
-                    title={
-                      isActive
-                        ? t('credential.Inactive')
-                        : t('credential.Active')
-                    }
-                  >
-                    <Popconfirm
-                      title={
-                        isActive
-                          ? t('credential.ConfirmUpdateStatusToInActive')
-                          : t('credential.ConfirmUpdateStatusToActive')
-                      }
-                      placement="left"
-                      okType={isActive ? 'danger' : 'primary'}
-                      okText={isActive ? t('credential.Inactive') : undefined}
-                      description={record?.email}
-                      onConfirm={() => {
-                        setPendingUserId(record?.id || '');
-                        commitModifyUser({
-                          variables: {
-                            email: record?.email || '',
-                            props: {
-                              status: isActive ? 'inactive' : 'active',
-                            },
-                          },
-                          onCompleted: () => {
-                            message.success(
-                              t('credential.StatusUpdatedSuccessfully'),
-                            );
-                            startRefreshTransition(() => {
-                              updateFetchKey();
-                            });
-                          },
-                          onError: (error) => {
-                            message.error(error?.message);
-                            console.error(error);
-                          },
-                        });
-                      }}
-                    >
-                      <Button
-                        type="text"
-                        danger={isActive}
-                        icon={isActive ? <BanIcon /> : <UndoIcon />}
-                        disabled={
-                          isInFlightCommitModifyUser &&
-                          pendingUserId !== record?.id
-                        }
-                        loading={
-                          isInFlightCommitModifyUser &&
-                          pendingUserId === record?.id
-                        }
-                      />
-                    </Popconfirm>
-                  </Tooltip>
-                </Flex>
-              );
-            },
-          },
-        ])}
+        columns={columns}
         showSorterTooltip={false}
         sortDirections={['descend', 'ascend', 'descend']}
         pagination={{
diff --git a/react/src/pages/UserCredentialsPage.tsx b/react/src/pages/UserCredentialsPage.tsx
index 778121398f..0a073a6e08 100644
--- a/react/src/pages/UserCredentialsPage.tsx
+++ b/react/src/pages/UserCredentialsPage.tsx
@@ -3,6 +3,8 @@ import Flex from '../components/Flex';
 import FlexActivityIndicator from '../components/FlexActivityIndicator';
 import UserCredentialList from '../components/UserCredentialList';
 import UserNodeList from '../components/UserNodeList';
+import { MoreOutlined } from '@ant-design/icons';
+import { Button, Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import { CardTabListType } from 'antd/es/card';
 import { Suspense } from 'react';
@@ -40,6 +42,23 @@ const UserCredentialsPage: React.FC = () => {
       activeTabKey={curTabKey}
       onTabChange={setCurTabKey}
       tabList={tabItems}
+      tabBarExtraContent={
+        <Dropdown
+          menu={{
+            items: [
+              {
+                key: 'exportCSV',
+                label: t('credential.ExportCSV'),
+                onClick: () => {
+                  document.dispatchEvent(new CustomEvent('export-csv'));
+                },
+              },
+            ],
+          }}
+        >
+          <Button type="text" style={{ padding: 0 }} icon={<MoreOutlined />} />
+        </Dropdown>
+      }
     >
       <Suspense
         fallback={
diff --git a/resources/i18n/de.json b/resources/i18n/de.json
index 137159d233..3f8ad7edf3 100644
--- a/resources/i18n/de.json
+++ b/resources/i18n/de.json
@@ -619,7 +619,9 @@
     "LastUsed": "Zuletzt verwendeten",
     "Queries": "Abfragen",
     "ReqPer15Min": "Erforderlich pro 15 Min",
-    "Sessions": "Sitzungen"
+    "Sessions": "Sitzungen",
+    "NoDataToExport": "Die Daten für den CSV-Extrakt sind nicht vorhanden.",
+    "ExportCSV": "CSV exportieren"
   },
   "data": {
     "Folders": "Ordner",
diff --git a/resources/i18n/el.json b/resources/i18n/el.json
index 2b5839903e..d4ca34a341 100644
--- a/resources/i18n/el.json
+++ b/resources/i18n/el.json
@@ -619,7 +619,9 @@
     "LastUsed": "Τελευταία χρήση",
     "Queries": "Ερωτήματα",
     "ReqPer15Min": "Απαίτηση ανά 15 λεπτά",
-    "Sessions": "Συνεδρίες"
+    "Sessions": "Συνεδρίες",
+    "NoDataToExport": "Τα δεδομένα για το απόσπασμα CSV δεν υπάρχουν.",
+    "ExportCSV": "εξαγωγή CSV"
   },
   "data": {
     "Folders": "Φάκελοι",
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index 778465854e..94b79f547c 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -746,7 +746,9 @@
     "Queries": "Queries",
     "ReqPer15Min": "Req per 15 min",
     "Sessions": "Sessions",
-    "LastUsed": "Last Used"
+    "LastUsed": "Last Used",
+    "NoDataToExport": "The data for the CSV extract does not exist.",
+    "ExportCSV": "export CSV"
   },
   "data": {
     "Folders": "Folders",
diff --git a/resources/i18n/es.json b/resources/i18n/es.json
index 02a2f9a54a..7ae9d3d7c5 100644
--- a/resources/i18n/es.json
+++ b/resources/i18n/es.json
@@ -238,7 +238,9 @@
     "Queries": "Consultas",
     "ReqPer15Min": "Requerido por 15 min",
     "Sessions": "Sesiones",
-    "LastUsed": "Último utilizado"
+    "LastUsed": "Último utilizado",
+    "NoDataToExport": "Los datos para el extracto CSV no existen.",
+    "ExportCSV": "exportar CSV"
   },
   "data": {
     "Allowslettersnumbersand-_": "Permite letras, números y -_",
diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
index cbeaa71a37..40cc5a960f 100644
--- a/resources/i18n/fi.json
+++ b/resources/i18n/fi.json
@@ -238,7 +238,9 @@
     "Queries": "Kyselyt",
     "ReqPer15Min": "Req per 15 min",
     "Sessions": "Istunnot",
-    "LastUsed": "Viimeksi käytetty"
+    "LastUsed": "Viimeksi käytetty",
+    "NoDataToExport": "CSV-otteen tietoja ei ole olemassa.",
+    "ExportCSV": "vie CSV"
   },
   "data": {
     "Allowslettersnumbersand-_": "Sallii kirjaimet, numerot ja -_",
diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
index c273cc39b3..68eb35a1bb 100644
--- a/resources/i18n/fr.json
+++ b/resources/i18n/fr.json
@@ -619,7 +619,9 @@
     "Queries": "Requêtes",
     "ReqPer15Min": "Demande par 15 min",
     "Sessions": "Séances",
-    "LastUsed": "Dernière utilisation"
+    "LastUsed": "Dernière utilisation",
+    "NoDataToExport": "Les données pour l'extrait CSV n'existent pas.",
+    "ExportCSV": "exporter au format CSV"
   },
   "data": {
     "Folders": "Dossiers",
diff --git a/resources/i18n/id.json b/resources/i18n/id.json
index 9dc82a7ac8..801cab6402 100644
--- a/resources/i18n/id.json
+++ b/resources/i18n/id.json
@@ -620,7 +620,9 @@
     "Queries": "Pertanyaan",
     "ReqPer15Min": "Persyaratan per 15 menit",
     "Sessions": "Sesi",
-    "LastUsed": "Terakhir digunakan"
+    "LastUsed": "Terakhir digunakan",
+    "NoDataToExport": "Data untuk ekstrak CSV tidak ada.",
+    "ExportCSV": "ekspor CSV"
   },
   "data": {
     "Folders": "Folder",
diff --git a/resources/i18n/it.json b/resources/i18n/it.json
index 7cab8af3d8..44206b1cbb 100644
--- a/resources/i18n/it.json
+++ b/resources/i18n/it.json
@@ -620,7 +620,9 @@
     "Queries": "Domande",
     "ReqPer15Min": "Richiesto ogni 15 min",
     "Sessions": "Sessioni",
-    "LastUsed": "Ultimo uso"
+    "LastUsed": "Ultimo uso",
+    "NoDataToExport": "I dati per l'estrazione CSV non esistono.",
+    "ExportCSV": "esportare CSV"
   },
   "data": {
     "Folders": "cartelle",
diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
index 7e9806638c..63fab06943 100644
--- a/resources/i18n/ja.json
+++ b/resources/i18n/ja.json
@@ -619,7 +619,9 @@
     "Queries": "クエリ",
     "ReqPer15Min": "15分あたりの要求",
     "Sessions": "セッション",
-    "LastUsed": "最後に使用した"
+    "LastUsed": "最後に使用した",
+    "NoDataToExport": "CSV抽出用のデータが存在しません。",
+    "ExportCSV": "CSVエクスポート"
   },
   "data": {
     "Folders": "フォルダー",
diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
index 86672008ab..f3fa98c5ec 100644
--- a/resources/i18n/ko.json
+++ b/resources/i18n/ko.json
@@ -734,7 +734,9 @@
     "Queries": "쿼리",
     "ReqPer15Min": "15분당 요청 수",
     "Sessions": "세션",
-    "LastUsed": "최종 사용일"
+    "LastUsed": "최종 사용일",
+    "NoDataToExport": "CSV 추출을 위한 데이터가 존재하지 않습니다.",
+    "ExportCSV": "CSV로 내보내기"
   },
   "data": {
     "Folders": "폴더",
diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
index 725e01c271..8ccfd4c396 100644
--- a/resources/i18n/mn.json
+++ b/resources/i18n/mn.json
@@ -621,7 +621,9 @@
     "Queries": "Асуултууд",
     "ReqPer15Min": "15 минут тутамд хэрэгцээ",
     "Sessions": "Хурал",
-    "LastUsed": "Сүүлд ашигласан"
+    "LastUsed": "Сүүлд ашигласан",
+    "NoDataToExport": "CSV хандалтын өгөгдөл байхгүй байна.",
+    "ExportCSV": "CSV экспортлох"
   },
   "data": {
     "Folders": "Фолдерууд",
diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
index 8f437e2df5..da9f3e21e7 100644
--- a/resources/i18n/ms.json
+++ b/resources/i18n/ms.json
@@ -619,7 +619,9 @@
     "Queries": "Pertanyaan",
     "ReqPer15Min": "Req setiap 15 min",
     "Sessions": "Sesi",
-    "LastUsed": "Kali terakhir digunakan"
+    "LastUsed": "Kali terakhir digunakan",
+    "NoDataToExport": "Data untuk ekstrak CSV tidak wujud.",
+    "ExportCSV": "eksport CSV"
   },
   "data": {
     "Folders": "Folder",
diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
index f1bed52fcd..1734217c18 100644
--- a/resources/i18n/pl.json
+++ b/resources/i18n/pl.json
@@ -619,7 +619,9 @@
     "LastUsed": "Ostatnio używane",
     "Queries": "Zapytania",
     "ReqPer15Min": "Zapotrzebowanie na 15 min",
-    "Sessions": "Sesje"
+    "Sessions": "Sesje",
+    "NoDataToExport": "Dane do ekstraktu CSV nie istnieją.",
+    "ExportCSV": "eksportuj plik CSV"
   },
   "data": {
     "Folders": "Lornetka składana",
diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
index 9d5c9a0ddc..633660270d 100644
--- a/resources/i18n/pt-BR.json
+++ b/resources/i18n/pt-BR.json
@@ -619,7 +619,9 @@
     "Queries": "Consultas",
     "ReqPer15Min": "Solicitação por 15 min",
     "Sessions": "Sessões",
-    "LastUsed": "Usado por último"
+    "LastUsed": "Usado por último",
+    "NoDataToExport": "Os dados para a extração CSV não existem.",
+    "ExportCSV": "exportar CSV"
   },
   "data": {
     "Folders": "Pastas",
diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
index 02e9edb41a..cd07f0ca2a 100644
--- a/resources/i18n/pt.json
+++ b/resources/i18n/pt.json
@@ -619,7 +619,9 @@
     "Queries": "Consultas",
     "ReqPer15Min": "Solicitação por 15 min",
     "Sessions": "Sessões",
-    "LastUsed": "Usado por último"
+    "LastUsed": "Usado por último",
+    "NoDataToExport": "Os dados para a extração CSV não existem.",
+    "ExportCSV": "exportar CSV"
   },
   "data": {
     "Folders": "Pastas",
diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
index e6fd9a7143..dd67bd9f33 100644
--- a/resources/i18n/ru.json
+++ b/resources/i18n/ru.json
@@ -619,7 +619,9 @@
     "Queries": "Запросы",
     "ReqPer15Min": "Запрос за 15 минут",
     "Sessions": "Сессии",
-    "LastUsed": "Последний раз был использован"
+    "LastUsed": "Последний раз был использован",
+    "NoDataToExport": "Данные для извлечения CSV не существуют.",
+    "ExportCSV": "экспортировать CSV"
   },
   "data": {
     "Folders": "Папки",
diff --git a/resources/i18n/th.json b/resources/i18n/th.json
index 3b8fd88d89..f5545731fe 100644
--- a/resources/i18n/th.json
+++ b/resources/i18n/th.json
@@ -742,7 +742,9 @@
     "Queries": "แบบสอบถาม",
     "ReqPer15Min": "ต้องการต่อ 15 นาที",
     "Sessions": "เซสชัน",
-    "LastUsed": "ใช้ครั้งล่าสุด"
+    "LastUsed": "ใช้ครั้งล่าสุด",
+    "NoDataToExport": "ไม่มีข้อมูลสำหรับการแยก CSV",
+    "ExportCSV": "ส่งออก CSV"
   },
   "data": {
     "Folders": "โฟลเดอร์",
diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
index 2c1e330f06..cbec290f5a 100644
--- a/resources/i18n/tr.json
+++ b/resources/i18n/tr.json
@@ -618,7 +618,9 @@
     "LastUsed": "Son kullanılan",
     "Queries": "Sorgular",
     "ReqPer15Min": "15 dakika başına talep",
-    "Sessions": "Oturumlar"
+    "Sessions": "Oturumlar",
+    "NoDataToExport": "CSV ekstresine ilişkin veriler mevcut değil.",
+    "ExportCSV": "CSV'yi dışa aktar"
   },
   "data": {
     "Folders": "klasörler",
diff --git a/resources/i18n/vi.json b/resources/i18n/vi.json
index 8f5740659e..a870ff3143 100644
--- a/resources/i18n/vi.json
+++ b/resources/i18n/vi.json
@@ -619,7 +619,9 @@
     "Queries": "Truy vấn",
     "ReqPer15Min": "Yêu cầu mỗi 15 phút",
     "Sessions": "Phiên",
-    "LastUsed": "Lần sử dụng cuối cùng"
+    "LastUsed": "Lần sử dụng cuối cùng",
+    "NoDataToExport": "Dữ liệu cho bản trích xuất CSV không tồn tại.",
+    "ExportCSV": "xuất CSV"
   },
   "data": {
     "Folders": "Thư mục",
diff --git a/resources/i18n/zh-CN.json b/resources/i18n/zh-CN.json
index ec36e32532..9cf62bf107 100644
--- a/resources/i18n/zh-CN.json
+++ b/resources/i18n/zh-CN.json
@@ -619,7 +619,9 @@
     "Queries": "查询",
     "ReqPer15Min": "每 15 分钟请求数",
     "Sessions": "会议",
-    "LastUsed": "最后使用"
+    "LastUsed": "最后使用",
+    "NoDataToExport": "CSV 提取的数据不存在。",
+    "ExportCSV": "导出 CSV"
   },
   "data": {
     "Folders": "文件夹",
diff --git a/resources/i18n/zh-TW.json b/resources/i18n/zh-TW.json
index 3b66172cda..3118ff824b 100644
--- a/resources/i18n/zh-TW.json
+++ b/resources/i18n/zh-TW.json
@@ -619,7 +619,9 @@
     "Queries": "查詢",
     "ReqPer15Min": "每 15 分鐘請求數",
     "Sessions": "會議",
-    "LastUsed": "最後使用"
+    "LastUsed": "最後使用",
+    "NoDataToExport": "CSV 擷取的資料不存在。",
+    "ExportCSV": "匯出 CSV"
   },
   "data": {
     "Folders": "文件夾",