diff --git a/app/src/views/OperationalLearning/OperationalLearningMap/i18n.json b/app/src/views/OperationalLearning/OperationalLearningMap/i18n.json
index 4f8b0c457..acb106275 100644
--- a/app/src/views/OperationalLearning/OperationalLearningMap/i18n.json
+++ b/app/src/views/OperationalLearning/OperationalLearningMap/i18n.json
@@ -2,6 +2,7 @@
     "namespace": "operationalLearning",
     "strings": {
         "downloadMapTitle": "Operational learning map",
-        "learningLegendLabel": "Learnings"
+        "learningLegendLabel": "Learnings",
+        "learningCountLegendLabel":"Learning count"
     }
 }
diff --git a/app/src/views/OperationalLearning/OperationalLearningMap/index.tsx b/app/src/views/OperationalLearning/OperationalLearningMap/index.tsx
index 345c5121d..559905b3c 100644
--- a/app/src/views/OperationalLearning/OperationalLearningMap/index.tsx
+++ b/app/src/views/OperationalLearning/OperationalLearningMap/index.tsx
@@ -32,6 +32,7 @@ import {
     adminFillLayerOptions,
     getPointCircleHaloPaint,
 } from '#utils/map';
+import { useRequest } from '#utils/restRequest';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -39,6 +40,7 @@ import styles from './styles.module.css';
 const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
     type: 'geojson',
 };
+
 interface CountryProperties {
     country_id: number;
     name: string;
@@ -64,50 +66,25 @@ function OperationalLearningMap(props: Props) {
         clickedPointProperties,
         setClickedPointProperties,
     ] = useState<ClickedPoint | undefined>();
+
+    const {
+        response: learningResponse,
+    } = useRequest({
+        url: '/api/v2/ops-learning/stats/',
+        query: {},
+    });
     const countryResponse = useCountry();
     const countryCentroidGeoJson = useMemo(
         (): GeoJSON.FeatureCollection<GeoJSON.Geometry> => {
-            const learning_by_country = [
-                {
-                    country_name: 'Afghanistan',
-                    country_id: 14,
-                    operation_count: 40,
-                },
-                {
-                    country_name: 'Albania',
-                    country_id: 15,
-                    operation_count: 10,
-                },
-                {
-                    country_name: 'Argentina',
-                    country_id: 20,
-                    operation_count: 29,
-                },
-                {
-                    country_name: 'Australia',
-                    country_id: 22,
-                    operation_count: 11,
-                },
-                {
-                    country_name: 'Belgium',
-                    country_id: 30,
-                    operation_count: 222,
-                },
-                {
-                    country_name: 'Canada',
-                    country_id: 42,
-                    operation_count: 1,
-                },
-            ];
             const features = countryResponse
                 ?.map((country) => {
-                    const learningList = learning_by_country.find(
-                        (item) => item.country_id === country.id,
+                    const learningList = learningResponse?.learning_by_country?.find(
+                        (item: { country_id: number; }) => item.country_id === country.id,
                     );
                     if (isNotDefined(learningList)) {
                         return undefined;
                     }
-                    const units = learningList.operation_count;
+                    const units = learningList.count;
                     return {
                         type: 'Feature' as const,
                         geometry: country.centroid as {
@@ -127,7 +104,7 @@ function OperationalLearningMap(props: Props) {
                 features,
             };
         },
-        [countryResponse],
+        [countryResponse, learningResponse],
     );
 
     const maxScaleValue = 10; // FIX ME
@@ -239,6 +216,7 @@ function OperationalLearningMap(props: Props) {
                         >
                             <TextOutput
                                 value={clickedPointProperties.feature.properties.operation_count}
+                                label={strings.learningCountLegendLabel}
                                 valueType="number"
                             />
                         </Container>
diff --git a/app/src/views/OperationalLearning/i18n.json b/app/src/views/OperationalLearning/i18n.json
index dc1279b74..8df6507b3 100644
--- a/app/src/views/OperationalLearning/i18n.json
+++ b/app/src/views/OperationalLearning/i18n.json
@@ -25,8 +25,8 @@
         "sourcesUsed": "Sources Used",
         "learningExtract": "Learning Extracts",
         "sectorsCovered": "Sectors Covered",
-        "learningBySector": "learnings by sectors",
-        "learningByRegions": "learnings by regions",
-        "sourceOvertime": "Sources Overtime"
+        "learningBySector": "Learning by sectors",
+        "learningByRegions": "Learning by regions",
+        "sourceOvertime": "Sources overtime"    
     }
 }
diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
index f741143ca..dda515f7c 100644
--- a/app/src/views/OperationalLearning/index.tsx
+++ b/app/src/views/OperationalLearning/index.tsx
@@ -94,7 +94,6 @@ type QueryType = Pick<
     | 'per_component_validated__in'
     | 'search_extracts'
 >;
-
 const regionKeySelector = (region: RegionOption) => region.key;
 const countryKeySelector = (country: Country) => country.id;
 const sectorKeySelector = (d: SecondarySector) => d.key;
@@ -103,86 +102,7 @@ const perComponentKeySelector = (option: PerComponent) => option.id;
 const disasterTypeKeySelector = (type: DisasterType) => type.id;
 const disasterTypeLabelSelector = (type: DisasterType) => type.name ?? '?';
 
-const responseData = {
-    operations_included: 9,
-    learning_extracts: 6,
-    sectors_covered: 6,
-    sources_used: 8,
-    learning_by_region: [
-        {
-            region_name: 'Americas',
-            region_id: 1,
-            count: 2,
-        },
-        {
-            region_name: 'Asia Pacific',
-            region_id: 2,
-            count: 5,
-        },
-        {
-            region_name: 'Europe',
-            region_id: 3,
-            count: 2,
-        },
-    ],
-    learning_by_sector: [
-        {
-            id: 17,
-            count: 1,
-            title: 'health',
-        },
-        {
-            id: 18,
-            count: 1,
-            title: 'education',
-        },
-        {
-            id: 19,
-            count: 3,
-            title: 'Livelihoods and basic needs',
-        },
-        {
-            id: 20,
-            count: 4,
-            title: 'Migration',
-        },
-        {
-            id: 21,
-            count: 1,
-            title: 'WASH',
-        },
-        {
-            id: 22,
-            count: 1,
-            title: 'Shelter',
-        },
-    ],
-    sources_overtime: {
-        DREF: [
-            { year: 2023, count: 1 },
-            { year: 2024, count: 3 },
-        ],
-        'Emergency Appeal': [
-            { year: 2023, count: 1 },
-            { year: 2024, count: 1 },
-        ],
-        'International Appeal': [
-            { year: 2023, count: 1 },
-            { year: 2024, count: 1 },
-        ],
-        'Forecast Based Action': [
-            { year: 2022, count: 1 },
-        ],
-    },
-};
-
-const timeSeriesDataKeys = Object.entries(
-    responseData.sources_overtime,
-).flatMap(([source, entries]) => entries.map((entry) => ({
-    date: `${entry.year}-01-01`,
-    value: entry.count,
-    source,
-})));
+const timeSeriesDataKeys = ['Learnings'];
 
 const oneYearAgo = new Date();
 oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
@@ -394,14 +314,26 @@ export function Component() {
         setQuery(undefined);
     }, [resetFilter]);
 
+    const {
+        response: learningStatsResponse,
+    } = useRequest({
+        url: '/api/v2/ops-learning/stats/',
+        query: {
+            ...query,
+        },
+    });
     const timeSeriesValueSelector = useCallback(
         (_: string, date: Date) => {
-            const entry = timeSeriesDataKeys?.find(
-                (source) => getFormattedDateKey(source.date) === getFormattedDateKey(date),
-            );
-            return entry ? entry.value : undefined;
+            if (!Array.isArray(learningStatsResponse)) {
+                return 0;
+            }
+            return learningStatsResponse.find(
+                (source: { date: number; }) => (
+                    getFormattedDateKey(source.date) === getFormattedDateKey(date)
+                ),
+            )?.count ?? 0;
         },
-        [],
+        [learningStatsResponse],
     );
 
     return (
@@ -566,45 +498,42 @@ export function Component() {
                     </>
                 )}
             />
-            <div
-                className={styles.keyFigureCardList}
-            >
+            <div className={styles.keyFigureCardList}>
                 <div className={styles.keyFigureCard}>
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.operations_included}
+                        value={learningStatsResponse?.operations_included}
                         label={strings.operationsIncluded}
                         labelClassName={styles.keyFigureDescription}
                     />
                     <div className={styles.separator} />
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.sources_used}
+                        value={learningStatsResponse?.sources_used}
                         label={strings.sourcesUsed}
                         labelClassName={styles.keyFigureDescription}
                     />
                     <div className={styles.separator} />
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.learning_extracts}
+                        value={learningStatsResponse?.learning_extracts}
                         label={strings.learningExtract}
                         labelClassName={styles.keyFigureDescription}
                     />
                     <div className={styles.separator} />
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.sectors_covered}
+                        value={learningStatsResponse?.sectors_covered}
                         label={strings.sectorsCovered}
                         labelClassName={styles.keyFigureDescription}
                     />
                 </div>
             </div>
