diff --git a/src/Components/Case/CaseListPage.js b/src/Components/Case/CaseListPage.js
index a1db39b..fbf655a 100644
--- a/src/Components/Case/CaseListPage.js
+++ b/src/Components/Case/CaseListPage.js
@@ -28,6 +28,9 @@ const CaseListPage = ({ perPage }) => {
     if (count.current == null) {
       setIsMobile(window.innerWidth < 440);
     }
+    if (count.current < 3) {
+      setIsMobile(window.innerWidth < 440);
+    }
     return () => {
       count.current = 1;
     };
@@ -98,7 +101,7 @@ const CaseListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-  console.log("window.innerWidth < 440", window.innerWidth < 440);
+
   const DesktopContent = () => {
     return (
       <>
diff --git a/src/Components/Document/DocumentListPage.js b/src/Components/Document/DocumentListPage.js
index c050b88..90d2692 100644
--- a/src/Components/Document/DocumentListPage.js
+++ b/src/Components/Document/DocumentListPage.js
@@ -1,9 +1,10 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
 import { DocCard } from "../../pageElements/Cards";
 import { db } from "../../firebase";
+import MobileContent from "../MobileContent";
 import {
   collection,
   deleteDoc,
@@ -18,6 +19,9 @@ import ConfirmModal from "../Modals/ConfirmModal";
 import "../../styles/doclist-page.scss";
 
 const DocumentListPage = ({ perPage }) => {
+  const size = window.innerWidth < 440;
+  const [isMobile, setIsMobile] = useState(size);
+  const count = useRef(null);
   const navigate = useNavigate();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDocumentId, setSelectedDocumentId] = useState(null);
@@ -33,6 +37,18 @@ const DocumentListPage = ({ perPage }) => {
   const [selectedDocumentType, setSelectedDocumentType] = useState();
   const [showModal, setShowModal] = useState(false);
 
+  useEffect(() => {
+    if (count.current == null) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    if (count.current < 3) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    return () => {
+      count.current = 1;
+    };
+  }, []);
+
   function getDocuments() {
     if (!appUserId) {
       setAllDocs([]);
@@ -118,17 +134,6 @@ const DocumentListPage = ({ perPage }) => {
     { label: "Associated case name z - a", value: "parentCaseName2" },
   ];
 
-  async function openDoc(docId) {
-    /*
-    may deprecate this functionality
-    try {
-      window.open(`${baseUrl}/Backend/Documents/Uploads/${docId}`, "_blank");
-    } catch (err) {
-      console.log("Error occurred fetching document:", err);
-    }
-    */
-  }
-
   function handleNavigate(
     documentId,
     responseGenerations,
@@ -164,103 +169,105 @@ const DocumentListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-  console.log("allDocs", allDocs);
-  return (
-    <>
-      <div className="doc-list-header">
-        <h2 className="doc-header-text">Documents</h2>
-        <div className="user-name-container">{group.firm}</div>
-      </div>
-      {allDocs === null ? <div>Loading...</div> : null}
-      {allDocs !== null ? (
-        <div className="dropdown-container">
-          {allDocs.length > 0 ? (
-            <div className="d-flex justify-content-end mb-3">
-              <SelectDropdown
-                dropDownOptions={dropDownOptions}
-                titleText="Sort documents"
-                handleSelect={setOrder}
-              />
-            </div>
-          ) : (
-            <></>
-          )}
-          <div className="document-list-lower-wrapper">
-            {allDocs.length > 0 ? (
-              allDocs
-                .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}
-                    docType={doc.docType}
-                    documentId={doc.documentId}
-                    dateServed={doc.dateServed}
-                    openDocument={openDoc}
-                    confirmDelete={confirmDelete}
-                    handleNavigate={handleNavigate}
-                    displayDeleteButton={true}
-                    responseGenerations={doc.responseGenerations}
-                  />
-                ))
-            ) : (
-              <div className="nodocs-text-container">
-                <p className="nodocs-text">
-                  {" "}
-                  You have not uploaded any documents yet.
-                </p>
-                <p className="nodocs-light-text">To upload a document:</p>
-                <ol>
-                  <li className="nodocs-list-item">
-                    Navigate to the cases view (above link in navigation bar).{" "}
-                  </li>
-                  <li>
-                    {" "}
-                    Click "View Case" to select the case with which your
-                    document will be associated. This will open the Case Detail
-                    view.{" "}
-                  </li>
-                  <li className="nodocs-list-item">
-                    Note: If you have not yet created any cases, you will need
-                    to create one first - click "Create Case" and follow the
-                    prompts.
-                  </li>
-                  <li className="nodocs-list-item">
-                    In the case detail view, click "Upload Case Document" and
-                    select a document from your computer for upload.
-                  </li>
-                  <li className="nodocs-list-item">
-                    Your document will be parsed into a processable form. You
-                    will then be able to generate a response to the document.
-                  </li>
-                </ol>
-              </div>
-            )}
-          </div>
-          {totalPages > 1 ? (
-            <div className="mb-3">
-              <ListPagination
-                page={page}
-                totalPages={totalPages}
-                setPage={setPage}
-              />
-            </div>
-          ) : null}
+
+  const DesktopContent = () => {
+    return (
+      <>
+        <div className="doc-list-header">
+          <h2 className="doc-header-text">Documents</h2>
+          <div className="user-name-container">{group.firm}</div>
         </div>
-      ) : null}
-      {showDeleteModal && selectedDocumentId !== null ? (
-        <ConfirmModal
-          onCancel={handleCancelDelete}
-          onConfirm={handleDeleteDocument}
-          buttonLabelText="Delete"
-          modalText="Confirm that you want to permanently delete this document."
-        />
-      ) : null}
-    </>
-  );
+        {allDocs === null ? <div>Loading...</div> : null}
+        {allDocs !== null ? (
+          <div className="dropdown-container">
+            {allDocs.length > 0 ? (
+              <div className="d-flex justify-content-end mb-3">
+                <SelectDropdown
+                  dropDownOptions={dropDownOptions}
+                  titleText="Sort documents"
+                  handleSelect={setOrder}
+                />
+              </div>
+            ) : (
+              <></>
+            )}
+            <div className="document-list-lower-wrapper">
+              {allDocs.length > 0 ? (
+                allDocs
+                  .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}
+                      docType={doc.docType}
+                      documentId={doc.documentId}
+                      dateServed={doc.dateServed}
+                      confirmDelete={confirmDelete}
+                      handleNavigate={handleNavigate}
+                      displayDeleteButton={true}
+                      responseGenerations={doc.responseGenerations}
+                    />
+                  ))
+              ) : (
+                <div className="nodocs-text-container">
+                  <p className="nodocs-text">
+                    {" "}
+                    You have not uploaded any documents yet.
+                  </p>
+                  <p className="nodocs-light-text">To upload a document:</p>
+                  <ol>
+                    <li className="nodocs-list-item">
+                      Navigate to the cases view (above link in navigation bar).{" "}
+                    </li>
+                    <li>
+                      {" "}
+                      Click "View Case" to select the case with which your
+                      document will be associated. This will open the Case
+                      Detail view.{" "}
+                    </li>
+                    <li className="nodocs-list-item">
+                      Note: If you have not yet created any cases, you will need
+                      to create one first - click "Create Case" and follow the
+                      prompts.
+                    </li>
+                    <li className="nodocs-list-item">
+                      In the case detail view, click "Upload Case Document" and
+                      select a document from your computer for upload.
+                    </li>
+                    <li className="nodocs-list-item">
+                      Your document will be parsed into a processable form. You
+                      will then be able to generate a response to the document.
+                    </li>
+                  </ol>
+                </div>
+              )}
+            </div>
+            {totalPages > 1 ? (
+              <div className="mb-3">
+                <ListPagination
+                  page={page}
+                  totalPages={totalPages}
+                  setPage={setPage}
+                />
+              </div>
+            ) : 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;
diff --git a/src/Components/Home/HomePage.js b/src/Components/Home/HomePage.js
index 507968c..824ad61 100644
--- a/src/Components/Home/HomePage.js
+++ b/src/Components/Home/HomePage.js
@@ -3,9 +3,8 @@ import suitAI from "../../Assets/Images/suitAI.png";
 import laptop from "../../Assets/Images/laptop.png";
 import arrow from "../../Assets/Images/Arrow.png";
 import scales_centered from "../../Assets/Images/scales_centered.png";
-import hand_clear from "../../Assets/Images/hand_clear.png";
-import hand_rework6 from "../../Assets/Images/hand_rework6.png";
-import gavel_clear from "../../Assets/Images/gavel_clear.png";
+import hand_rework7 from "../../Assets/Images/hand_rework7.png";
+import gavel_clear1 from "../../Assets/Images/gavel_clear1.png";
 import Group80 from "../../Assets/Images/Group80.png";
 import { useNavigate } from "react-router-dom";
 import "../../styles/homepage.scss";
@@ -16,12 +15,15 @@ const HomePage = () => {
   const handleNavigate = () => {
     navigate("/signup");
   };
+
   const handleLogin = () => {
     navigate("/login");
   };
+
   const handleDemo = () => {
     navigate("/demorequestpage");
   };
+
   return (
     <>
       <div className="homepage-container">
@@ -57,7 +59,6 @@ const HomePage = () => {
           </div>
         </section>
         {/* Section 2 */}
-
         <section className="section-2">
           <div className="home-row">
             <div className="home-col-50">
@@ -125,31 +126,33 @@ const HomePage = () => {
           </div>
           <div className="card-section-container">
             {/***********  CARD ONE *********** */}
-
             <div className="home-card">
               <div className="card-image-container">
-                <img src={gavel_clear} alt="" className="card-image" />
+                <img
+                  src={hand_rework7}
+                  alt=""
+                  width="100%"
+                  className="card-image"
+                />
               </div>
               <div className="card-body">
                 <div className="card-upper-box">
                   <div className="home-card-title">
-                    <h3 className="foo-card-title">Proactive Alerts</h3>
+                    <h3 className="foo-card-title">Discovery Requests</h3>
                     <div className="home-card-divider"></div>
                   </div>
                 </div>
 
                 <div className="home-card-text-box">
                   <p className="card-texts">
-                    Your NovoDash displays important deadlines, sends email/SMS
-                    alerts, and will auto-draft responses and remind you to
-                    serve them.
+                    Generate discovery requests with a few clicks, or select
+                    manually from a comprehensive request library. Done in a
+                    heartbeat, with a .docx for review and service.
                   </p>
                 </div>
               </div>
             </div>
-
             {/***********  CARD TWO *********** */}
-
             <div className="home-card">
               <div className="card-image-container">
                 <img
@@ -176,31 +179,24 @@ const HomePage = () => {
                 </div>
               </div>
             </div>
-
             {/***********  CARD THREE *********** */}
-
             <div className="home-card">
               <div className="card-image-container">
-                <img
-                  src={hand_rework6}
-                  alt=""
-                  width="100%"
-                  className="card-image"
-                />
+                <img src={gavel_clear1} alt="" className="card-image" />
               </div>
               <div className="card-body">
                 <div className="card-upper-box">
                   <div className="home-card-title">
-                    <h3 className="foo-card-title">Discovery Requests</h3>
+                    <h3 className="foo-card-title">Proactive Alerts</h3>
                     <div className="home-card-divider"></div>
                   </div>
                 </div>
 
                 <div className="home-card-text-box">
                   <p className="card-texts">
-                    Generate discovery requests with a few clicks, or select
-                    manually from a comprehensive request library. Done in a
-                    heartbeat, with a .docx for review and service.
+                    Your Novodash displays important deadlines, sends email/SMS
+                    alerts, can auto-draft documents and remind you to serve
+                    them.
                   </p>
                 </div>
               </div>
diff --git a/src/Components/HowTo/HowToPage.js b/src/Components/HowTo/HowToPage.js
index 945f9f6..057515e 100644
--- a/src/Components/HowTo/HowToPage.js
+++ b/src/Components/HowTo/HowToPage.js
@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import { Steps } from "../../Constants/Copy/howToSteps.js";
+
 import "../../styles/howTo-page.scss";
 import { ReactComponent as HowToInfoSvg } from "../../Assets/svg/howToInfo.svg";
 
diff --git a/src/Components/Navigation/Navpanel.js b/src/Components/Navigation/Navpanel.js
index 8dca5d8..650ccaa 100644
--- a/src/Components/Navigation/Navpanel.js
+++ b/src/Components/Navigation/Navpanel.js
@@ -65,24 +65,27 @@ export default function Navpanel(props) {
                   Dashboard
                 </a>
               </div>
-              <div className="contact-detail-two">
+              <div className="contact-detail-twotwo">
                 <a
-                  className="contact-link-two"
+                  className="contact-link-twotwo"
                   onClick={() => packUpAndLeave("cases")}
                 >
                   Cases
                 </a>
               </div>
-              <div className="contact-detail-three">
+              <div className="contact-detail-threethree">
                 <a
-                  className="nav-link-three"
+                  className="nav-link-threthree"
                   onClick={() => packUpAndLeave("documents")}
                 >
                   Documents
                 </a>
               </div>
               <div className="contact-detail-one">
-                <a className="contact-link" onClick={() => packUpAndLeave("")}>
+                <a
+                  className="contact-linklink"
+                  onClick={() => packUpAndLeave("")}
+                >
                   Blog
                 </a>
               </div>
diff --git a/src/Constants/Copy/howToSteps.js b/src/Constants/Copy/howToSteps.js
index d85b318..04da1c1 100644
--- a/src/Constants/Copy/howToSteps.js
+++ b/src/Constants/Copy/howToSteps.js
@@ -1,3 +1,5 @@
+import { ExclamationTriangle } from "react-bootstrap-icons";
+
 export const Steps = () => (
   <div className="steps-wrapper">
     <h2 className="doc-header-text">Generate Discovery Responses</h2>
@@ -31,10 +33,13 @@ export const Steps = () => (
         satisfied, you can download a .docx file by clicking the “Create .docx
         File” button.
       </li>
+      <ExclamationTriangle
+        style={{ color: "red", marginRight: "6px", marginBottom: "2px" }}
+      />
       <strong>Pro tip:</strong> once you've created a case, you can skip most of
       these steps. Simply search for the case by entering the case number in the
-      search bar on your Dashboard, and click "Express Document Upload" and
-      follow the prompts.
+      search bar on your <strong>Dashboard</strong>, click "Express Document
+      Upload" and follow the prompts.
     </ol>
     <p className="steps-p"></p>
   </div>
diff --git a/src/pageElements/Cards.js b/src/pageElements/Cards.js
index f15e4dd..8cba675 100644
--- a/src/pageElements/Cards.js
+++ b/src/pageElements/Cards.js
@@ -271,7 +271,6 @@ export const DocCard = (props) => {
     parentCaseId,
     documentId,
     dateServed,
-    openDocument,
     docType,
     displayDeleteButton,
     handleNavigate,
@@ -283,11 +282,7 @@ export const DocCard = (props) => {
     <div className="doc-card-container">
       <div className="doc-card-input">
         <div className="card-col-icon">
-          <FileEarmarkText
-            className="doc-file-icon"
-            onClick={() => openDocument(documentId)}
-            size="22px"
-          />
+          <FileEarmarkText className="doc-file-icon" size="22px" />
         </div>
         <div className="doc-col2">{title}</div>
         {dateServed ? (
diff --git a/src/styles/contact.scss b/src/styles/contact.scss
index 6ea0dec..fdcddbb 100644
--- a/src/styles/contact.scss
+++ b/src/styles/contact.scss
@@ -54,6 +54,14 @@
   padding-right: 25px;
 }
 
+.contact-link-twotwo {
+  font-size: 0.95rem;
+  letter-spacing: 0.92rem;
+  color: #fff;
+  text-decoration: none;
+  padding-right: 25px;
+}
+
 .contactLinkThree {
   letter-spacing: 1rem;
   text-decoration: none;
@@ -106,6 +114,15 @@
   letter-spacing: 0.2rem;
 }
 
+.contact-detail-twotwo {
+  display: flex;
+  flex-direction: row-reverse;
+  height: 38px;
+  margin: 12px 0px;
+  padding-right: 18px;
+  background-color: hsl(17, 100%, 61%);
+}
+
 .contact-detail-three {
   display: flex;
   flex-direction: row-reverse;
@@ -115,6 +132,15 @@
   letter-spacing: 0.5rem;
 }
 
+.contact-detail-threethree {
+  display: flex;
+  flex-direction: row-reverse;
+  height: 40px;
+  margin: 12px 0px;
+  background-color: rgb(93, 206, 255);
+  letter-spacing: 0.5rem;
+}
+
 .contactDetailFour {
   width: 40%;
   background-color: orange;
@@ -206,20 +232,18 @@
     padding-right: 20px;
   }
 
-  .contactLink {
-    letter-spacing: 0.2rem;
+  .nav-link-threthree {
+    color: black;
+    letter-spacing: 1rem;
+    text-decoration: none;
+    padding-right: 24px;
+  }
+
+  .contact-linklink {
+    font-size: 1rem;
+    letter-spacing: 0.6rem;
+    color: #fff;
+    text-decoration: none;
+    padding-right: 16px;
   }
 }
-
-/*
-.threeInner {
-  display: flex;
-  margin-left: 5px;
-  height: 300px;
-  width: 130px;
-  border-radius: 0px;
-  overflow: hidden;
-  opacity: 0.4;
-  background: linear-gradient(to left, rgba(245, 246, 252, 0.52), red);
-}
-*/