diff --git a/frontend/src/main-page/grants/GrantPage.tsx b/frontend/src/main-page/grants/GrantPage.tsx
index 4ba371d..149cac6 100644
--- a/frontend/src/main-page/grants/GrantPage.tsx
+++ b/frontend/src/main-page/grants/GrantPage.tsx
@@ -3,6 +3,7 @@ import GrantSearch from "./filter-bar/GrantSearch.tsx";
 import NewGrantModal from "./new-grant/NewGrantModal.tsx";
 import { useEffect, useState } from "react";
 import { Grant } from "../../../../middle-layer/types/Grant.ts";
+import FilterBar from "./filter-bar/FilterBar.tsx";
 import GrantItem from "./grant-view/GrantView.tsx";
 import { useAuthContext } from "../../context/auth/authContext";
 import {
@@ -114,7 +115,9 @@ function GrantPage({}: GrantPageProps) {
         </div>
         <GrantSearch />
         <div className="flex w-full justify-between py-2 gap-4">
-            <Button text="Filters Coming Soon" onClick={() => {}} className="border-2 border-grey-500 bg-white" />
+          <span className="text-lg font-semibold">
+            <FilterBar />
+          </span>
           <AddGrantButton onClick={() => setShowNewGrantModal(true)} />
         </div>
 
diff --git a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
index 729f6f2..8b54f0d 100644
--- a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
+++ b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+//import { Link } from "react-router-dom";
 import {
   Status,
   stringToStatus,
@@ -8,8 +8,9 @@ import {
   updateFilter,
 } from "../../../external/bcanSatchel/actions.ts";
 import { observer } from "mobx-react-lite";
-import CalendarDropdown from "./CalendarDropdown.tsx";
-import { FaChevronRight } from "react-icons/fa";
+//import CalendarDropdown from "./CalendarDropdown.tsx";
+//import { FaChevronRight } from "react-icons/fa";
+import StatusDropdown from "./StatusDropdown";
 
 interface FilterBarProps {
   name: string;
@@ -44,40 +45,24 @@ const FilterBar: React.FC = observer(() => {
   }
 
   return (
-    <div className="sortbar flex flex-col gap-4 bg-grey-100 p-6 rounded-[1.2rem] border-[0.1rem] border-black">
-      <div>
-        <div className="flex pb-2">{"Filter by Date"}</div>
-        <CalendarDropdown />
-      </div>
-      <div>
-        <div className="flex pb-2">{"Filter by Status"}</div>
-        <ul className="flex flex-col gap-2">
-          {linkList.map((item, index) => (
-            <li key={index}>
-              <Link
-                onClick={(e) => categoryClicked(e, item.name, item.linkTo)}
-                to={item.linkTo ? item.linkTo : "#"}
-              >
-                <div
-                  className={`border hover:bg-primary-800 ${
-                    selected === item.name ? "bg-primary-900" : "bg-white"
-                  }`}
-                >
-                  <div
-                    className={`flex w-full justify-between items-center ${
-                    selected === item.name ? "text-white" : "text-black"
-                    }`}
-                  >
-                    {item.name}
-                    <FaChevronRight />
-                  </div>
-                </div>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
+  <div className="flex items-center gap-2 flex-wrap">
+    <button className="flex items-center gap-2 border-2 border-grey-400 rounded-full px-5 py-2 bg-white text-grey-900 text-base whitespace-nowrap shadow-xl">
+      My Grants
+    </button>
+    <button className="flex items-center gap-2 border border-grey-400 rounded-full px-5 py-2 bg-white text-grey-900 text-base whitespace-nowrap">
+      BCAN Eligible
+    </button>
+    <button className="flex items-center gap-2 border border-grey-400 rounded-full px-5 py-2 bg-white text-grey-900 text-base whitespace-nowrap">
+      ⇅ Alphabetical
+    </button>
+    <button className="flex items-center gap-2 border border-grey-400 rounded-full px-5 py-2 bg-white text-grey-900 text-base whitespace-nowrap">
+      ⇅ Due Date
+    </button>
+    <button className="flex items-center gap-2 border border-grey-400 rounded-full px-5 py-2 bg-white text-grey-900 text-base whitespace-nowrap">
+      ⇅ Grant Amount
+    </button>
+    <StatusDropdown />
+  </div>
   );
 });
 
diff --git a/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx b/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx
new file mode 100644
index 0000000..d5c467f
--- /dev/null
+++ b/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx
@@ -0,0 +1,72 @@
+
+import React, { useState } from "react";
+import {
+  Status,
+  getColorStatus,
+} from "../../../../../middle-layer/types/Status.ts";
+import { updateFilter } from "../../../external/bcanSatchel/actions.ts";
+import { observer } from "mobx-react-lite";
+
+const StatusDropdown: React.FC = observer(() => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<Status | null>(null);
+
+  const statuses = [
+    Status.Active,
+    Status.Pending,
+    Status.Potential,
+    Status.Rejected,
+    Status.Inactive,
+  ];
+
+  function handleSelect(status: Status) {
+    const newSelected = selected === status ? null : status;
+    setSelected(newSelected);
+    updateFilter(newSelected);
+  }
+
+
+  return (
+    <div className="relative">
+      <button
+        className="flex items-center gap-2 border border-grey-400 rounded-full px-5 py-2 bg-white text-grey-900 text-base whitespace-nowrap"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        Status {isOpen ? "∧" : "∨"}
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-12 left-0 bg-white border border-primary-900 rounded-md p-4 z-50 shadow-lg min-w-[400px]">
+
+          <div className="grid grid-cols-3 gap-2">
+            {statuses.map((status) => (
+              <div
+                key={status}
+                className="flex items-center gap-2 cursor-pointer"
+                onClick={() => handleSelect(status)}
+              >
+                <input
+                  type="checkbox"
+                  checked={selected === status}
+                  onChange={() => handleSelect(status)}
+                  className="cursor-pointer w-4 h-4 flex-shrink-0"
+                />
+                <span
+                  className="px-3 py-1 rounded-full text-sm font-medium"
+                  style={{
+                    backgroundColor: getColorStatus(status, "light"),
+                    color: getColorStatus(status, "dark"),
+                  }}
+                >
+                  {status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default StatusDropdown;
\ No newline at end of file