diff --git a/apps/website/src/components/animations/caveats.tsx b/apps/website/src/components/animations/caveats.tsx
index 264c8de07..e58c54c42 100644
--- a/apps/website/src/components/animations/caveats.tsx
+++ b/apps/website/src/components/animations/caveats.tsx
@@ -1,7 +1,7 @@
 import { component$ } from '@builder.io/qwik';
 import { Note, NoteStatus } from '../note/note'; // Adjust the import path based on your structure
 
-export const ImportantAnimationCaveats = component$(() => {
+export const TopLayerAnimationsCaveats = component$(() => {
   return (
     <Note status={NoteStatus.Warning}>
       <strong>Important Caveats for Animating Discrete Properties</strong>
diff --git a/apps/website/src/components/animations/compatability.tsx b/apps/website/src/components/animations/compatability.tsx
index b1864f515..5c8c1c545 100644
--- a/apps/website/src/components/animations/compatability.tsx
+++ b/apps/website/src/components/animations/compatability.tsx
@@ -2,7 +2,7 @@ import { component$ } from '@builder.io/qwik';
 import { Note, NoteStatus } from '../note/note'; // Adjust the import path based on your structure
 import { Badge } from '~/components/ui';
 
-export const BrowserAnimationCompatability = component$(() => {
+export const BrowserAnimationsCompatability = component$(() => {
   return (
     <Note status={NoteStatus.Info}>
       <div class="flex flex-col gap-2">
diff --git a/apps/website/src/components/mdx-components/index.tsx b/apps/website/src/components/mdx-components/index.tsx
index 86ec4e50e..0e983b5ab 100644
--- a/apps/website/src/components/mdx-components/index.tsx
+++ b/apps/website/src/components/mdx-components/index.tsx
@@ -11,8 +11,8 @@ import { KeyboardInteractionTable } from '../keyboard-interaction-table/keyboard
 import { Note } from '../note/note';
 import { Showcase } from '../showcase/showcase';
 import { StatusBanner } from '../status-banner/status-banner';
-import { ImportantAnimationCaveats } from '../animations/caveats';
-import { BrowserAnimationCompatability } from '../animations/compatability';
+import { TopLayerAnimationsCaveats } from '../animations/caveats';
+import { BrowserAnimationsCompatability } from '../animations/compatability';
 
 export const components: Record<string, Component> = {
   p: component$<PropsOf<'p'>>(({ ...props }) => {
@@ -136,6 +136,6 @@ export const components: Record<string, Component> = {
   StatusBanner,
   Showcase,
   AutoAPI,
-  ImportantAnimationCaveats,
-  BrowserAnimationCompatability,
+  TopLayerAnimationsCaveats,
+  BrowserAnimationsCompatability,
 };
diff --git a/apps/website/src/routes/docs/headless/modal/index.mdx b/apps/website/src/routes/docs/headless/modal/index.mdx
index 30561c0f4..4f2cbc7e4 100644
--- a/apps/website/src/routes/docs/headless/modal/index.mdx
+++ b/apps/website/src/routes/docs/headless/modal/index.mdx
@@ -3,11 +3,10 @@ title: Qwik UI | Modal
 ---
 
 import topLayer from '../../../../../public/images/top-layer.webp';
-
 import { statusByComponent } from '~/_state/component-statuses';
+import { FeatureList } from '~/components/feature-list/feature-list';
 
 <StatusBanner status={statusByComponent.headless.Modal} />
-import {FeatureList} from '~/components/feature-list/feature-list';
 
 # Modal
 
@@ -186,7 +185,7 @@ Transitions are useful for animating properties like opacity and transform. Here
 
 <Showcase name="transition" />
 
-<ImportantCaveats />
+<TopLayerAnimationsCaveats />
 
 ### Backdrop animations
 
diff --git a/apps/website/src/routes/docs/headless/tooltip/index.mdx b/apps/website/src/routes/docs/headless/tooltip/index.mdx
index 4ce997184..8258674fe 100644
--- a/apps/website/src/routes/docs/headless/tooltip/index.mdx
+++ b/apps/website/src/routes/docs/headless/tooltip/index.mdx
@@ -167,7 +167,7 @@ If Tailwind is the framework of choice, then styles can be added using the [arbi
 
 Tooltips rely on animations and transitions to provide smooth entry and exit effects. Like the Popover, tooltips benefit from modern CSS capabilities that allow animating between display: none and display: block. This ensures the tooltip remains visible for the entire duration of the animation.
 
-<BrowserAnimationCompatability />
+<BrowserAnimationsCompatability />
 
 ### Keyframe Animation Example