diff --git a/backend/controller/files.controller.js b/backend/controller/files.controller.js
index f792c9a..0bc6630 100644
--- a/backend/controller/files.controller.js
+++ b/backend/controller/files.controller.js
@@ -30,7 +30,11 @@ const getAllFilesByReferenceController = (req, res) => {
 }
 
 const bulkCreateFileController = (req, res) => {
-    bulkCreateFiles(req.files, req.params.reference_code)
+    bulkCreateFiles(
+        req.files,
+        req.params.reference_code,
+        req.query.isSupportingDocument
+    )
         .then((newFiles) => res.status(200).json(newFiles))
         .catch((err) => res.status(500).json('Error: ' + err))
 }
diff --git a/backend/service/files.service.js b/backend/service/files.service.js
index 58a487c..7767c0c 100644
--- a/backend/service/files.service.js
+++ b/backend/service/files.service.js
@@ -37,10 +37,9 @@ const createFile = async (file, referenceCode, isSupportingDocument) => {
     return newFile.save()
 }
 
-const bulkCreateFiles = (files, referenceCode) => {
+const bulkCreateFiles = (files, referenceCode, isSupportingDocument) => {
     const promises = files.map((file) =>
-        // TODO: support isPoDocument
-        createFile(file, referenceCode, false)
+        createFile(file, referenceCode, isSupportingDocument)
     )
     return Promise.all(promises)
 }
diff --git a/frontend/src/components/FileViewer.js b/frontend/src/components/FileViewer.js
index 2dac719..d2c668c 100644
--- a/frontend/src/components/FileViewer.js
+++ b/frontend/src/components/FileViewer.js
@@ -70,7 +70,16 @@ const FileViewer = ({ file }) => {
     const { isOpen, onOpen, onClose } = useDisclosure()
     return (
         <Box>
-            <Button onClick={onOpen}>{file.name}</Button>
+            <Button
+                onClick={onOpen}
+                wordBreak="break-all"
+                whiteSpace="normal"
+                textAlign="left"
+                height="fit-content"
+                py="4px"
+            >
+                {file.name}
+            </Button>
             <FilePopUpModal isOpen={isOpen} onClose={onClose} file={file} />
         </Box>
     )
diff --git a/frontend/src/components/UploadFileModal.js b/frontend/src/components/UploadFileModal.js
index ee19387..238f599 100644
--- a/frontend/src/components/UploadFileModal.js
+++ b/frontend/src/components/UploadFileModal.js
@@ -27,6 +27,7 @@ const UploadFileModal = ({
     onClose,
     startingUploadedFiles,
     refetchFiles,
+    isSupportingDocument,
 }) => {
     const ticket = useRecoilValue(currentTicketState)
     const [filesToUpload, setFilesToUpload] = useState([])
@@ -56,7 +57,7 @@ const UploadFileModal = ({
                     formData.append('files', file)
                 })
                 createFilesResponse = axiosPreset.post(
-                    `/files/bulk/${ticket.code}`,
+                    `/files/bulk/${ticket.code}?isSupportingDocument=${isSupportingDocument}`,
                     formData,
                     {
                         headers: {
@@ -96,7 +97,11 @@ const UploadFileModal = ({
         >
             <ModalOverlay />
             <ModalContent>
-                <ModalHeader>Upload Document</ModalHeader>
+                <ModalHeader>
+                    {isSupportingDocument
+                        ? 'Upload Supporting Documents'
+                        : 'Upload Files'}
+                </ModalHeader>
                 <ModalBody>
                     <FileUploader
                         handleChange={onFileAttach}
diff --git a/frontend/src/pages/Dashboard.js b/frontend/src/pages/Dashboard.js
index d0ec25b..7515780 100644
--- a/frontend/src/pages/Dashboard.js
+++ b/frontend/src/pages/Dashboard.js
@@ -66,6 +66,12 @@ const Dashboard = () => {
         onClose: onCloseUploadModal,
     } = useDisclosure()
 
+    const {
+        isOpen: isSupportingDocumentsModalOpen,
+        onOpen: onOpenSupportingDocumentsModal,
+        onClose: onCloseSupportingDocumentsModal,
+    } = useDisclosure()
+
     const auth = useAuth()
     const [allUsers, setAllUsers] = useState({ users: [] })
     const [isCurrentTicketReporter, setIsCurrentTicketReporter] =
@@ -74,6 +80,12 @@ const Dashboard = () => {
     const [currentTicket, setCurrentTicket] = useRecoilState(currentTicketState)
     const [allTickets, setAllTickets] = useRecoilState(allTicketsState)
     const [uploadedFiles, setUploadedFiles] = useRecoilState(currentFiles)
+    const attachments = uploadedFiles?.filter(
+        (file) => !file.is_supporting_document
+    )
+    const supportingDocuments = uploadedFiles?.filter(
+        (file) => file.is_supporting_document
+    )
 
     useEffect(() => {
         const fetchData = async () => {
@@ -217,14 +229,12 @@ const Dashboard = () => {
                     {/* Do not display update/delete button for WATO Cash */}
                     {currentTicket.sf_link !== -1 &&
                         (isCurrentTicketReporter || auth.isDirector) && (
-                            <Flex flexDir="row" mb="12px" gap="16px">
-                                <Button
-                                    size="sm"
-                                    colorScheme="gray"
-                                    onClick={onOpenUploadModal}
-                                >
-                                    <Text>Upload Files</Text>
-                                </Button>
+                            <Flex
+                                flexDir="row"
+                                mb="12px"
+                                gap="16px"
+                                flexWrap="wrap"
+                            >
                                 <Button
                                     size="sm"
                                     colorScheme="cyan"
@@ -239,6 +249,20 @@ const Dashboard = () => {
                                 >
                                     <Text>Delete</Text>
                                 </Button>
+                                <Button
+                                    size="sm"
+                                    colorScheme="gray"
+                                    onClick={onOpenUploadModal}
+                                >
+                                    <Text>Upload Files</Text>
+                                </Button>
+                                <Button
+                                    size="sm"
+                                    colorScheme="blackAlpha"
+                                    onClick={onOpenSupportingDocumentsModal}
+                                >
+                                    <Text>Upload Supporting Documents</Text>
+                                </Button>
                             </Flex>
                         )}
                     {getCurrentTicketContentTable()}
@@ -279,16 +303,30 @@ const Dashboard = () => {
                             </Tbody>
                         </Table>
                     </Box>
-                    <Box w="100%" mt="12px">
-                        <Heading mb="8px" fontSize="2xl">
-                            Attachments
-                        </Heading>
-                        <Grid gap="5px">
-                            {uploadedFiles?.map((file) => {
-                                return <FileViewer file={file} />
-                            })}
-                        </Grid>
-                    </Box>
+                    {supportingDocuments.length > 0 && (
+                        <Box w="100%" mt="12px">
+                            <Heading mb="8px" fontSize="2xl">
+                                Supporting Documents
+                            </Heading>
+                            <Grid gap="5px">
+                                {supportingDocuments?.map((file) => {
+                                    return <FileViewer file={file} />
+                                })}
+                            </Grid>
+                        </Box>
+                    )}
+                    {attachments.length > 0 && (
+                        <Box w="100%" mt="12px">
+                            <Heading mb="8px" fontSize="2xl">
+                                Uploaded Files
+                            </Heading>
+                            <Grid gap="5px">
+                                {attachments?.map((file) => {
+                                    return <FileViewer file={file} />
+                                })}
+                            </Grid>
+                        </Box>
+                    )}
                 </VStack>
             </Flex>
         )
@@ -305,8 +343,22 @@ const Dashboard = () => {
                 <UploadFileModal
                     isOpen={isUploadModalOpen}
                     onClose={onCloseUploadModal}
-                    startingUploadedFiles={uploadedFiles}
+                    startingUploadedFiles={uploadedFiles?.filter(
+                        (file) => !file.is_supporting_document
+                    )}
+                    refetchFiles={getUploadedFiles}
+                    isSupportingDocument={false}
+                />
+            )}
+            {isSupportingDocumentsModalOpen && (
+                <UploadFileModal
+                    isOpen={isSupportingDocumentsModalOpen}
+                    onClose={onCloseSupportingDocumentsModal}
+                    startingUploadedFiles={uploadedFiles?.filter(
+                        (file) => file.is_supporting_document
+                    )}
                     refetchFiles={getUploadedFiles}
+                    isSupportingDocument={true}
                 />
             )}