diff --git a/components/Judging/TeamMembersSelector.js b/components/Judging/TeamMembersSelector.js
new file mode 100644
index 00000000..9fc8a964
--- /dev/null
+++ b/components/Judging/TeamMembersSelector.js
@@ -0,0 +1,313 @@
+// teamMembers should be array of object:
+//
+// [
+//     {
+//         discord,
+//         email,
+//         id,
+//         name
+//     },
+//     ...
+// ]
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import TextField from '../TextField';
+import { getAllApplicants } from '../../utility/firebase';
+
+const InputArea = styled.div`
+  background: white;
+  padding: 0.5rem;
+  border: 1px solid #eeeeee;
+  display: flex;
+  gap: 0.5rem;
+  position: relative;
+  min-height: calc(1rem + calc(1rem * 1.2));
+`;
+
+const Member = styled.div`
+  background: #2d2937;
+  color: white;
+  padding: 0.5rem 0.7rem;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+const AddText = styled.span`
+  margin: 0.5rem 0.3rem;
+  cursor: pointer;
+  font-weight: 600;
+  position: absolute;
+  top: 0.5rem;
+  right: 10px;
+`;
+
+const AddPanelOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  ${(p) => (p.isAdding ? 'display: flex;' : 'display: none;')}
+  align-items: flex-end;
+  justify-content: center;
+`;
+
+const AddPanel = styled.div`
+  transition: all 0.5s linear;
+  background: #f8f8f8;
+  border-style: none solid solid solid;
+  border-width: 1px;
+  border-color: #eeeeee;
+  box-sizing: border-box;
+  border-radius: 8px 8px 0 0;
+`;
+
+const AddTitle = styled.h4`
+  line-height: 150%;
+  margin: 0;
+`;
+
+const HackerOptions = styled.div`
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #f8f8f8;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #eeeeee;
+    border-radius: 9001px;
+  }
+`;
+
+const EmptyOptions = styled.div`
+  font-size: 0.9rem;
+  color: #777777;
+`;
+
+const SelectableHacker = styled.div`
+  line-height: 150%;
+  box-sizing: border-box;
+  padding: 0.5rem 1.5rem;
+  cursor: pointer;
+  width: 100%;
+
+  :hover {
+    background: #eeeeee;
+  }
+`;
+
+const SmallText = styled.span`
+  font-size: 0.8rem;
+  color: #777777;
+`;
+
+const TeamMembersSelector = (props) => {
+  const { value, updateValue, fnNoOverflow } = props;
+  // onChange => ('teamMembers', e)
+
+  //   const copyValues = () => {
+  //     const duplicate = [];
+  //     value.forEach((item) => {
+  //       duplicate.push(item);
+  //     });
+  //     return duplicate;
+  //   };
+
+  const [members, setMembers] = useState(value);
+  const [renderMembers, setRenderMembers] = useState([]);
+  const [trigger, setTrigger] = useState(false);
+  const [isAdding, setIsAdding] = useState(false);
+  const [hackerSearch, setHackerSearch] = useState('');
+  const [applicants, setApplicants] = useState([]);
+
+  const handleAddHackerToTeam = (hacker) => {
+    setHackerSearch(''); // doesn't reset... maybe something to do with onChangeCustomValue
+    const currentMembers = members;
+    members.push(hacker);
+    setMembers(currentMembers);
+    setTrigger(!trigger);
+    setIsAdding(false);
+  };
+
+  const handleDeleteMember = (index) => {
+    const currentMembers = members;
+    currentMembers.splice(index, 1);
+    setMembers(currentMembers);
+    setTrigger(!trigger);
+  };
+
+  const DeleteIcon = ({ fn }) => {
+    return (
+      <div
+        style={{
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        role="button"
+        tabIndex="0"
+        onKeyPress={fn}
+        onClick={fn}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    const renderArray = [];
+
+    if (members) {
+      members.forEach((item, index) => {
+        renderArray.push(
+          <Member key={index}>
+            {item.name}
+            <DeleteIcon fn={() => handleDeleteMember(index)} />
+          </Member>
+        );
+      });
+    }
+
+    setRenderMembers(renderArray);
+
+    // Save
+    updateValue('teamMembers', members, true);
+  }, [trigger]);
+
+  useEffect(() => {
+    if (isAdding) {
+      document
+        .getElementById('project-modal')
+        ?.scrollTo(0, document.getElementById('project-modal')?.scrollHeight);
+      fnNoOverflow(true);
+    } else {
+      fnNoOverflow(false);
+    }
+  }, [isAdding]);
+
+  useEffect(() => {
+    getAllApplicants(setApplicants);
+  }, []);
+
+  return (
+    <>
+      <div style={{ paddingBottom: '0.5rem' }}>
+        <InputArea>
+          {renderMembers}
+          <AddText onClick={() => setIsAdding(true)}>Add Member</AddText>
+        </InputArea>
+      </div>
+      <AddPanelOverlay
+        isAdding={isAdding}
+        style={{
+          height: document.getElementById('project-modal')?.scrollHeight,
+          overflow: 'hidden',
+        }}
+      >
+        <AddPanel>
+          {/* Head */}
+          <div
+            style={{
+              padding: '1.5rem',
+              boxSizing: 'border-box',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                gap: '1rem',
+                justifyContent: 'space-between',
+                paddingBottom: '1rem',
+              }}
+            >
+              {/* Title + Cancel */}
+              <AddTitle>Add Team Member</AddTitle>
+              <DeleteIcon fn={() => setIsAdding(false)} />
+            </div>
+            {/* Search */}
+            <TextField
+              value={hackerSearch}
+              onChangeCustomValue={(e) => setHackerSearch(e.target.value)}
+            />
+          </div>
+
+          {/* Searched Options */}
+          <HackerOptions
+            style={{
+              maxHeight: document.getElementById('project-modal')
+                ? document.getElementById('project-modal').scrollHeight / 2
+                : 0,
+              minWidth: document.getElementById('project-modal')
+                ? document.getElementById('project-modal').scrollWidth / 2
+                : 0,
+              paddingBottom: '1.5rem',
+            }}
+          >
+            {/* OPTIMIZATION TODO: debounce search + pull from firebase where applicant is accepted (if possible) */}
+            {hackerSearch ? (
+              applicants?.map((applicant, index) => {
+                const name = `${applicant.basicInfo.firstName} ${applicant.basicInfo.lastName}`;
+                const { email } = applicant.basicInfo;
+                if (
+                  (name.toLowerCase().includes(hackerSearch.toLowerCase()) ||
+                    hackerSearch === '*') &&
+                  applicant.status.applicationStatus === 'accepted' &&
+                  applicant.status.attending &&
+                  (members
+                    ? !(
+                        members?.filter((e) => e.id === applicant._id).length >
+                        0
+                      )
+                    : true)
+                ) {
+                  return (
+                    <SelectableHacker
+                      key={index}
+                      onClick={() =>
+                        handleAddHackerToTeam({
+                          discord: '-#-',
+                          email,
+                          id: applicant._id,
+                          name,
+                        })
+                      }
+                    >
+                      {name} <SmallText key={index}>{email}</SmallText>
+                    </SelectableHacker>
+                  );
+                }
+                return <></>;
+              })
+            ) : (
+              <EmptyOptions>Begin typing to search</EmptyOptions>
+            )}
+          </HackerOptions>
+        </AddPanel>
+      </AddPanelOverlay>
+    </>
+  );
+};
+
+export default TeamMembersSelector;
diff --git a/components/modal.js b/components/modal.js
index 3bbd6117..ad013f7a 100644
--- a/components/modal.js
+++ b/components/modal.js
@@ -138,7 +138,7 @@ const ModalBackground = styled.div`
   width: 740px;
   max-width: 100%;
   max-height: 70%;
-  overflow-y: auto;
+  ${(p) => (p.noOverflow ? 'overflow-y: hidden;' : 'overflow-y: auto;')}
 `;
 
 const ButtonContainer = styled.div`
@@ -239,6 +239,7 @@ export default function Modal({
   lastModified,
   children,
   modalTitle,
+  noOverflow,
 }) {
   if (!isOpen) {
     return null;
@@ -277,7 +278,11 @@ export default function Modal({
   return (
     <>
       {isOpen && <BackDropScreen />}
-      <ModalBackground isOpen={isOpen}>
+      <ModalBackground
+        isOpen={isOpen}
+        noOverflow={noOverflow}
+        id="project-modal"
+      >
         <ModalButton type={CLOSE} handleClose={handleClose} />
         {(modalTitle && getTitle(modalTitle)) || getTitle(modalAction)}
         {children}
diff --git a/components/projectsCard.js b/components/projectsCard.js
index 2b64ee83..e0e575ca 100644
--- a/components/projectsCard.js
+++ b/components/projectsCard.js
@@ -79,7 +79,11 @@ export default ({
                     Link
                   </a>
                 </Text>
-                <Text>{project.teamMembers?.toString()}</Text>
+                <Text>
+                  {project.teamMembers.map((item, index) => (
+                    <span key={index}>{item.name} </span>
+                  ))}
+                </Text>
                 <Actions>
                   <Button
                     type={EDIT}
diff --git a/pages/Livesite/judging.js b/pages/Livesite/judging.js
index 73868706..7fba80a1 100644
--- a/pages/Livesite/judging.js
+++ b/pages/Livesite/judging.js
@@ -14,6 +14,7 @@ import {
 } from '../../utility/firebase';
 import { EDIT, NEW, LIVESITE_NAVBAR } from '../../constants';
 import ProjectsCard from '../../components/projectsCard';
+import TeamMembersSelector from '../../components/Judging/TeamMembersSelector';
 
 const Label = styled.p`
   font-weight: bold;
@@ -26,6 +27,9 @@ export default ({ hackathons }) => {
   const [activeModal, setActiveModal] = useState('');
   const [data, setData] = useState({});
 
+  // for Add Team Member function trigger (/components/Judging/TeamMemberSelector.js)
+  const [innerModalOpen, setInnerModalOpen] = useState(false);
+
   useEffect(() => {
     (async () => {
       setActiveHackathon(await getActiveHackathon);
@@ -43,13 +47,18 @@ export default ({ hackathons }) => {
 
   const handleNew = () => {
     setData({
+      charityChoice: '',
       description: '',
-      devpostUrl: '',
-      youtubeUrl: '',
+      links: {
+        youtube: '',
+        devpost: '',
+        sourceCode: '',
+      },
       sponsorPrizes: '',
       teamMembers: '',
-      teamMembersEmails: '',
       title: '',
+      mentorNominations: '',
+      draftStatus: '',
     });
     setActiveModal(NEW);
   };
@@ -67,13 +76,27 @@ export default ({ hackathons }) => {
 
   const formatProject = (project) => {
     project.sponsorPrizes = stringToArr(project.sponsorPrizes);
-    project.teamMembers = stringToArr(project.teamMembers);
-    project.teamMembersEmails = stringToArr(project.teamMembersEmails);
     return project;
   };
 
   const handleSave = async () => {
-    if (!Object.values(data).every((field) => field === 0 || !!field)) {
+    console.log(data);
+
+    const requiredFields = [
+      'title',
+      'description',
+      'teamMembers',
+      'links',
+      'sponsorPrizes',
+    ];
+
+    if (
+      !Object.keys(data).some(
+        (key) =>
+          (requiredFields.includes(key) && data[key] === 0) ||
+          (requiredFields.includes(key) && !!data[key])
+      )
+    ) {
       // eslint-disable-next-line no-alert
       alert('All fields required');
       return;
@@ -108,20 +131,25 @@ export default ({ hackathons }) => {
     setData({
       ...projects[key],
       id: key,
-      teamMembers: projects[key].teamMembers?.toString(),
-      teamMembersEmails: projects[key].teamMembersEmails?.toString(),
+      teamMembers: projects[key].teamMembers,
       sponsorPrizes: projects[key].sponsorPrizes?.toString(),
     });
     setActiveModal(EDIT);
   };
 
-  const handleChange = (field, e) => {
+  const handleChange = (field, e, custom = false) => {
     setData({
       ...data,
-      [field]: e.target.value,
+      [field]: custom ? e : e.target.value,
     });
   };
 
+  const handleChangeLink = (linkField, e) => {
+    const currentData = data;
+    currentData.links[linkField] = e.target.value;
+    setData(currentData);
+  };
+
   return (
     <Page
       currentPath="Livesite"
@@ -140,6 +168,7 @@ export default ({ hackathons }) => {
         handleClose={handleCloseModal}
         handleSave={handleSave}
         modalAction={activeModal}
+        noOverflow={innerModalOpen}
       >
         <Label>Title</Label>
         <Input value={data.title} onChange={(e) => handleChange('title', e)} />
@@ -155,23 +184,39 @@ export default ({ hackathons }) => {
         />
         <Label>Devpost Url</Label>
         <Input
-          value={data.devpostUrl}
-          onChange={(e) => handleChange('devpostUrl', e)}
+          value={data.links?.devpost}
+          onChange={(e) => handleChangeLink('devpost', e)}
         />
         <Label>Youtube Url</Label>
         <Input
-          value={data.youtubeUrl}
-          onChange={(e) => handleChange('youtubeUrl', e)}
+          value={data.links?.youtube}
+          onChange={(e) => handleChangeLink('youtube', e)}
         />
-        <Label>Team Members (Comma separated)</Label>
+        <Label>Source Code Url</Label>
         <Input
+          value={data.links?.sourceCode}
+          onChange={(e) => handleChangeLink('sourceCode', e)}
+        />
+        <Label>Charity Choice</Label>
+        <Input
+          value={data.charityChoice}
+          onChange={(e) => handleChange('charityChoice', e)}
+        />
+        <Label>Team Members</Label>
+        <TeamMembersSelector
           value={data.teamMembers}
-          onChange={(e) => handleChange('teamMembers', e)}
+          updateValue={handleChange}
+          fnNoOverflow={setInnerModalOpen}
+        />
+        <Label>Mentor Nominations</Label>
+        <Input
+          value={data.mentorNominations}
+          onChange={(e) => handleChange('mentorNominations', e)}
         />
-        <Label>Team Emails (Comma separated)</Label>
+        <Label>Draft Status</Label>
         <Input
-          value={data.teamMembersEmails}
-          onChange={(e) => handleChange('teamMembersEmails', e)}
+          value={data.draftStatus}
+          onChange={(e) => handleChange('draftStatus', e)}
         />
       </Modal>
     </Page>