diff --git a/src/App.tsx b/src/App.tsx
index 3a84019..dbc6901 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { SearchResultsPage } from "./pages/SearchResults";
 import { ObjectDetailsPage } from "./pages/ObjectDetails";
 import { NotFoundPage } from "./pages/NotFound";
 import { TableDetailsPage } from "./pages/TableDetails";
+import { CrossmatchResultsPage } from "./pages/CrossmatchResults";
 
 function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -51,6 +52,14 @@ function App() {
             </Layout>
           }
         />
+        <Route
+          path="/crossmatch"
+          element={
+            <Layout>
+              <CrossmatchResultsPage />
+            </Layout>
+          }
+        />
         <Route
           path="*"
           element={
diff --git a/src/assets/texts.json b/src/assets/texts.json
index e843a99..2a48371 100644
--- a/src/assets/texts.json
+++ b/src/assets/texts.json
@@ -2,6 +2,10 @@
   "title": {
     "catalog.designation": "Designation",
     "catalog.icrs": "Celestial coordinates",
-    "catalog.redshift": "Redshift"
+    "catalog.redshift": "Redshift",
+    "crossmatch.status.unprocessed": "Unprocessed",
+    "crossmatch.status.new": "New",
+    "crossmatch.status.collided": "Collided",
+    "crossmatch.status.existing": "Existing"
   }
 }
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..22612d6
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,26 @@
+import { ReactElement } from "react";
+import { Link } from "./link";
+
+interface BadgeProps {
+  children: React.ReactNode;
+  className?: string;
+  href?: string;
+}
+
+export function Badge({
+  children,
+  className = "",
+  href,
+}: BadgeProps): ReactElement {
+  const badgeClasses = `inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm mr-0.5 mb-0.5 ${className}`;
+
+  if (href) {
+    return (
+      <Link href={href}>
+        <span className={badgeClasses}>{children}</span>
+      </Link>
+    );
+  }
+
+  return <div className={badgeClasses}>{children}</div>;
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 317445d..9151382 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,7 +3,7 @@ import classNames from "classnames";
 
 interface ButtonProps {
   children: React.ReactNode;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent) => void;
   className?: string;
   type?: "button" | "submit" | "reset";
   disabled?: boolean;
@@ -13,10 +13,14 @@ export function Button(props: ButtonProps): ReactElement {
   return (
     <button
       type={props.type}
-      onClick={props.onClick}
+      onClick={(event) => props.onClick?.(event)}
       disabled={props.disabled}
       className={classNames(
-        "px-2 py-2 box-border flex items-center font-semibold border-1 border-[#1a1a1a] rounded-lg bg-[#1a1a1a] hover:border-[#646cff] transition-colors duration-300 active:border-white",
+        "px-2 py-2 box-border flex items-center font-semibold border-1 border-[#1a1a1a] rounded-lg bg-[#1a1a1a] hover:border-[#646cff] transition-colors duration-300 active:border-white cursor-pointer",
+        {
+          "opacity-50 cursor-not-allowed hover:border-[#1a1a1a] active:border-[#1a1a1a]":
+            props.disabled,
+        },
         props.className,
       )}
     >
diff --git a/src/components/ui/dropdown-filter.tsx b/src/components/ui/dropdown-filter.tsx
new file mode 100644
index 0000000..52e48ee
--- /dev/null
+++ b/src/components/ui/dropdown-filter.tsx
@@ -0,0 +1,40 @@
+import { ReactElement } from "react";
+
+interface DropdownFilterOption {
+  value: string;
+  label?: string;
+}
+
+interface DropdownFilterProps {
+  title: string;
+  options: DropdownFilterOption[];
+  defaultValue: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function DropdownFilter({
+  title,
+  options,
+  value,
+  onChange,
+}: DropdownFilterProps): ReactElement {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-300 mb-1">
+        {title}
+      </label>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white h-10 w-full"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label || option.value}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/src/components/ui/error-page.tsx b/src/components/ui/error-page.tsx
new file mode 100644
index 0000000..bf57a8a
--- /dev/null
+++ b/src/components/ui/error-page.tsx
@@ -0,0 +1,60 @@
+import { ReactElement, ReactNode } from "react";
+import { Button } from "./button";
+
+interface ErrorPageProps {
+  title: string;
+  message: string;
+  children?: ReactNode;
+  className?: string;
+  showLargeText?: boolean;
+}
+
+export function ErrorPage({
+  title,
+  message,
+  children,
+  className = "",
+  showLargeText = false,
+}: ErrorPageProps): ReactElement {
+  return (
+    <div
+      className={`min-h-screen flex items-center justify-center ${className}`}
+    >
+      <div className="max-w-md w-full text-center">
+        <div className="mb-8">
+          {showLargeText && <h1 className="text-9xl font-bold">404</h1>}
+          <h2 className="text-2xl font-semibold mb-4">{title}</h2>
+          <p className="text-gray-400 mb-8">{message}</p>
+        </div>
+
+        {children && (
+          <div className="flex justify-center gap-4">{children}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ErrorPageBackButton({
+  onClick,
+}: {
+  onClick: () => void;
+}): ReactElement {
+  return (
+    <Button onClick={onClick} className="px-6 py-3 text-base">
+      Back
+    </Button>
+  );
+}
+
+export function ErrorPageHomeButton({
+  onClick,
+}: {
+  onClick: () => void;
+}): ReactElement {
+  return (
+    <Button onClick={onClick} className="px-6 py-3 text-base">
+      Home
+    </Button>
+  );
+}
diff --git a/src/components/ui/link-button.tsx b/src/components/ui/link-button.tsx
new file mode 100644
index 0000000..e09d040
--- /dev/null
+++ b/src/components/ui/link-button.tsx
@@ -0,0 +1,19 @@
+import { ReactElement, ReactNode } from "react";
+import { MdOpenInNew } from "react-icons/md";
+import { Link } from "./link";
+
+interface LinkButtonProps {
+  children?: ReactNode;
+  to: string;
+}
+
+export function LinkButton(props: LinkButtonProps): ReactElement {
+  return (
+    <div className="font-mono relative flex items-center justify-between gap-2">
+      <div className="flex items-center">{props.children}</div>
+      <Link href={props.to} className="flex items-center">
+        <MdOpenInNew />
+      </Link>
+    </div>
+  );
+}
diff --git a/src/components/ui/link.tsx b/src/components/ui/link.tsx
index 7983a71..7999d88 100644
--- a/src/components/ui/link.tsx
+++ b/src/components/ui/link.tsx
@@ -3,16 +3,21 @@ import { ReactElement } from "react";
 interface LinkProps {
   children?: ReactElement | string;
   href: string;
+  className?: string;
 }
 
 export function Link(props: LinkProps): ReactElement {
   const content = props.children ?? props.href;
+  const baseClass = "text-green-500 hover:text-green-600 transition-colors";
+  const className = props.className
+    ? `${baseClass} ${props.className}`
+    : baseClass;
   return (
     <a
       target="_blank"
       rel="noopener noreferrer"
       href={props.href}
-      className="text-green-500 hover:text-green-600 transition-colors"
+      className={className}
     >
       {content}
     </a>
diff --git a/src/components/ui/loading.tsx b/src/components/ui/loading.tsx
new file mode 100644
index 0000000..ce802e7
--- /dev/null
+++ b/src/components/ui/loading.tsx
@@ -0,0 +1,28 @@
+import { ReactElement } from "react";
+
+interface LoadingProps {
+  message?: string;
+  className?: string;
+}
+
+export function Loading({
+  message = "Loading...",
+  className = "",
+}: LoadingProps): ReactElement {
+  return (
+    <div className={`p-8 ${className}`}>
+      <div className="flex flex-col justify-center items-center h-64 space-y-4">
+        <div className="relative">
+          <div className="w-8 h-8 border-4 border-gray-600 border-t-blue-500 rounded-full animate-spin"></div>
+          <div
+            className="absolute top-0 left-0 w-8 h-8 border-4 border-transparent border-t-blue-300 rounded-full animate-spin"
+            style={{ animationDirection: "reverse", animationDuration: "1.5s" }}
+          ></div>
+        </div>
+        <p className="text-gray-300 text-lg font-medium animate-pulse">
+          {message}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/text-filter.tsx b/src/components/ui/text-filter.tsx
new file mode 100644
index 0000000..c5e7adb
--- /dev/null
+++ b/src/components/ui/text-filter.tsx
@@ -0,0 +1,39 @@
+import { ReactElement } from "react";
+
+interface TextFieldProps {
+  title: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  type?: "text" | "email" | "password" | "number";
+  onEnter?: () => void;
+}
+
+export function TextFilter({
+  title,
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+  onEnter,
+}: TextFieldProps): ReactElement {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-300 mb-1">
+        {title}
+      </label>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && onEnter) {
+            onEnter();
+          }
+        }}
+        placeholder={placeholder}
+        className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent h-10 w-full"
+      />
+    </div>
+  );
+}
diff --git a/src/pages/CrossmatchResults.tsx b/src/pages/CrossmatchResults.tsx
new file mode 100644
index 0000000..88a5a0b
--- /dev/null
+++ b/src/pages/CrossmatchResults.tsx
@@ -0,0 +1,280 @@
+import { ReactElement, useEffect, useState } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import {
+  CommonTable,
+  Column,
+  CellPrimitive,
+} from "../components/ui/common-table";
+import { Badge } from "../components/ui/badge";
+import { DropdownFilter } from "../components/ui/dropdown-filter";
+import { TextFilter } from "../components/ui/text-filter";
+import { getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet } from "../clients/admin/sdk.gen";
+import type {
+  GetRecordsCrossmatchResponse,
+  RecordCrossmatch,
+  RecordCrossmatchStatus,
+  HttpValidationError,
+  ValidationError,
+} from "../clients/admin/types.gen";
+import { getResource } from "../resources/resources";
+import { Button } from "../components/ui/button";
+import { Loading } from "../components/ui/loading";
+import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
+import { LinkButton } from "../components/ui/link-button";
+
+export function CrossmatchResultsPage(): ReactElement {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const [data, setData] = useState<GetRecordsCrossmatchResponse | null>(null);
+  const [error, setError] = useState<HttpValidationError | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const tableName = searchParams.get("table_name");
+  const status = searchParams.get("status") as RecordCrossmatchStatus | null;
+  const page = parseInt(searchParams.get("page") || "0");
+  const pageSize = parseInt(searchParams.get("page_size") || "25");
+
+  const [localStatus, setLocalStatus] = useState<string>(status || "all");
+  const [localPageSize, setLocalPageSize] = useState<number>(pageSize);
+  const [localTableName, setLocalTableName] = useState<string>(tableName || "");
+
+  useEffect(() => {
+    setLocalStatus(status || "all");
+    setLocalPageSize(pageSize);
+    setLocalTableName(tableName || "");
+  }, [status, pageSize, tableName]);
+
+  useEffect(() => {
+    async function fetchData() {
+      if (!tableName) {
+        navigate("/");
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const response =
+          await getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet({
+            query: {
+              table_name: tableName,
+              status: status || undefined,
+              page: page,
+              page_size: pageSize,
+            },
+          });
+
+        if (response.error) {
+          setError(response.error);
+          return;
+        }
+
+        if (response.data) {
+          setData(response.data.data);
+        }
+      } catch (err) {
+        console.error("Error fetching crossmatch records", err);
+        setError({
+          detail: [
+            {
+              loc: [],
+              msg: "Failed to fetch crossmatch records",
+              type: "value_error",
+            },
+          ],
+        });
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [tableName, status, page, pageSize, navigate]);
+
+  function handlePageChange(newPage: number): void {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("page", newPage.toString());
+    setSearchParams(newSearchParams);
+  }
+
+  function applyFilters(): void {
+    const newSearchParams = new URLSearchParams(searchParams);
+
+    if (localTableName.trim()) {
+      newSearchParams.set("table_name", localTableName.trim());
+    } else {
+      newSearchParams.delete("table_name");
+    }
+
+    if (localStatus === "all") {
+      newSearchParams.delete("status");
+    } else {
+      newSearchParams.set("status", localStatus);
+    }
+
+    newSearchParams.set("page_size", localPageSize.toString());
+    newSearchParams.set("page", "0");
+
+    setSearchParams(newSearchParams);
+  }
+
+  function getRecordName(record: RecordCrossmatch): string {
+    return record.catalogs.designation?.name || record.record_id;
+  }
+
+  function renderCandidates(record: RecordCrossmatch): ReactElement {
+    if (record.status === "new") {
+      return <span>NULL</span>;
+    }
+
+    if (record.status === "existing" && record.metadata.pgc) {
+      const pgcText = `${record.metadata.pgc}`;
+      return <Badge href={`/object/${record.metadata.pgc}`}>{pgcText}</Badge>;
+    }
+
+    if (record.status === "collided" && record.metadata.possible_matches) {
+      const pgcNumbers = record.metadata.possible_matches;
+
+      return (
+        <div>
+          {pgcNumbers.map((pgc: number, index: number) => (
+            <Badge key={`${pgc}-${index}`} href={`/object/${pgc}`}>
+              {pgc}
+            </Badge>
+          ))}
+        </div>
+      );
+    }
+
+    return <span>NULL</span>;
+  }
+
+  function getStatusLabel(status: RecordCrossmatchStatus): string {
+    return getResource(`crossmatch.status.${status}`).Title;
+  }
+
+  const columns: Column[] = [
+    { name: "Record Name" },
+    { name: "Status" },
+    {
+      name: "Candidates",
+      renderCell: (recordIndex: CellPrimitive) => {
+        if (typeof recordIndex === "number" && data?.records[recordIndex]) {
+          return renderCandidates(data.records[recordIndex]);
+        }
+        return <span>NULL</span>;
+      },
+    },
+  ];
+
+  const tableData: Record<string, CellPrimitive>[] =
+    data?.records.map((record: RecordCrossmatch, index: number) => ({
+      "Record Name": getRecordName(record),
+      Status: getStatusLabel(record.status),
+      Candidates: index,
+    })) || [];
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return (
+      <ErrorPage
+        title="Error"
+        message={
+          error.detail?.map((err: ValidationError) => err.msg).join(", ") ||
+          "An error occurred"
+        }
+        className="p-8"
+      >
+        <ErrorPageHomeButton onClick={() => navigate("/")} />
+      </ErrorPage>
+    );
+  }
+
+  if (!tableName) {
+    return (
+      <ErrorPage
+        title="Missing table name"
+        message="Please provide a table_name parameter."
+        className="p-8"
+      >
+        <ErrorPageHomeButton onClick={() => navigate("/")} />
+      </ErrorPage>
+    );
+  }
+
+  return (
+    <div className="p-8">
+      <div className="mb-6">
+        <h2 className="text-3xl font-bold mb-4">Crossmatch results</h2>
+
+        <div className="flex gap-4 mb-4">
+          <LinkButton to={`/table/${localTableName.trim()}`}>
+            <TextFilter
+              title="Table name"
+              value={localTableName}
+              onChange={setLocalTableName}
+              placeholder="Enter table name"
+              onEnter={applyFilters}
+            />
+          </LinkButton>
+          <DropdownFilter
+            title="Status filter"
+            options={[
+              { value: "all", label: "All Statuses" },
+              { value: "unprocessed", label: "Unprocessed" },
+              { value: "new", label: "New" },
+              { value: "collided", label: "Collided" },
+              { value: "existing", label: "Existing" },
+            ]}
+            defaultValue="all"
+            value={localStatus}
+            onChange={setLocalStatus}
+          />
+          <DropdownFilter
+            title="Page size"
+            options={[
+              { value: "10" },
+              { value: "25" },
+              { value: "50" },
+              { value: "100" },
+            ]}
+            defaultValue="25"
+            value={localPageSize.toString()}
+            onChange={(value) => setLocalPageSize(parseInt(value))}
+          />
+          <div className="flex items-end">
+            <Button onClick={applyFilters}>Apply</Button>
+          </div>
+        </div>
+      </div>
+
+      <CommonTable columns={columns} data={tableData} className="mb-6">
+        <div className="flex justify-between items-center">
+          <h2 className="text-xl font-bold">Crossmatch records</h2>
+          <div className="text-sm text-gray-400">
+            Showing {tableData.length} records
+          </div>
+        </div>
+      </CommonTable>
+
+      <div className="flex justify-between items-center">
+        <Button
+          onClick={() => handlePageChange(page - 1)}
+          disabled={page === 0}
+        >
+          Previous
+        </Button>
+        <span className="text-gray-300">Page {page + 1}</span>
+        <Button
+          onClick={() => handlePageChange(page + 1)}
+          disabled={tableData.length < pageSize}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 1fd06d5..742fb95 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -1,25 +1,16 @@
 import { useNavigate } from "react-router-dom";
-import { Button } from "../components/ui/button";
+import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
 
 export function NotFoundPage() {
   const navigate = useNavigate();
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="max-w-md w-full text-center">
-        <div className="mb-8">
-          <h1 className="text-9xl font-bold">404</h1>
-          <h2 className="text-2xl font-semibold mb-4">Page Not Found</h2>
-          <p className="text-gray-400 mb-8">
-            The page you're looking for doesn't exist or has been moved.
-          </p>
-        </div>
-        <div className="flex justify-center">
-          <Button onClick={() => navigate("/")} className="px-6 py-3 text-base">
-            Go Back Home
-          </Button>
-        </div>
-      </div>
-    </div>
+    <ErrorPage
+      title="Page Not Found"
+      message="The page you're looking for doesn't exist or has been moved."
+      showLargeText={true}
+    >
+      <ErrorPageHomeButton onClick={() => navigate("/")} />
+    </ErrorPage>
   );
 }
diff --git a/src/pages/ObjectDetails.tsx b/src/pages/ObjectDetails.tsx
index a58657a..e2ca63d 100644
--- a/src/pages/ObjectDetails.tsx
+++ b/src/pages/ObjectDetails.tsx
@@ -1,9 +1,14 @@
 import { ReactElement, useEffect, useState } from "react";
 import { NavigateFunction, useNavigate, useParams } from "react-router-dom";
 import { SearchBar } from "../components/ui/searchbar";
-import { Button } from "../components/ui/button";
 import { AladinViewer } from "../components/ui/aladin";
 import { CommonTable } from "../components/ui/common-table";
+import { Loading } from "../components/ui/loading";
+import {
+  ErrorPage,
+  ErrorPageBackButton,
+  ErrorPageHomeButton,
+} from "../components/ui/error-page";
 import { querySimpleApiV1QuerySimpleGet } from "../clients/backend/sdk.gen";
 import { PgcObject, Schema } from "../clients/backend/types.gen";
 
@@ -21,12 +26,13 @@ function searchHandler(navigate: NavigateFunction) {
 
 function renderNotFound(navigate: NavigateFunction) {
   return (
-    <div className="text-center">
-      <Button onClick={backToResultsHandler(navigate)} className="mb-4">
-        Back
-      </Button>
-      <p className="text-gray-300">Object not found.</p>
-    </div>
+    <ErrorPage
+      title="Object Not Found"
+      message="The requested object could not be found."
+    >
+      <ErrorPageBackButton onClick={backToResultsHandler(navigate)} />
+      <ErrorPageHomeButton onClick={() => navigate("/")} />
+    </ErrorPage>
   );
 }
 
@@ -146,7 +152,7 @@ function renderObjectDetails(
           />
         )}
         <div className="flex-1">
-          <h2 className="text-2xl font-bold text-white mb-2">
+          <h2 className="text-2xl font-bold mb-2">
             {object.catalogs?.designation?.name || `PGC ${object.pgc}`}
           </h2>
           <p className="text-gray-300">PGC: {object.pgc}</p>
@@ -155,21 +161,21 @@ function renderObjectDetails(
 
       {object.catalogs?.coordinates && (
         <CommonTable columns={coordinatesColumns} data={coordinatesData}>
-          <h2 className="text-xl font-bold text-white">Coordinates</h2>
+          <h2 className="text-xl font-bold">Coordinates</h2>
           <p className="text-gray-300">Celestial coordinates of the object</p>
         </CommonTable>
       )}
 
       {object.catalogs?.redshift && (
         <CommonTable columns={redshiftColumns} data={redshiftData}>
-          <h2 className="text-xl font-bold text-white">Redshift</h2>
+          <h2 className="text-xl font-bold">Redshift</h2>
           <p className="text-gray-300">Redshift measurements</p>
         </CommonTable>
       )}
 
       {object.catalogs?.velocity && (
         <CommonTable columns={velocityColumns} data={velocityData}>
-          <h2 className="text-xl font-bold text-white">Velocity</h2>
+          <h2 className="text-xl font-bold">Velocity</h2>
           <p className="text-gray-300">
             Velocity measurements with respect to different apexes
           </p>
@@ -230,9 +236,7 @@ export function ObjectDetailsPage(): ReactElement {
       />
 
       {loading ? (
-        <div className="flex justify-center items-center h-64">
-          <p className="text-gray-300 text-lg">Loading...</p>
-        </div>
+        <Loading />
       ) : object ? (
         renderObjectDetails(object, schema)
       ) : (
diff --git a/src/pages/SearchResults.tsx b/src/pages/SearchResults.tsx
index 1d3af8a..599b59a 100644
--- a/src/pages/SearchResults.tsx
+++ b/src/pages/SearchResults.tsx
@@ -8,6 +8,8 @@ import { SearchPGCObject, backendClient } from "../clients/backend";
 import { SearchBar } from "../components/ui/searchbar";
 import { AladinViewer } from "../components/ui/aladin";
 import { Card, CardContent } from "../components/ui/card";
+import { Loading } from "../components/ui/loading";
+import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
 
 function objectClickHandler(
   navigate: NavigateFunction,
@@ -72,7 +74,7 @@ export function SearchResultsPage(): ReactElement {
       />
 
       {loading ? (
-        <p className="text-center">Loading...</p>
+        <Loading />
       ) : (
         <div className="grid grid-cols-1 gap-4">
           {results.length > 0 ? (
@@ -131,7 +133,13 @@ export function SearchResultsPage(): ReactElement {
               </div>
             </>
           ) : (
-            <p className="text-center">No results found for "{query}"</p>
+            <ErrorPage
+              title="No Results Found"
+              message={`No results found for "${query}"`}
+              className="p-4"
+            >
+              <ErrorPageHomeButton onClick={() => navigate("/")} />
+            </ErrorPage>
           )}
         </div>
       )}
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 5703fee..75c1b53 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -3,7 +3,7 @@ import {
   Bibliography,
   GetTableResponse,
   HttpValidationError,
-  ObjectCrossmatchStatus,
+  RecordCrossmatchStatus,
 } from "../clients/admin/types.gen";
 import { getTableAdminApiV1TableGet } from "../clients/admin/sdk.gen";
 import { useNavigate, useParams } from "react-router-dom";
@@ -12,8 +12,12 @@ import {
   Column,
   CommonTable,
 } from "../components/ui/common-table";
+import { Button } from "../components/ui/button";
 import { CopyButton } from "../components/ui/copy-button";
+import { Badge } from "../components/ui/badge";
 import { Link } from "../components/ui/link";
+import { Loading } from "../components/ui/loading";
+import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
 import { getResource } from "../resources/resources";
 
 function renderBibliography(bib: Bibliography): ReactElement {
@@ -54,14 +58,7 @@ function renderUCD(ucd: CellPrimitive): ReactElement {
   const words: ReactElement[] = [];
 
   ucd.split(";").forEach((word, index) => {
-    words.push(
-      <div
-        key={`${word}-${index}`}
-        className="inline-block bg-gray-600 rounded px-1.5 py-0.5 text-sm mr-0.5 mb-0.5"
-      >
-        {word}
-      </div>,
-    );
+    words.push(<Badge key={`${word}-${index}`}>{word}</Badge>);
   });
 
   return (
@@ -148,7 +145,7 @@ function MarkingRules(props: MarkingRulesProps): ReactElement {
   return (
     <CommonTable columns={columns} data={values} className="pb-5">
       <h2 className="text-2xl font-bold">
-        Mapping of columns to catalog values for marking of records.
+        Mapping of columns to catalog values for marking of records
       </h2>
     </CommonTable>
   );
@@ -156,6 +153,8 @@ function MarkingRules(props: MarkingRulesProps): ReactElement {
 
 interface CrossmatchStatsProps {
   table: GetTableResponse;
+  tableName: string;
+  navigate: (path: string) => void;
 }
 
 function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
@@ -164,7 +163,7 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
   const values: Record<string, CellPrimitive>[] = [];
 
   if (props.table.statistics) {
-    const statusLabels: Record<ObjectCrossmatchStatus, string> = {
+    const statusLabels: Record<RecordCrossmatchStatus, string> = {
       unprocessed: "Unprocessed",
       new: "New",
       collided: "Collided",
@@ -173,7 +172,7 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
 
     Object.entries(props.table.statistics).forEach(([status, count]) => {
       values.push({
-        Status: statusLabels[status as ObjectCrossmatchStatus] || status,
+        Status: statusLabels[status as RecordCrossmatchStatus] || status,
         Count: count || 0,
       });
     });
@@ -183,9 +182,24 @@ function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
     return <div></div>;
   }
 
+  function handleViewCrossmatchResults(event: React.MouseEvent): void {
+    const url = `/crossmatch?table_name=${encodeURIComponent(props.tableName)}&status=collided`;
+
+    if (event.ctrlKey || event.metaKey) {
+      window.open(url, "_blank");
+    } else {
+      props.navigate(url);
+    }
+  }
+
   return (
     <CommonTable columns={columns} data={values} className="pb-5">
-      <h2 className="text-2xl font-bold">Crossmatch Statistics</h2>
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold">Crossmatch Statistics</h2>
+        <Button onClick={handleViewCrossmatchResults}>
+          View crossmatch results
+        </Button>
+      </div>
     </CommonTable>
   );
 }
@@ -242,19 +256,28 @@ function ColumnInfo(props: ColumnInfoProps): ReactElement {
   );
 }
 
-function renderNotFound(): ReactElement {
+function renderNotFound(navigate: (path: string) => void): ReactElement {
   return (
-    <div className="text-center">
-      <p className="text-gray-300">Table not found.</p>
-    </div>
+    <ErrorPage
+      title="Table Not Found"
+      message="The requested table could not be found."
+    >
+      <ErrorPageHomeButton onClick={() => navigate("/")} />
+    </ErrorPage>
   );
 }
 
-function renderError(error: HttpValidationError): ReactElement {
+function renderError(
+  error: HttpValidationError,
+  navigate: (path: string) => void,
+): ReactElement {
   return (
-    <div className="text-center">
-      <p className="text-gray-300">{error.detail?.toString()}</p>
-    </div>
+    <ErrorPage
+      title="Error"
+      message={error.detail?.toString() || "An error occurred"}
+    >
+      <ErrorPageHomeButton onClick={() => navigate("/")} />
+    </ErrorPage>
   );
 }
 
@@ -297,20 +320,22 @@ export function TableDetailsPage(): ReactElement {
   return (
     <div className="p-8">
       {loading ? (
-        <div className="flex justify-center items-center h-64">
-          <p className="text-gray-300 text-lg">Loading...</p>
-        </div>
+        <Loading />
       ) : table ? (
         <div>
           <TableMeta tableName={tableName ?? ""} table={table} />
           <MarkingRules table={table} />
-          <CrossmatchStats table={table} />
+          <CrossmatchStats
+            table={table}
+            tableName={tableName ?? ""}
+            navigate={navigate}
+          />
           <ColumnInfo table={table} />
         </div>
       ) : error ? (
-        renderError(error)
+        renderError(error, navigate)
       ) : (
-        renderNotFound()
+        renderNotFound(navigate)
       )}
     </div>
   );