From b776f901fcbb12128678e0dffb171c705726aabe Mon Sep 17 00:00:00 2001
From: BruhSomeoneTookMySpicyUsername <geraldyywang@gmail.com>
Date: Wed, 29 Nov 2023 19:43:23 -0500
Subject: [PATCH 1/5] gets rid of duplicate justify-center styling

---
 src/components/ClaimFilesButton.js | 36 +++++++++++++-----------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/ClaimFilesButton.js b/src/components/ClaimFilesButton.js
index e072e2a..856cc62 100644
--- a/src/components/ClaimFilesButton.js
+++ b/src/components/ClaimFilesButton.js
@@ -1,25 +1,21 @@
 import React, { useContext } from "react";
 import { Link } from "react-router-dom";
-import { DarkModeContext } from '../DarkModeContext'; // Import the context
+import { DarkModeContext } from "../DarkModeContext"; // Import the context
 
 export default function ClaimFilesButton() {
-    const { darkMode } = useContext(DarkModeContext); // Use the context
+  const { darkMode } = useContext(DarkModeContext); // Use the context
 
-    const buttonClass = darkMode 
-    ? 'bg-green-500 p-4 text-white items-center rounded-xl font-semibold mx-4 mt-2'
-    : 'bg-green-300 p-4 items-center rounded-xl font-semibold mx-4 mt-2';
-    
-    return (
-        <div className="flex justify-center justify-center h-screen">
-            <Link to="/claim-files">
-                <button
-                    variant="contained"
-                    color="success"
-                    className={buttonClass}
-                >
-                    Create Claim
-                </button>
-            </Link>
-        </div>
-    );
-}
\ No newline at end of file
+  const buttonClass = darkMode
+    ? "bg-green-500 p-4 text-white items-center rounded-xl font-semibold mx-4 mt-2"
+    : "bg-green-300 p-4 items-center rounded-xl font-semibold mx-4 mt-2";
+
+  return (
+    <div className="flex justify-center h-screen">
+      <Link to="/claim-files">
+        <button variant="contained" color="success" className={buttonClass}>
+          Create Claim
+        </button>
+      </Link>
+    </div>
+  );
+}

From 0daa8ae8be35b051340e6115357facc3198f2f3b Mon Sep 17 00:00:00 2001
From: BruhSomeoneTookMySpicyUsername <geraldyywang@gmail.com>
Date: Wed, 29 Nov 2023 20:45:07 -0500
Subject: [PATCH 2/5] Implemented state forms for Life Claim Information
 Request and Life Claim Initiation Lender Statement - For our current
 workflow, we will not include Certification of Death form - Instead, we will
 leave it as something for the user to fill out and upload

---
 .../forms/LifeClaimInformationRequestForm.js  |  98 ++++++++++++++++
 .../LifeClaimInitiationLenderStatementForm.js | 105 ++++++++++++++++++
 2 files changed, 203 insertions(+)
 create mode 100644 src/components/forms/LifeClaimInformationRequestForm.js
 create mode 100644 src/components/forms/LifeClaimInitiationLenderStatementForm.js

