diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
index 88f071dacd..92e42c1baf 100644
--- a/src/components/Comment.svelte
+++ b/src/components/Comment.svelte
@@ -9,6 +9,7 @@
   import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
   import Markdown from "@app/components/Markdown.svelte";
   import NodeId from "@app/components/NodeId.svelte";
   import ReactionSelector from "@app/components/ReactionSelector.svelte";
@@ -136,15 +137,10 @@
     {/if}
     <div class="card-header" class:card-header-no-icon={isReply}>
       <slot class="icon" name="icon" />
-      <NodeId
-        stylePopoverPositionLeft="-13px"
-        nodeId={authorId}
-        alias={authorAlias} />
+      <NodeId nodeId={authorId} alias={authorAlias} />
       <slot name="caption">{caption}</slot>
       {#if id}
-        <span class="global-oid">
-          {utils.formatObjectId(id)}
-        </span>
+        <Id {id} />
       {/if}
       <span class="timestamp" title={utils.absoluteTimestamp(timestamp)}>
         {utils.formatTimestamp(timestamp)}
diff --git a/src/components/CopyableId.svelte b/src/components/CopyableId.svelte
deleted file mode 100644
index 1c598fbdda..0000000000
--- a/src/components/CopyableId.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-  import type { SvelteComponent } from "svelte";
-  import Clipboard from "@app/components/Clipboard.svelte";
-
-  export let id: string;
-  export let style: "commit" | "oid";
-
-  let clipboard: SvelteComponent;
-</script>
-
-<style>
-  .id {
-    cursor: pointer;
-    color: var(--color-foreground-emphasized);
-    overflow-wrap: anywhere;
-    display: flex;
-    align-items: center;
-    gap: 0.125rem;
-    width: fit-content;
-  }
-  .id:hover {
-    color: var(--color-foreground-emphasized-hover);
-  }
-</style>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-  role="button"
-  tabindex="0"
-  on:click={() => {
-    clipboard.copy();
-  }}
-  class="id">
-  <span
-    class="txt-overflow"
-    class:global-commit={style === "commit"}
-    class:global-oid={style === "oid"}
-    style="color: inherit">
-    <slot>{id}</slot>
-  </span>
-  <Clipboard bind:this={clipboard} text={id} />
-</div>
diff --git a/src/components/HoverPopover.svelte b/src/components/HoverPopover.svelte
index f7fe6eec04..4f59671e67 100644
--- a/src/components/HoverPopover.svelte
+++ b/src/components/HoverPopover.svelte
@@ -8,6 +8,10 @@
   export let stylePopoverPositionTop: string | undefined = undefined;
   export let stylePopoverPositionBottom: string | undefined = undefined;
   export let stylePopoverPadding: string | undefined = "1rem";
+  export let styleBorderRadius = "var(--border-radius-regular)";
+  export let styleBackground = "var(--color-background-float)";
+  export let styleBorder = "1px solid var(--color-border-hint)";
+  export let debounceTimeout = 500;
 
   let visible: boolean = false;
 
@@ -16,17 +20,15 @@
     if (visible) {
       onShow();
     }
-  }, 500);
+  }, debounceTimeout);
 </script>
 
 <style>
   .container {
     position: relative;
+    display: inline-block;
   }
   .popover {
-    background: var(--color-background-float);
-    border-radius: var(--border-radius-regular);
-    border: 1px solid var(--color-border-hint);
     box-shadow: var(--elevation-low);
     position: absolute;
     z-index: 10;
@@ -50,6 +52,9 @@
       <div style:position="absolute" on:click|stopPropagation>
         <div
           class="popover"
+          style:border={styleBorder}
+          style:background={styleBackground}
+          style:border-radius={styleBorderRadius}
           style:padding={stylePopoverPadding}
           style:left={stylePopoverPositionLeft}
           style:right={stylePopoverPositionRight}
diff --git a/src/components/Id.svelte b/src/components/Id.svelte
new file mode 100644
index 0000000000..cab536812c
--- /dev/null
+++ b/src/components/Id.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+
+  import { debounce } from "lodash";
+
+  import { formatObjectId } from "@app/lib/utils";
+  import { toClipboard } from "@app/lib/utils";
+
+  import HoverPopover from "./HoverPopover.svelte";
+  import IconSmall from "./IconSmall.svelte";
+
+  export let id: string;
+  export let clipboard: string = id;
+  export let shorten: boolean = true;
+  export let style: "oid" | "commit" | "none" = "oid";
+  export let subject: string | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
+
+  let icon: ComponentProps<IconSmall>["name"] = "clipboard";
+  const text = subject ? `Click to copy ${subject}` : "Click to copy";
+  let tooltip = text;
+
+  const restoreIcon = debounce(() => {
+    icon = "clipboard";
+    tooltip = text;
+  }, 800);
+
+  async function copy() {
+    await toClipboard(clipboard);
+    icon = "checkmark";
+    tooltip = "Copied to clipboard";
+    restoreIcon();
+  }
+</script>
+
+<style>
+  .popover {
+    font-weight: var(--font-weight-regular);
+    font-family: var(--font-family-sans-serif);
+    font-size: var(--font-size-small);
+    color: var(--color-foreground-default);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    gap: 0.5rem;
+  }
+  .target-commit:hover {
+    color: var(--color-foreground-contrast);
+  }
+  .target-oid:hover {
+    color: var(--color-foreground-emphasized-hover);
+  }
+</style>
+
+<HoverPopover
+  debounceTimeout={50}
+  stylePopoverPositionLeft="0"
+  stylePopoverPositionBottom="1.5rem"
+  styleBorderRadius="var(--border-radius-small)"
+  stylePopoverPadding="0.25rem 0.5rem">
+  <div
+    slot="toggle"
+    class="target-{style} global-{style}"
+    style:cursor="pointer">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span aria-label={ariaLabel} on:click={copy} role="button" tabindex="0">
+      <slot>
+        {#if shorten}
+          {formatObjectId(id)}
+        {:else}
+          {id}
+        {/if}
+      </slot>
+    </span>
+  </div>
+  <div slot="popover" class="popover">
+    <IconSmall name={icon} />
+    {tooltip}
+  </div>
+</HoverPopover>
diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte
index 1e5ebcb41f..1e39808700 100644
--- a/src/components/NodeId.svelte
+++ b/src/components/NodeId.svelte
@@ -2,13 +2,10 @@
   import { formatNodeId } from "@app/lib/utils";
 
   import Avatar from "./Avatar.svelte";
-  import HoverPopover from "./HoverPopover.svelte";
-  import CopyableId from "./CopyableId.svelte";
+  import Id from "./Id.svelte";
 
   export let nodeId: string;
   export let alias: string | undefined = undefined;
-  export let large: boolean = false;
-  export let stylePopoverPositionLeft = "-4.5rem";
 </script>
 
 <style>
@@ -22,32 +19,10 @@
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-small);
   }
