diff --git a/react/craco.config.js b/react/craco.config.js
index 3dc8863899..617179c2b5 100644
--- a/react/craco.config.js
+++ b/react/craco.config.js
@@ -24,15 +24,15 @@ module.exports = {
         '../resources/**/*',
       ],
     };
-    
+
     // Override deprecated middleware options with setupMiddlewares
     const originalOnBefore = devServerConfig.onBeforeSetupMiddleware;
     const originalOnAfter = devServerConfig.onAfterSetupMiddleware;
-    
+
     if (originalOnBefore || originalOnAfter) {
       delete devServerConfig.onBeforeSetupMiddleware;
       delete devServerConfig.onAfterSetupMiddleware;
-      
+
       devServerConfig.setupMiddlewares = (middlewares, devServer) => {
         if (originalOnBefore) {
           originalOnBefore(devServer);
@@ -43,7 +43,7 @@ module.exports = {
         return middlewares;
       };
     }
-    
+
     return devServerConfig;
   },
   babel: {
diff --git a/react/src/App.tsx b/react/src/App.tsx
index ef7ab4ec67..f386915091 100644
--- a/react/src/App.tsx
+++ b/react/src/App.tsx
@@ -471,9 +471,9 @@ const router = createBrowserRouter([
                 <BAIErrorBoundary>
                   <Suspense
                     fallback={
-                      <Flex direction="column" style={{ maxWidth: 700 }}>
+                      <BAIFlex direction="column" style={{ maxWidth: 700 }}>
                         <Skeleton active />
-                      </Flex>
+                      </BAIFlex>
                     }
                   >
                     <ReservoirPage />
diff --git a/react/src/components/ReservoirArtifactDetail.tsx b/react/src/components/ReservoirArtifactDetail.tsx
index 4dd1badd88..be4e9ed311 100644
--- a/react/src/components/ReservoirArtifactDetail.tsx
+++ b/react/src/components/ReservoirArtifactDetail.tsx
@@ -22,7 +22,7 @@ import {
   Divider,
   theme,
 } from 'antd';
-import { Flex } from 'backend.ai-ui';
+import { BAIFlex } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { ArrowLeft, Download, Info, CheckCircle } from 'lucide-react';
@@ -88,7 +88,7 @@ const ReservoirArtifactDetail: React.FC<ReservoirArtifactDetailProps> = ({
 
   return (
     <div>
-      <Flex align="center" style={{ marginBottom: token.marginLG }}>
+      <BAIFlex align="center" style={{ marginBottom: token.marginLG }}>
         <Button
           type="text"
           icon={<ArrowLeft size={18} />}
@@ -98,7 +98,7 @@ const ReservoirArtifactDetail: React.FC<ReservoirArtifactDetailProps> = ({
           type="vertical"
           style={{ marginLeft: 0, marginRight: token.marginMD }}
         />
-        <Flex align="center" gap="xs">
+        <BAIFlex align="center" gap="xs">
           <Title level={3} style={{ margin: 0 }}>
             {artifact.name}
           </Title>
@@ -112,8 +112,8 @@ const ReservoirArtifactDetail: React.FC<ReservoirArtifactDetailProps> = ({
           >
             {artifact.status.toUpperCase()}
           </Tag>
-        </Flex>
-      </Flex>
+        </BAIFlex>
+      </BAIFlex>
 
       {renderPullingProgress()}
 
@@ -214,7 +214,7 @@ const ReservoirArtifactDetail: React.FC<ReservoirArtifactDetailProps> = ({
                 key: 'version',
                 render: (version: string, record: any) => (
                   <div>
-                    <Flex align="center" gap="xs">
+                    <BAIFlex align="center" gap="xs">
                       <BAIText strong>{version}</BAIText>
                       {record.isLatest && <Tag color="blue">LATEST</Tag>}
                       {record.isInstalled && (
@@ -222,7 +222,7 @@ const ReservoirArtifactDetail: React.FC<ReservoirArtifactDetailProps> = ({
                           INSTALLED
                         </Tag>
                       )}
-                    </Flex>
+                    </BAIFlex>
                     {record.checksum && (
                       <Typography.Text
                         type="secondary"
diff --git a/react/src/components/ReservoirArtifactList.tsx b/react/src/components/ReservoirArtifactList.tsx
index c2b3d92eaf..433c7e9774 100644
--- a/react/src/components/ReservoirArtifactList.tsx
+++ b/react/src/components/ReservoirArtifactList.tsx
@@ -7,7 +7,6 @@ import {
 } from '../utils/reservoir';
 import BAIText from './BAIText';
 import {
-  Table,
   Button,
   Tag,
   Typography,
@@ -15,7 +14,7 @@ import {
   TableColumnsType,
   theme,
 } from 'antd';
-import { Flex } from 'backend.ai-ui';
+import { BAIFlex, BAITable } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { Download } from 'lucide-react';
@@ -66,9 +65,9 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
       dataIndex: 'name',
       key: 'name',
       render: (name: string, record: ReservoirArtifact) => (
-        <Flex align="center" gap="sm">
+        <BAIFlex align="center" gap="sm">
           <div>
-            <Flex gap={'xs'}>
+            <BAIFlex gap={'xs'}>
               <Link
                 to={'/reservoir/' + record.id}
                 style={{
@@ -90,7 +89,7 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
               >
                 {getTypeIcon(record.type, 14)} {record.type.toUpperCase()}
               </Tag>
-            </Flex>
+            </BAIFlex>
             {record.description && (
               <Typography.Text
                 type="secondary"
@@ -100,7 +99,7 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
               </Typography.Text>
             )}
           </div>
-        </Flex>
+        </BAIFlex>
       ),
       sorter: onChangeOrder ? true : false,
       // sortOrder:
@@ -143,7 +142,7 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
       key: 'status',
       render: (status: ReservoirArtifact['status'], record) => (
         // <Tag color={getStatusColor(status)} icon={getStatusIcon(status)}>
-        <Flex>
+        <BAIFlex>
           <Tag
             icon={getStatusIcon(status)}
             color={getStatusColor(status)}
@@ -169,7 +168,7 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
               />
             </Tooltip>
           )}
-        </Flex>
+        </BAIFlex>
       ),
       // width: '12%',
     },
@@ -215,28 +214,28 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
     },
   ];
 
-  const handleTableChange = (
-    paginationInfo: any,
-    filters: any,
-    sorter: any,
-  ) => {
-    if (onChangeOrder && sorter.field) {
-      const order =
-        sorter.order === 'ascend' ? sorter.field : `-${sorter.field}`;
-      onChangeOrder(order);
-    }
-  };
+  // const handleTableChange = (
+  //   paginationInfo: any,
+  //   filters: any,
+  //   sorter: any,
+  // ) => {
+  //   if (onChangeOrder && sorter.field) {
+  //     const order =
+  //       sorter.order === 'ascend' ? sorter.field : `-${sorter.field}`;
+  //     onChangeOrder(order);
+  //   }
+  // };
 
   return (
-    <Table
+    <BAITable
+      resizable
       columns={columns}
       dataSource={artifacts}
       rowKey="id"
       loading={loading}
       pagination={pagination}
       rowSelection={rowSelection}
-      onChange={handleTableChange}
-      size="middle"
+      size="small"
       scroll={{ x: 'max-content' }}
       onRow={(record) => ({
         onClick: (event) => {
diff --git a/react/src/components/ReservoirAuditLogList.tsx b/react/src/components/ReservoirAuditLogList.tsx
new file mode 100644
index 0000000000..8fd878cff2
--- /dev/null
+++ b/react/src/components/ReservoirAuditLogList.tsx
@@ -0,0 +1,189 @@
+import type { ReservoirAuditLog } from '../types/reservoir';
+import BAIPropertyFilter from './BAIPropertyFilter';
+import BAIText from './BAIText';
+import { Tag, Typography } from 'antd';
+import { BAIFlex, BAITable } from 'backend.ai-ui';
+import dayjs from 'dayjs';
+import { Activity, CheckCircle, XCircle } from 'lucide-react';
+import React from 'react';
+
+// import { useTranslation } from 'react-i18next';
+
+interface ReservoirAuditLogListProps {
+  auditLogs: ReservoirAuditLog[];
+  loading?: boolean;
+  filterValue?: string;
+  onFilterChange?: (value: string) => void;
+  pagination?: {
+    pageSize: number;
+    current: number;
+    total: number;
+    showTotal?: (total: number) => React.ReactNode;
+    onChange?: (current: number, pageSize: number) => void;
+  };
+  order?: string;
+  onChangeOrder?: (order: string) => void;
+}
+
+const ReservoirAuditLogList: React.FC<ReservoirAuditLogListProps> = ({
+  auditLogs,
+  loading = false,
+  filterValue,
+  onFilterChange,
+  pagination,
+  order,
+  onChangeOrder,
+}) => {
+  // const { t } = useTranslation();
+
+  return (
+    <BAIFlex direction="column" align="stretch" gap={'sm'}>
+      <BAIFlex
+        gap={'sm'}
+        align="start"
+        style={{
+          flexShrink: 1,
+        }}
+        wrap="wrap"
+      >
+        <BAIPropertyFilter
+          filterProperties={[
+            {
+              key: 'artifactName',
+              propertyLabel: 'Artifact',
+              type: 'string',
+            },
+            {
+              key: 'operation',
+              propertyLabel: 'Operation',
+              type: 'string',
+              strictSelection: true,
+              defaultOperator: '==',
+              options: [
+                { label: 'Pull', value: 'pull' },
+                { label: 'Install', value: 'install' },
+                { label: 'Uninstall', value: 'uninstall' },
+                { label: 'Update', value: 'update' },
+                { label: 'Verify', value: 'verify' },
+                { label: 'Delete', value: 'delete' },
+              ],
+            },
+            {
+              key: 'modifier',
+              propertyLabel: 'Modifier',
+              type: 'string',
+            },
+            {
+              key: 'status',
+              propertyLabel: 'Status',
+              type: 'string',
+              strictSelection: true,
+              defaultOperator: '==',
+              options: [
+                { label: 'Success', value: 'success' },
+                { label: 'Failed', value: 'failed' },
+                { label: 'In Progress', value: 'in_progress' },
+              ],
+            },
+          ]}
+          value={filterValue}
+          onChange={onFilterChange}
+        />
+      </BAIFlex>
+      <BAITable
+        size="small"
+        dataSource={auditLogs}
+        rowKey="id"
+        loading={loading}
+        columns={[
+          {
+            title: 'Artifact',
+            dataIndex: 'artifactName',
+            key: 'artifactName',
+            render: (artifactName: string) => (
+              <Typography.Text strong>{artifactName}</Typography.Text>
+            ),
+            sorter: true,
+          },
+          {
+            title: 'Version',
+            dataIndex: 'artifactVersion',
+            key: 'artifactVersion',
+            render: (version: string) =>
+              version ? <BAIText monospace>{version}</BAIText> : '-',
+          },
+          {
+            title: 'Operation',
+            dataIndex: 'operation',
+            key: 'operation',
+            render: (operation: string) => <Tag>{operation.toUpperCase()}</Tag>,
+            sorter: true,
+          },
+          {
+            title: 'Modifier',
+            dataIndex: 'modifier',
+            key: 'modifier',
+            render: (modifier: string) => (
+              <Typography.Text>{modifier}</Typography.Text>
+            ),
+            sorter: true,
+          },
+          {
+            title: 'Timestamp',
+            dataIndex: 'timestamp',
+            key: 'timestamp',
+            render: (timestamp: string) => (
+              <Typography.Text type="secondary">
+                {dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')}
+              </Typography.Text>
+            ),
+            sorter: true,
+          },
+        ]}
+        pagination={pagination}
+        scroll={{ x: 'max-content' }}
+        // order={order}
+        expandable={{
+          expandedRowRender: (record) => (
+            <BAIFlex direction="column" gap="xs" style={{ padding: '8px 0' }}>
+              <BAIFlex align="center" gap="xs">
+                <Typography.Text strong>Status:</Typography.Text>
+                <Tag
+                  color={
+                    record.status === 'success'
+                      ? 'green'
+                      : record.status === 'failed'
+                        ? 'red'
+                        : 'blue'
+                  }
+                  icon={
+                    record.status === 'success' ? (
+                      <CheckCircle size={12} />
+                    ) : record.status === 'failed' ? (
+                      <XCircle size={12} />
+                    ) : (
+                      <Activity size={12} />
+                    )
+                  }
+                >
+                  {record.status.toUpperCase()}
+                </Tag>
+              </BAIFlex>
+              {record.details && (
+                <BAIFlex align="start" gap="xs">
+                  <Typography.Text strong>Details:</Typography.Text>
+                  <Typography.Text type="secondary">
+                    {record.details}
+                  </Typography.Text>
+                </BAIFlex>
+              )}
+            </BAIFlex>
+          ),
+          expandRowByClick: true,
+        }}
+      />
+    </BAIFlex>
+  );
+};
+
+export default ReservoirAuditLogList;
diff --git a/react/src/pages/ReservoirPage.tsx b/react/src/pages/ReservoirPage.tsx
index d113017730..4f27543555 100644
--- a/react/src/pages/ReservoirPage.tsx
+++ b/react/src/pages/ReservoirPage.tsx
@@ -1,14 +1,13 @@
-import BAICard from '../components/BAICard';
 import BAIPropertyFilter from '../components/BAIPropertyFilter';
 import BAIRadioGroup from '../components/BAIRadioGroup';
-import BAITabs from '../components/BAITabs';
 import ReservoirArtifactDetail from '../components/ReservoirArtifactDetail';
 import ReservoirArtifactList from '../components/ReservoirArtifactList';
+import ReservoirAuditLogList from '../components/ReservoirAuditLogList';
 import { handleRowSelectionChange } from '../helper';
 import { useUpdatableState } from '../hooks';
 import { useBAIPaginationOptionStateOnSearchParam } from '../hooks/reactPaginationQueryOptions';
 import { useDeferredQueryParams } from '../hooks/useDeferredQueryParams';
-import type { ReservoirArtifact } from '../types/reservoir';
+import type { ReservoirArtifact, ReservoirAuditLog } from '../types/reservoir';
 import {
   Button,
   Badge,
@@ -19,8 +18,9 @@ import {
   Tooltip,
   Statistic,
   Card,
+  Skeleton,
 } from 'antd';
-import { Flex } from 'backend.ai-ui';
+import { BAICard, BAIFlex } from 'backend.ai-ui';
 import _ from 'lodash';
 import {
   Trash2,
@@ -30,10 +30,10 @@ import {
   Calendar,
   DatabaseIcon,
 } from 'lucide-react';
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { StringParam, withDefault } from 'use-query-params';
+import { StringParam, withDefault, useQueryParam } from 'use-query-params';
 
 type TabKey = 'artifacts' | 'audit';
 
@@ -57,24 +57,119 @@ const ReservoirPage: React.FC = () => {
   const [queryParams, setQuery] = useDeferredQueryParams({
     order: withDefault(StringParam, '-updated_at'),
     filter: withDefault(StringParam, undefined),
-    tab: withDefault(StringParam, 'artifacts'),
     statusCategory: withDefault(StringParam, 'all'),
+    auditFilter: withDefault(StringParam, undefined),
+    auditOrder: withDefault(StringParam, '-timestamp'),
   });
 
+  const [curTabKey, setCurTabKey] = useQueryParam(
+    'tab',
+    withDefault(StringParam, 'artifacts'),
+    {
+      updateType: 'replace',
+    },
+  );
+
   const queryMapRef = useRef({
-    [queryParams.tab]: {
+    [curTabKey]: {
       queryParams,
       tablePaginationOption,
     },
   });
 
-  queryMapRef.current[queryParams.tab] = {
+  queryMapRef.current[curTabKey] = {
     queryParams,
     tablePaginationOption,
   };
 
   const [, updateFetchKey] = useUpdatableState('initial-fetch');
 
+  // Mock audit log data
+  const mockAuditLogs: ReservoirAuditLog[] = useMemo(
+    () => [
+      {
+        id: '1',
+        artifactName: 'transformers',
+        artifactVersion: '4.30.0',
+        operation: 'pull',
+        modifier: 'john.doe@company.com',
+        timestamp: '2025-07-08T14:30:00Z',
+        status: 'success',
+        details: 'Successfully pulled transformers version 4.30.0',
+      },
+      {
+        id: '2',
+        artifactName: 'llama-2-7b-chat',
+        artifactVersion: '1.1.0',
+        operation: 'install',
+        modifier: 'jane.smith@company.com',
+        timestamp: '2025-07-08T10:15:00Z',
+        status: 'success',
+        details: 'Successfully installed llama-2-7b-chat version 1.1.0',
+      },
+      {
+        id: '3',
+        artifactName: 'pytorch-training',
+        artifactVersion: '2.0.0',
+        operation: 'pull',
+        modifier: 'system',
+        timestamp: '2025-07-08T09:00:00Z',
+        status: 'in_progress',
+        details: 'Pulling pytorch-training version 2.0.0 in progress',
+      },
+      {
+        id: '4',
+        artifactName: 'numpy',
+        artifactVersion: '1.25.0',
+        operation: 'uninstall',
+        modifier: 'admin@company.com',
+        timestamp: '2025-07-07T16:45:00Z',
+        status: 'success',
+        details: 'Successfully uninstalled numpy version 1.25.0',
+      },
+      {
+        id: '5',
+        artifactName: 'scikit-learn',
+        artifactVersion: '1.4.0',
+        operation: 'update',
+        modifier: 'bob.wilson@company.com',
+        timestamp: '2025-07-07T14:20:00Z',
+        status: 'failed',
+        details: 'Failed to update scikit-learn: dependency conflict',
+      },
+      {
+        id: '6',
+        artifactName: 'tensorflow-serving',
+        operation: 'verify',
+        modifier: 'system',
+        timestamp: '2025-07-07T08:30:00Z',
+        status: 'success',
+        details: 'All versions verified successfully',
+      },
+      {
+        id: '7',
+        artifactName: 'bert-base-uncased',
+        artifactVersion: '1.0.0',
+        operation: 'pull',
+        modifier: 'alice.johnson@company.com',
+        timestamp: '2025-07-06T18:00:00Z',
+        status: 'success',
+        details: 'Successfully pulled bert-base-uncased version 1.0.0',
+      },
+      {
+        id: '8',
+        artifactName: 'ubuntu-ml',
+        artifactVersion: '20.04',
+        operation: 'delete',
+        modifier: 'admin@company.com',
+        timestamp: '2025-07-06T12:15:00Z',
+        status: 'success',
+        details: 'Successfully deleted ubuntu-ml version 20.04',
+      },
+    ],
+    [],
+  );
+
   // Mock data - in real implementation, this would come from API
   const mockArtifacts: ReservoirArtifact[] = useMemo(
     () => [
@@ -311,13 +406,26 @@ const ReservoirPage: React.FC = () => {
     [],
   );
 
-  // Filter artifacts based on status category
+  // Helper function to parse property filter
+  const parsePropertyFilter = (filterString?: string) => {
+    if (!filterString) return null;
+
+    // Simple parser for "property == value" format
+    const match = filterString.match(/(\w+)\s*(==|!=|contains)\s*(.+)/);
+    if (match) {
+      const [, property, operator, value] = match;
+      return { property, operator, value: value.trim() };
+    }
+    return null;
+  };
+
+  // Filter artifacts based on status category and property filters
   const filteredArtifacts = useMemo(() => {
-    if (queryParams.tab !== 'artifacts') {
+    if (curTabKey !== 'artifacts') {
       return []; // Return empty array for non-artifacts tabs
     }
 
-    return mockArtifacts.filter((artifact) => {
+    let filtered = mockArtifacts.filter((artifact) => {
       switch (queryParams.statusCategory) {
         case 'all':
           return true; // Show all artifacts
@@ -329,7 +437,65 @@ const ReservoirPage: React.FC = () => {
           return true;
       }
     });
-  }, [mockArtifacts, queryParams.tab, queryParams.statusCategory]);
+
+    // Apply property filter if exists
+    const propertyFilter = parsePropertyFilter(queryParams.filter);
+    if (propertyFilter) {
+      filtered = filtered.filter((artifact) => {
+        const { property, operator, value } = propertyFilter;
+
+        switch (property) {
+          case 'name':
+            if (operator === 'contains') {
+              return artifact.name.toLowerCase().includes(value.toLowerCase());
+            } else if (operator === '==') {
+              return artifact.name.toLowerCase() === value.toLowerCase();
+            }
+            break;
+          case 'type':
+            if (operator === '==') {
+              return artifact.type === value;
+            }
+            break;
+          case 'source':
+            if (operator === 'contains') {
+              return (
+                artifact.source?.toLowerCase().includes(value.toLowerCase()) ||
+                false
+              );
+            } else if (operator === '==') {
+              return artifact.source?.toLowerCase() === value.toLowerCase();
+            }
+            break;
+          case 'status':
+            if (operator === '==') {
+              return artifact.status === value;
+            }
+            break;
+          default:
+            return true;
+        }
+        return true;
+      });
+    }
+
+    return filtered;
+  }, [
+    mockArtifacts,
+    curTabKey,
+    queryParams.statusCategory,
+    queryParams.filter,
+  ]);
+
+  // Filter audit logs based on filter
+  const filteredAuditLogs = useMemo(() => {
+    if (curTabKey !== 'audit') {
+      return [];
+    }
+    // Add filter logic here if needed
+    return mockAuditLogs;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mockAuditLogs, curTabKey, queryParams.auditFilter]);
 
   // Count for badges and statistics
   const artifactCounts = useMemo(() => {
@@ -394,19 +560,68 @@ const ReservoirPage: React.FC = () => {
     return ['verified', 'pulling', 'verifying'].includes(status);
   };
 
+  const handleStatisticCardClick = (statusCategory: string) => {
+    // Switch to artifacts tab if not already there
+    if (curTabKey !== 'artifacts') {
+      setCurTabKey('artifacts');
+    }
+
+    // Check if the card is already active (toggle off functionality)
+    const isCurrentlyActive =
+      statusCategory === 'pulling'
+        ? queryParams.statusCategory === 'all' &&
+          queryParams.filter === 'status == pulling'
+        : queryParams.statusCategory === statusCategory;
+
+    if (isCurrentlyActive) {
+      // Toggle off: return to 'all' with no filters
+      setQuery(
+        {
+          statusCategory: 'all',
+          filter: undefined,
+        },
+        'replaceIn',
+      );
+    } else {
+      // Toggle on: apply the filter
+      if (statusCategory === 'pulling') {
+        // For pulling, set RadioGroup to 'all' and add status filter
+        setQuery(
+          {
+            statusCategory: 'all',
+            filter: 'status == pulling',
+          },
+          'replaceIn',
+        );
+      } else {
+        // For other categories, use normal statusCategory filter and clear property filter
+        setQuery(
+          {
+            statusCategory,
+            filter: undefined,
+          },
+          'replaceIn',
+        );
+      }
+    }
+
+    setTablePaginationOption({ current: 1 });
+    setSelectedArtifactList([]);
+  };
+
   if (selectedArtifact) {
     return (
-      <Flex direction="column" align="stretch" gap={'md'}>
+      <BAIFlex direction="column" align="stretch" gap={'md'}>
         <ReservoirArtifactDetail
           artifact={selectedArtifact}
           onPull={handlePullArtifact}
         />
-      </Flex>
+      </BAIFlex>
     );
   }
 
   return (
-    <Flex direction="column" align="stretch" gap={'md'}>
+    <BAIFlex direction="column" align="stretch" gap={'md'}>
       <Row gutter={[16, 16]}>
         {/* <Col xs={12} sm={8} lg={6} xl={4}>
           <Card size="small" variant="borderless">
@@ -418,34 +633,112 @@ const ReservoirPage: React.FC = () => {
           </Card>
         </Col> */}
         <Col xs={12} sm={8} lg={6} xl={4}>
-          <Card size="small" variant="borderless">
+          <Card
+            size="small"
+            variant="borderless"
+            hoverable
+            onClick={() => handleStatisticCardClick('installed')}
+            style={{
+              cursor: 'pointer',
+              border:
+                queryParams.statusCategory === 'installed'
+                  ? `1px solid ${token.colorPrimary}`
+                  : `1px solid ${token.colorBorder}`,
+              backgroundColor:
+                queryParams.statusCategory === 'installed'
+                  ? token.colorPrimaryBg
+                  : undefined,
+              transition: 'all 0.2s ease',
+            }}
+          >
             <Statistic
               title="Installed"
               value={artifactCounts.installed}
               prefix={<CheckCircle size={16} />}
+              valueStyle={{
+                color:
+                  queryParams.statusCategory === 'installed'
+                    ? token.colorPrimary
+                    : undefined,
+              }}
             />
           </Card>
         </Col>
         <Col xs={12} sm={8} lg={6} xl={4}>
-          <Card size="small" variant="borderless">
+          <Card
+            size="small"
+            variant="borderless"
+            hoverable
+            onClick={() => handleStatisticCardClick('available')}
+            style={{
+              cursor: 'pointer',
+              border:
+                queryParams.statusCategory === 'available'
+                  ? `1px solid ${token.colorPrimary}`
+                  : `1px solid ${token.colorBorder}`,
+              backgroundColor:
+                queryParams.statusCategory === 'available'
+                  ? token.colorPrimaryBg
+                  : undefined,
+              transition: 'all 0.2s ease',
+            }}
+          >
             <Statistic
               title="Available"
               value={artifactCounts.available}
               prefix={<DatabaseIcon />}
+              valueStyle={{
+                color:
+                  queryParams.statusCategory === 'available'
+                    ? token.colorPrimary
+                    : undefined,
+              }}
             />
           </Card>
         </Col>
         <Col xs={12} sm={8} lg={6} xl={4}>
-          <Card size="small" variant="borderless">
+          <Card
+            size="small"
+            variant="borderless"
+            hoverable
+            onClick={() => handleStatisticCardClick('pulling')}
+            style={{
+              cursor: 'pointer',
+              border:
+                queryParams.statusCategory === 'all' &&
+                queryParams.filter === 'status == pulling'
+                  ? `1px solid ${token.colorPrimary}`
+                  : `1px solid ${token.colorBorder}`,
+              backgroundColor:
+                queryParams.statusCategory === 'all' &&
+                queryParams.filter === 'status == pulling'
+                  ? token.colorPrimaryBg
+                  : undefined,
+              transition: 'all 0.2s ease',
+            }}
+          >
             <Statistic
               title="Currently Pulling"
               value={artifactCounts.pulling}
               prefix={<Activity />}
+              valueStyle={{
+                color:
+                  queryParams.statusCategory === 'all' &&
+                  queryParams.filter === 'status == pulling'
+                    ? token.colorPrimary
+                    : undefined,
+              }}
             />
           </Card>
         </Col>
         <Col xs={12} sm={8} lg={6} xl={4}>
-          <Card size="small" variant="borderless">
+          <Card
+            size="small"
+            variant="borderless"
+            style={{
+              backgroundColor: token.colorFillTertiary,
+            }}
+          >
             <Statistic
               title="Storage Used"
               value={artifactCounts.totalSizeGB}
@@ -457,7 +750,13 @@ const ReservoirPage: React.FC = () => {
           </Card>
         </Col>
         <Col xs={12} sm={8} lg={6} xl={4}>
-          <Card size="small" variant="borderless">
+          <Card
+            size="small"
+            variant="borderless"
+            style={{
+              backgroundColor: token.colorFillTertiary,
+            }}
+          >
             <Statistic
               title="Recent Updates"
               value={artifactCounts.recentlyUpdated}
@@ -473,95 +772,61 @@ const ReservoirPage: React.FC = () => {
       </Row>
 
       <BAICard
-        variant="borderless"
-        title="Reservoir"
-        // extra={
-        //   <Flex gap={'xs'}>
-        //     <BAIFetchKeyButton
-        //       loading={false}
-        //       autoUpdateDelay={30_000}
-        //       value={fetchKey}
-        //       onChange={(newFetchKey) => {
-        //         updateFetchKey(newFetchKey);
-        //       }}
-        //     />
-        //     <Button
-        //       type="primary"
-        //       icon={<RefreshCw size={16} />}
-        //       onClick={() => {
-        //         console.log('Syncing with remote catalog...');
-        //         updateFetchKey();
-        //       }}
-        //     >
-        //       Sync Catalog
-        //     </Button>
-        //   </Flex>
-        // }
-        styles={{
-          header: {
-            borderBottom: 'none',
+        activeTabKey={curTabKey}
+        onTabChange={(key) => {
+          const storedQuery = queryMapRef.current[key] || {
+            queryParams: {
+              statusCategory: 'all',
+            },
+          };
+          setQuery({ ...storedQuery.queryParams }, 'replace');
+          setTablePaginationOption(
+            storedQuery.tablePaginationOption || { current: 1 },
+          );
+          setSelectedArtifactList([]);
+          setCurTabKey(key as TabKey);
+        }}
+        tabList={[
+          {
+            key: 'artifacts',
+            tab: (
+              <BAIFlex justify="center" gap={10}>
+                Reservoir Artifacts
+                {(artifactCounts.all || 0) > 0 && (
+                  <Badge
+                    count={artifactCounts.all}
+                    color={
+                      curTabKey === 'artifacts'
+                        ? token.colorPrimary
+                        : token.colorTextDisabled
+                    }
+                    size="small"
+                    showZero
+                    style={{
+                      paddingRight: token.paddingXS,
+                      paddingLeft: token.paddingXS,
+                      fontSize: 10,
+                    }}
+                  />
+                )}
+              </BAIFlex>
+            ),
+          },
+          {
+            key: 'audit',
+            tab: 'Audit Logs',
           },
+        ]}
+        styles={{
           body: {
-            paddingTop: 0,
+            padding: `${token.paddingSM}px ${token.paddingLG}px ${token.paddingLG}px ${token.paddingLG}px`,
           },
         }}
       >
-        <BAITabs
-          activeKey={queryParams.tab}
-          onChange={(key) => {
-            const storedQuery = queryMapRef.current[key] || {
-              queryParams: {
-                statusCategory: 'all',
-              },
-            };
-            setQuery(
-              { ...storedQuery.queryParams, tab: key as TabKey },
-              'replace',
-            );
-            setTablePaginationOption(
-              storedQuery.tablePaginationOption || { current: 1 },
-            );
-            setSelectedArtifactList([]);
-          }}
-          items={_.map(
-            {
-              artifacts: 'Artifacts',
-              audit: 'Audit Logs',
-            },
-            (label, key) => ({
-              key,
-              label: (
-                <Flex justify="center" gap={10}>
-                  {label}
-                  {
-                    // Only show badge for artifacts tab
-                    key === 'artifacts' && (artifactCounts.all || 0) > 0 && (
-                      <Badge
-                        count={artifactCounts.all}
-                        color={
-                          queryParams.tab === key
-                            ? token.colorPrimary
-                            : token.colorTextDisabled
-                        }
-                        size="small"
-                        showZero
-                        style={{
-                          paddingRight: token.paddingXS,
-                          paddingLeft: token.paddingXS,
-                          fontSize: 10,
-                        }}
-                      />
-                    )
-                  }
-                </Flex>
-              ),
-            }),
-          )}
-        />
-        {queryParams.tab === 'artifacts' ? (
-          <Flex direction="column" align="stretch" gap={'sm'}>
-            <Flex justify="between" wrap="wrap" gap={'sm'}>
-              <Flex
+        {curTabKey === 'artifacts' ? (
+          <BAIFlex direction="column" align="stretch" gap={'sm'}>
+            <BAIFlex justify="between" wrap="wrap" gap={'sm'}>
+              <BAIFlex
                 gap={'sm'}
                 align="start"
                 style={{
@@ -616,6 +881,20 @@ const ReservoirPage: React.FC = () => {
                       propertyLabel: 'Source',
                       type: 'string',
                     },
+                    {
+                      key: 'status',
+                      propertyLabel: 'Status',
+                      type: 'string',
+                      strictSelection: true,
+                      defaultOperator: '==',
+                      options: [
+                        { label: 'Verified', value: 'verified' },
+                        { label: 'Pulling', value: 'pulling' },
+                        { label: 'Verifying', value: 'verifying' },
+                        { label: 'Available', value: 'available' },
+                        { label: 'Error', value: 'error' },
+                      ],
+                    },
                   ]}
                   value={queryParams.filter}
                   onChange={(value) => {
@@ -624,8 +903,8 @@ const ReservoirPage: React.FC = () => {
                     setSelectedArtifactList([]);
                   }}
                 />
-              </Flex>
-              <Flex gap={'sm'}>
+              </BAIFlex>
+              <BAIFlex gap={'sm'}>
                 {selectedArtifactList.length > 0 && (
                   <>
                     {t('general.NSelected', {
@@ -642,8 +921,8 @@ const ReservoirPage: React.FC = () => {
                     </Tooltip>
                   </>
                 )}
-              </Flex>
-            </Flex>
+              </BAIFlex>
+            </BAIFlex>
             <ReservoirArtifactList
               artifacts={filteredArtifacts}
               onPull={handlePullArtifact}
@@ -686,24 +965,41 @@ const ReservoirPage: React.FC = () => {
                 setQuery({ order }, 'replaceIn');
               }}
             />
-          </Flex>
-        ) : (
-          <Flex
-            direction="column"
-            align="center"
-            justify="center"
-            style={{ minHeight: 400 }}
-          >
-            <Typography.Title level={4} type="secondary">
-              Audit Logs
-            </Typography.Title>
-            <Typography.Text type="secondary">
-              Audit logs functionality will be implemented here.
-            </Typography.Text>
-          </Flex>
-        )}
+          </BAIFlex>
+        ) : null}
+        {curTabKey === 'audit' ? (
+          <Suspense fallback={<Skeleton active />}>
+            <ReservoirAuditLogList
+              auditLogs={filteredAuditLogs}
+              loading={false}
+              filterValue={queryParams.auditFilter}
+              onFilterChange={(value) => {
+                setQuery({ auditFilter: value }, 'replaceIn');
+              }}
+              pagination={{
+                pageSize: tablePaginationOption.pageSize,
+                current: tablePaginationOption.current,
+                total: filteredAuditLogs.length,
+                showTotal: (total) => (
+                  <Typography.Text type="secondary">
+                    {t('general.TotalItems', { total: total })}
+                  </Typography.Text>
+                ),
+                onChange: (current, pageSize) => {
+                  if (_.isNumber(current) && _.isNumber(pageSize)) {
+                    setTablePaginationOption({ current, pageSize });
+                  }
+                },
+              }}
+              order={queryParams.auditOrder}
+              onChangeOrder={(order) => {
+                setQuery({ auditOrder: order }, 'replaceIn');
+              }}
+            />
+          </Suspense>
+        ) : null}
       </BAICard>
-    </Flex>
+    </BAIFlex>
   );
 };
 
diff --git a/react/src/types/reservoir.ts b/react/src/types/reservoir.ts
index 2f69ceb1a3..9993bf0388 100644
--- a/react/src/types/reservoir.ts
+++ b/react/src/types/reservoir.ts
@@ -25,3 +25,14 @@ export interface ReservoirArtifact {
     [version: string]: string;
   };
 }
+
+export interface ReservoirAuditLog {
+  id: string;
+  artifactName: string;
+  artifactVersion?: string;
+  operation: 'pull' | 'install' | 'uninstall' | 'update' | 'verify' | 'delete';
+  modifier: string;
+  timestamp: string;
+  status: 'success' | 'failed' | 'in_progress';
+  details?: string;
+}