diff --git a/src/routes/(app)/habits/CounterHabitButton.svelte b/src/routes/(app)/habits/CounterHabitButton.svelte
index a573b29..5773b12 100644
--- a/src/routes/(app)/habits/CounterHabitButton.svelte
+++ b/src/routes/(app)/habits/CounterHabitButton.svelte
@@ -76,7 +76,16 @@
 	}
 	
 	const displayUnit = $derived(getDisplayUnit(unit));
-	
+
+	// Dynamic font size based on digit count
+	const fontSize = $derived.by(() => {
+		const digits = count.toString().length;
+		if (digits <= 2) return 'text-lg';
+		if (digits === 3) return 'text-base';
+		if (digits === 4) return 'text-sm';
+		return 'text-xs';
+	});
+
 	let checked = $derived(count >= target);
 	let showConfetti = $state(false);
 	// svelte-ignore state_referenced_locally
@@ -188,7 +197,7 @@
 		{#if displayUnit.text && displayUnit.isShort}
 			<!-- Single letter unit: horizontal layout -->
 			<div class="flex items-baseline gap-1">
-				<NumberFlow value={count} class={cn("font-semibold text-lg", hideNumber && "invisible")} />
+				<NumberFlow value={count} class={cn("font-semibold tabular-nums", fontSize, hideNumber && "invisible")} />
 				{#if count > 0}
 					<span class="text-[11px] opacity-75 font-medium uppercase">{displayUnit.text}</span>
 				{/if}
@@ -196,14 +205,14 @@
 		{:else if displayUnit.text && !displayUnit.isShort}
 			<!-- 2-3 letter unit: vertical layout -->
 			<div class="flex flex-col items-center justify-center">
-				<NumberFlow value={count} class={cn("font-semibold text-lg leading-tight", hideNumber && "invisible")} />
+				<NumberFlow value={count} class={cn("font-semibold tabular-nums leading-tight", fontSize, hideNumber && "invisible")} />
 				{#if count > 0}
 					<span class="text-[11px] opacity-75 font-medium lowercase leading-none -mt-1">{displayUnit.text}</span>
 				{/if}
 			</div>
 		{:else}
 			<!-- No unit: just the number -->
-			<NumberFlow value={count} class={cn("font-semibold", hideNumber && "invisible")} />
+			<NumberFlow value={count} class={cn("font-semibold tabular-nums", fontSize, hideNumber && "invisible")} />
 		{/if}
 	{:else if checked}
 		<Check class="text-primary-foreground" />