diff --git a/client/src/components/manageProjects/editProject.js b/client/src/components/manageProjects/editProject.js
index 561bcfa43..a5fd02af2 100644
--- a/client/src/components/manageProjects/editProject.js
+++ b/client/src/components/manageProjects/editProject.js
@@ -7,6 +7,7 @@ import { REACT_APP_CUSTOM_REQUEST_HEADER } from '../../utils/globalSettings';
 //for user level block access to all except for the ones checked
 
 const EditProject = (props) => {
+  console.log('editProject: props: ', props);
   const headerToSend = REACT_APP_CUSTOM_REQUEST_HEADER;
 
   //const [currentProjectData, setCurrentProjectData] = useState(props.projectToEdit);
@@ -57,6 +58,7 @@ const EditProject = (props) => {
 
       <div>
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.name}
           fieldName="name"
           updateProject={updateProject}
@@ -66,10 +68,13 @@ const EditProject = (props) => {
           fieldTitle="Name:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.description}
           fieldName="description"
           updateProject={updateProject}
@@ -79,10 +84,13 @@ const EditProject = (props) => {
           fieldTitle="Description:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.location}
           fieldName="location"
           updateProject={updateProject}
@@ -92,10 +100,13 @@ const EditProject = (props) => {
           fieldTitle="Location:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.githubIdentifier}
           fieldName="githubIdentifier"
           updateProject={updateProject}
@@ -105,10 +116,13 @@ const EditProject = (props) => {
           fieldTitle="GitHub Identifier:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.githubUrl}
           fieldName="githubUrl"
           updateProject={updateProject}
@@ -118,10 +132,13 @@ const EditProject = (props) => {
           fieldTitle="GitHib URL:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.slackUrl}
           fieldName="slackUrl"
           updateProject={updateProject}
@@ -131,10 +148,13 @@ const EditProject = (props) => {
           fieldTitle="Slack URL:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.googleDriveUrl}
           fieldName="googleDriveUrl"
           updateProject={updateProject}
@@ -144,10 +164,13 @@ const EditProject = (props) => {
           fieldTitle="Google Drive URL:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin', 'user']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.googleDriveId}
           fieldName="googleDriveId"
           updateProject={updateProject}
@@ -157,10 +180,12 @@ const EditProject = (props) => {
           fieldTitle="Google Drive ID:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.hflaWebsiteUrl}
           fieldName="hflaWebsiteUrl"
           updateProject={updateProject}
@@ -170,10 +195,13 @@ const EditProject = (props) => {
           fieldTitle="HfLA Website URL:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.videoConferenceLink}
           fieldName="videoConferenceLink"
           updateProject={updateProject}
@@ -183,10 +211,13 @@ const EditProject = (props) => {
           fieldTitle="Video Conference Link:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin', 'user']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={props.projectToEdit.lookingDescription}
           fieldName="lookingDescription"
           updateProject={updateProject}
@@ -196,10 +227,13 @@ const EditProject = (props) => {
           fieldTitle="Looking For Description:"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={partnerDataFormatted}
           fieldName="partners"
           updateProject={updateProject}
@@ -209,10 +243,13 @@ const EditProject = (props) => {
           fieldTitle="Partners (comma separated):"
           accessLevel={props.userAccessLevel}
           canEdit={['admin', 'user']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
       <div className="editable-field-div">
         <EditableField
+          projectName={props.projectToEdit.name}
           fieldData={recrutingDataFormatted}
           fieldName="recruitingCategories"
           updateProject={updateProject}
@@ -222,6 +259,8 @@ const EditProject = (props) => {
           fieldTitle="Recruiting Categories (comma separated):"
           accessLevel={props.userAccessLevel}
           canEdit={['admin']}
+          getIssue={props.getIssue}
+          issueValue={props.issueValue}
         />
       </div>
 
diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js
index 2395169b8..937f29c1c 100644
--- a/client/src/components/manageProjects/editableField.js
+++ b/client/src/components/manageProjects/editableField.js
@@ -1,8 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import '../../sass/ManageProjects.scss';
+import Modal from './modal/Modal';
 
 const EditableField = ({
   projId,
+  projectName,
   fieldData,
   fieldName,
   updateProject,
@@ -11,14 +13,73 @@ const EditableField = ({
   fieldTitle,
   accessLevel,
   canEdit,
+  getIssue,
+  issueValue,
 }) => {
+  console.log('editableField: props: issueValue: ', issueValue);
+  console.log('editableField: props: issueValue: ', typeof issueValue);
+  const { REACT_APP_GUTHUB_PAT } = process.env;
+  console.log(REACT_APP_GUTHUB_PAT);
   const [fieldValue, setFieldValue] = useState(fieldData);
   const [editable, setEditable] = useState(false);
   const [notRestricted, setNotRestricted] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  // body to be collected and sent to the Github server
+  const [issueStr, setIssueStr] = useState('');
+  console.log('issueStr:', issueStr);
+  const [formattedIssue, setFormattedIssue] = useState({
+    title: `Request to edit ${projectName}'s ${fieldName} field`,
+
+    body: `### Project: ${projectName} <br> Field to edit: ${fieldName} <br> Proposed Value: ${issueValue}`,
+    assignee: 'chukalicious',
+  });
+  console.log('formattedIssue:', formattedIssue);
+
   const ref = useRef();
 
-  // create function that checks the user has access to edit all fields
+  // Modal Functions
+  useEffect(() => {
+    setFormattedIssue({
+      ...formattedIssue,
+      body: `### Project: ${projectName} <br> Field to edit: ${fieldName} <br> Proposed Value: ${issueValue}`,
+    });
+  }, [issueValue]);
+
+  const closeModal = (e) => {
+    setFormattedIssue({
+      ...formattedIssue,
+      proposedValue: '',
+    });
+    setShowModal(false);
+  };
+
+  const requestToEdit = async () => {
+    const url = `https://api.github.com/repos/hackforla/VRMS/issues`;
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/vnd.github.v3+json',
+        // Authorization: REACT_APP_GUTHUB_PAT,
+        Authorization: 'token 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',
+      },
+      body: JSON.stringify(formattedIssue),
+    };
+    try {
+      const response = await fetch(url, requestOptions);
+      const resJson = await response.json();
 
+      console.log('requestOptions: body: ', requestOptions.body);
+      console.log('formattedIssue inside the api call:', formattedIssue);
+
+      return resJson;
+    } catch (error) {
+      console.log(`update user error: `, error);
+    }
+  };
+
+  // create function that checks the user has access to edit all fields
   const checkUser = () => {
     const permitted = canEdit.includes(accessLevel);
     setNotRestricted(permitted);
@@ -34,7 +95,6 @@ const EditableField = ({
   }, [editable]);
 
   return (
-    // here goes the conditional rendering
     // this button will be disabled if user !admin
     <div>
       <div>
@@ -50,12 +110,30 @@ const EditableField = ({
             [edit]
           </span>
         ) : (
-          <span className="project-edit-button" style={{ color: 'gray' }}>
-            {' '}
-            <a href="https://github.com/chukalicious/VRMS/blob/feature/allow-pm-to-edit-project-fields/team-lead-contact-info.md">
+          <>
+            <span
+              className="project-edit-button"
+              style={{ color: 'gray' }}
+              onClick={() => setShowModal(true)}
+            >
+              {' '}
               [Contact your team lead to make changes to this field]
-            </a>
-          </span>
+            </span>
+            {/* Propose this text gets changed to a call to action type of text and something that better describes what happens when the link is clicked  */}
+            {/* "Click here to..." */}
+
+            {showModal ? (
+              <Modal
+                title={`Request to edit ${projectName} project ${fieldName} field`}
+                project={projectName}
+                fieldToEdit={fieldName}
+                handleClose={closeModal}
+                getIssue={getIssue}
+                requestToEdit={requestToEdit}
+                setShowModal={setShowModal}
+              />
+            ) : null}
+          </>
         )}
       </div>
 
diff --git a/client/src/components/manageProjects/modal/Modal.js b/client/src/components/manageProjects/modal/Modal.js
new file mode 100644
index 000000000..e9ff26d49
--- /dev/null
+++ b/client/src/components/manageProjects/modal/Modal.js
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import '../../../sass/Modal.scss';
+import { Label, Input, AuxiliaryButton } from '../../Form';
+
+const Modal = (props) => {
+  const [issue, setIssue] = useState({ proposedValue: '' });
+  console.log('issue when it renders: ', issue);
+
+  const handleChange = (e) => {
+    console.log('issue before change: ', issue);
+    setIssue({ [e.target.name]: e.target.value });
+  };
+
+  const handleCancel = (e) => {
+    setIssue({ proposedValue: '' });
+    props.setShowModal(false);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    props.getIssue(issue);
+    console.log('issue en el handleSubmit: ', issue);
+    props.setShowModal(false);
+  };
+
+  return (
+    <div className="container--Modal" onClick={() => props.handleClose()}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="close-x" onClick={props.handleClose}>
+          Close [X]
+        </div>
+        <p className="Label title">{props.title}</p>
+        <p className="Label">Project Name: {props.project}</p>
+        <p className="Label">Field to Edit: {props.fieldToEdit}</p>
+        <form
+          onSubmit={(e) => {
+            handleSubmit(e);
+            props
+              .requestToEdit()
+              .then((res) => {
+                console.log('response', res);
+              })
+              .catch((err) => console.log(err));
+          }}
+        >
+          <Label>Proposed Value:</Label>
+          <Input
+            type="text"
+            id="proposedValue"
+            name="proposedValue"
+            value={issue.proposedValue}
+            onChange={handleChange}
+          />
+
+          <AuxiliaryButton onClick={handleCancel}>Cancel</AuxiliaryButton>
+          <AuxiliaryButton type="submit">Submit</AuxiliaryButton>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/client/src/pages/ManageProjects.js b/client/src/pages/ManageProjects.js
index efb9b1132..d44748b68 100644
--- a/client/src/pages/ManageProjects.js
+++ b/client/src/pages/ManageProjects.js
@@ -16,6 +16,20 @@ const ManageProjects = () => {
   const [componentToDisplay, setComponentToDisplay] = useState(''); // displayProjectInfo, editMeetingTime or editProjectInfor
   const user = auth?.user;
 
+  const [issueValue, setIssueValue] = useState({ proposedValue: '' });
+  console.log('ManageProjects: issueValue:', issueValue);
+
+  const getIssue = (issue) => {
+    console.log('ManageProjects: getIssue: issue: ', issue);
+
+    setIssueValue({ proposedValue: issue.proposedValue });
+  };
+
+  console.log(
+    'ManageProjects: issueValue: after running the getIssue function:',
+    issueValue
+  );
+
   // Fetch projects from db
   async function fetchProjects() {
     try {
@@ -76,7 +90,7 @@ const ManageProjects = () => {
 
   const goSelectProject = () => {
     setComponentToDisplay('selectProject');
-  }
+  };
 
   switch (componentToDisplay) {
     case 'editMeetingTime':
@@ -90,6 +104,8 @@ const ManageProjects = () => {
           recurringEvents={recurringEvents}
           renderUpdatedProj={renderUpdatedProj}
           userAccessLevel={user.accessLevel}
+          getIssue={getIssue}
+          issueValue={issueValue.proposedValue}
         />
       );
       break;
diff --git a/client/src/sass/Modal.scss b/client/src/sass/Modal.scss
new file mode 100644
index 000000000..f44b7c64f
--- /dev/null
+++ b/client/src/sass/Modal.scss
@@ -0,0 +1,69 @@
+.container--Modal {
+  display: flex;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(250, 17, 79, 0.9);
+  justify-content: center;
+  align-items: center;
+  z-index: 5;
+}
+
+.close-x {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+}
+
+.modal-content {
+  padding: 1.5rem 3rem 4.5rem 3rem;
+  background-color: #fff;
+  border-radius: 0.5rem;
+}
+
+.title {
+  text-decoration: underline;
+}
+
+.button-space {
+  margin-top: 2rem;
+}
+
+.project-sub-heading {
+  margin: 20px 0 20px 0;
+}
+
+div.editable-field {
+  font-weight: normal;
+  font-size: 18px;
+  max-width: none;
+  width: 400px;
+}
+
+.editable-field {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  min-width: 90%;
+}
+
+.editable-field-div {
+  margin-top: 20px;
+}
+
+.section-name {
+  font-size: 16px;
+}
+
+.section-content {
+  font-size: 14px;
+  text-transform: none;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.project-edit-button {
+  color: #fa114f;
+  cursor: pointer;
+  font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/team-lead-contact-info.md b/team-lead-contact-info.md
deleted file mode 100644
index cef9148f0..000000000
--- a/team-lead-contact-info.md
+++ /dev/null
@@ -1,11 +0,0 @@
-## Team Lead Contact Sheet
-
-### Please find your team lead's email from the table below to request the desired changes.
-
-| Team Lead | Email |
-| :-------: | :---: |
-|           |       |
-|           |       |
-|           |       |
-|           |       |
-|           |       |