diff --git a/react/src/components/UserCredentialList.tsx b/react/src/components/UserCredentialList.tsx
new file mode 100644
index 0000000000..257ecc4f8c
--- /dev/null
+++ b/react/src/components/UserCredentialList.tsx
@@ -0,0 +1,61 @@
+import Flex from './Flex';
+import { ReloadOutlined } from '@ant-design/icons';
+import { Button, Radio, theme } from 'antd';
+import { useState, useTransition } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const UserCredentialList: React.FC = () => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+
+  const [activeType, setActiveType] = useState<'active' | 'inactive'>('active');
+  const [isActiveTypePending, startActiveTypeTransition] = useTransition();
+
+  return (
+    <Flex direction="column">
+      <Flex
+        justify="between"
+        style={{
+          width: '100%',
+          padding: token.paddingContentVertical,
+          paddingLeft: token.paddingContentHorizontalSM,
+          paddingRight: token.paddingContentHorizontalSM,
+        }}
+        align="start"
+      >
+        <Flex gap={token.marginXS} align="start">
+          <Radio.Group
+            value={activeType}
+            onChange={(value) => {
+              startActiveTypeTransition(() => {
+                setActiveType(value.target.value);
+              });
+              // setPaginationState({
+              //   current: 1,
+              //   pageSize: paginationState.pageSize,
+              // });
+            }}
+            optionType="button"
+            buttonStyle="solid"
+            options={[
+              {
+                label: t('credential.Active'),
+                value: 'active',
+              },
+              {
+                label: t('credential.Inactive'),
+                value: 'inactive',
+              },
+            ]}
+          />
+        </Flex>
+        <Flex gap={token.marginXS}>
+          <Button icon={<ReloadOutlined />} />
+          <Button type="primary">{t('credential.AddCredential')}</Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default UserCredentialList;
diff --git a/react/src/pages/UserCredentialsPage.tsx b/react/src/pages/UserCredentialsPage.tsx
index a5eda542f9..f7f73f96f4 100644
--- a/react/src/pages/UserCredentialsPage.tsx
+++ b/react/src/pages/UserCredentialsPage.tsx
@@ -1,5 +1,6 @@
 import BAICard from '../BAICard';
 import FlexActivityIndicator from '../components/FlexActivityIndicator';
+import UserCredentialList from '../components/UserCredentialList';
 import UserList from '../components/UserList';
 import { createStyles } from 'antd-style';
 import { CardTabListType } from 'antd/es/card';
@@ -48,9 +49,7 @@ const UserCredentialsPage: React.FC = () => {
         }
       >
         {curTabKey === 'users' && <UserList />}
-        {curTabKey === 'credentials' && (
-          <div>{t('credential.Credentials')}</div>
-        )}
+        {curTabKey === 'credentials' && <UserCredentialList />}
       </Suspense>
     </BAICard>
   );