diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/NewTicketModal.tsx
new file mode 100644
index 0000000..02965fb
--- /dev/null
+++ b/client/src/components/NewTicketModal.tsx
@@ -0,0 +1,95 @@
+import React, { FC, useState, ChangeEvent, useEffect, FormEvent } from "react";
+import { Modal } from "./Modal";
+import { AvatarList } from "./AvatarList";
+import { User } from "../types/User";
+import { FilterBar } from "./FilterBar";
+import { HttpResponse } from "../types/HttpResponse";
+import { get, put, patch } from "../utils/http";
+import { Constants } from "../utils/Constants";
+import { UsersModalEntry } from "./UsersModalEntry";
+import { useParams } from "react-router-dom";
+import _ from "underscore";
+
+interface IProps {
+  show: boolean;
+  handleClose: () => void;
+  // users: User[];
+  // allUsers: User[];
+}
+
+export const NewTicketModal: FC<IProps> = ({
+  show,
+  handleClose
+  // users,
+  // allUsers
+}) => {
+  const [filterText, setFilterText] = useState<string>("");
+  // const [members, setMembers] = useState<User[]>(users);
+  const { id } = useParams();
+
+  const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
+    e: ChangeEvent<HTMLInputElement>
+  ) => {
+    setFilterText(e.target.value);
+  };
+
+  const handleSubmit: (event: FormEvent<HTMLFormElement>) => void = async (
+    e: FormEvent
+  ) => {
+    e.preventDefault();
+    await patch<User[]>(
+      `${Constants.projectsURI}/${id}/members`,
+      {}
+      // members.map(m => m.id)
+    );
+    handleClose();
+  };
+
+  useEffect(() => {});
+  return (
+    <Modal show={show} handleClose={handleClose}>
+      <div className="row valign-wrapper blue">
+        <div className="col s10">
+          <h4 className="white-text">New Ticket</h4>
+        </div>
+        <div className="col s2">
+          <i
+            className="right material-icons blue lighten-3 circle"
+            onClick={handleClose}
+          >
+            close
+          </i>
+        </div>
+      </div>
+      <div className="center">
+        {/* <AvatarList users={users} /> */}
+        {/* <FilterBar
+          filterText={filterText}
+          clearFilterText={() => setFilterText("")}
+          handleChange={handleChange}
+        /> */}
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        {/* <ul>
+          {allUsers.map((u: User) => (
+            <li key={u.id}>
+              <UsersModalEntry
+                user={u}
+                members={members}
+                setMembers={setMembers}
+              />
+            </li>
+          ))}
+        </ul> */}
+        <div className="modal-footer">
+          <input
+            type="submit"
+            className="modal-close waves-effect waves-green btn"
+            value="Done"
+          />
+        </div>
+      </form>
+    </Modal>
+  );
+};
diff --git a/client/src/components/TabRouter.tsx b/client/src/components/TabRouter.tsx
index 7bdd438..d235831 100644
--- a/client/src/components/TabRouter.tsx
+++ b/client/src/components/TabRouter.tsx
@@ -24,10 +24,10 @@ export const TabRouter: FC<IProps> = ({
   activities
 }) => {
   const { url } = useRouteMatch();
+
   return (
     <>
       <div className="row">
-        <NewTicketModal handleClose={() => {}} show={true} />
         <TabRouterHeader tabNames={tabNames} />
 
         <Redirect from={url} to={`${url}/tickets`} />
diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
index 43ac75a..f75392b 100644
--- a/client/src/components/TicketList.tsx
+++ b/client/src/components/TicketList.tsx
@@ -6,6 +6,7 @@ import { FilterBar } from "./FilterBar";
 import { put } from "../utils/http";
 import { HttpResponse } from "../types/HttpResponse";
 import { Constants } from "../utils/Constants";
+import { NewTicketModal } from "./NewTicketModal";
 
 type TicketListProps = {
   tickets: Ticket[];
@@ -20,6 +21,7 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
 
   const onClick: (e: MouseEvent) => void = (e: MouseEvent) => {
     e.preventDefault();
+    setShowNew(true);
   };
   const handleChange: (e: ChangeEvent<HTMLInputElement>) => void = (
     e: ChangeEvent<HTMLInputElement>
@@ -27,9 +29,17 @@ export const TicketList: FC<TicketListProps> = ({ tickets }) => {
     setFilterText(e.target.value);
   };
 
+  const [showNew, setShowNew] = useState(false);
+
   return (
     <>
       <div className="row valign-wrapper">
+        <NewTicketModal
+          handleClose={() => {
+            setShowNew(false);
+          }}
+          show={showNew}
+        />
         <h3>Tickets</h3>
         <FloatingButton
           color=" blue-grey lighten-4"