diff --git a/branding/favicon-rh.svg b/branding/favicon-rh.svg
new file mode 100644
index 0000000..970d41d
--- /dev/null
+++ b/branding/favicon-rh.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 228 228" style="enable-background:new 0 0 228 228;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#EE0000;}
+</style>
+<g>
+	<g>
+		<path d="M187.9,100.6c0.3,1.3,0.4,2.7,0.4,4.1c0,17.7-21.5,20.7-36.3,20.7c-57.8,0-100.8-35.9-100.8-46.8c0-0.7,0-1.5,0.3-2.3
+			L47,87c-1,2.3-1.8,5.4-1.8,8.7c0,21.5,48.6,54,104.2,54c24.6,0,43.3-9.2,43.3-25.9c0-1.3,0-2.3-2-12L187.9,100.6z"/>
+		<path class="st0" d="M151.9,125.4c14.8,0,36.3-3.1,36.3-20.7c0-1.4,0-2.7-0.4-4.1l-8.8-38.4c-2.1-8.4-3.8-12.3-18.7-19.7
+			c-11.5-5.9-36.6-15.6-44-15.6c-6.9,0-9,9-17.1,9c-7.9,0-13.8-6.7-21.2-6.7c-7.2,0-11.8,4.9-15.4,14.8c0,0-10,28.2-11.3,32.2
+			c-0.3,0.8-0.3,1.6-0.3,2.3C51.1,89.5,94.2,125.4,151.9,125.4 M190.6,111.9c2,9.7,2,10.7,2,12c0,16.6-18.7,25.9-43.3,25.9
+			c-55.5,0-104.2-32.5-104.2-54c0-3.3,0.8-6.4,1.8-8.7c-20,1-45.8,4.6-45.8,27.4c0,37.4,88.6,83.4,158.7,83.4
+			c53.8,0,67.3-24.3,67.3-43.5C227.2,139.3,214.1,122.1,190.6,111.9"/>
+	</g>
+</g>
+</svg>
diff --git a/branding/favicon.ico b/branding/favicon.ico
deleted file mode 100644
index 130b38c..0000000
Binary files a/branding/favicon.ico and /dev/null differ
diff --git a/branding/manifest.json b/branding/manifest.json
index 00b000f..7b3dcc4 100644
--- a/branding/manifest.json
+++ b/branding/manifest.json
@@ -3,7 +3,7 @@
   "name": "RHTAS Console UI",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon-rh.svg",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }
diff --git a/client/index.html b/client/index.html
index a557ad1..5a41a73 100644
--- a/client/index.html
+++ b/client/index.html
@@ -9,7 +9,7 @@
     <meta name="theme-color" content="#000000"/>
     <meta name="version" content="2.0.0"/>
     <link rel="manifest" href="/manifest.json"/>
-    <link rel="icon" href="/favicon.ico"/>
+    <link rel="icon" href="/favicon-rh.svg"/>
     <base href="/"/>
     <script>
       window._env = "<%= _env %>";
diff --git a/client/openapi/console.yaml b/client/openapi/console.yaml
index 6319dea..9c55894 100644
--- a/client/openapi/console.yaml
+++ b/client/openapi/console.yaml
@@ -644,6 +644,25 @@ components:
       required:
         - mediaType
         - size
+    Signatures:
+      type: array
+      items:
+        $ref: '#/components/schemas/Signature'
+    Signature:
+      type: object
+      description: A cryptographic signature with its associated certificate chain
+      properties:
+        signature:
+          type: string
+          description: A single cryptographic signature encoded as a string
+        certificateChain:
+          type: array
+          description: The X.509 certificate chain associated with this signature
+          items:
+            type: string
+      required:
+        - signature
+        - certificateChain
     ImageMetadataResponse:
       type: object
       properties:
@@ -657,6 +676,14 @@ components:
           type: string
           description: The container image's digest (e.g., SHA256 hash)
           example: sha256:abcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890
+        signatures:
+          $ref: '#/components/schemas/Signatures'
+        attestations:
+          type: array
+          description: A list of signed attestations associated with the image
+          items:
+            type: string
+            description: A single signed attestation payload or reference
       required:
         - artifact
         - metadata
diff --git a/client/src/app/Routes.tsx b/client/src/app/Routes.tsx
index 4daf6bc..c287ff1 100644
--- a/client/src/app/Routes.tsx
+++ b/client/src/app/Routes.tsx
@@ -5,18 +5,21 @@ import { Navigate, useRoutes } from "react-router-dom";
 import { Bullseye, Spinner } from "@patternfly/react-core";
 import { ErrorFallback } from "./components/ErrorFallback";
 
