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/payload/collections/Media.js b/apps/charterafrica/src/payload/collections/Media.js
index 8f1b4be5e..3082fee03 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 || doc.filename,
+      }),
+    ],
+  },
 };
 
 export default Media;