diff --git a/package-lock.json b/package-lock.json
index 2399356..be5ee4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "react-datepicker": "^4.20.0",
         "react-dom": "^18.2.0",
         "react-image-crop": "^10.1.8",
+        "react-router-dom": "^6.17.0",
         "react-scripts": "5.0.1",
         "react-select": "^5.7.7",
         "web-vitals": "^2.1.4",
@@ -3394,6 +3395,14 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz",
+      "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14868,6 +14877,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz",
+      "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==",
+      "dependencies": {
+        "@remix-run/router": "1.10.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz",
+      "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==",
+      "dependencies": {
+        "@remix-run/router": "1.10.0",
+        "react-router": "6.17.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -20393,6 +20432,11 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
+    "@remix-run/router": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz",
+      "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -28594,6 +28638,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz",
+      "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==",
+      "requires": {
+        "@remix-run/router": "1.10.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz",
+      "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==",
+      "requires": {
+        "@remix-run/router": "1.10.0",
+        "react-router": "6.17.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index c00915e..5c85f9a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "react-datepicker": "^4.20.0",
     "react-dom": "^18.2.0",
     "react-image-crop": "^10.1.8",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.7",
     "web-vitals": "^2.1.4",
diff --git a/src/App.tsx b/src/App.tsx
index 4cf5b4d..c4a9e09 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,29 @@
 import FormExample from "./forms/FormExample";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import JobForm from "./forms/JobForm";
+import Home from "./Home/Home";
+import Nav from "./Home/Nav";
+import JobAction from "./forms/JobAction";
+import EmployeeApproval from "./forms/EmployeeApproval";
+import PayrollServices from "./forms/PayrollServices";
+import ResearchFinancial from "./forms/ResearchFinancial";
+import CasualJobs from "./forms/CasualJobs";
 
 function App() {
   return (
-    <div className="p-8">
-      <FormExample />
-    </div>
+    <Router>
+      <Nav />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/jobForm" element={<JobForm />} />
+        <Route path="/casualJobs" element={<CasualJobs />} />
+        <Route path="/formExample" element={<FormExample />} />
+        <Route path="/jobAction" element={<JobAction />} />
+        <Route path="/employeeApproval" element={<EmployeeApproval />} />
+        <Route path="/payrollServices" element={<PayrollServices />} />
+        <Route path="/researchFinancial" element={<ResearchFinancial />} />
+      </Routes>
+    </Router>
   );
 }
 
diff --git a/src/Home/Home.js b/src/Home/Home.js
new file mode 100644
index 0000000..f4b1478
--- /dev/null
+++ b/src/Home/Home.js
@@ -0,0 +1,42 @@
+// src/components/Home.js
+import React from "react";
+import Page from "./Page";
+import { Link } from "react-router-dom";
+
+function Home() {
+  return (
+    <Page>
+      <div>
+        <h1 className="text-2xl font-bold leading-7">
+          Welcome to the RDS Forms project{" "}
+        </h1>
+
+        <ul className="justify-center font-medium mb-10 ">
+          <li className="hover:text-red-500">
+            <Link to="/formExample">Form Example</Link>
+          </li>
+        </ul>
+        <h2 className="text-xl font-bold leading-7">Job Forms example forms</h2>
+        <ul className="justify-center font-medium ">
+          <li className="hover:text-red-500">
+            <Link to="/casualJobs">Casual Jobs</Link>
+          </li>
+          <li className="hover:text-red-500">
+            <Link to="/jobAction">Job Action</Link>
+          </li>
+          <li className="hover:text-red-500">
+            <Link to="/employeeApproval">Employee Approval</Link>
+          </li>
+          <li className="hover:text-red-500">
+            <Link to="/payrollServices">Payroll Services</Link>
+          </li>
+          <li className="hover:text-red-500">
+            <Link to="/researchFinancial">Research Financial</Link>
+          </li>
+        </ul>
+      </div>
+    </Page>
+  );
+}
+
+export default Home;
diff --git a/src/Home/Nav.js b/src/Home/Nav.js
new file mode 100644
index 0000000..417d56b
--- /dev/null
+++ b/src/Home/Nav.js
@@ -0,0 +1,72 @@
+// src/components/Home.js
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+
+function Nav() {
+  const [activePage, setActivePage] = useState("home");
+  const location = useLocation();
+
+  React.useEffect(() => {
+    const path = location.pathname;
+    if (path === "/") setActivePage("home");
+    else if (path === "/formExample") setActivePage("formExample");
+    else if (path === "/casualJobs") setActivePage("casualJobs");
+    else if (path === "/jobAction") setActivePage("jobAction");
+    else if (path === "/employeeApproval") setActivePage("employeeApproval");
+    else if (path === "/payrollServices") setActivePage("payrollServices");
+    else if (path === "/researchFinancial") setActivePage("researchFinancial");
+  }, [location.pathname]);
+
+  return (
+    <nav className=" p-4 mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+      <ul className="flex justify-center font-medium ">
+        <li className={` mx-2 ${activePage === "home" ? "text-red-500" : ""}`}>
+          <Link to="/">Home</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "formExample" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/formExample">Form Example</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "casualJobs" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/casualJobs">Casual Jobs</Link>
+        </li>
+        <li
+          className={`mx-2 ${activePage === "jobAction" ? "text-red-500" : ""}`}
+        >
+          <Link to="/jobAction">Job Action</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "employeeApproval" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/employeeApproval">Employee Approval</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "payrollServices" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/payrollServices">Payroll Services</Link>
+        </li>
+        <li
+          className={`mx-2 ${
+            activePage === "researchFinancial" ? "text-red-500" : ""
+          }`}
+        >
+          <Link to="/researchFinancial">Research Financial</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Nav;
diff --git a/src/Home/Page.js b/src/Home/Page.js
new file mode 100644
index 0000000..74e3997
--- /dev/null
+++ b/src/Home/Page.js
@@ -0,0 +1,12 @@
+// src/components/Home.js
+import React from "react";
+
+function Page({ children }) {
+  return (
+    <div className=" mx-auto p-6 mb-4 max-w-7xl px-6 py-8 md:mx-auto md:w-full md:py-10 md:px-14">
+      {children}
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/components/AutoSuggest/AutoSuggest.js b/src/components/AutoSuggest/AutoSuggest.js
index c7205c8..6fe57c8 100644
--- a/src/components/AutoSuggest/AutoSuggest.js
+++ b/src/components/AutoSuggest/AutoSuggest.js
@@ -1,17 +1,28 @@
 import { useField, ErrorMessage } from "formik";
 import Select from "react-select";
-import { primaryStyles, textStyles } from "../../styles/styles";
+import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles";
 import { getMaxWidthClass } from "../../helpers/optionClasses";
 import TextError from "../TextError/TextError";
 
 const AutoSuggest = (props) => {
-  const { label, name, options, maxWidth, helper, required, ...rest } = props;
+  const {
+    label,
+    name,
+    options,
+    maxWidth,
+    helper,
+    disabled = false,
+    required,
+    ...rest
+  } = props;
   const fieldMaxWidth = getMaxWidthClass(maxWidth);
   const requiredClass = required ? primaryStyles.required : "";
   const [field] = useField(name);
 
   return (
-    <div className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}>
+    <div
+      className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}
+    >
       <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
@@ -28,7 +39,8 @@ const AutoSuggest = (props) => {
         onBlur={field.onBlur}
         isSearchable={true}
         isClearable={true}
-        className="[&>div]:border [&>div]:border-cu-black-200 [&>div]:rounded-md [&>div]:placeholder:text-cu-black-400 [&>div]:pr-0.5 [&>div]:py-0.5 [&>div]:pl-1.5"
+        isDisabled={disabled}
+        className={`[&>div]:border [&>div]:border-cu-black-200 [&>div]:rounded-md [&>div]:placeholder:text-cu-black-400 [&>div]:pr-0.5 [&>div]:py-0.5 [&>div]:pl-1.5 ${fieldStyles.disabled}`}
       />
 
       <ErrorMessage name={name} component={TextError} />
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index f3c16a2..f8d1f53 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -1,19 +1,18 @@
-import React from 'react'
-import { Field, ErrorMessage } from 'formik'
-import TextError from '../TextError/TextError'
-import { primaryStyles, textStyles, fieldStyles } from '../../styles/styles'
+import React from "react";
+import { Field, ErrorMessage } from "formik";
+import TextError from "../TextError/TextError";
+import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles";
 
 function Checkbox(props) {
-  const { label, name, options, isInline, helper, required, ...rest } = props
-  const requiredClass = required ? primaryStyles.required : ''
-  const displayInline = isInline ? fieldStyles.horizontalOptions : fieldStyles.verticalOptions
+  const { label, name, options, isInline, helper, required, ...rest } = props;
+  const requiredClass = required ? primaryStyles.required : "";
+  const displayInline = isInline
+    ? fieldStyles.horizontalOptions
+    : fieldStyles.verticalOptions;
 
   return (
     <div className={`${primaryStyles.wrapper} ${requiredClass} form-control`}>
-      <label
-        htmlFor={name}
-        className={textStyles.label}
-      >
+      <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
 
@@ -22,27 +21,32 @@ function Checkbox(props) {
       <fieldset className={displayInline}>
         <Field name={name} {...rest}>
           {({ field }) => {
-            return options.map(option => {
-              return (
-                <div key={option.value} className={fieldStyles.radioCheck}>
-                  <input
-                    type="checkbox"
-                    id={option.value}
-                    {...field}
-                    value={option.value}
-                    checked={field.value.includes(option.value)}
-                  />
-                  <label htmlFor={option.value}>{option.key}</label>
-                </div>
-              )
-            })
+            return (
+              options &&
+              options.map((option) => {
+                return (
+                  <div key={option.value} className={fieldStyles.radioCheck}>
+                    <input
+                      type="checkbox"
+                      id={option.value}
+                      {...field}
+                      {...rest}
+                      value={option.value}
+                      checked={field.value.includes(option.value)}
+                      className={fieldStyles.disabledCheckbox}
+                    />
+                    <label htmlFor={option.value}>{option.key}</label>
+                  </div>
+                );
+              })
+            );
           }}
         </Field>
       </fieldset>
 
       <ErrorMessage name={name} component={TextError} />
     </div>
-  )
+  );
 }
 
-export default Checkbox
+export default Checkbox;
diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js
deleted file mode 100644
index 12511e4..0000000
--- a/src/components/DatePicker/DatePicker.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react'
-import { Field, ErrorMessage } from 'formik'
-import TextError from '../TextError/TextError'
-import DateView from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-import { primaryStyles, textStyles, fieldStyles } from '../../styles/styles'
-
-function DatePicker(props) {
-  const { label, name, helper, required, ...rest } = props;
-  const requiredClass = required ? primaryStyles.required : ''
-
-  return (
-    <div className={`${primaryStyles.wrapper} ${requiredClass} form-control`}>
-      <label
-        htmlFor={name}
-        className={textStyles.label}
-      >
-        {label} {required && <span className={textStyles.required}>*</span>}
-      </label>
-
-      {helper && <div className={textStyles.helper}>{helper}</div>}
-
-      <Field name={name}>
-        {({ form, field }) => {
-          const { setFieldValue } = form
-          const { value } = field
-
-          return (
-            <DateView
-              id={name}
-              {...field}
-              {...rest}
-              selected={value}
-              onChange={val => setFieldValue(name, val)}
-              className={fieldStyles.input}
-            />
-          )
-        }}
-      </Field>
-
-      <ErrorMessage name={name} component={TextError} />
-    </div>
-  )
-}
-
-export default DatePicker
\ No newline at end of file
diff --git a/src/components/DatePicker/DateTimePicker.js b/src/components/DatePicker/DateTimePicker.js
new file mode 100644
index 0000000..4d765ed
--- /dev/null
+++ b/src/components/DatePicker/DateTimePicker.js
@@ -0,0 +1,65 @@
+import React from "react";
+import { ErrorMessage, useField } from "formik";
+import TextError from "../TextError/TextError";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles";
+import { getMaxWidthClass } from "../../helpers/optionClasses";
+
+function DateTimePicker(props) {
+  const {
+    label,
+    name,
+    helper,
+    required,
+    showTime,
+    dateFormat = "MMMM d, yyyy",
+    timeFormat = "HH:mm",
+    placeholder,
+    customMinDate,
+    maxWidth,
+    ...rest
+  } = props;
+  const requiredClass = required ? primaryStyles.required : "";
+  const [field, , helpers] = useField(name);
+  const { setValue, setTouched, setError } = helpers;
+
+  const fieldMaxWidth = getMaxWidthClass(maxWidth);
+
+  const setFieldProps = (date) => {
+    setValue(date);
+    setTouched(true);
+    setError(undefined);
+  };
+
+  return (
+    <div
+      className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}
+    >
+      <label htmlFor={name} className={textStyles.label}>
+        {label} {required && <span className={textStyles.required}>*</span>}
+      </label>
+
+      {helper && <div className={textStyles.helper}>{helper}</div>}
+
+      <DatePicker
+        selected={field.value}
+        name={name}
+        onChange={(date) => {
+          setFieldProps(date);
+        }}
+        showTimeSelect={showTime}
+        timeFormat={timeFormat}
+        dateFormat={dateFormat}
+        minDate={customMinDate}
+        placeholderText={placeholder}
+        className={`${fieldStyles.input} ${fieldStyles.disabled} w-full`}
+        {...rest}
+      />
+
+      <ErrorMessage name={name} component={TextError} />
+    </div>
+  );
+}
+
+export default DateTimePicker;
diff --git a/src/components/FieldControl/FieldControl.js b/src/components/FieldControl/FieldControl.js
index f491ac2..c935a3b 100644
--- a/src/components/FieldControl/FieldControl.js
+++ b/src/components/FieldControl/FieldControl.js
@@ -4,7 +4,7 @@ import TextArea from "../TextArea/TextArea";
 import Select from "../Select/Select";
 import Radio from "../Radio/Radio";
 import Checkbox from "../Checkbox/Checkbox";
-import DatePicker from "../DatePicker/DatePicker";
+import DateTimePicker from "../DatePicker/DateTimePicker";
 import AutoSuggest from "../AutoSuggest/AutoSuggest";
 import FileUpload from '../FileUpload/FileUpload';
 import ImageUpload from '../ImageUpload/ImageUpload';
@@ -24,7 +24,7 @@ function FieldControl(props) {
     case "checkbox":
       return <Checkbox {...rest} />;
     case "date":
-      return <DatePicker {...rest} />;
+      return <DateTimePicker {...rest} />;
     case "autosuggest":
       return <AutoSuggest {...rest} />;
     case 'fileUpload':
diff --git a/src/components/FileUpload/FileUpload.js b/src/components/FileUpload/FileUpload.js
index 1fffdbd..9d6df70 100644
--- a/src/components/FileUpload/FileUpload.js
+++ b/src/components/FileUpload/FileUpload.js
@@ -1,18 +1,18 @@
-import { ErrorMessage, useFormik } from 'formik'
-import TextError from '../TextError/TextError'
-import { fieldStyles, primaryStyles, textStyles } from '../../styles/styles'
-import { getMaxWidthClass } from '../../helpers/optionClasses'
-import fileUploadValidationSchema from "../../helpers/fileUploadValidationSchema"
+import { ErrorMessage, useFormik } from "formik";
+import TextError from "../TextError/TextError";
+import { fieldStyles, primaryStyles, textStyles } from "../../styles/styles";
+import { getMaxWidthClass } from "../../helpers/optionClasses";
+import fileUploadValidationSchema from "../../helpers/fileUploadValidationSchema";
 
 function FileUpload(props) {
-  const { label, name, maxWidth, helper, required, ...rest } = props
+  const { label, name, maxWidth, helper, required, ...rest } = props;
   const fieldMaxWidth = getMaxWidthClass(maxWidth);
-  const requiredClass = required ? primaryStyles.required : ''
+  const requiredClass = required ? primaryStyles.required : "";
 
   const initialValues = {
     file: null,
   };
-  const validationSchema = fileUploadValidationSchema
+  const validationSchema = fileUploadValidationSchema;
   const onSubmit = (values) => {
     // You can handle the file here, e.g., upload it to a server
     console.log("Uploaded file:", values.file);
@@ -24,11 +24,10 @@ function FileUpload(props) {
     onSubmit,
   });
   return (
-    <div className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}>
-      <label
-        htmlFor={name}
-        className={textStyles.label}
-      >
+    <div
+      className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}
+    >
+      <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
 
@@ -38,11 +37,12 @@ function FileUpload(props) {
         type="file"
         id="file"
         name="file"
-        className={fieldStyles.uploads}
+        className={`${fieldStyles.uploads} ${fieldStyles.disabledUpload}`}
         onChange={(event) => {
           const selectedFile = event.currentTarget.files?.[0];
           formik.setFieldValue("file", selectedFile);
         }}
+        {...rest}
         onBlur={formik.handleBlur}
       />
 
@@ -52,7 +52,7 @@ function FileUpload(props) {
 
       <ErrorMessage name={name} component={TextError} />
     </div>
-  )
+  );
 }
 
-export default FileUpload
+export default FileUpload;
diff --git a/src/components/ImageUpload/ImageUpload.js b/src/components/ImageUpload/ImageUpload.js
index 6a892c2..6014e89 100644
--- a/src/components/ImageUpload/ImageUpload.js
+++ b/src/components/ImageUpload/ImageUpload.js
@@ -1,18 +1,18 @@
-import { ErrorMessage, useFormik } from 'formik'
-import TextError from '../TextError/TextError'
-import { fieldStyles, primaryStyles, textStyles } from '../../styles/styles'
-import { getMaxWidthClass } from '../../helpers/optionClasses'
-import imageUploadValidationSchema from "../../helpers/imageUploadValidationSchema"
+import { ErrorMessage, useFormik } from "formik";
+import TextError from "../TextError/TextError";
+import { fieldStyles, primaryStyles, textStyles } from "../../styles/styles";
+import { getMaxWidthClass } from "../../helpers/optionClasses";
+import imageUploadValidationSchema from "../../helpers/imageUploadValidationSchema";
 
 function ImageUpload(props) {
-  const { label, name, maxWidth, helper, required, ...rest } = props
+  const { label, name, maxWidth, helper, required, ...rest } = props;
   const fieldMaxWidth = getMaxWidthClass(maxWidth);
-  const requiredClass = required ? primaryStyles.required : ''
+  const requiredClass = required ? primaryStyles.required : "";
 
   const initialValues = {
     file: null,
   };
-  const validationSchema = imageUploadValidationSchema
+  const validationSchema = imageUploadValidationSchema;
   const onSubmit = (values) => {
     // You can handle the file here, e.g., upload it to a server
     console.log("Uploaded file:", values.file);
@@ -24,11 +24,10 @@ function ImageUpload(props) {
     onSubmit,
   });
   return (
-    <div className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}>
-      <label
-        htmlFor={name}
-        className={textStyles.label}
-      >
+    <div
+      className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}
+    >
+      <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
 
@@ -38,11 +37,12 @@ function ImageUpload(props) {
         type="file"
         id="file"
         name="file"
-        className={fieldStyles.uploads}
+        className={`${fieldStyles.uploads} ${fieldStyles.disabledUpload}`}
         onChange={(event) => {
           const selectedFile = event.currentTarget.files?.[0]; // Use optional chaining
           formik.setFieldValue("file", selectedFile);
         }}
+        {...rest}
         onBlur={formik.handleBlur}
       />
 
@@ -52,7 +52,7 @@ function ImageUpload(props) {
 
       <ErrorMessage name={name} component={TextError} />
     </div>
-  )
+  );
 }
 
-export default ImageUpload
+export default ImageUpload;
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
index fba3afe..7c03153 100644
--- a/src/components/Input/Input.js
+++ b/src/components/Input/Input.js
@@ -1,19 +1,18 @@
-import { Field, ErrorMessage } from 'formik'
-import TextError from '../TextError/TextError'
-import { primaryStyles, textStyles, fieldStyles } from '../../styles/styles'
-import { getMaxWidthClass } from '../../helpers/optionClasses'
+import { Field, ErrorMessage } from "formik";
+import TextError from "../TextError/TextError";
+import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles";
+import { getMaxWidthClass } from "../../helpers/optionClasses";
 
 function Input(props) {
-  const { label, name, maxWidth, helper, required, ...rest } = props
+  const { label, name, maxWidth, helper, required, ...rest } = props;
   const fieldMaxWidth = getMaxWidthClass(maxWidth);
-  const requiredClass = required ? primaryStyles.required : ''
+  const requiredClass = required ? primaryStyles.required : "";
 
   return (
-    <div className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}>
-      <label
-        htmlFor={name}
-        className={textStyles.label}
-      >
+    <div
+      className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}
+    >
+      <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
 
@@ -22,13 +21,13 @@ function Input(props) {
       <Field
         id={name}
         name={name}
-        className={fieldStyles.input}
+        className={`${fieldStyles.input} ${fieldStyles.disabled}`}
         {...rest}
       />
 
       <ErrorMessage name={name} component={TextError} />
     </div>
-  )
+  );
 }
 
-export default Input
+export default Input;
diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
index 8368c4f..9c47556 100644
--- a/src/components/Radio/Radio.js
+++ b/src/components/Radio/Radio.js
@@ -1,19 +1,18 @@
-import React from 'react'
-import { Field, ErrorMessage } from 'formik'
-import TextError from '../TextError/TextError'
-import { primaryStyles, textStyles, fieldStyles } from '../../styles/styles'
+import React from "react";
+import { Field, ErrorMessage } from "formik";
+import TextError from "../TextError/TextError";
+import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles";
 
 function Radio(props) {
-  const { label, name, options, isInline, helper, required, ...rest } = props
-  const requiredClass = required ? primaryStyles.required : ''
-  const displayInline = isInline ? fieldStyles.horizontalOptions : fieldStyles.verticalOptions
+  const { label, name, options, isInline, helper, required, ...rest } = props;
+  const requiredClass = required ? primaryStyles.required : "";
+  const displayInline = isInline
+    ? fieldStyles.horizontalOptions
+    : fieldStyles.verticalOptions;
 
   return (
     <div className={`${primaryStyles.wrapper} ${requiredClass} form-control`}>
-      <label
-        htmlFor={name}
-        className={textStyles.label}
-      >
+      <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
 
@@ -22,27 +21,29 @@ function Radio(props) {
       <fieldset className={displayInline}>
         <Field name={name} {...rest}>
           {({ field }) => {
-            return options.map(option => {
+            return options.map((option) => {
               return (
                 <div key={option.value} className={fieldStyles.radioCheck}>
                   <input
                     type="radio"
                     id={option.value}
                     {...field}
+                    {...rest}
                     value={option.value}
                     checked={field.value === option.value}
+                    className={fieldStyles.disabledCheckbox}
                   />
                   <label htmlFor={option.value}>{option.key}</label>
                 </div>
-              )
-            })
+              );
+            });
           }}
         </Field>
       </fieldset>
 
       <ErrorMessage name={name} component={TextError} />
     </div>
-  )
+  );
 }
 
-export default Radio
+export default Radio;
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index 4dbd326..e2fb44a 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -1,43 +1,42 @@
-import React from 'react'
-import { Field, ErrorMessage } from 'formik'
-import TextError from '../TextError/TextError'
-import { primaryStyles, textStyles, fieldStyles } from '../../styles/styles'
-import { getMaxWidthClass } from '../../helpers/optionClasses'
+import React from "react";
+import { Field, ErrorMessage } from "formik";
+import TextError from "../TextError/TextError";
+import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles";
+import { getMaxWidthClass } from "../../helpers/optionClasses";
 
 function Select(props) {
-  const { label, name, options, maxWidth, helper, required, ...rest } = props
+  const { label, name, options, maxWidth, helper, required, ...rest } = props;
   const fieldMaxWidth = getMaxWidthClass(maxWidth);
-  const requiredClass = required ? primaryStyles.required : ''
+  const requiredClass = required ? primaryStyles.required : "";
 
   return (
-    <div className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}>
-      <label
-        htmlFor={name}
-        className={textStyles.label}
-      >
+    <div
+      className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}
+    >
+      <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
 
       {helper && <div className={textStyles.helper}>{helper}</div>}
 
       <Field
-        as='select'
+        as="select"
         id={name}
         name={name}
-        className={fieldStyles.input}
+        className={`${fieldStyles.input} ${fieldStyles.disabled}`}
         {...rest}
       >
-        {options.map(option => {
+        {options.map((option) => {
           return (
             <option key={option.value} value={option.value}>
               {option.key}
             </option>
-          )
+          );
         })}
       </Field>
       <ErrorMessage name={name} component={TextError} />
     </div>
-  )
+  );
 }
 
-export default Select
+export default Select;
diff --git a/src/components/TextArea/TextArea.js b/src/components/TextArea/TextArea.js
index 281499f..b08990c 100644
--- a/src/components/TextArea/TextArea.js
+++ b/src/components/TextArea/TextArea.js
@@ -1,19 +1,18 @@
-import { Field, ErrorMessage } from 'formik'
-import TextError from '../TextError/TextError'
-import { primaryStyles, textStyles, fieldStyles } from '../../styles/styles'
-import { getMaxWidthClass } from '../../helpers/optionClasses'
+import { Field, ErrorMessage } from "formik";
+import TextError from "../TextError/TextError";
+import { primaryStyles, textStyles, fieldStyles } from "../../styles/styles";
+import { getMaxWidthClass } from "../../helpers/optionClasses";
 
 function TextArea(props) {
-  const { label, name, maxWidth, helper, required, ...rest } = props
+  const { label, name, maxWidth, helper, required, ...rest } = props;
   const fieldMaxWidth = getMaxWidthClass(maxWidth);
-  const requiredClass = required ? primaryStyles.required : ''
+  const requiredClass = required ? primaryStyles.required : "";
 
   return (
-    <div className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}>
-      <label
-        htmlFor={name}
-        className={textStyles.label}
-      >
+    <div
+      className={`${primaryStyles.wrapper} ${fieldMaxWidth} ${requiredClass} form-control`}
+    >
+      <label htmlFor={name} className={textStyles.label}>
         {label} {required && <span className={textStyles.required}>*</span>}
       </label>
 
@@ -23,13 +22,13 @@ function TextArea(props) {
         as="textarea"
         id={name}
         name={name}
-        className={fieldStyles.input}
+        className={`${fieldStyles.input} ${fieldStyles.disabled}`}
         {...rest}
       />
 
       <ErrorMessage name={name} component={TextError} />
     </div>
-  )
+  );
 }
 
-export default TextArea
+export default TextArea;
diff --git a/src/forms/CasualJobs.js b/src/forms/CasualJobs.js
new file mode 100644
index 0000000..c52a89a
--- /dev/null
+++ b/src/forms/CasualJobs.js
@@ -0,0 +1,328 @@
+import React from "react";
+import Page from "../Home/Page";
+import { Formik, Form } from "formik";
+import FieldControl from "../components/FieldControl/FieldControl";
+import FieldWrapper from "../components/FieldWrapper/FieldWrapper";
+
+function CasualJobs() {
+  const formOnSubmit = async (values) => {
+    console.log(values);
+  };
+  const initialValues = { acknowledgement: [] };
+
+  const SelectStatus = [
+    {
+      value: "",
+      key: "Select Option",
+    },
+    {
+      value: "S",
+      key: "Saved",
+    },
+    {
+      value: "M",
+      key: "My",
+    },
+    {
+      value: "P",
+      key: "In-Progress",
+    },
+    {
+      value: "X",
+      key: "Cancelled",
+    },
+    {
+      value: "C",
+      key: "Complete",
+    },
+  ];
+
+  const JobType = [
+    {
+      value: "1",
+      key: "Job Type 1 ",
+    },
+    {
+      value: "2",
+      key: "Job Type 2",
+    },
+    {
+      value: "3",
+      key: "Job Type 3",
+    },
+    {
+      value: "4",
+      key: "Job Type 4",
+    },
+    {
+      value: "5",
+      key: "Job Type 5",
+    },
+    {
+      value: "6",
+      key: "Job Type 6",
+    },
+  ];
+
+  return (
+    <Page>
+      <h3 className="mb-8 border-b pb-4 text-2xl font-bold text-gray-900">
+        New Payroll Profile
+      </h3>
+      <Formik initialValues={initialValues} onSubmit={formOnSubmit}>
+        {(formik) => (
+          <Form>
+            <div>
+              <h4 className="mb-8 border-b pb-4 text-2xl font-bold text-gray-900">
+                Section A: Enter Basic Information
+              </h4>
+            </div>
+
+            <FieldControl
+              control="select"
+              label="Department"
+              name="department"
+              options={JobType}
+              required
+            />
+
+            <FieldWrapper cols={2}>
+              <FieldControl
+                control="date"
+                label="Start Date"
+                name="startDate"
+                placeholder="MMMM d, yyyy , --:--"
+              />
+
+              <FieldControl
+                control="date"
+                label="End Date"
+                name="endDate"
+                placeholder="MMMM d, yyyy , --:--"
+              />
+            </FieldWrapper>
+
+            <div>
+              <h4 className="mb-8 border-b pb-4 text-2xl font-bold text-gray-900">
+                Section B: Payment Type
+              </h4>
+            </div>
+
+            <FieldControl
+              control="radio"
+              label="Payment Type"
+              name="paymentType"
+              options={[
+                {
+                  value: "1",
+                  key: "Recurring",
+                },
+                {
+                  value: "2",
+                  key: "Hourly",
+                },
+                {
+                  value: "3",
+                  key: "One-Time",
+                },
+              ]}
+              maxWidth="md"
+            />
+            <FieldControl
+              control="select"
+              label="Job Type"
+              name="jobType"
+              options={JobType}
+              maxWidth="md"
+            />
+
+            <div>
+              <h4 className="mb-8 border-b pb-4 text-2xl font-bold text-gray-900">
+                Section C: Funding Details (FOAP)
+              </h4>
+            </div>
+
+            <FieldControl
+              control="select"
+              label="Select an Index"
+              name="selectIndex"
+              options={SelectStatus}
+            />
+            <FieldControl
+              control="input"
+              label="Fund"
+              name="fund"
+              type="number"
+              placeholder="Enter fund amount"
+              required
+            />
+
+            <FieldControl
+              control="select"
+              label="Account"
+              name="selectIndex"
+              options={SelectStatus}
+            />
+
+            <FieldControl
+              control="input"
+              label="Org"
+              name="org"
+              type="text"
+              placeholder="Enter Org "
+              // value={foapOrgnCode}
+              required
+            />
+
+            <FieldControl
+              control="input"
+              label="Program"
+              name="program"
+              type="text"
+              placeholder="Enter Program"
+              // value={foapProgCode}
+              required
+            />
+
+            <FieldControl
+              control="input"
+              label="Funding Source Allocation (%)"
+              name="fundingSourceAllocation"
+              type="number"
+              placeholder="Enter Funding Source Allocation"
+              required
+            />
+
+            <FieldWrapper cols={2}>
+              <FieldControl
+                control="input"
+                label="Activity Code"
+                name="activityCode"
+                type="text"
+                placeholder=" Code"
+              />
+
+              <FieldControl
+                control="input"
+                label="Activity"
+                name="activity"
+                type="text"
+                placeholder="Name"
+                value="ftvActivity.label"
+                disabled
+              />
+            </FieldWrapper>
+
+            <FieldControl
+              control="input"
+              label="Funding Source Allocation (%)"
+              name="fundingSourceAllocation"
+              type="number"
+              placeholder="Enter Funding Source Allocation"
+              required
+            />
+
+            <FieldControl
+              control="radio"
+              label="Add a second funding source"
+              name="secondFundSource"
+              options={[
+                {
+                  value: "1",
+                  key: "Yes",
+                },
+              ]}
+            />
+
+            <div>
+              <h4 className="mb-8 border-b pb-4 text-2xl font-bold text-gray-900">
+                Section D: Employee Information
+              </h4>
+            </div>
+
+            <FieldWrapper cols={3}>
+              <FieldControl
+                control="input"
+                label="Employee ID"
+                name="org"
+                type="text"
+                placeholder="Employee ID"
+                required
+              />
+              <FieldControl
+                control="input"
+                label="First / Chosen Name"
+                name="org"
+                type="text"
+                placeholder="First / Chosen Name "
+                value="Banner First Name"
+                disabled
+              />
+
+              <FieldControl
+                control="input"
+                label="Last Name"
+                name="org"
+                type="text"
+                placeholder="Last Name"
+                value="Banner Last Name"
+                disabled
+              />
+            </FieldWrapper>
+
+            <FieldControl
+              control="radio"
+              label="Action"
+              name="action"
+              options={[
+                {
+                  value: "1",
+                  key: "Yes",
+                },
+                {
+                  value: "0",
+                  key: "No",
+                },
+              ]}
+              required
+            />
+
+            <FieldControl
+              control="input"
+              label="Comment"
+              name="comment"
+              type="text"
+              placeholder="Comment"
+            />
+
+            <h4 className="mb-8 border-b pb-4 text-2xl font-bold text-gray-900">
+              Section G: Acknowledgements
+            </h4>
+            <FieldControl
+              control="checkbox"
+              name="acknowledgement"
+              label="I acknowledge the statements above."
+              options={[
+                {
+                  key: "yes",
+                  value: "yes",
+                },
+              ]}
+              required
+            />
+
+            <button
+              type="submit"
+              aria-label="Submit"
+              className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
+            >
+              Submit
+            </button>
+          </Form>
+        )}
+      </Formik>
+    </Page>
+  );
+}
+
+export default CasualJobs;
diff --git a/src/forms/EmployeeApproval.js b/src/forms/EmployeeApproval.js
new file mode 100644
index 0000000..71d56a5
--- /dev/null
+++ b/src/forms/EmployeeApproval.js
@@ -0,0 +1,285 @@
+import React, { useState } from "react";
+import Page from "../Home/Page";
+import { Formik, Form } from "formik";
+import FieldControl from "../components/FieldControl/FieldControl";
+
+function EmployeeApproval() {
+  const [loading, setLoading] = useState(false);
+  const initialValues = {
+    // firstname: "",
+    // lastname: "",
+    // email: "",
+    // description: "",
+    // selectOption: "",
+    // radioOption: "",
+    // checkboxOption: [],
+    // birthDate: null,
+    // autoSuggestCountry: "",
+  };
+  const onSubmit = (values) => console.log("Form data", values);
+  const SelectStatus = [
+    {
+      value: "",
+      key: "Select Option",
+    },
+    {
+      value: "S",
+      key: "Saved",
+    },
+    {
+      value: "M",
+      key: "My",
+    },
+    {
+      value: "P",
+      key: "In-Progress",
+    },
+    {
+      value: "X",
+      key: "Cancelled",
+    },
+    {
+      value: "C",
+      key: "Complete",
+    },
+  ];
+
+  return (
+    <Page>
+      <Formik initialValues={initialValues} onSubmit={onSubmit}>
+        {(formik) => (
+          <Form>
+            <div>
+              <h3 className="mb-8 pb-4 text-2xl font-bold text-gray-900">
+                Employee Approval
+              </h3>
+            </div>
+            <div>
+              <h4 className="mb-4 border-b pb-4 text-2xl font-bold text-gray-900">
+                Filters
+              </h4>
+            </div>
+
+            {/* <Form.Select
+              label="Status"
+              name="status"
+              options={SelectStatus}
+              onChange={(event: any) =>
+                setSearchField({
+                  ...searchField,
+                  status: event?.target.value,
+                })
+              }
+            /> */}
+            <FieldControl
+              control="select"
+              label="Status"
+              name="status"
+              options={SelectStatus}
+              required
+              maxWidth="md"
+              placeholder="select an option..."
+            />
+
+            <button
+              name="search"
+              className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
+            >
+              {loading ? "Searching..." : "Search"}
+            </button>
+
+            <div>
+              <h4 className="mb-4 border-b py-4 text-2xl font-bold text-gray-900">
+                Select a requisition for more detail
+              </h4>
+            </div>
+
+            <table className="min-w-full table-fixed divide-y divide-gray-300">
+              <thead>
+                <tr>
+                  <th scope="col" className="relative px-7 sm:w-12 sm:px-6">
+                    <input
+                      type="checkbox"
+                      className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                    />
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Req#
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Job Description
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Payment Type
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Start Date
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    End Date
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Status
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Action
+                  </th>
+                </tr>
+              </thead>
+              {/* <tbody className="divide-y divide-gray-200 bg-white">
+                {requisitions &&
+                  requisitions.length > 0 &&
+                  requisitions.map((person: any) => (
+                    <tr key={person.apprId}>
+                      <td className="relative px-7 sm:w-12 sm:px-6">
+                        <input
+                          type="checkbox"
+                          className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                          value={person.apprId}
+                        />
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {person.requisition}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {person.jobTitle}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {person.paymentType}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {person.beginDate}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {person.endDate}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {person.statusDesc}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        <button
+                          className="text-cu-red"
+                          onClick={() => loadModal(person.requisition)}
+                        >
+                          View
+                        </button>
+
+                        <Modal
+                          modalOpen={modalOpen}
+                          setModalOpen={setModalOpen}
+                        >
+                          {modelData?.job && (
+                            <div>
+                              <h4 className="py-4 text-l font-bold text-gray-900">
+                                Job Details
+                              </h4>
+                              <dl className="divide-y divide-gray-100">
+                                <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                  <dt className="text-sm font-medium leading-6 text-gray-900">
+                                    Hourly Rate of Pay
+                                  </dt>
+                                  <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                    {modelData?.job.nzbjobrHourlyRate}
+                                  </dd>
+                                </div>
+                                <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                  <dt className="text-sm font-medium leading-6 text-gray-900">
+                                    Hours/Pay
+                                  </dt>
+                                  <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                    ${modelData?.job.nzbjobrHoursPerWeek}
+                                  </dd>
+                                </div>
+                                <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                  <dt className="text-sm font-medium leading-6 text-gray-900">
+                                    Total Amount / Pay
+                                  </dt>
+                                  <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                    ${modelData?.job.nzbjobrTotalHours}
+                                  </dd>
+                                </div>
+                                <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                  <dt className="text-sm font-medium leading-6 text-gray-900">
+                                    Total Amount
+                                  </dt>
+                                  <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                    ${modelData?.job.nzbjobrTotalAmountDue}
+                                  </dd>
+                                </div>
+                              </dl>
+                            </div>
+                          )}
+                        </Modal>
+                      </td>
+                    </tr>
+                  ))}
+              </tbody> */}
+            </table>
+
+            <div>
+              <h4 className="mb-4 border-b py-4 text-2xl font-bold text-gray-900">
+                Action
+              </h4>
+            </div>
+            <FieldControl
+              control="radio"
+              label="Action"
+              name="action"
+              options={[
+                {
+                  value: "1",
+                  key: "Accept Payment",
+                },
+                {
+                  value: "2",
+                  key: "Return for Correction",
+                },
+              ]}
+              required
+            />
+
+            <FieldControl
+              control="input"
+              label="Comment"
+              name="comment"
+              type="text"
+              placeholder="Comment"
+              required
+            />
+
+            <button
+              type="submit"
+              aria-label="Submit"
+              className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
+            >
+              Submit
+            </button>
+          </Form>
+        )}
+      </Formik>
+    </Page>
+  );
+}
+
+export default EmployeeApproval;
diff --git a/src/forms/FormExample.js b/src/forms/FormExample.js
index 0dc415a..8681119 100644
--- a/src/forms/FormExample.js
+++ b/src/forms/FormExample.js
@@ -3,7 +3,7 @@ import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import FieldControl from "../components/FieldControl/FieldControl";
 import FieldWrapper from "../components/FieldWrapper/FieldWrapper";
-import FormButton from "../components/FormButton/FormButton";
+import Page from "../Home/Page";
 
 function FormExample() {
   const dropdownOptions = [
@@ -62,7 +62,7 @@ function FormExample() {
   const onSubmit = (values) => console.log("Form data", values);
 
   return (
-    <>
+    <Page>
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
@@ -100,6 +100,7 @@ function FormExample() {
               helper="Enter a valid email"
               maxWidth="2xl"
               required
+              disabled
             />
 
             <FieldControl
@@ -111,6 +112,7 @@ function FormExample() {
               helper="Enter a description"
               maxWidth="md"
               required
+              disabled
             />
 
             <FieldControl
@@ -122,6 +124,7 @@ function FormExample() {
               required
               maxWidth="md"
               placeholder="Select a Country"
+              disabled
             />
 
             <FieldWrapper cols={2}>
@@ -133,6 +136,7 @@ function FormExample() {
                 helper="Please select a topic of your choosing"
                 required
                 maxWidth="md"
+                disabled
               />
               <FieldControl
                 control="autosuggest"
@@ -173,6 +177,7 @@ function FormExample() {
               helper="Please select a thing"
               isInline
               required
+              disabled
             />
 
             <FieldWrapper cols={3}>
@@ -183,6 +188,7 @@ function FormExample() {
                 options={checkboxOptions}
                 helper="Please select a thing"
                 required
+                disabled
               />
               <FieldControl
                 control="checkbox"
@@ -209,21 +215,30 @@ function FormExample() {
               label="Pick a date"
               name="birthDate"
               helper="Please specify your DOB"
-              required />
-
+              dateFormat="MMMM d, yyyy"
+              placeholder="MMMM d, yyyy , --:--"
+              customMinDate={new Date()}
+              showTime
+              required
+              maxWidth="md"
+              disabled
+            />
             <FieldControl
-              control='fileUpload'
-              label='File Upload'
-              name='fileUpload'
+              control="fileUpload"
+              label="File Upload"
+              name="fileUpload"
               helper="Please select a file for upload"
-              required />
+              required
+              disabled
+            />
 
             <FieldControl
-              control='imageUpload'
-              label='Image Upload'
-              name='imageUpload'
+              control="imageUpload"
+              label="Image Upload"
+              name="imageUpload"
               helper="Please select a image for upload"
-              required />
+              required
+            />
 
             {/* <h2 className="mb-4 text-2xl font-bold">Image Upload</h2>
             <ImageUpload />
@@ -233,19 +248,17 @@ function FormExample() {
             <h2 className="mb-4 text-2xl font-bold">Input</h2>
             <FileUpload /> */}
 
-            <FormButton />
-
-            {/* <button
+            <button
               type="submit"
               aria-label="Submit"
               className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
             >
               Submit
-            </button> */}
+            </button>
           </Form>
         )}
       </Formik>
-    </>
+    </Page>
   );
 }
 
diff --git a/src/forms/JobAction.js b/src/forms/JobAction.js
new file mode 100644
index 0000000..cd7bde1
--- /dev/null
+++ b/src/forms/JobAction.js
@@ -0,0 +1,603 @@
+import Page from "../Home/Page";
+import { useState } from "react";
+import { Formik, Form } from "formik";
+import FieldControl from "../components/FieldControl/FieldControl";
+import FieldWrapper from "../components/FieldWrapper/FieldWrapper";
+
+function JobAction() {
+  const formOnSubmit = async (values) => {
+    console.log(values);
+  };
+  const initialValues = {};
+  const [loading, setLoading] = useState(false);
+  // const [requisitions, setRequisitions] = useState([]);
+
+  const SelectStatus = [
+    {
+      value: "",
+      key: "Select Option",
+    },
+    {
+      value: "S",
+      key: "Saved",
+    },
+    {
+      value: "M",
+      key: "My",
+    },
+    {
+      value: "P",
+      key: "In-Progress",
+    },
+    {
+      value: "X",
+      key: "Cancelled",
+    },
+    {
+      value: "C",
+      key: "Complete",
+    },
+  ];
+
+  const ActionOption = [
+    {
+      value: "1",
+      key: "Correct",
+    },
+    {
+      value: "2",
+      key: "Approve",
+    },
+    {
+      value: "3",
+      key: "Return for Correction",
+    },
+    {
+      value: "4",
+      key: "Cancel Requisition",
+    },
+    {
+      value: "5",
+      key: "Terminate Payment",
+    },
+    {
+      value: "6",
+      key: "Extend Job",
+    },
+  ];
+
+  return (
+    <>
+      <Page>
+        <div className="space-y-6 bg-white px-4 py-8 md:px-0">
+          <h3 className="mb-8 pb-4 text-2xl font-bold text-gray-900">
+            Job Action Screen
+          </h3>
+
+          <Formik initialValues={initialValues} onSubmit={formOnSubmit}>
+            {(formik) => (
+              <Form>
+                <div>
+                  <h4 className="mb-4 border-b pb-4 text-2xl font-bold text-gray-900">
+                    Filters
+                  </h4>
+                </div>
+
+                <FieldControl
+                  control="select"
+                  label="Status"
+                  name="status"
+                  options={SelectStatus}
+                  required
+                  maxWidth="md"
+                  placeholder="select an option..."
+                />
+
+                <FieldWrapper cols={2}>
+                  <FieldControl
+                    control="date"
+                    label="Start Date"
+                    name="startDate"
+                    placeholder="Enter start date"
+                  />
+                  <FieldControl
+                    control="date"
+                    label="End Date"
+                    name="endDate"
+                    placeholder="Enter end date"
+                  />
+                </FieldWrapper>
+
+                <button
+                  name="search"
+                  className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
+                >
+                  {loading ? "Searching..." : "Search"}
+                </button>
+
+                <div>
+                  <h4 className="mb-4 border-b py-4 text-2xl font-bold text-gray-900">
+                    Select a requisition for more detail
+                  </h4>
+                </div>
+
+                <div className="mt-8 flow-root">
+                  <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                      <table className="min-w-full table-fixed divide-y divide-gray-300">
+                        <thead>
+                          <tr>
+                            <th
+                              scope="col"
+                              className="relative px-7 sm:w-12 sm:px-6"
+                            >
+                              <input
+                                type="checkbox"
+                                className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                              />
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              Req#
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              ID
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              Name
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              Job Description
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              Payment Type
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              Start Date
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              End Date
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              Status
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              Warnings
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              Current Approver
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                            >
+                              Action
+                            </th>
+                          </tr>
+                        </thead>
+                        {/* <tbody className="divide-y divide-gray-200 bg-white">
+                            {requisitions &&
+                              requisitions.length > 0 &&
+                              requisitions.map((person) => (
+                                <tr key={person.apprId}>
+                                  <td className="relative px-7 sm:w-12 sm:px-6">
+                                    <input
+                                      type="checkbox"
+                                      className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                                      value={person.apprId}
+                                    />
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.requisition}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.eid}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.name}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.jobTitle}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.paymentType}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.beginDate}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.endDate}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.statusDesc}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.errorList}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.currLevel}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    <button
+                                      className="text-cu-red"
+                                      onClick={() =>
+                                        loadModal(person.requisition)
+                                      }
+                                    >
+                                      View
+                                    </button>
+
+                                    <Modal
+                                      modalOpen={modalOpen}
+                                      setModalOpen={setModalOpen}
+                                    >
+                                      {modelData?.job && (
+                                        <div>
+                                          <h4 className="py-4 text-l font-bold text-gray-900">
+                                            Job Details
+                                          </h4>
+                                          <dl className="divide-y divide-gray-100">
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Department
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                MISSING
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Hourly Rate of Pay
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                {
+                                                  modelData?.job
+                                                    .nzbjobrHourlyRate
+                                                }
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Hours/Pay
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                $
+                                                {
+                                                  modelData?.job
+                                                    .nzbjobrHoursPerWeek
+                                                }
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Total Amount / Pay
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                $
+                                                {
+                                                  modelData?.job
+                                                    .nzbjobrTotalHours
+                                                }
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Total Amount
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                $
+                                                {
+                                                  modelData?.job
+                                                    .nzbjobrTotalAmountDue
+                                                }
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Approver Name
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                {modelData?.job.nzbjobrUserId}
+                                              </dd>
+                                            </div>
+                                          </dl>
+                                        </div>
+                                      )}
+
+                                      {modelData?.foaps?.length > 0 && (
+                                        <div>
+                                          <h4 className="mt-4 py-4 text-l font-bold text-gray-900">
+                                            Funding Details
+                                          </h4>
+                                          <table className="min-w-full table-fixed divide-y divide-gray-300">
+                                            <thead>
+                                              <tr>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Index#
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Fund
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Org
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Account
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Program
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Activity
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Allocation
+                                                </th>
+                                              </tr>
+                                            </thead>
+                                            <tbody className="divide-y divide-gray-200 bg-white">
+                                              {modelData?.foaps?.map(
+                                                (jobDetail: any) => (
+                                                  <tr key={jobDetail.index}>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        jobDetail.nzrjlabAccountIndexCode
+                                                      }
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        jobDetail.nzrjlabFundCode
+                                                      }
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        jobDetail.nzrjlabOrgnCode
+                                                      }
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        jobDetail.nzrjlabAcctCode
+                                                      }
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        jobDetail.nzrjlabProgCode
+                                                      }
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        jobDetail.nzrjlabActivityDate
+                                                      }
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {jobDetail.nzrjlabPercent}
+                                                    </td>
+                                                  </tr>
+                                                )
+                                              )}
+                                            </tbody>
+                                          </table>
+                                        </div>
+                                      )}
+
+                                      {modelData?.decisions?.length > 0 && (
+                                        <div>
+                                          <h4 className="mt-4 py-4 text-l font-bold text-gray-900">
+                                            Decision Details
+                                          </h4>
+                                          <table className="min-w-full table-fixed divide-y divide-gray-300">
+                                            <thead>
+                                              <tr>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Date
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Approver
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Role
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Decision
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Comments
+                                                </th>
+                                              </tr>
+                                            </thead>
+                                            <tbody className="divide-y divide-gray-200 bg-white">
+                                              {modelData?.decisions.map(
+                                                (decicionDetail: any) => (
+                                                  <tr key={decicionDetail.id}>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {decicionDetail.decnDate}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {decicionDetail.apprName}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        decicionDetail.apprLevelDesc
+                                                      }
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {decicionDetail.decnDesc}
+                                                    </td>
+                                                    <td className="whitespace-wrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        decicionDetail.decnComment
+                                                      }
+                                                    </td>
+                                                  </tr>
+                                                )
+                                              )}
+                                            </tbody>
+                                          </table>
+                                        </div>
+                                      )}
+                                    </Modal>
+                                  </td>
+                                </tr>
+                              ))}
+                          </tbody> */}
+                      </table>
+                      <p> Need to add content to table body</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="mb-4 border-b py-4 text-2xl font-bold text-gray-900">
+                    Action
+                  </h4>
+                </div>
+
+                <FieldControl
+                  control="radio"
+                  label="Action"
+                  name="action"
+                  options={ActionOption}
+                  helper="Please select the appropriate option"
+                />
+                <FieldControl
+                  control="input"
+                  label="Comment (optional)"
+                  name="comment"
+                  type="text"
+                  placeholder="Comment"
+                />
+                <FieldControl
+                  control="input"
+                  label="Requested Changes"
+                  name="requestedChanges"
+                  type="text"
+                  placeholder="Request Changes"
+                  required
+                />
+                <FieldControl
+                  control="input"
+                  label="Reason for Cancellation"
+                  name="reasonToCancell"
+                  type="text"
+                  placeholder="Reason"
+                  required
+                />
+                <FieldControl
+                  control="input"
+                  label="Reason for Cancellation"
+                  name="reasonToCancell"
+                  type="text"
+                  placeholder="Reason"
+                  required
+                />
+
+                <FieldControl
+                  control="date"
+                  label="Last Day Worked"
+                  name="lastDate"
+                />
+
+                <FieldControl
+                  control="input"
+                  label="Total hours worked in this job (Recurring jobs only)"
+                  name="totalHoursWorked"
+                  type="text"
+                  placeholder="Total hours worked"
+                  required
+                />
+                <FieldControl
+                  control="date"
+                  label="New End Date"
+                  name="newEndDate"
+                  placeholder="MMMM d, yyyy , --:--"
+                  isClearable
+                />
+                <FieldControl
+                  control="input"
+                  label="Comment (optional)"
+                  name="comment"
+                  type="text"
+                  placeholder="Comment"
+                />
+                <button
+                  type="submit"
+                  aria-label="Submit"
+                  className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
+                >
+                  Submit
+                </button>
+              </Form>
+            )}
+          </Formik>
+        </div>
+      </Page>
+    </>
+  );
+}
+
+export default JobAction;
diff --git a/src/forms/JobForm.js b/src/forms/JobForm.js
new file mode 100644
index 0000000..20dd10a
--- /dev/null
+++ b/src/forms/JobForm.js
@@ -0,0 +1,12 @@
+import React from "react";
+import Page from "../Home/Page";
+
+function JobForm() {
+  return (
+    <Page>
+      <p> job froms will be here </p>
+    </Page>
+  );
+}
+
+export default JobForm;
diff --git a/src/forms/PayrollServices.js b/src/forms/PayrollServices.js
new file mode 100644
index 0000000..cfacd4c
--- /dev/null
+++ b/src/forms/PayrollServices.js
@@ -0,0 +1,552 @@
+import React from "react";
+import Page from "../Home/Page";
+import { useState } from "react";
+import { Formik, Form } from "formik";
+import FieldControl from "../components/FieldControl/FieldControl";
+import FieldWrapper from "../components/FieldWrapper/FieldWrapper";
+
+function PayrollServices() {
+  const initialValues = {};
+  const [loading, setLoading] = useState(false);
+  const formOnSubmit = async (values) => {
+    console.log(values);
+  };
+  const SelectStatus = [
+    {
+      value: "",
+      key: "Select Option",
+    },
+    {
+      value: "S",
+      key: "Saved",
+    },
+    {
+      value: "M",
+      key: "My",
+    },
+    {
+      value: "P",
+      key: "In-Progress",
+    },
+    {
+      value: "X",
+      key: "Cancelled",
+    },
+    {
+      value: "C",
+      key: "Complete",
+    },
+  ];
+
+  const JobType = [
+    {
+      value: "1",
+      key: "Job Type 1 ",
+    },
+    {
+      value: "2",
+      key: "Job Type 2",
+    },
+    {
+      value: "3",
+      key: "Job Type 3",
+    },
+    {
+      value: "4",
+      key: "Job Type 4",
+    },
+    {
+      value: "5",
+      key: "Job Type 5",
+    },
+    {
+      value: "6",
+      key: "Job Type 6",
+    },
+  ];
+
+  return (
+    <Page>
+      <div>
+        <h3 className="mb-8 pb-4 text-2xl font-bold text-gray-900">
+          Payroll Services
+        </h3>
+      </div>
+      <Formik initialValues={initialValues} onSubmit={formOnSubmit}>
+        {(formik) => (
+          <Form>
+            <div>
+              <h4 className="mb-4 border-b pb-4 text-2xl font-bold text-gray-900">
+                Filters
+              </h4>
+            </div>
+
+            <FieldWrapper cols={2}>
+              <FieldControl
+                control="select"
+                label="Status"
+                name="status"
+                options={JobType}
+                required
+              />
+
+              <FieldControl
+                control="select"
+                label="Job Type"
+                name="jobType"
+                options={JobType}
+                required
+              />
+            </FieldWrapper>
+
+            <FieldWrapper cols={2}>
+              <FieldControl
+                control="date"
+                label="Start Date"
+                name="startDate"
+                placeholder="MMMM d, yyyy , --:--"
+              />
+
+              <FieldControl
+                control="date"
+                label="End Date"
+                name="endDate"
+                placeholder="MMMM d, yyyy , --:--"
+              />
+            </FieldWrapper>
+
+            <button
+              name="search"
+              className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
+            >
+              {loading ? "Searching..." : "Search"}
+            </button>
+            <div>
+              <h4 className="mb-4 border-b py-4 text-2xl font-bold text-gray-900">
+                Select a requisition for more detail
+              </h4>
+            </div>
+            <div className="mt-8 flow-root">
+              <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                  <table className="min-w-full table-fixed divide-y divide-gray-300">
+                    <thead>
+                      <tr>
+                        <th
+                          scope="col"
+                          className="relative px-7 sm:w-12 sm:px-6"
+                        >
+                          <input
+                            type="checkbox"
+                            className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                          />
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Req#
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          ID
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Name
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Job Description
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Payment Type
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Start Date
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          End Date
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Status
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Warnings
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Current Approver
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Action
+                        </th>
+                      </tr>
+                    </thead>
+                    {/* <tbody className="divide-y divide-gray-200 bg-white">
+                            {requisitions &&
+                              requisitions.length > 0 &&
+                              requisitions.map((person: any) => (
+                                <tr key={person.apprId}>
+                                  <td className="relative px-7 sm:w-12 sm:px-6">
+                                    <input
+                                      type="checkbox"
+                                      className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                                      value={person.apprId}
+                                    />
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.requisition}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.apprId}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.name}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.jobTitle}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.paymentType}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.beginDate}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.endDate}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.statusDesc}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.errorList}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    {person.currLevel}
+                                  </td>
+                                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    <button
+                                      className="text-cu-red"
+                                      onClick={() =>
+                                        loadModal(person.requisition)
+                                      }
+                                    >
+                                      View
+                                    </button>
+
+                                    <Modal
+                                      modalOpen={modalOpen}
+                                      setModalOpen={setModalOpen}
+                                    >
+                                      {modelData?.job && (
+                                        <div>
+                                          <h4 className="py-4 text-l font-bold text-gray-900">
+                                            Job Details
+                                          </h4>
+                                          <dl className="divide-y divide-gray-100">
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Department
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                {modelData.department}
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Hourly Rate of Pay
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                $
+                                                {
+                                                  modelData?.job
+                                                    .nzbjobrHourlyRate
+                                                }
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Hours/Pay
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                $
+                                                {
+                                                  modelData?.job
+                                                    .nzbjobrHoursPerWeek
+                                                }
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Total Amount / Pay
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                $
+                                                {
+                                                  modelData?.job
+                                                    .nzbjobrTotalHours
+                                                }
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Total Amount
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                $
+                                                {
+                                                  modelData?.job
+                                                    .nzbjobrTotalAmountDue
+                                                }
+                                              </dd>
+                                            </div>
+                                            <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                              <dt className="text-sm font-medium leading-6 text-gray-900">
+                                                Approver Name
+                                              </dt>
+                                              <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                                {modelData?.job.nzbjobrUserId}
+                                              </dd>
+                                            </div>
+                                          </dl>
+                                        </div>
+                                      )}
+
+                                      {modelData?.foaps?.length > 0 && (
+                                        <div>
+                                          <h4 className="mt-4 py-4 text-l font-bold text-gray-900">
+                                            Funding Details
+                                          </h4>
+                                          <table className="min-w-full table-fixed divide-y divide-gray-300">
+                                            <thead>
+                                              <tr>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Index#
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Fund
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Org
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Account
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Program
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Activity
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Allocation
+                                                </th>
+                                              </tr>
+                                            </thead>
+                                            <tbody className="divide-y divide-gray-200 bg-white">
+                                              {modelData?.foaps?.map(
+                                                (jobDetail: any) => (
+                                                  <tr key={jobDetail.index}>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {jobDetail.index}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {jobDetail.fund}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {jobDetail.org}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {jobDetail.account}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {jobDetail.program}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {jobDetail.activity}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {jobDetail.allocation}
+                                                    </td>
+                                                  </tr>
+                                                )
+                                              )}
+                                            </tbody>
+                                          </table>
+                                        </div>
+                                      )}
+
+                                      {modelData?.decisions?.length > 0 && (
+                                        <div>
+                                          <h4 className="mt-4 py-4 text-l font-bold text-gray-900">
+                                            Decision Details
+                                          </h4>
+                                          <table className="min-w-full table-fixed divide-y divide-gray-300">
+                                            <thead>
+                                              <tr>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Date
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Approver
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Role
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Decision
+                                                </th>
+                                                <th
+                                                  scope="col"
+                                                  className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                                >
+                                                  Comments
+                                                </th>
+                                              </tr>
+                                            </thead>
+                                            <tbody className="divide-y divide-gray-200 bg-white">
+                                              {modelData?.decisions.map(
+                                                (decicionDetail: any) => (
+                                                  <tr key={decicionDetail.id}>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {decicionDetail.decnDate}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {decicionDetail.apprName}
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        decicionDetail.apprLevelDesc
+                                                      }
+                                                    </td>
+                                                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                      {decicionDetail.decnDesc}
+                                                    </td>
+                                                    <td className="whitespace-wrap px-3 py-4 text-sm text-gray-500">
+                                                      {
+                                                        decicionDetail.decnComment
+                                                      }
+                                                    </td>
+                                                  </tr>
+                                                )
+                                              )}
+                                            </tbody>
+                                          </table>
+                                        </div>
+                                      )}
+                                    </Modal>
+                                  </td>
+                                </tr>
+                              ))}
+                          </tbody> */}
+                  </table>
+                </div>
+              </div>
+            </div>
+            <div>
+              <h4 className="mb-4 border-b py-4 text-2xl font-bold text-gray-900">
+                Action
+              </h4>
+            </div>
+            <FieldControl
+              control="radio"
+              label="Action"
+              name="action"
+              options={[
+                {
+                  value: "1",
+                  key: "Load to Banner",
+                },
+                {
+                  value: "2",
+                  key: "Delete (Manual Entry)",
+                },
+                {
+                  value: "3",
+                  key: "Return for Correction",
+                },
+              ]}
+              required
+            />
+            <FieldControl
+              control="input"
+              label="Comment"
+              name="comment"
+              type="text"
+              placeholder="Comment"
+            />
+            <button
+              type="submit"
+              aria-label="Submit"
+              className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
+            >
+              Submit
+            </button>
+          </Form>
+        )}
+      </Formik>
+    </Page>
+  );
+}
+
+export default PayrollServices;
diff --git a/src/forms/ResearchFinancial.js b/src/forms/ResearchFinancial.js
new file mode 100644
index 0000000..05e5dfa
--- /dev/null
+++ b/src/forms/ResearchFinancial.js
@@ -0,0 +1,559 @@
+import Page from "../Home/Page";
+import { useState } from "react";
+import { Formik, Form } from "formik";
+import FieldControl from "../components/FieldControl/FieldControl";
+import FieldWrapper from "../components/FieldWrapper/FieldWrapper";
+
+function ResearchFinancial() {
+  const formOnSubmit = async (values) => {
+    console.log(values);
+  };
+  const initialValues = {};
+  const [loading, setLoading] = useState(false);
+  // const [requisitions, setRequisitions] = useState([]);
+
+  const SelectStatus = [
+    {
+      value: "",
+      key: "Select Option",
+    },
+    {
+      value: "S",
+      key: "Saved",
+    },
+    {
+      value: "M",
+      key: "My",
+    },
+    {
+      value: "P",
+      key: "In-Progress",
+    },
+    {
+      value: "X",
+      key: "Cancelled",
+    },
+    {
+      value: "C",
+      key: "Complete",
+    },
+  ];
+
+  const ActionOption = [
+    {
+      value: "1",
+      key: "Correct",
+    },
+    {
+      value: "2",
+      key: "Approve",
+    },
+    {
+      value: "3",
+      key: "Return for Correction",
+    },
+    {
+      value: "4",
+      key: "Cancel Requisition",
+    },
+    {
+      value: "5",
+      key: "Terminate Payment",
+    },
+    {
+      value: "6",
+      key: "Extend Job",
+    },
+  ];
+  const JobType = [
+    {
+      value: "1",
+      key: "Job Type 1 ",
+    },
+    {
+      value: "2",
+      key: "Job Type 2",
+    },
+    {
+      value: "3",
+      key: "Job Type 3",
+    },
+    {
+      value: "4",
+      key: "Job Type 4",
+    },
+    {
+      value: "5",
+      key: "Job Type 5",
+    },
+    {
+      value: "6",
+      key: "Job Type 6",
+    },
+  ];
+  return (
+    <Page>
+      <div>
+        <h3 className="mb-8 pb-4 text-2xl font-bold text-gray-900">
+          Research Financial Services
+        </h3>
+      </div>
+      <Formik initialValues={initialValues} onSubmit={formOnSubmit}>
+        {(formik) => (
+          <Form>
+            <FieldControl
+              control="select"
+              label="Status"
+              name="status"
+              options={SelectStatus}
+              required
+            />
+
+            <FieldControl
+              control="select"
+              label="Job Type"
+              name="jobType"
+              options={JobType}
+              required
+            />
+
+            <FieldControl
+              control="select"
+              label="Proxy"
+              name="proxy"
+              options={ActionOption}
+              required
+            />
+
+            <FieldWrapper cols={2}>
+              <FieldControl
+                control="date"
+                label="Start Date"
+                name="startDate"
+                placeholder="Enter start date"
+              />
+              <FieldControl
+                control="date"
+                label="End Date"
+                name="endDate"
+                placeholder="Enter end date"
+              />
+            </FieldWrapper>
+
+            <button
+              name="search"
+              className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
+            >
+              {loading ? "Searching..." : "Search"}
+            </button>
+
+            <div>
+              <h4 className="mb-4 border-b py-4 text-2xl font-bold text-gray-900">
+                Select a requisition for approval
+              </h4>
+            </div>
+
+            <div className="mt-8 flow-root">
+              <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                  <table className="min-w-full table-fixed divide-y divide-gray-300">
+                    <thead>
+                      <tr>
+                        <th
+                          scope="col"
+                          className="relative px-7 sm:w-12 sm:px-6"
+                        >
+                          <input
+                            type="checkbox"
+                            className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                          />
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Req#
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          ID
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Name
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Job Description
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Payment Type
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Start Date
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          End Date
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Status
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Warnings
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Current Approver
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Action
+                        </th>
+                      </tr>
+                    </thead>
+                    {/* <tbody className="divide-y divide-gray-200 bg-white">
+                      {requisitions &&
+                        requisitions.length > 0 &&
+                        requisitions.map((person: any) => (
+                          <tr key={person.apprId}>
+                            <td className="relative px-7 sm:w-12 sm:px-6">
+                              <input
+                                type="checkbox"
+                                className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                                value={person.apprId}
+                              />
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.requisition}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.apprId}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.name}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.jobTitle}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.paymentType}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.beginDate}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.endDate}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.statusDesc}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.errorList}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              {person.currLevel}
+                            </td>
+                            <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                              <button
+                                className="text-cu-red"
+                                onClick={() => loadModal(person.requisition)}
+                              >
+                                View
+                              </button>
+
+                              <Modal
+                                modalOpen={modalOpen}
+                                setModalOpen={setModalOpen}
+                              >
+                                {modelData?.job && (
+                                  <div>
+                                    <h4 className="py-4 text-l font-bold text-gray-900">
+                                      Job Details
+                                    </h4>
+                                    <dl className="divide-y divide-gray-100">
+                                      <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                        <dt className="text-sm font-medium leading-6 text-gray-900">
+                                          Department
+                                        </dt>
+                                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                          MISSING
+                                        </dd>
+                                      </div>
+                                      <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                        <dt className="text-sm font-medium leading-6 text-gray-900">
+                                          Hourly Rate of Pay
+                                        </dt>
+                                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                          {modelData?.job.nzbjobrHourlyRate}
+                                        </dd>
+                                      </div>
+                                      <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                        <dt className="text-sm font-medium leading-6 text-gray-900">
+                                          Hours/Pay
+                                        </dt>
+                                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                          ${modelData?.job.nzbjobrHoursPerWeek}
+                                        </dd>
+                                      </div>
+                                      <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                        <dt className="text-sm font-medium leading-6 text-gray-900">
+                                          Total Amount / Pay
+                                        </dt>
+                                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                          ${modelData?.job.nzbjobrTotalHours}
+                                        </dd>
+                                      </div>
+                                      <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                        <dt className="text-sm font-medium leading-6 text-gray-900">
+                                          Total Amount
+                                        </dt>
+                                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                          $
+                                          {modelData?.job.nzbjobrTotalAmountDue}
+                                        </dd>
+                                      </div>
+                                      <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                                        <dt className="text-sm font-medium leading-6 text-gray-900">
+                                          Approver Name
+                                        </dt>
+                                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                                          {modelData?.job.nzbjobrUserId}
+                                        </dd>
+                                      </div>
+                                    </dl>
+                                  </div>
+                                )}
+
+                                {modelData?.foaps?.length > 0 && (
+                                  <div>
+                                    <h4 className="mt-4 py-4 text-l font-bold text-gray-900">
+                                      Funding Details
+                                    </h4>
+                                    <table className="min-w-full table-fixed divide-y divide-gray-300">
+                                      <thead>
+                                        <tr>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Index#
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Fund
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Org
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Account
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Program
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Activity
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Allocation
+                                          </th>
+                                        </tr>
+                                      </thead>
+                                      <tbody className="divide-y divide-gray-200 bg-white">
+                                        {modelData?.foaps?.map(
+                                          (jobDetail: any) => (
+                                            <tr key={jobDetail.index}>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {
+                                                  jobDetail.nzrjlabAccountIndexCode
+                                                }
+                                              </td>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {jobDetail.nzrjlabFundCode}
+                                              </td>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {jobDetail.nzrjlabOrgnCode}
+                                              </td>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {jobDetail.nzrjlabAcctCode}
+                                              </td>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {jobDetail.nzrjlabProgCode}
+                                              </td>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {jobDetail.nzrjlabActivityDate}
+                                              </td>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {jobDetail.nzrjlabPercent}
+                                              </td>
+                                            </tr>
+                                          )
+                                        )}
+                                      </tbody>
+                                    </table>
+                                  </div>
+                                )}
+
+                                {modelData?.decisions?.length > 0 && (
+                                  <div>
+                                    <h4 className="mt-4 py-4 text-l font-bold text-gray-900">
+                                      Decision Details
+                                    </h4>
+                                    <table className="min-w-full table-fixed divide-y divide-gray-300">
+                                      <thead>
+                                        <tr>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Date
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Approver
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Role
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Decision
+                                          </th>
+                                          <th
+                                            scope="col"
+                                            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                                          >
+                                            Comments
+                                          </th>
+                                        </tr>
+                                      </thead>
+                                      <tbody className="divide-y divide-gray-200 bg-white">
+                                        {modelData?.decisions.map(
+                                          (decicionDetail: any) => (
+                                            <tr key={decicionDetail.id}>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {decicionDetail.decnDate}
+                                              </td>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {decicionDetail.apprName}
+                                              </td>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {decicionDetail.apprLevelDesc}
+                                              </td>
+                                              <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                {decicionDetail.decnDesc}
+                                              </td>
+                                              <td className="whitespace-wrap px-3 py-4 text-sm text-gray-500">
+                                                {decicionDetail.decnComment}
+                                              </td>
+                                            </tr>
+                                          )
+                                        )}
+                                      </tbody>
+                                    </table>
+                                  </div>
+                                )}
+                              </Modal>
+                            </td>
+                          </tr>
+                        ))}
+                    </tbody> */}
+                  </table>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="mb-4 border-b py-4 text-2xl font-bold text-gray-900">
+                Action
+              </h4>
+            </div>
+
+            <FieldControl
+              control="radio"
+              label="Action"
+              name="action"
+              options={[
+                {
+                  value: "1",
+                  key: "Approve",
+                },
+                {
+                  value: "2",
+                  key: "Return for Correction",
+                },
+              ]}
+            />
+
+            <FieldControl
+              control="input"
+              label="Comment"
+              name="comment"
+              type="text"
+              placeholder="Comment"
+            />
+
+            <button
+              type="submit"
+              aria-label="Submit"
+              className="inline-flex items-center justify-center gap-1 px-3 py-2 text-sm font-medium text-white rounded-md cu-button not-prose md:px-6 md:py-3 md:text-base hover:text-white focus:outline-none bg-cu-red hover:bg-cu-black-600"
+            >
+              Submit
+            </button>
+          </Form>
+        )}
+      </Formik>
+    </Page>
+  );
+}
+
+export default ResearchFinancial;
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 03592d3..0dd9284 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2,13 +2,13 @@ export const primaryStyles = {
   wrapper: `flex flex-col gap-2`,
   required: ``,
   // required: `border border-cu-red px-5 py-4 bg-cu-red-25 rounded-md`
-}
+};
 
 export const textStyles = {
   label: `block font-semibold text-lg`,
   helper: `block text-sm text-cu-black-600 mb-1`,
-  required: `text-cu-red`
-}
+  required: `text-cu-red`,
+};
 
 export const fieldStyles = {
   input: `border border-cu-black-200 rounded-md placeholder:text-cu-black-400`,
@@ -18,6 +18,9 @@ export const fieldStyles = {
   verticalOptions: `flex flex-col gap-2`,
   uploads: `max-w-xs focus:outline-none`,
   errorInput: `border border-red-600 rounded-md p-2`,
+  disabled: `disabled:bg-slate-100 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none `,
+  disabledCheckbox: `disabled:pointer-events-none disabled:bg-gray-300 disabled:text-black-800 `,
+  disabledUpload: `disabled:pointer-events-none`,
 };
 
 export const fieldErrorStyles = {