diff --git a/Foxnouns.Frontend/src/lib/pageUtils.svelte.ts b/Foxnouns.Frontend/src/lib/pageUtils.svelte.ts
new file mode 100644
index 0000000..5f45815
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/pageUtils.svelte.ts
@@ -0,0 +1,10 @@
+import { page } from "$app/state";
+
+export const isActive = (path: string | string[], prefix: boolean = false) =>
+	typeof path === "string"
+		? prefix
+			? page.url.pathname.startsWith(path)
+			: page.url.pathname === path
+		: prefix
+			? path.some((p) => page.url.pathname.startsWith(p))
+			: path.some((p) => page.url.pathname === p);
diff --git a/Foxnouns.Frontend/src/routes/settings/+layout.svelte b/Foxnouns.Frontend/src/routes/settings/+layout.svelte
index 11801cf..8f18c8e 100644
--- a/Foxnouns.Frontend/src/routes/settings/+layout.svelte
+++ b/Foxnouns.Frontend/src/routes/settings/+layout.svelte
@@ -1,20 +1,11 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { page } from "$app/state";
 	import { t } from "$lib/i18n";
 	import { Nav, NavLink } from "@sveltestrap/sveltestrap";
+	import { isActive } from "$lib/pageUtils.svelte";
 
 	type Props = { children: Snippet };
 	let { children }: Props = $props();
-
-	const isActive = (path: string | string[], prefix: boolean = false) =>
-		typeof path === "string"
-			? prefix
-				? page.url.pathname.startsWith(path)
-				: page.url.pathname === path
-			: prefix
-				? path.some((p) => page.url.pathname.startsWith(p))
-				: path.some((p) => page.url.pathname === p);
 </script>
 
 <svelte:head>
diff --git a/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout@.svelte b/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout@.svelte
index faae426..f3f4301 100644
--- a/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout@.svelte
+++ b/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout@.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { page } from "$app/state";
 	import { t } from "$lib/i18n";
 	import type { LayoutData } from "./$types";
+	import { isActive } from "$lib/pageUtils.svelte";
 
 	type Props = { data: LayoutData; children: Snippet };
 	let { data, children }: Props = $props();
 
-	const isActive = (path: string) => page.url.pathname === path;
-
 	let name = $derived(
 		data.member.display_name === data.member.name
 			? data.member.name
diff --git a/Foxnouns.Frontend/src/routes/settings/profile/+layout@.svelte b/Foxnouns.Frontend/src/routes/settings/profile/+layout@.svelte
index ea5eeee..f0edb81 100644
--- a/Foxnouns.Frontend/src/routes/settings/profile/+layout@.svelte
+++ b/Foxnouns.Frontend/src/routes/settings/profile/+layout@.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { page } from "$app/state";
 	import { t } from "$lib/i18n";
 	import type { LayoutData } from "./$types";
+	import { isActive } from "$lib/pageUtils.svelte";
 
 	type Props = { data: LayoutData; children: Snippet };
 	let { data, children }: Props = $props();
-
-	const isActive = (path: string) => page.url.pathname === path;
 </script>
 
 <svelte:head>