diff --git a/src/Components/Document/DocumentListPage.js b/src/Components/Document/DocumentListPage.js
index 9acd6f9..6314b34 100644
--- a/src/Components/Document/DocumentListPage.js
+++ b/src/Components/Document/DocumentListPage.js
@@ -28,6 +28,7 @@ const DocumentListPage = ({ perPage }) => {
   const [selectedDocumentId, setSelectedDocumentId] = useState(null);
   const [allDocs, setAllDocs] = useState(null);
   const [respDocs, setRespDocs] = useState(null);
+  const [reqDocs, setReqDocs] = useState(null);
   const { appState } = useContext(AppContext);
   const [totalPages, setTotalPages] = useState(1);
   const { group } = appState;
@@ -100,8 +101,11 @@ const DocumentListPage = ({ perPage }) => {
     const temp = allDocs.filter((doc) => {
       return doc.docType != "interrogatories-out";
     });
-
+    const temp2 = allDocs.filter((doc) => {
+      return doc.docType === "interrogatories-out";
+    });
     setRespDocs(temp);
+    setReqDocs(temp2);
   };
 
   useEffect(getDocuments, [appUserId, order]);
@@ -200,6 +204,107 @@ const DocumentListPage = ({ perPage }) => {
           <div className="user-name-container">{group.firm}</div>
         </div>
         {allDocs === null ? <div>Loading...</div> : null}
+        <div className="content-container">
+          <div className="document-list-upper-wrapper">
+            <div className="list-upper-left">
+              <div className="doc-list-subhead-container">
+                <div className="doc-list-subhead">Discovery Responses</div>
+              </div>
+            </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">
+            {respDocs && respDocs.length > 0 ? (
+              respDocs.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>
+        <div className="content-container">
+          <div className="document-list-upper-wrapper">
+            <div className="list-upper-left">
+              <div className="doc-list-subhead-container">
+                <div className="doc-list-subhead">Discovery Responses</div>
+              </div>
+            </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">
+            {reqDocs && reqDocs.length > 0 ? (
+              reqDocs.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>
+        {showDeleteModal && selectedDocumentId !== null ? (
+          <ConfirmModal
+            onCancel={handleCancelDelete}
+            onConfirm={handleDeleteDocument}
+            buttonLabelText="Delete"
+            modalText="Confirm that you want to permanently delete this document."
+          />
+        ) : null}
+      </>
+    );
+  };
+  return isMobile ? <MobileContent /> : <DesktopContent />;
+};
+
+export default DocumentListPage;
+
+/*
+
+
         {allDocs !== null ? (
           <div className="content-container">
             {allDocs.length > 0 ? (
@@ -288,23 +393,6 @@ const DocumentListPage = ({ perPage }) => {
             ) : null}
           </div>
         ) : null}
-        {showDeleteModal && selectedDocumentId !== null ? (
-          <ConfirmModal
-            onCancel={handleCancelDelete}
-            onConfirm={handleDeleteDocument}
-            buttonLabelText="Delete"
-            modalText="Confirm that you want to permanently delete this document."
-          />
-        ) : null}
-      </>
-    );
-  };
-  return isMobile ? <MobileContent /> : <DesktopContent />;
-};
-
-export default DocumentListPage;
-
-/*
                   <div className="toggle-outer">
                     <div className="toggle-header">
                       {" "}