diff --git a/frontend/src/lib/components/Anchor/Anchor.svelte b/frontend/src/lib/components/Anchor/Anchor.svelte
new file mode 100644
index 0000000000..cb8591413c
--- /dev/null
+++ b/frontend/src/lib/components/Anchor/Anchor.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { breadcrumbs, goto, type Breadcrumb } from '$lib/utils/breadcrumbs';
+
+	export let href = '';
+	export let breadcrumbAction: 'push' | 'replace' = 'push';
+	export let label = '';
+	export let prefixCrumbs: Breadcrumb[] = [];
+	export let stopPropagation: boolean = false;
+
+	const handleClick = (event) => {
+		const navLabel: string = label || event.target.innerText;
+		if (!navLabel) return;
+
+		const crumb = { label: navLabel, href };
+		const _crumbs = [...prefixCrumbs, crumb];
+		breadcrumbs[breadcrumbAction](_crumbs);
+
+		if (stopPropagation) {
+			event.stopPropagation();
+			event.preventDefault();
+			goto(href, { breadcrumbAction });
+		}
+	};
+</script>
+
+<a on:click={handleClick} {href} {...$$restProps}>
+	<slot />
+</a>
diff --git a/frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte b/frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte
index 3e94cd211d..79adbf2e58 100644
--- a/frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte
+++ b/frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte
@@ -1,59 +1,61 @@
 <script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { breadcrumbs, type Breadcrumb } from '$lib/utils/breadcrumbs';
+	import { URL_MODEL_MAP } from '$lib/utils/crud';
 	import { safeTranslate } from '$lib/utils/i18n';
+	import { pageTitle } from '$lib/utils/stores';
 
-	import { page } from '$app/stores';
-	import { toCamelCase } from '$lib/utils/locales';
-	import { breadcrumbObject, pageTitle } from '$lib/utils/stores';
-	import { listViewFields } from '$lib/utils/table';
-	import * as m from '$paraglide/messages';
+	async function trimBreadcrumbsToCurrentPath(
+		breadcrumbs: Breadcrumb[],
+		currentPath: string
+	): Promise<Breadcrumb[]> {
+		const idx = breadcrumbs.findIndex((c) => c.href === currentPath);
+		if (idx >= 0 && idx < breadcrumbs.length - 1) {
+			breadcrumbs = breadcrumbs.slice(0, idx + 1);
+		}
+		return breadcrumbs;
+	}
 
-	let crumbs: Array<{ label: string; href: string; icon?: string }> = [];
+	function getPageTitle(): string {
+		// Check each source in priority order
+		const title =
+			$page.data.title ??
+			$page.data.str ??
+			$page.data.name ??
+			getBreadcrumbTitle() ??
+			getUrlModelTitle();
 
-	const disableWorkhopLink = ['workshop1', 'workshop2', 'workshop3', 'workshop4', 'workshop5']; // Disable workshops links in breadcrumb
+		return safeTranslate(title);
+	}
 
