diff --git a/frontend/src/lib/components/utils/LoadingSpinner.svelte b/frontend/src/lib/components/utils/LoadingSpinner.svelte
new file mode 100644
index 000000000..6a20985a5
--- /dev/null
+++ b/frontend/src/lib/components/utils/LoadingSpinner.svelte
@@ -0,0 +1,3 @@
+<div class="flex items-center justify-center h-full">
+	<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500"></div>
+</div>
diff --git a/frontend/src/routes/(app)/(internal)/analytics/+page.server.ts b/frontend/src/routes/(app)/(internal)/analytics/+page.server.ts
index f4100ed1c..bbf5223d0 100644
--- a/frontend/src/routes/(app)/(internal)/analytics/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/analytics/+page.server.ts
@@ -3,38 +3,9 @@ import { composerSchema } from '$lib/utils/schemas';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 import type { PageServerLoad } from './$types';
-import type { Project } from '$lib/utils/types';
 import { TODAY } from '$lib/utils/constants';
 import * as m from '$paraglide/messages';
 
-const REQUIREMENT_ASSESSMENT_STATUS = [
-	'compliant',
-	'partially_compliant',
-	'in_progress',
-	'non_compliant',
-	'not_applicable',
-	'to_do'
-] as const;
-
-interface DonutItem {
-	name: string;
-	localName?: string;
-	value: number;
-	itemStyle: Record<string, unknown>;
-}
-
-interface RequirementAssessmentDonutItem extends Omit<DonutItem, 'name'> {
-	name: (typeof REQUIREMENT_ASSESSMENT_STATUS)[number];
-	percentage: string;
-}
-
-interface ProjectAnalytics extends Project {
-	overallCompliance: {
-		values: RequirementAssessmentDonutItem[];
-		total: number;
-	};
-}
-
 export const load: PageServerLoad = async ({ locals, fetch }) => {
 	const req_applied_control_status = await fetch(`${BASE_API_URL}/applied-controls/per_status/`);
 	const applied_control_status = await req_applied_control_status.json();
@@ -69,11 +40,26 @@ export const load: PageServerLoad = async ({ locals, fetch }) => {
 		applied_control.state = timeState(applied_control.eta);
 	}
 
-	const req_get_counters = await fetch(`${BASE_API_URL}/get_counters/`);
-	const counters = await req_get_counters.json();
-
-	const req_get_metrics = await fetch(`${BASE_API_URL}/get_metrics/`);
-	const metrics = await req_get_metrics.json();
+	const getCounters = async () => {
+		try {
+			const response = await fetch(`${BASE_API_URL}/get_counters/`);
+			const data = await response.json();
+			return data.results;
+		} catch (error) {
+			console.error('failed to fetch or parse counters:', error);
+			return null;
+		}
+	};
+	const getMetrics = async () => {
+		try {
+			const response = await fetch(`${BASE_API_URL}/get_metrics/`);
+			const data = await response.json();
+			return data.results;
+		} catch (error) {
+			console.error('Failed to fetch or parse metrics:', error);
+			return null;
+		}
+	};
 
 	const usedRiskMatrices: { id: string; name: string; risk_assessments_count: number }[] =
 		await fetch(`${BASE_API_URL}/risk-matrices/used/`)
@@ -126,11 +112,13 @@ export const load: PageServerLoad = async ({ locals, fetch }) => {
 		measures_to_review: measures_to_review.results,
 		acceptances_to_review: acceptances_to_review.results,
 		risk_assessments: risk_assessments.results,
-		get_counters: counters.results,
 		measures: ord_applied_controls.results,
 		applied_control_status: applied_control_status.results,
 		user: locals.user,
-		metrics: metrics.results,
-		title: m.analytics()
+		title: m.analytics(),
+		stream: {
+			metrics: getMetrics(),
+			counters: getCounters()
+		}
 	};
 };
diff --git a/frontend/src/routes/(app)/(internal)/analytics/+page.svelte b/frontend/src/routes/(app)/(internal)/analytics/+page.svelte
index 029203404..7c717f9fd 100644
--- a/frontend/src/routes/(app)/(internal)/analytics/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/analytics/+page.svelte
@@ -17,20 +17,10 @@
 	import CounterCard from './CounterCard.svelte';
 	import type { PageData } from './$types';
 	import StackedBarsNormalized from '$lib/components/Chart/StackedBarsNormalized.svelte';
