diff --git a/src/App.tsx b/src/App.tsx
index 8d0bf2a..10b5bca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { ObjectDetailsPage } from "./pages/ObjectDetails";
 import { NotFoundPage } from "./pages/NotFound";
 import { TableDetailsPage } from "./pages/TableDetails";
 import { CrossmatchResultsPage } from "./pages/CrossmatchResults";
+import { RecordsPage } from "./pages/Records";
 import { RecordCrossmatchDetailsPage } from "./pages/RecordCrossmatchDetails";
 import { TablesPage } from "./pages/Tables";
 import { Layout } from "./components/ui/Layout";
@@ -37,6 +38,7 @@ function App() {
           <Route path="/table/:tableName" element={<TableDetailsPage />} />
           <Route path="/tables" element={<TablesPage />} />
           <Route path="/crossmatch" element={<CrossmatchResultsPage />} />
+          <Route path="/records" element={<RecordsPage />} />
           <Route
             path="/records/:recordId/crossmatch"
             element={
diff --git a/src/assets/texts.json b/src/assets/texts.json
index b296860..9beecf4 100644
--- a/src/assets/texts.json
+++ b/src/assets/texts.json
@@ -7,6 +7,7 @@
     "crossmatch.status.new": "New",
     "crossmatch.status.collided": "Collided",
     "crossmatch.status.existing": "Existing",
+    "crossmatch.triage.unprocessed": "Unprocessed",
     "crossmatch.triage.pending": "Pending",
     "crossmatch.triage.resolved": "Resolved"
   }
diff --git a/src/components/core/Hint.tsx b/src/components/core/Hint.tsx
index 879182e..fee2f15 100644
--- a/src/components/core/Hint.tsx
+++ b/src/components/core/Hint.tsx
@@ -2,24 +2,49 @@ import { Tooltip } from "flowbite-react";
 import { ReactElement, ReactNode } from "react";
 import { MdHelpOutline } from "react-icons/md";
 
+export type HintPosition = "top" | "left" | "right" | "bottom";
+
 interface HintProps {
   children: ReactElement;
   hintContent: ReactNode;
+  position?: HintPosition;
   className?: string;
+  trigger?: "icon" | "child";
 }
 
+const tooltipClassName = "bg-gray-600 z-10 border-1 max-w-xl";
+const tooltipTheme = { hidden: "invisible opacity-0 pointer-events-none" };
+
 export function Hint(props: HintProps): ReactElement {
+  const placement = props.position ?? "top";
+  const trigger = props.trigger ?? "icon";
+
+  if (trigger === "child") {
+    return (
+      <Tooltip
+        content={props.hintContent}
+        arrow={false}
+        placement={placement}
+        className={tooltipClassName}
+        theme={tooltipTheme}
+      >
+        {props.children}
+      </Tooltip>
+    );
+  }
+
   return (
     <div
-      className={`flex items-center justify-center gap-2 ${props.className}`}
+      className={`flex items-center justify-center gap-2 ${props.className ?? ""}`}
     >
       <div>{props.children}</div>
       <div>
         <Tooltip
           content={props.hintContent}
           arrow={false}
-          placement="top"
-          className="bg-gray-600 z-10 backdrop-blur-sm bg-opacity-99 border-1 max-w-xl"
+          placement={placement}
+          className={tooltipClassName}
+          theme={tooltipTheme}
         >
           <MdHelpOutline />
         </Tooltip>
diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
index 1c451dd..3326f61 100644
--- a/src/components/ui/Navbar.tsx
+++ b/src/components/ui/Navbar.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { NavLink } from "react-router-dom";
-import { Tooltip } from "flowbite-react";
 import { MdInfo, MdSearch, MdTableChart } from "react-icons/md";
+import { Hint } from "../core/Hint";
 import { Link } from "../core/Link";
 
 const navItems = [
@@ -34,12 +34,11 @@ export function Navbar() {
     <>
       <nav className="fixed left-0 top-0 h-screen w-12 flex flex-col items-center pt-4 pb-4 gap-2 bg-[#1a1a1a] z-20">
         {navItems.map((item) => (
-          <Tooltip
+          <Hint
             key={item.to}
-            content={item.label}
-            placement="right"
-            arrow={false}
-            className="bg-gray-600 z-10 backdrop-blur-sm bg-opacity-99 border-1"
+            hintContent={item.label}
+            position="right"
+            trigger="child"
           >
             <NavLink
               to={item.to}
@@ -54,7 +53,7 @@ export function Navbar() {
             >
               {item.icon}
             </NavLink>
-          </Tooltip>
+          </Hint>
         ))}
 
         <div className="mt-auto">
diff --git a/src/pages/Records.tsx b/src/pages/Records.tsx
new file mode 100644
index 0000000..7beea15
--- /dev/null
+++ b/src/pages/Records.tsx
@@ -0,0 +1,324 @@
+import { ReactElement, useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import {
+  CommonTable,
+  Column,
+  CellPrimitive,
+} from "../components/ui/CommonTable";
+import { DropdownFilter } from "../components/core/DropdownFilter";
+import { TextFilter } from "../components/core/TextFilter";
+import { getRecords } from "../clients/admin/sdk.gen";
+import type {
+  GetRecordsResponse,
+  Record as RecordType,
+  CrossmatchTriageStatus,
+} from "../clients/admin/types.gen";
+import { getResource } from "../resources/resources";
+import { Button } from "../components/core/Button";
+import { Loading } from "../components/core/Loading";
+import { ErrorPage } from "../components/ui/ErrorPage";
+import { Badge } from "../components/ui/Badge";
+import { Link } from "../components/core/Link";
+import { useDataFetching } from "../hooks/useDataFetching";
+import { Pagination } from "../components/ui/Pagination";
+import { adminClient } from "../clients/config";
+import type { ValidationError } from "../clients/admin/types.gen";
+
+interface RecordsFiltersProps {
+  tableName: string | null;
+  triageStatus: string | null;
+  pageSize: number;
+  onApplyFilters: (
+    tableName: string,
+    triageStatus: string,
+    pageSize: number,
+  ) => void;
+}
+
+function RecordsFilters({
+  tableName,
+  triageStatus,
+  pageSize,
+  onApplyFilters,
+}: RecordsFiltersProps): ReactElement {
+  const [localTriageStatus, setLocalTriageStatus] = useState<string>(
+    triageStatus ?? "all",
+  );
+  const [localPageSize, setLocalPageSize] = useState<number>(pageSize);
+  const [localTableName, setLocalTableName] = useState<string>(tableName || "");
+
+  useEffect(() => {
+    setLocalTriageStatus(triageStatus ?? "all");
+    setLocalPageSize(pageSize);
+    setLocalTableName(tableName || "");
+  }, [triageStatus, pageSize, tableName]);
+
+  function applyFilters(): void {
+    onApplyFilters(localTableName, localTriageStatus, localPageSize);
+  }
+
+  return (
+    <div className="flex gap-4 mb-4">
+      <TextFilter
+        title="Table name"
+        value={localTableName}
+        onChange={setLocalTableName}
+        placeholder="Enter table name"
+        onEnter={applyFilters}
+      />
+      <Link href={`/table/${localTableName.trim()}`} external />
+      <DropdownFilter
+        title="Manual check status"
+        options={[
+          { value: "all", label: "All" },
+          { value: "unprocessed", label: "Unprocessed" },
+          { value: "pending", label: "Pending" },
+          { value: "resolved", label: "Resolved" },
+        ]}
+        value={localTriageStatus}
+        onChange={setLocalTriageStatus}
+      />
+      <DropdownFilter
+        title="Page size"
+        options={[
+          { value: "10" },
+          { value: "25" },
+          { value: "50" },
+          { value: "100" },
+        ]}
+        value={localPageSize.toString()}
+        onChange={(value) => setLocalPageSize(parseInt(value))}
+      />
+      <div className="flex items-end">
+        <Button onClick={applyFilters}>Apply</Button>
+      </div>
+    </div>
+  );
+}
+
+interface RecordsTableProps {
+  data: GetRecordsResponse | null;
+  loading?: boolean;
+  showCandidates?: boolean;
+}
+
+function RecordsTable({
+  data,
+  loading,
+  showCandidates = false,
+}: RecordsTableProps): ReactElement {
+  function getRecordName(record: RecordType): ReactElement {
+    const displayName = record.catalogs?.designation?.name || record.id;
+    return <Link href={`/records/${record.id}/crossmatch`}>{displayName}</Link>;
+  }
+
+  function getTriageStatusLabel(status: CrossmatchTriageStatus): string {
+    return getResource(`crossmatch.triage.${status}`).Title;
+  }
+
+  function renderCandidates(record: RecordType): ReactElement {
+    const pgcNumbers = record.crossmatch.candidates.map((c) => c.pgc);
+    return (
+      <>
+        {pgcNumbers.map((pgc, index) => (
+          <Badge key={`${pgc}-${index}`} href={`/object/${pgc}`}>
+            {pgc}
+          </Badge>
+        ))}
+      </>
+    );
+  }
+
+  const nameHint = data?.schema?.catalogs?.designation?.description?.name;
+
+  const columns: Column[] = [
+    {
+      name: "Name",
+      hint: nameHint ? <p>{nameHint}</p> : undefined,
+      renderCell: (recordIndex: CellPrimitive) => {
+        if (typeof recordIndex === "number" && data?.records[recordIndex]) {
+          return getRecordName(data.records[recordIndex]);
+        }
+        return <span>—</span>;
+      },
+    },
+    {
+      name: "Manual check status",
+      renderCell: (recordIndex: CellPrimitive) => {
+        if (typeof recordIndex === "number" && data?.records[recordIndex]) {
+          return getTriageStatusLabel(
+            data.records[recordIndex].crossmatch.triage_status,
+          );
+        }
+        return <span>—</span>;
+      },
+    },
+    {
+      name: "Nature",
+      renderCell: (recordIndex: CellPrimitive) => {
+        if (typeof recordIndex === "number" && data?.records[recordIndex]) {
+          const typeName =
+            data.records[recordIndex].catalogs?.nature?.type_name;
+          return <span>{typeName ?? "—"}</span>;
+        }
+        return <span>—</span>;
+      },
+    },
+    ...(showCandidates
+      ? [
+          {
+            name: "Candidates",
+            renderCell: (recordIndex: CellPrimitive) => {
+              if (
+                typeof recordIndex === "number" &&
+                data?.records[recordIndex]
+              ) {
+                return renderCandidates(data.records[recordIndex]);
+              }
+              return <span>—</span>;
+            },
+          },
+        ]
+      : []),
+  ];
+
+  const tableData: Record<string, CellPrimitive>[] =
+    data?.records.map((_record: RecordType, index: number) => {
+      const row: Record<string, CellPrimitive> = {
+        Name: index,
+        "Manual check status": index,
+        Nature: index,
+      };
+      if (showCandidates) {
+        row["Candidates"] = index;
+      }
+      return row;
+    }) || [];
+
+  return <CommonTable columns={columns} data={tableData} loading={loading} />;
+}
+
+async function fetcher(
+  tableName: string | null,
+  triageStatus: CrossmatchTriageStatus | null,
+  page: number,
+  pageSize: number,
+): Promise<GetRecordsResponse> {
+  if (!tableName) {
+    throw new Error("Table name is required");
+  }
+
+  const response = await getRecords({
+    client: adminClient,
+    query: {
+      table_name: tableName,
+      triage_status: triageStatus,
+      page,
+      page_size: pageSize,
+    },
+  });
+
+  if (response.error) {
+    throw new Error(
+      response.error.detail
+        ?.map((err: ValidationError) => err.msg)
+        .join(", ") || "Failed to fetch records",
+    );
+  }
+
+  if (!response.data) {
+    throw new Error("No data received from server");
+  }
+
+  return response.data.data;
+}
+
+export function RecordsPage(): ReactElement {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const tableName = searchParams.get("table_name");
+  const triageStatusParam = searchParams.get("triage_status");
+  const apiTriageStatus: CrossmatchTriageStatus | null =
+    triageStatusParam === null || triageStatusParam === ""
+      ? null
+      : triageStatusParam === "all"
+        ? null
+        : (triageStatusParam as CrossmatchTriageStatus);
+  const page = parseInt(searchParams.get("page") || "0");
+  const pageSize = parseInt(searchParams.get("page_size") || "25");
+
+  useEffect(() => {
+    document.title = `Records${tableName ? ` - ${tableName}` : ""} | HyperLEDA`;
+  }, [tableName]);
+
+  const { data, loading, error } = useDataFetching(
+    () => fetcher(tableName, apiTriageStatus, page, pageSize),
+    [tableName, apiTriageStatus, page, pageSize],
+  );
+
+  function handlePageChange(newPage: number): void {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("page", newPage.toString());
+    setSearchParams(newSearchParams);
+  }
+
+  function handleApplyFilters(
+    newTableName: string,
+    newTriageStatus: string,
+    newPageSize: number,
+  ): void {
+    const newSearchParams = new URLSearchParams(searchParams);
+
+    if (newTableName.trim()) {
+      newSearchParams.set("table_name", newTableName.trim());
+    } else {
+      newSearchParams.delete("table_name");
+    }
+
+    if (newTriageStatus === "all") {
+      newSearchParams.delete("triage_status");
+    } else {
+      newSearchParams.set("triage_status", newTriageStatus);
+    }
+
+    newSearchParams.set("page_size", newPageSize.toString());
+    newSearchParams.set("page", "0");
+
+    setSearchParams(newSearchParams);
+  }
+
+  function Content(): ReactElement {
+    if (error && !data) return <ErrorPage title="Error" message={error} />;
+    if (!data?.records && loading) return <Loading />;
+    if (!data?.records) return <ErrorPage title="Error" message="No records" />;
+
+    return (
+      <>
+        <RecordsTable
+          data={data}
+          loading={loading}
+          showCandidates={triageStatusParam === "pending"}
+        />
+        <Pagination
+          page={page}
+          pageSize={pageSize}
+          records={data?.records}
+          handlePageChange={handlePageChange}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <h2 className="text-3xl font-bold mb-4">Records</h2>
+      <RecordsFilters
+        tableName={tableName}
+        triageStatus={triageStatusParam}
+        pageSize={pageSize}
+        onApplyFilters={handleApplyFilters}
+      />
+      <Content />
+    </>
+  );
+}
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 5eb2c47..4204e39 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -198,11 +198,25 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
 
   return (
     <CommonTable columns={columns} data={values} className="pb-5">
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center gap-4 flex-wrap">
         <h2 className="text-2xl font-bold">Crossmatch Statistics</h2>
-        <Button onClick={handleViewCrossmatchResults}>
-          View crossmatch results
-        </Button>
+        <div className="flex gap-2">
+          <Button
+            onClick={(e: React.MouseEvent) => {
+              const url = `/records?table_name=${encodeURIComponent(props.tableName)}`;
+              if (e.ctrlKey || e.metaKey) {
+                window.open(url, "_blank");
+              } else {
+                props.navigate(url);
+              }
+            }}
+          >
+            See data
+          </Button>
+          <Button onClick={handleViewCrossmatchResults}>
+            View crossmatch results
+          </Button>
+        </div>
       </div>
     </CommonTable>
   );