diff --git a/src/Components/Document/DocumentListPage.js b/src/Components/Document/DocumentListPage.js
index 6e083fe..1f6af36 100644
--- a/src/Components/Document/DocumentListPage.js
+++ b/src/Components/Document/DocumentListPage.js
@@ -4,6 +4,7 @@ import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
 import { DocCard } from "../../pageElements/Cards";
 import { db } from "../../firebase";
+import Toggle from "../../pageElements/Toggle.js";
 import MobileContent from "../MobileContent";
 import {
   collection,
@@ -32,7 +33,7 @@ const DocumentListPage = ({ perPage }) => {
   const [page, setPage] = useState(1);
   const [order, setOrder] = useState("parentCaseName");
   const appUserId = group ? group.appUserId : null;
-
+  const [verbValue, setVerbValue] = useState(1);
   const [isBusy, setIsBusy] = useState(false);
   const [selectedDocumentType, setSelectedDocumentType] = useState();
   const [showModal, setShowModal] = useState(false);
@@ -110,6 +111,11 @@ const DocumentListPage = ({ perPage }) => {
     setIsBusy(false);
   }
 
+  const handleNovos = (e) => {
+    navigate("/how-to");
+  };
+
+  const handleToggle = (val) => setVerbValue(val);
   async function deleteFromStorage() {
     const selectedDoc = allDocs.filter((doc) => {
       return doc.documentId == selectedDocumentId;
@@ -181,14 +187,37 @@ const DocumentListPage = ({ perPage }) => {
         </div>
         {allDocs === null ? <div>Loading...</div> : null}
         {allDocs !== null ? (
-          <div className="dropdown-container">
+          <div className="content-container">
             {allDocs.length > 0 ? (
-              <div className="d-flex justify-content-end mb-3">
-                <SelectDropdown
-                  dropDownOptions={dropDownOptions}
-                  titleText="Sort documents"
-                  handleSelect={setOrder}
-                />
+              <div className="document-list-upper-wrapper">
+                <div className="list-upper-left">
+                  <div className="toggle-outer">
+                    <div className="toggle-header">
+                      {" "}
+                      <p
+                        onClick={handleNovos}
+                        href=""
+                        className="doclist-toggle-link"
+                      >
+                        Novos
+                      </p>
+                    </div>
+                    <div className="toggle-box">
+                      <p className="select-billing-text">Min</p>
+                      <Toggle value={verbValue} onClick={handleToggle} />
+                      <p className="select-billing-text">Max</p>
+                    </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>
             ) : (
               <></>
@@ -201,17 +230,17 @@ const DocumentListPage = ({ perPage }) => {
                     <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}
+                      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}
+                      responseGenerations={doc.responseGenerations}
                     />
                   ))
               ) : (
diff --git a/src/styles/doclist-page.scss b/src/styles/doclist-page.scss
index b9450df..cdc763f 100644
--- a/src/styles/doclist-page.scss
+++ b/src/styles/doclist-page.scss
@@ -61,7 +61,7 @@
 .list-upper-left {
   display: flex;
   flex-direction: row;
-  justify-content: left;
+  justify-content: right;
   width: 95%;
 }