diff --git a/src/app/components/form/CheckboxField.tsx b/src/app/components/form/CheckboxField.tsx
index a2a232c..1c3840d 100644
--- a/src/app/components/form/CheckboxField.tsx
+++ b/src/app/components/form/CheckboxField.tsx
@@ -1,17 +1,17 @@
 import { FieldValues, UseFormRegister } from "react-hook-form";
 import { CheckboxOptions } from "../../types";
 
-export const CheckboxField = ({ id, name, registerField, options }: Props) => {
-  return (
-    <div className="usa-checkbox" id={id} {...registerField(`${name}`)}>
+export const CheckboxField = ({ name, registerField, options }: Props) => (
+  <fieldset className="usa-fieldset">
+    <div>
       {options.map((option: CheckboxOptions) => (
-        <div key={option.id}>
+        <div className="usa-checkbox" key={option.id}>
           <input
             className="usa-checkbox__input"
             id={option.id}
             type="checkbox"
-            name={option.id}
             value={option.id}
+            {...registerField(`${name}`)}
           />
           <label className="usa-checkbox__label" htmlFor={option.id}>
             {option.label}
@@ -19,8 +19,8 @@ export const CheckboxField = ({ id, name, registerField, options }: Props) => {
         </div>
       ))}
     </div>
-  );
-};
+  </fieldset>
+);
 
 type Props = {
   id: string;
diff --git a/src/app/components/form/DropdownField.tsx b/src/app/components/form/DropdownField.tsx
index bfc55c6..132249e 100644
--- a/src/app/components/form/DropdownField.tsx
+++ b/src/app/components/form/DropdownField.tsx
@@ -24,10 +24,10 @@ export const DropdownField = ({
       <select
         className="usa-select"
         id={id}
-        {...registerField(`${name}`, { required: required })}
+        {...registerField(`${name}`)}
         aria-describedby={hint?.id}
       >
-        <option>- Select -</option>
+        <option value={undefined}>- Select -</option>
         {options.map((option: DropdownOptions) => (
           <option key={option.id} value={option.id}>
             {option.label}
diff --git a/src/app/components/institutions/InstitutionProvider.tsx b/src/app/components/institutions/InstitutionProvider.tsx
index f9126f1..5cc9707 100644
--- a/src/app/components/institutions/InstitutionProvider.tsx
+++ b/src/app/components/institutions/InstitutionProvider.tsx
@@ -6,11 +6,15 @@ import { College } from "../../types";
 
 export interface InstitutionContextShape {
   institutionsArray: College[] | undefined;
+  filteredInstitutions: College[] | [] | undefined;
+  setFilteredInstitutions: Function;
   institutionsObject: { [key: string]: College } | undefined;
 }
 
 export const InstitutionContext = createContext<InstitutionContextShape>({
   institutionsArray: undefined as College[] | undefined,
+  filteredInstitutions: [] as College[] | [] | undefined,
+  setFilteredInstitutions: Function,
   institutionsObject: undefined as { [key: string]: College } | undefined,
 });
 
@@ -18,6 +22,9 @@ export const InstitutionProvider = ({ children }: Props) => {
   const [institutionsArray, setInstitutionsArray] = useState<
     College[] | undefined
   >();
+  const [filteredInstitutions, setFilteredInstitutions] = useState<
+    College[] | undefined
+  >();
   const [institutionsObject, setInstitutionsObject] = useState<
     { [key: string]: College } | undefined
   >();
@@ -26,6 +33,7 @@ export const InstitutionProvider = ({ children }: Props) => {
     try {
       const result = await getInstitutions();
       setInstitutionsArray(result);
+      setFilteredInstitutions(result);
       // create object from array, indexed by institution id
       const objectForm: { [key: string]: College } = result.reduce(
         (acc, val) => ({ ...acc, [val.id]: val }),
@@ -44,9 +52,11 @@ export const InstitutionProvider = ({ children }: Props) => {
   const providerValue = useMemo(
     () => ({
       institutionsArray,
+      filteredInstitutions,
+      setFilteredInstitutions,
       institutionsObject,
     }),
-    [institutionsArray, institutionsObject],
+    [institutionsArray, filteredInstitutions, institutionsObject],
   );
 
   return (
diff --git a/src/app/components/layout/Browse.tsx b/src/app/components/layout/Browse.tsx
index 1a9e237..6694ffc 100644
--- a/src/app/components/layout/Browse.tsx
+++ b/src/app/components/layout/Browse.tsx
@@ -15,7 +15,7 @@ import { College } from "../../types";
 import arrow_upward from "../../assets/icons/arrow_upward.svg";
 
 export const Browse = () => {
-  const { institutionsArray } = useContext(InstitutionContext);
+  const { filteredInstitutions } = useContext(InstitutionContext);
   const [scrollPosition, setScrollPosition] = useState<boolean>(false);
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
@@ -31,10 +31,10 @@ export const Browse = () => {
     setIsModalVisible(true);
   };
 
+  if (!filteredInstitutions) return <Spinner />;
   return (
     <>
-      {!institutionsArray && <Spinner />}
-      {institutionsArray && (
+      {filteredInstitutions && (
         <div className="browse_header">
           <h2 className="browse_header-title">Browse colleges</h2>
           <p className="site_text-intro browse_header-subtitle">
@@ -48,12 +48,18 @@ export const Browse = () => {
       {isModalVisible && (
         <FilterModal closeHandler={() => setIsModalVisible(false)} />
       )}
-      <ul className="usa-card-group">
-        {institutionsArray?.map((school: College) => (
-          <CollegeCard key={school.id} college={school} />
-        ))}
-      </ul>
-      {institutionsArray && scrollPosition && (
+      {filteredInstitutions?.length > 0 ? (
+        <ul className="usa-card-group">
+          {filteredInstitutions.map((school: College) => (
+            <CollegeCard key={school.id} college={school} />
+          ))}
+        </ul>
+      ) : (
+        <p className="site_text-intro browse_header-subtitle">
+          No matches found for filters.
+        </p>
+      )}
+      {filteredInstitutions.length > 0 && scrollPosition && (
         <Button
           type="button"
           className="browse_back-to-top-button"
diff --git a/src/app/components/modals/FilterModal.tsx b/src/app/components/modals/FilterModal.tsx
index 9300d94..2461763 100644
--- a/src/app/components/modals/FilterModal.tsx
+++ b/src/app/components/modals/FilterModal.tsx
@@ -1,4 +1,5 @@
-import { MouseEventHandler } from "react";
+"use client";
+import { MouseEventHandler, useContext } from "react";
 import {
   Button,
   ButtonGroup,
@@ -7,25 +8,34 @@ import {
 } from "@trussworks/react-uswds";
 import Image from "next/image";
 import close from "../../assets/icons/close.svg";
+import { CollegeType, stateOptions } from "../../types";
 
 import { CheckboxField } from "../form/CheckboxField";
 import { DropdownField } from "../form/DropdownField";
 import { useForm } from "react-hook-form";
+import { InstitutionContext } from "../institutions/InstitutionProvider";
+import { filterInstitutions } from "../../utils/filtering";
 
 export const FilterModal = ({ closeHandler }: Props) => {
-  const { handleSubmit, register } = useForm();
+  const form = useForm();
+  const { institutionsArray, setFilteredInstitutions } =
+    useContext(InstitutionContext);
+  // const [filterState, setFilterState] = useState<Object | undefined>(undefined);
 
   const closeModal = () => {
     closeHandler();
     // TODO: Add tracking
   };
 
-  const applyFilters = (data: any) => {
-    // eslint-disable-next-line no-console
-    console.log(data);
-    // TODO: handle data
+  // TODO: Add tracking
+  const applyFilters = async (filters: any) => {
+    // TODO: persist filters
+    const filteredInstitutions = filterInstitutions(
+      institutionsArray!,
+      filters,
+    );
+    setFilteredInstitutions(filteredInstitutions);
     closeHandler();
-    // TODO: Add tracking
   };
 
   return (
@@ -36,10 +46,9 @@ export const FilterModal = ({ closeHandler }: Props) => {
       aria-describedby="modal-1-description"
     >
       <div data-testid="modalOverlay" className="usa-modal-overlay">
-        <form onSubmit={handleSubmit(applyFilters)}></form>
-        <div className="usa-modal usa-modal--lg" tabIndex={-1}>
-          <ModalHeading>Filter schools</ModalHeading>
-          <fieldset className="usa-fieldset">
+        <form id="" onSubmit={form.handleSubmit(applyFilters)}>
+          <div className="usa-modal usa-modal--lg" tabIndex={-1}>
+            <ModalHeading>Filter schools</ModalHeading>
             <div className="filter_section">
               <p className="filter_section-heading">Location</p>
               <DropdownField
@@ -47,11 +56,8 @@ export const FilterModal = ({ closeHandler }: Props) => {
                 name="filter-state"
                 label="State"
                 required={false}
-                options={[
-                  { id: "1", label: "first one" },
-                  { id: "2", label: "second one" },
-                ]}
-                registerField={register}
+                options={stateOptions}
+                registerField={form.register}
               />
             </div>
             <div className="filter_section">
@@ -60,10 +66,11 @@ export const FilterModal = ({ closeHandler }: Props) => {
                 id="filter-type"
                 name="filter-type"
                 options={[
-                  { id: "public", label: "Public" },
-                  { id: "private", label: "Private" },
+                  { id: CollegeType.PUBLIC, label: CollegeType.PUBLIC },
+                  { id: CollegeType.PRIVATE_NP, label: CollegeType.PRIVATE_NP },
+                  { id: CollegeType.PRIVATE_FP, label: CollegeType.PRIVATE_FP },
                 ]}
-                registerField={register}
+                registerField={form.register}
               />
             </div>
             <div className="filter_section">
@@ -72,12 +79,13 @@ export const FilterModal = ({ closeHandler }: Props) => {
                 id="filter-undergrad-pop"
                 name="filter-undergrad-pop"
                 options={[
-                  { id: "1-3", label: "1,000 - 3,000" },
-                  { id: "3-10", label: "3,000 - 10,000" },
+                  { id: "<2", label: "Less than 2,000" },
+                  { id: "2-5", label: "2,000 - 5,000" },
+                  { id: "5-10", label: "5,000 - 10,000" },
                   { id: "10-20", label: "10,000 - 20,000" },
                   { id: ">20", label: "20,000 +" },
                 ]}
-                registerField={register}
+                registerField={form.register}
               />
             </div>
             <div className="filter_section">
@@ -87,11 +95,11 @@ export const FilterModal = ({ closeHandler }: Props) => {
                 name="filter-grad-rate"
                 options={[
                   { id: ">90", label: "More than 90%" },
-                  { id: "50-90", label: "50% - 90%" },
-                  { id: "25-50", label: "25% - 50%" },
-                  { id: "<25", label: "Less than 25%" },
+                  { id: "60-90", label: "60% - 90%" },
+                  { id: "30-60", label: "30% - 60%" },
+                  { id: "<30", label: "Less than 30%" },
                 ]}
-                registerField={register}
+                registerField={form.register}
               />
             </div>
             <div className="filter_section">
@@ -100,44 +108,45 @@ export const FilterModal = ({ closeHandler }: Props) => {
                 id="filter-avg-cost-per-year"
                 name="filter-avg-cost-per-year"
                 options={[
-                  { id: "<10>", label: "Less than $10,000" },
-                  { id: "10-30", label: "$10,000 - $30,000" },
-                  { id: "30-60", label: "$30,000 - $60,000" },
+                  { id: "<10", label: "Less than $10,000" },
+                  { id: "10-20", label: "$10,000 - $20,000" },
+                  { id: "20-40", label: "$20,000 - $40,000" },
+                  { id: "40-60", label: "$40,000 - $60,000" },
                   { id: ">60", label: "More than $60,000" },
                 ]}
-                registerField={register}
+                registerField={form.register}
               />
             </div>
-          </fieldset>
-          <ModalFooter>
-            <ButtonGroup>
-              <Button type="submit">Apply Filters</Button>
-              <Button
-                type="button"
-                onClick={closeModal}
-                unstyled
-                className="padding-105 text-center"
-              >
-                Close
-              </Button>
-            </ButtonGroup>
-          </ModalFooter>
-          <button
-            type="button"
-            className="usa-button usa-modal__close filter_close"
-            aria-label="Close this window"
-            data-close-modal
-            onClick={closeModal as MouseEventHandler}
-          >
-            <Image
-              src={close}
-              className="filter-modal_icon-image"
-              height="30"
-              width="30"
-              alt="close icon"
-            />
-          </button>
-        </div>
+            <ModalFooter>
+              <ButtonGroup>
+                <Button type="submit">Apply Filters</Button>
+                <Button
+                  type="button"
+                  onClick={closeModal}
+                  unstyled
+                  className="padding-105 text-center"
+                >
+                  Close
+                </Button>
+              </ButtonGroup>
+            </ModalFooter>
+            <button
+              type="button"
+              className="usa-button usa-modal__close filter_close"
+              aria-label="Close this window"
+              data-close-modal
+              onClick={closeModal as MouseEventHandler}
+            >
+              <Image
+                src={close}
+                className="filter-modal_icon-image"
+                height="30"
+                width="30"
+                alt="close icon"
+              />
+            </button>
+          </div>
+        </form>
       </div>
     </div>
   );
diff --git a/src/app/testing/jest/frontend/Homepage.test.tsx b/src/app/testing/jest/frontend/Homepage.test.tsx
index ffae9a8..049374e 100644
--- a/src/app/testing/jest/frontend/Homepage.test.tsx
+++ b/src/app/testing/jest/frontend/Homepage.test.tsx
@@ -24,8 +24,7 @@ jest.mock("../../../utils/institutions", () => ({
 describe("Test Homepage", () => {
   test("Check that page renders", async () => {
     render(await Home());
-    expect(screen.queryAllByText("Browse colleges").length).toBe(0);
-    expect(screen.getByTitle("spinner")).toBeVisible();
+    expect(screen.queryAllByText("Browse colleges")[0]).toBeVisible();
   });
 });
 
diff --git a/src/app/types/college.tsx b/src/app/types/college.tsx
index 3b5dd9d..6d96fca 100644
--- a/src/app/types/college.tsx
+++ b/src/app/types/college.tsx
@@ -91,3 +91,84 @@ export interface College {
   };
   retentionRate?: number;
 }
+
+export enum States {
+  AL = "Alabama",
+  AS = "American Samoa",
+  AK = "Alaska",
+  AZ = "Arizona",
+  AR = "Arkansas",
+  CA = "California",
+  CO = "Colorado",
+  CT = "Connecticut",
+  DE = "Delaware",
+  DC = "District of Columbia",
+  FL = "Florida",
+  FM = "Micronesia (Federated States of)",
+  GA = "Georgia",
+  GU = "Guam",
+  HI = "Hawaii",
+  ID = "Idaho",
+  IL = "Illinois",
+  IN = "Indiana",
+  IA = "Iowa",
+  KS = "Kansas",
+  KY = "Kentucky",
+  LA = "Louisiana",
+  ME = "Maine",
+  MD = "Maryland",
+  MA = "Massachusetts",
+  MH = "Marshall Islands",
+  MI = "Michigan",
+  MN = "Minnesota",
+  MP = "Northern Mariana Islands",
+  MS = "Mississippi",
+  MO = "Missouri",
+  MT = "Montana",
+  NE = "Nebraska",
+  NV = "Nevada",
+  NH = "New Hampshire",
+  NJ = "New Jersey",
+  NM = "New Mexico",
+  NY = "New York",
+  NC = "North Carolina",
+  ND = "North Dakota",
+  OH = "Ohio",
+  OK = "Oklahoma",
+  OR = "Oregon",
+  PA = "Pennsylvania",
+  PR = "Puerto Rico",
+  RI = "Rhode Island",
+  SC = "South Carolina",
+  SD = "South Dakota",
+  TN = "Tennessee",
+  TX = "Texas",
+  UT = "Utah",
+  VI = "Virgin Islands",
+  VT = "Vermont",
+  VA = "Virginia",
+  WA = "Washington",
+  WV = "West Virginia",
+  WI = "Wisconsin",
+  WY = "Wyoming",
+}
+
+export const stateOptions = Object.keys(States)
+  .map((value) => ({
+    id: value,
+    label: States[value as keyof typeof States],
+  }))
+  .sort((a: any, b: any) => (a.label > b.label ? 1 : -1));
+
+export interface FilterShape {
+  "filter-state": string;
+  "filter-type": string[];
+  "filter-undergrad-pop": string[];
+  "filter-avg-cost-per-year": string[];
+  "filter-grad-rate": string[];
+}
+
+export interface FilterRangeShape {
+  lower: number;
+  upper: number;
+}
diff --git a/src/app/utils/filtering.ts b/src/app/utils/filtering.ts
new file mode 100644
index 0000000..a74e177
--- /dev/null
+++ b/src/app/utils/filtering.ts
@@ -0,0 +1,137 @@
+import { College, FilterRangeShape, FilterShape } from "../types";
+
+export const filterInstitutions = (
+  instArr: College[],
+  filters: FilterShape,
+) => {
+  let filteredArr = instArr;
+
+  // filter by state
+  if (filters["filter-state"] !== "- Select -") {
+    filteredArr = filteredArr.filter(
+      (el: College) => el.state === filters["filter-state"],
+    );
+  }
+
+  // filter by institution type
+  if (filters["filter-type"]) {
+    filteredArr = filteredArr.filter((el: College) =>
+      filters["filter-type"].includes(el.type),
+    );
+  }
+
+  // filter by undergrad population range
+  if (filters["filter-undergrad-pop"]) {
+    const filterRanges = createFilterRanges(
+      filters["filter-undergrad-pop"],
+      populationMap,
+    );
+    filteredArr = filteredArr.filter((el: College) =>
+      filterByRange(filterRanges, el.population),
+    );
+  }
+  // filter by average cost range
+  if (filters["filter-avg-cost-per-year"]) {
+    const filterRanges = createFilterRanges(
+      filters["filter-avg-cost-per-year"],
+      costMap,
+    );
+    filteredArr = filteredArr.filter((el: College) =>
+      filterByRange(filterRanges, el.avgCost),
+    );
+  }
+  // filter by completion rate range
+  if (filters["filter-grad-rate"]) {
+    const filterRanges = createFilterRanges(
+      filters["filter-grad-rate"],
+      gradRateMap,
+    );
+    filteredArr = filteredArr.filter((el: College) =>
+      filterByRange(filterRanges, el.completionRate),
+    );
+  }
+  return filteredArr;
+};
+
+const createFilterRanges = (
+  selectedRanges: string[],
+  filterMap: { [key: string]: FilterRangeShape },
+) => {
+  let filterRanges: number[][] = [];
+  selectedRanges.forEach((range: string) => {
+    const { lower, upper } = filterMap[range as keyof typeof filterMap];
+    filterRanges.push([lower, upper]);
+  });
+  return filterRanges;
+};
+
+const filterByRange = (filterRanges: number[][], value?: number) =>
+  filterRanges.some((range: number[]) => {
+    const [lower, upper] = range;
+    return value && value >= lower && value < upper;
+  });
+
+const populationMap: { [key: string]: FilterRangeShape } = {
+  "<2": {
+    lower: 0,
+    upper: 2000,
+  },
+  "2-5": {
+    lower: 2000,
+    upper: 5000,
+  },
+  "5-10": {
+    lower: 5000,
+    upper: 10000,
+  },
+  "10-20": {
+    lower: 10000,
+    upper: 20000,
+  },
+  ">20": {
+    lower: 20000,
+    upper: 150000,
+  },
+};
+
+const costMap: { [key: string]: FilterRangeShape } = {
+  "<10": {
+    lower: 0,
+    upper: 10000,
+  },
+  "10-20": {
+    lower: 10000,
+    upper: 20000,
+  },
+  "20-40": {
+    lower: 20000,
+    upper: 40000,
+  },
+  "40-60": {
+    lower: 40000,
+    upper: 60000,
+  },
+  ">60": {
+    lower: 60000,
+    upper: 100000,
+  },
+};
+
+const gradRateMap: { [key: string]: FilterRangeShape } = {
+  "<30": {
+    lower: 0,
+    upper: 0.3,
+  },
+  "30-60": {
+    lower: 0.3,
+    upper: 0.6,
+  },
+  "60-90": {
+    lower: 0.6,
+    upper: 0.9,
+  },
+  ">90": {
+    lower: 0.9,
+    upper: 1,
+  },
+};