diff --git a/components/job-documents/job-documents.component.jsx b/components/job-documents/job-documents.component.jsx
index 9e7dae5..9928b7f 100644
--- a/components/job-documents/job-documents.component.jsx
+++ b/components/job-documents/job-documents.component.jsx
@@ -1,3 +1,4 @@
+import { Video } from "expo-av";
 import React, { useMemo, useState } from "react";
 import {
   FlatList,
@@ -13,6 +14,13 @@ import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.compon
 
 export default function JobDocumentsComponent({ job, loading, refetch }) {
   const [previewVisible, setPreviewVisible] = useState(false);
+  const [videoUri, setVideoUri] = useState(null);
+  const [status, setStatus] = React.useState({});
+  console.log(
+    "🚀  ~ file: job-documents.component.jsx  ~ line 19  ~ status",
+    status
+  );
+
   const [imgIndex, setImgIndex] = useState(0);
   const onRefresh = async () => {
     return refetch();
@@ -41,33 +49,43 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
         style={{ flex: 1 }}
         keyExtractor={(item) => item.id}
         renderItem={(object) => (
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "column",
-              justifyContent: "center",
-              alignItems: "center",
-              margin: 5,
-            }}
-          >
-            <TouchableOpacity
-              onPress={() => {
+          <TouchableOpacity
+            style={{ flex: 1 / 4, aspectRatio: 1 }}
+            onPress={() => {
+              if (DetermineFileType(object.item.type) === "image") {
+                //If image
                 setImgIndex(object.index);
                 setPreviewVisible(true);
+              } else {
+                //If Video
+                setVideoUri(GenerateSrcUrl(object.item));
+              }
+            }}
+          >
+            <Image
+              style={{ flex: 1 }}
+              resizeMode="cover"
+              source={{
+                uri: GenerateThumbUrl(object.item),
+                aspectRatio: 1,
               }}
-            >
-              <Image
-                source={{
-                  width: 100,
-                  height: 100,
-                  uri: GenerateThumbUrl(object.item),
-                }}
-              />
-            </TouchableOpacity>
-          </View>
+            />
+          </TouchableOpacity>
         )}
       />
       <Text>{job.documents.length}</Text>
+      <Video
+        source={
+          videoUri
+            ? {
+                uri: videoUri,
+              }
+            : null
+        }
+        useNativeControls
+        isLooping
+        onPlaybackStatusUpdate={(status) => setStatus(() => status)}
+      />
       <MediaCacheOverlay
         photos={fullphotos}
         imgIndex={imgIndex}
@@ -88,7 +106,18 @@ export const GenerateSrcUrl = (value) => {
   )}/upload/${value.key}${extension ? `.${extension}` : ""}`;
 };
 
-export const GenerateThumbUrl = (value) =>
-  `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+export const GenerateThumbUrl = (value) => {
+  let extension = value.extension;
+  if (extension && extension.includes("heic")) extension = "jpg";
+  else if (
+    DetermineFileType(value.type) !== "image" ||
+    (value.type && value.type.includes("application"))
+  )
+    extension = "jpg";
+
+  return `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
     value.type
-  )}/upload/${env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`;
+  )}/upload/${env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}${
+    extension ? `.${extension}` : ""
+  }`;
+};
diff --git a/components/screen-media-browser/screen-media-browser.component.jsx b/components/screen-media-browser/screen-media-browser.component.jsx
index 61a6483..fd12739 100644
--- a/components/screen-media-browser/screen-media-browser.component.jsx
+++ b/components/screen-media-browser/screen-media-browser.component.jsx
@@ -26,7 +26,7 @@ export function ImageBrowserScreen({ selectedCameraJobId }) {
 
   const onDone = (data) => {
     logImEXEvent("imexmobile_upload_documents", { count: data.length });
-    setUploads(data);
+    if (data.length !== 0) setUploads(data);
   };
 
   return (
diff --git a/components/upload-progress/upload-progress.component.jsx b/components/upload-progress/upload-progress.component.jsx
index cac715b..244e882 100644
--- a/components/upload-progress/upload-progress.component.jsx
+++ b/components/upload-progress/upload-progress.component.jsx
@@ -152,40 +152,25 @@ export function UploadProgress({
     }
 
     //Sequentially await the proms.
-    for (const p of data) {
-      let filename;
-      filename = p.filename || p.uri.split("/").pop();
 
-      await handleUpload(
-        {
-          filename,
-          mediaId: p.id,
-          onError: handleOnError,
-          onProgress: ({ percent, loaded }) =>
-            handleOnProgress(p.id, percent, loaded),
-          onSuccess: () => handleOnSuccess(p.id),
-        },
-        {
-          bodyshop: bodyshop,
-          jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
-          uploaded_by: currentUser.email,
-          photo: p,
-        }
-      );
-
-      //Set the state to mark that it's done.
-      setProgress((progress) => ({
-        ...progress,
-        action: null,
-        speed: 0,
-        files: {
-          ...progress.files,
-          [p.id]: {
-            ...progress.files[p.id],
-            action: null,
-          },
-        },
-      }));
+    for (var i = 0; i < data.length + 4; i = i + 4) {
+      console.log("i :>> ", i);
+      let proms = [];
+      if (data[i]) {
+        proms.push(CreateUploadProm(data[i]));
+      }
+      if (data[i + 1]) {
+        proms.push(CreateUploadProm(data[i + 1]));
+      }
+      if (data[i + 2]) {
+        proms.push(CreateUploadProm(data[i + 2]));
+      }
+      if (data[i + 3]) {
+        proms.push(CreateUploadProm(data[i + 3]));
+      }
+      console.log("Proms Length", proms.length);
+      await Promise.all(proms);
+      console.log("Await done.");
     }
 
     if (deleteAfterUpload) {
@@ -208,6 +193,43 @@ export function UploadProgress({
     forceRerender();
   };
 
+  const CreateUploadProm = async (p) => {
+    let filename;
+    filename = p.filename || p.uri.split("/").pop();
+    console.log("Start upping.", p.id);
+
+    await handleUpload(
+      {
+        filename,
+        mediaId: p.id,
+        onError: handleOnError,
+        onProgress: ({ percent, loaded }) =>
+          handleOnProgress(p.id, percent, loaded),
+        onSuccess: () => handleOnSuccess(p.id),
+      },
+      {
+        bodyshop: bodyshop,
+        jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
+        uploaded_by: currentUser.email,
+        photo: p,
+      }
+    );
+    console.log("Done upping.", p.id);
+    //Set the state to mark that it's done.
+    setProgress((progress) => ({
+      ...progress,
+      action: null,
+      speed: 0,
+      files: {
+        ...progress.files,
+        [p.id]: {
+          ...progress.files[p.id],
+          action: null,
+        },
+      },
+    }));
+  };
+
   return (
     <Modal
       visible={progress.uploadInProgress}
diff --git a/env.js b/env.js
index 4b2a17c..bd92a84 100644
--- a/env.js
+++ b/env.js
@@ -9,7 +9,7 @@ const ENV = {
       "https://api.cloudinary.com/v1_1/bodyshop",
     REACT_APP_CLOUDINARY_ENDPOINT: "https://res.cloudinary.com/bodyshop",
     REACT_APP_CLOUDINARY_API_KEY: "473322739956866",
-    REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "c_fill,f_auto,h_250,w_250",
+    REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "c_fill,h_250,w_250",
     firebase: {
       apiKey: "AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",
       authDomain: "imex-test.firebaseapp.com",
@@ -29,7 +29,7 @@ const ENV = {
       "https://api.cloudinary.com/v1_1/bodyshop",
     REACT_APP_CLOUDINARY_ENDPOINT: "https://res.cloudinary.com/bodyshop",
     REACT_APP_CLOUDINARY_API_KEY: "473322739956866",
-    REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "h_200,w_200,c_thumb",
+    REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "c_fill,h_250,w_250",
     firebase: {
       apiKey: "AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU",
       authDomain: "imex-prod.firebaseapp.com",
diff --git a/package.json b/package.json
index 3e014c3..22e84ca 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@react-navigation/native": "^5.9.4",
     "@react-navigation/stack": "^5.14.5",
     "axios": "^0.21.0",
+    "cloudinary-core": "^2.11.4",
     "dinero.js": "^1.8.1",
     "expo": "^41.0.0",
     "expo-app-loading": "^1.0.3",
diff --git a/yarn.lock b/yarn.lock
index 3ae9b6a..fb8a23f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2271,16 +2271,7 @@
   dependencies:
     deep-assign "^3.0.0"
 
-"@react-native-community/art@^1.1.2":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@react-native-community/art/-/art-1.2.0.tgz"
-  integrity sha512-a+ZcRGl/BzLa89yi33Mbn5SHavsEXqKUMdbfLf3U8MDLElndPqUetoJyGkv63+BcPO49UMWiQRP1YUz6/zfJ+A==
-  dependencies:
-    art "^0.10.3"
-    invariant "^2.2.4"
-    prop-types "^15.7.2"
-
-"@react-native-community/art@^1.2.0":
+"@react-native-community/art@^1.1.2", "@react-native-community/art@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/art/-/art-1.2.0.tgz#386d95393f6042d9006f9d4bc6063fb898794460"
   integrity sha512-a+ZcRGl/BzLa89yi33Mbn5SHavsEXqKUMdbfLf3U8MDLElndPqUetoJyGkv63+BcPO49UMWiQRP1YUz6/zfJ+A==
@@ -3605,6 +3596,11 @@ clone@^1.0.2:
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+cloudinary-core@^2.11.4:
+  version "2.11.4"
+  resolved "https://registry.yarnpkg.com/cloudinary-core/-/cloudinary-core-2.11.4.tgz#1d191935bcdcd412d499a91b928a94b266fee49d"
+  integrity sha512-F1BZczD6f5mB73D0c8gl/iuacVQQO+UhckNZxeeS9ZIVeIHbsfqwWiAZMQmIvEb7Wti/9MLU0xVwaWOak2THHA==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz"