diff --git a/src/App.tsx b/src/App.tsx
index 4004e84..a15168c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -47,12 +47,7 @@ function App() {
           <Route path="/crossmatch" element={<CrossmatchResultsPage />} />
           <Route
             path="/records/:recordId/crossmatch"
-            element={
-              <>
-                <SearchBar />
-                <RecordCrossmatchDetailsPage />
-              </>
-            }
+            element={<RecordCrossmatchDetailsPage />}
           />
           <Route
             path="*"
diff --git a/src/assets/texts.json b/src/assets/texts.json
index 4ff3ef7..8e6604f 100644
--- a/src/assets/texts.json
+++ b/src/assets/texts.json
@@ -10,6 +10,8 @@
     "crossmatch.triage.pending": "Pending",
     "crossmatch.triage.resolved": "Resolved",
     "crossmatch.triage.verbose.pending": "Pending manual check",
-    "crossmatch.triage.verbose.resolved": "Resolved"
+    "crossmatch.triage.verbose.resolved": "Resolved",
+    "crossmatch.action.mark_new": "Mark as new",
+    "crossmatch.action.resolve": "Match to this PGC"
   }
 }
diff --git a/src/components/core/Aladin.tsx b/src/components/core/Aladin.tsx
index 95c4c75..d05a53f 100644
--- a/src/components/core/Aladin.tsx
+++ b/src/components/core/Aladin.tsx
@@ -1,6 +1,83 @@
 import classNames from "classnames";
 import { useEffect, useRef } from "react";
 
