diff --git a/e2e/tooltip.e2e.ts-snapshots/Should-render-tooltip-1-Google-Chrome-linux.png b/e2e/tooltip.e2e.ts-snapshots/Should-render-tooltip-1-Google-Chrome-linux.png
index 6cd356a5..fa1ce7e6 100644
Binary files a/e2e/tooltip.e2e.ts-snapshots/Should-render-tooltip-1-Google-Chrome-linux.png and b/e2e/tooltip.e2e.ts-snapshots/Should-render-tooltip-1-Google-Chrome-linux.png differ
diff --git a/src/lib/components/Content.svelte b/src/lib/components/Content.svelte
index de9c686f..ba8ba92c 100644
--- a/src/lib/components/Content.svelte
+++ b/src/lib/components/Content.svelte
@@ -7,14 +7,11 @@
   import { onDestroy } from "svelte";
   import ContentBackdrop from "$lib/components/ContentBackdrop.svelte";
   import Header from "$lib/components/Header.svelte";
-  import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
 
   export let back = false;
 
   // Observed: nested component - bottom sheet - might not call destroy when navigating route and therefore offset might not be reseted which is not the case here
   onDestroy(() => ($layoutBottomOffset = 0));
-
-  let scrollContainer: HTMLDivElement;
 </script>
 
 <div
@@ -28,13 +25,9 @@
     <slot name="toolbar-end" slot="toolbar-end" />
   </Header>
 
-  <div
-    class="scrollable-content"
-    class:open={$layoutMenuOpen}
-    bind:this={scrollContainer}
-  >
+  <div class="scrollable-content" class:open={$layoutMenuOpen}>
     <ContentBackdrop />
-    <ScrollSentinel {scrollContainer} />
+
     <slot />
   </div>
 </div>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index ab7f157b..659f15a5 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -2,12 +2,11 @@
   import Toolbar from "$lib/components/Toolbar.svelte";
   import MenuButton from "$lib/components/MenuButton.svelte";
   import Back from "$lib/components/Back.svelte";
-  import { layoutContentTopHidden } from "$lib/stores/layout.store";
 
   export let back = false;
 </script>
 
-<header data-tid="header-component" class:hidden={$layoutContentTopHidden}>
+<header data-tid="header-component">
   <Toolbar>
     <svelte:fragment slot="start">
       {#if back}
@@ -28,23 +27,11 @@
 
   header {
     --toolbar-padding: 0;
-    transition: all var(--animation-time-normal) ease-in-out;
-
     @include media.min-width(medium) {
       --toolbar-padding: 0 var(--padding-2x);
     }
     @include media.min-width(large) {
       --toolbar-padding: 0;
     }
-
-    &.hidden {
-      opacity: 0;
-      transform: translateY(-100%);
-      // Reset on tablet+
-      @include media.min-width(medium) {
-        opacity: 1;
-        transform: none;
-      }
-    }
   }
 </style>
diff --git a/src/lib/components/Island.svelte b/src/lib/components/Island.svelte
index e4b44f0d..6678de7d 100644
--- a/src/lib/components/Island.svelte
+++ b/src/lib/components/Island.svelte
@@ -2,7 +2,6 @@
   import { onDestroy } from "svelte";
   import { layoutContentScrollY } from "$lib/stores/layout.store";
   import { BREAKPOINT_LARGE } from "$lib/constants/constants";
-  import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
 
   export let testId: string | undefined = undefined;
 
@@ -11,15 +10,12 @@
     layoutContentScrollY.set(innerWidth < BREAKPOINT_LARGE ? "auto" : "hidden");
 
   onDestroy(() => layoutContentScrollY.set("auto"));
-
-  let scrollContainer: HTMLElement;
 </script>
 
 <svelte:window bind:innerWidth />
 
 <div class="island" data-tid={testId}>
-  <div class="scrollable-island" bind:this={scrollContainer}>
-    <ScrollSentinel {scrollContainer} />
+  <div class="scrollable-island">
     <slot />
   </div>
 </div>
diff --git a/src/lib/components/ScrollSentinel.svelte b/src/lib/components/ScrollSentinel.svelte
deleted file mode 100644
index a21c1aa5..00000000
--- a/src/lib/components/ScrollSentinel.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { layoutContentTopHidden } from "$lib/stores/layout.store";
-  import { onMount } from "svelte";
-
-  // The ScrollSentinel component should be placed right before the content
-  // inside the scrollable container.
-  export let scrollContainer: HTMLElement;
-
-  // To observe when the top leaves the view
-  let element: HTMLElement;
-
-  onMount(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => layoutContentTopHidden.set(!entry.isIntersecting),
-      { root: scrollContainer, threshold: 0 },
-    );
-    observer.observe(element);
-    return () => observer.disconnect();
-  });
-</script>
-
-<div data-tid="sentinel" class="sentinel" bind:this={element}></div>
-
-<style lang="scss">
-  .sentinel {
-    width: 0;
-    height: 0;
-    opacity: 0;
-    visibility: hidden;
-  }
-</style>
diff --git a/src/lib/components/SplitContent.svelte b/src/lib/components/SplitContent.svelte
index aed7d773..2985bad2 100644
--- a/src/lib/components/SplitContent.svelte
+++ b/src/lib/components/SplitContent.svelte
@@ -7,7 +7,6 @@
   } from "$lib/stores/layout.store";
   import Header from "$lib/components/Header.svelte";
   import ContentBackdrop from "$lib/components/ContentBackdrop.svelte";
