diff --git a/app/features/calendar/routes/events.module.css b/app/features/calendar/routes/events.module.css
index 44bb705a9..c86b90f8e 100644
--- a/app/features/calendar/routes/events.module.css
+++ b/app/features/calendar/routes/events.module.css
@@ -13,7 +13,7 @@
 	cursor: pointer;
 	color: var(--color-text-high);
 	font-weight: var(--weight-semi);
-	font-size: var(--font-3xs);
+	font-size: var(--font-2xs);
 }
 
 .filterRadioSelected {
diff --git a/app/features/calendar/routes/events.tsx b/app/features/calendar/routes/events.tsx
index 47043a36c..9536ab3f3 100644
--- a/app/features/calendar/routes/events.tsx
+++ b/app/features/calendar/routes/events.tsx
@@ -16,19 +16,22 @@ export const handle: SendouRouteHandle = {
 	i18n: ["calendar"],
 };
 
-// xxx: counts for each filter
-type ViewFilter = "registered" | "hosting" | "scrims" | "saved";
+const VIEW_FILTERS = ["registered", "hosting", "scrims", "saved"] as const;
+type ViewFilter = (typeof VIEW_FILTERS)[number];
 
 export default function EventsPage() {
 	const { t } = useTranslation(["calendar"]);
 	const data = useLoaderData<EventsLoaderData>();
-	const [filter, setFilter] = useState<ViewFilter>("registered");
+
+	const defaultFilter =
+		VIEW_FILTERS.find((key) => data[key].length > 0) ?? "registered";
+	const [filter, setFilter] = useState<ViewFilter>(defaultFilter);
 
 	const viewLabels: Record<ViewFilter, string> = {
-		registered: t("calendar:events.view.registered"),
-		hosting: t("calendar:events.view.hosting"),
-		scrims: t("calendar:events.view.scrims"),
-		saved: t("calendar:events.view.saved"),
+		registered: `${t("calendar:events.view.registered")} (${data.registered.length})`,
+		hosting: `${t("calendar:events.view.hosting")} (${data.hosting.length})`,
+		scrims: `${t("calendar:events.view.scrims")} (${data.scrims.length})`,
+		saved: `${t("calendar:events.view.saved")} (${data.saved.length})`,
 	};
 
 	const shownEvents =
@@ -57,21 +60,19 @@ export default function EventsPage() {
 						orientation="horizontal"
 						className="stack horizontal xs"
 					>
-						{(["registered", "hosting", "scrims", "saved"] as const).map(
-							(value) => (
-								<Radio key={value} value={value}>
-									{({ isSelected }) => (
-										<span
-											className={clsx(styles.filterRadio, {
-												[styles.filterRadioSelected]: isSelected,
-											})}
-										>
-											{viewLabels[value]}
-										</span>
-									)}
-								</Radio>
-							),
-						)}
+						{VIEW_FILTERS.map((value) => (
+							<Radio key={value} value={value}>
+								{({ isSelected }) => (
+									<span
+										className={clsx(styles.filterRadio, {
+											[styles.filterRadioSelected]: isSelected,
+										})}
+									>
+										{viewLabels[value]}
+									</span>
+								)}
+							</Radio>
+						))}
 					</RadioGroup>
 				)}
 			</div>
diff --git a/app/features/friends/routes/friends.module.css b/app/features/friends/routes/friends.module.css
index 499528af3..b135d44da 100644
--- a/app/features/friends/routes/friends.module.css
+++ b/app/features/friends/routes/friends.module.css
@@ -27,7 +27,7 @@
 	cursor: pointer;
 	color: var(--color-text-high);
 	font-weight: var(--weight-semi);
-	font-size: var(--font-3xs);
+	font-size: var(--font-2xs);
 }
 
 .filterRadioSelected {
diff --git a/app/features/friends/routes/friends.tsx b/app/features/friends/routes/friends.tsx
index 8f81c5b69..51e33d9ae 100644
--- a/app/features/friends/routes/friends.tsx
+++ b/app/features/friends/routes/friends.tsx
@@ -20,7 +20,8 @@ export const handle: SendouRouteHandle = {
 	i18n: ["friends"],
 };
 
-type ViewFilter = "friends" | "team" | "all";
+const VIEW_FILTERS = ["friends", "team", "all"] as const;
+type ViewFilter = (typeof VIEW_FILTERS)[number];
 
 export default function FriendsPage() {
 	const data = useLoaderData<FriendsLoaderData>();
@@ -141,12 +142,21 @@ function PendingRequestsSection() {
 function FriendsListSection() {
 	const { t } = useTranslation(["common", "friends"]);
 	const data = useLoaderData<FriendsLoaderData>();
-	const [filter, setFilter] = useState<ViewFilter>("friends");
+	const allCount = resolveShownItems("all", data).length;
+	const filterCounts: Record<ViewFilter, number> = {
+		friends: data.friends.length,
+		team: data.teamMembers.length,
+		all: allCount,
+	};
+
+	const defaultFilter =
+		VIEW_FILTERS.find((key) => filterCounts[key] > 0) ?? "friends";
+	const [filter, setFilter] = useState<ViewFilter>(defaultFilter);
 
 	const viewLabels: Record<ViewFilter, string> = {
-		friends: t("friends:view.friends"),
-		team: t("friends:view.teamMembers"),
-		all: t("friends:view.all"),
+		friends: `${t("friends:view.friends")} (${filterCounts.friends})`,
+		team: `${t("friends:view.teamMembers")} (${filterCounts.team})`,
+		all: `${t("friends:view.all")} (${filterCounts.all})`,
 	};
 
 	const shownItems = resolveShownItems(filter, data);
@@ -166,7 +176,7 @@ function FriendsListSection() {
 					orientation="horizontal"
 					className="stack horizontal xs"
 				>
-					{(["friends", "team", "all"] as const).map((value) => (
+					{VIEW_FILTERS.map((value) => (
 						<Radio key={value} value={value}>
 							{({ isSelected }) => (
 								<span
diff --git a/app/features/user-page/components/MutualFriends.module.css b/app/features/user-page/components/MutualFriends.module.css
index 485c966f0..de688ba83 100644
--- a/app/features/user-page/components/MutualFriends.module.css
+++ b/app/features/user-page/components/MutualFriends.module.css
@@ -26,11 +26,6 @@
 	margin-inline: var(--s-1);
 }
 
-.centered {
-	display: flex;
-	justify-content: center;
-}
-
 .list {
 	display: flex;
 	flex-direction: column;