diff --git a/react/src/App.tsx b/react/src/App.tsx
index 823d0b3775..b9005d32f7 100644
--- a/react/src/App.tsx
+++ b/react/src/App.tsx
@@ -57,8 +57,8 @@ const InteractiveLoginPage = React.lazy(
 );
 const ImportAndRunPage = React.lazy(() => import('./pages/ImportAndRunPage'));
 
-const ComputeSessionList = React.lazy(
-  () => import('./components/ComputeSessionList'),
+const ComputeSessionListPage = React.lazy(
+  () => import('./pages/ComputeSessionListPage'),
 );
 const AgentSummaryPage = React.lazy(() => import('./pages/AgentSummaryPage'));
 
@@ -139,7 +139,7 @@ const router = createBrowserRouter([
         handle: { labelKey: 'webui.menu.Sessions' },
         element: (
           <BAIErrorBoundary>
-            <ComputeSessionList />
+            <ComputeSessionListPage />
           </BAIErrorBoundary>
         ),
       },
diff --git a/react/src/components/SessionNodes.tsx b/react/src/components/SessionNodes.tsx
new file mode 100644
index 0000000000..4e87f0a098
--- /dev/null
+++ b/react/src/components/SessionNodes.tsx
@@ -0,0 +1,121 @@
+import { filterEmptyItem, filterNonNullItems } from '../helper';
+import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
+import { useCurrentProjectValue } from '../hooks/useCurrentProject';
+import BAIPropertyFilter, { mergeFilterValues } from './BAIPropertyFilter';
+import Flex from './Flex';
+import { SessionNodesQuery } from './__generated__/SessionNodesQuery.graphql';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Radio, Table } from 'antd';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React, { useState, useTransition } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyLoadQuery } from 'react-relay';
+
+const SessionNodes = () => {
+  const currentProject = useCurrentProjectValue();
+  const { t } = useTranslation();
+  const {
+    baiPaginationOption,
+    tablePaginationOption,
+    setTablePaginationOption,
+  } = useBAIPaginationOptionState({
+    current: 1,
+    pageSize: 10,
+  });
+  const [isPendingPageChange, startPageChangeTransition] = useTransition();
+  const [filterString, setFilterString] = useState<string>();
+  const [isPendingFilter, startFilterTransition] = useTransition();
+  const { compute_session_nodes } = useLazyLoadQuery<SessionNodesQuery>(
+    graphql`
+      query SessionNodesQuery(
+        $projectId: UUID!
+        $first: Int = 20
+        $offset: Int = 0
+        $filter: String
+      ) {
+        compute_session_nodes(
+          project_id: $projectId
+          first: $first
+          offset: $offset
+          filter: $filter
+        ) {
+          edges @required(action: THROW) {
+            node @required(action: THROW) {
+              id
+              name
+            }
+          }
+          count
+        }
+      }
+    `,
+    {
+      projectId: currentProject.id,
+      offset: baiPaginationOption.offset,
+      first: baiPaginationOption.first,
+      filter: mergeFilterValues([filterString]),
+    },
+    {
+      fetchPolicy: 'network-only',
+    },
+  );
+  const nodes = filterNonNullItems(
+    _.map(compute_session_nodes?.edges, (e) => e?.node),
+  );
+  return (
+    <Flex direction="column" align="stretch" gap={'sm'}>
+      <Flex gap={'sm'} align="start">
+        <Radio.Group optionType="button" buttonStyle="solid">
+          <Radio value={'status == "RUNNING"'}>Running</Radio>
+          <Radio value={'finished'}>Finished</Radio>
+        </Radio.Group>
+        <BAIPropertyFilter
+          filterProperties={[
+            {
+              key: 'name',
+              propertyLabel: t('session.SessionName'),
+              type: 'string',
+            },
+          ]}
+          value={filterString}
+          onChange={(value) => {
+            startFilterTransition(() => {
+              setFilterString(value);
+            });
+          }}
+        />
+      </Flex>
+      <Table
+        dataSource={nodes}
+        columns={[
+          {
+            title: t('session.SessionName'),
+            dataIndex: 'name',
+          },
+        ]}
+        pagination={{
+          pageSize: tablePaginationOption.pageSize,
+          current: tablePaginationOption.current,
+          total: compute_session_nodes?.count ?? 0,
+          showTotal: (total) => {
+            return total;
+          },
+        }}
+        loading={{
+          spinning: isPendingPageChange || isPendingFilter,
+          indicator: <LoadingOutlined />,
+        }}
+        onChange={({ current, pageSize }) => {
+          if (_.isNumber(current) && _.isNumber(pageSize)) {
+            startPageChangeTransition(() => {
+              setTablePaginationOption({ current, pageSize });
+            });
+          }
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default SessionNodes;
diff --git a/react/src/hooks/reactPaginationQueryOptions.tsx b/react/src/hooks/reactPaginationQueryOptions.tsx
index 0359904054..b61f7ba849 100644
--- a/react/src/hooks/reactPaginationQueryOptions.tsx
+++ b/react/src/hooks/reactPaginationQueryOptions.tsx
@@ -281,6 +281,7 @@ export const useBAIPaginationQueryOptions = ({
 interface BAIPaginationOption {
   limit: number;
   offset: number;
+  first?: number;
   // filter?: string;
   // order?: string;
 }
@@ -304,6 +305,7 @@ export const useBAIPaginationOptionState = (
   return {
     baiPaginationOption: {
       limit: options.pageSize,
+      first: options.pageSize,
       offset:
         options.current > 1 ? (options.current - 1) * options.pageSize : 0,
     },
diff --git a/react/src/components/ComputeSessionList.tsx b/react/src/pages/ComputeSessionListPage.tsx
similarity index 84%
rename from react/src/components/ComputeSessionList.tsx
rename to react/src/pages/ComputeSessionListPage.tsx
index e67c4273df..cf42362902 100644
--- a/react/src/components/ComputeSessionList.tsx
+++ b/react/src/pages/ComputeSessionListPage.tsx
@@ -1,6 +1,7 @@
-import BAIModal from './BAIModal';
-import ContainerLogModalWithLazyQueryLoader from './ComputeSessionNodeItems/ContainerLogModalWithLazyQueryLoader';
-import SessionDetailDrawer from './SessionDetailDrawer';
+import BAIModal from '../components/BAIModal';
+import ContainerLogModalWithLazyQueryLoader from '../components/ComputeSessionNodeItems/ContainerLogModalWithLazyQueryLoader';
+import SessionDetailDrawer from '../components/SessionDetailDrawer';
+import SessionNodes from '../components/SessionNodes';
 import { Skeleton } from 'antd';
 import { Suspense, useEffect, useState } from 'react';
 import { StringParam, useQueryParam } from 'use-query-params';
@@ -21,6 +22,7 @@ const ComputeSessionList = () => {
   }, []);
   return (
     <>
+      <SessionNodes />
       <SessionDetailDrawer
         open={!sessionId}
         sessionId={sessionId || undefined}