diff --git a/src/components/Home/PipelineSection/PipelineRow.tsx b/src/components/Home/PipelineSection/PipelineRow.tsx
index ae71d66e2..eeb024727 100644
--- a/src/components/Home/PipelineSection/PipelineRow.tsx
+++ b/src/components/Home/PipelineSection/PipelineRow.tsx
@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import { type MouseEvent, useCallback, useMemo } from "react";
 
 import { ConfirmationDialog } from "@/components/shared/Dialogs";
@@ -86,15 +86,6 @@ const PipelineRow = ({
     return formatDate(modificationTime.toISOString());
   }, [modificationTime]);
 
-  const linkProps = {
-    to: `${EDITOR_PATH}/$name`,
-    params: { name: name ?? "" },
-    className: "hover:underline",
-    onClick: (e: MouseEvent) => {
-      e.stopPropagation();
-    },
-  };
-
   return (
     <>
       <TableRow
@@ -110,7 +101,7 @@ const PipelineRow = ({
           />
         </TableCell>
         <TableCell>
-          <Link {...linkProps}>{name}</Link>
+          <Paragraph>{name}</Paragraph>
         </TableCell>
         <TableCell>
           <Paragraph tone="subdued" size="xs">
diff --git a/src/components/Home/RunSection/RunRow.tsx b/src/components/Home/RunSection/RunRow.tsx
index da817b76a..77435f5f3 100644
--- a/src/components/Home/RunSection/RunRow.tsx
+++ b/src/components/Home/RunSection/RunRow.tsx
@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import { type MouseEvent, useCallback } from "react";
 
 import type { PipelineRunResponse } from "@/api/types.gen";
@@ -15,6 +15,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { Paragraph } from "@/components/ui/typography";
 import useToastNotification from "@/hooks/useToastNotification";
 import { APP_ROUTES } from "@/routes/router";
 import {
@@ -50,14 +51,6 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
 
   const clickThroughUrl = `${APP_ROUTES.RUNS}/${runId}`;
 
-  const LinkProps = {
-    to: clickThroughUrl,
-    className: "underline hover:text-blue-500 text-black",
-    onClick: (e: MouseEvent) => {
-      e.stopPropagation(); // Prevent triggering the row click handler
-    },
-  };
-
   const createdByButton = (
     <Button
       className="truncate underline"
@@ -88,7 +81,7 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
     >
       <TableCell className="text-sm flex items-center gap-2">
         <StatusIcon status={getRunStatus(statusCounts)} />
-        <Link {...LinkProps}>{name}</Link>
+        <Paragraph>{name}</Paragraph>
         <span>{`#${runId}`}</span>
       </TableCell>
       <TableCell>
diff --git a/src/components/layout/AppFooter.tsx b/src/components/layout/AppFooter.tsx
index e7840156a..e20294a29 100644
--- a/src/components/layout/AppFooter.tsx
+++ b/src/components/layout/AppFooter.tsx
@@ -18,18 +18,12 @@ function AppFooter() {
     >
       <InlineStack className="w-full" align="space-between">
         <div />
-        <InlineStack gap="1" blockAlign="center">
-          <Link
-            href={ABOUT_URL}
-            className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+        <InlineStack gap="4" blockAlign="center">
+          <Link href={ABOUT_URL} target="_blank" rel="noopener noreferrer">
             About
           </Link>
           <Link
             href={GIVE_FEEDBACK_URL}
-            className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -37,27 +31,26 @@ function AppFooter() {
           </Link>
           <Link
             href={PRIVACY_POLICY_URL}
-            className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
             target="_blank"
             rel="noopener noreferrer"
           >
             Privacy policy
           </Link>
-          Version:
-          <Link
-            href={`${GIT_REPO_URL}/commit/${GIT_COMMIT}`}
-            className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {GIT_COMMIT.substring(0, 6)}
-          </Link>
+          <InlineStack gap="1" blockAlign="center">
+            Version:
+            <Link
+              href={`${GIT_REPO_URL}/commit/${GIT_COMMIT}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {GIT_COMMIT.substring(0, 6)}
+            </Link>
+          </InlineStack>
         </InlineStack>
         <Text size="xs" font="mono" tone="subdued">
           Built with{" "}
           <Link
             href="https://reactflow.dev"
-            className="text-blue-400 hover:text-blue-600 hover:underline"
             target="_blank"
             rel="noopener noreferrer"
           >
diff --git a/src/components/layout/AppMenu.tsx b/src/components/layout/AppMenu.tsx
index 15bd99d3c..954ae0447 100644
--- a/src/components/layout/AppMenu.tsx
+++ b/src/components/layout/AppMenu.tsx
@@ -1,10 +1,9 @@
-import { Link } from "@tanstack/react-router";
-
 import logo from "/public/Tangle_white.png";
 import { isAuthorizationRequired } from "@/components/shared/Authentication/helpers";
 import { TopBarAuthentication } from "@/components/shared/Authentication/TopBarAuthentication";
 import ImportPipeline from "@/components/shared/ImportPipeline";
 import { InlineStack } from "@/components/ui/layout";
+import { Link } from "@/components/ui/link";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { TOP_NAV_HEIGHT } from "@/utils/constants";
 
@@ -28,7 +27,7 @@ const AppMenu = () => {
         className="pl-12 pr-2"
       >
         <InlineStack blockAlign="center">
-          <Link to="/">
+          <Link href="/" aria-label="Home" variant="block">
             <img
               src={logo}
               alt="logo"
diff --git a/src/components/shared/ExecutionDetails/ExecutionDetails.tsx b/src/components/shared/ExecutionDetails/ExecutionDetails.tsx
index dbee1e6e4..55eb03b32 100644
--- a/src/components/shared/ExecutionDetails/ExecutionDetails.tsx
+++ b/src/components/shared/ExecutionDetails/ExecutionDetails.tsx
@@ -7,6 +7,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { Link } from "@/components/ui/link";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useBackend } from "@/providers/BackendProvider";
 import { useFetchContainerExecutionState } from "@/services/executionService";
@@ -161,15 +162,14 @@ export const ExecutionDetails = ({
                       <span className="font-medium text-foreground min-w-fit">
                         {linkInfo.name}:
                       </span>
-                      <a
+                      <Link
                         href={linkInfo.url}
-                        className="text-sky-500 hover:underline flex items-center gap-1"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         {linkInfo.value}
                         <ExternalLink className="size-3 shrink-0" />
-                      </a>
+                      </Link>
                     </div>
                   ))}
                 </>
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.tsx
index 2df481e1f..5adf2ec9f 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.tsx
@@ -38,7 +38,6 @@ const IOCellDetails = ({ io, artifactData, actions }: IOCellDetailsProps) => {
               artifactData.uri,
               artifactData.is_dir,
             )}
-            className="font-mono break-all text-xs text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1"
           >
             {artifactData.uri}
           </Link>
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx
index 90e2a0d12..43bc99d0e 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx
@@ -97,8 +97,7 @@ const IOCellHeader = ({
                       artifactData.is_dir || false,
                     )}
                     external
-                    iconClassName="h-2.5 w-2.5"
-                    className="font-mono break-all text-[10px] text-blue-600 hover:text-blue-800 hover:underline flex gap-1"
+                    size="xs"
                   >
                     Link
                   </Link>
diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx
index 7b9985061..fd028b843 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx
@@ -207,7 +207,7 @@ export const OpenLogsInNewWindowLink = ({
     <Link
       href={logsUrl}
       external
-      variant={available ? "link" : "disabled"}
+      variant={available ? "primary" : "disabled"}
       size="sm"
       aria-label={
         available
diff --git a/src/components/shared/ReactFlow/FlowSidebar/components/RecentExecutions.tsx b/src/components/shared/ReactFlow/FlowSidebar/components/RecentExecutions.tsx
index 6a7c4f43b..47281d56b 100644
--- a/src/components/shared/ReactFlow/FlowSidebar/components/RecentExecutions.tsx
+++ b/src/components/shared/ReactFlow/FlowSidebar/components/RecentExecutions.tsx
@@ -2,8 +2,10 @@ import { useEffect, useMemo } from "react";
 
 import { InfoBox } from "@/components/shared/InfoBox";
 import RunOverview from "@/components/shared/RunOverview";
+import { Link } from "@/components/ui/link";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Spinner } from "@/components/ui/spinner";
+import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 import { useBackend } from "@/providers/BackendProvider";
 import { usePipelineRuns } from "@/providers/PipelineRunsProvider";
@@ -15,15 +17,21 @@ const RecentExecutions = ({ pipelineName }: { pipelineName?: string }) => {
   const runOverviews = useMemo(
     () =>
       recentRuns.map((run) => (
-        <a key={run.id} href={`/runs/${run.id}`} tabIndex={0}>
+        <Link
+          key={run.id}
+          href={`/runs/${run.id}`}
+          tabIndex={0}
+          variant="block"
+          className="w-full"
+        >
           <RunOverview
             run={run}
             config={{
               showName: false,
             }}
-            className="rounded-sm hover:bg-gray-100"
+            className="rounded-sm hover:bg-gray-100 w-full"
           />
-        </a>
+        </Link>
       )),
     [recentRuns],
   );
@@ -95,12 +103,16 @@ const RecentExecutions = ({ pipelineName }: { pipelineName?: string }) => {
       {recentRuns.length === 0 ? (
         <div className="text-xs text-muted-foreground">No runs yet.</div>
       ) : (
-        <ScrollArea className="h-fit rounded">
+        <ScrollArea className="h-fit rounded w-full">
           {runOverviews}
           {remainingRuns > 0 && (
-            <div className="mt-2 text-xs text-muted-foreground w.full text-center">
+            <Paragraph
+              size="xs"
+              tone="subdued"
+              className="mt-2 w-full text-center"
+            >
               +{remainingRuns} more runs
-            </div>
+            </Paragraph>
           )}
         </ScrollArea>
       )}
diff --git a/src/components/shared/ReactFlow/FlowSidebar/sections/FileActions.tsx b/src/components/shared/ReactFlow/FlowSidebar/sections/FileActions.tsx
index 5e7b0203d..ca85f5224 100644
--- a/src/components/shared/ReactFlow/FlowSidebar/sections/FileActions.tsx
+++ b/src/components/shared/ReactFlow/FlowSidebar/sections/FileActions.tsx
@@ -5,6 +5,7 @@ import { PipelineNameDialog } from "@/components/shared/Dialogs";
 import ImportPipeline from "@/components/shared/ImportPipeline";
 import { Icon } from "@/components/ui/icon";
 import { InlineStack } from "@/components/ui/layout";
+import { Link } from "@/components/ui/link";
 import {
   SidebarContent,
   SidebarGroup,
@@ -166,12 +167,13 @@ const FileActions = ({ isOpen }: { isOpen: boolean }) => {
               tooltipPosition={tooltipPosition}
               asChild
             >
-              <a
+              <Link
                 href={URL.createObjectURL(componentTextBlob)}
                 download={filename}
+                variant="primary"
               >
                 <Icon name="FileDown" size="lg" className="stroke-[1.5]" />
-              </a>
+              </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
           <SidebarMenuItem>
diff --git a/src/components/shared/Submitters/GoogleCloud/GoogleCloudSubmitter.tsx b/src/components/shared/Submitters/GoogleCloud/GoogleCloudSubmitter.tsx
index cb41da8e2..da62523ca 100644
--- a/src/components/shared/Submitters/GoogleCloud/GoogleCloudSubmitter.tsx
+++ b/src/components/shared/Submitters/GoogleCloud/GoogleCloudSubmitter.tsx
@@ -2,6 +2,7 @@ import { type ChangeEvent, useCallback } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Link } from "@/components/ui/link";
 import { useGoogleCloudSubmitter } from "@/hooks/useGoogleCloudSubmitter";
 import type { ComponentSpec } from "@/utils/componentSpec";
 
@@ -73,14 +74,14 @@ const GoogleCloudSubmitter = ({ componentSpec }: GoogleCloudSubmitterProps) => {
           Submit pipeline job
         </Button>
         {jobWebUrl && (
-          <a
+          <Link
             href={jobWebUrl}
             target="_blank"
             rel="noreferrer"
             style={{ margin: "5px" }}
           >
             Job
-          </a>
+          </Link>
         )}
       </div>
       {jsonBlobUrl && (
diff --git a/src/components/shared/Submitters/GoogleCloud/ManualSubmissionInstructions.tsx b/src/components/shared/Submitters/GoogleCloud/ManualSubmissionInstructions.tsx
index f04d98aba..294958171 100644
--- a/src/components/shared/Submitters/GoogleCloud/ManualSubmissionInstructions.tsx
+++ b/src/components/shared/Submitters/GoogleCloud/ManualSubmissionInstructions.tsx
@@ -1,3 +1,5 @@
+import { Link } from "@/components/ui/link";
+
 import { InfoBox } from "../../InfoBox";
 
 interface ManualSubmissionInstructionsProps {
@@ -15,31 +17,17 @@ export const ManualSubmissionInstructions = ({
   return (
     <InfoBox title="Manual Submission" className="text-xs text-gray-700">
       Download{" "}
-      <a
-        href={downloadUrl}
-        download="vertex_pipeline_job.json"
-        className="text-blue-600 hover:underline"
-      >
+      <Link href={downloadUrl} download="vertex_pipeline_job.json">
         pipeline_job.json
-      </a>
+      </Link>
       , then go to{" "}
-      <a
-        href={VERTEX_PIPELINES_URL}
-        className="text-blue-600 hover:underline"
-        target="_blank"
-        rel="noreferrer"
-      >
+      <Link href={VERTEX_PIPELINES_URL} target="_blank" rel="noreferrer">
         Vertex Pipelines
-      </a>{" "}
+      </Link>{" "}
       and{" "}
-      <a
-        href={CREATE_RUN_DOCS_URL}
-        className="text-blue-600 hover:underline"
-        target="_blank"
-        rel="noreferrer"
-      >
+      <Link href={CREATE_RUN_DOCS_URL} target="_blank" rel="noreferrer">
         create a new run
-      </a>
+      </Link>
       .
     </InfoBox>
   );
diff --git a/src/components/shared/TaskDetails/Details.tsx b/src/components/shared/TaskDetails/Details.tsx
index a40383ed4..9d6a7d57d 100644
--- a/src/components/shared/TaskDetails/Details.tsx
+++ b/src/components/shared/TaskDetails/Details.tsx
@@ -2,7 +2,6 @@ import {
   ChevronsUpDown,
   ClipboardIcon,
   DownloadIcon,
-  ExternalLink,
   TrashIcon,
 } from "lucide-react";
 import { type ReactNode, useCallback, useState } from "react";
@@ -14,6 +13,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { Link } from "@/components/ui/link";
 import {
   Tooltip,
   TooltipContent,
@@ -337,54 +337,54 @@ function LinkBlock({
       {url && (
         <>
           <div className="text-sm break-all">
-            <a
+            <Link
               href={url}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sky-500 hover:underline flex items-center gap-1"
+              size="sm"
+              external
             >
               View raw component.yaml
-              <ExternalLink className="size-3 shrink-0" />
-            </a>
+            </Link>
           </div>
           <div className="text-sm break-all">
-            <a
+            <Link
               href={
                 isGithubUrl(url) ? convertGithubUrlToDirectoryUrl(url) : url
               }
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sky-500 hover:underline flex items-center gap-1"
+              size="sm"
+              external
             >
               View directory on GitHub
-              <ExternalLink className="size-3 shrink-0" />
-            </a>
+            </Link>
           </div>
         </>
       )}
       {canonicalUrl && (
         <>
           <div className="text-sm break-all">
-            <a
+            <Link
               href={canonicalUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sky-500 hover:underline flex items-center gap-1"
+              size="sm"
+              external
             >
               View raw canonical URL
-              <ExternalLink className="size-3 shrink-0" />
-            </a>
+            </Link>
           </div>
           <div className="text-sm break-all">
-            <a
+            <Link
               href={convertGithubUrlToDirectoryUrl(canonicalUrl)}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sky-500 hover:underline flex items-center gap-1"
+              size="sm"
+              external
             >
               View canonical URL on GitHub
-              <ExternalLink className="size-3 shrink-0" />
-            </a>
+            </Link>
           </div>
         </>
       )}
diff --git a/src/components/ui/link.tsx b/src/components/ui/link.tsx
index 8cd4f7d82..97bd36c3b 100644
--- a/src/components/ui/link.tsx
+++ b/src/components/ui/link.tsx
@@ -1,34 +1,36 @@
 import { cva } from "class-variance-authority";
-import { DownloadIcon, ExternalLink } from "lucide-react";
 import { type AnchorHTMLAttributes } from "react";
 
 import { cn } from "@/lib/utils";
 
+import { Icon } from "./icon";
+import { InlineStack } from "./layout";
+
 const linkVariants = cva("items-center inline-flex cursor-pointer", {
   variants: {
     variant: {
-      default: "text-primary",
-      link: "text-primary hover:underline",
+      primary: "text-primary hover:underline",
       disabled: "text-muted-foreground cursor-not-allowed pointer-events-none",
+      classic: "text-sky-500 hover:text-sky-600 hover:underline",
+      block: "text-inherit",
     },
     size: {
-      default: "",
+      xs: "text-xs",
       sm: "text-sm",
+      md: "text-md",
       lg: "text-lg",
     },
   },
   defaultVariants: {
-    variant: "default",
-    size: "default",
+    variant: "classic",
+    size: "md",
   },
 });
 
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   external?: boolean;
-  download?: boolean;
-  iconClassName?: string;
-  variant?: "default" | "link" | "disabled";
-  size?: "default" | "sm" | "lg";
+  variant?: "primary" | "disabled" | "classic" | "block";
+  size?: "xs" | "sm" | "md" | "lg";
 }
 
 function Link({
@@ -36,7 +38,6 @@ function Link({
   children,
   className,
   download,
-  iconClassName,
   variant,
   size,
   ...props
@@ -48,12 +49,14 @@ function Link({
     <a
       target={target}
       rel={rel}
+      download={download}
       {...props}
       className={cn(linkVariants({ variant, size }), className)}
     >
-      {children}
-      {external && <ExternalLink className={cn("h-4", iconClassName)} />}
-      {download && <DownloadIcon className={cn("h-4", iconClassName)} />}
+      <InlineStack gap="1" blockAlign="center" className="w-full">
+        {children}
+        {external && <Icon name="ExternalLink" size={size} />}
+      </InlineStack>
     </a>
   );
 }