diff --git a/babel-translations.babel b/babel-translations.babel
index f89a285..68fe363 100644
--- a/babel-translations.babel
+++ b/babel-translations.babel
@@ -199,6 +199,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>nojobnotes</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>notes</name>
                                                 <definition_loaded>false</definition_loaded>
diff --git a/components/job-documents/job-documents.component.jsx b/components/job-documents/job-documents.component.jsx
new file mode 100644
index 0000000..7736626
--- /dev/null
+++ b/components/job-documents/job-documents.component.jsx
@@ -0,0 +1,79 @@
+import { Container, Content, Thumbnail } from "native-base";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  FlatList,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
+
+const REACT_APP_CLOUDINARY_IMAGE_ENDPOINT =
+  "https://res.cloudinary.com/bodyshop/image/upload";
+const REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS = "c_fill,f_auto,h_250,w_250";
+
+export default function JobDocumentsComponent({ job, loading, refetch }) {
+  const { t } = useTranslation();
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [imgIndex, setImgIndex] = useState(0);
+
+  return (
+    <Container>
+      <Content padder>
+        <FlatList
+          data={job.documents}
+          style={{ flex: 1 }}
+          contentContainerStyle={styles.listContentContainer}
+          keyExtractor={(item) => item.id}
+          numColumns={4}
+          renderItem={(object) => (
+            <TouchableOpacity
+              onPress={() => {
+                // setImgIndex(object.index);
+                // setPreviewVisible(true);
+              }}
+            >
+              <Thumbnail
+                square
+                large
+                style={{ margin: 5 }}
+                source={{
+                  uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`,
+                }}
+              />
+            </TouchableOpacity>
+          )}
+        />
+        <Text>{job.documents.length}</Text>
+        <MediaCacheOverlay
+          imgIndex={imgIndex}
+          setImgIndex={setImgIndex}
+          previewVisible={previewVisible}
+          setPreviewVisible={setPreviewVisible}
+        />
+      </Content>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  actions: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+  },
+  listContentContainer: {
+    flex: 1,
+  },
+  thumbnail: {
+    width: 10,
+    height: 10,
+    backgroundColor: "tomato",
+  },
+});
diff --git a/components/job-notes-item/job-notes-item.component.jsx b/components/job-notes-item/job-notes-item.component.jsx
index baee667..1832820 100644
--- a/components/job-notes-item/job-notes-item.component.jsx
+++ b/components/job-notes-item/job-notes-item.component.jsx
@@ -7,7 +7,7 @@ import { TouchableOpacity } from "react-native-gesture-handler";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 import styles from "../styles";
 import { AntDesign } from "@expo/vector-icons";
-
+import { DateTime } from "luxon";
 export default function NoteListItem({ item }) {
   const { t } = useTranslation();
 
@@ -40,7 +40,11 @@ export default function NoteListItem({ item }) {
                   color="tomato"
                 />
               )}
-              <Text style={{ fontSize: 12 }}>{item.created_at}</Text>
+              <Text style={{ fontSize: 12 }}>
+                {DateTime.fromISO(item.created_at).toLocaleString(
+                  DateTime.DATETIME_SHORT
+                )}
+              </Text>
             </View>
           </View>
         </CardItem>
diff --git a/components/job-notes/job-notes.component.jsx b/components/job-notes/job-notes.component.jsx
index 9c696ff..ebc6689 100644
--- a/components/job-notes/job-notes.component.jsx
+++ b/components/job-notes/job-notes.component.jsx
@@ -1,18 +1,11 @@
-import Dinero from "dinero.js";
-import {
-  Card,
-  CardItem,
-  H3,
-  Text,
-  View,
-  Container,
-  Content,
-} from "native-base";
+import { Card, CardItem, H3, Text } from "native-base";
 import React from "react";
-import { StyleSheet, RefreshControl, FlatList } from "react-native";
+import { useTranslation } from "react-i18next";
+import { FlatList, RefreshControl } from "react-native";
 import JobNotesItem from "../job-notes-item/job-notes-item.component";
 
 export default function JobNotes({ job, loading, refetch }) {
+  const { t } = useTranslation();
   if (!!!job) {
     <Card>
       <Text>Job is not defined.</Text>
@@ -22,6 +15,14 @@ export default function JobNotes({ job, loading, refetch }) {
   const onRefresh = async () => {
     return refetch();
   };
+  if (job.notes.length === 0)
+    return (
+      <Card>
+        <CardItem>
+          <H3>{t("jobdetail.labels.nojobnotes")}</H3>
+        </CardItem>
+      </Card>
+    );
 
   return (
     <FlatList
diff --git a/components/screen-job-detail/screen-job-detail.component.jsx b/components/screen-job-detail/screen-job-detail.component.jsx
index 474a8a6..43ca0b4 100644
--- a/components/screen-job-detail/screen-job-detail.component.jsx
+++ b/components/screen-job-detail/screen-job-detail.component.jsx
@@ -8,6 +8,8 @@ import ErrorDisplay from "../error-display/error-display.component";
 import JobTombstone from "../job-tombstone/job-tombstone.component";
 import LoadingDisplay from "../loading-display/loading-display.component";
 import JobNotes from "../job-notes/job-notes.component";
+import JobDocuments from "../job-documents/job-documents.component";
+
 export default function ScreenJobDetail({ navigation, route, ...restProps }) {
   const {
     params: { jobId },
@@ -34,7 +36,11 @@ export default function ScreenJobDetail({ navigation, route, ...restProps }) {
         />
       </Tab>
       <Tab heading={t("jobdetail.labels.documents")}>
-        <Text>Tab1</Text>
+        <JobDocuments
+          job={data.jobs_by_pk}
+          loading={loading}
+          refetch={refetch}
+        />
       </Tab>
       <Tab heading={t("jobdetail.labels.notes")}>
         <JobNotes job={data.jobs_by_pk} loading={loading} refetch={refetch} />
diff --git a/graphql/jobs.queries.js b/graphql/jobs.queries.js
index eed3332..841c536 100644
--- a/graphql/jobs.queries.js
+++ b/graphql/jobs.queries.js
@@ -329,7 +329,6 @@ export const GET_JOB_BY_PK = gql`
         ownr_ph1
       }
       labor_rate_desc
-
       rate_la1
       rate_la2
       rate_la3
@@ -387,15 +386,6 @@ export const GET_JOB_BY_PK = gql`
         lbr_amt
         op_code_desc
       }
-      payments {
-        id
-        amount
-        payer
-        created_at
-        stripeid
-        transactionid
-        memo
-      }
       notes(order_by: { created_at: desc }) {
         id
         text
@@ -404,6 +394,12 @@ export const GET_JOB_BY_PK = gql`
         created_at
         updated_at
       }
+      documents(order_by: { created_at: desc }) {
+        id
+        name
+        key
+        created_at
+      }
     }
   }
 `;
diff --git a/translations/en-US/common.json b/translations/en-US/common.json
index 02ec98f..cf80172 100644
--- a/translations/en-US/common.json
+++ b/translations/en-US/common.json
@@ -19,6 +19,7 @@
 				"documents": "Documents",
 				"employeeassignments": "Employee Assignments",
 				"job": "Job",
+				"nojobnotes": "There are no notes.",
 				"notes": "Notes"
 			}
 		},
diff --git a/translations/es-MX/common.json b/translations/es-MX/common.json
index 38a778f..b11ab9c 100644
--- a/translations/es-MX/common.json
+++ b/translations/es-MX/common.json
@@ -19,6 +19,7 @@
 				"documents": "",
 				"employeeassignments": "",
 				"job": "",
+				"nojobnotes": "",
 				"notes": ""
 			}
 		},
diff --git a/translations/fr-CA/common.json b/translations/fr-CA/common.json
index 2cdd6a4..b27499b 100644
--- a/translations/fr-CA/common.json
+++ b/translations/fr-CA/common.json
@@ -19,6 +19,7 @@
 				"documents": "",
 				"employeeassignments": "",
 				"job": "",
+				"nojobnotes": "",
 				"notes": ""
 			}
 		},