diff --git a/src/Components/Case/CaseTypePage.js b/src/Components/Case/CaseTypePage.js
new file mode 100644
index 0000000..8ddf861
--- /dev/null
+++ b/src/Components/Case/CaseTypePage.js
@@ -0,0 +1,134 @@
+import React, { useEffect, useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { DetailCard } from "../../pageElements/DetailCard.js";
+import Button from "../../pageElements/Button";
+import CreateModal from "../Modals/CreateModal.js";
+import UploadModal from "../Modals/UploadModal.js";
+import { db } from "../../firebase";
+import { useParams } from "react-router-dom";
+import { AppContext } from "../../Hooks/useContext/appContext.js";
+import LoadingSpinner from "../../pageElements/LoadingSpinner";
+import { doc, onSnapshot } from "firebase/firestore";
+
+const CaseDetailsPage = () => {
+  const { caseId } = useParams();
+  const [subCase, setSubCase] = useState(null);
+  const navigate = useNavigate();
+  const [showUploadModal, setShowUploadModal] = useState();
+  const [showCreateModal, setShowCreateModal] = useState();
+  const [isLoading, setIsLoading] = useState(false);
+  const { appState } = useContext(AppContext);
+  const { group } = appState;
+  const appUserId = group ? group.appUserId : null;
+  const message =
+    "Parsing document.  Please be patient, this may take several minutes.";
+
+  const handleNavigate = () => {
+    navigate("/documents");
+  };
+
+  const handleBack = () => {
+    navigate("/cases");
+  };
+
+  function getCase() {
+    const docRef = doc(db, "cases", caseId);
+    const unsub = onSnapshot(docRef, (snapshot) => {
+      if (snapshot.exists() && snapshot.data().ownerId === appUserId) {
+        setSubCase({ ...snapshot.data(), id: snapshot.id });
+      } else {
+        setSubCase(null);
+      }
+    });
+    return unsub;
+  }
+
+  useEffect(getCase, [caseId, appUserId]);
+
+  const handleSuccess = () => {
+    setIsLoading(true);
+    setShowUploadModal(false);
+    setTimeout(handleNavigate, 40000);
+  };
+
+  const ButtonContent = () => {
+    return (
+      <div className="details-button-container">
+        <div className="details-butn-wrapper">
+          <Button
+            onClick={() => setShowCreateModal(true)}
+            labelText="Edit"
+            className="primary-button"
+          />
+        </div>
+        <div className="details-button-box">
+          <Button
+            className="secondary-button back-button"
+            onClick={handleBack}
+            labelText="Back"
+          />
+          <div className="upload-button-box">
+            <Button
+              className="p-2 mr-2 primary-button"
+              onClick={() => setShowUploadModal(true)}
+              labelText="Upload Document"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  if (!group) {
+    return null;
+  }
+
+  const HeadingContent = () => {
+    return (
+      <div className="details-heading-container">
+        <h3 className="details-heading">Case Details:</h3>
+        <div className="details-subhead">
+          <h3 className="details-heading2">
+            {subCase?.caption} v. {subCase?.captionTwo}
+          </h3>
+          <div className="pheno-phun">
+            <h3 className="details-heading3">Index Number:</h3>
+            <h3 className="details-heading4">{subCase?.caseNumber}</h3>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const showUp = showUploadModal && subCase !== null ? true : false;
+  const showCreate = showCreateModal && subCase !== null ? true : false;
+  return (
+    <div className="details-container">
+      {isLoading ? <LoadingSpinner message={message} /> : null}
+      {!isLoading ? <HeadingContent /> : null}
+      {!isLoading ? (
+        showUp ? (
+          <UploadModal
+            setShowModal={setShowUploadModal}
+            setIsLoading={setIsLoading}
+            handleSuccess={handleSuccess}
+            caseData={subCase}
+          />
+        ) : null
+      ) : null}
+      {!isLoading ? (
+        showCreate ? (
+          <CreateModal setShowModal={setShowCreateModal} caseData={subCase} />
+        ) : null
+      ) : null}
+      {!isLoading ? (
+        subCase !== null ? (
+          <DetailCard data={subCase} />
+        ) : null
+      ) : null}
+      {!isLoading ? <ButtonContent /> : null}
+    </div>
+  );
+};
+
+export default CaseDetailsPage;
diff --git a/src/Components/Modals/CreateModal.js b/src/Components/Modals/CreateModal.js
index dbc5881..9cd098b 100644
--- a/src/Components/Modals/CreateModal.js
+++ b/src/Components/Modals/CreateModal.js
@@ -103,7 +103,7 @@ const CreateModal = ({ setShowModal, caseData }) => {
       try {
         saveCaseData(dataValues).then((res) => {
           const caseId = res;
-          navigate(`/casedetails/${caseId}`);
+          navigate(`/casetype/${caseId}`);
         });
       } catch (err) {
         console.log(err);