diff --git a/forum/src/components/Atoms.tsx b/forum/src/components/Atoms.tsx
index 233e7fc60..fbd9c29e0 100644
--- a/forum/src/components/Atoms.tsx
+++ b/forum/src/components/Atoms.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { atom } from 'recoil';
-import { useRecoilState } from 'recoil';
+import * as React from "react";
+import { atom } from "recoil";
+import { useRecoilState } from "recoil";
 
-export const TagState = atom({
-    key: 'tagState',
-    default: [],
-  });
\ No newline at end of file
+export const TagState = atom<string[]>({
+  key: "tagState",
+  default: [],
+});
diff --git a/forum/src/components/BoardMenu.tsx b/forum/src/components/BoardMenu.tsx
index 6076e6143..af5bd1d7a 100644
--- a/forum/src/components/BoardMenu.tsx
+++ b/forum/src/components/BoardMenu.tsx
@@ -26,7 +26,6 @@ const menuItems: any[] = [
   //   icon: <FreeChatIcon />,
   //   title: "School Select"
   // },
-  
 ];
 
 const BoardMenu = () => {
diff --git a/forum/src/components/FilterMenu.tsx b/forum/src/components/FilterMenu.tsx
index 8c25b730f..51ef87765 100644
--- a/forum/src/components/FilterMenu.tsx
+++ b/forum/src/components/FilterMenu.tsx
@@ -1,17 +1,16 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import TagsModal from "./TagsModal";
-
+import SearchTags from "./SearchTags";
 
 const FilterMenu = () => {
   const [openSchoolModal, setOpenSchoolModal] = useState(false);
   const [openTagsModal, setOpenTagsModal] = useState(false);
-  
+
   const navigate = useNavigate();
 
   const showTagsModal = () => {
     setOpenSchoolModal(true);
-  }
+  };
 
   return (
     // New component created by Michael -- Zero functionality so far, moreso there for visuals
@@ -34,7 +33,7 @@ const FilterMenu = () => {
       >
         Select the School
       </h1>
-      
+
       {/* School Select Div */}
       <h1>Undergrad, Grad</h1>
       <div className="border px-4 py-2 rounded-xl">
@@ -44,9 +43,9 @@ const FilterMenu = () => {
       <div className="border px-4 py-2 rounded-xl">
         <h1>English</h1>
       </div>
-      <br/>
+      <br />
       <div>
-      <TagsModal />
+        <SearchTags />
       </div>
     </div>
   );
diff --git a/forum/src/components/SearchTags.tsx b/forum/src/components/SearchTags.tsx
new file mode 100644
index 000000000..89887814d
--- /dev/null
+++ b/forum/src/components/SearchTags.tsx
@@ -0,0 +1,185 @@
+import React, { useState } from "react";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { atom } from "recoil";
+import { TagState } from "./Atoms";
+
+const SearchTags: React.FC = () => {
+  const [show, setShow] = useState(false);
+  const toggleShow = () => setShow(!show);
+
+  const tagState = useRecoilValue(TagState);
+
+  const [selectedTags, setSelectedTags] = useState<[]>([]);
+  const setTagsSelected = useSetRecoilState(TagState);
+  {
+    /* Later, use useEffect hook to fetch tags from the server side. */
+  }
+  const tags: Array<string> = [
+    "alpha",
+    "apple",
+    "adios",
+    "amigo",
+    "amino",
+    "bravo",
+    "charlie",
+    "delta",
+  ];
+  const academicTags: Array<string> = [
+    "Courses",
+    "Professors",
+    "Seminars/Labs",
+    "Research",
+    "School Applications",
+  ];
+  const campusTags: Array<string> = [
+    "Facilities",
+    "Circles",
+    "Events",
+    "Scholarships",
+  ];
+  const lifeTags: Array<string> = [
+    "Gourmet",
+    "Culture",
+    "Languages",
+    "Housing",
+    "Travels",
+    "Events",
+  ];
+  const jobTags: Array<string> = ["Part-time", "Internships", "Job Hunting"];
+
+  const [query, setQuery] = useState("");
+
+  const handleClick = (item: string) => {
+    if (!selectedTags.includes(item)) {
+      setSelectedTags((selectedTags) => [...selectedTags, item]);
+    }
+  };
+
+  const handleCloseModal = () => {
+    toggleShow();
+    setSelectedTags([]);
+  };
+
+  const handleClose = () => {
+    setSelectedTags([]);
+    setQuery("");
+    setShow(false);
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    if (selectedTags.indexOf(value) === -1) {
+      setSelectedTags([...selectedTags, value]);
+    } else {
+      setSelectedTags(selectedTags.filter((item) => item !== value));
+    }
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    toggleShow();
+    setTagsSelected(selectedTags);
+    setQuery("");
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
+        onClick={toggleShow}
+      >
+        Choose Tags
+      </button>
+      {/* -------------------------------------------------- */}
+      <div
+        className={`${
+          !show && "hidden"
+        } fixed flex flex-col top-1/4 left-1/3 w-1/3 min-h-1/3 border shadow-lg rounded-lg overflow-y-auto`}
+      >
+        <div className="modal-header flex sticky top-0 bg-white items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
+          <h5
+            className="text-xl font-medium leading-normal text-gray-800 font-sans"
+            id="exampleModalLabel"
+          >
+            Choose Your Tags
+          </h5>
+        </div>
+        {/* SEARCH COMPONENT PART */}
+        <div className="modal-body flex flex-col">
+          <div>
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="h-full w-full px-4 py-4 shadow-lg rounded-md"
+              placeholder="Search"
+            />
+          </div>
+          <ul className="py-1 shadow-lg rounded-lg">
+            {tags
+              .filter((item) => {
+                const searchTerm = query.toLowerCase();
+                const existingTerm = item.toLocaleLowerCase();
+                return searchTerm && existingTerm.startsWith(searchTerm);
+              })
+              .map((item) => (
+                <li
+                  className="px-4 py-2 hover:bg-gray-100 font-sans"
+                  onClick={() => handleClick(item)}
+                >
+                  {item}
+                </li>
+              ))}
+          </ul>
+
+          <div className="grid grid-cols-3 gap-4 items-center justify-between relative p-4 border-b">
+            {tags.map((tag) => (
+              <button
+                key={tag}
+                className="inline-block bg-gray-200 w-20 hover:bg-gray-300 px-2 py-1 rounded-full mr-2 mb-2 font-sans"
+                onClick={() => handleClick(tag)}
+              >
+                {tag}
+              </button>
+            ))}
+          </div>
+          {/* DISPLAY FOR CURRENT SELECTED TAGS */}
+          {selectedTags.length > 0 && (
+            <div className="my-2 w-full shadow-lg rounded-lg">
+              {selectedTags.map((tag) => (
+                <button
+                  key={tag}
+                  className="inline-block bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded-full mr-2 mb-2 font-sans"
+                  onClick={() =>
+                    setSelectedTags(selectedTags.filter((item) => item !== tag))
+                  }
+                >
+                  {tag}
+                </button>
+              ))}
+            </div>
+          )}
+          <div className="modal-footer flex flex-wrap sticky bottom-0 w-full h-18 bg-white items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
+            <button
+              type="submit"
+              className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
+              onClick={handleSubmit}
+            >
+              Apply
+            </button>
+            <button
+              type="button"
+              className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
+              onClick={handleCloseModal}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SearchTags;
diff --git a/forum/src/components/TagsModal.tsx b/forum/src/components/TagsModal.tsx
deleted file mode 100644
index 143fbbb2b..000000000
--- a/forum/src/components/TagsModal.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from "react";
-import { useState, useEffect } from "react";
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { atom } from 'recoil';
-import { TagState } from './Atoms'
-
-const TagsModal: React.FC = () => {
-  const [show, setShow] = useState(false);
-
-  const handleClose = () => setShow(false);
-  const toggleShow = () => setShow(!show);
-  
-  const testing = useRecoilState(TagState)
-
-  const tags: Array<string> = ["tag1", "tag2", "tag3"];
-  /* const tags = useRecoilValue(TagState) */
-  const [selectedTags, setSelectedTags] = useState<[]>([])
-  const setTagsSelected = useSetRecoilState(TagState);
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    if (selectedTags.indexOf(value) === -1) {
-      setSelectedTags([...selectedTags, value]);
-    } else {
-      setSelectedTags(selectedTags.filter((item) => item !== value));
-    }
-  };
-  console.log(selectedTags);
-  
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    toggleShow();
-    setTagsSelected(selectedTags)
-  };
-  console.log(testing)
-  return (
-    <>
-      <button
-        type="button"
-        className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
-        onClick={toggleShow}
-      >
-        Choose Tags
-      </button>
-
-      {/* avoid using undefined class name and attributes (modal and data-bs-blablabla are from the library Bootstrap, which is not installed in Forum app) */}
-      {/* Why not making use of the state `show` since you are already defined one? */}
-      {/* TODO for KJ: Remove all undefined classnames and attributes (those from Bootstrap) (Hao removed some but plz check if there are other not removed ones) */}
-      {/* TODO for KJ: Try to adjust the size and margin (You can do it after moving the modal to board menu) */}
-      <div
-        className={`${!show && "hidden"} fixed top-1/4 left-1/4 border outline-none overflow-x-hidden overflow-y-auto`}
-        id="1"
-        tabIndex={-1}
-      >
-        <div className="modal-dialog relative w-auto pointer-events-none">
-          <div className="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
-            <div className="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
-              <h5
-                className="text-xl font-medium leading-normal text-gray-800"
-                id="exampleModalLabel"
-              >
-                Choose Your Tags
-              </h5>
-            </div>
-            <div className="modal-body relative p-4">
-              {tags.map(tag => (
-                <div>
-                <label key={tag}>
-                  <input
-                    type="checkbox"
-                    value={tag}
-                    checked={selectedTags.indexOf(tag) !== -1}
-                    onChange={handleChange}
-                  />
-                  {tag}
-                </label>
-                </div>
-              ))}
-            </div>
-            <div className="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
-              <button
-                type="button"
-                className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
-                onClick={toggleShow}
-              >
-                Close
-              </button>
-              <button
-                type="submit"
-                className="border bg-light-lighter hover:bg-light-main cursor-pointer text-white text-center rounded-xl px-4 py-2"
-                onClick={handleSubmit}
-              >
-                Apply
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default TagsModal;
diff --git a/forum/src/root.component.tsx b/forum/src/root.component.tsx
index 83f00d8a2..82a7857b9 100644
--- a/forum/src/root.component.tsx
+++ b/forum/src/root.component.tsx
@@ -7,7 +7,7 @@ import App from "@app/components/App";
 import translationEN from "@app/constants/locales/en/translation.json";
 import translationJA from "@app/constants/locales/ja/translation.json";
 import { ThemeProvider } from "@app/utils/theme-context";
-import { RecoilRoot } from 'recoil';
+import { RecoilRoot } from "recoil";
 
 import "@app/styles/main.css";