diff --git a/src/app/(private)/friends/_components/AddFriendButton.tsx b/src/app/(private)/friends/_components/AddFriendButton.tsx
index 83e3d08..33e43a4 100644
--- a/src/app/(private)/friends/_components/AddFriendButton.tsx
+++ b/src/app/(private)/friends/_components/AddFriendButton.tsx
@@ -1,14 +1,14 @@
 "use client";
-import React from 'react';
-import { UserRoundPlus } from 'lucide-react';
+import React from "react";
+import { UserRoundPlus } from "lucide-react";
 
 export default function AddFriendButton() {
-    return (
-        <button className="bg-yellow-500 text-black border-black shadow-md px-6 py-3 rounded-md mt-4 flex items-center">
-            <div>
-              <UserRoundPlus />
-            </div>
-             Add New Friend
-        </button>
-    );
-}
\ No newline at end of file
+  return (
+    <button className="bg-yellow-500 text-black border-black shadow-md px-5 py-2 rounded-md flex items-center">
+      <div>
+        <UserRoundPlus />
+      </div>
+      Add New Friend
+    </button>
+  );
+}
diff --git a/src/app/(private)/friends/_components/FriendRequest.tsx b/src/app/(private)/friends/_components/FriendRequest.tsx
index cd0c0a8..9ca545d 100644
--- a/src/app/(private)/friends/_components/FriendRequest.tsx
+++ b/src/app/(private)/friends/_components/FriendRequest.tsx
@@ -5,6 +5,7 @@ interface FriendRequestProps {
   name: string;
   onAccept: () => void;
   onDeny: () => void;
+  onCancel: () => void;
   isSender: boolean;
 }
 