+const SOURCE_SIZE = 8;
+const LABEL_FONT = "14px sans-serif";
+const LABEL_PADDING_X = 4;
+const LABEL_PADDING_Y = 2;
+
+function drawCross(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  size: number,
+  color: string,
+): void {
+  const half = size / 2;
+  const left = x - half;
+  const top = y - half;
+
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(left, top);
+  ctx.lineTo(left + size - 1, top + size - 1);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(left + size - 1, top);
+  ctx.lineTo(left, top + size - 1);
+  ctx.stroke();
+}
+
+function drawLabelWithBackground(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+): void {
+  ctx.font = LABEL_FONT;
+  const metrics = ctx.measureText(text);
+  const ascent = metrics.actualBoundingBoxAscent || 11;
+  const descent = metrics.actualBoundingBoxDescent || 3;
+  const textWidth = metrics.width;
+  const textHeight = ascent + descent;
+
+  const bgX = x;
+  const bgY = y - ascent - LABEL_PADDING_Y;
+  const bgWidth = textWidth + LABEL_PADDING_X * 2;
+  const bgHeight = textHeight + LABEL_PADDING_Y * 2;
+
+  ctx.fillStyle = "rgba(255, 255, 255, 0.88)";
+  ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
+
+  ctx.strokeStyle = "rgba(0, 0, 0, 0.25)";
+  ctx.lineWidth = 1;
+  ctx.strokeRect(bgX + 0.5, bgY + 0.5, bgWidth - 1, bgHeight - 1);
+
+  ctx.fillStyle = "#1a1a1a";
+  ctx.fillText(text, x + LABEL_PADDING_X, y);
+}
+
+type AladinCanvasSource = {
+  x: number;
+  y: number;
+  data?: { name?: string };
+};
+
+function drawSourceWithLabel(
+  source: AladinCanvasSource,
+  ctx: CanvasRenderingContext2D,
+): void {
+  drawCross(ctx, source.x, source.y, SOURCE_SIZE, "black");
+
+  const label = source.data?.name;
+  if (!label) {
+    return;
+  }
+
+  drawLabelWithBackground(ctx, label, source.x + SOURCE_SIZE / 2, source.y);
+}
+
 interface AdditionalSource {
   ra: number;
   dec: number;
@@ -26,11 +103,14 @@ export function AladinViewer({
   additionalSources,
 }: AladinViewerProps) {
   const aladinDivRef = useRef<HTMLDivElement>(null);
+  const additionalSourcesKey = JSON.stringify(additionalSources ?? []);
 
   useEffect(() => {
     if (!aladinDivRef.current || !window.A) return;
 
     try {
+      aladinDivRef.current.replaceChildren();
+
       const aladin = window.A.aladin(aladinDivRef.current, {
         survey,
         fov,
@@ -45,12 +125,10 @@ export function AladinViewer({
 
       if (additionalSources && additionalSources.length > 0) {
         const nameCatalog = window.A.catalog({
-          labelColumn: "name",
-          shape: "cross",
+          shape: drawSourceWithLabel,
           color: "black",
-          displayLabel: true,
-          labelColor: "lightgrey",
-          labelFont: "14px sans-serif",
+          displayLabel: false,
+          sourceSize: SOURCE_SIZE,
         });
         const descrCatalog = window.A.catalog({
           color: "black",
@@ -77,7 +155,7 @@ export function AladinViewer({
     } catch (error) {
       console.error("Error initializing Aladin:", error);
     }
-  }, [ra, dec, fov, survey, additionalSources]);
+  }, [ra, dec, fov, survey, additionalSourcesKey]);
 
   return <div ref={aladinDivRef} className={classNames("border", className)} />;
 }
@@ -112,12 +190,14 @@ declare global {
         addCatalog: (catalog: AladinCatalog) => void;
       };
       catalog: (options?: {
-        labelColumn?: string;
         displayLabel?: boolean;
-        labelColor?: string;
-        labelFont?: string;
         sourceSize?: number;
-        shape?: string;
+        shape?:
+          | string
+          | ((
+              source: AladinCanvasSource,
+              ctx: CanvasRenderingContext2D,
+            ) => void);
         color?: string;
       }) => AladinCatalog;
       source: (
diff --git a/src/pages/RecordCrossmatchDetails.tsx b/src/pages/RecordCrossmatchDetails.tsx
index f0100e4..7db9fe3 100644
--- a/src/pages/RecordCrossmatchDetails.tsx
+++ b/src/pages/RecordCrossmatchDetails.tsx
@@ -1,9 +1,8 @@
-import { ReactElement, useEffect, useState } from "react";
+import { ReactElement, ReactNode, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { AladinViewer } from "../components/core/Aladin";
 import { Loading } from "../components/core/Loading";
 import { ErrorPage } from "../components/ui/ErrorPage";
-import { CatalogData } from "../components/ui/CatalogData";
 import {
   CommonTable,
   Column,
@@ -18,6 +17,8 @@ import {
   RecordCrossmatch,
   PgcCandidate,
   Schema as AdminSchema,
+  StatusesPayload,
+  Catalogs,
 } from "../clients/admin/types.gen";
 import { Schema as BackendSchema } from "../clients/backend/types.gen";
 import { getResource } from "../resources/resources";
@@ -29,8 +30,13 @@ import { useDataFetching } from "../hooks/useDataFetching";
 import { adminClient } from "../clients/config";
 import { Button } from "../components/core/Button";
 import { isLoggedIn } from "../auth/token";
+import {
+  Declination,
+  QuantityWithError,
+  RightAscension,
+} from "../components/core/Astronomy";
+import classNames from "classnames";
 
-// TODO: remove when admin api uses the same structures as data api
 function convertAdminSchemaToBackendSchema(
   adminSchema: AdminSchema,
 ): BackendSchema {
@@ -97,6 +103,10 @@ function createDescription(
   return parts.join(", ");
 }
 
+function getCandidateLabel(candidate: PgcCandidate): string {
+  return candidate.catalogs?.designation?.name ?? `PGC ${candidate.pgc}`;
+}
+
 function convertCandidatesToAdditionalSources(
   candidates: PgcCandidate[],
   mainRecord: RecordCrossmatch,
@@ -106,7 +116,7 @@ function convertCandidatesToAdditionalSources(
     .map((candidate) => ({
       ra: candidate.catalogs!.coordinates!.equatorial.ra,
       dec: candidate.catalogs!.coordinates!.equatorial.dec,
-      label: `PGC ${candidate.pgc}`,
+      label: getCandidateLabel(candidate),
       description: createDescription(
         candidate.catalogs?.velocity?.heliocentric,
         candidate.catalogs?.redshift,
@@ -128,8 +138,224 @@ function convertCandidatesToAdditionalSources(
     : candidateSources;
 }
 
-interface RecordCrossmatchDetailsProps {
-  data: GetRecordCrossmatchResponse;
+function ObjectSummary({
+  catalogs,
+  schema,
+  name,
+  layout = "rows",
+}: {
+  catalogs: Catalogs;
+  schema: BackendSchema;
+  name: ReactNode;
+  layout?: "rows" | "columnar";
+}): ReactElement {
+  const equatorial = catalogs?.coordinates?.equatorial;
+  const redshift = catalogs?.redshift;
+
+  const nameField = (
+    <>
+      <dt className="text-gray-400">Name</dt>
+      <dd>{name}</dd>
+    </>
+  );
+
+  const raField = equatorial ? (
+    <>
+      <dt className="text-gray-400">RA</dt>
+      <dd>
+        <QuantityWithError
+          error={equatorial.e_ra}
+          unit={schema.units.coordinates?.equatorial?.ra || "deg"}
+        >
+          <RightAscension value={equatorial.ra} />
+        </QuantityWithError>
+      </dd>
+    </>
+  ) : null;
+
+  const decField = equatorial ? (
+    <>
+      <dt className="text-gray-400">Dec</dt>
+      <dd>
+        <QuantityWithError
+          error={equatorial.e_dec}
+          unit={schema.units.coordinates?.equatorial?.dec || "deg"}
+        >
+          <Declination value={equatorial.dec} />
+        </QuantityWithError>
+      </dd>
+    </>
+  ) : null;
+
+  const redshiftField = redshift ? (
+    <>
+      <dt className="text-gray-400">Redshift</dt>
+      <dd>
+        <QuantityWithError error={redshift.e_z} decimalPlaces={5}>
+          {redshift.z.toFixed(5)}
+        </QuantityWithError>
+      </dd>
+    </>
+  ) : null;
+
+  if (layout === "columnar") {
+    return (
+      <dl className="flex flex-wrap items-start gap-x-6 gap-y-1 text-sm">
+        <div className="min-w-0">{nameField}</div>
+        {raField && <div className="min-w-0">{raField}</div>}
+        {decField && <div className="min-w-0">{decField}</div>}
+        {redshiftField && <div className="min-w-0">{redshiftField}</div>}
+      </dl>
+    );
+  }
+
+  return (
+    <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+      {nameField}
+      {raField}
+      {decField}
+      {redshiftField}
+    </dl>
+  );
+}
+
+type ResolutionChoice = "new" | number;
+
+interface ResolutionSelectorProps {
+  crossmatch: RecordCrossmatch;
+  candidates: PgcCandidate[];
+  schema: BackendSchema;
+  showResolveControls: boolean;
+  resolving: ResolutionChoice | null;
+  selected: ResolutionChoice | null;
+  onSelect: (choice: ResolutionChoice) => void;
+  onSubmit: () => void;
+}
+
+function ResolutionSelector({
+  crossmatch,
+  candidates,
+  schema,
+  showResolveControls,
+  resolving,
+  selected,
+  onSelect,
+  onSubmit,
+}: ResolutionSelectorProps): ReactElement {
+  const matchedPgc =
+    crossmatch.status === "existing" ? crossmatch.metadata.pgc : null;
+
+  function renderCandidateSummary(candidate: PgcCandidate): ReactElement {
+    return (
+      <ObjectSummary
+        catalogs={candidate.catalogs}
+        schema={schema}
+        layout="columnar"
+        name={
+          <Link href={`/object/${candidate.pgc}`}>
+            {getCandidateLabel(candidate)}
+          </Link>
+        }
+      />
+    );
+  }
+
+  if (!showResolveControls) {
+    return (
+      <div className="space-y-4">
+        {candidates.length > 0 && (
+          <div className="space-y-3">
+            <h3 className="text-sm font-semibold">Candidates</h3>
+            {candidates.map((candidate) => (
+              <div
+                key={candidate.pgc}
+                className={classNames(
+                  "rounded-lg border px-4 py-2",
+                  matchedPgc === candidate.pgc
+                    ? "border-[#646cff] bg-neutral-900/60"
+                    : "border-gray-600 bg-neutral-900/40",
+                )}
+              >
+                {renderCandidateSummary(candidate)}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {crossmatch.status === "new" && (
+          <p className="text-sm text-gray-400">
+            {getResource("crossmatch.action.mark_new").Title}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        <h3 className="text-sm font-semibold">Resolution</h3>
+        <label
+          className={classNames(
+            "block rounded-lg border p-4 cursor-pointer transition-colors",
+            selected === "new"
+              ? "border-[#646cff] bg-neutral-900/60"
+              : "border-gray-600 bg-neutral-900/40 hover:border-gray-500",
+            resolving !== null && "opacity-50 cursor-wait",
+          )}
+        >
+          <div className="flex items-center gap-3">
+            <input
+              type="radio"
+              name="crossmatch-resolution"
+              className="shrink-0"
+              checked={selected === "new"}
+              disabled={resolving !== null}
+              onChange={() => onSelect("new")}
+            />
+            <span className="text-sm font-semibold">
+              {getResource("crossmatch.action.mark_new").Title}
+            </span>
+          </div>
+        </label>
+
+        {candidates.map((candidate) => (
+          <label
+            key={candidate.pgc}
+            className={classNames(
+              "block rounded-lg border px-4 py-2 cursor-pointer transition-colors",
+              selected === candidate.pgc
+                ? "border-[#646cff] bg-neutral-900/60"
+                : "border-gray-600 bg-neutral-900/40 hover:border-gray-500",
+              resolving !== null && "opacity-50 cursor-wait",
+            )}
+          >
+            <div className="flex items-center gap-3">
+              <input
+                type="radio"
+                name="crossmatch-resolution"
+                className="shrink-0"
+                checked={selected === candidate.pgc}
+                disabled={resolving !== null}
+                onChange={() => onSelect(candidate.pgc)}
+              />
+              <div className="min-w-0 flex-1">
+                {renderCandidateSummary(candidate)}
+              </div>
+            </div>
+          </label>
+        ))}
+
+        <Button
+          type="button"
+          disabled={selected === null || resolving !== null}
+          onClick={onSubmit}
+        >
+          {resolving !== null ? "Saving…" : "Save resolution"}
+        </Button>
+      </div>
+    </div>
+  );
 }
 
 function OriginalData({
@@ -148,10 +374,15 @@ function OriginalData({
   return <CommonTable columns={columns} data={tableData} />;
 }
 
+interface RecordCrossmatchDetailsProps {
+  data: GetRecordCrossmatchResponse;
+}
+
 function RecordCrossmatchDetails({
   data,
 }: RecordCrossmatchDetailsProps): ReactElement {
-  const [resolvingPgc, setResolvingPgc] = useState<number | null>(null);
+  const [selected, setSelected] = useState<ResolutionChoice | null>(null);
+  const [resolving, setResolving] = useState<ResolutionChoice | null>(null);
   const [resolveError, setResolveError] = useState<string | null>(null);
   const {
     crossmatch,
@@ -160,7 +391,6 @@ function RecordCrossmatchDetails({
     table_name: tableName,
     original_data: originalData,
   } = data;
-  const recordCatalogs = crossmatch.catalogs;
   const showResolveControls =
     isLoggedIn() && crossmatch.triage_status === "pending";
   const backendSchema = convertAdminSchemaToBackendSchema(schema);
@@ -173,127 +403,140 @@ function RecordCrossmatchDetails({
   const triageBadgeLabel = getResource(
     `crossmatch.triage.verbose.${crossmatch.triage_status}`,
   ).Title;
+  const objectName =
+    crossmatch.catalogs?.designation?.name ?? `Record ${crossmatch.record_id}`;
+
+  async function submitCrossmatchResolution(
+    statuses: StatusesPayload,
+  ): Promise<void> {
+    const response = await setCrossmatchResults({
+      client: adminClient,
+      body: { statuses },
+    });
+
+    if (response.error || !response.data?.data) {
+      throw new Error(
+        typeof response.error === "object"
+          ? JSON.stringify(response.error)
+          : String(response.error || "Unknown error"),
+      );
+    }
+
+    window.location.reload();
+  }
 
   async function resolveCandidate(pgc: number): Promise<void> {
     setResolveError(null);
-    setResolvingPgc(pgc);
+    setResolving(pgc);
     try {
-      const response = await setCrossmatchResults({
-        client: adminClient,
-        body: {
-          statuses: {
-            existing: {
-              record_ids: [crossmatch.record_id],
-              pgcs: [pgc],
-              triage_statuses: ["resolved"],
-            },
-          },
+      await submitCrossmatchResolution({
+        existing: {
+          record_ids: [crossmatch.record_id],
+          pgcs: [pgc],
+          triage_statuses: ["resolved"],
         },
       });
+    } catch (err) {
+      setResolveError(`${err}`);
+    } finally {
+      setResolving(null);
+    }
+  }
 
-      if (response.error || !response.data?.data) {
-        throw new Error(
-          typeof response.error === "object"
-            ? JSON.stringify(response.error)
-            : String(response.error || "Unknown error"),
-        );
-      }
-
-      window.location.reload();
+  async function markAsNew(): Promise<void> {
+    setResolveError(null);
+    setResolving("new");
+    try {
+      await submitCrossmatchResolution({
+        new: {
+          record_ids: [crossmatch.record_id],
+          triage_statuses: ["resolved"],
+        },
+      });
     } catch (err) {
       setResolveError(`${err}`);
     } finally {
-      setResolvingPgc(null);
+      setResolving(null);
+    }
+  }
+
+  async function submitResolution(): Promise<void> {
+    if (selected === null) return;
+    if (selected === "new") {
+      await markAsNew();
+    } else {
+      await resolveCandidate(selected);
     }
   }
 
   return (
     <div className="space-y-6 rounded-lg">
-      <div className="flex items-start space-x-6">
+      <div className="flex items-start gap-6">
         {crossmatch.catalogs?.coordinates?.equatorial && (
           <AladinViewer
             ra={crossmatch.catalogs.coordinates.equatorial.ra}
             dec={crossmatch.catalogs.coordinates.equatorial.dec}
             fov={0.02}
-            className="w-96 h-96"
+            className="w-96 h-96 shrink-0"
             additionalSources={candidateSources}
           />
         )}
-        <div className="flex-1">
-          <h2 className="text-2xl font-bold mb-2 flex items-center justify-between gap-3">
-            <span className="min-w-0">
-              {crossmatch.catalogs?.designation?.name ??
-                `Record ${crossmatch.record_id}`}
-            </span>
-            <Badge type={triageBadgeType} className="shrink-0">
-              {triageBadgeLabel}
-            </Badge>
-          </h2>
-          <p className="flex items-center gap-2">
-            Record ID:{" "}
-            <CopyButton textToCopy={crossmatch.record_id}>
-              <span className="font-mono">{crossmatch.record_id}</span>
-            </CopyButton>
-          </p>
-          <p>
-            Table: <Link href={`/table/${tableName}`}>{tableName}</Link>
-          </p>
-          <p>
-            {candidates.length === 1
-              ? "1 candidate"
-              : `${candidates.length} candidates`}
-          </p>
+        <div className="flex-1 min-w-0 space-y-4">
+          <div>
+            <h2 className="text-2xl font-bold mb-2 flex items-center justify-between gap-3">
+              <span className="min-w-0">{objectName}</span>
+              <Badge type={triageBadgeType} className="shrink-0">
+                {triageBadgeLabel}
+              </Badge>
+            </h2>
+            <p className="flex items-center gap-2">
+              Record ID:{" "}
+              <CopyButton textToCopy={crossmatch.record_id}>
+                <span className="font-mono">{crossmatch.record_id}</span>
+              </CopyButton>
+            </p>
+            <p>
+              Table: <Link href={`/table/${tableName}`}>{tableName}</Link>
+            </p>
+            <p>
+              {candidates.length === 1
+                ? "1 candidate"
+                : `${candidates.length} candidates`}
+            </p>
+          </div>
+          <div className="rounded-lg border border-gray-600 bg-neutral-900/40 p-4">
+            <h3 className="text-sm font-semibold mb-3">Object</h3>
+            <ObjectSummary
+              catalogs={crossmatch.catalogs}
+              schema={backendSchema}
+              name={objectName}
+            />
+          </div>
         </div>
       </div>
 
-      <CatalogData catalogs={recordCatalogs} schema={backendSchema} />
+      <ResolutionSelector
+        crossmatch={crossmatch}
+        candidates={candidates}
+        schema={backendSchema}
+        showResolveControls={showResolveControls}
+        resolving={resolving}
+        selected={selected}
+        onSelect={setSelected}
+        onSubmit={() => void submitResolution()}
+      />
+
+      {resolveError && (
+        <p className="text-red-400 text-sm" role="alert">
+          {resolveError}
+        </p>
+      )}
 
       {originalData && (
         <Accordion title="Original Data">
           <OriginalData data={originalData} />
         </Accordion>
       )}
-
-      {candidates.length > 0 && (
-        <div className="space-y-6">
-          <h2 className="text-xl font-bold">Crossmatch Candidates</h2>
-          {resolveError && (
-            <p className="text-red-400 text-sm" role="alert">
-              {resolveError}
-            </p>
-          )}
-          {candidates.map((candidate) => (
-            <Accordion
-              key={candidate.pgc}
-              title={`PGC ${candidate.pgc}`}
-              defaultOpen
-            >
-              <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
-                <p className="flex items-center gap-2">
-                  <span className="font-mono">
-                    <Link href={`/object/${candidate.pgc}`}>
-                      {`PGC ${candidate.pgc}`}
-                    </Link>
-                  </span>
-                </p>
-                {showResolveControls && (
-                  <Button
-                    type="button"
-                    disabled={resolvingPgc !== null}
-                    onClick={() => resolveCandidate(candidate.pgc)}
-                  >
-                    {resolvingPgc === candidate.pgc ? "Resolving…" : "Resolve"}
-                  </Button>
-                )}
-              </div>
-              <CatalogData
-                catalogs={candidate.catalogs}
-                schema={backendSchema}
-              />
-            </Accordion>
-          ))}
-        </div>
-      )}
     </div>
   );
 }