diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
index f5167ad09..a33d2d1c6 100644
--- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
+++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
@@ -1,6 +1,5 @@
-import { Box, Grid, Typography, useMediaQuery } from "@mui/material";
+import { Box, Typography, useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import { chunk, uniqueId } from "lodash";
 import PropTypes from "prop-types";
 import React, { useRef } from "react";
 
@@ -16,10 +15,12 @@ import useStyles from "./useStyles";
 
 const responsive = {
   desktop: {
-    items: 1,
+    items: 4,
+    partialVisibilityGutter: 30,
   },
   tablet: {
-    items: 1,
+    items: 2,
+    partialVisibilityGutter: 30,
   },
 };
 
@@ -33,8 +34,6 @@ function AboutTeam({ title, members: membersProp, ...props }) {
   if (!membersProp?.length) {
     return null;
   }
-  const chunkSize = isMdUp ? 4 : 2;
-  const members = chunk(membersProp, chunkSize);
   const scrollToTeam = () => {
     if (ref.current && !isMdUp) {
       ref.current.scrollIntoView({ behavior: "smooth" });
@@ -69,18 +68,12 @@ function AboutTeam({ title, members: membersProp, ...props }) {
           responsive={responsive}
           classes={{ dotList: classes.dotList }}
         >
-          {members.map((membersChunks) => (
-            <Grid
-              container
-              justifyContent="space-between"
-              key={uniqueId("team-chunk-")}
-            >
-              {membersChunks.map((member) => (
-                <Grid item key={member.title}>
-                  <Card {...member} mediaProps={{ square: true }} />
-                </Grid>
-              ))}
-            </Grid>
+          {membersProp.map((member) => (
+            <Card
+              key={member.title}
+              {...member}
+              mediaProps={{ square: true }}
+            />
           ))}
         </Carousel>
       </Section>
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
index b1f4b04ff..5fd43ea1e 100644
--- a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
@@ -22,6 +22,7 @@ function DropdownSearch({
   icon: IconProp = SearchIcon,
   placeholder,
   variant,
+  sx,
   ...props
 }) {
   const router = useRouter();
@@ -96,7 +97,7 @@ function DropdownSearch({
   );
 
   return (
-    <Box id="location-search">
+    <Box id="location-search" sx={sx}>
       {label && (
         <Typography
           variant="body1"
diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js
index c23980096..1b3576029 100644
--- a/apps/climatemappedafrica/src/components/Footer/index.js
+++ b/apps/climatemappedafrica/src/components/Footer/index.js
@@ -117,11 +117,15 @@ function Footer(props) {
                   {...connect}
                   LinkProps={{
                     component: Link,
-                    sx: { color: "text.secondary" },
+                    sx: {
+                      color: "text.secondary",
+                      alignItems: { xs: "center", lg: "flex-end" },
+                    },
                   }}
+                  alignItems={{ xs: "center", lg: "flex-end" }}
                   TitleProps={{
                     variant: "footerCap",
-                    sx: { color: "text.secondary" },
+                    sx: { color: "text.secondary", mr: 0 },
                   }}
                   sx={{ gap: 2 }}
                   direction="column"
diff --git a/apps/climatemappedafrica/src/components/Footer/useStyles.js b/apps/climatemappedafrica/src/components/Footer/useStyles.js
index 3eb03a86b..fac05e038 100644
--- a/apps/climatemappedafrica/src/components/Footer/useStyles.js
+++ b/apps/climatemappedafrica/src/components/Footer/useStyles.js
@@ -47,9 +47,9 @@ const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
   copyrightText: {
     color: palette.text.secondary,
     order: 5,
-    padding: `0 ${typography.pxToRem(5)}`,
+    padding: `0 ${typography.pxToRem(5)} 0 0`,
     [breakpoints.up("lg")]: {
-      padding: `0 ${typography.pxToRem(10)}`,
+      padding: `0 ${typography.pxToRem(10)} 0 0`,
     },
   },
 }));
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
index 91239fb64..e2304b48f 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -2,9 +2,7 @@ import { RichTypography } from "@commons-ui/legacy";
 import { Box, Grid, useMediaQuery } from "@mui/material";
 import dynamic from "next/dynamic";
 import PropTypes from "prop-types";
-import React, { useState } from "react";
-
-import Legend from "./Legend";
+import React from "react";
 
 import heroBg from "@/climatemappedafrica/assets/images/bg-map-white.jpg";
 import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch";
@@ -26,14 +24,12 @@ function Hero({
   level,
   explorePageSlug,
   averageTemperature,
-  legend,
+  zoom: zoomProp,
   ...props
 }) {
   const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
-  const [hoverGeo, setHoverGeo] = useState(null);
-  const continentLevelZoom = isUpLg ? 3 : 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={{
@@ -58,7 +54,14 @@ function Hero({
         }}
       >
         <Grid container>
-          <Grid item xs={12} md={6}>
+          <Grid
+            display="flex"
+            flexDirection="column"
+            justifyContent="space-between"
+            item
+            xs={12}
+            md={6}
+          >
             <RichHeader
               subtitle={subtitle}
               TitleProps={{
@@ -82,25 +85,24 @@ function Hero({
             >
               {title}
             </RichHeader>
-            <DropdownSearch
-              label={searchLabel}
-              locations={featuredLocations}
-              placeholder={searchPlaceholder}
-              {...props}
-            />
-            <RichTypography
-              variant="caption"
-              sx={{
-                fontSize: { xs: "11px" },
-                color: "#707070",
-                marginTop: {
-                  sm: "20px",
-                  xs: "40px",
-                },
-              }}
-            >
-              {comment}
-            </RichTypography>
+            <Box>
+              <DropdownSearch
+                label={searchLabel}
+                locations={featuredLocations}
+                placeholder={searchPlaceholder}
+                sx={{ mb: 1 }}
+                {...props}
+              />
+              <RichTypography
+                variant="caption"
+                sx={{
+                  fontSize: { xs: "11px" },
+                  color: "#707070",
+                }}
+              >
+                {comment}
+              </RichTypography>
+            </Box>
           </Grid>
           {/* Since map is dynamic-ally loaded, no need for implementation="css" */}
 
@@ -112,34 +114,11 @@ function Hero({
                 tileLayer={{
                   url: "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
                 }}
-                onLayerMouseOver={setHoverGeo}
                 featuredLocations={featuredLocations}
                 explorePageSlug={explorePageSlug}
                 {...props}
               />
             ) : null}
-            <Box
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              gap={2}
-              sx={{ height: 80, width: "100%" }}
-            >
-              <Legend title={averageTemperature} data={legend} />
-              <RichTypography
-                variant="h6"
-                sx={{
-                  lineHeight: 23 / 18,
-                  lineSpacing: "0.9px",
-                  fontWeight: "normal",
-                  textTransform: "capitalize",
-                  display: "flex",
-                  justifyContent: "flex-end",
-                }}
-              >
-                {hoverGeo}
-              </RichTypography>
-            </Box>
           </Grid>
         </Grid>
       </Section>
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index a0e855047..e8ba6f322 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -23,7 +23,7 @@ exports[`<Hero /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-18w5b2b-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-16r8gvm-MuiGrid-root"
         >
           <header
             class="MuiBox-root css-0"
@@ -50,82 +50,52 @@ exports[`<Hero /> renders unchanged 1`] = `
           </header>
           <div
             class="MuiBox-root css-0"
-            id="location-search"
           >
-            <p
-              class="MuiTypography-root MuiTypography-body1 css-1u0kiq2-MuiTypography-root"
-            >
-              Search for a location
-            </p>
             <div
-              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
+              class="MuiBox-root css-19idom"
+              id="location-search"
             >
-              <input
-                aria-label="search"
-                class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
-                placeholder="Search for a location"
-                type="text"
-                value=""
-              />
-              <button
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-oru44q-MuiButtonBase-root-MuiIconButton-root"
-                root="[object Object]"
-                tabindex="0"
-                type="button"
+              <p
+                class="MuiTypography-root MuiTypography-body1 css-1u0kiq2-MuiTypography-root"
               >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
-                  focusable="false"
-                  viewBox="0 0 48 48"
-                />
-                <span
-                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                />
-              </button>
-            </div>
-            <div
-              class="MuiBox-root css-79elbk"
-            />
-          </div>
-        </div>
-        <div
-          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-g8r332-MuiGrid-root"
-        >
-          <div
-            class="MuiBox-root css-ljsg2c"
-          >
-            <div
-              class="MuiBox-root css-0"
-            >
+                Search for a location
+              </p>
               <div
-                class="MuiBox-root css-70qvj9"
+                class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
               >
-                <div
-                  class="MuiBox-root css-1wok3bd"
-                />
-                <div
-                  class="MuiBox-root css-1fg12k3"
-                />
-                <div
-                  class="MuiBox-root css-55biq3"
-                />
-                <div
-                  class="MuiBox-root css-9qafv7"
-                />
-                <div
-                  class="MuiBox-root css-5srxm6"
-                />
-                <div
-                  class="MuiBox-root css-1kw6r8l"
-                />
-                <div
-                  class="MuiBox-root css-oi5eih"
+                <input
+                  aria-label="search"
+                  class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+                  placeholder="Search for a location"
+                  type="text"
+                  value=""
                 />
+                <button
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-oru44q-MuiButtonBase-root-MuiIconButton-root"
+                  root="[object Object]"
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 48 48"
+                  />
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
               </div>
+              <div
+                class="MuiBox-root css-79elbk"
+              />
             </div>
           </div>
         </div>
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-g8r332-MuiGrid-root"
+        />
       </div>
     </div>
   </div>
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/components/Hero/Map.js b/apps/climatemappedafrica/src/components/Hero/Map.js
index c89c1c8a4..21c85b888 100644
--- a/apps/climatemappedafrica/src/components/Hero/Map.js
+++ b/apps/climatemappedafrica/src/components/Hero/Map.js
@@ -1,9 +1,11 @@
+import { RichTypography } from "@commons-ui/legacy";
 import { Box, useTheme } from "@mui/material";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useState } from "react";
 import { MapContainer, GeoJSON } from "react-leaflet";
 
+import Legend from "./Legend";
 import "leaflet/dist/leaflet.css";
 
 function Map({
@@ -13,20 +15,24 @@ function Map({
   styles = {
     height: "100%",
     width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
   },
   geoJSONStyles = {
     color: "#2A2A2C",
     weight: 1,
     dashArray: "2",
   },
-  onLayerMouseOver,
   featuredLocations,
   explorePageSlug,
   choropleth,
+  legend,
+  averageTemperature,
 }) {
   const router = useRouter();
 
   const regionCodes = featuredLocations?.map(({ code }) => code);
+  const [hoverGeo, setHoverGeo] = useState(null);
   const theme = useTheme();
   const onEachFeature = (feature, layer) => {
     const choroplethColor = choropleth?.find?.(
@@ -41,7 +47,7 @@ function Map({
     if (regionCodes.includes(feature.properties.code?.toLowerCase())) {
       layer.setStyle(geoJSONStyles);
       layer.on("mouseover", () => {
-        onLayerMouseOver(feature.properties.name.toLowerCase());
+        setHoverGeo(feature.properties.name.toLowerCase());
         if (explorePageSlug) {
           layer.setStyle({
             fillColor: choroplethColor?.fillColor,
@@ -50,7 +56,7 @@ function Map({
         }
       });
       layer.on("mouseout", () => {
-        onLayerMouseOver(null);
+        setHoverGeo(null);
         layer.setStyle({ ...choroplethColor, fillOpacity: 1, weight: 1 });
       });
       layer.on("click", () => {
@@ -64,12 +70,18 @@ function Map({
   };
 
   return (
-    <Box display="flex" justifyContent={{ xs: "center", md: "flex-end" }}>
+    <Box
+      display="flex"
+      flexWrap="wrap"
+      justifyContent={{ xs: "center", md: "flex-end" }}
+    >
       <Box
+        display="flex"
+        justifyContent={{ xs: "center", md: "flex-start" }}
         sx={{
           position: "relative",
-          height: "471px",
-          width: { xs: "100%", md: "300px", lg: "500px" },
+          height: "500px",
+          width: "100%",
           marginTop: { sm: "55px", lg: "42px" },
           "& .leaflet-container": {
             background: "transparent",
@@ -96,6 +108,31 @@ function Map({
           />
         </MapContainer>
       </Box>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="flex-end"
+        gap={2}
+        sx={{
+          height: 108,
+          width: "100%",
+        }}
+      >
+        <Legend title={averageTemperature} data={legend} />
+        <RichTypography
+          variant="h6"
+          sx={{
+            lineHeight: 23 / 18,
+            lineSpacing: "0.9px",
+            fontWeight: "normal",
+            textTransform: "capitalize",
+            display: "flex",
+            justifyContent: "flex-end",
+          }}
+        >
+          {hoverGeo}
+        </RichTypography>
+      </Box>
     </Box>
   );
 }
@@ -115,11 +152,11 @@ Map.propTypes = {
   styles: PropTypes.shape({}),
   boundary: PropTypes.shape({}),
   geoJSONStyles: PropTypes.shape({}),
-  onLayerMouseOver: PropTypes.func,
   featuredLocations: PropTypes.arrayOf(
     PropTypes.shape({ code: PropTypes.string }),
   ),
   explorePageSlug: PropTypes.string,
+  averageTemperature: PropTypes.string,
 };
 
 export default Map;
diff --git a/apps/climatemappedafrica/src/components/HowItWorks/index.js b/apps/climatemappedafrica/src/components/HowItWorks/index.js
index 9b3dd3d90..c1294744e 100644
--- a/apps/climatemappedafrica/src/components/HowItWorks/index.js
+++ b/apps/climatemappedafrica/src/components/HowItWorks/index.js
@@ -108,6 +108,9 @@ function HowItWorks({
                     xs: "120%",
                     md: "auto",
                   },
+                  img: {
+                    objectFit: "cover",
+                  },
                 },
                 "& .video-js .vjs-big-play-button": {
                   display: "none",
diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js
index 31ec0c843..52ca3f89a 100644
--- a/apps/climatemappedafrica/src/components/Menu/index.js
+++ b/apps/climatemappedafrica/src/components/Menu/index.js
@@ -59,12 +59,6 @@ const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({
     },
     textTransform: "uppercase",
   },
-  menu: {
-    margin: 0,
-    [breakpoints.up("lg")]: {
-      margin: `0 ${typography.pxToRem(12.8)}`,
-    },
-  },
   text: {
     "&::after": {
       content: '""',
@@ -115,7 +109,25 @@ function Menu({ links, children, socialLinks, ...props }) {
   return (
     <Grid container className={classes.root}>
       {links.map((item, index) => (
-        <Grid item key={item.label} className={classes.menu}>
+        <Grid
+          item
+          key={item.label}
+          sx={({ typography }) => ({
+            margin: {
+              xs: 0,
+              lg: `0 ${typography.pxToRem(12.8)}`,
+            },
+            "&:last-child": {
+              margin: {
+                xs: 0,
+                lg: 0,
+              },
+              "& > a": {
+                paddingRight: 0,
+              },
+            },
+          })}
+        >
           <Button
             component={Link}
             color={index !== 0 ? "secondary" : "primary"}
@@ -156,9 +168,11 @@ function Menu({ links, children, socialLinks, ...props }) {
             justifyContent: "center",
             alignItems: "center",
             margin: "3.2px",
+            pr: 0,
+            mt: { xs: 2, lg: 0 },
           },
         }}
-        alignItems="flex-start"
+        alignItems={{ xs: "flex-start", lg: "center" }}
       />
     </Grid>
   );
diff --git a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js
index 478b0ea60..a760636a0 100644
--- a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js
+++ b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js
@@ -1,9 +1,9 @@
+import { ImageButton } from "@commons-ui/core";
 import { Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
 import Menu from "@/climatemappedafrica/components/Menu";
-import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
 import Section from "@/climatemappedafrica/components/Section";
 
 function DesktopNavigation({ logo, menus, socialLinks }) {
@@ -12,10 +12,10 @@ function DesktopNavigation({ logo, menus, socialLinks }) {
       <Section>
         <Grid container alignItems="center">
           <Grid item xs={3}>
-            <NextImageButton
+            <ImageButton
               href="/"
               {...logo}
-              width={200}
+              width="100%"
               height={100}
               priority
             />
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,
+          },
+        },
       ],
     },
   ],