-	$: {
-		// Remove zero-length tokens.
-		const tokens = $page.url.pathname.split('/').filter((t) => t !== '');
+	function getBreadcrumbTitle(): string | undefined {
+		return $breadcrumbs.length > 1 ? $breadcrumbs[$breadcrumbs.length - 1]?.label : undefined;
+	}
 
-		// Create { label, href } pairs for each token.
-		let tokenPath = '';
-		crumbs = tokens.map((t) => {
-			tokenPath += '/' + t;
-			if (t === $breadcrumbObject?.id) {
-				if ($breadcrumbObject.name) {
-					t = $breadcrumbObject.name;
-				} else if ($breadcrumbObject.first_name && $breadcrumbObject.last_name) {
-					t = `${$breadcrumbObject.first_name} ${$breadcrumbObject.last_name}`;
-				} else {
-					t = $breadcrumbObject.email;
-				}
-			} else if (t === 'folders') {
-				t = 'domains';
-			} else {
-				t = t.replace(/-/g, ' ');
-				t = toCamelCase(t);
-			}
-			return {
-				label: $page.data.label || t,
-				href:
-					Object.keys(listViewFields).includes(tokens[0]) &&
-					!listViewFields[tokens[0]].breadcrumb_link_disabled &&
-					!disableWorkhopLink.includes(t) // Disable workshops links in breadcrumb
-						? tokenPath
-						: null
-			};
-		});
+	function getUrlModelTitle(): string | undefined {
+		const lastPathSegment = $page.url.pathname.split('/').pop() as string;
+		return URL_MODEL_MAP[lastPathSegment]?.localNamePlural;
+	}
+
+	afterNavigate(async () => {
+		$breadcrumbs = await trimBreadcrumbsToCurrentPath($breadcrumbs, $page.url.pathname);
+	});
 
-		crumbs.unshift({ label: m.home(), href: '/', icon: 'fa-regular fa-compass' });
-		if (crumbs[crumbs.length - 1].label != 'edit') pageTitle.set(crumbs[crumbs.length - 1].label);
-		else pageTitle.set(m.edit() + ' ' + crumbs[crumbs.length - 2].label);
+	$: {
+		$pageTitle = getPageTitle();
+		if ($breadcrumbs.length < 2)
+			breadcrumbs.push([{ label: $pageTitle, href: $page.url.pathname }]);
 	}
 </script>
 
-<ol class="breadcrumb-nonresponsive">
-	{#each crumbs as c, i}
-		{#if i == crumbs.length - 1}
-			<span class="text-sm text-gray-500 font-semibold antialiased" data-testid="crumb-item">
+<ol class="breadcrumb-nonresponsive h-6 overflow-hidden whitespace-nowrap">
+	{#each $breadcrumbs as c, i}
+		{#if i == $breadcrumbs.length - 1}
+			<span
+				class="max-w-[64ch] overflow-hidden text-sm text-gray-500 font-semibold antialiased"
+				data-testid="crumb-item"
+			>
 				{#if c.icon}
 					<i class={c.icon} />
 				{/if}
@@ -63,9 +65,10 @@
 			<li class="crumb">
 				{#if c.href}
 					<a
-						class="unstyled text-sm hover:text-primary-500 font-semibold antialiased whitespace-nowrap"
+						class="max-w-[64ch] overflow-hidden unstyled text-sm hover:text-primary-500 font-semibold antialiased whitespace-nowrap"
 						data-testid="crumb-item"
 						href={c.href}
+						on:click={() => breadcrumbs.slice(i)}
 					>
 						{#if c.icon}
 							<i class={c.icon} />
@@ -73,7 +76,10 @@
 						{safeTranslate(c.label)}
 					</a>
 				{:else}
-					<span class="text-sm text-gray-500 font-semibold antialiased" data-testid="crumb-item">
+					<span
+						class="max-w-[64ch] overflow-hidden text-sm text-gray-500 font-semibold antialiased"
+						data-testid="crumb-item"
+					>
 						{#if c.icon}
 							<i class={c.icon} />
 						{/if}
diff --git a/frontend/src/lib/components/Calendar/Day.svelte b/frontend/src/lib/components/Calendar/Day.svelte
index 57556ec79c..045ba2ec4c 100644
--- a/frontend/src/lib/components/Calendar/Day.svelte
+++ b/frontend/src/lib/components/Calendar/Day.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let day: number;
 	export let month: number;
@@ -34,9 +35,9 @@
 				<div class="flex flex-col justify-center h-full">
 					{#each displayInfo(day, month, year) as eta}
 						<li class="unstyled hover:underline">
-							<a href={eta[1]}>
+							<Anchor href={eta[1]}>
 								{eta[0]}
-							</a>
+							</Anchor>
 						</li>
 					{/each}
 				</div>
@@ -52,9 +53,9 @@
 				<div class="flex flex-col justify-center h-full">
 					{#each displayInfo(day, month, year) as eta}
 						<li class="unstyled hover:underline text-red-500">
-							<a href={eta[1]}>
+							<Anchor href={eta[1]}>
 								{eta[0]}
-							</a>
+							</Anchor>
 						</li>
 					{/each}
 				</div>
@@ -70,9 +71,9 @@
 				<div class="flex flex-col justify-center h-full">
 					{#each displayInfo(day, month, year) as eta}
 						<li class="unstyled hover:underline text-primary-500">
-							<a href={eta[1]}>
+							<Anchor href={eta[1]}>
 								{eta[0]}
-							</a>
+							</Anchor>
 						</li>
 					{/each}
 				</div>
diff --git a/frontend/src/lib/components/DataViz/Article.svelte b/frontend/src/lib/components/DataViz/Article.svelte
index 75c742f43f..531a64f1d4 100644
--- a/frontend/src/lib/components/DataViz/Article.svelte
+++ b/frontend/src/lib/components/DataViz/Article.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
+
 	export let title;
 	export let desc;
 	export let link;
@@ -11,11 +13,11 @@
 	<div class="rounded-[10px] bg-white p-4 !pt-20 sm:p-6 h-full">
 		<div class="block text-xs text-gray-500 min-h-[2.5rem] flex items-end">{desc}</div>
 
-		<a href={link}>
+		<Anchor href={link}>
 			<h3 class="mt-0.5 text-lg font-medium text-gray-900">
 				{title}
 			</h3>
-		</a>
+		</Anchor>
 
 		<div class="mt-4 flex flex-wrap gap-1">
 			{#each tags as tag}
diff --git a/frontend/src/lib/components/DataViz/Card.svelte b/frontend/src/lib/components/DataViz/Card.svelte
index 84c1cdc37f..70898b93d9 100644
--- a/frontend/src/lib/components/DataViz/Card.svelte
+++ b/frontend/src/lib/components/DataViz/Card.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
+
 	export let count: string = '0';
 	export let label: string;
 	export let href: string = '#';
@@ -13,8 +15,9 @@
 	export let customClass: string = '';
 </script>
 
-<a
+<Anchor
 	{href}
+	{label}
 	class="flex flex-col shadow-lg text-purple-800 p-2 h-28 bg-white hover:bg-violet-50 {cEmphasis} {customClass}"
 >
 	<div class="text-xs">
@@ -25,7 +28,7 @@
 		<p class="text-4xl font-bold text-left">{count}</p>
 		<div class="text-sm">{label}</div>
 	</div>
-</a>
+</Anchor>
 
 <style>
 	@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
diff --git a/frontend/src/lib/components/DetailView/DetailView.svelte b/frontend/src/lib/components/DetailView/DetailView.svelte
index 95303fcc83..5f0a283af2 100644
--- a/frontend/src/lib/components/DetailView/DetailView.svelte
+++ b/frontend/src/lib/components/DetailView/DetailView.svelte
@@ -1,33 +1,29 @@
 <script lang="ts">
-	import { safeTranslate } from '$lib/utils/i18n';
 	import { page } from '$app/stores';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
+	import List from '$lib/components/List/List.svelte';
 	import ConfirmModal from '$lib/components/Modals/ConfirmModal.svelte';
 	import CreateModal from '$lib/components/Modals/CreateModal.svelte';
 	import MissingConstraintsModal from '$lib/components/Modals/MissingConstraintsModal.svelte';
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+	import { ISO_8601_REGEX } from '$lib/utils/constants';
+	import { URL_MODEL_MAP, checkConstraints } from '$lib/utils/crud';
+	import { getModelInfo } from '$lib/utils/crud.js';
+	import { formatDateOrDateTime } from '$lib/utils/datetime';
+	import { isURL } from '$lib/utils/helpers';
+	import { safeTranslate } from '$lib/utils/i18n';
+	import { toCamelCase } from '$lib/utils/locales.js';
+	import * as m from '$paraglide/messages.js';
+	import { languageTag } from '$paraglide/runtime.js';
 	import type {
 		ModalComponent,
 		ModalSettings,
 		ModalStore,
 		ToastStore
 	} from '@skeletonlabs/skeleton';
-	import { TabGroup, Tab, getModalStore, getToastStore } from '@skeletonlabs/skeleton';
-	import { breadcrumbObject } from '$lib/utils/stores';
-	import { superForm } from 'sveltekit-superforms';
-	import { getModelInfo } from '$lib/utils/crud.js';
-	import { URL_MODEL_MAP } from '$lib/utils/crud';
-	import { isURL } from '$lib/utils/helpers';
-	import { toCamelCase } from '$lib/utils/locales.js';
-	import { checkConstraints } from '$lib/utils/crud';
-	import { languageTag } from '$paraglide/runtime.js';
-	import * as m from '$paraglide/messages.js';
-	import { ISO_8601_REGEX } from '$lib/utils/constants';
-	import { formatDateOrDateTime } from '$lib/utils/datetime';
-	import List from '$lib/components/List/List.svelte';
-	import { SECURITY_OBJECTIVE_SCALE_MAP } from '$lib/utils/constants';
+	import { Tab, TabGroup, getModalStore, getToastStore } from '@skeletonlabs/skeleton';
 
 	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
 
 	const modalStore: ModalStore = getModalStore();
 	const toastStore: ToastStore = getToastStore();
@@ -51,8 +47,6 @@
 		);
 	}
 
-	$: breadcrumbObject.set(data.data);
-
 	let tabSet = 0;
 
 	function handleFormUpdated({
@@ -288,7 +282,9 @@
 									{#if value !== null && value !== undefined && value !== ''}
 										{#if key === 'library'}
 											{@const itemHref = `/libraries/${value.id}?loaded`}
-											<a href={itemHref} class="anchor">{value.name}</a>
+											<Anchor breadcrumbAction="push" href={itemHref} class="anchor"
+												>{value.name}</Anchor
+											>
 										{:else if key === 'severity'}
 											<!-- We must add translations for the following severity levels -->
 											<!-- Is this a correct way to convert the severity integer to the stringified security level ? -->
@@ -309,7 +305,9 @@
 																		(item) => item.field === key
 																	)?.urlModel
 																}/${val.id}`}
-																<a href={itemHref} class="anchor">{val.str}</a>
+																<Anchor breadcrumbAction="push" href={itemHref} class="anchor"
+																	>{val.str}</Anchor
+																>
 															{:else if val.str}
 																{val.str}
 															{:else}
@@ -327,7 +325,9 @@
 													(item) => item.field === key
 												)?.urlModel
 											}/${value.id}`}
-											<a href={itemHref} class="anchor">{value.str}</a>
+											<Anchor breadcrumbAction="push" href={itemHref} class="anchor"
+												>{value.str}</Anchor
+											>
 											<!-- Shortcut before DetailView refactoring -->
 										{:else if value === 'P1'}
 											<li class="fa-solid fa-flag text-red-500"></li>
@@ -342,7 +342,9 @@
 											<li class="fa-solid fa-flag text-gray-500"></li>
 											{m.p4()}
 										{:else if isURL(value) && !value.startsWith('urn')}
-											<a href={value} target="_blank" class="anchor">{value}</a>
+											<Anchor breadcrumbAction="push" href={value} target="_blank" class="anchor"
+												>{value}</Anchor
+											>
 										{:else if ISO_8601_REGEX.test(value) && (key === 'created_at' || key === 'updated_at' || key === 'expiry_date' || key === 'accepted_at' || key === 'rejected_at' || key === 'revoked_at' || key === 'eta')}
 											{formatDateOrDateTime(value, languageTag())}
 										{:else if m[toCamelCase(value.str || value.name)]}
@@ -384,10 +386,15 @@
 			{/if}
 			{#if displayEditButton()}
 				<div class="flex flex-col space-y-2 ml-4">
-					<a
+					<Anchor
+						breadcrumbAction="push"
 						href={`${$page.url.pathname}/edit?next=${$page.url.pathname}`}
+						label={m.edit()}
 						class="btn variant-filled-primary h-fit"
-						><i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />{m.edit()}</a
+						><i
+							class="fa-solid fa-pen-to-square mr-2"
+							data-testid="edit-button"
+						/>{m.edit()}</Anchor
 					>
 					{#if data.urlModel === 'applied-controls'}
 						<span class="pt-4 font-light text-sm">Power-ups:</span>
diff --git a/frontend/src/lib/components/Forms/ModelForm.svelte b/frontend/src/lib/components/Forms/ModelForm.svelte
index 97393bc4b9..cfa3158807 100644
--- a/frontend/src/lib/components/Forms/ModelForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm.svelte
@@ -48,6 +48,7 @@
 	import FilteringLabelForm from './ModelForm/FilteringLabelForm.svelte';
 	import OperationalScenarioForm from './ModelForm/OperationalScenarioForm.svelte';
 	import StrategicScenarioForm from './ModelForm/StrategicScenarioForm.svelte';
+	import { goto } from '$lib/utils/breadcrumbs';
 
 	export let form: SuperValidated<AnyZodObject>;
 	export let invalidateAll = true; // set to false to keep form data using muliple forms on a page
@@ -70,7 +71,7 @@
 			var currentUrl = window.location.href;
 			var url = new URL(currentUrl);
 			var nextValue = getSecureRedirect(url.searchParams.get('next'));
-			if (nextValue) window.location.href = nextValue;
+			if (nextValue) goto(nextValue);
 		}
 	}
 	$: shape = schema.shape || schema._def.schema.shape;
diff --git a/frontend/src/lib/components/ModelTable/ModelTable.svelte b/frontend/src/lib/components/ModelTable/ModelTable.svelte
index 4202eb821f..710d9944fe 100644
--- a/frontend/src/lib/components/ModelTable/ModelTable.svelte
+++ b/frontend/src/lib/components/ModelTable/ModelTable.svelte
@@ -62,7 +62,11 @@
 		event.stopPropagation();
 		const rowMetaData = $rows[rowIndex].meta;
 		if (!rowMetaData[identifierField] || !URLModel) return;
-		goto(`/${URLModel}/${rowMetaData[identifierField]}${detailQueryParameter}`);
+		goto(`/${URLModel}/${rowMetaData[identifierField]}${detailQueryParameter}`, {
+			label:
+				rowMetaData.str ?? rowMetaData.name ?? rowMetaData.email ?? rowMetaData[identifierField],
+			breadcrumbAction: 'push'
+		});
 	}
 
 	function onRowKeydown(
@@ -98,7 +102,8 @@
 	$: classesBase = `${classProp || backgroundColor}`;
 	$: classesTable = `${element} ${text} ${color}`;
 
-	import { goto } from '$app/navigation';
+	import { goto as _goto } from '$app/navigation';
+	import { goto } from '$lib/utils/breadcrumbs';
 	import { formatDateOrDateTime } from '$lib/utils/datetime';
 	import { DataHandler } from '@vincjo/datatables';
 	import Pagination from './Pagination.svelte';
@@ -164,7 +169,7 @@
 				}
 			}
 		}
-		if (browser) goto($page.url);
+		if (browser) _goto($page.url);
 	}
 
 	$: {
@@ -215,6 +220,7 @@
 	import type { PopupSettings } from '@skeletonlabs/skeleton';
 	import { popup } from '@skeletonlabs/skeleton';
 	import { browser } from '$app/environment';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	const popupFilter: PopupSettings = {
 		event: 'click',
@@ -320,10 +326,8 @@
 													<li>
 														{#if val.str && val.id}
 															{@const itemHref = `/${URL_MODEL_MAP[URLModel]['foreignKeyFields']?.find((item) => item.field === key)?.urlModel}/${val.id}`}
-															<a
-																href={itemHref}
-																class="anchor"
-																on:click={(e) => e.stopPropagation()}>{val.str}</a
+															<Anchor href={itemHref} class="anchor" stopPropagation
+																>{val.str}</Anchor
 															>
 														{:else if val.str}
 															{safeTranslate(val.str)}
@@ -341,8 +345,8 @@
 										{:else if value && value.str}
 											{#if value.id}
 												{@const itemHref = `/${URL_MODEL_MAP[URLModel]['foreignKeyFields']?.find((item) => item.field === key)?.urlModel}/${value.id}`}
-												<a href={itemHref} class="anchor" on:click={(e) => e.stopPropagation()}
-													>{value.str ?? '-'}</a
+												<Anchor href={itemHref} class="anchor" stopPropagation
+													>{value.str ?? '-'}</Anchor
 												>
 											{:else}
 												{value.str ?? '-'}
diff --git a/frontend/src/lib/components/SideBar/SideBarItem.svelte b/frontend/src/lib/components/SideBar/SideBarItem.svelte
index e2bbb92eb1..248015a91e 100644
--- a/frontend/src/lib/components/SideBar/SideBarItem.svelte
+++ b/frontend/src/lib/components/SideBar/SideBarItem.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { safeTranslate } from '$lib/utils/i18n';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let item: any; // TODO: type this
 
@@ -11,8 +12,9 @@
 </script>
 
 {#each item as item}
-	<a
+	<Anchor
 		href={item.href}
+		breadcrumbAction="replace"
 		class="unstyled flex whitespace-nowrap items-center py-2 text-sm font-normal rounded-token {classesActive(
 			item.href ?? ''
 		)}"
@@ -21,6 +23,6 @@
 		<span class="px-4 flex items-center w-full space-x-2 text-xs">
 			<i class="{item.fa_icon} w-1/12" />
 			<span class="text-sm tracking-wide truncate">{safeTranslate(item.name)}</span>
-		</span></a
-	>
+		</span>
+	</Anchor>
 {/each}
diff --git a/frontend/src/lib/components/TableRowActions/TableRowActions.svelte b/frontend/src/lib/components/TableRowActions/TableRowActions.svelte
index 66cdc381f3..35f30b18d2 100644
--- a/frontend/src/lib/components/TableRowActions/TableRowActions.svelte
+++ b/frontend/src/lib/components/TableRowActions/TableRowActions.svelte
@@ -9,6 +9,7 @@
 	import type { AnyZodObject } from 'zod';
 
 	import * as m from '$paraglide/messages';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	const modalStore: ModalStore = getModalStore();
 
@@ -76,18 +77,21 @@
 	<slot name="body" />
 	{#if !hasBody}
 		{#if displayDetail}
-			<a
+			<Anchor
+				breadcrumbAction="push"
 				href={detailURL}
 				class="unstyled cursor-pointer hover:text-primary-500"
-				data-testid="tablerow-detail-button"><i class="fa-solid fa-eye" /></a
+				data-testid="tablerow-detail-button"><i class="fa-solid fa-eye" /></Anchor
 			>
 		{/if}
 		{#if displayEdit}
-			<a
+			<Anchor
+				breadcrumbAction="push"
+				label={m.edit()}
 				href={editURL}
-				on:click={stopPropagation}
+				stopPropagation
 				class="unstyled cursor-pointer hover:text-primary-500"
-				data-testid="tablerow-edit-button"><i class="fa-solid fa-pen-to-square" /></a
+				data-testid="tablerow-edit-button"><i class="fa-solid fa-pen-to-square" /></Anchor
 			>
 		{/if}
 		{#if displayDelete}
diff --git a/frontend/src/lib/utils/breadcrumbs.ts b/frontend/src/lib/utils/breadcrumbs.ts
new file mode 100644
index 0000000000..a83f44c7df
--- /dev/null
+++ b/frontend/src/lib/utils/breadcrumbs.ts
@@ -0,0 +1,73 @@
+import { writable } from 'svelte/store';
+import { goto as _goto } from '$app/navigation';
+import * as m from '$paraglide/messages';
+
+export interface Breadcrumb {
+	label: string;
+	href?: string;
+	icon?: string;
+}
+
+const BREADCRUMBS_MAX_DEPTH = 5;
+
+const homeCrumb: Breadcrumb = { label: m.home(), href: '/', icon: 'fa-regular fa-compass' };
+
+const createBreadcrumbs = (initialValue: Breadcrumb[]) => {
+	const breadcrumbs = writable<Breadcrumb[]>(initialValue);
+
+	function mergeCrumbs(crumbs: Breadcrumb[]) {
+		const mergedCrumbs: Breadcrumb[] = [];
+		for (const crumb of crumbs) {
+			const lastCrumb = mergedCrumbs[mergedCrumbs.length - 1];
+			if (lastCrumb?.href !== crumb.href) {
+				mergedCrumbs.push(crumb);
+			}
+		}
+		return mergedCrumbs;
+	}
+
+	function push(crumb: Breadcrumb[]) {
+		breadcrumbs.update((value) => {
+			const newCrumbs = mergeCrumbs([...value.slice(1, value.length), ...crumb]);
+			return [homeCrumb, ...newCrumbs.slice(-BREADCRUMBS_MAX_DEPTH)];
+		});
+	}
+
+	function replace(crumb: Breadcrumb[]) {
+		breadcrumbs.update(() => {
+			return mergeCrumbs([homeCrumb, ...crumb]);
+		});
+	}
+
+	function slice(index: number) {
+		breadcrumbs.update((value) => {
+			return value.slice(0, index + 1);
+		});
+	}
+
+	return {
+		...breadcrumbs,
+		push,
+		replace,
+		slice
+	};
+};
+
+export const breadcrumbs = createBreadcrumbs([homeCrumb]);
+
+export function goto(
+	url: string,
+	_opts: { crumbs: typeof breadcrumbs; label: string; breadcrumbAction: 'push' | 'replace' } = {}
+) {
+	const opts = {
+		crumbs: breadcrumbs,
+		label: '',
+		breadcrumbAction: 'push',
+		..._opts
+	};
+
+	const { crumbs, label, breadcrumbAction } = opts;
+	const crumb = { label, href: url };
+	crumbs[breadcrumbAction]([crumb]);
+	return _goto(url, opts);
+}
diff --git a/frontend/src/lib/utils/crud.ts b/frontend/src/lib/utils/crud.ts
index 24b61e7bb3..7156d28312 100644
--- a/frontend/src/lib/utils/crud.ts
+++ b/frontend/src/lib/utils/crud.ts
@@ -605,7 +605,7 @@ export const URL_MODEL_MAP: ModelMap = {
 		endpointUrl: 'ebios-rm/studies',
 		name: 'ebiosrmstudy',
 		localName: 'ebiosRMstudy',
-		localNamePlural: 'ebiosRMstudy',
+		localNamePlural: 'ebiosRmStudies',
 		verboseName: 'Ebios RMstudy',
 		verboseNamePlural: 'Ebios RMstudy',
 		foreignKeyFields: [
diff --git a/frontend/src/lib/utils/load.ts b/frontend/src/lib/utils/load.ts
index ad3bc6f379..3055e7ea90 100644
--- a/frontend/src/lib/utils/load.ts
+++ b/frontend/src/lib/utils/load.ts
@@ -137,6 +137,7 @@ export const loadDetail = async ({ event, model, id }) => {
 	}
 	return {
 		data,
+		title: data.str || data.name || data.email || data.id,
 		form,
 		relatedModels,
 		urlModel: model.urlModel as urlModel,
diff --git a/frontend/src/lib/utils/stores.ts b/frontend/src/lib/utils/stores.ts
index 1021afed45..0177bc207a 100644
--- a/frontend/src/lib/utils/stores.ts
+++ b/frontend/src/lib/utils/stores.ts
@@ -10,7 +10,6 @@ showNotification.subscribe((val) => {
 	if (browser) return (localStorage.showNotification = val);
 });
 
-export const breadcrumbObject = writable({ id: '', name: '', email: '' });
 export const pageTitle = writable('');
 export const clientSideToast = writable(undefined);
 
diff --git a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+layout.server.ts b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+layout.server.ts
index b02849fd6f..88ab8442a4 100644
--- a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+layout.server.ts
+++ b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+layout.server.ts
@@ -99,5 +99,5 @@ export const load: LayoutServerLoad = async (event) => {
 	}
 	model.foreignKeys = foreignKeys;
 	model.selectOptions = selectOptions;
-	return { form, model, object, foreignKeys, selectOptions, URLModel };
+	return { form, model, object, foreignKeys, selectOptions, URLModel, title: m.edit() };
 };
diff --git a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte
index 5551caac7e..0f6968a749 100644
--- a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import ModelForm from '$lib/components/Forms/ModelForm.svelte';
-	import { breadcrumbObject } from '$lib/utils/stores';
+	import type { PageData } from './$types';
 
 	export let data: PageData;
 
 	const customNameDescription = ['operational-scenarios'].includes(data.model.urlModel);
-
-	breadcrumbObject.set(data.object);
 </script>
 
 <ModelForm
diff --git a/frontend/src/routes/(app)/(internal)/analytics/+page.server.ts b/frontend/src/routes/(app)/(internal)/analytics/+page.server.ts
index 60214af8ee..af9d2c88cc 100644
--- a/frontend/src/routes/(app)/(internal)/analytics/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/analytics/+page.server.ts
@@ -5,6 +5,7 @@ import { zod } from 'sveltekit-superforms/adapters';
 import type { PageServerLoad } from './$types';
 import type { Project } from '$lib/utils/types';
 import { TODAY } from '$lib/utils/constants';
+import * as m from '$paraglide/messages';
 
 const REQUIREMENT_ASSESSMENT_STATUS = [
 	'compliant',
@@ -235,6 +236,7 @@ export const load: PageServerLoad = async ({ locals, fetch }) => {
 		applied_control_status: applied_control_status.results,
 		projects,
 		user: locals.user,
-		metrics: metrics.results
+		metrics: metrics.results,
+		title: m.analytics()
 	};
 };
diff --git a/frontend/src/routes/(app)/(internal)/analytics/+page.svelte b/frontend/src/routes/(app)/(internal)/analytics/+page.svelte
index f8aabf0a2e..e47e8b5509 100644
--- a/frontend/src/routes/(app)/(internal)/analytics/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/analytics/+page.svelte
@@ -20,6 +20,7 @@
 	import { displayScoreColor, formatScoreValue } from '$lib/utils/helpers';
 	import type { PageData } from './$types';
 	import StackedBarsNormalized from '$lib/components/Chart/StackedBarsNormalized.svelte';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	interface Counters {
 		domains: number;
@@ -576,11 +577,17 @@
 									</div>
 									<div class="lg:absolute lg:top-2 lg:right-4 mt-2 space-x-1">
 										<div class="flex flex-row lg:flex-col space-x-1 lg:space-x-0 lg:space-y-1">
-											<a
+											<Anchor
 												href="/compliance-assessments/{compliance_assessment.id}/edit?next=/analytics?tab=3"
+												prefixCrumbs={[
+													{
+														label: compliance_assessment.name,
+														href: `/compliance-assessments/${compliance_assessment.id}`
+													}
+												]}
 												class="btn variant-filled-primary w-1/2 lg:w-full"
 												><i class="fa-solid fa-edit mr-2" /> {m.edit()}
-											</a>
+											</Anchor>
 											<a
 												href="/compliance-assessments/{compliance_assessment.id}/export"
 												class="btn variant-filled-primary w-1/2 lg:w-full"
diff --git a/frontend/src/routes/(app)/(internal)/analytics/ComposerSelect.svelte b/frontend/src/routes/(app)/(internal)/analytics/ComposerSelect.svelte
index 3487435dd5..0dc02cbf07 100644
--- a/frontend/src/routes/(app)/(internal)/analytics/ComposerSelect.svelte
+++ b/frontend/src/routes/(app)/(internal)/analytics/ComposerSelect.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { composerSchema } from '$lib/utils/schemas';
-	import SuperForm from '$lib/components/Forms/Form.svelte';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 	import AutocompleteSelect from '$lib/components/Forms/AutocompleteSelect.svelte';
-	import type { AnyZodObject } from 'zod';
-	import type { SuperValidated } from 'sveltekit-superforms';
-	import { onMount } from 'svelte';
+	import SuperForm from '$lib/components/Forms/Form.svelte';
 	import { getOptions } from '$lib/utils/crud';
+	import { composerSchema } from '$lib/utils/schemas';
 	import * as m from '$paraglide/messages';
+	import { onMount } from 'svelte';
+	import type { SuperValidated } from 'sveltekit-superforms';
 	import { zod } from 'sveltekit-superforms/adapters';
 
 	export let composerForm: SuperValidated<Record<string, any>>;
@@ -41,9 +41,10 @@
 				{options}
 			/>
 			{#if data.risk_assessment && data.risk_assessment.length > 0}
-				<a
+				<Anchor
 					href={`/analytics/composer/?risk_assessment=${data.risk_assessment}`}
-					class="btn variant-filled-primary">{m.processButton()}</a
+					label={m.composer()}
+					class="btn variant-filled-primary">{m.processButton()}</Anchor
 				>
 			{:else}
 				<p class="btn-base rounded-token select-none variant-filled-surface opacity-30">
diff --git a/frontend/src/routes/(app)/(internal)/analytics/CounterCard.svelte b/frontend/src/routes/(app)/(internal)/analytics/CounterCard.svelte
index d75f84e929..1cbc3457f1 100644
--- a/frontend/src/routes/(app)/(internal)/analytics/CounterCard.svelte
+++ b/frontend/src/routes/(app)/(internal)/analytics/CounterCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
+	import { goto } from '$lib/utils/breadcrumbs';
 
 	export let count = 0;
 	export let label: string;
@@ -9,7 +9,7 @@
 
 	const clickHandler = () => {
 		if (href) {
-			goto(href);
+			goto(href, { breadcrumbAction: 'push', label });
 		}
 	};
 
diff --git a/frontend/src/routes/(app)/(internal)/analytics/composer/+page.server.ts b/frontend/src/routes/(app)/(internal)/analytics/composer/+page.server.ts
index e84729ab4d..45d0227dc7 100644
--- a/frontend/src/routes/(app)/(internal)/analytics/composer/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/analytics/composer/+page.server.ts
@@ -1,6 +1,7 @@
 import { BASE_API_URL, UUID_LIST_REGEX } from '$lib/utils/constants';
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
+import * as m from '$paraglide/messages';
 
 export const load: PageServerLoad = async ({ fetch, url }) => {
 	const params = url.searchParams;
@@ -23,5 +24,5 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
 		error(req.status, resp.error);
 	}
 
-	return resp.result;
+	return { ...resp.result, title: m.composer() };
 };
diff --git a/frontend/src/routes/(app)/(internal)/backup-restore/+page.server.ts b/frontend/src/routes/(app)/(internal)/backup-restore/+page.server.ts
index f3d29908bb..53029e6022 100644
--- a/frontend/src/routes/(app)/(internal)/backup-restore/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/backup-restore/+page.server.ts
@@ -3,6 +3,11 @@ import type { Actions } from '@sveltejs/kit';
 import { fail } from 'assert';
 import { setFlash } from 'sveltekit-flash-message/server';
 import * as m from '$paraglide/messages';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	return { title: m.backupRestore() };
+};
 
 export const actions: Actions = {
 	default: async (event) => {
diff --git a/frontend/src/routes/(app)/(internal)/compliance-assessments/[id=uuid]/action-plan/+page.svelte b/frontend/src/routes/(app)/(internal)/compliance-assessments/[id=uuid]/action-plan/+page.svelte
index 53d3197bfb..416fa1ece3 100644
--- a/frontend/src/routes/(app)/(internal)/compliance-assessments/[id=uuid]/action-plan/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/compliance-assessments/[id=uuid]/action-plan/+page.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
-	import * as m from '$paraglide/messages.js';
-	import type { TableSource } from '$lib/components/ModelTable/types';
-	import { Tab, TabGroup, tableSourceMapper } from '@skeletonlabs/skeleton';
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
-	import { breadcrumbObject } from '$lib/utils/stores';
+	import type { TableSource } from '$lib/components/ModelTable/types';
+	import * as m from '$paraglide/messages.js';
+	import { tableSourceMapper } from '@skeletonlabs/skeleton';
 
 	export let data;
 
-	breadcrumbObject.set(data.compliance_assessment);
-
-	let tabSet = 0;
-
 	const appliedControlsHead = {
 		name: 'name',
 		status: 'status',
diff --git a/frontend/src/routes/(app)/(internal)/compliance-assessments/[id=uuid]/flash-mode/+page.svelte b/frontend/src/routes/(app)/(internal)/compliance-assessments/[id=uuid]/flash-mode/+page.svelte
index af4e66e9ab..afc0e56acf 100644
--- a/frontend/src/routes/(app)/(internal)/compliance-assessments/[id=uuid]/flash-mode/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/compliance-assessments/[id=uuid]/flash-mode/+page.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-	import type { PageData } from './$types';
-	import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
-	import * as m from '$paraglide/messages';
-	import { breadcrumbObject } from '$lib/utils/stores';
 	import { complianceResultTailwindColorMap } from '$lib/utils/constants';
+	import * as m from '$paraglide/messages';
+	import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
+	import type { PageData } from './$types';
 
 	export let data: PageData;
 
-	breadcrumbObject.set(data.compliance_assessment);
-
 	const possible_options = [
 		{ id: 'not_assessed', label: m.notAssessed() },
 		{ id: 'non_compliant', label: m.nonCompliant() },
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte
index 85f7c3e15b..396dbc5f9b 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte
@@ -1,25 +1,22 @@
 <script lang="ts">
-	import * as m from '$paraglide/messages';
-	import { safeTranslate } from '$lib/utils/i18n';
-	import Tile from './Tile.svelte';
+	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import type { PageData, ActionData } from './$types';
-	import { breadcrumbObject } from '$lib/utils/stores';
-	import type { ModalComponent, ModalSettings, ModalStore } from '@skeletonlabs/skeleton';
-	import { getModalStore } from '@skeletonlabs/skeleton';
 	import CreateModal from '$lib/components/Modals/CreateModal.svelte';
 	import MissingConstraintsModal from '$lib/components/Modals/MissingConstraintsModal.svelte';
 	import { checkConstraints } from '$lib/utils/crud';
-	import { goto } from '$app/navigation';
 	import { getSecureRedirect } from '$lib/utils/helpers';
+	import { safeTranslate } from '$lib/utils/i18n';
+	import * as m from '$paraglide/messages';
+	import type { ModalComponent, ModalSettings, ModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+	import type { ActionData, PageData } from './$types';
+	import Tile from './Tile.svelte';
 
 	const modalStore: ModalStore = getModalStore();
 
 	export let data: PageData;
 	export let form: ActionData;
 
-	$: breadcrumbObject.set(data.data);
-
 	const workshopsData = {
 		ws1: [
 			{
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/Tile.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/Tile.svelte
index 26708b953f..3394527633 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/Tile.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/Tile.svelte
@@ -2,6 +2,7 @@
 	import { enhance } from '$app/forms';
 	import { page } from '$app/stores';
 	import { safeTranslate } from '$lib/utils/i18n';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 	import * as m from '$paraglide/messages';
 	import { popup } from '@skeletonlabs/skeleton';
 
@@ -41,7 +42,11 @@
 								{#if createRiskAnalysis && i == 0}
 									<slot name="addRiskAnalysis"></slot>
 								{:else}
-									<a href={step.href} class="hover:text-purple-800">
+									<Anchor
+										href={step.href}
+										prefixCrumbs={[{ label: safeTranslate(`ebiosWs${workshop}`) }]}
+										class="hover:text-purple-800"
+									>
 										{#if step.status == 'done'}
 											<span
 												class="absolute flex items-center justify-center w-8 h-8 bg-success-200 rounded-full -start-4 ring-4 ring-white"
@@ -57,7 +62,7 @@
 										{/if}
 										<h3 class="font-medium leading-tight">{m.activity()} {i + 1}</h3>
 										<p class="text-sm">{step.title}</p>
-									</a>
+									</Anchor>
 								{/if}
 								<button
 									class="btn bg-initial"
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-1/ebios-rm-study/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-1/ebios-rm-study/+page.svelte
index 3e01d16b3d..52239f0c37 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-1/ebios-rm-study/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-1/ebios-rm-study/+page.svelte
@@ -9,6 +9,7 @@
 	import type { ModalComponent, ModalSettings, ModalStore } from '@skeletonlabs/skeleton';
 	import { TabGroup, Tab, getModalStore } from '@skeletonlabs/skeleton';
 	import { checkConstraints } from '$lib/utils/crud';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	const modalStore: ModalStore = getModalStore();
 
@@ -91,13 +92,13 @@
 					{safeTranslate(ebiosRmStudy.status)}
 				</span>
 			</div>
-			<a
+			<Anchor
 				href={`${$page.url.pathname}/edit?activity=${activeActivity}&next=${$page.url.pathname}?activity=${activeActivity}`}
 				class="btn variant-filled-primary h-fit"
 			>
 				<i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />
 				{m.edit()}
-			</a>
+			</Anchor>
 		</div>
 		<div class="flex justify-center items-center w-full">
 			<span class="text-sm text-gray-500"
@@ -134,7 +135,7 @@
 				<ul class="list-disc list-inside text-gray-600">
 					{#if ebiosRmStudy.authors?.length}
 						{#each ebiosRmStudy.authors as author}
-							<li><a class="anchor" href="/users/{author.id}">{author.str}</a></li>
+							<li><Anchor class="anchor" href="/users/{author.id}">{author.str}</Anchor></li>
 						{/each}
 					{:else}
 						<li>{m.noAuthor()}</li>
@@ -149,7 +150,7 @@
 				<ul class="list-disc list-inside text-gray-600">
 					{#if ebiosRmStudy.reviewers?.length}
 						{#each ebiosRmStudy.reviewers as reviewer}
-							<li><a class="anchor" href="/users/{reviewer.id}">{reviewer.str}</a></li>
+							<li><Anchor class="anchor" href="/users/{reviewer.id}">{reviewer.str}</Anchor></li>
 						{/each}
 					{:else}
 						<li>{m.noReviewer()}</li>
diff --git a/frontend/src/routes/(app)/(internal)/entity-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/entity-assessments/[id=uuid]/+page.svelte
index 997e8e059c..93640d6183 100644
--- a/frontend/src/routes/(app)/(internal)/entity-assessments/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/entity-assessments/[id=uuid]/+page.svelte
@@ -5,14 +5,11 @@
 	import * as m from '$paraglide/messages';
 	import { TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
 	import AuditTableMode from '../../../(third-party)/compliance-assessments/[id=uuid]/table-mode/+page.svelte';
-	import type { PageData, Actions } from './$types';
+	import type { Actions, PageData } from './$types';
 
 	export let data: PageData;
 	export let form: Actions;
 
-	import { breadcrumbObject } from '$lib/utils/stores';
-	breadcrumbObject.set(data.data);
-
 	const mailing =
 		Boolean(data.data.compliance_assessment) && Boolean(data.data.representatives.length);
 </script>
diff --git a/frontend/src/routes/(app)/(internal)/experimental/mapping/+page.svelte b/frontend/src/routes/(app)/(internal)/experimental/mapping/+page.svelte
index 2830929267..f583c8f2b5 100644
--- a/frontend/src/routes/(app)/(internal)/experimental/mapping/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/experimental/mapping/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 	import type { PageData } from './$types';
 	export let data: PageData;
 	const mapping_sets = data.data.results;
@@ -8,8 +9,8 @@
 	<ul class="list-disc p-4 m-2">
 		{#each mapping_sets as mset}
 			<li class="">
-				<a href={`/experimental/mapping/${mset.id}`} class="text-md hover:text-purple-700"
-					>{mset.name}</a
+				<Anchor href={`/experimental/mapping/${mset.id}`} class="text-md hover:text-purple-700"
+					>{mset.name}</Anchor
 				>
 			</li>
 		{/each}
diff --git a/frontend/src/routes/(app)/(internal)/frameworks/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/frameworks/[id=uuid]/+page.svelte
index 847143f3a1..8685313c58 100644
--- a/frontend/src/routes/(app)/(internal)/frameworks/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/frameworks/[id=uuid]/+page.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-	import type { PageData } from './$types';
-	import type { TreeViewNode } from '@skeletonlabs/skeleton';
 	import RecursiveTreeView from '$lib/components/TreeView/RecursiveTreeView.svelte';
-	import TreeViewItemContent from './TreeViewItemContent.svelte';
-	import { breadcrumbObject } from '$lib/utils/stores';
 	import { URL_MODEL_MAP } from '$lib/utils/crud';
-	import * as m from '$paraglide/messages';
-	import { toCamelCase } from '$lib/utils/locales';
 	import { safeTranslate } from '$lib/utils/i18n';
+	import * as m from '$paraglide/messages';
+	import type { TreeViewNode } from '@skeletonlabs/skeleton';
+	import type { PageData } from './$types';
+	import TreeViewItemContent from './TreeViewItemContent.svelte';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data: PageData;
-	breadcrumbObject.set(data.framework);
+
 	const tree = data.tree;
 
 	function transformToTreeView(nodes) {
@@ -57,7 +56,7 @@
 							{#if value}
 								{#if key === 'library'}
 									{@const itemHref = `/libraries/${value.id}?loaded`}
-									<a href={itemHref} class="anchor">{value.str}</a>
+									<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 								{:else if key === 'scores_definition'}
 									{#each Object.entries(value) as [key, definition]}
 										<div>
@@ -85,7 +84,7 @@
 															(item) => item.field === key
 														)?.urlModel
 													}/${val.id}`}
-													<a href={itemHref} class="anchor">{val.str}</a>
+													<Anchor href={itemHref} class="anchor">{val.str}</Anchor>
 												{:else}
 													{value}
 												{/if}
@@ -98,7 +97,7 @@
 											(item) => item.field === key
 										)?.urlModel
 									}/${value.id}`}
-									<a href={itemHref} class="anchor">{value.str}</a>
+									<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 								{:else}
 									{value.str ?? value}
 								{/if}
diff --git a/frontend/src/routes/(app)/(internal)/libraries/+page.server.ts b/frontend/src/routes/(app)/(internal)/libraries/+page.server.ts
index d69ed6ac54..851d604dd3 100644
--- a/frontend/src/routes/(app)/(internal)/libraries/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/libraries/+page.server.ts
@@ -70,7 +70,7 @@ export const load = (async ({ fetch }) => {
 	const schema = z.object({ id: z.string() });
 	const deleteForm = await superValidate(zod(schema));
 
-	return { storedLibrariesTable, loadedLibrariesTable, deleteForm };
+	return { storedLibrariesTable, loadedLibrariesTable, deleteForm, title: m.libraries() };
 }) satisfies PageServerLoad;
 
 // ----------------------------------------------------------- //
diff --git a/frontend/src/routes/(app)/(internal)/libraries/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/libraries/[id=uuid]/+page.svelte
index 5d6b0998b4..faf734a2b0 100644
--- a/frontend/src/routes/(app)/(internal)/libraries/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/libraries/[id=uuid]/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { breadcrumbObject } from '$lib/utils/stores';
+	import { page } from '$app/stores';
+	import Dropdown from '$lib/components/Dropdown/Dropdown.svelte';
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
 	import RiskMatrix from '$lib/components/RiskMatrix/RiskMatrix.svelte';
-	import Dropdown from '$lib/components/Dropdown/Dropdown.svelte';
-	import TreeViewItemContent from '../../frameworks/[id=uuid]/TreeViewItemContent.svelte';
 	import * as m from '$paraglide/messages';
-	import { page } from '$app/stores';
+	import TreeViewItemContent from '../../frameworks/[id=uuid]/TreeViewItemContent.svelte';
 
 	export let data;
 	let loading = { form: false, library: '' };
@@ -14,12 +13,6 @@
 		[key: string]: any;
 	}
 
-	const breadcrumb_library_data = {
-		...data.library,
-		id: data.library.id
-	};
-	$: breadcrumbObject.set(breadcrumb_library_data);
-
 	const libraryObjects: LibraryObjects = data.library.objects ?? [];
 	const riskMatrices = libraryObjects['risk_matrix'] ?? [];
 	const referenceControls = libraryObjects['reference_controls'] ?? [];
@@ -37,10 +30,10 @@
 		});
 	}
 
-	import { ProgressRadial, tableSourceMapper, type TreeViewNode } from '@skeletonlabs/skeleton';
-	import RecursiveTreeView from '$lib/components/TreeView/RecursiveTreeView.svelte';
-	import type { TableSource } from '$lib/components/ModelTable/types';
 	import { enhance } from '$app/forms';
+	import type { TableSource } from '$lib/components/ModelTable/types';
+	import RecursiveTreeView from '$lib/components/TreeView/RecursiveTreeView.svelte';
+	import { ProgressRadial, tableSourceMapper } from '@skeletonlabs/skeleton';
 
 	const riskMatricesTable: TableSource = {
 		head: { name: 'name', description: 'description' },
diff --git a/frontend/src/routes/(app)/(internal)/my-assignments/+page.server.ts b/frontend/src/routes/(app)/(internal)/my-assignments/+page.server.ts
index 9256d6ad34..fe10c32161 100644
--- a/frontend/src/routes/(app)/(internal)/my-assignments/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/my-assignments/+page.server.ts
@@ -1,6 +1,7 @@
 import { BASE_API_URL } from '$lib/utils/constants';
 
 import type { PageServerLoad } from './$types';
+import * as m from '$paraglide/messages';
 
 export const load = (async ({ fetch }) => {
 	const endpoint = `${BASE_API_URL}/folders/my_assignments/`;
@@ -8,5 +9,5 @@ export const load = (async ({ fetch }) => {
 	const res = await fetch(endpoint);
 	const data = await res.json();
 
-	return { data };
+	return { data, title: m.myAssignments() };
 }) satisfies PageServerLoad;
diff --git a/frontend/src/routes/(app)/(internal)/my-assignments/+page.svelte b/frontend/src/routes/(app)/(internal)/my-assignments/+page.svelte
index c73e8040cb..30c0ecad08 100644
--- a/frontend/src/routes/(app)/(internal)/my-assignments/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/my-assignments/+page.svelte
@@ -7,6 +7,7 @@
 	import * as m from '$paraglide/messages';
 	import AuditCard from './AuditCard.svelte';
 	import ActivityTracker from './ActivityTracker.svelte';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	const eta_span_class = { true: 'bg-orange-400 text-white' };
 	const status_span_class = {
@@ -42,7 +43,9 @@
 								scope="row"
 								class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
 							>
-								<a href="/applied-controls/{ac.id}" class="hover:text-violet-400">{ac.name}</a>
+								<Anchor href="/applied-controls/{ac.id}" class="hover:text-violet-400"
+									>{ac.name}</Anchor
+								>
 							</th>
 							<td class="px-6 py-4"> {ac.csf_function ?? '-'} </td>
 							<td class="px-6 py-4"
@@ -100,7 +103,9 @@
 									scope="row"
 									class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
 								>
-									<a href="/risk-assessments/{ra.id}" class="hover:text-violet-400">{ra.name}</a>
+									<Anchor href="/risk-assessments/{ra.id}" class="hover:text-violet-400"
+										>{ra.name}</Anchor
+									>
 								</th>
 								<td class="px-6 py-4"> {safeTranslate(ra.status) ?? '-'} </td>
 								<td class="px-6 py-4"> {formatDateOrDateTime(ra.eta, languageTag()) ?? '-'} </td>
@@ -136,7 +141,9 @@
 									scope="row"
 									class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
 								>
-									<a href="/risk-scenarios/{rs.id}" class="hover:text-violet-400">{rs.name}</a>
+									<Anchor href="/risk-scenarios/{rs.id}" class="hover:text-violet-400"
+										>{rs.name}</Anchor
+									>
 								</th>
 								<td class="px-6 py-4"> {safeTranslate(rs.treatment) ?? '-'} </td>
 								<td class="px-6 py-4"> {safeTranslate(rs.current_level.name) ?? '-'}</td>
diff --git a/frontend/src/routes/(app)/(internal)/my-profile/+page.svelte b/frontend/src/routes/(app)/(internal)/my-profile/+page.svelte
index 9365fa8f04..1a960996d7 100644
--- a/frontend/src/routes/(app)/(internal)/my-profile/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/my-profile/+page.svelte
@@ -4,6 +4,7 @@
 	import { toCamelCase } from '$lib/utils/locales';
 	import { safeTranslate } from '$lib/utils/i18n';
 	import { languageTag } from '$paraglide/runtime';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	function filterUserData() {
 		const filtered = {};
@@ -30,18 +31,18 @@
 	<div class="flex flex-row items-center justify-between">
 		<h1 class="text-xl font-semibold">{$page.data.user.first_name} {$page.data.user.last_name}</h1>
 		<div>
-			<a href="my-profile/change-password" class="btn variant-filled-primary h-fit"
-				><i class="fa-solid fa-key mr-2" />{m.changePassword()}</a
+			<Anchor href="my-profile/change-password" class="btn variant-filled-primary h-fit"
+				><i class="fa-solid fa-key mr-2" />{m.changePassword()}</Anchor
 			>
 			{#if canEditObject}
-				<a
+				<Anchor
 					href="/users/{$page.data.user.id}/edit?next=/my-profile"
 					class="btn variant-filled-primary h-fit"
-					><i class="fa-solid fa-pen-to-square mr-2" />{m.edit()}</a
+					><i class="fa-solid fa-pen-to-square mr-2" />{m.edit()}</Anchor
 				>
 			{/if}
-			<a href="my-profile/settings" class="btn variant-filled-primary h-fit"
-				><i class="fa-solid fa-sliders mr-2" />{m.settings()}</a
+			<Anchor href="my-profile/settings" class="btn variant-filled-primary h-fit"
+				><i class="fa-solid fa-sliders mr-2" />{m.settings()}</Anchor
 			>
 		</div>
 	</div>
diff --git a/frontend/src/routes/(app)/(internal)/my-profile/+page.ts b/frontend/src/routes/(app)/(internal)/my-profile/+page.ts
new file mode 100644
index 0000000000..75072742b0
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/my-profile/+page.ts
@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import * as m from '$paraglide/messages';
+
+export const load: PageLoad = async () => {
+	return { title: m.myProfile() };
+};
diff --git a/frontend/src/routes/(app)/(internal)/my-profile/settings/+page.server.ts b/frontend/src/routes/(app)/(internal)/my-profile/settings/+page.server.ts
index 371410895d..89e0a0e905 100644
--- a/frontend/src/routes/(app)/(internal)/my-profile/settings/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/my-profile/settings/+page.server.ts
@@ -39,7 +39,7 @@ export const load: PageServerLoad = async (event) => {
 
 	const activateTOTPForm = await superValidate(zod(activateTOTPSchema));
 
-	return { authenticators, totp, activateTOTPForm, recoveryCodes };
+	return { authenticators, totp, activateTOTPForm, recoveryCodes, title: m.settings() };
 };
 
 export const actions: Actions = {
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts
index 890f34279c..2d52914d7c 100644
--- a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.server.ts
@@ -33,5 +33,5 @@ export const load: PageServerLoad = async (event) => {
 		meta: revData
 	};
 
-	return { data, table };
+	return { data, table, title: data.name };
 };
diff --git a/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/+layout.server.ts b/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/+layout.server.ts
index 80f149cec1..cd491b6f12 100644
--- a/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/+layout.server.ts
+++ b/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/+layout.server.ts
@@ -145,6 +145,7 @@ export const load: LayoutServerLoad = async ({ fetch, params }) => {
 		scenarioDeleteForm,
 		scenarioCreateForm,
 		riskAssessmentDuplicateForm,
-		riskAssessmentModel
+		riskAssessmentModel,
+		title: risk_assessment.str
 	};
 };
diff --git a/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/+page.svelte
index 3c7cdc2fbb..6b65f3218c 100644
--- a/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/+page.svelte
@@ -4,7 +4,6 @@
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
 	import RiskMatrix from '$lib/components/RiskMatrix/RiskMatrix.svelte';
 	import { URL_MODEL_MAP, getModelInfo } from '$lib/utils/crud.js';
-	import { breadcrumbObject } from '$lib/utils/stores';
 	import type { RiskMatrixJsonDefinition, RiskScenario } from '$lib/utils/types';
 	import type {
 		ModalComponent,
@@ -17,16 +16,15 @@
 	import { superForm } from 'sveltekit-superforms';
 
 	import RiskScenarioItem from '$lib/components/RiskMatrix/RiskScenarioItem.svelte';
+	import { safeTranslate } from '$lib/utils/i18n.js';
 	import * as m from '$paraglide/messages';
 	import { languageTag } from '$paraglide/runtime';
-	import { safeTranslate } from '$lib/utils/i18n.js';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data;
 	const showRisks = true;
 	const risk_assessment = data.risk_assessment;
 
-	breadcrumbObject.set(risk_assessment);
-
 	const modalStore: ModalStore = getModalStore();
 	const toastStore: ToastStore = getToastStore();
 
@@ -192,10 +190,10 @@
 			<div class="container w-2/3">
 				<div class="text-sm">
 					<span class="font-semibold" data-testid="risk-matrix-field-title">{m.riskMatrix()}:</span>
-					<a
+					<Anchor
 						href="/risk-matrices/{risk_assessment.risk_matrix.id}"
 						class="anchor"
-						data-testid="risk-matrix-field-value">{risk_assessment.risk_matrix.name}</a
+						data-testid="risk-matrix-field-value">{risk_assessment.risk_matrix.name}</Anchor
 					>
 				</div>
 				<br />
@@ -203,10 +201,10 @@
 					<div class="text-sm">
 						<span class="font-semibold" data-testid="ebios-rm-field-title">{m.ebiosRmStudy()}:</span
 						>
-						<a
+						<Anchor
 							href="/ebios-rm/{risk_assessment.ebios_rm_study.id}"
 							class="anchor"
-							data-testid="ebios-rm-field-value">{risk_assessment.ebios_rm_study.name}</a
+							data-testid="ebios-rm-field-value">{risk_assessment.ebios_rm_study.name}</Anchor
 						>
 					</div>
 					<br />
@@ -250,20 +248,22 @@
 						>
 					</div>
 					{#if canEditObject}
-						<a
+						<Anchor
 							href="/risk-assessments/{risk_assessment.id}/edit?next=/risk-assessments/{risk_assessment.id}"
+							label={m.edit()}
 							class="btn variant-filled-primary"
 							data-testid="edit-button"
 						>
 							<i class="fa-solid fa-edit mr-2" />
-							{m.edit()}</a
+							{m.edit()}</Anchor
 						>
 					{/if}
 				</div>
-				<a
+				<Anchor
+					label={m.remediationPlan()}
 					href="/risk-assessments/{risk_assessment.id}/remediation-plan"
 					class="btn variant-filled-primary"
-					><i class="fa-solid fa-heart-pulse mr-2" />{m.remediationPlan()}</a
+					><i class="fa-solid fa-heart-pulse mr-2" />{m.remediationPlan()}</Anchor
 				>
 				<span class="pt-4 font-light text-sm">Power-ups:</span>
 				<button
diff --git a/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/remediation-plan/+page.svelte b/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/remediation-plan/+page.svelte
index 79e3c90937..9cc1fb8fac 100644
--- a/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/remediation-plan/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/risk-assessments/[id=uuid]/remediation-plan/+page.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import * as m from '$paraglide/messages.js';
-	import { breadcrumbObject } from '$lib/utils/stores';
+	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+	import type { TableSource } from '$lib/components/ModelTable/types';
 	import { safeTranslate } from '$lib/utils/i18n.js';
 	import { toCamelCase } from '$lib/utils/locales.js';
-	import type { TableSource } from '$lib/components/ModelTable/types';
-	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+	import * as m from '$paraglide/messages.js';
 
 	export let data;
 
-	breadcrumbObject.set(data.risk_assessment);
-
 	const scenarioTreatmentColorMap = (status: string) => {
 		const map: Record<string, string> = {
 			open: 'bg-orange-200',
diff --git a/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+layout.server.ts b/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+layout.server.ts
index 36d5cfa306..dfe1782048 100644
--- a/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+layout.server.ts
+++ b/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+layout.server.ts
@@ -91,5 +91,5 @@ export const load: LayoutServerLoad = async ({ fetch, params }) => {
 			})
 		);
 	}
-	return { data, relatedModels };
+	return { data, relatedModels, title: data.name };
 };
diff --git a/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+page.svelte
index e5947f4ec9..143805768e 100644
--- a/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+page.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { breadcrumbObject } from '$lib/utils/stores';
-
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 	import RiskMatrix from '$lib/components/RiskMatrix/RiskMatrix.svelte';
 	import { URL_MODEL_MAP } from '$lib/utils/crud.js';
 	const showRisks = true;
 	export let data;
 	const riskMatrix = data.data;
-	breadcrumbObject.set(riskMatrix);
 </script>
 
 <div class="flex flex-row justify-between">
@@ -30,7 +27,7 @@
 														(item) => item.field === key
 													)?.urlModel
 												}/${val.id}`}
-												<a href={itemHref} class="anchor">{val.str}</a>
+												<Anchor href={itemHref} class="anchor">{val.str}</Anchor>
 											{:else}
 												{value}
 											{/if}
@@ -40,14 +37,14 @@
 							{:else if value.id}
 								{#if key === 'library'}
 									{@const itemHref = `/libraries/${value.id}?loaded`}
-									<a href={itemHref} class="anchor">{value.name}</a>
+									<Anchor href={itemHref} class="anchor">{value.name}</Anchor>
 								{:else}
 									{@const itemHref = `/${
 										URL_MODEL_MAP['risk-matrices']['foreignKeyFields']?.find(
 											(item) => item.field === key
 										)?.urlModel
 									}/${value.id}`}
-									<a href={itemHref} class="anchor">{value.str}</a>
+									<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 								{/if}
 							{:else}
 								{value.str ?? value}
diff --git a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.server.ts
index 70c1fdf6e1..3e23b56619 100644
--- a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.server.ts
@@ -65,5 +65,5 @@ export const load = (async ({ fetch, params }) => {
 		.then((res) => res.json())
 		.then((res) => JSON.parse(res.json_definition));
 
-	return { scenario, tables, riskMatrix };
+	return { scenario, tables, riskMatrix, title: scenario.name };
 }) satisfies PageServerLoad;
diff --git a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.svelte
index c48fb9efeb..dbda212bf1 100644
--- a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.svelte
@@ -1,21 +1,18 @@
 <script lang="ts">
-	import { breadcrumbObject } from '$lib/utils/stores';
 	import { page } from '$app/stores';
-	import type { PageData } from './$types';
 	import { URL_MODEL_MAP } from '$lib/utils/crud';
+	import type { PageData } from './$types';
 
+	import { safeTranslate } from '$lib/utils/i18n';
 	import * as m from '$paraglide/messages';
 	import { languageTag } from '$paraglide/runtime';
-	import { toCamelCase } from '$lib/utils/locales';
-	import { safeTranslate } from '$lib/utils/i18n';
 
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
 	import { isDark } from '$lib/utils/helpers';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data: PageData;
 
-	$: breadcrumbObject.set(data.scenario);
-
 	const user = $page.data.user;
 	const model = URL_MODEL_MAP['risk-scenarios'];
 	const canEditObject: boolean = Object.hasOwn(user.permissions, `change_${model.name}`);
@@ -54,10 +51,10 @@
 			</div>
 		</div>
 		{#if canEditObject}
-			<a
+			<Anchor
 				href={`${$page.url.pathname}/edit?next=${$page.url.pathname}`}
 				class="btn variant-filled-primary h-fit mt-1"
-				data-testid="edit-button"><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</a
+				data-testid="edit-button"><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</Anchor
 			>
 		{/if}
 	</div>
@@ -68,16 +65,16 @@
 			<div class="flex flex-row justify-between">
 				<span>
 					<p class="text-sm font-semibold text-gray-400">{m.project()}</p>
-					<a class="anchor text-sm font-semibold" href="/projects/{data.scenario.project.id}"
-						>{data.scenario.project.str}</a
+					<Anchor class="anchor text-sm font-semibold" href="/projects/{data.scenario.project.id}"
+						>{data.scenario.project.str}</Anchor
 					>
 				</span>
 				<span>
 					<p class="text-sm font-semibold text-gray-400">{m.riskAssessment()}</p>
-					<a
+					<Anchor
 						class="anchor text-sm font-semibold"
 						href="/risk-assessments/{data.scenario.risk_assessment.id}"
-						>{data.scenario.risk_assessment.str}</a
+						>{data.scenario.risk_assessment.str}</Anchor
 					>
 				</span>
 				<span>
diff --git a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.server.ts b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.server.ts
index 3e79e183ad..f49c2eb315 100644
--- a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.server.ts
@@ -194,7 +194,8 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 		strengthOfKnowledgeChoices: strengthOfKnowledgeChoices,
 		tables,
 		measureModel,
-		measureCreateForm
+		measureCreateForm,
+		title: m.edit()
 	};
 };
 
diff --git a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.svelte
index c1be10f4be..489d474947 100644
--- a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.svelte
@@ -5,10 +5,10 @@
 	import TextArea from '$lib/components/Forms/TextArea.svelte';
 	import TextField from '$lib/components/Forms/TextField.svelte';
 	import CreateModal from '$lib/components/Modals/CreateModal.svelte';
-	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
 	import { getOptions } from '$lib/utils/crud';
-	import { modelSchema } from '$lib/utils/schemas';
 	import { getSecureRedirect } from '$lib/utils/helpers';
+	import { modelSchema } from '$lib/utils/schemas';
+	import type { StrengthOfKnowledgeEntry } from '$lib/utils/types';
 	import {
 		getModalStore,
 		getToastStore,
@@ -18,23 +18,19 @@
 		type ToastStore
 	} from '@skeletonlabs/skeleton';
 	import type { PageData } from './$types';
-	import type { StrengthOfKnowledgeEntry } from '$lib/utils/types';
 	import RiskLevel from './RiskLevel.svelte';
 
 	import { browser } from '$app/environment';
-	import { breadcrumbObject } from '$lib/utils/stores';
-	import { superForm } from 'sveltekit-superforms';
 	import { page } from '$app/stores';
+	import { superForm } from 'sveltekit-superforms';
 
-	import * as m from '$paraglide/messages';
 	import { safeTranslate } from '$lib/utils/i18n';
-	import { languageTag } from '$paraglide/runtime';
+	import * as m from '$paraglide/messages';
 	import { zod } from 'sveltekit-superforms/adapters';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data: PageData;
 
-	breadcrumbObject.set(data.scenario);
-
 	const schema = modelSchema(data.model.urlModel!);
 
 	const strengthOfKnowledgeFormChoices: { label: string; value: number }[] = (
@@ -137,16 +133,16 @@
 				<div class="flex justify-between p-2">
 					<div>
 						<p class="text-sm font-semibold text-gray-400">{m.project()}</p>
-						<a class="anchor text-sm font-semibold" href="/projects/{data.scenario.project.id}"
-							>{data.scenario.project.str}</a
+						<Anchor class="anchor text-sm font-semibold" href="/projects/{data.scenario.project.id}"
+							>{data.scenario.project.str}</Anchor
 						>
 					</div>
 					<div>
 						<p class="text-sm font-semibold text-gray-400">{m.riskAssessment()}</p>
-						<a
+						<Anchor
 							class="anchor text-sm font-semibold"
 							href="/risk-assessments/{data.scenario.risk_assessment.id}"
-							>{data.scenario.risk_assessment.name} {data.scenario.version}</a
+							>{data.scenario.risk_assessment.name} {data.scenario.version}</Anchor
 						>
 					</div>
 				</div>
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts
index e3c9c06bad..a83aac24a1 100644
--- a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.server.ts
@@ -3,6 +3,7 @@ import { BASE_API_URL } from '$lib/utils/constants';
 import { listViewFields } from '$lib/utils/table';
 import { tableSourceMapper, type TableSource } from '@skeletonlabs/skeleton';
 import { getModelInfo } from '$lib/utils/crud';
+import { safeTranslate } from '$lib/utils/i18n';
 
 export const load: PageServerLoad = async (event) => {
 	const URLModel = 'ro-to';
@@ -33,5 +34,5 @@ export const load: PageServerLoad = async (event) => {
 		meta: revData
 	};
 
-	return { data, table };
+	return { data, table, title: `${safeTranslate(data.risk_origin)} / ${data.target_objective}` };
 };
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
index 734d9b10c4..a189e5e130 100644
--- a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/+page.svelte
@@ -5,6 +5,7 @@
 	import { pageTitle } from '$lib/utils/stores';
 	import { safeTranslate } from '$lib/utils/i18n';
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data: PageData;
 
@@ -35,20 +36,21 @@
 <div class="card p-4 bg-white shadow-lg">
 	<div class="flex flex-col space-y-4">
 		<div class="flex justify-between">
-			<a
+			<Anchor
 				href="/ebios-rm/{roto.ebios_rm_study.id}"
+				label={roto.ebios_rm_study.str}
 				class="flex items-center space-x-2 text-primary-800 hover:text-primary-600"
 			>
 				<i class="fa-solid fa-arrow-left" />
 				<p class="">{m.goBackToEbiosRmStudy()}</p>
-			</a>
-			<a
+			</Anchor>
+			<Anchor
 				href={`${$page.url.pathname}/edit?activity=${activeActivity}&next=${$page.url.pathname}?activity=${activeActivity}`}
 				class="btn variant-filled-primary h-fit"
 			>
 				<i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />
 				{m.edit()}
-			</a>
+			</Anchor>
 		</div>
 		<div
 			id="activityOne"
diff --git a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
index 0c9e15c11c..639278a4be 100644
--- a/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/ro-to/[id=uuid]/edit/+page.server.ts
@@ -5,6 +5,7 @@ import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 import type { PageServerLoad, Actions } from '../$types';
 import { defaultWriteFormAction } from '$lib/utils/actions';
+import * as m from '$paraglide/messages';
 
 export const load: PageServerLoad = async (event) => {
 	const URLModel = 'ro-to';
@@ -57,7 +58,7 @@ export const load: PageServerLoad = async (event) => {
 	}
 	model.foreignKeys = foreignKeys;
 	model.selectOptions = selectOptions;
-	return { form, model, object, foreignKeys, selectOptions, URLModel };
+	return { form, model, object, foreignKeys, selectOptions, URLModel, title: m.edit() };
 };
 
 export const actions: Actions = {
diff --git a/frontend/src/routes/(app)/(internal)/scoring-assistant/+page.server.ts b/frontend/src/routes/(app)/(internal)/scoring-assistant/+page.server.ts
index 3e9516d943..26c1a47eb8 100644
--- a/frontend/src/routes/(app)/(internal)/scoring-assistant/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/scoring-assistant/+page.server.ts
@@ -1,7 +1,7 @@
 import { BASE_API_URL } from '$lib/utils/constants';
 import type { RiskMatrix, RiskMatrixJsonDefinition } from '$lib/utils/types';
 import type { PageServerLoad } from './$types';
-import { error } from '@sveltejs/kit';
+import * as m from '$paraglide/messages';
 
 export const load: PageServerLoad = async ({ fetch }) => {
 	const req = await fetch(`${BASE_API_URL}/risk-matrices/`);
@@ -15,6 +15,7 @@ export const load: PageServerLoad = async ({ fetch }) => {
 	);
 
 	return {
-		risk_matrices
+		risk_matrices,
+		title: m.scoringAssistant()
 	};
 };
diff --git a/frontend/src/routes/(app)/(internal)/settings/+page.server.ts b/frontend/src/routes/(app)/(internal)/settings/+page.server.ts
index cc2dba5b97..54b02ea42c 100644
--- a/frontend/src/routes/(app)/(internal)/settings/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/settings/+page.server.ts
@@ -69,7 +69,8 @@ export const load: PageServerLoad = async ({ fetch }) => {
 		ssoModel,
 		generalSettings,
 		generalSettingForm,
-		generalSettingModel
+		generalSettingModel,
+		title: m.settings()
 	};
 };
 
diff --git a/frontend/src/routes/(app)/(internal)/stakeholders/[id=uuid]/edit/+page.server.ts b/frontend/src/routes/(app)/(internal)/stakeholders/[id=uuid]/edit/+page.server.ts
index 414fe61866..2e1209ef8f 100644
--- a/frontend/src/routes/(app)/(internal)/stakeholders/[id=uuid]/edit/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/stakeholders/[id=uuid]/edit/+page.server.ts
@@ -143,7 +143,8 @@ export const load: LayoutServerLoad = async (event) => {
 		selectOptions,
 		URLModel,
 		measureCreateForm,
-		measureModel
+		measureModel,
+		title: m.edit()
 	};
 };
 
diff --git a/frontend/src/routes/(app)/(internal)/stakeholders/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/stakeholders/[id=uuid]/edit/+page.svelte
index 480ae532fc..0c09a2ac3d 100644
--- a/frontend/src/routes/(app)/(internal)/stakeholders/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/stakeholders/[id=uuid]/edit/+page.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import ModelForm from '$lib/components/Forms/ModelForm.svelte';
-	import { breadcrumbObject } from '$lib/utils/stores';
+	import type { PageData } from './$types';
 
 	export let data: PageData;
-
-	breadcrumbObject.set(data.object);
 </script>
 
 <ModelForm
diff --git a/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/+page.server.ts b/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/+page.server.ts
index 9ebbc8b5be..421ab2f18c 100644
--- a/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/+page.server.ts
@@ -36,7 +36,7 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 	model.foreignKeys = foreignKeys;
 
-	return { form, model, object };
+	return { form, model, object, title: m.edit() };
 };
 
 export const actions: Actions = {
diff --git a/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/+page.svelte
index 5c93bdd493..f354d06238 100644
--- a/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/+page.svelte
@@ -2,13 +2,11 @@
 	import { page } from '$app/stores';
 	import ModelForm from '$lib/components/Forms/ModelForm.svelte';
 	import { UserEditSchema } from '$lib/utils/schemas';
-	import { breadcrumbObject } from '$lib/utils/stores';
 	import type { PageData } from './$types';
 
 	import * as m from '$paraglide/messages';
 
 	export let data: PageData;
-	breadcrumbObject.set(data.object);
 </script>
 
 <div class="card bg-white shadow p-4">
diff --git a/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/set-password/+page.server.ts b/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/set-password/+page.server.ts
index e1944e7807..e808d79a89 100644
--- a/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/set-password/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/users/[id=uuid]/edit/set-password/+page.server.ts
@@ -10,7 +10,7 @@ import { zod } from 'sveltekit-superforms/adapters';
 export const load: PageServerLoad = async (event) => {
 	const form = await superValidate(event.request, zod(SetPasswordSchema));
 
-	return { form };
+	return { form, title: m.setPassword() };
 };
 
 export const actions: Actions = {
diff --git a/frontend/src/routes/(app)/(internal)/x-rays/+page.server.ts b/frontend/src/routes/(app)/(internal)/x-rays/+page.server.ts
index 1e18ef193d..f408a41bab 100644
--- a/frontend/src/routes/(app)/(internal)/x-rays/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/x-rays/+page.server.ts
@@ -1,5 +1,5 @@
 import { BASE_API_URL } from '$lib/utils/constants';
-
+import * as m from '$paraglide/messages';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ fetch }) => {
@@ -8,5 +8,5 @@ export const load = (async ({ fetch }) => {
 	const res = await fetch(endpoint);
 	const data = await res.json().then((res) => res.results);
 
-	return { data };
+	return { data, title: m.xRays() };
 }) satisfies PageServerLoad;
diff --git a/frontend/src/routes/(app)/(internal)/x-rays/+page.svelte b/frontend/src/routes/(app)/(internal)/x-rays/+page.svelte
index 641d8c88a6..5cdc904425 100644
--- a/frontend/src/routes/(app)/(internal)/x-rays/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/x-rays/+page.svelte
@@ -3,6 +3,7 @@
 	import type { PageData } from './$types';
 	import * as m from '$paraglide/messages';
 	import { safeTranslate } from '$lib/utils/i18n';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 	export let data: PageData;
 
 	const aggregateQualityChecks = (item: any) => {
@@ -48,12 +49,12 @@
 		{@const risk_assessments = Object.values(project.risk_assessments.objects)}
 		<div>
 			<span class="text-2xl">&#128161;</span>
-			<a
+			<Anchor
 				class="text-2xl font-bold mb-1 hover:underline text-blue-600"
 				href="/projects/{project.project.id}"
 			>
 				{project.project.folder.str}/{project.project.name}
-			</a>
+			</Anchor>
 			<TabGroup>
 				<Tab bind:group={project.tabSet} name="compliance_assessments_tab" value={0}
 					>{m.complianceAssessments()}
@@ -92,9 +93,10 @@
 						<ul class="list-none pl-4 text-sm space-y-2">
 							{#each compliance_assessments as compliance_assessment, index}
 								<li class="h4 font-semibold mb-1">
-									<a
+									<Anchor
 										href="/compliance-assessments/{compliance_assessment.object.id}"
-										class="hover:underline text-blue-600">{compliance_assessment.object.name}</a
+										class="hover:underline text-blue-600"
+										>{compliance_assessment.object.name}</Anchor
 									>
 								</li>
 								{@const quality_check = compliance_assessment.quality_check}
@@ -114,8 +116,8 @@
 											<ul class="list-disc pl-4 text-sm">
 												{#each quality_check.errors as error}
 													<li>
-														{#if error.object.name}<a class="anchor" href={error.link}
-																>{error.object.name}</a
+														{#if error.object.name}<Anchor class="anchor" href={error.link}
+																>{error.object.name}</Anchor
 															>:{/if}
 														{safeTranslate(error.msgid)}
 													</li>
@@ -139,7 +141,9 @@
 												{#each quality_check.warnings as warning}
 													<li>
 														{#if warning.object.name}
-															<a class="anchor" href={warning.link}>{warning.object.name}</a>:
+															<Anchor class="anchor" href={warning.link}
+																>{warning.object.name}</Anchor
+															>:
 														{/if}
 														{safeTranslate(warning.msgid)}
 													</li>
@@ -162,8 +166,8 @@
 											<ul class="list-disc pl-4 text-sm">
 												{#each quality_check.info as info}
 													<li>
-														{#if info.object.name}<a class="anchor" href={info.link}
-																>{info.object.name}</a
+														{#if info.object.name}<Anchor class="anchor" href={info.link}
+																>{info.object.name}</Anchor
 															>:{/if}
 														{safeTranslate(info.msgid)}
 													</li>
@@ -182,9 +186,9 @@
 						<ul class="list-none pl-4 text-sm space-y-2">
 							{#each risk_assessments as risk_assessment, index}
 								<li class="h4 font-semibold mb-1">
-									<a
+									<Anchor
 										href="/risk-assessments/{risk_assessment.object.id}"
-										class="hover:underline text-blue-600">{risk_assessment.object.name}</a
+										class="hover:underline text-blue-600">{risk_assessment.object.name}</Anchor
 									>
 								</li>
 								{@const quality_check = risk_assessment.quality_check}
@@ -204,8 +208,8 @@
 											<ul class="list-disc pl-4 text-sm">
 												{#each quality_check.errors as error}
 													<li>
-														{#if error.object.name}<a class="anchor" href={error.link}
-																>{error.object.name}</a
+														{#if error.object.name}<Anchor class="anchor" href={error.link}
+																>{error.object.name}</Anchor
 															>:{/if}
 														{safeTranslate(error.msgid)}
 													</li>
@@ -228,8 +232,8 @@
 											<ul class="list-disc pl-4 text-sm">
 												{#each quality_check.warnings as warning}
 													<li>
-														{#if warning.object.name}<a class="anchor" href={warning.link}
-																>{warning.object.name}</a
+														{#if warning.object.name}<Anchor class="anchor" href={warning.link}
+																>{warning.object.name}</Anchor
 															>:{/if}
 														{safeTranslate(warning.msgid)}
 													</li>
@@ -252,8 +256,8 @@
 											<ul class="list-disc pl-4 text-sm">
 												{#each quality_check.info as info}
 													<li>
-														{#if info.object.name}<a class="anchor" href={info.link}
-																>{info.object.name}</a
+														{#if info.object.name}<Anchor class="anchor" href={info.link}
+																>{info.object.name}</Anchor
 															>:{/if}
 														{safeTranslate(info.msgid)}
 													</li>
diff --git a/frontend/src/routes/(app)/(internal)/x-rays/inspect/+page.server.ts b/frontend/src/routes/(app)/(internal)/x-rays/inspect/+page.server.ts
index 473426eba5..945ee96834 100644
--- a/frontend/src/routes/(app)/(internal)/x-rays/inspect/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/x-rays/inspect/+page.server.ts
@@ -1,5 +1,5 @@
 import { BASE_API_URL } from '$lib/utils/constants';
-
+import * as m from '$paraglide/messages';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ fetch }) => {
@@ -8,5 +8,5 @@ export const load = (async ({ fetch }) => {
 	const res = await fetch(endpoint);
 	const data = await res.json();
 
-	return { data };
+	return { data, title: m.inspect() };
 }) satisfies PageServerLoad;
diff --git a/frontend/src/routes/(app)/(third-party)/[model=thirdparty_urlmodels]/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(third-party)/[model=thirdparty_urlmodels]/[id=uuid]/edit/+page.svelte
index 04428a9870..9bfb2209e2 100644
--- a/frontend/src/routes/(app)/(third-party)/[model=thirdparty_urlmodels]/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/[model=thirdparty_urlmodels]/[id=uuid]/edit/+page.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import ModelForm from '$lib/components/Forms/ModelForm.svelte';
-	import { breadcrumbObject } from '$lib/utils/stores';
+	import type { PageData } from './$types';
 
 	export let data: PageData;
-
-	breadcrumbObject.set(data.data);
 </script>
 
 <div class="card p-4 bg-white shadow-lg">
diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.server.ts
index 983c9c84a3..3fe5f61f2a 100644
--- a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.server.ts
@@ -93,7 +93,8 @@ export const load = (async ({ fetch, params }) => {
 		tree,
 		compliance_assessment_donut_values,
 		global_score,
-		form
+		form,
+		title: compliance_assessment.name
 	};
 }) satisfies PageServerLoad;
 
diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
index dd587ad8ea..3af233611a 100644
--- a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import RecursiveTreeView from '$lib/components/TreeView/RecursiveTreeView.svelte';
-	import { breadcrumbObject } from '$lib/utils/stores';
 	import { displayOnlyAssessableNodes } from './store';
 
 	import { onMount } from 'svelte';
@@ -11,18 +10,18 @@
 		ModalSettings,
 		ModalStore,
 		PopupSettings,
-		ToastStore,
 		TreeViewNode
 	} from '@skeletonlabs/skeleton';
 
-	import { getSecureRedirect } from '$lib/utils/helpers';
 	import { goto } from '$app/navigation';
+	import { getSecureRedirect } from '$lib/utils/helpers';
 
-	import { getModalStore, getToastStore, popup, SlideToggle } from '@skeletonlabs/skeleton';
+	import { getModalStore, popup, SlideToggle } from '@skeletonlabs/skeleton';
 	import type { ActionData, PageData } from './$types';
 	import TreeViewItemContent from './TreeViewItemContent.svelte';
 	import TreeViewItemLead from './TreeViewItemLead.svelte';
 
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 	import CreateModal from '$lib/components/Modals/CreateModal.svelte';
 
 	import { complianceResultColorMap, complianceStatusColorMap } from '$lib/utils/constants';
@@ -37,13 +36,12 @@
 	export let data: PageData;
 	export let form: ActionData;
 
+	import List from '$lib/components/List/List.svelte';
 	import ConfirmModal from '$lib/components/Modals/ConfirmModal.svelte';
 	import { displayScoreColor } from '$lib/utils/helpers';
 	import { expandedNodesState } from '$lib/utils/stores';
 	import { ProgressRadial } from '@skeletonlabs/skeleton';
-	import List from '$lib/components/List/List.svelte';
 
-	$: breadcrumbObject.set(data.compliance_assessment);
 	$: tree = data.tree;
 
 	$: compliance_assessment_donut_values = data.compliance_assessment_donut_values;
@@ -254,7 +252,7 @@
 														)?.urlModel
 													}/${val.id}`}
 													{#if !$page.data.user.is_third_party}
-														<a href={itemHref} class="anchor">{val.str}</a>
+														<Anchor href={itemHref} class="anchor">{val.str}</Anchor>
 													{:else}
 														{val.str}
 													{/if}
@@ -271,7 +269,7 @@
 										)?.urlModel
 									}/${value.id}`}
 									{#if !$page.data.user.is_third_party}
-										<a href={itemHref} class="anchor">{value.str}</a>
+										<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 									{:else}
 										{value.str}
 									{/if}
@@ -361,30 +359,36 @@
 					{/if}
 				</div>
 				{#if canEditObject}
-					<a
+					<Anchor
+						breadcrumbAction="push"
 						href={`${$page.url.pathname}/edit?next=${$page.url.pathname}`}
 						class="btn variant-filled-primary h-fit"
-						data-testid="edit-button"><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</a
+						data-testid="edit-button"
+						><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</Anchor
 					>
 				{/if}
 			</div>
 			{#if !$page.data.user.is_third_party}
-				<a href={`${$page.url.pathname}/action-plan`} class="btn variant-filled-primary h-fit"
-					><i class="fa-solid fa-heart-pulse mr-2" />{m.actionPlan()}</a
+				<Anchor
+					href={`${$page.url.pathname}/action-plan`}
+					class="btn variant-filled-primary h-fit"
+					breadcrumbAction="push"><i class="fa-solid fa-heart-pulse mr-2" />{m.actionPlan()}</Anchor
 				>
 			{/if}
 			<span class="pt-4 font-light text-sm">Power-ups:</span>
 			{#if !$page.data.user.is_third_party}
-				<a
+				<Anchor
+					breadcrumbAction="push"
 					href={`${$page.url.pathname}/flash-mode`}
 					class="btn text-gray-100 bg-gradient-to-l from-sky-500 to-violet-500 h-fit"
-					><i class="fa-solid fa-bolt mr-2" /> {m.flashMode()}</a
+					><i class="fa-solid fa-bolt mr-2" /> {m.flashMode()}</Anchor
 				>
 			{/if}
-			<a
+			<Anchor
+				breadcrumbAction="push"
 				href={`${$page.url.pathname}/table-mode`}
 				class="btn text-gray-100 bg-gradient-to-l from-sky-500 to-yellow-500 h-fit"
-				><i class="fa-solid fa-table-list mr-2" /> {m.tableMode()}</a
+				><i class="fa-solid fa-table-list mr-2" /> {m.tableMode()}</Anchor
 			>
 			{#if !$page.data.user.is_third_party}
 				<button
diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
index d9b543690e..073944f53b 100644
--- a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
+++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
@@ -9,6 +9,7 @@
 	import type { z } from 'zod';
 	import * as m from '$paraglide/messages';
 	import { displayOnlyAssessableNodes } from './store';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let ref_id: string;
 	export let name: string;
@@ -111,23 +112,29 @@
 					{#if assessable}
 						<span class="w-full h-full flex rounded-token hover:text-primary-500">
 							{#if canEditRequirementAssessment}
-								<a href="/requirement-assessments/{ra_id}/edit?next={$page.url.pathname}">
+								<Anchor
+									breadcrumbAction="push"
+									href="/requirement-assessments/{ra_id}/edit?next={$page.url.pathname}"
+								>
 									{#if title}
 										<span style="font-weight: 600;">{title}</span>
 									{/if}
 									{#if description}
 										<p>{description}</p>
 									{/if}
-								</a>
+								</Anchor>
 							{:else}
-								<a href="/requirement-assessments/{ra_id}?next={$page.url.pathname}">
+								<Anchor
+									breadcrumbAction="push"
+									href="/requirement-assessments/{ra_id}?next={$page.url.pathname}"
+								>
 									{#if title}
 										<span style="font-weight: 600;">{title}</span>
 									{/if}
 									{#if description}
 										<p>{description}</p>
 									{/if}
-								</a>
+								</Anchor>
 							{/if}
 						</span>
 					{:else}
diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/table-mode/+page.server.ts b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/table-mode/+page.server.ts
index 9fe409d9a3..08ea753870 100644
--- a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/table-mode/+page.server.ts
+++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/table-mode/+page.server.ts
@@ -69,7 +69,8 @@ export const load = (async ({ fetch, params }) => {
 		requirement_assessments,
 		requirements,
 		evidenceModel,
-		deleteForm
+		deleteForm,
+		title: m.tableMode()
 	};
 }) satisfies PageServerLoad;
 
diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/table-mode/+page.svelte b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/table-mode/+page.svelte
index a83bc875fd..715aebaf2d 100644
--- a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/table-mode/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/table-mode/+page.svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
-	import type { PageData, Actions } from '../../table-mode/$types';
+	import CreateModal from '$lib/components/Modals/CreateModal.svelte';
+	import DeleteConfirmModal from '$lib/components/Modals/DeleteConfirmModal.svelte';
+	import {
+		complianceResultTailwindColorMap,
+		complianceStatusTailwindColorMap
+	} from '$lib/utils/constants';
+	import { getModelInfo } from '$lib/utils/crud';
+	import { safeTranslate } from '$lib/utils/i18n';
+	import * as m from '$paraglide/messages';
 	import {
 		Accordion,
 		AccordionItem,
@@ -11,16 +19,7 @@
 		type ModalSettings,
 		type ModalStore
 	} from '@skeletonlabs/skeleton';
-	import * as m from '$paraglide/messages';
-	import { breadcrumbObject } from '$lib/utils/stores';
-	import {
-		complianceResultTailwindColorMap,
-		complianceStatusTailwindColorMap
-	} from '$lib/utils/constants';
-	import CreateModal from '$lib/components/Modals/CreateModal.svelte';
-	import DeleteConfirmModal from '$lib/components/Modals/DeleteConfirmModal.svelte';
-	import { safeTranslate } from '$lib/utils/i18n';
-	import { getModelInfo } from '$lib/utils/crud';
+	import type { Actions, PageData } from '../../table-mode/$types';
 
 	export let data: PageData;
 	export let form: Actions;
@@ -33,8 +32,6 @@
 	export let assessmentOnly: boolean = false;
 	export let invalidateAll: boolean = true;
 
-	if (!shallow) breadcrumbObject.set(data.compliance_assessment);
-
 	const result_options = [
 		{ id: 'not_assessed', label: m.notAssessed() },
 		{ id: 'non_compliant', label: m.nonCompliant() },
diff --git a/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.server.ts
index ae955ac818..1c5b6c8983 100644
--- a/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.server.ts
@@ -52,7 +52,15 @@ export const load: PageServerLoad = async ({ fetch, params }) => {
 		zod(attachmentDeleteSchema)
 	);
 
-	return { URLModel, evidence, object, tables, deleteForm, attachmentDeleteForm };
+	return {
+		URLModel,
+		evidence,
+		object,
+		tables,
+		deleteForm,
+		attachmentDeleteForm,
+		title: evidence.name
+	};
 };
 
 export const actions: Actions = {
diff --git a/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.svelte
index 484704593d..742658e29d 100644
--- a/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.svelte
@@ -1,23 +1,20 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
-	import { breadcrumbObject } from '$lib/utils/stores';
-	import { URL_MODEL_MAP } from '$lib/utils/crud';
 	import ConfirmModal from '$lib/components/Modals/ConfirmModal.svelte';
-	import type { ModalSettings, ModalComponent, ModalStore } from '@skeletonlabs/skeleton';
-	import { getModalStore, TabGroup, Tab, getToastStore } from '@skeletonlabs/skeleton';
-	import { isURL } from '$lib/utils/helpers';
-	import { getModelInfo } from '$lib/utils/crud.js';
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+	import { URL_MODEL_MAP } from '$lib/utils/crud';
+	import { getModelInfo } from '$lib/utils/crud.js';
+	import { isURL } from '$lib/utils/helpers';
+	import type { ModalComponent, ModalSettings, ModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore, Tab, TabGroup } from '@skeletonlabs/skeleton';
+	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
 
-	import * as m from '$paraglide/messages';
-	import { toCamelCase } from '$lib/utils/locales';
 	import { safeTranslate } from '$lib/utils/i18n';
-	import { languageTag } from '$paraglide/runtime';
+	import * as m from '$paraglide/messages';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data: PageData;
-	breadcrumbObject.set(data.evidence);
 
 	interface Attachment {
 		type: string;
@@ -94,7 +91,7 @@
 																(item) => item.field === key
 															)?.urlModel
 														}/${val.id}`}
-														<a href={itemHref} class="anchor">{val.str}</a>
+														<Anchor href={itemHref} class="anchor">{val.str}</Anchor>
 													{:else}
 														{value}
 													{/if}
@@ -110,9 +107,9 @@
 											(item) => item.field === key
 										)?.urlModel
 									}/${value.id}`}
-									<a href={itemHref} class="anchor">{value.str}</a>
+									<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 								{:else if isURL(value)}
-									<a href={value} target="_blank" class="anchor">{value}</a>
+									<Anchor href={value} target="_blank" class="anchor">{value}</Anchor>
 								{:else}
 									{value.str ?? value}
 								{/if}
@@ -126,10 +123,10 @@
 		</div>
 		<span>
 			{#if canEditObject}
-				<a
+				<Anchor
 					href={`${$page.url.pathname}/edit?next=${$page.url.pathname}`}
 					class="btn variant-filled-primary h-fit"
-					data-testid="edit-button"><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</a
+					data-testid="edit-button"><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</Anchor
 				>
 			{/if}
 		</span>
@@ -162,11 +159,11 @@
 					{data.evidence.attachment}
 				</h4>
 				<div class="space-x-2">
-					<a
+					<Anchor
 						href={`./${data.evidence.id}/attachment`}
 						class="btn variant-filled-primary h-fit"
 						data-testid="attachment-download-button"
-						><i class="fa-solid fa-download mr-2" /> {m.download()}</a
+						><i class="fa-solid fa-download mr-2" /> {m.download()}</Anchor
 					>
 					<button
 						on:click={(_) => {
diff --git a/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/+page.server.ts b/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/+page.server.ts
index 177c5ff37b..a75bcc8e26 100644
--- a/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/+page.server.ts
+++ b/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/+page.server.ts
@@ -36,5 +36,12 @@ export const load = (async ({ fetch, params }) => {
 		}
 	}
 
-	return { requirementAssessment, complianceAssessmentScore, requirement, parent, tables };
+	return {
+		requirementAssessment,
+		complianceAssessmentScore,
+		requirement,
+		parent,
+		tables,
+		title: requirementAssessment.name
+	};
 }) satisfies PageServerLoad;
diff --git a/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/+page.svelte
index 58cf6fa78a..5ee61eee18 100644
--- a/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/+page.svelte
@@ -1,15 +1,19 @@
 <script lang="ts">
+	import { page } from '$app/stores';
+	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+	import { complianceResultColorMap, complianceStatusColorMap } from '$lib/utils/constants';
+	import {
+		displayScoreColor,
+		formatScoreValue,
+		getRequirementTitle,
+		getSecureRedirect
+	} from '$lib/utils/helpers';
 	import { safeTranslate } from '$lib/utils/i18n';
-	import type { PageData } from '../[id=uuid]/$types';
-	import { getRequirementTitle } from '$lib/utils/helpers';
-	import { hideSuggestions, breadcrumbObject } from '$lib/utils/stores';
-	import * as m from '$paraglide/messages';
 	import { toCamelCase } from '$lib/utils/locales';
-	import { complianceResultColorMap, complianceStatusColorMap } from '$lib/utils/constants';
-	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
+	import { hideSuggestions } from '$lib/utils/stores';
+	import * as m from '$paraglide/messages';
 	import { ProgressRadial, Tab, TabGroup } from '@skeletonlabs/skeleton';
-	import { displayScoreColor, formatScoreValue, getSecureRedirect } from '$lib/utils/helpers';
-	import { page } from '$app/stores';
+	import type { PageData } from '../[id=uuid]/$types';
 
 	export let data: PageData;
 	const threats = data.requirementAssessment.requirement.associated_threats ?? [];
@@ -31,11 +35,6 @@
 	const title = getRequirementTitle(data.requirement.ref_id, data.requirement.name)
 		? getRequirementTitle(data.requirement.ref_id, data.requirement.name)
 		: getRequirementTitle(data.parent.ref_id, data.parent.name);
-	breadcrumbObject.set({
-		id: data.requirementAssessment.id,
-		name: title ?? 'Requirement assessment',
-		email: ''
-	});
 
 	let requirementAssessmentsList: string[] = $hideSuggestions;
 
diff --git a/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/edit/+page.server.ts b/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/edit/+page.server.ts
index 9670f96578..9d95bb321e 100644
--- a/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/edit/+page.server.ts
+++ b/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/edit/+page.server.ts
@@ -191,6 +191,7 @@ export const load = (async ({ fetch, params }) => {
 
 	return {
 		URLModel,
+		title: requirementAssessment.name,
 		requirementAssessment,
 		compliance_assessment_score,
 		requirement,
diff --git a/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/edit/+page.svelte
index e03b5b6562..749788b4b9 100644
--- a/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/requirement-assessments/[id=uuid]/edit/+page.svelte
@@ -26,7 +26,6 @@
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
 	import { getOptions } from '$lib/utils/crud';
 	import { getSecureRedirect } from '$lib/utils/helpers';
-	import { breadcrumbObject } from '$lib/utils/stores';
 	import {
 		ProgressRadial,
 		Tab,
@@ -45,10 +44,10 @@
 	import * as m from '$paraglide/messages';
 
 	import Question from '$lib/components/Forms/Question.svelte';
+	import List from '$lib/components/List/List.svelte';
 	import ConfirmModal from '$lib/components/Modals/ConfirmModal.svelte';
 	import { getRequirementTitle } from '$lib/utils/helpers';
 	import { zod } from 'sveltekit-superforms/adapters';
-	import List from '$lib/components/List/List.svelte';
 
 	function cancel(): void {
 		var currentUrl = window.location.href;
@@ -60,11 +59,6 @@
 	const title = getRequirementTitle(data.requirement.ref_id, data.requirement.name)
 		? getRequirementTitle(data.requirement.ref_id, data.requirement.name)
 		: getRequirementTitle(data.parent.ref_id, data.parent.name);
-	breadcrumbObject.set({
-		id: data.requirementAssessment.id,
-		name: title ?? 'Requirement assessment',
-		email: ''
-	});
 
 	const complianceAssessmentURL = `/compliance-assessments/${data.requirementAssessment.compliance_assessment.id}`;
 	const schema = RequirementAssessmentSchema;
diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte
index d10b27d9a5..9458cc5272 100644
--- a/frontend/src/routes/(app)/+layout.svelte
+++ b/frontend/src/routes/(app)/+layout.svelte
@@ -12,7 +12,7 @@
 	import * as m from '$paraglide/messages';
 
 	import CommandPalette from '$lib/components/CommandPalette/CommandPalette.svelte';
-	import commandPaletteOpen from '$lib/components/CommandPalette/CommandPalette.svelte';
+
 	let sidebarOpen = true;
 
 	$: classesSidebarOpen = (open: boolean) => (open ? 'ml-7 lg:ml-64' : 'ml-7');
diff --git a/frontend/tests/functional/detailed/common.test.ts b/frontend/tests/functional/detailed/common.test.ts
index da8fc6ae3d..f685c18eb8 100644
--- a/frontend/tests/functional/detailed/common.test.ts
+++ b/frontend/tests/functional/detailed/common.test.ts
@@ -58,10 +58,12 @@ for (const key of testPages) {
 
 				await pages[key].waitUntilLoaded();
 				await pages[key].viewItemDetail(items[key].build.name || items[key].build.email);
-				await pages[key].itemDetail.hasTitle(items[key].build.name || items[key].build.email);
+				await pages[key].itemDetail.hasTitle(
+					items[key].build.str || items[key].build.name || items[key].build.email
+				);
 				await pages[key].itemDetail.hasBreadcrumbPath([
 					items[key].displayName,
-					items[key].build.name || items[key].build.email
+					items[key].build.str || items[key].build.name || items[key].build.email
 				]);
 				//wait fore the file to load to prevent crashing
 				page.url().includes('evidences')
diff --git a/frontend/tests/utils/page-detail.ts b/frontend/tests/utils/page-detail.ts
index c789d84b8f..3c3d59c2b3 100644
--- a/frontend/tests/utils/page-detail.ts
+++ b/frontend/tests/utils/page-detail.ts
@@ -25,7 +25,6 @@ export class PageDetail extends BasePage {
 
 	async editItem(buildParams: { [k: string]: string }, editParams: { [k: string]: string }) {
 		await this.editButton.click();
-		await this.hasTitle('Edit ' + this.item);
 		await this.hasBreadcrumbPath(['Edit'], false);
 
 		const editedValues: { [k: string]: string } = {};
diff --git a/frontend/tests/utils/test-utils.ts b/frontend/tests/utils/test-utils.ts
index 31ced0da69..a2c1aa405c 100644
--- a/frontend/tests/utils/test-utils.ts
+++ b/frontend/tests/utils/test-utils.ts
@@ -525,6 +525,7 @@ export class TestContent {
 				displayName: 'Risk assessments',
 				dependency: vars.matrix,
 				build: {
+					str: `${vars.riskAssessmentName} - ${vars.riskAssessmentVersion}`,
 					name: vars.riskAssessmentName,
 					description: vars.description,
 					project: vars.folderName + '/' + vars.projectName,