-
-	interface Counters {
-		domains: number;
-		projects: number;
-		applied_controls: number;
-		risk_assessments: number;
-		compliance_assessments: number;
-		policies: number;
-	}
+	import LoadingSpinner from '$lib/components/utils/LoadingSpinner.svelte';
 
 	export let data: PageData;
 
-	const counters: Counters = data.get_counters;
-	const metrics = data.metrics;
 	const risk_assessments = data.risk_assessments;
 
 	const cur_rsk_label = m.currentRisk();
@@ -108,15 +98,6 @@
 		$page.url.searchParams.set('tab', index.toString());
 		goto($page.url);
 	}
-
-	const REQUIREMENT_ASSESSMENT_STATUS = [
-		'compliant',
-		'partially_compliant',
-		'in_progress',
-		'non_compliant',
-		'not_applicable',
-		'to_do'
-	] as const;
 </script>
 
 <TabGroup class="">
@@ -137,228 +118,248 @@
 	<svelte:fragment slot="panel">
 		<div class="px-4 pb-4 space-y-8">
 			{#if tabSet === 0}
-				<section id="summary" class=" grid grid-cols-6 gap-2">
-					<Card
-						count={metrics.controls.total}
-						label={m.sumpageTotal()}
-						href="/applied-controls/"
-						icon="fa-solid fa-shield-halved"
-						section={m.sumpageSectionControls()}
-						emphasis={true}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<Card
-						count={metrics.controls.active}
-						label={m.sumpageActive()}
-						href="/applied-controls/?status=active"
-						icon="fa-solid fa-shield-halved"
-						section={m.sumpageSectionControls()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<Card
-						count={metrics.controls.deprecated}
-						label={m.sumpageDeprecated()}
-						href="/applied-controls/?status=deprecated"
-						icon="fa-solid fa-shield-halved"
-						section={m.sumpageSectionControls()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<Card
-						count={metrics.controls.to_do}
-						label={m.sumpageToDo()}
-						href="/applied-controls/?status=to_do"
-						icon="fa-solid fa-shield-halved"
-						section={m.sumpageSectionControls()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<div class="h-80 col-span-6 lg:col-span-2 row-span-2 bg-white">
-						<NightingaleChart name="nightingale" values={metrics.csf_functions} />
+				{#await data.stream.metrics}
+					<div class="col-span-3 lg:col-span-1">
+						<div>Refreshing data ..</div>
+						<LoadingSpinner />
 					</div>
-					<Card
-						count={metrics.controls.in_progress}
-						label={m.sumpageInProgress()}
-						href="/applied-controls/?status=in_progress"
-						icon="fa-solid fa-shield-halved"
-						section={m.sumpageSectionControls()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<Card
-						count={metrics.controls.on_hold}
-						label={m.sumpageOnHold()}
-						href="/applied-controls/?status=on_hold"
-						icon="fa-solid fa-shield-halved"
-						section={m.sumpageSectionControls()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<Card
-						count={metrics.controls.p1}
-						label={m.sumpageP1()}
-						href="/applied-controls/?priority=p1"
-						icon="fa-solid fa-shield-halved"
-						section={m.sumpageSectionControls()}
-						emphasis={true}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<Card
-						count={metrics.controls.eta_missed}
-						label={m.sumpageEtaMissed()}
-						href="/applied-controls/?status=on_hold"
-						icon="fa-solid fa-shield-halved"
-						section={m.sumpageSectionControls()}
-						emphasis={true}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<div class="col-span-6 lg:col-span-4 row-span-4 bg-white h-96">
-						<StackedBarsNormalized
-							names={metrics.audits_stats.names}
-							data={metrics.audits_stats.data}
-							uuids={metrics.audits_stats.uuids}
+				{:then metrics}
+					<section id="summary" class=" grid grid-cols-6 gap-2">
+						<Card
+							count={metrics.controls.total}
+							label={m.sumpageTotal()}
+							href="/applied-controls/"
+							icon="fa-solid fa-shield-halved"
+							section={m.sumpageSectionControls()}
+							emphasis={true}
+							customClass="col-span-3 lg:col-span-1"
 						/>
-					</div>
-					<!---->
-					<Card
-						count={metrics.compliance.used_frameworks}
-						label={m.usedFrameworks()}
-						href="/frameworks/"
-						icon="fa-solid fa-list-check"
-						section={m.sumpageSectionCompliance()}
-						emphasis={true}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<div></div>
-					<Card
-						count="{metrics.compliance.active_audits}/{metrics.compliance.audits}"
-						label={m.sumpageActiveAudits()}
-						href="/compliance-assessments/"
-						icon="fa-solid fa-list-check"
-						section={m.sumpageSectionCompliance()}
-						emphasis={true}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-
-					<Card
-						count="{metrics.compliance.progress_avg}%"
-						label={m.sumpageAvgProgress()}
-						href="/compliance-assessments/"
-						icon="fa-solid fa-list-check"
-						section={m.sumpageSectionCompliance()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<Card
-						count={metrics.compliance.non_compliant_items}
-						label={m.sumpageNonCompliantItems()}
-						href="#"
-						icon="fa-solid fa-list-check"
-						section={m.sumpageSectionCompliance()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<Card
-						count={metrics.compliance.evidences}
-						label={m.sumpageEvidences()}
-						href="/evidences/"
-						icon="fa-solid fa-list-check"
-						section={m.sumpageSectionCompliance()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<div class=""></div>
-					<div class=""></div>
-					<!---->
-					<div class="col-span-6 lg:col-span-2 row-span-2 h-80 bg-white">
-						<HalfDonutChart
-							name="current_h"
-							title={m.sumpageTitleCurrentRisks()}
-							values={data.risks_count_per_level.current}
-							colors={data.risks_count_per_level.current.map((object) => object.color)}
+						<Card
+							count={metrics.controls.active}
+							label={m.sumpageActive()}
+							href="/applied-controls/?status=active"
+							icon="fa-solid fa-shield-halved"
+							section={m.sumpageSectionControls()}
+							customClass="col-span-3 lg:col-span-1"
 						/>
-					</div>
-					<Card
-						count={metrics.risk.assessments}
-						label={m.sumpageAssessments()}
-						href="/risk-assessments/"
-						emphasis={true}
-						icon="fa-solid fa-biohazard"
-						section={m.sumpageSectionRisk()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<Card
-						count={metrics.risk.scenarios}
-						label={m.sumpageScenarios()}
-						href="/risk-scenarios/"
-						icon="fa-solid fa-biohazard"
-						section={m.sumpageSectionRisk()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<div class="col-span-6 lg:col-span-2 row-span-2 h-80 bg-white">
-						<HalfDonutChart
-							name="residual_h"
-							title={m.sumpageTitleResidualRisks()}
-							values={data.risks_count_per_level.residual}
-							colors={data.risks_count_per_level.residual.map((object) => object.color)}
+						<Card
+							count={metrics.controls.deprecated}
+							label={m.sumpageDeprecated()}
+							href="/applied-controls/?status=deprecated"
+							icon="fa-solid fa-shield-halved"
+							section={m.sumpageSectionControls()}
+							customClass="col-span-3 lg:col-span-1"
 						/>
-					</div>
-					<Card
-						count={metrics.risk.threats}
-						label={m.sumpageMappedThreats()}
-						href="/analytics?tab=2"
-						icon="fa-solid fa-biohazard"
-						section={m.sumpageSectionRisk()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<!---->
-					<Card
-						count={metrics.risk.acceptances}
-						label={m.sumpageRiskAccepted()}
-						href="/risk-acceptances"
-						icon="fa-solid fa-biohazard"
-						section={m.sumpageSectionRisk()}
-						customClass="col-span-3 lg:col-span-1"
-					/>
-					<div class=""></div>
-				</section>
-			{:else if tabSet === 1}
-				<section id="stats">
-					<span class="text-xl font-extrabold">{m.statistics()}</span>
-					<div
-						class="flex justify-between flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4"
-					>
-						<CounterCard
-							count={counters.domains}
-							label={m.domains()}
-							faIcon="fa-solid fa-diagram-project"
-							href="/folders"
+						<Card
+							count={metrics.controls.to_do}
+							label={m.sumpageToDo()}
+							href="/applied-controls/?status=to_do"
+							icon="fa-solid fa-shield-halved"
+							section={m.sumpageSectionControls()}
+							customClass="col-span-3 lg:col-span-1"
 						/>
-						<CounterCard
-							count={counters.projects}
-							label={m.projects()}
-							faIcon="fa-solid fa-cubes"
-							href="/projects"
+						<div class="h-80 col-span-6 lg:col-span-2 row-span-2 bg-white">
+							<NightingaleChart name="nightingale" values={metrics.csf_functions} />
+						</div>
+						<Card
+							count={metrics.controls.in_progress}
+							label={m.sumpageInProgress()}
+							href="/applied-controls/?status=in_progress"
+							icon="fa-solid fa-shield-halved"
+							section={m.sumpageSectionControls()}
+							customClass="col-span-3 lg:col-span-1"
+						/>
+						<Card
+							count={metrics.controls.on_hold}
+							label={m.sumpageOnHold()}
+							href="/applied-controls/?status=on_hold"
+							icon="fa-solid fa-shield-halved"
+							section={m.sumpageSectionControls()}
+							customClass="col-span-3 lg:col-span-1"
+						/>
+						<Card
+							count={metrics.controls.p1}
+							label={m.sumpageP1()}
+							href="/applied-controls/?priority=p1"
+							icon="fa-solid fa-shield-halved"
+							section={m.sumpageSectionControls()}
+							emphasis={true}
+							customClass="col-span-3 lg:col-span-1"
+						/>
+						<Card
+							count={metrics.controls.eta_missed}
+							label={m.sumpageEtaMissed()}
+							href="/applied-controls/?status=on_hold"
+							icon="fa-solid fa-shield-halved"
+							section={m.sumpageSectionControls()}
+							emphasis={true}
+							customClass="col-span-3 lg:col-span-1"
+						/>
+						<div class="col-span-6 lg:col-span-4 row-span-4 bg-white h-96">
+							<StackedBarsNormalized
+								names={metrics.audits_stats.names}
+								data={metrics.audits_stats.data}
+								uuids={metrics.audits_stats.uuids}
+							/>
+						</div>
+						<!---->
+						<Card
+							count={metrics.compliance.used_frameworks}
+							label={m.usedFrameworks()}
+							href="/frameworks/"
+							icon="fa-solid fa-list-check"
+							section={m.sumpageSectionCompliance()}
+							emphasis={true}
+							customClass="col-span-3 lg:col-span-1"
 						/>
-						<CounterCard
-							count={counters.applied_controls}
-							label={m.appliedControls()}
-							faIcon="fa-solid fa-fire-extinguisher"
-							href="/applied-controls"
+						<div></div>
+						<Card
+							count="{metrics.compliance.active_audits}/{metrics.compliance.audits}"
+							label={m.sumpageActiveAudits()}
+							href="/compliance-assessments/"
+							icon="fa-solid fa-list-check"
+							section={m.sumpageSectionCompliance()}
+							emphasis={true}
+							customClass="col-span-3 lg:col-span-1"
 						/>
-						<CounterCard
-							count={counters.risk_assessments}
-							label={m.riskAssessments()}
-							faIcon="fa-solid fa-magnifying-glass-chart"
-							href="/risk-assessments"
+
+						<Card
+							count="{metrics.compliance.progress_avg}%"
+							label={m.sumpageAvgProgress()}
+							href="/compliance-assessments/"
+							icon="fa-solid fa-list-check"
+							section={m.sumpageSectionCompliance()}
+							customClass="col-span-3 lg:col-span-1"
 						/>
-						<CounterCard
-							count={counters.compliance_assessments}
-							label={m.complianceAssessments()}
-							faIcon="fa-solid fa-arrows-to-eye"
-							href="/compliance-assessments"
+						<Card
+							count={metrics.compliance.non_compliant_items}
+							label={m.sumpageNonCompliantItems()}
+							href="#"
+							icon="fa-solid fa-list-check"
+							section={m.sumpageSectionCompliance()}
+							customClass="col-span-3 lg:col-span-1"
 						/>
-						<CounterCard
-							count={counters.policies}
-							label={m.policies()}
-							faIcon="fas fa-file-alt"
-							href="/policies"
+						<Card
+							count={metrics.compliance.evidences}
+							label={m.sumpageEvidences()}
+							href="/evidences/"
+							icon="fa-solid fa-list-check"
+							section={m.sumpageSectionCompliance()}
+							customClass="col-span-3 lg:col-span-1"
 						/>
+						<div class=""></div>
+						<div class=""></div>
+						<!---->
+						<div class="col-span-6 lg:col-span-2 row-span-2 h-80 bg-white">
+							<HalfDonutChart
+								name="current_h"
+								title={m.sumpageTitleCurrentRisks()}
+								values={data.risks_count_per_level.current}
+								colors={data.risks_count_per_level.current.map((object) => object.color)}
+							/>
+						</div>
+						<Card
+							count={metrics.risk.assessments}
+							label={m.sumpageAssessments()}
+							href="/risk-assessments/"
+							emphasis={true}
+							icon="fa-solid fa-biohazard"
+							section={m.sumpageSectionRisk()}
+							customClass="col-span-3 lg:col-span-1"
+						/>
+						<Card
+							count={metrics.risk.scenarios}
+							label={m.sumpageScenarios()}
+							href="/risk-scenarios/"
+							icon="fa-solid fa-biohazard"
+							section={m.sumpageSectionRisk()}
+							customClass="col-span-3 lg:col-span-1"
+						/>
+						<div class="col-span-6 lg:col-span-2 row-span-2 h-80 bg-white">
+							<HalfDonutChart
+								name="residual_h"
+								title={m.sumpageTitleResidualRisks()}
+								values={data.risks_count_per_level.residual}
+								colors={data.risks_count_per_level.residual.map((object) => object.color)}
+							/>
+						</div>
+						<Card
+							count={metrics.risk.threats}
+							label={m.sumpageMappedThreats()}
+							href="/analytics?tab=2"
+							icon="fa-solid fa-biohazard"
+							section={m.sumpageSectionRisk()}
+							customClass="col-span-3 lg:col-span-1"
+						/>
+						<!---->
+						<Card
+							count={metrics.risk.acceptances}
+							label={m.sumpageRiskAccepted()}
+							href="/risk-acceptances"
+							icon="fa-solid fa-biohazard"
+							section={m.sumpageSectionRisk()}
+							customClass="col-span-3 lg:col-span-1"
+						/>
+						<div class=""></div>
+					</section>
+				{:catch error}
+					<div class="col-span-3 lg:col-span-1">
+						<p class="text-red-500">Error loading metrics</p>
 					</div>
-				</section>
+				{/await}
+			{:else if tabSet === 1}
+				{#await data.stream.counters}
+					<div class="col-span-3 lg:col-span-1">
+						<div>Refreshing data ..</div>
+						<LoadingSpinner />
+					</div>
+				{:then counters}
+					<section id="stats">
+						<span class="text-xl font-extrabold">{m.statistics()}</span>
+						<div
+							class="flex justify-between flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4"
+						>
+							<CounterCard
+								count={counters.domains}
+								label={m.domains()}
+								faIcon="fa-solid fa-diagram-project"
+								href="/folders"
+							/>
+							<CounterCard
+								count={counters.projects}
+								label={m.projects()}
+								faIcon="fa-solid fa-cubes"
+								href="/projects"
+							/>
+							<CounterCard
+								count={counters.applied_controls}
+								label={m.appliedControls()}
+								faIcon="fa-solid fa-fire-extinguisher"
+								href="/applied-controls"
+							/>
+							<CounterCard
+								count={counters.risk_assessments}
+								label={m.riskAssessments()}
+								faIcon="fa-solid fa-magnifying-glass-chart"
+								href="/risk-assessments"
+							/>
+							<CounterCard
+								count={counters.compliance_assessments}
+								label={m.complianceAssessments()}
+								faIcon="fa-solid fa-arrows-to-eye"
+								href="/compliance-assessments"
+							/>
+							<CounterCard
+								count={counters.policies}
+								label={m.policies()}
+								faIcon="fas fa-file-alt"
+								href="/policies"
+							/>
+						</div>
+					</section>
+				{:catch error}
+					<div>Data load eror</div>
+				{/await}
 				<section class="space-y-4">
 					<div
 						class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4 h-96 lg:h-48 text-sm whitespace-nowrap"