diff --git a/apps/charterafrica/package.json b/apps/charterafrica/package.json
index 8f7516a0d..02a78d66b 100644
--- a/apps/charterafrica/package.json
+++ b/apps/charterafrica/package.json
@@ -68,7 +68,6 @@
     "monaco-editor": "catalog:",
     "next": "catalog:",
     "next-seo": "catalog:",
-    "nodemailer-sendgrid": "catalog:",
     "payload": "catalog:",
     "prop-types": "catalog:",
     "qs": "catalog:",
diff --git a/apps/charterafrica/server.ts b/apps/charterafrica/server.ts
index c19eb1e8c..cf70c8c6a 100644
--- a/apps/charterafrica/server.ts
+++ b/apps/charterafrica/server.ts
@@ -4,7 +4,6 @@ import { spawn } from "child_process";
 import { loadEnvConfig } from "@next/env";
 import express from "express";
 import next from "next";
-import nodemailerSendgrid from "nodemailer-sendgrid";
 import payload from "payload";
 import { Payload } from "payload/dist/payload";
 
@@ -20,8 +19,17 @@ const dev = process.env.NODE_ENV !== "production";
 // https://github.com/vercel/next.js/discussions/33835#discussioncomment-2559392
 const hostname = process.env.NEXT_HOSTNAME || "localhost";
 const port = Number.parseInt(process.env.PORT || "3000", 10);
-const sendGridAPIKey = process.env.SENDGRID_API_KEY;
 
+const smtpAuthPass = process.env.SMTP_PASS || process.env.SENDGRID_API_KEY;
+const smtpFromName =
+  process.env.SMTP_FROM_NAME ||
+  process.env.SENDGRID_FROM_NAME ||
+  "Charter Africa CMS";
+const smtpFromAddress =
+  process.env.SMTP_FROM_ADDRESS ||
+  process.env.SENDGRID_FROM_EMAIL ||
+  "noreply@codeforafrica.org";
+const smtpPort = Number(process.env.SMTP_PORT || 587);
 // Make sure commands gracefully respect termination signals (e.g. from Docker)
 // Allow the graceful termination to be manually configurable
 if (!process.env.NEXT_MANUAL_SIG_HANDLE) {
@@ -35,15 +43,20 @@ const start = async (): Promise<void> => {
   let localPayload: Payload;
   try {
     localPayload = await payload.init({
-      ...(sendGridAPIKey
+      ...(smtpAuthPass
         ? {
             email: {
-              transportOptions: nodemailerSendgrid({
-                apiKey: sendGridAPIKey,
-              }),
-              fromName: process.env.SENDGRID_FROM_NAME || "Admin",
-              fromAddress:
-                process.env.SENDGRID_FROM_EMAIL || "admin@example.com",
+              transportOptions: {
+                auth: {
+                  user: process.env.SMTP_USER || "apikey",
+                  pass: smtpAuthPass,
+                },
+                host: process.env.SMTP_HOST || "smtp.sendgrid.net",
+                port: smtpPort,
+                secure: smtpPort === 465, // true for port 465, false (the default) for 587 and others
+              },
+              fromName: smtpFromName,
+              fromAddress: smtpFromAddress,
             },
           }
         : undefined),
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
index 2e8aa2fed..1613f2e3f 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
@@ -1,13 +1,13 @@
 import { RichText } from "@commons-ui/payload";
 import { Grid, Typography, IconButton, Avatar } from "@mui/material";
 import { useTour } from "@reactour/tour";
-import Image from "next/legacy/image";
 import PropTypes from "prop-types";
 import React from "react";
 
 import useStyles from "./useStyles";
 
 import CloseIcon from "@/climatemappedafrica/assets/icons/close.svg";
+import Image from "@/climatemappedafrica/components/Image";
 
 function TutorialStep({ description, title, image, selector, ...props }) {
   const classes = useStyles(props);
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
index 3f00e390e..03bf2bd07 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
@@ -80,6 +80,42 @@ const Profile = {
             },
           ],
         },
+        {
+          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,
+          },
+        },
         {
           name: "hasData",
           type: "checkbox",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4257f0de9..3097b61e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -720,9 +720,6 @@ importers:
       next-seo:
         specifier: 'catalog:'
         version: 6.6.0(next@14.2.16(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      nodemailer-sendgrid:
-        specifier: 'catalog:'
-        version: 1.0.3
       payload:
         specifier: 'catalog:'
         version: 2.30.3(@swc/helpers@0.5.5)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.5))(webpack-cli@4.10.0))