diff --git a/src/components/forms/LifeClaimInformationRequestForm.js b/src/components/forms/LifeClaimInformationRequestForm.js
new file mode 100644
index 0000000..3cfb33b
--- /dev/null
+++ b/src/components/forms/LifeClaimInformationRequestForm.js
@@ -0,0 +1,98 @@
+import { useState } from "react";
+
+const LifeClaimInformationRequestForm = () => {
+  const [claimNumber, setClaimNumber] = useState("");
+
+  // Claim Checklist
+  const [deathCertificateCompleted, setDeathCertificateCompleted] =
+    useState(false);
+  const [deathCertificateAttached, setDeathCertificateAttached] =
+    useState(false);
+  const [
+    statementOfLendingInstitutionCompleted,
+    setStatementOfLendingInstitutionCompleted,
+  ] = useState(false);
+
+  // Deceased Information
+  const [deceasedName, setDeceasedName] = useState("");
+  const [dob, setDob] = useState("");
+  const [dod, setDod] = useState("");
+
+  // Medical Information
+  const [causeOfDeath, setCauseOfDeath] = useState("");
+  const [hospitalized, setHospitalized] = useState(false);
+  const [hospitalizationDate, setHospitalizationDate] = useState("");
+  const [hospitalName, setHospitalName] = useState("");
+  const [hospitalAddress, setHospitalAddress] = useState("");
+  const [physicianName, setPhysicianName] = useState(""); // attending doctor at death
+  const [physicianAddress, setPhysicianAddress] = useState("");
+  const [physicianPhone, setPhysicianPhone] = useState("");
+  const [familyDoctorName, setFamilyDoctorName] = useState("");
+  const [familyDoctorAddress, setFamilyDoctorAddress] = useState("");
+  const [familyDoctorPhone, setFamilyDoctorPhone] = useState("");
+  const [otherPhysicians, setOtherPhysicians] = useState([]); // ['physician name', 'address']
+
+  // Employment Information
+  const [occupation, setOccupation] = useState("");
+  const [dateLastWorked, setDateLastWorked] = useState("");
+  const [employer, setEmployer] = useState("");
+  const [employerAddress, setEmployerAddress] = useState("");
+  const [employerPhone, setEmployerPhone] = useState("");
+
+  // Next of Kin Information
+  const [kinName, setKinName] = useState("");
+  const [kinAddress, setKinAddress] = useState("");
+  const [kinPhone, setKinPhone] = useState("");
+  const [kinRelationship, setKinRelationship] = useState("");
+
+  // Authorization
+  const [signature, setSignature] = useState("");
+  const [date, setDate] = useState("");
+
+  return (
+    <div>
+      {/* Header */}
+      <div>
+        <h2>Life Claim Information Request</h2>
+      </div>
+
+      {/* Checklist */}
+      <h3>Claim Checklist</h3>
+      <div></div>
+
+      {/* Deceased Information */}
+      <h3>Deceased Information</h3>
+      <div></div>
+
+      {/* Medical Information */}
+      <h3>Medical Information</h3>
+      <div></div>
+
+      {/* Employment Information */}
+      <h3>Employment Information</h3>
+      <div></div>
+
+      {/* Next of Kin Information */}
+      <h3>Next of Kin Information</h3>
+      <div></div>
+
+      {/* Authorization */}
+      <h3>Authorization</h3>
+      <div></div>
+
+      {/* Checklist for Claim */}
+      <h3>Claim Checklist</h3>
+      <div></div>
+
+      {/* Next of Kin Information for */}
+      <h3>Next of Kin Information</h3>
+      <div></div>
+
+      {/* Authorization */}
+      <h3>Authorization</h3>
+      <div></div>
+    </div>
+  );
+};
+
+export default LifeClaimInformationRequestForm;
diff --git a/src/components/forms/LifeClaimInitiationLenderStatementForm.js b/src/components/forms/LifeClaimInitiationLenderStatementForm.js
new file mode 100644
index 0000000..150c606
--- /dev/null
+++ b/src/components/forms/LifeClaimInitiationLenderStatementForm.js
@@ -0,0 +1,105 @@
+import { useState } from "react";
+
+const LifeClaimInitiationLenderStatementForm = () => {
+  const [claimNumber, setClaimNumber] = useState("");
+
+  // Claim Checklist
+  const [statementOfAccountAttached, setStatementOfAccountAttached] =
+    useState(false);
+  const [deathCertificateAttached, setDeathCertificateAttached] =
+    useState(false);
+  const [
+    lifeCLiamInformationRequestProvided,
+    setLifeClaimInformationRequestProvided,
+  ] = useState(false);
+  const [
+    certificationOfDeathPhysiciansStatmentCompleted,
+    setCertificationOfDeathPhysiciansStatmentCompleted,
+  ] = useState(false);
+
+  // Deceased Information
+  const [deceasedName, setDeceasedName] = useState("");
+  const [otherNames, setOtherNames] = useState([]); // ['name', 'name']
+  const [dob, setDob] = useState("");
+  const [dod, setDod] = useState("");
+  const [deceasedAddress, setDeceasedAddress] = useState("");
+
+  // Since there are up to 3 loans, index 0 is loan 1, index 1 is loan 2, etc.
+  // General Loan Information
+  const [loanNumbers, setLoanNumbers] = useState([0, 0, 0]);
+  const [loanApprovalDates, setLoanApprovalDates] = useState(["", "", ""]);
+  const [loanOrignalAmounts, setLoanOrignalAmounts] = useState([0, 0, 0]);
+  const [amountsOfInsuranceAppliedFor, setAmountsOfInsuranceAppliedFor] =
+    useState([0, 0, 0]);
+  const [typesOfLoan, setTypesOfLoan] = useState(["", "", ""]); // ['closed end', 'open end']
+  const [datesOfFirstPayment, setDatesOfFirstPayment] = useState(["", "", ""]);
+  const [interestRates, setInterestRates] = useState([0, 0, 0]);
+  const [amountOfMonthlyPayments, setAmountOfMonthlyPayments] = useState([
+    0, 0, 0,
+  ]);
+  const [datesOfLastPaymentsBeforeDeath, setDatesOfLastPaymentsBeforeDeath] =
+    useState([false, false, false]);
+  const [balancesOnDateOfDeath, setBalancesOnDateOfDeath] = useState([0, 0, 0]);
+
+  // Closed End Loans
+  const [termsOfLoan, setTermsOfLoan] = useState(["", "", ""]); // ['months', 'months', 'months']
+  const [scheduledMaturityDates, setScheduledMaturityDates] = useState([
+    "",
+    "",
+    "",
+  ]);
+  const [loanRefinanceOfPreviousLoan, setLoanRefinanceOfPreviousLoan] =
+    useState([false, false, false]);
+  const [previousLoanNumbers, setPreviousLoanNumbers] = useState([0, 0, 0]);
+  const [previousLoanEffectiveDates, setPreviousLoanEffectiveDates] = useState([
+    "",
+    "",
+    "",
+  ]);
+
+  // Open End Loans and Advances Only
+  const [advances, setAdvances] = useState([]); // [[date1, advance1], [date2, advance2]], ...]
+
+  // Next of Kin
+  const [kinName, setKinName] = useState("");
+  const [kinAddress, setKinAddress] = useState("");
+  const [kinPhone, setKinPhone] = useState("");
+  const [kinRelationship, setKinRelationship] = useState("");
+
+  // Signature of Authorized Representative
+  const [nameOfLendingInstitution, setNameOfLendingInstitution] = useState("");
+  const [addressOfLendingInstitution, setAddressOfLendingInstitution] =
+    useState("");
+  const [authorizedRepresentativeName, setAuthorizedRepresentativeName] =
+    useState("");
+  const [
+    authorizedRepresentativeTelephone,
+    setAuthorizedRepresentativeTelephone,
+  ] = useState("");
+  const [authorizedRepresentativeEmail, setAuthorizedRepresentativeEmail] =
+    useState("");
+  const [certificateNumber, setCertificateNumber] = useState("");
+  const [signature, setSignature] = useState("");
+
+  return (
+    <div>
+      <h2>Life Claim Initiation Lender Statement</h2>
+
+      {/* Checklist */}
+
+      {/* Deceased Information */}
+
+      {/* General Loan Information */}
+
+      {/* Closed End Loans */}
+
+      {/* Open End Loans and Advances Only*/}
+
+      {/* Next of Kin */}
+
+      {/* Signature of Authorized Representative */}
+    </div>
+  );
+};
+
+export default LifeClaimInitiationLenderStatementForm;

