diff --git a/src/frontend/src/lib/components/canister/CanisterWarnings.svelte b/src/frontend/src/lib/components/canister/CanisterWarnings.svelte
index 557d9281a..89b645879 100644
--- a/src/frontend/src/lib/components/canister/CanisterWarnings.svelte
+++ b/src/frontend/src/lib/components/canister/CanisterWarnings.svelte
@@ -3,6 +3,8 @@
 	import type { Snippet } from 'svelte';
 	import CanisterSyncData from '$lib/components/canister/CanisterSyncData.svelte';
 	import Warning from '$lib/components/ui/Warning.svelte';
+	import { onIntersection } from '$lib/directives/intersection.directives';
+	import { onLayoutTitleIntersection } from '$lib/stores/layout-intersecting.store';
 	import type { CanisterSyncData as CanisterSyncDataType } from '$lib/types/canister';
 
 	interface Props {
@@ -25,13 +27,17 @@
 <CanisterSyncData {canisterId} bind:canister />
 
 {#if cyclesWarning}
-	<Warning>
-		{@render cycles?.()}
-	</Warning>
+	<div use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}>
+		<Warning>
+			{@render cycles?.()}
+		</Warning>
+	</div>
 {/if}
 
 {#if heapWarning}
-	<Warning>
-		{@render heap?.()}
-	</Warning>
+	<div use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}>
+		<Warning>
+			{@render heap?.()}
+		</Warning>
+	</div>
 {/if}
diff --git a/src/frontend/src/lib/components/ui/Header.svelte b/src/frontend/src/lib/components/ui/Header.svelte
index 91c2e8907..5d9d0511c 100644
--- a/src/frontend/src/lib/components/ui/Header.svelte
+++ b/src/frontend/src/lib/components/ui/Header.svelte
@@ -36,12 +36,16 @@
 
 		padding: var(--padding-2x) var(--padding-2x);
 
+		transition: border-bottom-color var(--animation-time);
+		border-bottom: 1px solid transparent;
+
 		@include media.min-width(xlarge) {
 			padding: calc(var(--padding-4x) - 1px) var(--padding-7x) var(--padding-4x);
 		}
 
 		&.opaque {
 			background: var(--color-background);
+			border-bottom: 1px solid var(--color-background-contrast);
 		}
 
 		:global(*) {
diff --git a/src/frontend/src/lib/components/warning/VersionWarning.svelte b/src/frontend/src/lib/components/warning/VersionWarning.svelte
index 8fea68505..f83b03443 100644
--- a/src/frontend/src/lib/components/warning/VersionWarning.svelte
+++ b/src/frontend/src/lib/components/warning/VersionWarning.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import IconNewReleases from '$lib/components/icons/IconNewReleases.svelte';
 	import Html from '$lib/components/ui/Html.svelte';
+	import { onIntersection } from '$lib/directives/intersection.directives';
 	import { i18n } from '$lib/stores/i18n.store';
+	import { onLayoutTitleIntersection } from '$lib/stores/layout-intersecting.store';
 
 	interface Props {
 		text: string;
@@ -11,7 +13,7 @@
 	let { text, onclick }: Props = $props();
 </script>
 
-<div class="container">
+<div class="container" use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}>
 	<div class="icon"><IconNewReleases /></div>
 
 	<div>