diff --git a/src/Components/Document/DocumentListPage.js b/src/Components/Document/DocumentListPage.js
index 53786ed..428bcf0 100644
--- a/src/Components/Document/DocumentListPage.js
+++ b/src/Components/Document/DocumentListPage.js
@@ -229,7 +229,80 @@ const DocumentListPage = ({ perPage }) => {
         {allResponseDocs === null && allRequestDocs === null ? (
           <div>Loading...</div>
         ) : null}
-
+        <div className="document-list-upper-wrapper">
+          <div className="list-upper-left">Discovery Request Documents</div>
+          <div className="list-upper-right">
+            <div className="d-flex justify-content-end mb-3">
+              <SelectDropdown
+                dropDownOptions={dropDownOptions}
+                titleText="Sort documents"
+                handleSelect={setOrder}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="document-list-lower-wrapper">
+          {allRequestDocs.length > 0 ? (
+            allRequestDocs
+              .slice((page - 1) * perPage, page * perPage)
+              .map((doc, i) => (
+                <DocCard
+                  key={`doccard-${i}`}
+                  title={doc.docTitle}
+                  parentCaseNumber={doc.parentCaseNumber}
+                  parentCaseName={doc.parentCaseName}
+                  parentCaseId={doc.parentCaseId}
+                  createdAt={doc.createdAt}
+                  docType={doc.docType}
+                  documentId={doc.documentId}
+                  dateServed={doc.dateServed}
+                  confirmDelete={confirmDelete}
+                  handleNavigate={handleNavigate}
+                  displayDeleteButton={true}
+                  responseGenerations={doc.responseGenerations}
+                />
+              ))
+          ) : (
+            <></>
+          )}
+        </div>
+        <div className="document-list-upper-wrapper">
+          <div className="list-upper-left">Discovery Response Documents</div>
+          <div className="list-upper-right">
+            <div className="d-flex justify-content-end mb-3">
+              <SelectDropdown
+                dropDownOptions={dropDownOptions}
+                titleText="Sort documents"
+                handleSelect={setOrder}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="document-list-lower-wrapper">
+          {allResponseDocs.length > 0 ? (
+            allResponseDocs
+              .slice((page - 1) * perPage, page * perPage)
+              .map((doc, i) => (
+                <DocCard
+                  key={`doccard-${i}`}
+                  title={doc.docTitle}
+                  parentCaseNumber={doc.parentCaseNumber}
+                  parentCaseName={doc.parentCaseName}
+                  parentCaseId={doc.parentCaseId}
+                  createdAt={doc.createdAt}
+                  docType={doc.docType}
+                  documentId={doc.documentId}
+                  dateServed={doc.dateServed}
+                  confirmDelete={confirmDelete}
+                  handleNavigate={handleNavigate}
+                  displayDeleteButton={true}
+                  responseGenerations={doc.responseGenerations}
+                />
+              ))
+          ) : (
+            <></>
+          )}
+        </div>
         {showDeleteModal && selectedDocumentId !== null ? (
           <ConfirmModal
             onCancel={handleCancelDelete}