From 66ba7aa272b9bfec857ac004c74c351fda270870 Mon Sep 17 00:00:00 2001
From: BruhSomeoneTookMySpicyUsername <geraldyywang@gmail.com>
Date: Thu, 30 Nov 2023 08:55:23 -0500
Subject: [PATCH 3/5] create CertificationOfDeathForm, started handleSubmit for
 LifeClaimInformationRequestForm

---
 .../forms/CertificationOfDeathForm.js         | 89 +++++++++++++++++++
 .../forms/LifeClaimInformationRequestForm.js  | 44 +++++++++
 2 files changed, 133 insertions(+)
 create mode 100644 src/components/forms/CertificationOfDeathForm.js

diff --git a/src/components/forms/CertificationOfDeathForm.js b/src/components/forms/CertificationOfDeathForm.js
new file mode 100644
index 0000000..4643433
--- /dev/null
+++ b/src/components/forms/CertificationOfDeathForm.js
@@ -0,0 +1,89 @@
+import { useState } from "react";
+
+const CertificationOfDeathForm = () => {
+  const [claimNumber, setClaimNumber] = useState("");
+
+  // Main Section
+  const [deceasedName, setDeceasedName] = useState("");
+  const [dod, setDod] = useState("");
+  const [timeOfDeath, setTimeOfDeath] = useState("");
+  const [immediateCauseOfDeath, setImmediateCauseOfDeath] = useState("");
+  const [consequenceOfDeath, setConsequenceOfDeath] = useState("");
+  const [syptomsFirstAppeared, setSyptomsFirstAppeared] = useState("");
+  const [causeOfDeath, setCauseOfDeath] = useState(""); // natural, accident, suicide, homicide, undetermined
+  const [placeOfDeath, setPlaceOfDeath] = useState("");
+  const [inquest, setInquest] = useState(false);
+  const [autopsyPerformed, setAutopsyPerformed] = useState(false);
+
+  // Signature of Person Providing Certification
+  const [signeeName, setSigneeName] = useState("");
+  const [signeeTitle, setSigneeTitle] = useState("");
+  const [signeeAddress, setSigneeAddress] = useState("");
+  const [signeePhoneNumber, setSigneePhoneNumber] = useState("");
+  const [signeeSignature, setSigneeSignature] = useState("");
+  const [signatureDate, setSignatureDate] = useState("");
+
+  const handleSubmit = () => {
+    const formData = {
+      claimNumber: claimNumber,
+      deceasedName: deceasedName,
+      dod: dod,
+      timeOfDeath: timeOfDeath,
+      immediateCauseOfDeath: immediateCauseOfDeath,
+      consequenceOfDeath: consequenceOfDeath,
+      syptomsFirstAppeared: syptomsFirstAppeared,
+      causeOfDeath: causeOfDeath,
+      placeOfDeath: placeOfDeath,
+      inquest: inquest,
+      autopsyPerformed: autopsyPerformed,
+      signeeName: signeeName,
+      signeeTitle: signeeTitle,
+      signeeAddress: signeeAddress,
+      signeePhoneNumber: signeePhoneNumber,
+      signeeSignature: signeeSignature,
+      signatureDate: signatureDate,
+    };
+  };
+
+  return (
+    <div>
+      <h2>Certification of Death - Physician Statement</h2>
+
+      {/* Main Section */}
+      <div>
+        <h3>
+          To be completed by attending physician, coroner or family doctor
+          certifying the death of the insured.{" "}
+        </h3>
+        <p>Claim number: </p>
+        <h3>
+          I, the undersigned, hereby certify the Deceased was officially
+          pronounced dead:
+        </h3>
+        <p>Full name of deceased</p>
+        <p>Date of death (mo/day/yr)</p>
+        <p>Time of death</p>
+        <p>Immediate Cause of Death</p>
+        <p>Due to a consequence of</p>
+        <p>When did symptoms first appear or accident happen (mo/day/yr)</p>
+        <p>Cause of death</p>
+        <p>Place of death (if institution or hospital, give name)</p>
+        <p>Was an inquest held?</p>
+        <p>Was an autopsy performed?</p>
+      </div>
+
+      {/* Signature of Person Providing Certification */}
+      <div>
+        <h3>Signature of Person Providing Certification</h3>
+        <p>Name</p>
+        <p>Title</p>
+        <p>Address</p>
+        <p>Phone number</p>
+        <p>Signature</p>
+        <p>Date (mo/day/yr)</p>
+      </div>
+    </div>
+  );
+};
+
+export default CertificationOfDeathForm;
diff --git a/src/components/forms/LifeClaimInformationRequestForm.js b/src/components/forms/LifeClaimInformationRequestForm.js
index 3cfb33b..e991e19 100644
--- a/src/components/forms/LifeClaimInformationRequestForm.js
+++ b/src/components/forms/LifeClaimInformationRequestForm.js
@@ -49,6 +49,50 @@ const LifeClaimInformationRequestForm = () => {
   const [signature, setSignature] = useState("");
   const [date, setDate] = useState("");
 
+  // Submit Form
+  const handleSubmit = () => {
+    // Aggregate all the data into one object
+    const formData = {
+      claimNumber: claimNumber,
+      deathCertificateCompleted: deathCertificateCompleted,
+      deathCertificateAttached: deathCertificateAttached,
+      statementOfLendingInstitutionCompleted:
+        statementOfLendingInstitutionCompleted,
+      deceasedName: deceasedName,
+      dob: dob,
+      dod: dod,
+      causeOfDeath: causeOfDeath,
+      hospitalized: hospitalized,
+      hospitalizationDate: hospitalizationDate,
+      hospitalName: hospitalName,
+      hospitalAddress: hospitalAddress,
+      physicianName: physicianName,
+      physicianAddress: physicianAddress,
+      physicianPhone: physicianPhone,
+      familyDoctorName: familyDoctorName,
+      familyDoctorAddress: familyDoctorAddress,
+      familyDoctorPhone: familyDoctorPhone,
+      otherPhysicians: otherPhysicians,
+      occupation: occupation,
+      dateLastWorked: dateLastWorked,
+      employer: employer,
+      employerAddress: employerAddress,
+      employerPhone: employerPhone,
+      kinName: kinName,
+      kinAddress: kinAddress,
+      kinPhone: kinPhone,
+      kinRelationship: kinRelationship,
+      signature: signature,
+      signatureDate: date,
+    };
+
+    // Send the data to the server
+
+    // Refetch the data from the server
+
+    return;
+  };
+
   return (
     <div>
       {/* Header */}

From 75a40f0e5986beaf524ee2f6519c3b3b34282f42 Mon Sep 17 00:00:00 2001
From: BruhSomeoneTookMySpicyUsername <geraldyywang@gmail.com>
Date: Thu, 30 Nov 2023 13:59:55 -0500
Subject: [PATCH 4/5] created FormQuestion.js component for question/text
 inputs in forms

---
 src/components/FormQuestion.js                |  17 +++
 .../forms/CertificationOfDeathForm.js         | 137 ++++++++++++++++++
 2 files changed, 154 insertions(+)
 create mode 100644 src/components/FormQuestion.js

diff --git a/src/components/FormQuestion.js b/src/components/FormQuestion.js
new file mode 100644
index 0000000..5a26352
--- /dev/null
+++ b/src/components/FormQuestion.js
@@ -0,0 +1,17 @@
+const FormQuestion = ({ text, state, setState }) => {
+  return (
+    <div>
+      <p>{text}</p>
+      <TextField
+        id={state}
+        label={state}
+        variant="outlined"
+        onChange={(event) => {
+          setState(event.target.value);
+        }}
+      />
+    </div>
+  );
+};
+
+export default FormQuestion;
diff --git a/src/components/forms/CertificationOfDeathForm.js b/src/components/forms/CertificationOfDeathForm.js
index 4643433..5324e1e 100644
--- a/src/components/forms/CertificationOfDeathForm.js
+++ b/src/components/forms/CertificationOfDeathForm.js
@@ -1,3 +1,4 @@
+import { TextField } from "@mui/material";
 import { useState } from "react";
 
 const CertificationOfDeathForm = () => {
@@ -56,31 +57,167 @@ const CertificationOfDeathForm = () => {
           certifying the death of the insured.{" "}
         </h3>
         <p>Claim number: </p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <h3>
           I, the undersigned, hereby certify the Deceased was officially
           pronounced dead:
         </h3>
         <p>Full name of deceased</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Date of death (mo/day/yr)</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Time of death</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Immediate Cause of Death</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Due to a consequence of</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>When did symptoms first appear or accident happen (mo/day/yr)</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Cause of death</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Place of death (if institution or hospital, give name)</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Was an inquest held?</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Was an autopsy performed?</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
       </div>
 
       {/* Signature of Person Providing Certification */}
       <div>
         <h3>Signature of Person Providing Certification</h3>
         <p>Name</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Title</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Address</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Phone number</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Signature</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
         <p>Date (mo/day/yr)</p>
+        <TextField
+          id="claim-number"
+          label="Claim number"
+          variant="outlined"
+          onChange={(event) => {
+            setClaimNumber(event.target.value);
+          }}
+        />
       </div>
     </div>
   );

From 2f6f8d618085f588e7fa1ed88d4fcb44dd8a3cff Mon Sep 17 00:00:00 2001
From: BruhSomeoneTookMySpicyUsername <geraldyywang@gmail.com>
Date: Fri, 1 Dec 2023 16:34:58 -0500
Subject: [PATCH 5/5] Finished CertificationOfDeathForm and embedded in
 NewFormScreen, added to router at /new-form

---
 src/App.js                                    |   4 +-
 src/components/FormQuestion.js                |  14 +-
 .../forms/CertificationOfDeathForm.js         | 286 +++++++++---------
 .../forms/LifeClaimInformationRequestForm.js  |   5 +
 .../LifeClaimInitiationLenderStatementForm.js |   5 +
 src/screens/NewFormScreen.js                  |  12 +
 6 files changed, 182 insertions(+), 144 deletions(-)
 create mode 100644 src/screens/NewFormScreen.js

diff --git a/src/App.js b/src/App.js
index 7c7591a..92e870f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,12 @@
 import "./App.css";
-import {BrowserRouter, Routes, Route} from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { DarkModeProvider } from "./DarkModeContext.js";
 import LoginScreen from "./screens/LoginScreen";
 import ClaimDashboardScreen from "./screens/ClaimDashboardScreen.js";
 import NotFoundScreen from "./screens/NotFoundScreen.js";
 import NewClaimScreen from "./screens/NewClaimScreen";
 import ClaimFilesScreen from "./screens/ClaimFilesScreen";
+import NewFormScreen from "./screens/NewFormScreen.js";
 
 function App() {
   return (
@@ -17,6 +18,7 @@ function App() {
           <Route path="*" element={<NotFoundScreen />} />
           <Route path="/new-claim" element={<NewClaimScreen />} />
           <Route path="/claim-files" element={<ClaimFilesScreen />} />
+          <Route path="/new-form" element={<NewFormScreen />} />
 
           {/* To be updated */}
           {/* <Route path="/claim/:claimNumber" element={<ClaimDashboardScreen />} /> */}
diff --git a/src/components/FormQuestion.js b/src/components/FormQuestion.js
index 5a26352..48acc5b 100644
--- a/src/components/FormQuestion.js
+++ b/src/components/FormQuestion.js
@@ -1,10 +1,18 @@
-const FormQuestion = ({ text, state, setState }) => {
+/* 
+Class intended to encapsulate a question and text input field for a form.
+*/
+
+import { TextField } from "@mui/material";
+
+const FormQuestion = ({ text, placeholderText, setState }) => {
+  let stateId = String(placeholderText).toLowerCase().replace(" ", "");
+
   return (
     <div>
       <p>{text}</p>
       <TextField
-        id={state}
-        label={state}
+        id={stateId}
+        label={placeholderText}
         variant="outlined"
         onChange={(event) => {
           setState(event.target.value);
diff --git a/src/components/forms/CertificationOfDeathForm.js b/src/components/forms/CertificationOfDeathForm.js
index 5324e1e..88fb3e3 100644
--- a/src/components/forms/CertificationOfDeathForm.js
+++ b/src/components/forms/CertificationOfDeathForm.js
@@ -1,5 +1,12 @@
-import { TextField } from "@mui/material";
+import {
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+} from "@mui/material";
 import { useState } from "react";
+import FormQuestion from "../FormQuestion";
 
 const CertificationOfDeathForm = () => {
   const [claimNumber, setClaimNumber] = useState("");
@@ -13,8 +20,8 @@ const CertificationOfDeathForm = () => {
   const [syptomsFirstAppeared, setSyptomsFirstAppeared] = useState("");
   const [causeOfDeath, setCauseOfDeath] = useState(""); // natural, accident, suicide, homicide, undetermined
   const [placeOfDeath, setPlaceOfDeath] = useState("");
-  const [inquest, setInquest] = useState(false);
-  const [autopsyPerformed, setAutopsyPerformed] = useState(false);
+  const [inquest, setInquest] = useState("");
+  const [autopsyPerformed, setAutopsyPerformed] = useState("");
 
   // Signature of Person Providing Certification
   const [signeeName, setSigneeName] = useState("");
@@ -24,6 +31,7 @@ const CertificationOfDeathForm = () => {
   const [signeeSignature, setSigneeSignature] = useState("");
   const [signatureDate, setSignatureDate] = useState("");
 
+  // TODO: Connect to backend and rest of app in next pr
   const handleSubmit = () => {
     const formData = {
       claimNumber: claimNumber,
@@ -44,6 +52,9 @@ const CertificationOfDeathForm = () => {
       signeeSignature: signeeSignature,
       signatureDate: signatureDate,
     };
+
+    // For now to show that the change works
+    console.log(formData);
   };
 
   return (
@@ -56,169 +67,164 @@ const CertificationOfDeathForm = () => {
           To be completed by attending physician, coroner or family doctor
           certifying the death of the insured.{" "}
         </h3>
-        <p>Claim number: </p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="Claim number: "
+          placeholderText="Claim number"
+          setState={setClaimNumber}
         />
+
         <h3>
           I, the undersigned, hereby certify the Deceased was officially
           pronounced dead:
         </h3>
-        <p>Full name of deceased</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
-        />
-        <p>Date of death (mo/day/yr)</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="Full name of deceased: "
+          placeholderText="Enter full name of deceased"
+          setState={setDeceasedName}
         />
-        <p>Time of death</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="Date of death (mo/day/yr): "
+          placeholderText="mo/day/yr"
+          setState={setDod}
         />
-        <p>Immediate Cause of Death</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <p>Time of death: </p>
+        <FormControl fullWidth>
+          <InputLabel>AM/PM</InputLabel>
+          <Select
+            value={timeOfDeath}
+            label="timeOfDeath"
+            onChange={(event) => {
+              setTimeOfDeath(event.target.value);
+            }}
+          >
+            <MenuItem value={10}>AM</MenuItem>
+            <MenuItem value={20}>PM</MenuItem>
+          </Select>
+        </FormControl>
+
+        <FormQuestion
+          text="Immediate Cause of Death: "
+          placeholderText="Cause of death"
+          setState={setImmediateCauseOfDeath}
         />
-        <p>Due to a consequence of</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="Due to a consequence of: "
+          placeholderText="How did the death happen?"
+          setState={setConsequenceOfDeath}
         />
-        <p>When did symptoms first appear or accident happen (mo/day/yr)</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="When did symptoms first appear or accident happen (mo/day/yr): "
+          placeholderText="When did symptoms first appear?"
+          setState={setSyptomsFirstAppeared}
         />
+
         <p>Cause of death</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
-        />
-        <p>Place of death (if institution or hospital, give name)</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+        <FormControl fullWidth>
+          <InputLabel>Cause of death</InputLabel>
+          <Select
+            value={causeOfDeath}
+            label="causeOfDeath"
+            onChange={(event) => {
+              setCauseOfDeath(event.target.value);
+            }}
+          >
+            <MenuItem value={10}>Natural</MenuItem>
+            <MenuItem value={20}>Accident</MenuItem>
+            <MenuItem value={30}>Suicide</MenuItem>
+            <MenuItem value={40}>Homicide</MenuItem>
+            <MenuItem value={50}>Undetermined</MenuItem>
+          </Select>
+        </FormControl>
+
+        <FormQuestion
+          text="Place of death (if institution or hospital, give name): "
+          placeholderText="Place of death"
+          setState={setPlaceOfDeath}
         />
+
         <p>Was an inquest held?</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
-        />
+        <FormControl fullWidth>
+          <InputLabel>Yes/No</InputLabel>
+          <Select
+            value={inquest}
+            label="inquest"
+            onChange={(event) => {
+              setInquest(event.target.value);
+            }}
+          >
+            <MenuItem value={10}>Yes</MenuItem>
+            <MenuItem value={20}>No</MenuItem>
+          </Select>
+        </FormControl>
+
         <p>Was an autopsy performed?</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
-        />
+        <FormControl fullWidth>
+          <InputLabel>Yes/No</InputLabel>
+          <Select
+            value={autopsyPerformed}
+            label="autopsy"
+            onChange={(event) => {
+              setAutopsyPerformed(event.target.value);
+            }}
+          >
+            <MenuItem value={10}>Yes</MenuItem>
+            <MenuItem value={20}>No</MenuItem>
+          </Select>
+        </FormControl>
       </div>
 
       {/* Signature of Person Providing Certification */}
       <div>
         <h3>Signature of Person Providing Certification</h3>
-        <p>Name</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="Name: "
+          placeholderText="Your name"
+          setState={setSigneeName}
         />
-        <p>Title</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="Title: "
+          placeholderText="Your title"
+          setState={setSigneeTitle}
         />
-        <p>Address</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="Address: "
+          placeholderText="Your address"
+          setState={setSigneeAddress}
         />
-        <p>Phone number</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="Phone number: "
+          placeholderText="Your phone number"
+          setState={setSigneePhoneNumber}
         />
-        <p>Signature</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        {/* For now, the signature will be typed. In future versions, we can implement digital wet signature */}
+        <FormQuestion
+          text="Signature: "
+          placeholderText="Your signature"
+          setState={setSigneeSignature}
         />
-        <p>Date (mo/day/yr)</p>
-        <TextField
-          id="claim-number"
-          label="Claim number"
-          variant="outlined"
-          onChange={(event) => {
-            setClaimNumber(event.target.value);
-          }}
+
+        <FormQuestion
+          text="Date Signed: "
+          placeholderText="Today's date"
+          setState={setSignatureDate}
         />
       </div>
+
+      {/* Submit Button */}
+      <Button variant="contained" onClick={handleSubmit}>
+        Submit
+      </Button>
     </div>
   );
 };
diff --git a/src/components/forms/LifeClaimInformationRequestForm.js b/src/components/forms/LifeClaimInformationRequestForm.js
index e991e19..449970d 100644
--- a/src/components/forms/LifeClaimInformationRequestForm.js
+++ b/src/components/forms/LifeClaimInformationRequestForm.js
@@ -1,3 +1,8 @@
+/*
+This form is meant to be filled out by the claimant and sent to the insurance company.
+Will be completed after the MVP is completed.
+*/
+
 import { useState } from "react";
 
 const LifeClaimInformationRequestForm = () => {
diff --git a/src/components/forms/LifeClaimInitiationLenderStatementForm.js b/src/components/forms/LifeClaimInitiationLenderStatementForm.js
index 150c606..7f4e588 100644
--- a/src/components/forms/LifeClaimInitiationLenderStatementForm.js
+++ b/src/components/forms/LifeClaimInitiationLenderStatementForm.js
@@ -1,3 +1,8 @@
+/*
+This form is used to initiate a life claim. It is filled out by the lender and sent to the insurance company.
+Will be completed after the MVP is completed.
+*/
+
 import { useState } from "react";
 
 const LifeClaimInitiationLenderStatementForm = () => {
diff --git a/src/screens/NewFormScreen.js b/src/screens/NewFormScreen.js
new file mode 100644
index 0000000..d0ffdde
--- /dev/null
+++ b/src/screens/NewFormScreen.js
@@ -0,0 +1,12 @@
+import CertificationOfDeathForm from "../components/forms/CertificationOfDeathForm";
+const NewFormScreen = () => {
+  return (
+    <div>
+      <h1>Please fill out the following form:</h1>
+      {/* The following form is hardcoded for now. To handle multiple forms in the future, we will determine it by props */}
+      <CertificationOfDeathForm />
+    </div>
+  );
+};
+
+export default NewFormScreen;