diff --git a/src/lib/types.ts b/src/lib/types.ts
index 3856f95..a2880ab 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -119,7 +119,6 @@ export type ReportTags = {
 	outdated_elements: number;
 	legacy_elements: number;
 	avg_verification_date: string;
-	grade: Grade;
 };
 
 export type Grade = 1 | 2 | 3 | 4 | 5;
@@ -200,6 +199,7 @@ export type ProfileLeaderboard = { id: number; total: number };
 
 export interface LeaderboardArea extends Area {
 	report: Report;
+	grade: Grade;
 }
 
 // tagger
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index be485bf..b6ea546 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -2,6 +2,7 @@ import { theme } from '$lib/store';
 import { toast } from '@zerodevx/svelte-toast';
 import type { Chart } from 'chart.js';
 import { get } from 'svelte/store';
+import type { Grade } from './types';
 
 export const errToast = (m: string) => {
 	toast.push(m, {
@@ -80,3 +81,19 @@ export const formatElementID = (id: string) => {
 
 	return elementIdFormatted;
 };
+
+export const getGrade = (upToDatePercent: number): Grade => {
+	switch (true) {
+		case upToDatePercent >= 95:
+			return 5;
+		case upToDatePercent >= 75:
+			return 4;
+		case upToDatePercent >= 50:
+			return 3;
+		case upToDatePercent >= 25:
+			return 2;
+		case upToDatePercent >= 0:
+		default:
+			return 1;
+	}
+};
diff --git a/src/routes/communities/leaderboard/+page.svelte b/src/routes/communities/leaderboard/+page.svelte
index f41794e..af74014 100644
--- a/src/routes/communities/leaderboard/+page.svelte
+++ b/src/routes/communities/leaderboard/+page.svelte
@@ -10,7 +10,7 @@
 	} from '$lib/comp';
 	import { areaError, areas, reportError, reports, syncStatus, theme } from '$lib/store';
 	import type { Area, LeaderboardArea, Report } from '$lib/types';
-	import { detectTheme, errToast } from '$lib/utils';
+	import { detectTheme, errToast, getGrade } from '$lib/utils';
 	import tippy from 'tippy.js';
 
 	// alert for area errors
@@ -59,7 +59,9 @@
 				let communityReport = communityReports.find((report) => report.area_id === community.id);
 
 				if (communityReport) {
-					leaderboard.push({ ...community, report: communityReport });
+					const grade = getGrade(communityReport.tags.up_to_date_percent);
+
+					leaderboard.push({ ...community, report: communityReport, grade });
 				}
 			});
 
@@ -217,7 +219,7 @@
 								id={item.id}
 								upToDate={item.report.tags.up_to_date_percent}
 								total={item.report.tags.total_elements}
-								grade={item.report.tags.grade}
+								grade={item.grade}
 							/>
 						{/each}
 
diff --git a/src/routes/community/[area]/+page.svelte b/src/routes/community/[area]/+page.svelte
index 0d876d2..b837683 100644
--- a/src/routes/community/[area]/+page.svelte
+++ b/src/routes/community/[area]/+page.svelte
@@ -55,7 +55,7 @@
 		type Leaflet,
 		type User
 	} from '$lib/types.js';
-	import { detectTheme, errToast, formatElementID, updateChartThemes } from '$lib/utils';
+	import { detectTheme, errToast, formatElementID, getGrade, updateChartThemes } from '$lib/utils';
 	// @ts-expect-error
 	import rewind from '@mapbox/geojson-rewind';
 	import Chart from 'chart.js/auto';
@@ -345,27 +345,7 @@
 
 		legacyPercent = legacy ? (legacy / (total / 100)).toFixed(0) : '0';
 
-		const setGrade = () => {
-			switch (true) {
-				case Number(upToDatePercent) >= 95:
-					grade = 5;
-					break;
-				case Number(upToDatePercent) >= 75:
-					grade = 4;
-					break;
-				case Number(upToDatePercent) >= 50:
-					grade = 3;
-					break;
-				case Number(upToDatePercent) >= 25:
-					grade = 2;
-					break;
-				case Number(upToDatePercent) >= 0:
-					grade = 1;
-					break;
-			}
-		};
-
-		setGrade();
+		grade = getGrade(Number(upToDatePercent));
 
 		const populateCharts = () => {
 			const chartsReports = [...communityReports].sort(