diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
index 7567f8c4f..e2304b48f 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -24,12 +24,12 @@ function Hero({
   level,
   explorePageSlug,
   averageTemperature,
+  zoom: zoomProp,
   ...props
 }) {
   const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
-  const continentLevelZoom = isUpLg ? 3.05 : 2.1; // We have to reduce the zoom level for continent so that all countries(Including islands) are visible within the designs
-  const countryLevelZoom = isUpLg ? 6 : 5.25;
-  const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom;
+  const { desktop, mobile } = zoomProp;
+  const zoom = isUpLg ? desktop : mobile;
   return (
     <Box
       sx={{
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.test.js b/apps/climatemappedafrica/src/components/Hero/Hero.test.js
index 2f50687e7..575f97b36 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.test.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.test.js
@@ -57,6 +57,10 @@ const defaultProps = {
     { min: 25, max: 28, color: "#F96264" },
     { min: 28, max: 31, color: "#F80701" },
   ],
+  zoom: {
+    desktop: 3,
+    mobile: 2,
+  },
 };
 
 describe("<Hero />", () => {
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index f225159d4..580ba8032 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -13,7 +13,7 @@ import {
 export default async function hero(block, _api, _context, { hurumap }) {
   const {
     profilePage,
-    rootGeography: { center, code, hasData: pinRootGeography },
+    rootGeography: { center, code, hasData: pinRootGeography, zoom },
     profile: hurumapProfile,
   } = hurumap ?? { rootGeography: {} };
   const { geometries } = await fetchProfileGeography(code.toLowerCase());
@@ -51,5 +51,6 @@ export default async function hero(block, _api, _context, { hurumap }) {
     slug: "hero",
     choropleth,
     legend,
+    zoom,
   };
 }
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
index d0b44ae0f..5e5fe4e47 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js
@@ -44,6 +44,42 @@ const RootGeography = {
               "Indicates whether the root geography itself has data that can be used for comparison with its children",
           },
         },
+        {
+          name: "zoom",
+          type: "group",
+          fields: [
+            {
+              type: "row",
+              fields: [
+                {
+                  name: "desktop",
+                  label: "Zoom Level for Desktop",
+                  type: "number",
+                  defaultValue: 3.05,
+                  required: true,
+                  admin: {
+                    description:
+                      "Indicates how the map should appear on desktop devices",
+                  },
+                },
+                {
+                  name: "mobile",
+                  label: "Zoom Level for Mobile",
+                  type: "number",
+                  required: true,
+                  defaultValue: 2.7,
+                  admin: {
+                    description:
+                      "Indicates how the map should appear on small devices",
+                  },
+                },
+              ],
+            },
+          ],
+          admin: {
+            hideGutter: true,
+          },
+        },
       ],
     },
   ],