@@ -12,6 +13,7 @@ export default function FriendRequest({
   name,
   onAccept,
   onDeny,
+  onCancel,
   isSender,
 }: FriendRequestProps) {
   {
@@ -29,7 +31,7 @@ export default function FriendRequest({
         {isSender ? (
           <button
             className="bg-red-500 text-black px-4 py-2 rounded-md border border-black"
-            onClick={onDeny}
+            onClick={onCancel}
           >
             Cancel
           </button>
diff --git a/src/app/(private)/friends/_components/Friends.tsx b/src/app/(private)/friends/_components/Friends.tsx
index 9043e46..8b938e8 100644
--- a/src/app/(private)/friends/_components/Friends.tsx
+++ b/src/app/(private)/friends/_components/Friends.tsx
@@ -8,15 +8,16 @@ import { getApiBase } from "@/utils/etc/apiBase";
 import { useUser } from "@/utils/context/userContext";
 import { toast } from "react-hot-toast";
 import Loading from "@/app/components/loading";
+import AddFriendModal from "../../hangouts/_components/AddFriendModal";
 
 type FetchFriendsResponse = {
   status: string;
   friends: Friend[];
 };
 
-type Friend = {
+export type Friend = {
   id: string;
-  friend_uuid: string;
+  friend_auth_id: string;
   friend_email: string;
   friend_username: string;
   status: string;
@@ -37,10 +38,15 @@ export default function Friends() {
   const [query, setQuery] = useState("");
   const [suggestion, setSuggestion] = useState<Friend[] | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
+  const [hasTrigged, setHasTrigged] = useState<boolean>(false);
   const user = useUser();
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   async function fetchFriends() {
-    setLoading(true);
+    if (!hasTrigged) {
+      setLoading(true);
+      setHasTrigged(true);
+    }
     const base = getApiBase();
     const response = await fetch(`${base}/fetch-friends`, {
       method: "POST",
@@ -91,7 +97,11 @@ export default function Friends() {
     }
   }
 
-  async function declineFriendRequest(friendshipId: string, removing: boolean) {
+  async function declineFriendRequest(
+    friendshipId: string,
+    removing: boolean,
+    canceling?: boolean
+  ) {
     const base = getApiBase();
     const response = await fetch(`${base}/remove-friend`, {
       method: "POST",
@@ -104,12 +114,17 @@ export default function Friends() {
     });
 
     if (response.ok) {
-      const toastSuccessMessage = removing
+      let toastSuccessMessage = removing
         ? "Succesfully removed friend"
         : "Succesfully declined friend request";
-      const toastErrorMessage = removing
+      let toastErrorMessage = removing
         ? "Unable to removed friend"
         : "Unable to decline friend request";
+      if (canceling) {
+        toastSuccessMessage = "Succesfully canceled pending friend request.";
+        toastErrorMessage = "Unable to cancel pending friend-request";
+      }
+
       const data = (await response.json()) as APIResponse;
       if (data.status !== 200) {
         toast.error(toastErrorMessage, {
@@ -145,37 +160,93 @@ export default function Friends() {
   }, [query]);
 
   return (
-    <div className="flex flex-col pt-10 bg-lightBlue min-h-screen text-black w-full px-10">
-      <div className="font-semibold text-5xl mb-6 pb-8">Friends</div>
-      {loading ? (
-        <Loading />
-      ) : (
-        <>
-          <div className="pb-8">
-            <SearchBar
-              value={query}
-              onChange={handleChange}
-              placeholder=" Search friends..."
-            />
-          </div>
-          {suggestion ? (
-            suggestion?.map((friend) => {
-              if (friend.status === "pending") {
-                return (
-                  <FriendRequest
-                    isSender={friend.sender === user?.auth_id}
-                    name={friend.friend_username}
-                    onAccept={() => {
-                      acceptFriendRequest(friend.id);
-                    }}
-                    onDeny={() => {
-                      declineFriendRequest(friend.id, false);
-                    }}
-                  />
-                );
-              } else
-                return (
+    <>
+      <AddFriendModal
+        friends={friends.map((friend) => friend.friend_auth_id)}
+        pendingFriends={pendingFriends.map((friend) => friend.friend_auth_id)}
+        isOpen={isModalOpen}
+        onClose={(rerender: boolean) => {
+          if (rerender) {
+            fetchFriends();
+          }
+          setIsModalOpen(false);
+        }}
+      />
+
+      <div className="flex flex-col pt-10 bg-lightBlue min-h-screen text-black w-full px-10">
+        <div className="font-semibold text-5xl mb-6 pb-8">Friends</div>
+        {loading ? (
+          <Loading />
+        ) : (
+          <>
+            <div className="flex w-full items-center justify-between pb-8">
+              <SearchBar
+                value={query}
+                onChange={handleChange}
+                placeholder=" Search friends..."
+              />
+              <div
+                className="flex w-full justify-end"
+                onClick={() => {
+                  setIsModalOpen(true);
+                }}
+              >
+                <AddFriendButton />
+              </div>
+            </div>
+            {suggestion ? (
+              suggestion?.map((friend) => {
+                if (friend.status === "pending") {
+                  return (
+                    <div key={`pending-${friend.id}`} className="pb-8">
+                      <FriendRequest
+                        isSender={friend.sender === user?.auth_id}
+                        name={friend.friend_username}
+                        onAccept={() => {
+                          acceptFriendRequest(friend.id);
+                        }}
+                        onDeny={() => {
+                          declineFriendRequest(friend.id, false);
+                        }}
+                        onCancel={() => {
+                          declineFriendRequest(friend.id, false, true);
+                        }}
+                      />
+                    </div>
+                  );
+                } else
+                  return (
+                    <div key={`pending-${friend.id}`} className="pb-8">
+                      <FriendList
+                        name={friend.friend_username}
+                        onRemove={() => {
+                          declineFriendRequest(friend.id, true);
+                        }}
+                      />
+                    </div>
+                  );
+              })
+            ) : (
+              <div className="w-full space-y-4 max-w-full pb-8">
+                {pendingFriends.map((friend) => (
                   <div key={`pending-${friend.id}`} className="pb-8">
+                    <FriendRequest
+                      isSender={friend.sender === user?.auth_id}
+                      name={friend.friend_username}
+                      onAccept={() => {
+                        acceptFriendRequest(friend.id);
+                      }}
+                      onDeny={() => {
+                        declineFriendRequest(friend.id, false);
+                      }}
+                      onCancel={() => {
+                        declineFriendRequest(friend.id, false, true);
+                      }}
+                    />
+                  </div>
+                ))}
+                {friends.map((friend) => (
+                  <div key={`friend-${friend.id}`} className="pb-8">
                     <FriendList
                       name={friend.friend_username}
                       onRemove={() => {
@@ -183,42 +254,12 @@ export default function Friends() {
                       }}
                     />
                   </div>
-                );
-            })
-          ) : (
-            <div className="w-full space-y-4 max-w-full pb-8">
-              {pendingFriends.map((friend) => (
-                <div key={`pending-${friend.id}`} className="pb-8">
-                  <FriendRequest
-                    isSender={friend.sender === user?.auth_id}
-                    name={friend.friend_username}
-                    onAccept={() => {
-                      acceptFriendRequest(friend.id);
-                    }}
-                    onDeny={() => {
-                      declineFriendRequest(friend.id, false);
-                    }}
-                  />
-                </div>
-              ))}
-              {friends.map((friend) => (
-                <div key={`friend-${friend.id}`} className="pb-8">
-                  <FriendList
-                    name={friend.friend_username}
-                    onRemove={() => {
-                      declineFriendRequest(friend.id, true);
-                    }}
-                  />
-                </div>
-              ))}
-            </div>
-          )}
-
-          <div className="flex w-full  justify-center">
-            <AddFriendButton />
-          </div>
-        </>
-      )}
-    </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/src/app/(private)/friends/actions.ts b/src/app/(private)/friends/actions.ts
new file mode 100644
index 0000000..42420ac
--- /dev/null
+++ b/src/app/(private)/friends/actions.ts
@@ -0,0 +1,27 @@
+"use server";
+import { createClient } from "@/utils/supabase/server";
+
+export type Suggestions = {
+  auth_id: string;
+  username: string;
+}[];
+
+export async function findPeople(username: string) {
+  const supabase = await createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user?.id) {
+    console.error("User not authenticated");
+    return { status: 401, error: "User not authenticated" };
+  }
+
+  const { data, error } = await supabase
+    .from("users")
+    .select("auth_id, username")
+    .ilike("username", `%${username}%`);
+
+  return data as Suggestions;
+}
diff --git a/src/app/(private)/hangouts/_components/AddFriendModal.tsx b/src/app/(private)/hangouts/_components/AddFriendModal.tsx
new file mode 100644
index 0000000..18f8444
--- /dev/null
+++ b/src/app/(private)/hangouts/_components/AddFriendModal.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import React, { ChangeEvent, useRef, useState } from "react";
+import { CheckIcon, XIcon } from "@/app/components/Icons";
+import { getApiBase } from "@/utils/etc/apiBase";
+import toast from "react-hot-toast";
+import { useUser } from "@/utils/context/userContext";
+import SearchBar from "../../friends/_components/SearchBar";
+import { findPeople, Suggestions } from "../../friends/actions";
+
+type AddFriendModalProps = {
+  isOpen: boolean;
+  friends: string[];
+  pendingFriends: string[];
+  onClose(rerender: boolean): void; // closes modal
+};
+
+const TIMER: number = 150; // ms
+
+const AddFriendModal = ({
+  isOpen,
+  friends,
+  onClose,
+  pendingFriends,
+}: AddFriendModalProps) => {
+  if (!isOpen) return null;
+  const [people, setPeople] = useState<Suggestions>([]);
+  const [requestSent, setRequestSent] = useState<string[]>([]);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const user = useUser();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    // debounce
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(async () => {
+      const username = e.target.value;
+      if (username.trim() === "" || !username) {
+        setPeople([]);
+        return;
+      }
+      const suggestions = await findPeople(e.target.value);
+
+      if (Array.isArray(suggestions)) {
+        setPeople(
+          suggestions.filter((person) => {
+            if (!user) {
+              return;
+            }
+            return (
+              !friends.includes(user.auth_id) && person.auth_id != user?.auth_id
+            );
+          })
+        );
+      }
+    }, TIMER);
+  };
+
+  const sendFriendRequest = async (idToAdd: string) => {
+    const base = getApiBase();
+    const response = await fetch(`${base}/send-friend-request`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        user_A: user?.auth_id,
+        user_B: idToAdd,
+      }),
+    });
+    if (!response.ok) {
+      console.error("Failed to add friend", response.statusText);
+      toast.error("Error while sending friend request.");
+    } else {
+      toast.success("Successfully sent friend request.");
+      setRequestSent((prev) => [...prev, idToAdd]);
+    }
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className=" flex flex-col items-start justify-start bg-lightBlue rounded-lg p-6 w-full h-[700px] max-w-[900px] mx-4 relative border-2 border-darkBlue">
+            <div
+              className="ml-auto cursor-pointer "
+              onClick={() => {
+                onClose(requestSent.length > 0);
+              }}
+            >
+              <XIcon />
+            </div>
+            <div className="w-full mt-4 flex items-center justify-center mb-2">
+              <p className="font-extrabold text-3xl text-darkBlue pb-4">
+                Search for a friend
+              </p>
+            </div>
+            <div className="mb-0 w-full">
+              <SearchBar
+                placeholder="Type here.."
+                value=""
+                onChange={handleChange}
+              />
+            </div>
+            <div className="flex flex-col items-center justify-start w-full h-[500px] overflow-auto mt-[50px]">
+              {people.map((person) => {
+                return (
+                  <div
+                    className="flex items-center justify-between w-full h-[50px] mb-4 border-black border-b-2 px-12"
+                    key={person.auth_id}
+                  >
+                    <p className="text-[18px]">{person.username} </p>
+                    {requestSent.includes(person.auth_id) ||
+                    pendingFriends.includes(person.auth_id) ? (
+                      <div className="flex items-center justify-center w-[25%]">
+                        <CheckIcon />
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => {
+                          sendFriendRequest(person.auth_id);
+                        }}
+                        className=" w-[25%] p-[3.5px] rounded border-black border-2 mb-2"
+                      >
+                        Send friend request
+                      </button>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AddFriendModal;
diff --git a/src/app/components/Icons.tsx b/src/app/components/Icons.tsx
index 82d7445..189fd30 100644
--- a/src/app/components/Icons.tsx
+++ b/src/app/components/Icons.tsx
@@ -17,3 +17,22 @@ export const XIcon = () => {
     </svg>
   );
 };
+
+export const CheckIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-check-icon lucide-check"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+};