diff --git a/app/components/course-page/current-step-complete-modal.hbs b/app/components/course-page/current-step-complete-modal.hbs
index 3fef69cb2f..74e2ddce98 100644
--- a/app/components/course-page/current-step-complete-modal.hbs
+++ b/app/components/course-page/current-step-complete-modal.hbs
@@ -1,4 +1,4 @@
-<ModalBody @allowManualClose={{false}} @onClose={{@onClose}} data-test-current-step-complete-modal class="max-w-xl" ...attributes>
+<ModalBody @allowManualClose={{false}} @onClose={{@onClose}} data-test-current-step-complete-modal class="w-full max-w-xs" ...attributes>
   <div class="flex flex-col items-center w-full">
     <div class="text-[60px]">
       🎉
@@ -13,7 +13,8 @@
       {{#if this.currentStepAsCourseStageStep.repository.language}}
         <CoursePage::CurrentStepCompleteModal::LanguageLeaderboardRankSection
           @language={{this.currentStepAsCourseStageStep.repository.language}}
-          class="mt-3 mb-3"
+          @shouldShowCTA={{eq this.coursePageState.activeStep this.coursePageState.nextStep}}
+          class="mt-3 mb-3 w-full"
         />
       {{/if}}
     {{else}}
diff --git a/app/components/course-page/current-step-complete-modal/language-leaderboard-rank-section.hbs b/app/components/course-page/current-step-complete-modal/language-leaderboard-rank-section.hbs
index b75634f850..be18f75a75 100644
--- a/app/components/course-page/current-step-complete-modal/language-leaderboard-rank-section.hbs
+++ b/app/components/course-page/current-step-complete-modal/language-leaderboard-rank-section.hbs
@@ -4,13 +4,13 @@
   class="w-full p-5 pb-6"
   role="button"
   {{on "click" this.handleClick}}
-  ...attributes
   data-test-language-leaderboard-rank-section
+  ...attributes
 >
   <div class="flex flex-col items-center w-full">
     {{svg-jar "presentation-chart-line" class="w-8 h-8 fill-current text-teal-500/90 mb-2"}}
 
-    <span class="text-teal-700 dark:text-teal-400 text-xs mb-0.5 text-center">
+    <span class="text-teal-700 dark:text-teal-400 text-xs mb-2 text-center">
       Your
       {{@language.name}}
       leaderboard rank is
@@ -18,7 +18,7 @@
 
     <AnimatedContainer>
       <div class="flex items-center w-full justify-center" data-test-rank>
-        {{#animated-if this.refreshRankTask.isRunning use=this.transition duration=300}}
+        {{#animated-if this.isLoadingRank use=this.transition duration=300}}
           <b
             class="text-2xl text-teal-600 dark:text-teal-400 border-b border-teal-600 dark:border-teal-400 group-hover:text-teal-500 border-dashed animate-pulse"
           >
@@ -35,5 +35,17 @@
         {{/animated-if}}
       </div>
     </AnimatedContainer>
+
+    {{#if @shouldShowCTA}}
+      <AnimatedContainer class="w-full mt-4">
+        <div class="flex items-center justify-center">
+          {{#animated-value this.ctaText use=this.transition duration=500 as |ctaText|}}
+            <div class="text-xs text-teal-600 dark:text-teal-400">
+              {{ctaText}}
+            </div>
+          {{/animated-value}}
+        </div>
+      </AnimatedContainer>
+    {{/if}}
   </div>
 </Alert>
\ No newline at end of file
diff --git a/app/components/course-page/current-step-complete-modal/language-leaderboard-rank-section.ts b/app/components/course-page/current-step-complete-modal/language-leaderboard-rank-section.ts
index eabe5673b5..31be2a8d54 100644
--- a/app/components/course-page/current-step-complete-modal/language-leaderboard-rank-section.ts
+++ b/app/components/course-page/current-step-complete-modal/language-leaderboard-rank-section.ts
@@ -7,13 +7,20 @@ import type Owner from '@ember/owner';
 import type RouterService from '@ember/routing/router-service';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import { task } from 'ember-concurrency';
+import { task, timeout } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
+import type CourseStageModel from 'codecrafters-frontend/models/course-stage';
+import type RepositoryModel from 'codecrafters-frontend/models/repository';
+import computeLeaderboardCTA from 'codecrafters-frontend/utils/compute-leaderboard-cta';
 
 interface Signature {
   Element: HTMLDivElement;
 
   Args: {
+    currentCourseStage: CourseStageModel;
     language: LanguageModel;
+    repository: RepositoryModel;
+    shouldShowCTA: boolean;
   };
 }
 
@@ -23,12 +30,28 @@ export default class LanguageLeaderboardRankSection extends Component<Signature>
   @service declare leaderboardEntriesCacheRegistry: LeaderboardEntriesCacheRegistryService;
   @service declare router: RouterService;
 
+  @tracked isLoadingRank: boolean = true;
+  @tracked ctaText: string = 'Loading...';
+
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args);
 
     this.refreshRankTask.perform();
   }
 
+  get computedCtaText(): string | null {
+    if (!this.leaderboardEntriesCache.userEntry || !this.leaderboardEntriesCache.userRankCalculation) {
+      return null;
+    }
+
+    return computeLeaderboardCTA(
+      this.leaderboardEntriesCache.userEntry,
+      this.leaderboardEntriesCache.userRankCalculation,
+      this.args.repository,
+      this.args.currentCourseStage,
+    );
+  }
+
   get leaderboardEntriesCache(): LeaderboardEntriesCache {
     return this.leaderboardEntriesCacheRegistry.getOrCreate(this.args.language.leaderboard!);
   }
@@ -43,7 +66,22 @@ export default class LanguageLeaderboardRankSection extends Component<Signature>
   }
 
   refreshRankTask = task({ restartable: true }, async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
     await this.leaderboardEntriesCacheRegistry.getOrCreate(this.args.language.leaderboard!).loadOrRefresh();
+
+    this.isLoadingRank = false;
+    this.ctaText = ' '; // No break space
+
+    await timeout(500);
+    this.ctaText = 'Nice work!';
+
+    if (this.computedCtaText) {
+      await timeout(2500);
+      this.ctaText = ' '; // No break space
+
+      await timeout(500);
+      this.ctaText = this.computedCtaText;
+    }
   });
 }