diff --git a/web/src/lib/components/profile/FollowCardContent.svelte b/web/src/lib/components/profile/FollowCardContent.svelte
index 4e39ed3d..021a84fe 100644
--- a/web/src/lib/components/profile/FollowCardContent.svelte
+++ b/web/src/lib/components/profile/FollowCardContent.svelte
@@ -5,6 +5,7 @@
 	import FollowButton from "./FollowButton.svelte";
 	import type { FollowChange, PersonData } from "./types";
 	import { createOptimisticCount } from "$lib/optimistic.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	let { person }: { person: PersonData } = $props();
 
@@ -16,7 +17,7 @@
 	const followed = (change: FollowChange) => followerCount.adjust(change.delta);
 </script>
 
-<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+<div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
 	<div class="flex min-w-0 flex-1 items-center gap-4">
 		<div class="flex size-24 shrink-0 items-center justify-center">
 			<Avatar did={person.did} handle={person.handle} size="full" class="p-2" />
@@ -34,7 +35,7 @@
 					{person.description}
 				</p>
 			{/if}
-			<div class="my-2 flex max-w-full items-center gap-2 truncate typography-paragraph-small text-foreground-subtle">
+			<div class="my-2 flex max-w-full items-center gap-2 truncate text-foreground-subtle">
 				<Users class="size-4 shrink-0" />
 				<span
 					><a
@@ -42,7 +43,7 @@
 						class="hover:text-foreground-default hover:underline">{followerCount.value} followers</a
 					></span
 				>
-				<span class="select-none after:content-['·']"></span>
+				<Separator variant="dot"/>
 				<span
 					><a
 						href={resolve(`/${person.handle}?tab=following` as "/")}
diff --git a/web/src/lib/components/timeline/TimelineCard.svelte b/web/src/lib/components/timeline/TimelineCard.svelte
index 9da1a47c..2ced27fe 100644
--- a/web/src/lib/components/timeline/TimelineCard.svelte
+++ b/web/src/lib/components/timeline/TimelineCard.svelte
@@ -7,11 +7,11 @@
 
 <Card border shadow background padding="none">
 	<div
-		class="flex flex-wrap items-center gap-2 border-b border-border-default px-6 py-3 typography-paragraph-small text-foreground-muted"
+		class="flex flex-wrap items-center gap-2 border-b border-border-default px-6 py-3 text-foreground-muted"
 	>
 		{@render header()}
 	</div>
-	<div class="px-6 py-4">
+	<div class="p-4">
 		{@render children()}
 	</div>
 </Card>