diff --git a/src/adminApp/service/MediaService.js b/src/adminApp/service/MediaService.js
index f12ec7753..53967ed41 100644
--- a/src/adminApp/service/MediaService.js
+++ b/src/adminApp/service/MediaService.js
@@ -1,8 +1,12 @@
 import http from "../../common/utils/httpClient";
 
 class MediaService {
-  static getMedia(url) {
-    return http.get(http.withParams(`/media/signedUrl`, { url: url })).then(res => res.data);
+  static async getMedia(url) {
+    try {
+      return await http.get(http.withParams(`/media/signedUrl`, { url: url })).then(res => res.data);
+    } catch (exception) {
+      return "Unable to fetch media. Value: " + url;
+    }
   }
 }
 
diff --git a/src/dataEntryApp/components/MediaUploader.js b/src/dataEntryApp/components/MediaUploader.js
index c6b298363..a3fc5b62f 100644
--- a/src/dataEntryApp/components/MediaUploader.js
+++ b/src/dataEntryApp/components/MediaUploader.js
@@ -1,5 +1,5 @@
 import React, { Fragment, useEffect, useState } from "react";
-import { get, isEmpty, includes, lowerCase, isArrayLikeObject, omit } from "lodash";
+import { get, isEmpty, includes, lowerCase, isArrayLikeObject, omit, startsWith } from "lodash";
 import { Box, Button, Grid, makeStyles, Typography } from "@material-ui/core";
 import FormControl from "@material-ui/core/FormControl";
 import http from "../../common/utils/httpClient";
@@ -51,9 +51,7 @@ const isValidFile = (allowedTypes, type) => {
 };
 
 const isValidType = (formElement, type, isFile) => {
-  return isFile
-    ? isValidFile(formElement.allowedTypes, type)
-    : includes(type, lowerCase(formElement.getType()));
+  return isFile ? isValidFile(formElement.allowedTypes, type) : includes(type, lowerCase(formElement.getType()));
 };
 
 function addObsResultsToPreview(observationValue, setPreview) {
@@ -91,13 +89,7 @@ function invokeUpdate(update, mediaUrl) {
   update(mediaUrl);
 }
 
-function addMediaUrlToLocalObsValue(
-  update,
-  fileName,
-  isMultiSelect,
-  localObsValue,
-  setLocalObsValue
-) {
+function addMediaUrlToLocalObsValue(update, fileName, isMultiSelect, localObsValue, setLocalObsValue) {
   invokeUpdate(update, fileName);
   if (isMultiSelect) {
     setLocalObsValue(locObsValue =>
@@ -110,13 +102,7 @@ function addMediaUrlToLocalObsValue(
   }
 }
 
-function removeMediaUrlFromLocalObsValue(
-  update,
-  fileName,
-  isMultiSelect,
-  localObsValue,
-  setLocalObsValue
-) {
+function removeMediaUrlFromLocalObsValue(update, fileName, isMultiSelect, localObsValue, setLocalObsValue) {
   invokeUpdate(update, fileName);
   if (isMultiSelect && isArrayLikeObject(localObsValue)) {
     setLocalObsValue(locObsValue => locObsValue.filter(item => item !== fileName));
@@ -128,15 +114,12 @@ function removeMediaUrlFromLocalObsValue(
 function consolidateAlerts(etFiles, formElement, isFileDataType, alerts) {
   etFiles.forEach(file => {
     if (!isValidType(formElement, file.type, isFileDataType)) {
-      alerts.push(
-        `Selected files type not supported for file ${file.name}. Please choose proper files.\n`
-      );
+      alerts.push(`Selected files type not supported for file ${file.name}. Please choose proper files.\n`);
     }
     if (isFileDataType && isBiggerFile(formElement, file.size)) {
       const oneMBInBytes = 1000000;
       alerts.push(
-        `Selected file size ${file.size /
-          oneMBInBytes} MB is more than the set max file size ${formElement.allowedMaxSize /
+        `Selected file size ${file.size / oneMBInBytes} MB is more than the set max file size ${formElement.allowedMaxSize /
           oneMBInBytes} MB for file ${file.name}.\n`
       );
     }
@@ -161,18 +144,10 @@ function uploadMediaAndUpdateObservationValue(
         .uploadFile("/web/uploadMedia", file)
         .then(r => {
           setUploadButtonClicked(oldValue => oldValue - 1);
-          addMediaUrlToLocalObsValue(
-            update,
-            r.data,
-            isMultiSelect,
-            localObsValue,
-            setLocalObsValue
-          );
+          addMediaUrlToLocalObsValue(update, r.data, isMultiSelect, localObsValue, setLocalObsValue);
         })
         .catch(r => {
-          const error = `${get(r, "response.data") ||
-            get(r, "message") ||
-            "Unknown error occurred while uploadButtonClicked media"}`;
+          const error = `${get(r, "response.data") || get(r, "message") || "Unknown error occurred while uploadButtonClicked media"}`;
           setUploadButtonClicked(oldValue => oldValue - 1);
           onDelete(file.name);
           alert(error);
@@ -181,6 +156,7 @@ function uploadMediaAndUpdateObservationValue(
   });
 }
 
+const MissingSignedMediaMessage = "Unable to fetch media. Value: ";
 export const MediaUploader = ({ label, obsValue, mediaType, update, formElement }) => {
   const classes = useStyles();
   const Icon = iconMap[mediaType];
@@ -216,38 +192,16 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
       alert(alerts);
       return;
     }
-    uploadMediaAndUpdateObservationValue(
-      etFiles,
-      setUploadButtonClicked,
-      setLocalObsValue,
-      isMultiSelect,
-      localObsValue,
-      update,
-      onDelete
-    );
+    uploadMediaAndUpdateObservationValue(etFiles, setUploadButtonClicked, setLocalObsValue, isMultiSelect, localObsValue, update, onDelete);
   };
 
   const onDelete = fileName => {
-    removeMediaUrlFromLocalObsValue(
-      update,
-      fileName,
-      isMultiSelect,
-      localObsValue,
-      setLocalObsValue
-    );
+    removeMediaUrlFromLocalObsValue(update, fileName, isMultiSelect, localObsValue, setLocalObsValue);
     removeFileFromPreview(fileName, preview, setPreview);
   };
 
-  const mediaPreviewMap = fileToPreview => ({
-    image: (
-      <img
-        src={fileToPreview}
-        alt={label}
-        width={200}
-        height={200}
-        onClick={() => setOpenImage(fileToPreview)}
-      />
-    ),
+  const mediaPreviewMap = (fileToPreview, label) => ({
+    image: <img src={fileToPreview} alt={label} width={200} height={200} onClick={() => setOpenImage(fileToPreview)} />,
     video: (
       <video preload="auto" controls width={200} height={200} controlsList="nodownload">
         <source src={fileToPreview} type="video/mp4" />
@@ -260,13 +214,25 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
 
   const renderMedia = fileName => {
     return (
-      <Box
-        display={"flex"}
-        flexDirection={"row"}
-        alignItems={"flex-start"}
-        className={classes.boxStyle}
-      >
-        {mediaPreviewMap(preview[fileName])[mediaType]}
+      <Box display={"flex"} flexDirection={"row"} alignItems={"flex-start"} className={classes.boxStyle}>
+        {startsWith(preview[fileName], MissingSignedMediaMessage) ? (
+          <p
+            style={{
+              color: "orangered",
+              margin: "5px",
+              padding: "5px",
+              border: "1px solid #999",
+              width: "200px",
+              height: "200px",
+              textAlign: "center",
+              overflow: "scroll"
+            }}
+          >
+            {preview[fileName]}
+          </p>
+        ) : (
+          mediaPreviewMap(preview[fileName], MissingSignedMediaMessage + fileName)[mediaType]
+        )}
         <Button style={{ float: "left", color: "red" }} onClick={() => onDelete(fileName)}>
           <CloseIcon />
         </Button>
@@ -288,12 +254,7 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
     });
     return (
       <div className="imagePreviewContainer">
-        <ReactImageVideoLightbox
-          data={data}
-          startIndex={startIndex}
-          showResourceCount={true}
-          onCloseCallback={() => setOpenImage()}
-        />
+        <ReactImageVideoLightbox data={data} startIndex={startIndex} showResourceCount={true} onCloseCallback={() => setOpenImage()} />
       </div>
     );
   };
diff --git a/src/dataEntryApp/components/Observations.js b/src/dataEntryApp/components/Observations.js
index aa8d3ab73..95affd065 100644
--- a/src/dataEntryApp/components/Observations.js
+++ b/src/dataEntryApp/components/Observations.js
@@ -60,8 +60,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 class MediaData {
-  static MissingSignedMediaMessage =
-    "Please check the url for this observation as it could not be signed.";
+  static MissingSignedMediaMessage = "Unable to fetch media. Value: ";
 
   constructor(url, type, altTag, unsignedUrl) {
     this.url = url;
@@ -71,14 +70,7 @@ class MediaData {
   }
 }
 
-function includeAdditionalRows(
-  additionalRows,
-  fegIndex,
-  t,
-  renderText,
-  renderFEGView,
-  StyledTableRow
-) {
+function includeAdditionalRows(additionalRows, fegIndex, t, renderText, renderFEGView, StyledTableRow) {
   const additionalObsRows = [];
   additionalRows &&
     additionalRows.forEach((row, index) => {
@@ -98,15 +90,7 @@ function includeAdditionalRows(
   return renderFEGView("Miscellaneous Information", "feg-" + fegIndex, additionalObsRows);
 }
 
-function renderSingleQuestionGroup(
-  valueWrapper,
-  index,
-  customKey,
-  t,
-  observation,
-  StyledTableRow,
-  renderValue
-) {
+function renderSingleQuestionGroup(valueWrapper, index, customKey, t, observation, StyledTableRow, renderValue) {
   const groupObservations = valueWrapper ? valueWrapper.getValue() : [];
   return (
     <div style={{ borderStyle: "inset", borderWidth: "2px" }}>
@@ -127,20 +111,13 @@ function renderSingleQuestionGroup(
 
 function initMediaObservations(observations) {
   const mediaObservations = [
-    ...observations.filter(obs =>
-      includes(
-        [Concept.dataType.Image, Concept.dataType.Video, Concept.dataType.File],
-        obs.concept.datatype
-      )
-    )
+    ...observations.filter(obs => includes([Concept.dataType.Image, Concept.dataType.Video, Concept.dataType.File], obs.concept.datatype))
   ];
   //TODO handle Repeatable Question Group media observations
   observations
     .filter(obs => obs.concept.isQuestionGroup())
     .map(
-      qgObservation =>
-        qgObservation.valueJSON.groupObservations &&
-        mediaObservations.push(...qgObservation.valueJSON.groupObservations)
+      qgObservation => qgObservation.valueJSON.groupObservations && mediaObservations.push(...qgObservation.valueJSON.groupObservations)
     );
   return mediaObservations;
 }
@@ -205,25 +182,23 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
   const renderSubject = (subject, addLineBreak) => {
     return (
       <div>
-        <Link to={`/app/subject?uuid=${subject.entityObject.uuid}`}>
-          {Individual.getFullName(subject.entityObject)}
-        </Link>
+        <Link to={`/app/subject?uuid=${subject.entityObject.uuid}`}>{Individual.getFullName(subject.entityObject)}</Link>
         {addLineBreak && <br />}
       </div>
     );
   };
 
-  const mediaPreviewMap = unsignedMediaUrl => ({
+  const mediaPreviewMap = (signedMediaUrl, unsignedMediaUrl) => ({
     [Concept.dataType.Image]: (
       <img
-        src={unsignedMediaUrl}
-        alt={""}
+        src={signedMediaUrl}
+        alt={MediaData.MissingSignedMediaMessage + unsignedMediaUrl}
         align={"center"}
         width={200}
         height={200}
         onClick={event => {
           event.preventDefault();
-          showMediaOverlay(unsignedMediaUrl);
+          showMediaOverlay(signedMediaUrl);
         }}
       />
     ),
@@ -279,30 +254,18 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
           </Box>
         </Grid>
         <Collapse in={open[observationValue]} timeout="auto" unmountOnExit>
-          <Grid
-            container
-            direction="row"
-            alignItems="center"
-            spacing={1}
-            onClick={() => updateOpen(observationValue)}
-          >
+          <Grid container direction="row" alignItems="center" spacing={1} onClick={() => updateOpen(observationValue)}>
             {mediaUrls.map((unsignedMediaUrl, index) => {
               const mediaData = _.find(mediaDataList, x => x.unsignedUrl === unsignedMediaUrl);
-              const couldntSignMessage =
-                MediaData.MissingSignedMediaMessage + ". Value: " + unsignedMediaUrl;
+              const couldntSignMessage = MediaData.MissingSignedMediaMessage + unsignedMediaUrl;
               const signedMediaUrl = _.get(mediaData, "url");
               return (
                 <Grid item key={index}>
                   {_.isNil(signedMediaUrl) ? (
                     couldntSignMessage
                   ) : (
-                    <Box
-                      display={"flex"}
-                      flexDirection={"row"}
-                      alignItems={"flex-start"}
-                      className={classes.boxStyle}
-                    >
-                      {mediaPreviewMap(signedMediaUrl)[concept.datatype]}
+                    <Box display={"flex"} flexDirection={"row"} alignItems={"flex-start"} className={classes.boxStyle}>
+                      {mediaPreviewMap(signedMediaUrl, unsignedMediaUrl)[concept.datatype]}
                     </Box>
                   )}
                 </Grid>
@@ -362,14 +325,8 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
           const mediaUrls = isMultiSelect ? observationValue : [observationValue];
           return mediaUrls.map(async unsignedMediaUrl => {
             const signedUrl = await getSignedUrl(unsignedMediaUrl);
-            const type =
-              obs.concept.datatype === "Image" ? "photo" : lowerCase(obs.concept.datatype);
-            return new MediaData(
-              _.get(signedUrl, "data"),
-              type,
-              obs.concept.name,
-              unsignedMediaUrl
-            );
+            const type = obs.concept.datatype === "Image" ? "photo" : lowerCase(obs.concept.datatype);
+            return new MediaData(_.get(signedUrl, "data"), type, obs.concept.name, unsignedMediaUrl);
           });
         })
       );
@@ -392,9 +349,7 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
   }));
 
   const isNotAssociatedWithForm = isNil(form);
-  const orderedObs = isNotAssociatedWithForm
-    ? observations
-    : form.orderObservationsPerFEG(observations);
+  const orderedObs = isNotAssociatedWithForm ? observations : form.orderObservationsPerFEG(observations);
   const mediaObservations = initMediaObservations(observations);
 
   React.useEffect(() => {
@@ -414,29 +369,19 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
     let questionGroupRows = null;
 
     if ("repeatableObservations" in valueWrapper) {
-      questionGroupRows = _.map(
-        valueWrapper.repeatableObservations,
-        (questionGroupValueWrapper, rqgIndex) =>
-          renderSingleQuestionGroup(
-            questionGroupValueWrapper,
-            index + "rqg" + rqgIndex,
-            customKey,
-            t,
-            observation,
-            StyledTableRow,
-            renderValue
-          )
+      questionGroupRows = _.map(valueWrapper.repeatableObservations, (questionGroupValueWrapper, rqgIndex) =>
+        renderSingleQuestionGroup(
+          questionGroupValueWrapper,
+          index + "rqg" + rqgIndex,
+          customKey,
+          t,
+          observation,
+          StyledTableRow,
+          renderValue
+        )
       );
     } else {
-      questionGroupRows = renderSingleQuestionGroup(
-        valueWrapper,
-        index + "qg-0",
-        customKey,
-        t,
-        observation,
-        StyledTableRow,
-        renderValue
-      );
+      questionGroupRows = renderSingleQuestionGroup(valueWrapper, index + "qg-0", customKey, t, observation, StyledTableRow, renderValue);
     }
 
     return (
@@ -444,13 +389,7 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
         <TableRow key={`${index}-${customKey}`}>
           <TableCell style={{ padding: 0, background: "rgb(232 232 232)" }} colSpan={6}>
             <Box sx={{ margin: 2 }}>
-              <Typography
-                style={{ marginLeft: "10px" }}
-                color="textSecondary"
-                variant="body1"
-                gutterBottom
-                component="div"
-              >
+              <Typography style={{ marginLeft: "10px" }} color="textSecondary" variant="body1" gutterBottom component="div">
                 {t(observation.concept["name"])}
               </Typography>
               <Table size="small" aria-label="questionGroupRows">
@@ -496,9 +435,7 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
 
   const renderObservationValue = (observation, index, isNotAssociatedWithForm) => {
     if (isNotAssociatedWithForm) {
-      return observation.concept.isQuestionGroup()
-        ? renderGroupQuestionView(observation, index)
-        : renderNormalView(observation, index);
+      return observation.concept.isQuestionGroup() ? renderGroupQuestionView(observation, index) : renderNormalView(observation, index);
     } else {
       const fegRows = _.map(observation.sortedObservationsArray, (obs, feIndex) =>
         renderObservationValue(obs, "feg-" + index + "fe-" + feIndex, true)
@@ -507,33 +444,19 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
     }
   };
 
-  const rows = _.filter(
-    orderedObs,
-    obs => isNotAssociatedWithForm || !_.isEmpty(obs.sortedObservationsArray)
-  ).map((obs, fegIndex) => renderObservationValue(obs, fegIndex, isNotAssociatedWithForm));
+  const rows = _.filter(orderedObs, obs => isNotAssociatedWithForm || !_.isEmpty(obs.sortedObservationsArray)).map((obs, fegIndex) =>
+    renderObservationValue(obs, fegIndex, isNotAssociatedWithForm)
+  );
 
   additionalRows &&
     !_.isEmpty(additionalRows) &&
-    rows.push(
-      includeAdditionalRows(
-        additionalRows,
-        rows.length,
-        t,
-        renderText,
-        renderFEGView,
-        StyledTableRow
-      )
-    );
+    rows.push(includeAdditionalRows(additionalRows, rows.length, t, renderText, renderFEGView, StyledTableRow));
 
   return isEmpty(rows) ? (
     <div />
   ) : (
     <div>
-      <Table
-        className={clsx(classes.tableContainer, highlight && classes.highlightBackground)}
-        size="small"
-        aria-label="a dense table"
-      >
+      <Table className={clsx(classes.tableContainer, highlight && classes.highlightBackground)} size="small" aria-label="a dense table">
         <TableBody>{rows}</TableBody>
       </Table>
       {showMedia && (