diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
new file mode 100644
index 000000000..dc9f31362
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
@@ -0,0 +1,186 @@
+import {
+  IconButton,
+  InputBase,
+  Typography,
+  List,
+  ListItem,
+  SvgIcon,
+  Box,
+} from "@mui/material";
+import { useRouter } from "next/router";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+
+import SearchIcon from "@/climatemappedafrica/assets/icons/search.svg";
+import Link from "@/climatemappedafrica/components/Link";
+
+function DropdownSearch({
+  href: hrefProp = "/explore",
+  label = "Search for a location",
+  locations,
+  onClick,
+  icon: IconProp = SearchIcon,
+  placeholder,
+  variant,
+  ...props
+}) {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [selectedLocation, setSelectedLocation] = useState(null);
+  const [suggestions, setSuggestions] = useState([]);
+
+  const handleChange = (e) => {
+    setQuery(e.target.value);
+    setSelectedLocation(null);
+  };
+
+  const handleSelect = (code, name) => {
+    setQuery(name.toLowerCase());
+    setSelectedLocation(code);
+    if (code && hrefProp?.length) {
+      router.push(`${hrefProp}/${code}`);
+    }
+  };
+
+  useEffect(() => {
+    if (query?.length > 0 && !selectedLocation) {
+      const matchedGeo = locations?.filter(({ name }) =>
+        name.toLowerCase()?.startsWith(query.toLowerCase()),
+      );
+      setSuggestions(matchedGeo);
+    } else {
+      setSuggestions([]);
+    }
+  }, [locations, selectedLocation, query]);
+
+  const handleClickSearch = () => {
+    if (onClick) {
+      onClick(selectedLocation);
+    } else if (selectedLocation) {
+      const href = `${hrefProp}/${selectedLocation}`;
+      router.push(href);
+    } else if (query) {
+      router.push("/404");
+    }
+  };
+
+  let iconComponent = SearchIcon;
+  let iconBorder;
+  if (variant === "explore") {
+    iconComponent = IconProp;
+    iconBorder = {
+      borderRadius: "50%",
+      border: "2px solid #fff",
+    };
+  }
+  const searchIconButton = (
+    <IconButton
+      color="primary"
+      onClick={handleClickSearch}
+      size="small"
+      sx={() => ({
+        padding: 0,
+        ml: 2,
+      })}
+    >
+      <SvgIcon
+        component={iconComponent}
+        viewBox="0 0 48 48"
+        sx={{
+          width: 48,
+          height: 48,
+          ...iconBorder,
+        }}
+      />
+    </IconButton>
+  );
+
+  return (
+    <Box id="location-search">
+      <Typography
+        variant="body1"
+        sx={({ palette, typography }) => ({
+          color: palette.text.primary,
+          marginBottom: typography.pxToRem(10),
+        })}
+      >
+        {label}
+      </Typography>
+      <InputBase
+        inputProps={{ "aria-label": "search" }}
+        onChange={handleChange}
+        placeholder={placeholder}
+        value={query}
+        {...props}
+        sx={({ typography, palette }) => ({
+          borderRadius: typography.pxToRem(10),
+          color: palette.primary.main,
+          border: `2px solid ${palette.text.hint}`,
+          width: typography.pxToRem(278),
+          backgroundColor: "inherit",
+          height: typography.pxToRem(48),
+          padding: `0 ${typography.pxToRem(20)}`,
+          "&.MuiInputBase-input": {
+            backgroundColor: "inherit",
+            height: typography.pxToRem(48),
+            borderRadius: typography.pxToRem(10),
+            padding: `0 ${typography.pxToRem(20)}`,
+            textTransform: "capitalize",
+          },
+          "&.Mui-focused": {
+            border: `2px solid ${palette.primary.main}`,
+          },
+          ...props.sx,
+        })}
+        endAdornment={variant === "explore" ? searchIconButton : null}
+      />
+      {variant !== "explore" && searchIconButton}
+
+      <Box sx={{ position: "relative" }}>
+        {suggestions?.length > 0 && (
+          <List
+            sx={({ typography, palette }) => ({
+              width: typography.pxToRem(278),
+              position: "absolute",
+              marginTop: typography.pxToRem(5),
+              zIndex: 10,
+              background: palette.background.default,
+              border: `2px solid ${palette.grey.main}`,
+              borderRadius: typography.pxToRem(10),
+              padding: 0,
+              textTransform: "capitalize",
+            })}
+          >
+            {suggestions.map(({ name, code }) => (
+              <ListItem
+                component={Link}
+                variant="subtitle1"
+                underline="none"
+                onClick={() => handleSelect(code, name)}
+                sx={({ typography, palette }) => ({
+                  paddingLeft: typography.pxToRem(20),
+                  color: palette.text.hint,
+                })}
+                key={code}
+              >
+                {name.toLowerCase()}
+              </ListItem>
+            ))}
+          </List>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+DropdownSearch.propTypes = {
+  label: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  icon: PropTypes.elementType,
+  locations: PropTypes.arrayOf(PropTypes.shape({})),
+  variant: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+
+export default DropdownSearch;
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
new file mode 100644
index 000000000..d8dd3412a
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DropdownSearch /> renders unchanged 1`] = `
+<div>
+  <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-78q71b-MuiInputBase-root"
+    >
+      <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-kzlhbf-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>
+`;
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.test.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.test.js
new file mode 100644
index 000000000..c50350da4
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.test.js
@@ -0,0 +1,25 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import DropdownSearch from "./DownloadSearch";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  href: "/explore",
+  label: "Search for a location",
+  locations: [],
+  icon: null,
+  placeholder: "Search for a location",
+  variant: "explore",
+};
+
+describe("<DropdownSearch />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<DropdownSearch {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/index.js b/apps/climatemappedafrica/src/components/DropdownSearch/index.js
index dfb33c3f3..958811b94 100644
--- a/apps/climatemappedafrica/src/components/DropdownSearch/index.js
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/index.js
@@ -1,195 +1,3 @@
-import {
-  IconButton,
-  InputBase,
-  Typography,
-  List,
-  ListItem,
-  SvgIcon,
-} from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import { useRouter } from "next/router";
-import PropTypes from "prop-types";
-import React, { useEffect, useState } from "react";
-
-import SearchIcon from "@/climatemappedafrica/assets/icons/search.svg";
-import Link from "@/climatemappedafrica/components/Link";
-
-const useStyles = makeStyles(({ palette, typography }) => ({
-  root: {},
-  inputRoot: {
-    borderRadius: typography.pxToRem(10),
-    color: palette.primary.main,
-    border: `2px solid ${palette.text.hint}`,
-    width: typography.pxToRem(278),
-  },
-  focused: {
-    border: `2px solid ${palette.primary.main}`,
-  },
-  label: {
-    color: palette.text.secondary,
-    marginBottom: typography.pxToRem(10),
-  },
-  button: {
-    padding: 0,
-    marginLeft: typography.pxToRem(15),
-  },
-  input: {
-    backgroundColor: "inherit",
-    height: typography.pxToRem(48),
-    borderRadius: typography.pxToRem(10),
-    padding: `0 ${typography.pxToRem(20)}`,
-    textTransform: "capitalize",
-  },
-  suggestions: {
-    position: "relative",
-  },
-  selectMenu: {
-    width: typography.pxToRem(278),
-    position: "absolute",
-    marginTop: typography.pxToRem(5),
-    zIndex: 10,
-    background: palette.background.default,
-    border: `2px solid ${palette.grey.main}`,
-    borderRadius: typography.pxToRem(10),
-    padding: 0,
-    textTransform: "capitalize",
-  },
-  menuList: {},
-  menuItem: {
-    paddingLeft: typography.pxToRem(20),
-    color: palette.text.hint,
-  },
-}));
-
-function DropdownSearch({
-  href: hrefProp = "/explore",
-  label = "Search for a location",
-  locations,
-  onClick,
-  icon: IconProp = SearchIcon,
-  placeholder,
-  variant,
-  ...props
-}) {
-  const classes = useStyles(props);
-  const router = useRouter();
-  const [query, setQuery] = useState("");
-  const [selectedLocation, setSelectedLocation] = useState(null);
-  const [suggestions, setSuggestions] = useState([]);
-
-  const handleChange = (e) => {
-    setQuery(e.target.value);
-    setSelectedLocation(null);
-  };
-
-  const handleSelect = (code, name) => {
-    setQuery(name.toLowerCase());
-    setSelectedLocation(code);
-    if (code && hrefProp?.length) {
-      router.push(`${hrefProp}/${code}`);
-    }
-  };
-
-  useEffect(() => {
-    if (query?.length > 0 && !selectedLocation) {
-      const matchedGeo = locations?.filter(({ name }) =>
-        name.toLowerCase()?.startsWith(query.toLowerCase()),
-      );
-      setSuggestions(matchedGeo);
-    } else {
-      setSuggestions([]);
-    }
-  }, [locations, selectedLocation, query]);
-
-  const handleClickSearch = () => {
-    if (onClick) {
-      onClick(selectedLocation);
-    } else if (selectedLocation) {
-      const href = `${hrefProp}/${selectedLocation}`;
-      router.push(href);
-    } else if (query) {
-      router.push("/404");
-    }
-  };
-
-  let iconComponent = SearchIcon;
-  let iconBorder;
-  if (variant === "explore") {
-    iconComponent = IconProp;
-    iconBorder = {
-      borderRadius: "50%",
-      border: "2px solid #fff",
-    };
-  }
-  const searchIconButton = (
-    <IconButton
-      color="primary"
-      onClick={handleClickSearch}
-      size="small"
-      className={classes.button}
-    >
-      <SvgIcon
-        component={iconComponent}
-        viewBox="0 0 48 48"
-        sx={{
-          width: 48,
-          height: 48,
-          ...iconBorder,
-        }}
-      />
-    </IconButton>
-  );
-
-  return (
-    <div id="location-search" className={classes.root}>
-      <Typography variant="body1" className={classes.label}>
-        {label}
-      </Typography>
-      <InputBase
-        inputProps={{ "aria-label": "search" }}
-        onChange={handleChange}
-        placeholder={placeholder}
-        value={query}
-        {...props}
-        classes={{
-          root: classes.inputRoot,
-          input: classes.input,
-          focused: classes.focused,
-        }}
-        endAdornment={variant === "explore" ? searchIconButton : null}
-      />
-      {variant !== "explore" && searchIconButton}
-
-      <div className={classes.suggestions}>
-        {suggestions?.length > 0 && (
-          <List classes={{ root: classes.selectMenu }}>
-            {suggestions.map(({ name, code }) => (
-              <ListItem
-                component={Link}
-                variant="subtitle1"
-                underline="none"
-                onClick={() => handleSelect(code, name)}
-                classes={{ root: classes.menuItem }}
-                key={code}
-              >
-                {name.toLowerCase()}
-              </ListItem>
-            ))}
-          </List>
-        )}
-      </div>
-    </div>
-  );
-}
-
-DropdownSearch.propTypes = {
-  label: PropTypes.string,
-  href: PropTypes.string,
-  onClick: PropTypes.func,
-  icon: PropTypes.elementType,
-  locations: PropTypes.arrayOf(PropTypes.shape({})),
-  variant: PropTypes.string,
-  placeholder: PropTypes.string,
-};
+import DropdownSearch from "./DownloadSearch";
 
 export default DropdownSearch;
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/index.stories.js b/apps/climatemappedafrica/src/components/DropdownSearch/index.stories.js
deleted file mode 100644
index eabebcb54..000000000
--- a/apps/climatemappedafrica/src/components/DropdownSearch/index.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-
-import DropdownSearch from ".";
-
-export default {
-  title: "Components/DropdownSearch",
-  argTypes: {
-    title: {
-      control: {
-        type: "string",
-      },
-    },
-    counties: {
-      control: {
-        type: "object",
-      },
-    },
-  },
-};
-
-function Template({ ...args }) {
-  return <DropdownSearch {...args} />;
-}
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: "Search for Location",
-  counties: [
-    {
-      name: "Nairobi",
-      code: 47,
-    },
-    {
-      name: "Marsabit",
-      code: 10,
-    },
-    {
-      name: "Meru",
-      code: 6,
-    },
-  ],
-};
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
index 8c687dbc8..21de5f19f 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -49,24 +49,16 @@ function Hero({
       <Section
         sx={{
           paddingBottom: { xs: "40px", md: "22px", lg: "22px" },
+          px: 0,
         }}
       >
         <Grid container>
-          <Grid
-            sx={{
-              display: {
-                xs: "none",
-                md: "block",
-              },
-            }}
-            item
-            lg={1}
-          />
           <Grid item xs={12} md={7} lg={6}>
             <RichHeader
               subtitle={subtitle}
               TitleProps={{
                 sx: {
+                  pb: { xs: 5 },
                   marginTop: { xs: "40px", md: "46px", lg: "65px" },
                 },
               }}
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index 237b5e9d0..e94a3de38 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -17,14 +17,11 @@ exports[`<Hero /> renders unchanged 1`] = `
       />
     </div>
     <div
-      class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-ihladk"
+      class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-1gf8bce"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
       >
-        <div
-          class="MuiGrid-root MuiGrid-item MuiGrid-grid-lg-1 css-1jqjbj5-MuiGrid-root"
-        />
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7 MuiGrid-grid-lg-6 css-1totwg2-MuiGrid-root"
         >
@@ -32,7 +29,7 @@ exports[`<Hero /> renders unchanged 1`] = `
             class="MuiBox-root css-0"
           >
             <div
-              class="MuiBox-root css-1c55nth"
+              class="MuiBox-root css-b8dxf0"
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-qt60le-MuiTypography-root"
@@ -52,31 +49,31 @@ exports[`<Hero /> renders unchanged 1`] = `
             </div>
           </header>
           <div
-            class="makeStyles-root-7"
+            class="MuiBox-root css-0"
             id="location-search"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 makeStyles-label-10 css-6hq4le-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-1u0kiq2-MuiTypography-root"
             >
               Search for a location
             </p>
             <div
               blocktype="hero"
               boundary="[object Object]"
-              class="MuiInputBase-root makeStyles-inputRoot-8 MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1illudf-MuiInputBase-root"
+              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-78q71b-MuiInputBase-root"
               location="[object Object]"
               slug="hero"
             >
               <input
                 aria-label="search"
-                class="MuiInputBase-input makeStyles-input-12 MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+                class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
                 id="670e3996766697e7feb349d5"
                 placeholder="Search for a location"
                 type="text"
                 value=""
               />
               <button
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall makeStyles-button-11 css-13dk0vd-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-oru44q-MuiButtonBase-root-MuiIconButton-root"
                 root="[object Object]"
                 tabindex="0"
                 type="button"
@@ -93,7 +90,7 @@ exports[`<Hero /> renders unchanged 1`] = `
               </button>
             </div>
             <div
-              class="makeStyles-suggestions-13"
+              class="MuiBox-root css-79elbk"
             />
           </div>
         </div>