diff --git a/web/src/lib/components/repo/FileTree.svelte b/web/src/lib/components/repo/FileTree.svelte
index a855304df..a0554fdb5 100644
--- a/web/src/lib/components/repo/FileTree.svelte
+++ b/web/src/lib/components/repo/FileTree.svelte
@@ -75,7 +75,7 @@
 					{#if entry.lastCommitHash && entry.lastCommitMessage}
 						<a
 							href={resolve(`${base}/commit/${entry.lastCommitHash}` as "/")}
-							class="block truncate text-foreground-subtle no-underline hover:underline"
+							class="block truncate text-foreground-muted no-underline hover:text-foreground-default hover:underline"
 						>
 							{splitMessage(entry.lastCommitMessage)[0]}
 						</a>
@@ -84,14 +84,14 @@
 			{/if}
 
 			<div
-				class={`text-right typography-paragraph-small text-foreground-subtle ${
+				class={`text-right text-foreground-subtle ${
 					withMessage ? "col-span-4 md:col-span-2" : "col-span-1"
 				}`}
 			>
 				{#if entry.lastCommitHash && entry.lastCommitWhen}
 					<a
 						href={resolve(`${base}/commit/${entry.lastCommitHash}` as "/")}
-						class="text-foreground-subtle no-underline hover:underline"
+						class="text-foreground-muted no-underline hover:text-foreground-default hover:underline"
 						title={entry.lastCommitMessage}
 					>
 						<TimeAgo value={entry.lastCommitWhen} />
diff --git a/web/src/lib/components/repo/LastCommitPanel.svelte b/web/src/lib/components/repo/LastCommitPanel.svelte
index d762cf317..c9d6a04e4 100644
--- a/web/src/lib/components/repo/LastCommitPanel.svelte
+++ b/web/src/lib/components/repo/LastCommitPanel.svelte
@@ -2,6 +2,7 @@
 	import { resolve } from "$app/paths";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 	import type { CommitSummary } from "./types";
 
 	interface Props {
@@ -16,27 +17,25 @@
 </script>
 
 <div
-	class="mb-3 hidden flex-wrap items-center justify-between gap-2 border-b border-border-default pb-2 typography-paragraph-small md:flex"
+	class="mb-3 hidden flex-wrap items-center justify-between gap-2 typography-paragraph-small md:flex"
 >
 	<div class="flex min-w-0 flex-wrap items-center gap-2">
 		{#if commit.authorName}
 			<!-- no email→did mapping yet, always the placeholder -->
 			<Avatar size="regular" />
 			<span class="truncate text-foreground-default">{commit.authorName}</span>
-			<span class="text-foreground-subtle" aria-hidden="true">&middot;</span>
+			<Separator variant="dot" class="text-foreground-subtle!" />
 		{/if}
 		<a {href} class="min-w-0 truncate text-foreground-default no-underline hover:underline">
 			{commit.subject}
 		</a>
 		{#if commit.when}
-			<span class="text-foreground-subtle" aria-hidden="true">&middot;</span>
-			<span class="text-foreground-subtle"><TimeAgo value={commit.when} /></span>
+			<Separator variant="dot" class="text-foreground-subtle!" />
+			<span class="text-foreground-muted"><TimeAgo value={commit.when} /></span>
 		{/if}
 	</div>
-	<a
-		{href}
-		class="w-fit rounded-sm bg-background-inset px-2 py-1 typography-monospace-small font-mono text-foreground-muted no-underline hover:underline"
-	>
+	<a {href} class="typography-monospace-small text-foreground-muted no-underline hover:underline">
 		{commit.shortHash}
 	</a>
 </div>
+<Separator class="my-4" />
diff --git a/web/src/lib/components/repo/TreeHeader.svelte b/web/src/lib/components/repo/TreeHeader.svelte
index d3eb8b52f..ac66235b8 100644
--- a/web/src/lib/components/repo/TreeHeader.svelte
+++ b/web/src/lib/components/repo/TreeHeader.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Separator from "../ui/Separator.svelte";
 	import RefChip from "./RefChip.svelte";
 	import RepoCrumbs from "./RepoCrumbs.svelte";
 	import type { TreeEntrySummary } from "./types";
@@ -20,16 +21,16 @@
 	const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? "" : "s"}`;
 </script>
 
-<div class="mb-2 flex items-center justify-between gap-2 typography-paragraph-regular">
+<div class="mb-2 flex items-center justify-between gap-2 typography-paragraph-regular md:mb-4">
 	<div class="flex min-w-0 items-center gap-3">
 		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
-		<div class="flex items-center gap-2 text-foreground-muted">
+		<div class="flex items-center gap-2 typography-paragraph-small text-foreground-muted">
 			{#if folders > 0}
 				<span>{plural(folders, "folder")}</span>
 			{/if}
 			{#if folders > 0 && files > 0}
-				<span aria-hidden="true">&middot;</span>
+				<Separator variant="dot" />
 			{/if}
 			{#if files > 0}
 				<span>{plural(files, "file")}</span>
diff --git a/web/src/lib/components/ui/Separator.svelte b/web/src/lib/components/ui/Separator.svelte
index 379df5fad..bc597359c 100644
--- a/web/src/lib/components/ui/Separator.svelte
+++ b/web/src/lib/components/ui/Separator.svelte
@@ -18,5 +18,5 @@
 		<hr class="min-h-px w-full border-none bg-border-default {className}" />
 	{/if}
 {:else if variant === "dot"}
-	<span class="text-inherit {className}">&middot</span>
+	<span class="text-inherit select-none {className}">&middot</span>
 {/if}