+const Artifacts = lazy(() => import("./pages/Artifacts"));
 const TrustRoot = lazy(() => import("./pages/TrustRoot"));
 const RekorSearch = lazy(() => import("./pages/RekorSearch"));
 
 export const Paths = {
-  trustRoot: "/trust-root",
+  artifacts: "/artifacts",
   rekorSearch: "/rekor-search",
+  trustRoot: "/trust-root",
 } as const;
 
 export const AppRoutes = () => {
   const allRoutes = useRoutes([
     { path: "/", element: <Navigate to={Paths.trustRoot} /> },
     { path: Paths.trustRoot, element: <TrustRoot /> },
+    { path: Paths.artifacts, element: <Artifacts /> },
     { path: Paths.rekorSearch, element: <RekorSearch /> },
   ]);
 
diff --git a/client/src/app/layout/about.tsx b/client/src/app/layout/about.tsx
index b341ec4..d70293f 100644
--- a/client/src/app/layout/about.tsx
+++ b/client/src/app/layout/about.tsx
@@ -23,13 +23,13 @@ export const AboutApp: React.FC<IButtonAboutAppProps> = ({ isOpen, onClose }) =>
       productName={about.displayName}
       brandImageAlt="Logo"
       brandImageSrc={about.imageSrc ?? TRANSPARENT_1x1_GIF}
-      trademark={`COPYRIGHT © 2020, ${new Date().getFullYear()}`}
+      trademark={`COPYRIGHT © 2025, ${new Date().getFullYear()}`}
     >
       <Content>
         <Content component={ContentVariants.p}>
-          {about.displayName} is a proactive service that assists in risk management of Open Source Software (OSS)
-          packages and dependencies. {about.displayName} brings awareness to and remediation of OSS vulnerabilities
-          discovered within the software supply chain.
+          {about.displayName} is a web-based UI for interacting with the Red Hat Trusted Artifact Signer (TAS)
+          ecosystem. It provides user-friendly workflows for retrieving, verifying, and monitoring signed software
+          artifacts, integrating with Sigstore services like Rekor, Fulcio, and TUF.
         </Content>
 
         {about.documentationUrl ? (
diff --git a/client/src/app/layout/sidebar.tsx b/client/src/app/layout/sidebar.tsx
index 9f10431..503adfb 100644
--- a/client/src/app/layout/sidebar.tsx
+++ b/client/src/app/layout/sidebar.tsx
@@ -21,7 +21,15 @@ export const SidebarApp: React.FC = () => {
                 return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
               }}
             >
-              Trust root
+              Trust Root
+            </NavLink>
+            <NavLink
+              to={Paths.artifacts}
+              className={({ isActive }) => {
+                return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
+              }}
+            >
+              Artifacts
             </NavLink>
           </li>
           <li className={nav.navItem}>
diff --git a/client/src/app/pages/Artifacts/Artifacts.tsx b/client/src/app/pages/Artifacts/Artifacts.tsx
new file mode 100644
index 0000000..9fd1357
--- /dev/null
+++ b/client/src/app/pages/Artifacts/Artifacts.tsx
@@ -0,0 +1,156 @@
+import { Fragment, useRef, useState } from "react";
+import {
+  Button,
+  Content,
+  Flex,
+  FlexItem,
+  Form,
+  FormGroup,
+  FormGroupLabelHelp,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  PageSection,
+  Popover,
+  TextInput,
+} from "@patternfly/react-core";
+import { useFetchArtifactsImageData, useVerifyArtifact } from "@app/queries/artifacts";
+import { LoadingWrapper } from "@app/components/LoadingWrapper";
+import { ArtifactResults } from "./components/ArtifactResults";
+import { Controller, useForm } from "react-hook-form";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+
+const PLACEHOLDER_URI = "docker.io/library/nginx:latest";
+
+interface FormInputs {
+  searchInput: string;
+}
+
+export const Artifacts = () => {
+  const [artifactUri, setArtifactUri] = useState<string | null>();
+  const labelHelpRef = useRef(null);
+
+  const {
+    artifact,
+    isFetching: isFetchingArtifactMetadata,
+    fetchError: fetchErrorArtifactMetadata,
+  } = useFetchArtifactsImageData({ uri: artifactUri });
+
+  const { mutate: verifyArtifact, data: verification, error: verifyError } = useVerifyArtifact();
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<FormInputs>({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: {
+      searchInput: "",
+    },
+  });
+
+  const onSubmit = (data: FormInputs) => {
+    const uri = data.searchInput?.trim();
+    if (!uri) return;
+    setArtifactUri(uri);
+    // kick off verification for this URI as well
+    verifyArtifact({ uri, expectedSAN: null });
+  };
+
+  const query = watch("searchInput");
+  const isEmpty = query.trim().length === 0;
+
+  return (
+    <Fragment>
+      <PageSection>
+        <Content>
+          <h1>Artifacts</h1>
+          <p>Search for an artifact.</p>
+        </Content>
+      </PageSection>
+      <PageSection>
+        <Form onSubmit={(e) => void handleSubmit(onSubmit)(e)}>
+          <Flex>
+            <Flex direction={{ default: "column" }} flex={{ default: "flex_3" }}>
+              <FlexItem>
+                <Controller
+                  name="searchInput"
+                  control={control}
+                  rules={{ required: { value: true, message: "A URI is required" } }}
+                  render={({ field, fieldState }) => (
+                    <FormGroup
+                      label="Container Image URI"
+                      labelHelp={
+                        <Popover
+                          triggerRef={labelHelpRef}
+                          headerContent={<div>Uniform Resource Identifier (URI)</div>}
+                          bodyContent={
+                            <div>
+                              The URI identifies where a resource, like a container image, lives (e.g.,{" "}
+                              {PLACEHOLDER_URI})
+                            </div>
+                          }
+                        >
+                          <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for URI field" />
+                        </Popover>
+                      }
+                      isRequired
+                      fieldId="uri"
+                    >
+                      <TextInput
+                        aria-label={`uri input field`}
+                        {...field}
+                        type="text"
+                        name="searchInput"
+                        id="uri"
+                        aria-describedby="uri-helper"
+                        aria-invalid={errors.searchInput ? "true" : "false"}
+                        placeholder={PLACEHOLDER_URI}
+                        validated={fieldState.invalid ? "error" : "default"}
+                      />
+                      {fieldState.invalid && (
+                        <FormHelperText>
+                          <HelperText>
+                            <HelperTextItem icon={<ExclamationCircleIcon />} variant={"error"}>
+                              {fieldState.invalid ? fieldState.error?.message : <span>A value is required</span>}
+                            </HelperTextItem>
+                          </HelperText>
+                        </FormHelperText>
+                      )}
+                    </FormGroup>
+                  )}
+                ></Controller>
+              </FlexItem>
+            </Flex>
+            <Flex
+              direction={{ default: "column" }}
+              alignSelf={{ default: "alignSelfFlexEnd" }}
+              flex={{ default: "flex_1" }}
+            >
+              <FlexItem>
+                <Button
+                  variant="primary"
+                  id="search-form-button"
+                  isBlock={true}
+                  isDisabled={isEmpty}
+                  type="submit"
+                  spinnerAriaLabel="Loading"
+                  spinnerAriaLabelledBy="search-form-button"
+                >
+                  Search
+                </Button>
+              </FlexItem>
+            </Flex>
+          </Flex>
+        </Form>
+      </PageSection>
+      <PageSection>
+        <LoadingWrapper isFetching={isFetchingArtifactMetadata} fetchError={fetchErrorArtifactMetadata ?? verifyError}>
+          {artifact && verification && <ArtifactResults artifact={artifact} verification={verification} />}
+        </LoadingWrapper>
+      </PageSection>
+    </Fragment>
+  );
+};
diff --git a/client/src/app/pages/Artifacts/components/ArtifactAttestationItem.tsx b/client/src/app/pages/Artifacts/components/ArtifactAttestationItem.tsx
new file mode 100644
index 0000000..fcf18b4
--- /dev/null
+++ b/client/src/app/pages/Artifacts/components/ArtifactAttestationItem.tsx
@@ -0,0 +1,139 @@
+import type { AttestationView } from "@app/queries/artifacts.view-model";
+import {
+  ClipboardCopy,
+  CodeBlock,
+  CodeBlockCode,
+  Content,
+  DataListAction,
+  DataListCell,
+  DataListContent,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  DataListToggle,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  Panel,
+  Timestamp,
+  TimestampTooltipVariant,
+  type MenuToggleElement,
+} from "@patternfly/react-core";
+import { useState } from "react";
+import { RekorEntryPanel } from "./RekorEntryPanel";
+import { relativeDateString } from "@app/utils/utils";
+import { EllipsisVIcon } from "@patternfly/react-icons";
+
+export const ArtifactAttestationItem = ({ attestation }: { attestation: AttestationView }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isActionsOpened, setActionsOpened] = useState(false);
+
+  const handleToggleAttestationItem = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const handleToggleActions = () => setActionsOpened(!isActionsOpened);
+
+  const handleActionSelect = () => {
+    // TODO: probably some logic there
+    setActionsOpened(false);
+  };
+
+  const key = attestation.digest.value.toString();
+
+  return (
+    <DataListItem aria-labelledby={`attestation-item-${key}`} isExpanded={isExpanded}>
+      <DataListItemRow>
+        <DataListToggle
+          onClick={handleToggleAttestationItem}
+          isExpanded={isExpanded}
+          id={`attestation-toggle-${key}`}
+          aria-controls={`attestation-expand-${key}`}
+        />
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="identity">
+              <span id={`att-identity-${key}`}>{attestation.subject ?? "Unknown subject"}</span>
+            </DataListCell>,
+            <DataListCell key="digest">
+              <ClipboardCopy
+                truncation={{ maxCharsDisplayed: 14 }}
+                hoverTip="Copy"
+                clickTip="Copied"
+                variant="inline-compact"
+                isCode
+              >
+                {`${attestation.digest.algorithm}:${attestation.digest.value}`}
+              </ClipboardCopy>
+            </DataListCell>,
+            <DataListCell key="attestationType">
+              {attestation.predicateType ?? attestation.kind ?? "Unknown"}
+            </DataListCell>,
+            <DataListCell key="timestamp">
+              {attestation.timestamp ? (
+                <Timestamp
+                  tooltip={{ variant: TimestampTooltipVariant.default }}
+                  date={new Date(attestation.timestamp)}
+                >
+                  {relativeDateString(new Date(attestation.timestamp))}
+                </Timestamp>
+              ) : (
+                "N/A"
+              )}
+            </DataListCell>,
+            <DataListCell style={{ whiteSpace: "nowrap" }} key="verificationStatus">
+              {`${attestation.status.verified ? "Attestation ✓" : "Attestation ✗"} / ${
+                attestation.status.rekor === "present" ? "Rekor ✓" : "Rekor ✗"
+              }`}
+            </DataListCell>,
+          ]}
+        />
+        <DataListAction
+          aria-labelledby={`attestation-item-${key} attestation-action-${key}`}
+          id={`attestation-action-${key}`}
+          aria-label="Actions"
+        >
+          <Dropdown
+            popperProps={{ position: "right" }}
+            onSelect={handleActionSelect}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                size="sm"
+                ref={toggleRef}
+                isExpanded={isActionsOpened}
+                onClick={handleToggleActions}
+                variant="plain"
+                aria-label="Attestation actions"
+                icon={<EllipsisVIcon />}
+              />
+            )}
+            isOpen={isActionsOpened}
+            onOpenChange={setActionsOpened}
+          >
+            <DropdownList>
+              <DropdownItem key="download bundle" isDisabled>
+                Download Bundle
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        </DataListAction>
+      </DataListItemRow>
+      <DataListContent aria-label="Attestation details" id={`attestation-expand-${key}`} isHidden={!isExpanded}>
+        <Panel>
+          <Content>
+            {/* <strong>Subject:</strong> {attestation.subject ?? "Unknown"}
+            <br />
+            <strong>Predicate type:</strong> {attestation.predicateType ?? "Unknown"}
+            <br /> */}
+            <CodeBlock>
+              <CodeBlockCode id={`attestation-predicate-${key}`}>
+                {attestation.digest.algorithm}:{attestation.digest.value}
+              </CodeBlockCode>
+            </CodeBlock>
+            <RekorEntryPanel rekorEntry={attestation.rekorEntry} />
+          </Content>
+        </Panel>
+      </DataListContent>
+    </DataListItem>
+  );
+};
diff --git a/client/src/app/pages/Artifacts/components/ArtifactResults.tsx b/client/src/app/pages/Artifacts/components/ArtifactResults.tsx
new file mode 100644
index 0000000..35a1bff
--- /dev/null
+++ b/client/src/app/pages/Artifacts/components/ArtifactResults.tsx
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import type { ImageMetadataResponse } from "@app/client";
+import type { ArtifactVerificationViewModel } from "@app/queries/artifacts.view-model";
+import {
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Content,
+  Flex,
+  FlexItem,
+  Label,
+  Panel,
+  Tab,
+  Tabs,
+  TabTitleText,
+} from "@patternfly/react-core";
+import { ArtifactResultsSummary } from "./ArtifactResultsSummary";
+import { ArtifactResultsSignatures } from "./ArtifactResultsSignatures";
+import { ArtifactResultsAttestations } from "./ArtifactResultsAttestations";
+import { verificationStatusToLabelColor } from "@app/utils/utils";
+
+export interface IArtifactResultsProps {
+  artifact: ImageMetadataResponse;
+  verification: ArtifactVerificationViewModel;
+}
+
+export const ArtifactResults = ({ artifact, verification }: IArtifactResultsProps) => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const { overallStatus } = verification.summary;
+  const { label: verificationLabel, color: verificationLabelColor } = verificationStatusToLabelColor(overallStatus);
+
+  const handleTabClick = (
+    _event: React.MouseEvent<unknown> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  return (
+    <div>
+      <p>Showing 1 of 1</p>
+      <Card style={{ overflowY: "hidden" }}>
+        <CardHeader>
+          <Content style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+            <Flex className="border">
+              <FlexItem>
+                Artifact: <Button variant="plain">{artifact.image}</Button>
+              </FlexItem>
+              <FlexItem align={{ default: "alignRight" }}>
+                <Label color={verificationLabelColor}>{verificationLabel}</Label>
+              </FlexItem>
+            </Flex>
+          </Content>
+        </CardHeader>
+        <CardBody>
+          <Panel>
+            {/** ARTIFACT RESULTS SUMMARY */}
+            <ArtifactResultsSummary artifact={artifact} verification={verification} />
+          </Panel>
+          <Panel>
+            <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Artifact results" role="region">
+              <Tab eventKey={0} title={<TabTitleText>Signatures</TabTitleText>} aria-label="Signatures">
+                {/** SIGNATURES */}
+                <ArtifactResultsSignatures signatures={verification.signatures} />
+              </Tab>
+              <Tab eventKey={1} title={<TabTitleText>Attestations</TabTitleText>} aria-label="Attestations">
+                {/** ATTESTATIONS */}
+                <ArtifactResultsAttestations attestations={verification.attestations} />
+              </Tab>
+            </Tabs>
+          </Panel>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
diff --git a/client/src/app/pages/Artifacts/components/ArtifactResultsAttestations.tsx b/client/src/app/pages/Artifacts/components/ArtifactResultsAttestations.tsx
new file mode 100644
index 0000000..15ecabd
--- /dev/null
+++ b/client/src/app/pages/Artifacts/components/ArtifactResultsAttestations.tsx
@@ -0,0 +1,16 @@
+import type { AttestationView } from "@app/queries/artifacts.view-model";
+import { ArtifactAttestationItem } from "./ArtifactAttestationItem";
+import { DataList } from "@patternfly/react-core";
+
+interface ArtifactResultsAttestationsProps {
+  attestations: AttestationView[];
+}
+
+export const ArtifactResultsAttestations = ({ attestations }: ArtifactResultsAttestationsProps) => {
+
+  return (
+    <DataList aria-label="Artifact attestations list" isCompact>
+      {attestations.map((attestation) => <ArtifactAttestationItem attestation={attestation} key={attestation.digest.value.toString()} />)}
+    </DataList>
+  );
+};
diff --git a/client/src/app/pages/Artifacts/components/ArtifactResultsSignatures.tsx b/client/src/app/pages/Artifacts/components/ArtifactResultsSignatures.tsx
new file mode 100644
index 0000000..0c177d2
--- /dev/null
+++ b/client/src/app/pages/Artifacts/components/ArtifactResultsSignatures.tsx
@@ -0,0 +1,13 @@
+import { DataList } from "@patternfly/react-core";
+import { ArtifactSignatureItem } from "./ArtifactSignatureItem";
+import type { SignatureView } from "@app/queries/artifacts.view-model";
+
+export const ArtifactResultsSignatures = ({ signatures }: { signatures?: SignatureView[] }) => {
+  return (
+    <DataList aria-label="Signatures list" isCompact>
+      {signatures?.map((signature: SignatureView) => (
+        <ArtifactSignatureItem signature={signature} key={signature.hash.value.toString()} />
+      ))}
+    </DataList>
+  );
+};
diff --git a/client/src/app/pages/Artifacts/components/ArtifactResultsSummary.tsx b/client/src/app/pages/Artifacts/components/ArtifactResultsSummary.tsx
new file mode 100644
index 0000000..5b60e12
--- /dev/null
+++ b/client/src/app/pages/Artifacts/components/ArtifactResultsSummary.tsx
@@ -0,0 +1,131 @@
+import { formatDate } from "@app/utils/utils";
+import MultiContentCard from "@patternfly/react-component-groups/dist/esm/MultiContentCard";
+import {
+  Card,
+  CardBody,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTermHelpText,
+  Popover,
+  DescriptionListTermHelpTextButton,
+  DescriptionListDescription,
+  ClipboardCopy,
+  Button,
+  Label,
+} from "@patternfly/react-core";
+import { PlusCircleIcon } from "@patternfly/react-icons";
+import type { IArtifactResultsProps } from "./ArtifactResults";
+
+export const ArtifactResultsSummary = ({ artifact, verification }: IArtifactResultsProps) => {
+  const { summary } = verification;
+  const identities = summary.identities ?? [];
+  const timeCoherence = summary.timeCoherence;
+
+  const summaryCards = [
+    <Card key="artifact-summary" isPlain>
+      <CardBody>
+        <DescriptionList aria-label="Digest help text" isCompact isHorizontal columnModifier={{ default: "2Col" }}>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>
+              <Popover headerContent={<div>Digest</div>} bodyContent={<div>ref + resolved canonical digest</div>}>
+                <DescriptionListTermHelpTextButton> Digest </DescriptionListTermHelpTextButton>
+              </Popover>
+            </DescriptionListTermHelpText>
+            <DescriptionListDescription>
+              <ClipboardCopy
+                truncation={{ maxCharsDisplayed: 14 }}
+                hoverTip="Copy"
+                clickTip="Copied"
+                variant="inline-compact"
+                isCode
+              >
+                {artifact.digest}
+              </ClipboardCopy>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>Media Type</DescriptionListTermHelpText>
+            <DescriptionListDescription>{artifact.metadata.mediaType}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>Size</DescriptionListTermHelpText>
+            <DescriptionListDescription>{artifact.metadata.size}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>Created</DescriptionListTermHelpText>
+            <DescriptionListDescription>{formatDate(artifact.metadata.created)}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>Labels</DescriptionListTermHelpText>
+            <DescriptionListDescription>
+              <Button variant="link" isInline icon={<PlusCircleIcon />}>
+                {artifact.metadata.labels?.maintainer}
+              </Button>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>
+              <Popover
+                headerContent={<div>Identities</div>}
+                bodyContent={<div>Deduped list of signature identities used</div>}
+              >
+                <DescriptionListTermHelpTextButton> Identities </DescriptionListTermHelpTextButton>
+              </Popover>
+            </DescriptionListTermHelpText>
+            <DescriptionListDescription>
+              {identities.map((identity) => (
+                <>
+                  <Label key={identity.id} isCompact>
+                    {identity.value}
+                  </Label>{" "}
+                </>
+              ))}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>Signatures</DescriptionListTermHelpText>
+            <DescriptionListDescription>{summary.signatureCount} Signatures</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>
+              <Popover
+                headerContent={<div>Attestation</div>}
+                bodyContent={
+                  <div>
+                    An attestation is a signed document (usually in in-toto format) that describes an event, action, or
+                    property related to a software artifact.
+                  </div>
+                }
+              >
+                <DescriptionListTermHelpTextButton> Attestations </DescriptionListTermHelpTextButton>
+              </Popover>
+            </DescriptionListTermHelpText>
+            <DescriptionListDescription>{summary.attestationCount} Attestations</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>
+              <Popover headerContent={<div>Rekor Entries</div>} bodyContent={<div>A signed document</div>}>
+                <DescriptionListTermHelpTextButton> Rekor Entries </DescriptionListTermHelpTextButton>
+              </Popover>
+            </DescriptionListTermHelpText>
+            <DescriptionListDescription>{summary.rekorEntryCount} Rekor Entries</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTermHelpText>
+              <Popover headerContent={<div>Time Coherence</div>} bodyContent={<div>min/max integratedTime</div>}>
+                <DescriptionListTermHelpTextButton> Time Coherence </DescriptionListTermHelpTextButton>
+              </Popover>
+            </DescriptionListTermHelpText>
+            <DescriptionListDescription>
+              {timeCoherence.status === "ok"
+                ? `OK (${formatDate(timeCoherence.minIntegratedTime)} – ${formatDate(timeCoherence.maxIntegratedTime)})`
+                : timeCoherence.status}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </CardBody>
+    </Card>,
+  ];
+
+  return <MultiContentCard cards={summaryCards} />;
+};
diff --git a/client/src/app/pages/Artifacts/components/ArtifactSignatureItem.tsx b/client/src/app/pages/Artifacts/components/ArtifactSignatureItem.tsx
new file mode 100644
index 0000000..145abcc
--- /dev/null
+++ b/client/src/app/pages/Artifacts/components/ArtifactSignatureItem.tsx
@@ -0,0 +1,168 @@
+import {
+  Content,
+  DataListItem,
+  DataListItemRow,
+  DataListToggle,
+  DataListItemCells,
+  DataListCell,
+  ClipboardCopy,
+  DataListAction,
+  Dropdown,
+  type MenuToggleElement,
+  MenuToggle,
+  DropdownList,
+  DropdownItem,
+  DataListContent,
+  CodeBlock,
+  CodeBlockCode,
+  Panel,
+  CodeBlockAction,
+  ClipboardCopyButton,
+  Timestamp,
+  TimestampTooltipVariant,
+  TreeView,
+} from "@patternfly/react-core";
+import { EllipsisVIcon } from "@patternfly/react-icons";
+import { useState } from "react";
+import type { SignatureView } from "@app/queries/artifacts.view-model";
+import { buildCertificateTree } from "../utils/helpers";
+import { relativeDateString } from "@app/utils/utils";
+import { RekorEntryPanel } from "./RekorEntryPanel";
+
+export const ArtifactSignatureItem = ({ signature }: { signature: SignatureView }) => {
+  const [isActionsOpened, setActionsOpened] = useState(false);
+  const [codeCopiedIndex, setCodeCopiedIndex] = useState<string | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const key = signature.hash.value.toString();
+
+  const handleToggleSignatureItem = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const handleToggleActions = () => setActionsOpened(!isActionsOpened);
+
+  const handleActionSelect = () => {
+    // TODO: probably some logic there
+    setActionsOpened(false);
+  };
+
+  const handleCopyCode = (code: string, id: string) => {
+    void navigator.clipboard.writeText(code.toString());
+    setCodeCopiedIndex(id);
+  };
+
+  const getSharedCodeBlockActions = (code: string, id: string) => (
+    <>
+      <CodeBlockAction>
+        <ClipboardCopyButton
+          id="basic-copy-button"
+          textId="code-content"
+          aria-label="Copy PEM to clipboard"
+          onClick={() => handleCopyCode(code, id)}
+          exitDelay={codeCopiedIndex === id ? 1500 : 600}
+          maxWidth="110px"
+          variant="plain"
+          onTooltipHidden={() => setCodeCopiedIndex(null)}
+        >
+          {codeCopiedIndex === id ? "Successfully copied PEM to clipboard!" : "Copy PEM to clipboard"}
+        </ClipboardCopyButton>
+      </CodeBlockAction>
+    </>
+  );
+
+  const displayIdentity = signature.identity.san ?? "Unknown identity";
+  const digestDisplay = `${signature.hash.algorithm}:${signature.hash.value}`;
+  const signatureStatusBadge = signature.status.signature === "verified" ? "Signature ✓" : "Signature ✗";
+  const rekorStatusBadge = signature.status.rekor === "present" ? "Rekor ✓" : "Rekor ✗";
+  const chainStatusBadge = signature.status.chain === "valid" ? "Chain ✓" : "Chain ✗";
+  const verificationStatusDisplay = `${signatureStatusBadge} / ${rekorStatusBadge} / ${chainStatusBadge}`;
+
+  return (
+    <DataListItem aria-labelledby="signature-item-1" key="sig-1" isExpanded={isExpanded}>
+      <DataListItemRow>
+        <DataListToggle
+          onClick={handleToggleSignatureItem}
+          isExpanded={isExpanded}
+          id={`signature-toggle-${key}`}
+          aria-controls={`sig-expand-${key}`}
+        />
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="identity">
+              <span id="compact-item1">{displayIdentity}</span>
+            </DataListCell>,
+            <DataListCell key="digest">
+              <ClipboardCopy
+                truncation={{ maxCharsDisplayed: 14 }}
+                hoverTip="Copy"
+                clickTip="Copied"
+                variant="inline-compact"
+                isCode
+              >
+                {digestDisplay}
+              </ClipboardCopy>
+            </DataListCell>,
+            <DataListCell key="signatureType">{signature.kind}</DataListCell>,
+            <DataListCell key="integratedTime">
+              {signature.timestamp ? (
+                <Timestamp tooltip={{ variant: TimestampTooltipVariant.default }} date={new Date(signature.timestamp)}>
+                  {relativeDateString(new Date(signature.timestamp))}
+                </Timestamp>
+              ) : (
+                "N/A"
+              )}
+            </DataListCell>,
+            <DataListCell style={{ whiteSpace: "nowrap" }} key="verificationStatus">
+              {verificationStatusDisplay}
+            </DataListCell>,
+          ]}
+        />
+        <DataListAction
+          aria-labelledby={`signature-item-${key} signature-action-${key}`}
+          id={`signature-action-${key}`}
+          aria-label="Actions"
+        >
+          <Dropdown
+            popperProps={{ position: "right" }}
+            onSelect={handleActionSelect}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                size="sm"
+                ref={toggleRef}
+                isExpanded={isActionsOpened}
+                onClick={handleToggleActions}
+                variant="plain"
+                aria-label="Signature actions"
+                icon={<EllipsisVIcon />}
+              />
+            )}
+            isOpen={isActionsOpened}
+            onOpenChange={setActionsOpened}
+          >
+            <DropdownList>
+              <DropdownItem key="download bundle" isDisabled>
+                Download Bundle
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        </DataListAction>
+      </DataListItemRow>
+      <DataListContent aria-label="Signature expandable content details" id="sig-expand1" isHidden={!isExpanded}>
+        <CodeBlock actions={getSharedCodeBlockActions(signature.hash.value, "signature-code")}>
+          <CodeBlockCode id="code-content">{signature.hash.value}</CodeBlockCode>
+        </CodeBlock>
+        <Panel>
+          <Content>Certificate Chain</Content>
+          <TreeView
+            hasAnimations
+            hasGuides
+            aria-label="Certificate chain"
+            data={buildCertificateTree(signature.certificateChain)}
+          />
+        </Panel>
+        <RekorEntryPanel rekorEntry={signature.rekorEntry} />
+      </DataListContent>
+    </DataListItem>
+  );
+};
diff --git a/client/src/app/pages/Artifacts/components/RekorEntryPanel.tsx b/client/src/app/pages/Artifacts/components/RekorEntryPanel.tsx
new file mode 100644
index 0000000..adf0deb
--- /dev/null
+++ b/client/src/app/pages/Artifacts/components/RekorEntryPanel.tsx
@@ -0,0 +1,35 @@
+import type { RekorEntry } from "@app/client";
+import { Button, CodeBlock, CodeBlockAction, CodeBlockCode, Content, Panel } from "@patternfly/react-core";
+import { ExternalLinkAltIcon } from "@patternfly/react-icons";
+
+export const RekorEntryPanel = ({ rekorEntry }: { rekorEntry: RekorEntry | undefined }) => {
+  const rekorEntryLabel = rekorEntry ? `Entry #${rekorEntry.logIndex} (UUID ${rekorEntry.uuid})` : "No Rekor entry";
+
+  const codeBlockActions = rekorEntry ? (
+    <>
+      <CodeBlockAction>
+        <Button
+          component="a"
+          variant="link"
+          href={`/rekor-search?uuid=${rekorEntry.uuid}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          icon={<ExternalLinkAltIcon />}
+          iconPosition="right"
+          aria-label={`rekorlink`}
+        >
+          Open in Rekor Search
+        </Button>
+      </CodeBlockAction>
+    </>
+  ) : null;
+
+  return (
+    <Panel>
+      <Content>Rekor Entry</Content>
+      <CodeBlock actions={codeBlockActions}>
+        <CodeBlockCode id="code-content">{rekorEntryLabel}</CodeBlockCode>
+      </CodeBlock>
+    </Panel>
+  );
+};
diff --git a/client/src/app/pages/Artifacts/index.ts b/client/src/app/pages/Artifacts/index.ts
new file mode 100644
index 0000000..bb4404f
--- /dev/null
+++ b/client/src/app/pages/Artifacts/index.ts
@@ -0,0 +1 @@
+export { Artifacts as default } from "./Artifacts";
diff --git a/client/src/app/pages/Artifacts/utils/helpers.ts b/client/src/app/pages/Artifacts/utils/helpers.ts
new file mode 100644
index 0000000..5ab5518
--- /dev/null
+++ b/client/src/app/pages/Artifacts/utils/helpers.ts
@@ -0,0 +1,39 @@
+import type { ParsedCertificate } from "@app/queries/artifacts.view-model";
+import type { TreeViewDataItem } from "@patternfly/react-core";
+
+export function buildCertificateTree(certificateChain: ParsedCertificate[]): TreeViewDataItem[] {
+  return certificateChain.map((cert, index) => {
+    const baseId = `cert-${index}`;
+
+    return {
+      id: baseId,
+      name: cert.role,
+      children: [
+        { id: `${baseId}-subject`, name: `subject: ${cert.subject}` },
+        { id: `${baseId}-issuer`, name: `issuer: ${cert.issuer}` },
+        { id: `${baseId}-notBefore`, name: `notBefore: ${cert.notBefore}` },
+        { id: `${baseId}-notAfter`, name: `notAfter: ${cert.notAfter}` },
+        { id: `${baseId}-isCa`, name: `isCa: ${cert.isCa}` },
+        { id: `${baseId}-serial`, name: `serialNumber: ${cert.serialNumber}` },
+        {
+          id: `${baseId}-sans`,
+          name: "sans",
+          children: cert.sans.map((san, i) => ({
+            id: `${baseId}-sans-${i}`,
+            name: san,
+          })),
+        },
+        {
+          id: `${baseId}-pem`,
+          name: "pem",
+          children: [
+            {
+              id: `${baseId}-pem-text`,
+              name: cert.pem,
+            },
+          ],
+        },
+      ],
+    };
+  });
+}
diff --git a/client/src/app/pages/RekorSearch/components/HashedRekord.tsx b/client/src/app/pages/RekorSearch/components/HashedRekord.tsx
index 3f17a50..c11fc3e 100644
--- a/client/src/app/pages/RekorSearch/components/HashedRekord.tsx
+++ b/client/src/app/pages/RekorSearch/components/HashedRekord.tsx
@@ -1,7 +1,8 @@
+import type { PrismTheme } from "types/prism-theme";
 import { dump } from "js-yaml";
 import { Link } from "react-router-dom";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import SyntaxHighlighter from "react-syntax-highlighter/dist/esm/prism";
+import { atomDark as darkTheme } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { type RekorSchema } from "rekor";
 import { decodex509 } from "../x509/decode";
 import { Panel } from "@patternfly/react-core";
@@ -34,17 +35,17 @@ export function HashedRekordViewer({ hashedRekord }: { hashedRekord: RekorSchema
           Hash
         </Link>
       </h5>
-      <SyntaxHighlighter language="text" style={atomDark}>
+      <SyntaxHighlighter language="text" style={darkTheme as unknown as PrismTheme}>
         {`${hashedRekord.data.hash?.algorithm}:${hashedRekord.data.hash?.value}`}
       </SyntaxHighlighter>
 
       <h5 style={{ margin: "1em auto" }}>Signature</h5>
-      <SyntaxHighlighter language="text" style={atomDark}>
+      <SyntaxHighlighter language="text" style={darkTheme as unknown as PrismTheme}>
         {hashedRekord.signature.content ?? ""}
       </SyntaxHighlighter>
 
       <h5 style={{ margin: "1em auto" }}>{publicKey.title}</h5>
-      <SyntaxHighlighter language="yaml" style={atomDark}>
+      <SyntaxHighlighter language="yaml" style={darkTheme as unknown as PrismTheme}>
         {publicKey.content}
       </SyntaxHighlighter>
     </Panel>
diff --git a/client/src/app/queries/artifacts.ts b/client/src/app/queries/artifacts.ts
new file mode 100644
index 0000000..6c9c44f
--- /dev/null
+++ b/client/src/app/queries/artifacts.ts
@@ -0,0 +1,89 @@
+import type { AxiosError } from "axios";
+import { client } from "@app/axios-config/apiInit";
+import {
+  getApiV1ArtifactsImage,
+  type _Error,
+  type ImageMetadataResponse,
+  postApiV1ArtifactsVerify,
+  type VerifyArtifactRequest,
+} from "@app/client";
+import { useMockableQuery } from "./helpers";
+import { artifactsImageDataMock, artifactVerificationViewModelMock } from "./mocks/artifacts.mock";
+import type { ArtifactVerificationViewModel } from "@app/queries/artifacts.view-model";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { deriveOverallVerificationStatus } from "@app/utils/utils";
+
+export const ArtifactsKeys = {
+  all: ["Artifacts" as const],
+  image: (uri: string) => ["Artifacts", "image", uri] as const,
+  verify: (id: string | number) => ["Artifacts", "verify", id] as const,
+};
+
+export const useFetchArtifactsImageData = ({ uri }: { uri: string | null | undefined }) => {
+  const enabled = typeof uri === "string" && uri.trim().length > 0;
+  const { data, isLoading, error, refetch } = useMockableQuery<ImageMetadataResponse | null, AxiosError<_Error>>(
+    {
+      queryKey: ArtifactsKeys.image(uri ?? ""),
+      queryFn: async () => {
+        const response = await getApiV1ArtifactsImage({ client, query: { uri: uri! } });
+        return response.data ?? null;
+      },
+      // only run when we have a string
+      enabled,
+      refetchOnWindowFocus: false,
+    },
+    artifactsImageDataMock
+  );
+
+  return { artifact: data, isFetching: isLoading, fetchError: error, refetch };
+};
+
+// Variables accepted by the verify mutation. This represents the data we send to the
+// backend (request), which is separate from the view-model we use for rendering
+// (ArtifactVerificationViewModel).
+interface IVerifyArtifactVariables {
+  uri: string;
+  expectedSAN?: string | null;
+}
+
+export const useVerifyArtifact = () => {
+  const queryClient = useQueryClient();
+
+  // NOTE:
+  // - TData: ArtifactVerificationViewModel   → what the UI consumes
+  // - TError: AxiosError<_Error>             → error shape from the SDK
+  // - TVariables: IVerifyArtifactVariables   → what the caller passes in (uri, expectedSAN, etc.)
+  return useMutation<ArtifactVerificationViewModel, AxiosError<_Error>, IVerifyArtifactVariables>({
+    mutationFn: async ({ uri, expectedSAN }: IVerifyArtifactVariables) => {
+      // for now, the backend still returns VerifyArtifactResponse, not the full
+      // ArtifactVerificationViewModel. We keep calling the SDK so wiring is in place,
+      // but we return the locally defined view-model mock until the API contract is
+      // updated and we can map the response into the view-model shape.
+      const body: VerifyArtifactRequest = {
+        expectedSAN: expectedSAN ?? null,
+        // TEMP: accept any issuer
+        expectedOIDIssuerRegex: ".*",
+        ociImage: uri,
+      };
+
+      await postApiV1ArtifactsVerify({
+        client,
+        body,
+      });
+
+      const baseVm = artifactVerificationViewModelMock;
+      const overallStatus = deriveOverallVerificationStatus(baseVm);
+
+      return {
+        ...baseVm,
+        summary: {
+          ...baseVm.summary,
+          overallStatus,
+        },
+      };
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ArtifactsKeys.all });
+    },
+  });
+};
diff --git a/client/src/app/queries/artifacts.view-model.ts b/client/src/app/queries/artifacts.view-model.ts
new file mode 100644
index 0000000..3e3998c
--- /dev/null
+++ b/client/src/app/queries/artifacts.view-model.ts
@@ -0,0 +1,103 @@
+import type { ImageMetadataResponse } from "@app/client";
+
+// View-model types for the Artifacts designs. These sit on top of the raw API types
+// and represent exactly what the UI needs to render the artifact, signatures,
+// certificate chain, attestations, and Rekor entries.
+
+export interface ArtifactIdentity {
+  id: string;
+  type: "email" | "oidc-issuer" | "other";
+  value: string;
+  source: "san" | "issuer" | "other";
+  issuer?: string;
+}
+
+export interface TimeCoherenceSummary {
+  status: "ok" | "warning" | "error" | "unknown";
+  minIntegratedTime?: string; // ISO string
+  maxIntegratedTime?: string; // ISO string
+}
+
+export type ArtifactOverallStatus = "verified" | "partially-verified" | "failed" | "unsigned" | "error" | "unknown";
+
+export interface ArtifactSummaryView {
+  identities: ArtifactIdentity[];
+  signatureCount: number;
+  attestationCount: number;
+  rekorEntryCount: number;
+  timeCoherence: TimeCoherenceSummary;
+  overallStatus: ArtifactOverallStatus;
+}
+
+export type CertificateRole = "leaf" | "intermediate" | "root";
+
+export interface ParsedCertificate {
+  role: CertificateRole;
+  subject: string;
+  issuer: string;
+  notBefore: string; // ISO string
+  notAfter: string; // ISO string
+  sans: string[];
+  serialNumber?: string;
+  isCa: boolean;
+  pem: string;
+}
+
+export type SignatureVerificationStatus = "verified" | "invalid" | "unverifiable" | "unknown";
+
+export interface SignatureStatus {
+  signature: SignatureVerificationStatus;
+  rekor: "present" | "missing" | "unknown";
+  chain: "valid" | "invalid" | "partial" | "unknown";
+}
+
+export interface HashSummary {
+  algorithm: string;
+  value: string;
+}
+
+export interface SignatureView {
+  id: string;
+  kind: "hashedrekord" | "other";
+  identity: {
+    san?: string;
+    issuer?: string;
+    issuerType?: string;
+  };
+  hash: HashSummary;
+  timestamp?: string; // ISO string for "x minutes ago" display
+  status: SignatureStatus;
+  certificateChain: ParsedCertificate[];
+  // a single Rekor entry associated with this signature, once the backend
+  // is updated to include it alongside the signature.
+  rekorEntry?: import("@app/client").RekorEntry;
+  rawBundleJson?: unknown; // or a typed SigstoreBundle
+}
+
+export interface AttestationStatus {
+  verified: boolean;
+  rekor: "present" | "missing" | "unknown";
+}
+
+export interface AttestationView {
+  id: string;
+  kind: "intoto" | "other";
+  predicateType?: string;
+  digest: HashSummary;
+  subject?: string;
+  issuer?: string;
+  timestamp?: string; // ISO string
+  status: AttestationStatus;
+  rekorEntry?: import("@app/client").RekorEntry;
+  rawStatementJson?: unknown;
+  rawBundleJson?: unknown;
+}
+
+// high-level view model returned by the verification endpoint once it
+// is extended to include structured signature/attestation/rekor data.
+export interface ArtifactVerificationViewModel {
+  artifact: ImageMetadataResponse;
+  summary: ArtifactSummaryView;
+  signatures: SignatureView[];
+  attestations: AttestationView[];
+}
diff --git a/client/src/app/queries/mocks/artifacts.mock.ts b/client/src/app/queries/mocks/artifacts.mock.ts
new file mode 100644
index 0000000..694e77d
--- /dev/null
+++ b/client/src/app/queries/mocks/artifacts.mock.ts
@@ -0,0 +1,350 @@
+import type { ImageMetadataResponse, Metadata, VerifyArtifactResponse } from "@app/client";
+import type { ArtifactVerificationViewModel } from "@app/queries/artifacts.view-model";
+
+export const artifactsImageDataMock: ImageMetadataResponse = {
+  image: "ttl.sh/rhtas/test-image:1h",
+
+  // container image metadata
+  metadata: {
+    created: "2025-11-06T08:58:50.271117116Z",
+
+    // media type of the container image (e.g., OCI manifest type)
+    mediaType: "application/vnd.oci.image.manifest.v1+json",
+
+    // size of container image
+    size: 414,
+
+    // key-value labels or annotations associated with image
+    labels: {
+      "io.buildah.version": "1.41.5",
+    },
+  } as Metadata,
+  // container image's digest
+  digest: "sha256:dcb43136e08351ec346aacd6b7b5b4d12eb84f7151f180a3eb2a4d4a17b25bc2",
+};
+
+// draft view-model mock that matches the Artifacts designs. This is *not* what the
+// API returns today, but represents the desired shape for the UI.
+export const artifactVerificationViewModelMock: ArtifactVerificationViewModel = {
+  artifact: artifactsImageDataMock,
+  summary: {
+    identities: [
+      {
+        id: "builder-email",
+        type: "email",
+        value: "builder@example.com",
+        source: "san",
+        issuer: "https://token.actions.githubusercontent.com",
+      },
+      {
+        id: "github-oidc",
+        type: "oidc-issuer",
+        value: "GitHub OIDC",
+        source: "issuer",
+        issuer: "https://token.actions.githubusercontent.com",
+      },
+      {
+        id: "release-email",
+        type: "email",
+        value: "release@example.com",
+        source: "san",
+        issuer: "https://token.actions.githubusercontent.com",
+      },
+    ],
+    signatureCount: 2,
+    attestationCount: 2,
+    rekorEntryCount: 4,
+    timeCoherence: {
+      status: "ok",
+      minIntegratedTime: "2025-11-06T08:59:07Z",
+      maxIntegratedTime: "2025-11-06T09:09:07Z",
+    },
+    overallStatus: "unknown",
+  },
+  signatures: [
+    {
+      id: "sig-0",
+      kind: "hashedrekord",
+      identity: {
+        san: "ryordan@redhat.com",
+        issuer: "https://token.actions.githubusercontent.com",
+        issuerType: "github-oidc",
+      },
+      hash: {
+        algorithm: "sha256",
+        value: "571e79e17938efb4b8459da79453fe4019ae11374af1155a8fa9972a7f1b93c2",
+      },
+      timestamp: "2025-11-06T08:59:07Z",
+      status: {
+        signature: "verified",
+        rekor: "present",
+        chain: "valid",
+      },
+      certificateChain: [
+        {
+          role: "leaf",
+          subject: "CN=ryordan@redhat.com,O=sigstore.dev",
+          issuer: "CN=sigstore-intermediate,O=sigstore.dev",
+          notBefore: "2025-11-06T08:59:07Z",
+          notAfter: "2025-11-06T09:09:07Z",
+          sans: ["ryordan@redhat.com"],
+          serialNumber: "59:72:f4:57:e5:53:bc:5f:bd:ef:34:9c:94:73:82:b5:8d:1b:60:75",
+          isCa: false,
+          pem: "-----BEGIN CERTIFICATE-----\nMIICLEAFCERT...sig0-leaf...\n-----END CERTIFICATE-----\n",
+        },
+        {
+          role: "intermediate",
+          subject: "CN=sigstore-intermediate,O=sigstore.dev",
+          issuer: "CN=sigstore,O=sigstore.dev",
+          notBefore: "2025-11-06T08:59:07Z",
+          notAfter: "2025-11-06T09:09:07Z",
+          sans: [],
+          serialNumber: "59:72:f4:57:e5:53:bc:5f:bd:ef:34:9c:94:73:82:b5:8d:1b:60:75",
+          isCa: true,
+          pem: "-----BEGIN CERTIFICATE-----\nMIICINTERMEDIATECERT...sig0-int...\n-----END CERTIFICATE-----\n",
+        },
+        {
+          role: "root",
+          subject: "CN=sigstore,O=sigstore.dev",
+          issuer: "CN=sigstore,O=sigstore.dev",
+          notBefore: "2025-11-06T08:59:07Z",
+          notAfter: "2025-11-06T09:09:07Z",
+          sans: [],
+          serialNumber: "59:72:f4:57:e5:53:bc:5f:bd:ef:34:9c:94:73:82:b5:8d:1b:60:75",
+          isCa: true,
+          pem: "-----BEGIN CERTIFICATE-----\nMIICROOTCERT...sig0-root...\n-----END CERTIFICATE-----\n",
+        },
+      ],
+      rekorEntry: {
+        uuid: "sig-0-uuid-1234",
+        body: "BASE64_BODY_SIG0",
+        integratedTime: 1730883547,
+        logID: "d4c1a7f2-0000-0000-0000-000000000000",
+        logIndex: 1234,
+        verification: {
+          inclusionProof: {
+            checkpoint: "rekor.sigstore.dev - 123456",
+            hashes: ["abc", "def"],
+            logIndex: 1234,
+            rootHash: "cafebabe",
+            treeSize: 987654,
+          },
+          signedEntryTimestamp: "BASE64_SET_SIG0",
+        },
+      },
+    },
+    {
+      id: "sig-1",
+      kind: "hashedrekord",
+      identity: {
+        san: "release@redhat.com",
+        issuer: "https://token.actions.githubusercontent.com",
+        issuerType: "github-oidc",
+      },
+      hash: {
+        algorithm: "sha256",
+        value: "aa7b9c0d17938efb4b8459da79453fe4019ae11374af1155a8fa9972a7f1b93c2",
+      },
+      timestamp: "2025-11-06T09:05:00Z",
+      status: {
+        signature: "verified",
+        rekor: "present",
+        chain: "valid",
+      },
+      certificateChain: [
+        {
+          role: "leaf",
+          subject: "CN=release@redhat.com,O=sigstore.dev",
+          issuer: "CN=sigstore-intermediate,O=sigstore.dev",
+          notBefore: "2025-11-06T09:00:00Z",
+          notAfter: "2025-11-06T09:10:00Z",
+          sans: ["release@redhat.com"],
+          serialNumber: "aa:bb:cc:dd:ee:ff",
+          isCa: false,
+          pem: "-----BEGIN CERTIFICATE-----\nMIICLEAFCERT...sig1-leaf...\n-----END CERTIFICATE-----\n",
+        },
+        {
+          role: "intermediate",
+          subject: "CN=sigstore-intermediate,O=sigstore.dev",
+          issuer: "CN=sigstore,O=sigstore.dev",
+          notBefore: "2025-11-06T09:00:00Z",
+          notAfter: "2025-11-06T09:10:00Z",
+          sans: [],
+          serialNumber: "aa:bb:cc:dd:ee:ff",
+          isCa: true,
+          pem: "-----BEGIN CERTIFICATE-----\nMIICINTERMEDIATECERT...sig1-int...\n-----END CERTIFICATE-----\n",
+        },
+        {
+          role: "root",
+          subject: "CN=sigstore,O=sigstore.dev",
+          issuer: "CN=sigstore,O=sigstore.dev",
+          notBefore: "2025-11-06T09:00:00Z",
+          notAfter: "2025-11-06T09:10:00Z",
+          sans: [],
+          serialNumber: "aa:bb:cc:dd:ee:ff",
+          isCa: true,
+          pem: "-----BEGIN CERTIFICATE-----\nMIICROOTCERT...sig1-root...\n-----END CERTIFICATE-----\n",
+        },
+      ],
+      rekorEntry: {
+        uuid: "sig-1-uuid-5678",
+        body: "BASE64_BODY_SIG1",
+        integratedTime: 1730883600,
+        logID: "d4c1a7f2-0000-0000-0000-000000000000",
+        logIndex: 1235,
+        verification: {
+          inclusionProof: {
+            checkpoint: "rekor.sigstore.dev - 123457",
+            hashes: ["ghi", "jkl"],
+            logIndex: 1235,
+            rootHash: "deadbeef",
+            treeSize: 987655,
+          },
+          signedEntryTimestamp: "BASE64_SET_SIG1",
+        },
+      },
+    },
+  ],
+  attestations: [
+    {
+      id: "att-0",
+      kind: "intoto",
+      predicateType: "https://slsa.dev/provenance/v1",
+      digest: {
+        algorithm: "sha256",
+        value: "65738dc1b314fe7e0bb369cb9e596024dcdb2256a4dc29d6a268c2a03eff9181",
+      },
+      subject: artifactsImageDataMock.image,
+      issuer: "https://token.actions.githubusercontent.com",
+      timestamp: "2025-11-06T09:00:00Z",
+      status: {
+        verified: true,
+        rekor: "present",
+      },
+      rekorEntry: {
+        uuid: "att-0-uuid-1111",
+        body: "BASE64_BODY_ATT0",
+        integratedTime: 1730883660,
+        logID: "d4c1a7f2-0000-0000-0000-000000000000",
+        logIndex: 2234,
+        verification: {
+          inclusionProof: {
+            checkpoint: "rekor.sigstore.dev - 223456",
+            hashes: ["att0a", "att0b"],
+            logIndex: 2234,
+            rootHash: "facefeed",
+            treeSize: 123456,
+          },
+          signedEntryTimestamp: "BASE64_SET_ATT0",
+        },
+      },
+    },
+    {
+      id: "att-1",
+      kind: "intoto",
+      predicateType: "https://slsa.dev/provenance/v1",
+      digest: {
+        algorithm: "sha256",
+        value: "65738dc1b314fe7e0bb369cb9e596024dcdb2256a4dc29d6a268c2a03eff9181",
+      },
+      subject: artifactsImageDataMock.image,
+      issuer: "https://token.actions.githubusercontent.com",
+      timestamp: "2025-11-06T09:03:00Z",
+      status: {
+        verified: true,
+        rekor: "present",
+      },
+      rekorEntry: {
+        uuid: "att-1-uuid-2222",
+        body: "BASE64_BODY_ATT1",
+        integratedTime: 1730883720,
+        logID: "d4c1a7f2-0000-0000-0000-000000000000",
+        logIndex: 2235,
+        verification: {
+          inclusionProof: {
+            checkpoint: "rekor.sigstore.dev - 223457",
+            hashes: ["att1a", "att1b"],
+            logIndex: 2235,
+            rootHash: "beadfeed",
+            treeSize: 123457,
+          },
+          signedEntryTimestamp: "BASE64_SET_ATT1",
+        },
+      },
+    },
+  ],
+};
+
+export const artifactsVerificationInvalidMock: VerifyArtifactResponse = {
+  verified: false,
+  details: {
+    reason: "Signature verification failed",
+    errorCode: "SIGNATURE_INVALID",
+  },
+};
+
+export const artifactVerificationViewModelInvalidMock: ArtifactVerificationViewModel = {
+  artifact: artifactsImageDataMock,
+  summary: {
+    identities: [
+      {
+        id: "invalid-email",
+        type: "email",
+        value: "invalid@example.com",
+        source: "san",
+        issuer: "https://token.actions.githubusercontent.com",
+      },
+    ],
+    signatureCount: 1,
+    attestationCount: 1,
+    rekorEntryCount: 0,
+    timeCoherence: {
+      status: "error",
+      minIntegratedTime: undefined,
+      maxIntegratedTime: undefined,
+    },
+    overallStatus: "verified",
+  },
+  signatures: [
+    {
+      id: "sig-invalid-0",
+      kind: "hashedrekord",
+      identity: {
+        san: "invalid@example.com",
+        issuer: "https://token.actions.githubusercontent.com",
+        issuerType: "github-oidc",
+      },
+      hash: {
+        algorithm: "sha256",
+        value: "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
+      },
+      timestamp: "2025-11-06T10:00:00Z",
+      status: {
+        signature: "invalid",
+        rekor: "missing",
+        chain: "invalid",
+      },
+      certificateChain: [],
+      rekorEntry: undefined,
+    },
+  ],
+  attestations: [
+    {
+      id: "att-invalid-0",
+      kind: "intoto",
+      predicateType: "https://slsa.dev/provenance/v1",
+      digest: {
+        algorithm: "sha256",
+        value: "0000000000000000000000000000000000000000000000000000000000000000",
+      },
+      subject: artifactsImageDataMock.image,
+      issuer: "https://token.actions.githubusercontent.com",
+      timestamp: "2025-11-06T10:05:00Z",
+      status: {
+        verified: false,
+        rekor: "missing",
+      },
+      rekorEntry: undefined,
+    },
+  ],
+};
diff --git a/client/src/app/utils/utils.ts b/client/src/app/utils/utils.ts
index 34d5516..93d7fc1 100644
--- a/client/src/app/utils/utils.ts
+++ b/client/src/app/utils/utils.ts
@@ -1,8 +1,106 @@
 import { RENDER_DATE_FORMAT } from "@app/Constants";
 import dayjs from "dayjs";
+import type { LabelProps } from "@patternfly/react-core";
+import type { ArtifactOverallStatus, ArtifactIdentity } from "@app/queries/artifacts.view-model";
+
+// minimal shape required for eslint, uses only we actually need
+// from the verification view-model
+interface MinimalArtifactVerificationViewModel {
+  signatures: {
+    status: {
+      signature: "verified" | "invalid" | "unverifiable" | "unknown";
+      rekor: "present" | "missing" | "unknown";
+      chain: "valid" | "invalid" | "partial" | "unknown";
+    };
+  }[];
+  attestations: {
+    status: {
+      verified: boolean;
+      rekor: "present" | "missing" | "unknown";
+    };
+  }[];
+  summary: {
+    timeCoherence: {
+      status: "ok" | "warning" | "error" | "unknown";
+    };
+  };
+}
 
 export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
+export const dedupeIdentities = (identities: ArtifactIdentity[]): ArtifactIdentity[] => {
+  const seen = new Set<string>();
+
+  return identities.filter((identity) => {
+    const key = [identity.type, identity.value, identity.source, identity.issuer ?? ""].join("|");
+
+    if (seen.has(key)) {
+      return false;
+    }
+
+    seen.add(key);
+    return true;
+  });
+};
+
+/**
+ * Computes a verification status for an artifact
+ * based on verification of signatures & attestations
+ * @param vm ViewModel we use for extending API data shape
+ * @returns A derived status
+ */
+export const deriveOverallVerificationStatus = (vm: MinimalArtifactVerificationViewModel): ArtifactOverallStatus => {
+  const { signatures, attestations, summary } = vm;
+
+  const hasSignatures = signatures.length > 0;
+  const hasAttestations = attestations.length > 0;
+
+  if (!hasSignatures && !hasAttestations) {
+    return "unsigned";
+  }
+
+  const allSignaturesGood =
+    hasSignatures &&
+    signatures.every(
+      (s) => s.status.signature === "verified" && s.status.chain === "valid" && s.status.rekor === "present"
+    );
+
+  const anySignatureBad = signatures.some(
+    (s) => s.status.signature === "invalid" || s.status.chain === "invalid" || s.status.rekor === "missing"
+  );
+
+  const allAttestationsGood =
+    hasAttestations && attestations.every((a) => a.status.verified && a.status.rekor === "present");
+
+  const anyAttestationBad = attestations.some((a) => !a.status.verified || a.status.rekor === "missing");
+
+  const timeStatus = summary.timeCoherence.status;
+
+  // if time coherence is clearly broken, treat as error.
+  if (timeStatus === "error") {
+    return "error";
+  }
+
+  // fully verified: all evidence good, time is ok-ish.
+  if (allSignaturesGood && (!hasAttestations || allAttestationsGood) && timeStatus !== "warning") {
+    return "verified";
+  }
+
+  // completely failed: there is evidence, but every bit of it is bad.
+  const noGoodSignatures = hasSignatures && !signatures.some((s) => s.status.signature === "verified");
+  const noGoodAttestations = hasAttestations && !attestations.some((a) => a.status.verified);
+
+  if ((hasSignatures && noGoodSignatures) || (hasAttestations && noGoodAttestations)) {
+    return "failed";
+  }
+
+  if (anySignatureBad || anyAttestationBad || timeStatus === "warning") {
+    return "partially-verified";
+  }
+
+  return "unknown";
+};
+
 export const formatDate = (value?: string | null) => {
   return value ? dayjs(value).format(RENDER_DATE_FORMAT) : null;
 };
@@ -57,3 +155,29 @@ export const stringMatcher = (filterValue: string, value: string) => {
   const lowerCaseFilterValue = filterValue.toLowerCase();
   return lowerCaseItemValue.includes(lowerCaseFilterValue);
 };
+
+export const verificationStatusToLabelColor = (
+  status: ArtifactOverallStatus
+): {
+  label: string;
+  color: LabelProps["color"];
+} => {
+  switch (status) {
+    case "verified":
+      return { label: "Verified", color: "green" };
+    case "partially-verified":
+      return { label: "Partially verified", color: "orange" };
+    case "failed":
+      return { label: "Verification failed", color: "red" };
+    case "unsigned":
+      return { label: "Not signed", color: "grey" };
+    case "error":
+      return { label: "Verification error", color: "red" };
+    default:
+      return { label: "Unknown", color: "grey" };
+  }
+};
+
+export function relativeDateString(date: Date) {
+  return `${dayjs().to(date)}`;
+}
diff --git a/client/types/prism-theme.ts b/client/types/prism-theme.ts
new file mode 100644
index 0000000..070d9ca
--- /dev/null
+++ b/client/types/prism-theme.ts
@@ -0,0 +1,3 @@
+import type { CSSProperties } from "react";
+
+export type PrismTheme = Record<string, CSSProperties>;
diff --git a/client/types/typings.d.ts b/client/types/typings.d.ts
index bfef838..95b7652 100644
--- a/client/types/typings.d.ts
+++ b/client/types/typings.d.ts
@@ -52,3 +52,9 @@ declare module "*.xsd" {
   export default src;
 }
 declare module "*.yaml";
+
+declare module "react-syntax-highlighter" {
+  export * from "react-syntax-highlighter/dist/esm";
+}
+
+declare module "react-syntax-highlighter/*";
\ No newline at end of file
diff --git a/client/vite.config.ts b/client/vite.config.ts
index d908fa0..4acd9dc 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -17,7 +17,7 @@ export const brandingAssetPath = () =>
 
 const brandingPath: string = brandingAssetPath();
 const manifestPath = path.resolve(brandingPath, "manifest.json");
-const faviconPath = path.resolve(brandingPath, "favicon.ico");
+const faviconPath = path.resolve(brandingPath, "favicon-rh.svg");
 
 // https://vite.dev/config/
 export default defineConfig({
diff --git a/eslint.config.mjs b/eslint.config.mjs
index e323cd5..2655f12 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -53,6 +53,7 @@ export default tseslint.config([
           singleQuote: false,
         },
       ],
+      "@typescript-eslint/no-unsafe-assignment": ["warn"],
     },
     settings: { react: { version: "18.3" } },
     ignores: ["client/config/**", "client/src/app/client/**", "client/types/**"],
diff --git a/trigger-konflux-builds.txt b/trigger-konflux-builds.txt
index e573787..0332bfb 100644
--- a/trigger-konflux-builds.txt
+++ b/trigger-konflux-builds.txt
@@ -1 +1 @@
-2025-11-04,10-35-09
+2025-11-12,12-45-10