diff --git a/app/components/course-page/course-stage-step/tests-passed-overlay.hbs b/app/components/course-page/course-stage-step/tests-passed-overlay.hbs
index 7f9a8da653..02d4df1831 100644
--- a/app/components/course-page/course-stage-step/tests-passed-overlay.hbs
+++ b/app/components/course-page/course-stage-step/tests-passed-overlay.hbs
@@ -5,16 +5,14 @@
   ...attributes
 >
   <:content>
-    <AnimatedContainer>
-      {{#animated-if this.modalWasDismissed duration=150 use=this.transition}}
-        <CoursePage::CourseStageStep::TestsPassedNotice
-          class="px-3 md:px-6 lg:px-10 w-full scroll-mt-20"
-          {{! Ensure this is visible when modal is dismissed }}
-          {{upscroll-on-insert scrollableContainer="#course-page-scrollable-area"}}
-          {{on "click" (fn (mut this.modalWasDismissed) false)}}
-        />
-      {{/animated-if}}
-    </AnimatedContainer>
+    {{#if this.modalWasDismissed}}
+      <CoursePage::CourseStageStep::TestsPassedNotice
+        class="sticky top-10 z-10 px-3 md:px-6 lg:px-10 w-full scroll-mt-20"
+        {{! Ensure this is visible when modal is dismissed }}
+        {{upscroll-on-insert scrollableContainer="#course-page-scrollable-area"}}
+        {{on "click" this.handleNoticeClick}}
+      />
+    {{/if}}
 
     {{yield}}
   </:content>
diff --git a/app/components/course-page/course-stage-step/tests-passed-overlay.ts b/app/components/course-page/course-stage-step/tests-passed-overlay.ts
index 2ed286cfa7..d1761f7313 100644
--- a/app/components/course-page/course-stage-step/tests-passed-overlay.ts
+++ b/app/components/course-page/course-stage-step/tests-passed-overlay.ts
@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import type CourseStageStep from 'codecrafters-frontend/utils/course-page-step-list/course-stage-step';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import fade from 'ember-animated/transitions/fade';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -17,8 +16,6 @@ interface Signature {
 }
 
 export default class TestsPassedOverlay extends Component<Signature> {
-  transition = fade;
-
   @tracked lastSeenStepId: string | null = null;
   @tracked modalWasDismissed = false;
 
@@ -31,6 +28,11 @@ export default class TestsPassedOverlay extends Component<Signature> {
     this.modalWasDismissed = true;
   }
 
+  @action
+  handleNoticeClick() {
+    this.modalWasDismissed = false;
+  }
+
   @action
   handleStepIdUpdated() {
     if (this.args.currentStep.id === this.lastSeenStepId) {
diff --git a/app/components/course-page/current-step-complete-overlay.hbs b/app/components/course-page/current-step-complete-overlay.hbs
index 4009750832..4c57bcf541 100644
--- a/app/components/course-page/current-step-complete-overlay.hbs
+++ b/app/components/course-page/current-step-complete-overlay.hbs
@@ -5,18 +5,16 @@
   ...attributes
 >
   <:content>
-    <AnimatedContainer>
-      {{#animated-if this.modalWasDismissed duration=150 use=this.transition}}
-        <CoursePage::CompletedStepNotice
-          {{! @glint-expect-error repository is nullable according to coursePageState }}
-          @repository={{this.coursePageState.stepList.repository}}
-          @step={{@currentStep}}
-          class="px-3 md:px-6 lg:px-10 w-full scroll-mt-20"
-          {{! Ensure this is visible when modal is dismissed }}
-          {{upscroll-on-insert scrollableContainer="#course-page-scrollable-area"}}
-        />
-      {{/animated-if}}
-    </AnimatedContainer>
+    {{#if this.modalWasDismissed}}
+      <CoursePage::CompletedStepNotice
+        {{! @glint-expect-error repository is nullable according to coursePageState }}
+        @repository={{this.coursePageState.stepList.repository}}
+        @step={{@currentStep}}
+        class="sticky top-10 z-10 px-3 md:px-6 lg:px-10 w-full scroll-mt-20"
+        {{! Ensure this is visible when modal is dismissed }}
+        {{upscroll-on-insert scrollableContainer="#course-page-scrollable-area"}}
+      />
+    {{/if}}
 
     {{yield}}
   </:content>
diff --git a/app/components/course-page/current-step-complete-overlay.ts b/app/components/course-page/current-step-complete-overlay.ts
index aff7655988..885ef13cac 100644
--- a/app/components/course-page/current-step-complete-overlay.ts
+++ b/app/components/course-page/current-step-complete-overlay.ts
@@ -4,7 +4,6 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state';
 import { StepDefinition } from 'codecrafters-frontend/utils/course-page-step-list';
-import fade from 'ember-animated/transitions/fade';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -19,8 +18,6 @@ interface Signature {
 }
 
 export default class CurrentStepCompleteOverlay extends Component<Signature> {
-  transition = fade;
-
   @tracked modalWasDismissed = false;
   @tracked lastSeenStepStatus: string | null = null;
 
diff --git a/app/components/course-page/previous-steps-incomplete-overlay.hbs b/app/components/course-page/previous-steps-incomplete-overlay.hbs
index 26730198e5..3cd90ad8e4 100644
--- a/app/components/course-page/previous-steps-incomplete-overlay.hbs
+++ b/app/components/course-page/previous-steps-incomplete-overlay.hbs
@@ -5,16 +5,14 @@
   ...attributes
 >
   <:content>
-    <AnimatedContainer>
-      {{#animated-if this.modalWasDismissed duration=150 use=this.transition}}
-        <CoursePage::PreviousStepsIncompleteNotice
-          @step={{@currentStep}}
-          class="px-3 md:px-6 lg:px-10 w-full scroll-mt-20"
-          {{! Ensure this is visible when modal is dismissed }}
-          {{upscroll-on-insert scrollableContainer="#course-page-scrollable-area"}}
-        />
-      {{/animated-if}}
-    </AnimatedContainer>
+    {{#if this.modalWasDismissed}}
+      <CoursePage::PreviousStepsIncompleteNotice
+        @step={{@currentStep}}
+        class="sticky top-10 z-10 px-3 md:px-6 lg:px-10 w-full scroll-mt-20"
+        {{! Ensure this is visible when modal is dismissed }}
+        {{upscroll-on-insert scrollableContainer="#course-page-scrollable-area"}}
+      />
+    {{/if}}
 
     {{yield}}
   </:content>
diff --git a/app/components/course-page/previous-steps-incomplete-overlay.ts b/app/components/course-page/previous-steps-incomplete-overlay.ts
index f424956518..5a86574486 100644
--- a/app/components/course-page/previous-steps-incomplete-overlay.ts
+++ b/app/components/course-page/previous-steps-incomplete-overlay.ts
@@ -4,7 +4,6 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state';
 import { StepDefinition } from 'codecrafters-frontend/utils/course-page-step-list';
-import fade from 'ember-animated/transitions/fade';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -19,8 +18,6 @@ interface Signature {
 }
 
 export default class PreviousStepsIncompleteOverlay extends Component<Signature> {
-  transition = fade;
-
   @tracked modalWasDismissed = false;
   @tracked lastSeenStepStatus: string | null = null;