-  import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
 
   export let back = false;
   export const resetScrollPosition = () => {
@@ -44,7 +43,6 @@
     <div class="scrollable-content-end" bind:this={scrollableElement}>
       <ContentBackdrop />
 
-      <ScrollSentinel scrollContainer={scrollableElement} />
       <slot name="end" />
     </div>
   </div>
diff --git a/src/lib/components/SplitPane.svelte b/src/lib/components/SplitPane.svelte
index 1a78950b..ee3f8add 100644
--- a/src/lib/components/SplitPane.svelte
+++ b/src/lib/components/SplitPane.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-  import {
-    layoutContentTopHidden,
-    layoutMenuOpen,
-  } from "$lib/stores/layout.store";
+  import { layoutMenuOpen } from "$lib/stores/layout.store";
 
   let innerWidth = 0;
 
@@ -21,7 +18,7 @@
 
 <svelte:window bind:innerWidth />
 
-<div class="split-pane" class:header-hidden={$layoutContentTopHidden}>
+<div class="split-pane">
   <slot name="menu" />
   <slot />
 </div>
@@ -45,18 +42,6 @@
       var(--header-offset, 0px) + var(--header-height)
     );
     padding-top: var(--split-pane-content-top-offset);
-    transition: padding-top var(--animation-time-normal) ease;
-
-    &.header-hidden {
-      padding-top: 0;
-      // Reset on tablet+
-      @include media.min-width(medium) {
-        padding-top: var(--split-pane-content-top-offset);
-      }
-      @include media.min-width(large) {
-        padding-top: var(--header-offset, 0);
-      }
-    }
 
     :global(header) {
       position: fixed;
diff --git a/src/lib/stores/layout.store.ts b/src/lib/stores/layout.store.ts
index e8420858..c774472d 100644
--- a/src/lib/stores/layout.store.ts
+++ b/src/lib/stores/layout.store.ts
@@ -3,4 +3,3 @@ import { writable } from "svelte/store";
 export const layoutBottomOffset = writable<number>(0);
 export const layoutMenuOpen = writable<boolean>(false);
 export const layoutContentScrollY = writable<"hidden" | "auto">("auto");
-export const layoutContentTopHidden = writable<boolean>(false);
diff --git a/src/tests/lib/components/ScrollSentinel.spec.ts b/src/tests/lib/components/ScrollSentinel.spec.ts
deleted file mode 100644
index 19fa21f3..00000000
--- a/src/tests/lib/components/ScrollSentinel.spec.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import ScrollSentinel from "$lib/components/ScrollSentinel.svelte";
-import { layoutContentTopHidden } from "$lib/stores/layout.store";
-import { render } from "@testing-library/svelte";
-import { get } from "svelte/store";
-
-describe("ScrollSentinel", () => {
-  let mockObserverInstance: MockIntersectionObserver;
-
-  class MockIntersectionObserver implements IntersectionObserver {
-    observe: (target: Element) => void = vi.fn();
-    unobserve: (target: Element) => void = vi.fn();
-    disconnect: () => void = vi.fn();
-    takeRecords: () => IntersectionObserverEntry[] = () => [];
-    root: Element | Document | null = null;
-    rootMargin: string = "";
-    thresholds: ReadonlyArray<number> = [];
-
-    constructor(private callback: IntersectionObserverCallback) {
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
-      mockObserverInstance = this;
-    }
-
-    // Simulates IntersectionObserver changes
-    trigger(entries: Partial<IntersectionObserverEntry>[]) {
-      this.callback(entries as IntersectionObserverEntry[], this);
-    }
-  }
-
-  beforeEach(() => {
-    vi.spyOn(global, "IntersectionObserver").mockImplementation(
-      (callback) => new MockIntersectionObserver(callback),
-    );
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("should render a sentinel element", () => {
-    const { container } = render(ScrollSentinel);
-    expect(container.querySelector("[data-tid='sentinel']")).not.toBeNull();
-  });
-
-  it("should update the store on intersection", () => {
-    expect(get(layoutContentTopHidden)).toBe(false);
-
-    mockObserverInstance.trigger([{ isIntersecting: false }]);
-    expect(get(layoutContentTopHidden)).toBe(true);
-
-    mockObserverInstance.trigger([{ isIntersecting: true }]);
-    expect(get(layoutContentTopHidden)).toBe(false);
-  });
-});