-
             <div
                 className={styles.learningOverview}
             >
                 <OperationalLearningMap
-                    className={styles.mapConatiner}
+                    className={styles.mapContainer}
                 />
                 <div className={styles.charts}>
                     <Container
@@ -614,7 +543,7 @@ export function Component() {
                         withInternalPadding
                     >
                         <BarChart
-                            data={responseData.learning_by_sector}
+                            data={learningStatsResponse?.learning_by_sector}
                             keySelector={sectorsKeySelector}
                             valueSelector={sectorsValueSelector}
                             labelSelector={sectorsLabelSelector}
@@ -627,7 +556,7 @@ export function Component() {
                         withInternalPadding
                     >
                         <BarChart
-                            data={responseData.learning_by_region}
+                            data={learningStatsResponse?.learning_by_region}
                             keySelector={regionsKeySelector}
                             valueSelector={regionValueSelector}
                             labelSelector={regionLabelSelector}
@@ -638,12 +567,6 @@ export function Component() {
                         className={styles.learningChart}
                         withHeaderBorder
                         withInternalPadding
-                        footerContent={(
-                            <div className={styles.footer}>
-                                <div className={styles.legend} />
-                            </div>
-
-                        )}
                     >
                         <TimeSeriesChart
                             className={styles.timeSeriesChart}
diff --git a/app/src/views/OperationalLearning/styles.module.css b/app/src/views/OperationalLearning/styles.module.css
index 5cd7bdaf4..25abefdc2 100644
--- a/app/src/views/OperationalLearning/styles.module.css
+++ b/app/src/views/OperationalLearning/styles.module.css
@@ -89,7 +89,7 @@
             border-radius: var(--go-ui-border-radius-lg);
             box-shadow: var(--go-ui-box-shadow-md);
             background-color: var(--go-ui-color-white);
-            padding: var(--go-ui-spacing-md);
+            padding: var(--go-ui-spacing-xl);
     
             .separator {
                 flex-shrink: 0;
@@ -111,11 +111,6 @@
         display: grid;
         grid-gap: var(--go-ui-spacing-md);
         grid-template-columns: 5fr 2fr;
-        
-        .map-container {
-            grid-column: 1 / 2;
-            grid-row: 1 / 2;
-        }
     
         .charts {
             display: grid;