diff --git a/frontend/src/Components/AddUserToProject.tsx b/frontend/src/Components/AddUserToProject.tsx
index f567560..43d9345 100644
--- a/frontend/src/Components/AddUserToProject.tsx
+++ b/frontend/src/Components/AddUserToProject.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import Button from "./Button";
 import AddMember, { AddMemberInfo } from "./AddMember";
-import BackButton from "./BackButton";
 import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
 import GetAllUsers from "./GetAllUsers";
+import InputField from "./InputField";
 
 /**
  * Provides UI for adding a member to a project.
@@ -13,6 +13,7 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
   const [names, setNames] = useState<string[]>([]);
   const [users, setUsers] = useState<string[]>([]);
   const [usersProj, setUsersProj] = useState<ProjectMember[]>([]);
+  const [search, setSearch] = useState("");
 
   // Gets all users and project members for filtering
   GetAllUsers({ setUsersProp: setUsers });
@@ -36,8 +37,10 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
 
   // Attempts to add all of the selected users to the project
   const handleAddClick = async (): Promise<void> => {
-    if (names.length === 0)
+    if (names.length === 0) {
       alert("You have to choose at least one user to add");
+      return;
+    }
     for (const name of names) {
       const newMember: AddMemberInfo = {
         userName: name,
@@ -60,32 +63,47 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
   };
 
   return (
-    <div className="border-4 border-black bg-white flex flex-col items-center pt-10 rounded-3xl content-center pl-20 pr-20  h-[63vh] w-[50] overflow-auto">
+    <div className="border-4 border-black bg-white flex flex-col items-center py-10 px-20 rounded-3xl content-center overflow-auto">
       <h1 className="text-center font-bold text-[36px] pb-10">
         {props.projectName}
       </h1>
       <p className="p-1 text-center font-bold text-[26px]">
         Choose users to add:
       </p>
-      <div className="border-2 border-black pl-2 pr-2 pb-2 rounded-xl text-center overflow-auto h-[26vh] w-[26vh]">
-        <ul className="text-center font-medium space-y-2">
+
+      <div>
+        <InputField
+          placeholder={"Search users"}
+          type={"Text"}
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value);
+          }}
+        />
+        <ul className="font-medium space-y-2 border-2 border-black mt-2 px-2 pb-2 rounded-2xl text-center overflow-auto h-[26vh] w-[34vh]">
           <div></div>
-          {users.map((user) => (
-            <li
-              className={
-                names.includes(user)
-                  ? "items-start p-1 border-2 border-transparent rounded-full bg-orange-500 hover:bg-orange-600 text-white hover:cursor-pointer ring-2 ring-black"
-                  : "items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-400 hover:text-slate-100 hover:cursor-pointer"
-              }
-              key={user}
-              value={user}
-              onClick={() => {
-                handleUserClick(user);
-              }}
-            >
-              <span>{user}</span>
-            </li>
-          ))}
+          {users
+            .filter((user) => {
+              return search.toLowerCase() === ""
+                ? user
+                : user.toLowerCase().includes(search.toLowerCase());
+            })
+            .map((user) => (
+              <li
+                className={
+                  names.includes(user)
+                    ? "items-start p-1 border-2 border-transparent rounded-full bg-orange-500 transition-all hover:bg-orange-600  text-white hover:cursor-pointer ring-2 ring-black"
+                    : "items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-400 transition-all hover:text-white hover:cursor-pointer"
+                }
+                key={user}
+                value={user}
+                onClick={() => {
+                  handleUserClick(user);
+                }}
+              >
+                <span>{user}</span>
+              </li>
+            ))}
         </ul>
       </div>
       <p className="pt-10 pb-5 underline text-center font-bold text-[18px]">
@@ -99,9 +117,7 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
           }}
           type="button"
         />
-        <BackButton />
       </div>
-      <p className="text-center text-gray-500 text-xs"></p>
     </div>
   );
 }