diff --git a/src/components/Roadmaps/RoadmapsPage.tsx b/src/components/Roadmaps/RoadmapsPage.tsx
index fe37cf00c..c13a43684 100644
--- a/src/components/Roadmaps/RoadmapsPage.tsx
+++ b/src/components/Roadmaps/RoadmapsPage.tsx
@@ -9,6 +9,9 @@ import {
   setUrlParams,
 } from '../../lib/browser.ts';
 import { RoadmapCard } from './RoadmapCard.tsx';
+import { httpGet } from '../../lib/http.ts';
+import type { UserProgressResponse } from '../HeroSection/FavoriteRoadmaps.tsx';
+import { isLoggedIn } from '../../lib/jwt.ts';
 
 const groupNames = [
   'Absolute Beginners',
@@ -474,6 +477,37 @@ export function RoadmapsPage() {
     ]);
   }, [activeGroup]);
 
+  async function loadProgress() {
+    const { response: progressList, error } =
+      await httpGet<UserProgressResponse>(
+        `${import.meta.env.PUBLIC_API_URL}/v1-get-hero-roadmaps`,
+      );
+
+    if (error || !progressList) {
+      return;
+    }
+
+    progressList?.forEach((progress) => {
+      window.dispatchEvent(
+        new CustomEvent('mark-favorite', {
+          detail: {
+            resourceId: progress.resourceId,
+            resourceType: progress.resourceType,
+            isFavorite: progress.isFavorite,
+          },
+        }),
+      );
+    });
+  }
+
+  useEffect(() => {
+    if (!isLoggedIn()) {
+      return;
+    }
+
+    loadProgress().finally(() => {});
+  }, []);
+
   useEffect(() => {
     const { g } = getUrlParams() as { g: AllowGroupNames };
     if (!g) {