-  .large {
-    height: 1.25rem;
-    gap: 0.5rem;
-  }
-  .popover-avatar {
-    height: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-family: var(--font-family-monospace);
-    font-weight: var(--font-weight-semibold);
-    font-size: var(--font-size-small);
-    white-space: nowrap;
-  }
-  .popover-container {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
 </style>
 
-<HoverPopover
-  {stylePopoverPositionLeft}
-  stylePopoverPadding="0.5rem 0.5rem 0.5rem 0.75rem"
-  stylePopoverPositionTop="-4.5rem">
-  <div slot="toggle" class="avatar-alias" class:large>
+<Id id={nodeId} subject={formatNodeId(nodeId)} style="none">
+  <div class="avatar-alias">
     <Avatar {nodeId} />
     {#if alias}
       {alias}
@@ -55,19 +30,4 @@
       {formatNodeId(nodeId)}
     {/if}
   </div>
-
-  <div slot="popover">
-    <div class="popover-container">
-      <div class="popover-avatar">
-        <Avatar {nodeId} />
-        {#if alias}
-          {alias}
-        {/if}
-      </div>
-
-      <CopyableId id={nodeId} style="oid">
-        {formatNodeId(nodeId)}
-      </CopyableId>
-    </div>
-  </div>
-</HoverPopover>
+</Id>
diff --git a/src/views/nodes/View.svelte b/src/views/nodes/View.svelte
index 1198e2ca1f..4452b1573d 100644
--- a/src/views/nodes/View.svelte
+++ b/src/views/nodes/View.svelte
@@ -11,9 +11,9 @@
   import { isDelegate } from "@app/lib/roles";
 
   import AppLayout from "@app/App/AppLayout.svelte";
-  import CopyableId from "@app/components/CopyableId.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
   import Loading from "@app/components/Loading.svelte";
   import Popover from "@app/components/Popover.svelte";
   import ProjectCard from "@app/components/ProjectCard.svelte";
@@ -128,25 +128,27 @@
             {#each externalAddresses as address}
               <!-- If there are externalAddresses this is probably a remote node -->
               <!-- in that case, we show all the defined externalAddresses as a listing -->
-              <CopyableId id={`${nid}@${address}`} style="oid">
-                {truncateId(nid)}@{address}
-              </CopyableId>
+              <Id
+                ariaLabel="node-id"
+                shorten={false}
+                id="{truncateId(nid)}@{address}"
+                clipboard={`${nid}@${address}`} />
             {:else}
               <!-- else this is probably a local node -->
               <!-- So we show only the nid -->
-              <CopyableId id={nid} style="oid">
-                <div class="global-hide-on-small-desktop-up">
-                  {truncateId(nid)}
-                </div>
-                <div class="global-hide-on-mobile-down">
-                  {nid}
-                </div>
-              </CopyableId>
+              <div class="global-hide-on-small-desktop-up">
+                <Id ariaLabel="node-id" id={truncateId(nid)} shorten={false} />
+              </div>
+              <div class="global-hide-on-mobile-down">
+                <Id ariaLabel="node-id" id={nid} shorten={false} />
+              </div>
             {/each}
           </div>
-          <div class="version">
-            {version}
-          </div>
+          <Id ariaLabel="version" id={version} shorten={false} style="none">
+            <div class="version">
+              {version}
+            </div>
+          </Id>
         </div>
       </div>
 
diff --git a/src/views/projects/Cob/CobCommitTeaser.svelte b/src/views/projects/Cob/CobCommitTeaser.svelte
index 484bd789fd..a016160668 100644
--- a/src/views/projects/Cob/CobCommitTeaser.svelte
+++ b/src/views/projects/Cob/CobCommitTeaser.svelte
@@ -3,11 +3,11 @@
 
   import { twemoji } from "@app/lib/utils";
 
-  import CommitLink from "@app/views/projects/components/CommitLink.svelte";
   import CompactCommitAuthorship from "@app/components/CompactCommitAuthorship.svelte";
   import ExpandButton from "@app/components/ExpandButton.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import Link from "@app/components/Link.svelte";
 
@@ -88,7 +88,7 @@
     {/if}
     <div class="global-hide-on-small-desktop-up">
       <CompactCommitAuthorship {commit}>
-        <CommitLink {baseUrl} {projectId} commitId={commit.id} />
+        <Id id={commit.id} style="commit" />
       </CompactCommitAuthorship>
     </div>
   </div>
@@ -96,7 +96,7 @@
     <div style="display: flex; gap: 0.5rem; height: 21px; align-items: center;">
       <div class="global-hide-on-mobile-down">
         <CompactCommitAuthorship {commit}>
-          <CommitLink {baseUrl} {projectId} commitId={commit.id} />
+          <Id id={commit.id} style="commit" />
         </CompactCommitAuthorship>
       </div>
       <IconButton title="Browse repo at this commit">
diff --git a/src/views/projects/Cob/CobHeader.svelte b/src/views/projects/Cob/CobHeader.svelte
index d4cd26d031..38a17c256d 100644
--- a/src/views/projects/Cob/CobHeader.svelte
+++ b/src/views/projects/Cob/CobHeader.svelte
@@ -11,7 +11,6 @@
     flex-wrap: wrap;
     gap: 0.5rem;
     font-size: var(--font-size-small);
-    font-family: var(--font-family-monospace);
   }
   .summary {
     display: flex;
diff --git a/src/views/projects/Cob/Revision.svelte b/src/views/projects/Cob/Revision.svelte
index 1592b6d877..ddc0ab48a6 100644
--- a/src/views/projects/Cob/Revision.svelte
+++ b/src/views/projects/Cob/Revision.svelte
@@ -18,7 +18,6 @@
 
   import CobCommitTeaser from "@app/views/projects/Cob/CobCommitTeaser.svelte";
   import CommentComponent from "@app/components/Comment.svelte";
-  import CommitLink from "@app/views/projects/components/CommitLink.svelte";
   import DiffStatBadge from "@app/components/DiffStatBadge.svelte";
   import DropdownList from "@app/components/DropdownList.svelte";
   import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";
@@ -35,6 +34,7 @@
   import ReactionSelector from "@app/components/ReactionSelector.svelte";
   import Reactions from "@app/components/Reactions.svelte";
   import Thread from "@app/components/Thread.svelte";
+  import Id from "@app/components/Id.svelte";
 
   export let baseUrl: BaseUrl;
   export let initiallyExpanded: boolean = false;
@@ -300,7 +300,7 @@
         <ExpandButton {expanded} on:toggle={() => (expanded = !expanded)} />
         <span>
           Revision
-          <span class="global-oid">{utils.formatObjectId(revisionId)}</span>
+          <Id id={revisionId} />
         </span>
       </div>
       <div class="revision-data">
@@ -409,21 +409,16 @@
               style:padding="0 0.375rem">
               <IconSmall name="patch" />
             </div>
-            <NodeId
-              stylePopoverPositionLeft="-13px"
-              nodeId={revisionAuthor.id}
-              alias={revisionAuthor.alias} />
+            <NodeId nodeId={revisionAuthor.id} alias={revisionAuthor.alias} />
             {#if patchId === revisionId}
               opened this patch on base
-              <CommitLink {baseUrl} {projectId} commitId={revisionBase} />
+              <Id id={revisionBase} style="commit" />
             {:else}
               updated to
-              <span class="global-oid">
-                {utils.formatObjectId(revisionId)}
-              </span>
+              <Id id={revisionId} />
               {#if previousRevBase && previousRevBase !== revisionBase}
                 with base
-                <CommitLink {baseUrl} {projectId} commitId={revisionBase} />
+                <Id id={revisionBase} style="commit" />
               {/if}
             {/if}
             <span
@@ -556,20 +551,14 @@
               </div>
 
               <NodeId
-                stylePopoverPositionLeft="-13px"
                 nodeId={element.inner.author.id}
                 alias={element.inner.author.alias}>
               </NodeId>
 
               merged revision
-              <span class="global-oid">
-                {utils.formatObjectId(element.inner.revision)}
-              </span>
+              <Id id={element.inner.revision} />
               at commit
-              <CommitLink
-                {baseUrl}
-                {projectId}
-                commitId={element.inner.commit} />
+              <Id id={element.inner.commit} style="commit" />
               <span
                 class="timestamp"
                 title={utils.absoluteTimestamp(revisionTimestamp)}>
@@ -593,9 +582,7 @@
               body={review.summary ?? ""}>
               <div slot="caption">
                 {formatVerdict(review.verdict)}
-                <span class="global-oid">
-                  {utils.formatObjectId(revisionId)}
-                </span>
+                <Id id={revisionId} />
               </div>
               <div slot="icon" style:color={verdictIconColor(review.verdict)}>
                 {#if review.verdict === "accept"}
diff --git a/src/views/projects/Commit.svelte b/src/views/projects/Commit.svelte
index 68d1cdf36d..a53015749b 100644
--- a/src/views/projects/Commit.svelte
+++ b/src/views/projects/Commit.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
   import type { BaseUrl, Commit, Node, Project } from "@http-client";
 
-  import { formatCommit } from "@app/lib/utils";
-
   import Button from "@app/components/Button.svelte";
   import Changeset from "@app/views/projects/Changeset.svelte";
   import CommitAuthorship from "@app/views/projects/Commit/CommitAuthorship.svelte";
-  import CopyableId from "@app/components/CopyableId.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import Layout from "./Layout.svelte";
   import Link from "@app/components/Link.svelte";
   import Share from "./Share.svelte";
+  import Id from "@app/components/Id.svelte";
 
   export let baseUrl: BaseUrl;
   export let node: Node;
@@ -73,9 +71,7 @@
           </div>
         </span>
         <CommitAuthorship {header}>
-          <CopyableId id={header.id} style="commit">
-            {formatCommit(header.id)}
-          </CopyableId>
+          <Id id={header.id} style="commit" ariaLabel="commit-id" />
         </CommitAuthorship>
       </div>
       {#if header.description}
diff --git a/src/views/projects/Commit/CommitTeaser.svelte b/src/views/projects/Commit/CommitTeaser.svelte
index 29209026a2..c373ddc3f8 100644
--- a/src/views/projects/Commit/CommitTeaser.svelte
+++ b/src/views/projects/Commit/CommitTeaser.svelte
@@ -4,12 +4,12 @@
   import { twemoji } from "@app/lib/utils";
 
   import CommitAuthorship from "./CommitAuthorship.svelte";
-  import CommitLink from "@app/views/projects/components/CommitLink.svelte";
   import ExpandButton from "@app/components/ExpandButton.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import Link from "@app/components/Link.svelte";
+  import Id from "@app/components/Id.svelte";
 
   export let baseUrl: BaseUrl;
   export let commit: CommitHeader;
@@ -104,7 +104,7 @@
       </div>
     {/if}
     <CommitAuthorship header={commit}>
-      <CommitLink {baseUrl} {projectId} commitId={commit.id} />
+      <Id id={commit.id} style="commit" />
     </CommitAuthorship>
   </div>
   <div class="right">
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index b903a89b18..7c2a829ab3 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -32,11 +32,11 @@
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
   import CobStateButton from "@app/views/projects/Cob/CobStateButton.svelte";
   import CommentToggleInput from "@app/components/CommentToggleInput.svelte";
-  import CopyableId from "@app/components/CopyableId.svelte";
   import Embeds from "@app/views/projects/Cob/Embeds.svelte";
   import ErrorModal from "@app/modals/ErrorModal.svelte";
   import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import LabelInput from "./Cob/LabelInput.svelte";
   import Layout from "./Layout.svelte";
@@ -547,14 +547,9 @@
               {issue.state.reason}
             </Badge>
           {/if}
-          <NodeId
-            stylePopoverPositionLeft="-13px"
-            nodeId={issue.author.id}
-            alias={issue.author.alias} />
+          <NodeId nodeId={issue.author.id} alias={issue.author.alias} />
           opened
-          <CopyableId id={issue.id} style="oid">
-            {utils.formatObjectId(issue.id)}
-          </CopyableId>
+          <Id id={issue.id} />
           <span title={utils.absoluteTimestamp(issue.discussion[0].timestamp)}>
             {utils.formatTimestamp(issue.discussion[0].timestamp)}
           </span>
diff --git a/src/views/projects/Issue/IssueTeaser.svelte b/src/views/projects/Issue/IssueTeaser.svelte
index 8575060d0a..11e46a6991 100644
--- a/src/views/projects/Issue/IssueTeaser.svelte
+++ b/src/views/projects/Issue/IssueTeaser.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
   import type { BaseUrl, Issue } from "@http-client";
 
-  import {
-    absoluteTimestamp,
-    formatObjectId,
-    formatTimestamp,
-  } from "@app/lib/utils";
+  import { absoluteTimestamp, formatTimestamp } from "@app/lib/utils";
 
   import IconSmall from "@app/components/IconSmall.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
@@ -14,6 +10,7 @@
 
   import CommentCounter from "../CommentCounter.svelte";
   import Labels from "../Cob/Labels.svelte";
+  import Id from "@app/components/Id.svelte";
 
   export let baseUrl: BaseUrl;
   export let issue: Issue;
@@ -123,12 +120,9 @@
       {/if}
       <div
         style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
-        <NodeId
-          stylePopoverPositionLeft="-13px"
-          nodeId={issue.author.id}
-          alias={issue.author.alias} />
+        <NodeId nodeId={issue.author.id} alias={issue.author.alias} />
         opened
-        <span class="global-oid">{formatObjectId(issue.id)}</span>
+        <Id id={issue.id} />
         <span title={absoluteTimestamp(issue.discussion[0].timestamp)}>
           {formatTimestamp(issue.discussion[0].timestamp)}
         </span>
diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte
index 5c915684fe..e911f71066 100644
--- a/src/views/projects/Patch.svelte
+++ b/src/views/projects/Patch.svelte
@@ -52,12 +52,13 @@
   import * as role from "@app/lib/roles";
   import * as router from "@app/lib/router";
   import * as utils from "@app/lib/utils";
-  import { experimental } from "@app/lib/appearance";
   import capitalize from "lodash/capitalize";
   import isEqual from "lodash/isEqual";
   import partial from "lodash/partial";
   import uniqBy from "lodash/uniqBy";
   import { HttpdClient } from "@http-client";
+  import { closeFocused } from "@app/components/Popover.svelte";
+  import { experimental } from "@app/lib/appearance";
   import { httpdStore } from "@app/lib/httpd";
   import { parseEmbedIntoMap } from "@app/lib/file";
 
@@ -68,12 +69,12 @@
   import CobStateButton from "@app/views/projects/Cob/CobStateButton.svelte";
   import CommentToggleInput from "@app/components/CommentToggleInput.svelte";
   import CompareButton from "@app/views/projects/Patch/CompareButton.svelte";
-  import CopyableId from "@app/components/CopyableId.svelte";
   import DiffStatBadge from "@app/components/DiffStatBadge.svelte";
   import Embeds from "@app/views/projects/Cob/Embeds.svelte";
   import ErrorModal from "@app/modals/ErrorModal.svelte";
   import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import LabelInput from "@app/views/projects/Cob/LabelInput.svelte";
   import Layout from "@app/views/projects/Layout.svelte";
@@ -89,7 +90,6 @@
   import RevisionSelector from "@app/views/projects/Patch/RevisionSelector.svelte";
   import Share from "@app/views/projects/Share.svelte";
   import TextInput from "@app/components/TextInput.svelte";
-  import { closeFocused } from "@app/components/Popover.svelte";
 
   export let baseUrl: BaseUrl;
   export let node: Node;
@@ -775,14 +775,9 @@
               insertions={stats.insertions}
               deletions={stats.deletions} />
           </Link>
-          <NodeId
-            stylePopoverPositionLeft="-13px"
-            nodeId={patch.author.id}
-            alias={patch.author.alias} />
+          <NodeId nodeId={patch.author.id} alias={patch.author.alias} />
           opened
-          <CopyableId id={patch.id} style="oid">
-            {utils.formatObjectId(patch.id)}
-          </CopyableId>
+          <Id id={patch.id} />
           <span title={utils.absoluteTimestamp(patch.revisions[0].timestamp)}>
             {utils.formatTimestamp(patch.revisions[0].timestamp)}
           </span>
diff --git a/src/views/projects/Patch/PatchTeaser.svelte b/src/views/projects/Patch/PatchTeaser.svelte
index a72cdc9887..724b8ceb16 100644
--- a/src/views/projects/Patch/PatchTeaser.svelte
+++ b/src/views/projects/Patch/PatchTeaser.svelte
@@ -2,20 +2,17 @@
   import type { BaseUrl } from "@http-client";
   import type { Patch } from "@http-client";
 
-  import {
-    absoluteTimestamp,
-    formatObjectId,
-    formatTimestamp,
-  } from "@app/lib/utils";
+  import { absoluteTimestamp, formatTimestamp } from "@app/lib/utils";
 
   import IconSmall from "@app/components/IconSmall.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import Link from "@app/components/Link.svelte";
   import NodeId from "@app/components/NodeId.svelte";
 
-  import Labels from "../Cob/Labels.svelte";
-  import DiffStatBadgeLoader from "../DiffStatBadgeLoader.svelte";
   import CommentCounter from "../CommentCounter.svelte";
+  import DiffStatBadgeLoader from "../DiffStatBadgeLoader.svelte";
+  import Id from "@app/components/Id.svelte";
+  import Labels from "../Cob/Labels.svelte";
 
   export let projectId: string;
   export let baseUrl: BaseUrl;
@@ -137,17 +134,12 @@
         {/if}
         <div
           style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
-          <NodeId
-            stylePopoverPositionLeft="-13px"
-            nodeId={patch.author.id}
-            alias={patch.author.alias} />
+          <NodeId nodeId={patch.author.id} alias={patch.author.alias} />
           {patch.revisions.length > 1 ? "updated" : "opened"}
-          <span class="global-oid">{formatObjectId(patch.id)}</span>
+          <Id id={patch.id} />
           {#if patch.revisions.length > 1}
             <span class="global-hide-on-mobile-down">
-              to <span class="global-oid">
-                {formatObjectId(patch.revisions[patch.revisions.length - 1].id)}
-              </span>
+              to <Id id={patch.revisions[patch.revisions.length - 1].id} />
             </span>
           {/if}
           <span title={absoluteTimestamp(latestRevision.timestamp)}>
diff --git a/src/views/projects/Sidebar/ContextRepo.svelte b/src/views/projects/Sidebar/ContextRepo.svelte
index 736402bbd1..4c6d4ce61d 100644
--- a/src/views/projects/Sidebar/ContextRepo.svelte
+++ b/src/views/projects/Sidebar/ContextRepo.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import type { BaseUrl, Node, Project } from "@http-client";
 
+  import { capitalize } from "lodash";
+  import { isLocal } from "@app/lib/utils";
+
   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import NodeId from "@app/components/NodeId.svelte";
   import Popover from "@app/components/Popover.svelte";
   import ScopePolicyExplainer from "@app/components/ScopePolicyExplainer.svelte";
-  import { isLocal } from "@app/lib/utils";
-  import { capitalize } from "lodash";
 
   export let disablePopovers: boolean = false;
   export let project: Project;
@@ -86,7 +87,7 @@
   <div class="nids">
     {#each project.delegates as { id: nodeId, alias }}
       <div style:width="fit-content">
-        <NodeId {alias} {nodeId} stylePopoverPositionLeft="-0.8rem" />
+        <NodeId {alias} {nodeId} />
       </div>
     {/each}
   </div>
@@ -119,11 +120,5 @@
           policy={node.config.policy} />
       </div>
     {/if}
-    <div class="item txt-overflow" style:padding-top="0.5rem">
-      Radicle version
-      <span class="txt-missing txt-overflow txt-monospace" title={node.version}>
-        {node.version}
-      </span>
-    </div>
   </div>
 </div>
diff --git a/src/views/projects/Source/PeerSelector.svelte b/src/views/projects/Source/PeerSelector.svelte
index fd9160ad2a..47e4632165 100644
--- a/src/views/projects/Source/PeerSelector.svelte
+++ b/src/views/projects/Source/PeerSelector.svelte
@@ -6,15 +6,14 @@
   import { formatNodeId } from "@app/lib/utils";
   import { httpdStore } from "@app/lib/httpd";
 
-  import NodeId from "@app/components/NodeId.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
   import Badge from "@app/components/Badge.svelte";
+  import Button from "@app/components/Button.svelte";
   import DropdownList from "@app/components/DropdownList.svelte";
   import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";
-  import Popover from "@app/components/Popover.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
-  import Button from "@app/components/Button.svelte";
-  import Avatar from "@app/components/Avatar.svelte";
+  import Popover from "@app/components/Popover.svelte";
 
   export let peers: Array<{ remote: Remote; selected: boolean; route: Route }>;
   export let project: Project;
@@ -48,22 +47,27 @@
     popoverPositionTop="2.5rem"
     popoverBorderRadius="var(--border-radius-small)">
     <Button
+      ariaLabel="Change peer"
       slot="toggle"
       let:expanded
       let:toggle
       styleBorderRadius="var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"
       on:click={toggle}
-      title="Change peer"
+      title={selectedPeer ? formatNodeId(selectedPeer.id) : "Change peer"}
       disabled={!peers}>
       {#if !selectedPeer}
         <IconSmall name="delegate" />
       {/if}
 
       {#if selectedPeer}
-        <NodeId
-          nodeId={selectedPeer.id}
-          alias={selectedPeer.alias}
-          stylePopoverPositionLeft="-0.75rem" />
+        <div style:height="1rem">
+          <Avatar nodeId={selectedPeer.id} />
+        </div>
+        <span
+          style:font-family="var(--font-family-monospace)"
+          class:no-alias={!selectedPeer.alias}>
+          {selectedPeer.alias || formatNodeId(selectedPeer.id)}
+        </span>
         {#if selectedPeer.delegate}
           <Badge size="tiny" variant="delegate">
             <IconSmall name="badge" />
diff --git a/src/views/projects/Source/ProjectNameHeader.svelte b/src/views/projects/Source/ProjectNameHeader.svelte
index 0d88bd3fe5..ad59d211a0 100644
--- a/src/views/projects/Source/ProjectNameHeader.svelte
+++ b/src/views/projects/Source/ProjectNameHeader.svelte
@@ -5,8 +5,8 @@
 
   import Badge from "@app/components/Badge.svelte";
   import CloneButton from "@app/views/projects/Header/CloneButton.svelte";
-  import CopyableId from "@app/components/CopyableId.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
+  import Id from "@app/components/Id.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import Link from "@app/components/Link.svelte";
   import SeedButton from "@app/views/projects/Header/SeedButton.svelte";
@@ -90,7 +90,7 @@
     </div>
   </div>
   <div class="id">
-    <CopyableId id={project.id} style="oid" />
+    <Id shorten={false} id={project.id} ariaLabel="project-id" />
   </div>
 </div>
 <div class="description" use:twemoji>
diff --git a/src/views/projects/components/CommitLink.svelte b/src/views/projects/components/CommitLink.svelte
deleted file mode 100644
index 51efdc8299..0000000000
--- a/src/views/projects/components/CommitLink.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-  import type { BaseUrl } from "@http-client";
-
-  import { formatCommit } from "@app/lib/utils";
-  import Link from "@app/components/Link.svelte";
-
-  export let baseUrl: BaseUrl;
-  export let projectId: string;
-  export let commitId: string;
-</script>
-
-<Link
-  route={{
-    resource: "project.commit",
-    node: baseUrl,
-    project: projectId,
-    commit: commitId,
-  }}>
-  <span class="global-commit">
-    {formatCommit(commitId)}
-  </span>
-</Link>
diff --git a/tests/e2e/clipboard.spec.ts b/tests/e2e/clipboard.spec.ts
index ababb2e716..36f6138f5c 100644
--- a/tests/e2e/clipboard.spec.ts
+++ b/tests/e2e/clipboard.spec.ts
@@ -33,7 +33,7 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
 
   // Project ID.
   {
-    await page.locator(".id > .clipboard").click();
+    await page.getByLabel("project-id").click();
     const clipboardContent = await page.evaluate<string>(
       "navigator.clipboard.readText()",
     );
@@ -63,7 +63,7 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
   await page.goto("/nodes/radicle.local");
   // Node address.
   {
-    await page.locator(".clipboard").first().click();
+    await page.getByRole("button", { name: "node-id" }).first().click();
     await expectClipboard(`${nodeRemote}`, page);
   }
 
diff --git a/tests/e2e/project.spec.ts b/tests/e2e/project.spec.ts
index 5f0616dc24..25c7bfb623 100644
--- a/tests/e2e/project.spec.ts
+++ b/tests/e2e/project.spec.ts
@@ -288,13 +288,13 @@ test("peer and branch switching", async ({ page }) => {
 
   // Alice's peer.
   {
-    await page.getByTitle("Change peer").click();
+    await page.getByLabel("Change peer").click();
     await page
       .getByRole("link", {
         name: "alice delegate",
       })
       .click();
-    await expect(page.getByTitle("Change peer")).toHaveText("alice Delegate");
+    await expect(page.getByLabel("Change peer")).toHaveText("alice Delegate");
 
     // Default `main` branch.
     {
@@ -356,8 +356,8 @@ test("peer and branch switching", async ({ page }) => {
   {
     await page.getByRole("link", { name: "source-browsing" }).nth(1).click();
 
-    await expect(page.getByTitle("Change peer")).not.toContainText("alice");
-    await expect(page.getByTitle("Change peer")).not.toContainText("bob");
+    await expect(page.getByLabel("Change peer")).not.toContainText("alice");
+    await expect(page.getByLabel("Change peer")).not.toContainText("bob");
 
     await expect(page.getByTitle("Change branch")).toBeVisible();
     await expect(
@@ -372,10 +372,10 @@ test("peer and branch switching", async ({ page }) => {
 
   // Bob's peer.
   {
-    await page.getByTitle("Change peer").click();
+    await page.getByLabel("Change peer").click();
     await page.getByRole("link", { name: "bob" }).click();
-    await expect(page.getByTitle("Change peer")).toContainText("bob");
-    await expect(page.getByTitle("Change peer")).not.toHaveText("delegate");
+    await expect(page.getByLabel("Change peer")).toContainText("bob");
+    await expect(page.getByLabel("Change peer")).not.toHaveText("delegate");
 
     // Default `main` branch.
     {
@@ -402,7 +402,7 @@ test("peer and branch switching", async ({ page }) => {
 test("only one modal can be open at a time", async ({ page }) => {
   await page.goto(sourceBrowsingUrl);
 
-  await page.getByTitle("Change peer").click();
+  await page.getByLabel("Change peer").click();
   await page
     .getByRole("link", {
       name: "alice delegate",
@@ -427,7 +427,7 @@ test("only one modal can be open at a time", async ({ page }) => {
   await expect(page.getByText("bob")).not.toBeVisible();
   await expect(page.getByText("feature/branch")).toBeVisible();
 
-  await page.getByTitle("Change peer").click();
+  await page.getByLabel("Change peer").click();
   await expect(page.getByText("Code font")).not.toBeVisible();
   await expect(page.getByText("Use the Radicle CLI")).not.toBeVisible();
   await expect(page.getByText("bob")).toBeVisible();
diff --git a/tests/e2e/project/commit.spec.ts b/tests/e2e/project/commit.spec.ts
index 6ce4ffbbaf..401d4fa651 100644
--- a/tests/e2e/project/commit.spec.ts
+++ b/tests/e2e/project/commit.spec.ts
@@ -13,7 +13,7 @@ const commitUrl = `${sourceBrowsingUrl}/commits/${bobHead}`;
 
 test("navigation from commit list", async ({ page }) => {
   await page.goto(sourceBrowsingUrl);
-  await page.getByTitle("Change peer").click();
+  await page.getByLabel("Change peer").click();
   await page.getByRole("link", { name: "bob" }).click();
   await page
     .getByRole("link", { name: `Commits ${bobMainCommitCount}` })
@@ -43,9 +43,7 @@ test("modified file", async ({ page }) => {
   // Commit header.
   {
     await expect(page.getByText("Update readme")).toBeVisible();
-    await expect(
-      page.getByRole("button", { name: shortBobHead }),
-    ).toBeVisible();
+    await expect(page.getByLabel("commit-id")).toHaveText(shortBobHead);
   }
 
   // Diff header.
diff --git a/tests/e2e/project/commits.spec.ts b/tests/e2e/project/commits.spec.ts
index 8be16ce30e..c2953105bb 100644
--- a/tests/e2e/project/commits.spec.ts
+++ b/tests/e2e/project/commits.spec.ts
@@ -20,14 +20,14 @@ test("peer and branch switching", async ({ page }) => {
 
   // Alice's peer.
   {
-    await page.getByTitle("Change peer").click();
+    await page.getByLabel("Change peer").click();
     await page
       .getByRole("link", {
         name: "alice delegate",
       })
       .click();
 
-    await expect(page.getByTitle("Change peer")).toHaveText("alice Delegate");
+    await expect(page.getByLabel("Change peer")).toHaveText("alice Delegate");
 
     await expect(page.getByText("Thursday, November 17, 2022")).toBeVisible();
     await expect(page.locator(".list .teaser")).toHaveCount(
@@ -65,10 +65,10 @@ test("peer and branch switching", async ({ page }) => {
 
   // Bob's peer.
   {
-    await page.getByTitle("Change peer").click();
+    await page.getByLabel("Change peer").click();
     await page.getByRole("link", { name: "bob" }).click();
 
-    await expect(page.getByTitle("Change peer")).toContainText("bob");
+    await expect(page.getByLabel("Change peer")).toContainText("bob");
 
     await expect(page.getByText("Wednesday, December 21, 2022")).toBeVisible();
     await expect(page.locator(".list").first().locator(".teaser")).toHaveCount(
@@ -155,9 +155,9 @@ test("relative timestamps", async ({ page }) => {
     .getByRole("link", { name: `Commits ${aliceMainCommitCount}` })
     .click();
 
-  await page.getByTitle("Change peer").click();
+  await page.getByLabel("Change peer").click();
   await page.getByRole("link", { name: "bob" }).click();
-  await expect(page.getByTitle("Change peer")).toHaveText("bob");
+  await expect(page.getByLabel("Change peer")).toHaveText("bob");
   const latestCommit = page.locator(".teaser").first();
   await expect(latestCommit).toContainText(
     `Bob Belcher committed ${shortBobHead} now`,