diff --git a/apps/charterafrica/contrib/dokku/Dockerfile b/apps/charterafrica/contrib/dokku/Dockerfile
index 2696fe83c..b59a2e385 100644
--- a/apps/charterafrica/contrib/dokku/Dockerfile
+++ b/apps/charterafrica/contrib/dokku/Dockerfile
@@ -1 +1 @@
-FROM codeforafrica/charterafrica-ui:0.1.29
+FROM codeforafrica/charterafrica-ui:0.1.30
diff --git a/apps/charterafrica/package.json b/apps/charterafrica/package.json
index 2a0860aef..b5d8c69ed 100644
--- a/apps/charterafrica/package.json
+++ b/apps/charterafrica/package.json
@@ -1,6 +1,6 @@
 {
   "name": "charterafrica",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "private": true,
   "author": "Code for Africa <tech@codeforafrica.org>",
   "description": "This is the official code for https://charter.africa site",
diff --git a/apps/charterafrica/src/components/Spotlight/Spotlight.js b/apps/charterafrica/src/components/Spotlight/Spotlight.js
index fcbf2fbfe..c6961cd9e 100644
--- a/apps/charterafrica/src/components/Spotlight/Spotlight.js
+++ b/apps/charterafrica/src/components/Spotlight/Spotlight.js
@@ -73,7 +73,7 @@ const Spotlight = React.forwardRef(function Spotlight(props, ref) {
                     <CardMedia
                       alt={item.title}
                       component="img"
-                      src={item.image.src}
+                      src={item.image.url}
                       sx={{
                         height: {
                           xs: "auto",
diff --git a/apps/charterafrica/src/lib/data/common/processPageIndex.js b/apps/charterafrica/src/lib/data/common/processPageIndex.js
index 7f2ebc127..34e251e63 100644
--- a/apps/charterafrica/src/lib/data/common/processPageIndex.js
+++ b/apps/charterafrica/src/lib/data/common/processPageIndex.js
@@ -47,11 +47,12 @@ const processSpotlight = (page, api, context) => {
       const { item: itemData, ...rest } = item;
       return {
         ...rest,
+        category: rest?.category || null,
         item: {
           ...itemData,
           image: {
-            src: itemData.image.url,
             alt: itemData.image.alt,
+            url: itemData.image.url,
           },
           date: new Date(itemData.date).toLocaleDateString(locale, {
             year: "numeric",
diff --git a/apps/charterafrica/src/payload/collections/Media.js b/apps/charterafrica/src/payload/collections/Media.js
index 8f1b4be5e..ed475bd0e 100644
--- a/apps/charterafrica/src/payload/collections/Media.js
+++ b/apps/charterafrica/src/payload/collections/Media.js
@@ -19,6 +19,14 @@ const Media = {
       required: true,
     },
   ],
+  hooks: {
+    afterRead: [
+      ({ doc }) => ({
+        ...doc,
+        alt: doc.alt ?? null,
+      }),
+    ],
+  },
 };
 
 export default Media;