diff --git a/src/main/java/ai/elimu/web/content/multimedia/image/ImageCsvExportController.java b/src/main/java/ai/elimu/web/content/multimedia/image/ImageCsvExportController.java
index 095c04a5e..29c7a574e 100644
--- a/src/main/java/ai/elimu/web/content/multimedia/image/ImageCsvExportController.java
+++ b/src/main/java/ai/elimu/web/content/multimedia/image/ImageCsvExportController.java
@@ -44,6 +44,7 @@ public void handleRequest(
                         "content_license", 
                         "attribution_url", 
                         "title",
+                        "cid",
                         "download_url",
                         "image_format"
                 );
@@ -51,15 +52,14 @@ public void handleRequest(
         CSVPrinter csvPrinter = new CSVPrinter(stringWriter, csvFormat);
 
         for (Image image : images) {
-            String downloadUrl = "/image/" + image.getId() + "." + image.getImageFormat().toString().toLowerCase();
-            
             csvPrinter.printRecord(
                 image.getId(),
                 image.getContentType(),
                 image.getContentLicense(),
                 image.getAttributionUrl(),
                 image.getTitle(),
-                downloadUrl,
+                image.getCid(),
+                image.getUrl(),
                 image.getImageFormat()
             );
             
diff --git a/src/main/webapp/WEB-INF/jsp/content/multimedia/image/edit.jsp b/src/main/webapp/WEB-INF/jsp/content/multimedia/image/edit.jsp
index f49c6aa11..0c3d79c50 100644
--- a/src/main/webapp/WEB-INF/jsp/content/multimedia/image/edit.jsp
+++ b/src/main/webapp/WEB-INF/jsp/content/multimedia/image/edit.jsp
@@ -15,7 +15,7 @@
             <form:hidden path="dominantColor" value="${image.dominantColor}" />
             <input type="hidden" name="timeStart" value="${timeStart}" />
             
-            <img 
+            <img class="cid-${image.cid != null}"
                 src="<spring:url value='${image.url}' />"
                 alt="${image.title}" />
             <script>
diff --git a/src/main/webapp/WEB-INF/jsp/content/storybook/create.jsp b/src/main/webapp/WEB-INF/jsp/content/storybook/create.jsp
index 3d324a55f..7af14cb11 100644
--- a/src/main/webapp/WEB-INF/jsp/content/storybook/create.jsp
+++ b/src/main/webapp/WEB-INF/jsp/content/storybook/create.jsp
@@ -56,7 +56,7 @@
                     </select>
                     <label for="coverImage"><fmt:message key="cover.image" /></label>
                     <c:if test="${not empty storyBook.coverImage}">
-                        <img src="<spring:url value='/image/${storyBook.coverImage.id}_r${storyBook.coverImage.revisionNumber}.${fn:toLowerCase(storyBook.coverImage.imageFormat)}' />" alt="${storyBook.title}" />
+                        <img src="<spring:url value='${storyBook.coverImage.url}' />" alt="${storyBook.title}" />
                     </c:if>
                 </div>
             </div>
diff --git a/src/main/webapp/WEB-INF/jsp/content/storybook/edit.jsp b/src/main/webapp/WEB-INF/jsp/content/storybook/edit.jsp
index d55717c64..e31232e17 100644
--- a/src/main/webapp/WEB-INF/jsp/content/storybook/edit.jsp
+++ b/src/main/webapp/WEB-INF/jsp/content/storybook/edit.jsp
@@ -75,7 +75,7 @@
                     <label for="coverImage"><fmt:message key="cover.image" /></label>
                     <c:if test="${not empty storyBook.coverImage}">
                         <a href="<spring:url value='/content/multimedia/image/edit/${storyBook.coverImage.id}' />">
-                            <img src="<spring:url value='/image/${storyBook.coverImage.id}_r${storyBook.coverImage.revisionNumber}.${fn:toLowerCase(storyBook.coverImage.imageFormat)}' />" alt="${storyBook.title}" />
+                            <img class="cid-${storyBook.coverImage.cid != null}" src="<spring:url value='${storyBook.coverImage.url}' />" alt="${storyBook.title}" />
                         </a>
                     </c:if>
                 </div>
@@ -103,7 +103,7 @@
         <div class="card-panel storyBookChapter">
             <c:if test="${not empty storyBookChapter.image}">
                 <a href="<spring:url value='/content/multimedia/image/edit/${storyBookChapter.image.id}' />">
-                    <img src="<spring:url value='${storyBookChapter.image.url}' />" alt="${storyBook.title}" />
+                    <img class="cid-${storyBookChapter.image.cid != null}" src="<spring:url value='${storyBookChapter.image.url}' />" alt="${storyBook.title}" />
                 </a>
             </c:if>
             
diff --git a/src/main/webapp/WEB-INF/jsp/content/storybook/list.jsp b/src/main/webapp/WEB-INF/jsp/content/storybook/list.jsp
index 2c1ba2af0..b1eb319ab 100644
--- a/src/main/webapp/WEB-INF/jsp/content/storybook/list.jsp
+++ b/src/main/webapp/WEB-INF/jsp/content/storybook/list.jsp
@@ -34,10 +34,10 @@
                     <div class="headband"></div>
                     <c:set var="coverImageUrl" value="" />
                     <c:if test="${not empty storyBook.coverImage}">
-                        <c:set var="coverImageUrl" value="/image/${storyBook.coverImage.id}_r${storyBook.coverImage.revisionNumber}.${fn:toLowerCase(storyBook.coverImage.imageFormat)}" />
+                        <c:set var="coverImageUrl" value="${storyBook.coverImage.url}" />
                     </c:if>
                     <a href="<spring:url value='/content/storybook/edit/${storyBook.id}' />">
-                        <div class="card-image" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
+                        <div class="card-image cid-${storyBook.coverImage.cid != null}" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
                             <span class="card-title"><c:out value="${storyBook.title}" /></span>
                         </div>
                     </a>
@@ -82,10 +82,10 @@
                     <div class="headband"></div>
                     <c:set var="coverImageUrl" value="" />
                     <c:if test="${not empty storyBook.coverImage}">
-                        <c:set var="coverImageUrl" value="/image/${storyBook.coverImage.id}_r${storyBook.coverImage.revisionNumber}.${fn:toLowerCase(storyBook.coverImage.imageFormat)}" />
+                        <c:set var="coverImageUrl" value="${storyBook.coverImage.url}" />
                     </c:if>
                     <a href="<spring:url value='/content/storybook/edit/${storyBook.id}' />">
-                        <div class="card-image" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
+                        <div class="card-image cid-${storyBook.coverImage.cid != null}" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
                             <span class="card-title"><c:out value="${storyBook.title}" /></span>
                         </div>
                     </a>
@@ -130,10 +130,10 @@
                     <div class="headband"></div>
                     <c:set var="coverImageUrl" value="" />
                     <c:if test="${not empty storyBook.coverImage}">
-                        <c:set var="coverImageUrl" value="/image/${storyBook.coverImage.id}_r${storyBook.coverImage.revisionNumber}.${fn:toLowerCase(storyBook.coverImage.imageFormat)}" />
+                        <c:set var="coverImageUrl" value="${storyBook.coverImage.url}" />
                     </c:if>
                     <a href="<spring:url value='/content/storybook/edit/${storyBook.id}' />">
-                        <div class="card-image" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
+                        <div class="card-image cid-${storyBook.coverImage.cid != null}" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
                             <span class="card-title"><c:out value="${storyBook.title}" /></span>
                         </div>
                     </a>
@@ -178,10 +178,10 @@
                     <div class="headband"></div>
                     <c:set var="coverImageUrl" value="" />
                     <c:if test="${not empty storyBook.coverImage}">
-                        <c:set var="coverImageUrl" value="/image/${storyBook.coverImage.id}_r${storyBook.coverImage.revisionNumber}.${fn:toLowerCase(storyBook.coverImage.imageFormat)}" />
+                        <c:set var="coverImageUrl" value="${storyBook.coverImage.url}" />
                     </c:if>
                     <a href="<spring:url value='/content/storybook/edit/${storyBook.id}' />">
-                        <div class="card-image" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
+                        <div class="card-image cid-${storyBook.coverImage.cid != null}" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
                             <span class="card-title"><c:out value="${storyBook.title}" /></span>
                         </div>
                     </a>
@@ -224,10 +224,10 @@
                         <div class="headband"></div>
                         <c:set var="coverImageUrl" value="" />
                         <c:if test="${not empty storyBook.coverImage}">
-                            <c:set var="coverImageUrl" value="/image/${storyBook.coverImage.id}_r${storyBook.coverImage.revisionNumber}.${fn:toLowerCase(storyBook.coverImage.imageFormat)}" />
+                            <c:set var="coverImageUrl" value="${storyBook.coverImage.url}" />
                         </c:if>
                         <a href="<spring:url value='/content/storybook/edit/${storyBook.id}' />">
-                            <div class="card-image" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
+                            <div class="card-image cid-${storyBook.coverImage.cid != null}" style="background-image: url(<spring:url value='${coverImageUrl}' />); background-color: #DDD;">
                                 <span class="card-title"><c:out value="${storyBook.title}" /></span>
                             </div>
                         </a>
diff --git a/src/main/webapp/WEB-INF/jsp/content/storybook/peer-reviews/pending.jsp b/src/main/webapp/WEB-INF/jsp/content/storybook/peer-reviews/pending.jsp
index d9441f4be..82296c04e 100644
--- a/src/main/webapp/WEB-INF/jsp/content/storybook/peer-reviews/pending.jsp
+++ b/src/main/webapp/WEB-INF/jsp/content/storybook/peer-reviews/pending.jsp
@@ -35,7 +35,7 @@
                             <td>
                                 <c:set var="coverImageUrl" value="/static/img/placeholder.png" />
                                 <c:if test="${not empty storyBook.coverImage}">
-                                    <c:set var="coverImageUrl" value="/image/${storyBook.coverImage.id}_r${storyBook.coverImage.revisionNumber}.${fn:toLowerCase(storyBook.coverImage.imageFormat)}" />
+                                    <c:set var="coverImageUrl" value="${storyBook.coverImage.url}" />
                                 </c:if>
                                 <a href="<spring:url value='/content/storybook/edit/${storyBook.id}#peer-review' />" target="_blank">
                                     <img 
diff --git a/src/main/webapp/static/css/styles.css b/src/main/webapp/static/css/styles.css
index 30c054494..1292de5f7 100644
--- a/src/main/webapp/static/css/styles.css
+++ b/src/main/webapp/static/css/styles.css
@@ -66,6 +66,10 @@ main .card-panel img {
     border-width: 1px;
     box-shadow: 2px 2px rgba(103,58,183, 0.15); /* deep-purple */
 }
+.cid-false,
+main .card-panel img.cid-false {
+    border-top: 8px solid orangered;
+}
 main .card .card-image img {
     border-radius: 8px 8px 0 0;
     border-width: 0;
@@ -115,9 +119,6 @@ footer.page-footer .footer-copyright {
     background-position: 50% 50%;
     background-color: #ede7f6; /* deep-purple lighten-5 */
 }
-.card.image .card-image.cid-false {
-    border-top: 8px solid orangered;
-}
 .card.image .card-content > p,
 .card.storyBook .card-content > p {
     white-space: nowrap;