diff --git a/lib/backend/addToChildren.ts b/lib/backend/addToChildren.ts
index 4c22ebc5..ad65ce27 100644
--- a/lib/backend/addToChildren.ts
+++ b/lib/backend/addToChildren.ts
@@ -1,6 +1,5 @@
 import { getDueDate } from '../parser';
 import { GithubIssueDataWithGroupAndChildren, IssueData } from '../types';
-import { calculateCompletionRate } from './calculateCompletionRate';
 import { ErrorManager } from './errorManager';
 
 export function addToChildren(
@@ -22,12 +21,12 @@ export function addToChildren(
       html_url: parent.html_url,
       labels: parent.labels,
       node_id: parent.node_id,
-      completion_rate: calculateCompletionRate(parent),
+      completion_rate: 0, // calculated on the client-side once all issues are loaded
       due_date: parentDueDate,
     };
     return data.map((item: GithubIssueDataWithGroupAndChildren): IssueData => ({
       labels: item.labels ?? [],
-      completion_rate: calculateCompletionRate(item),
+      completion_rate: 0, // calculated on the client-side once all issues are loaded
       due_date: getDueDate(item, errorManager).eta,
       html_url: item.html_url,
       group: item.group,
diff --git a/lib/backend/calculateCompletionRate.ts b/lib/calculateCompletionRate.ts
similarity index 69%
rename from lib/backend/calculateCompletionRate.ts
rename to lib/calculateCompletionRate.ts
index 2bb360c5..ad680899 100644
--- a/lib/backend/calculateCompletionRate.ts
+++ b/lib/calculateCompletionRate.ts
@@ -1,5 +1,6 @@
-import { IssueStates } from '../enums';
-import { IssueData } from '../types';
+import { State } from '@hookstate/core';
+import { IssueStates } from './enums';
+import { IssueData } from './types';
 
 export type CalculateCompletionRateOptions = Pick<IssueData, 'html_url' | 'state'> & { children: CalculateCompletionRateOptions[] };
 
@@ -48,3 +49,16 @@ export function calculateCompletionRate (issue: CalculateCompletionRateOptions):
   const { percentClosed } = getIssueCounts(issueStatesMap);
   return percentClosed;
 };
+
+export function assignCompletionRateToIssues (issue: State<IssueData> | State<IssueData | null>): void {
+  if (issue.ornull === null) {
+    return
+  }
+  const completion_rate = calculateCompletionRate({
+    html_url: issue.ornull.html_url.value,
+    state: issue.ornull.state.value,
+    children: issue.ornull.children.value 
+  });
+  issue.merge((issue) => ({ ...issue, completion_rate })) // = completionRate
+  issue.ornull.children.forEach(assignCompletionRateToIssues)
+}
diff --git a/pages/roadmap/[...slug].tsx b/pages/roadmap/[...slug].tsx
index f45dec8e..8ab363ae 100644
--- a/pages/roadmap/[...slug].tsx
+++ b/pages/roadmap/[...slug].tsx
@@ -13,6 +13,7 @@ import { BASE_PROTOCOL } from '../../config/constants';
 import { setDateGranularity } from '../../hooks/useDateGranularity';
 import { useGlobalLoadingState } from '../../hooks/useGlobalLoadingState';
 import { setViewMode } from '../../hooks/useViewMode';
+import { assignCompletionRateToIssues } from '../../lib/calculateCompletionRate';
 import { DateGranularityState, RoadmapMode, ViewMode } from '../../lib/enums';
 import { findIssueDataByUrl } from '../../lib/findIssueDataByUrl';
 import { mergeStarMapsErrorGroups } from '../../lib/mergeStarMapsErrorGroups';
@@ -201,6 +202,7 @@ export default function RoadmapPage(props: InferGetServerSidePropsType<typeof ge
    */
   useEffect(() => {
     if (!isRootIssueLoading && pendingChildrenState.length === 0 && asyncIssueDataState.length === 0) {
+      assignCompletionRateToIssues(issueDataState)
       globalLoadingState.stop();
     } else {
       globalLoadingState.start();
diff --git a/tests/unit/backend/calculateCompletionRate.test.ts b/tests/unit/calculateCompletionRate.test.ts
similarity index 98%
rename from tests/unit/backend/calculateCompletionRate.test.ts
rename to tests/unit/calculateCompletionRate.test.ts
index 862f047c..8011d2ac 100644
--- a/tests/unit/backend/calculateCompletionRate.test.ts
+++ b/tests/unit/calculateCompletionRate.test.ts
@@ -1,6 +1,6 @@
-import { calculateCompletionRate, CalculateCompletionRateOptions } from '../../../lib/backend/calculateCompletionRate'
-import { IssueStates } from '../../../lib/enums';
-import { IssueData } from '../../../lib/types';
+import { calculateCompletionRate, CalculateCompletionRateOptions } from '../../lib/calculateCompletionRate'
+import { IssueStates } from '../../lib/enums';
+import { IssueData } from '../../lib/types';
 
 const closed = IssueStates.CLOSED;
 const open = IssueStates.OPEN;