diff --git a/apps/portal/src/components/resumes/browse/resumeConstants.ts b/apps/portal/src/components/resumes/browse/resumeConstants.ts
index 6996538a..b8d85d6e 100644
--- a/apps/portal/src/components/resumes/browse/resumeConstants.ts
+++ b/apps/portal/src/components/resumes/browse/resumeConstants.ts
@@ -17,7 +17,13 @@ export const TOP_HITS = [
   { href: '#', name: 'US Only' },
 ];
 
-export const ROLES = [
+export type FilterOption = {
+  checked: boolean;
+  label: string;
+  value: string;
+};
+
+export const ROLE: Array<FilterOption> = [
   {
     checked: false,
     label: 'Full-Stack Engineer',
@@ -30,7 +36,7 @@ export const ROLES = [
   { checked: false, label: 'Android Engineer', value: 'Android Engineer' },
 ];
 
-export const EXPERIENCE = [
+export const EXPERIENCE: Array<FilterOption> = [
   { checked: false, label: 'Freshman', value: 'Freshman' },
   { checked: false, label: 'Sophomore', value: 'Sophomore' },
   { checked: false, label: 'Junior', value: 'Junior' },
@@ -52,7 +58,7 @@ export const EXPERIENCE = [
   },
 ];
 
-export const LOCATION = [
+export const LOCATION: Array<FilterOption> = [
   { checked: false, label: 'Singapore', value: 'Singapore' },
   { checked: false, label: 'United States', value: 'United States' },
   { checked: false, label: 'India', value: 'India' },
diff --git a/apps/portal/src/pages/resumes/index.tsx b/apps/portal/src/pages/resumes/index.tsx
index a65f3ca6..4dc3fe77 100644
--- a/apps/portal/src/pages/resumes/index.tsx
+++ b/apps/portal/src/pages/resumes/index.tsx
@@ -10,13 +10,14 @@ import {
   PlusIcon,
 } from '@heroicons/react/20/solid';
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { Tabs, TextInput } from '@tih/ui';
+import { CheckboxInput, CheckboxList, Tabs, TextInput } from '@tih/ui';
 
+import type { FilterOption } from '~/components/resumes/browse/resumeConstants';
 import {
   BROWSE_TABS_VALUES,
   EXPERIENCE,
   LOCATION,
-  ROLES,
+  ROLE,
   SORT_OPTIONS,
   TOP_HITS,
 } from '~/components/resumes/browse/resumeConstants';
@@ -29,11 +30,19 @@ import { trpc } from '~/utils/trpc';
 
 import type { Resume } from '~/types/resume';
 
-const filters = [
+type FilterId = 'experience' | 'location' | 'role';
+type Filter = {
+  id: FilterId;
+  name: string;
+  options: Array<FilterOption>;
+};
+type FilterState = Record<FilterId, Array<string>>;
+
+const filters: Array<Filter> = [
   {
-    id: 'roles',
-    name: 'Roles',
-    options: ROLES,
+    id: 'role',
+    name: 'Role',
+    options: ROLE,
   },
   {
     id: 'experience',
@@ -47,11 +56,35 @@ const filters = [
   },
 ];
 
+const INITIAL_FILTER_STATE: FilterState = {
+  experience: Object.values(EXPERIENCE).map(({ value }) => value),
+  location: Object.values(LOCATION).map(({ value }) => value),
+  role: Object.values(ROLE).map(({ value }) => value),
+};
+
+const filterResumes = (
+  resumes: Array<Resume>,
+  searchValue: string,
+  userFilters: FilterState,
+) => {
+  return resumes
+    .filter((resume) =>
+      resume.title.toLowerCase().includes(searchValue.toLocaleLowerCase()),
+    )
+    .filter(
+      ({ experience, location, role }) =>
+        userFilters.role.includes(role) &&
+        userFilters.experience.includes(experience) &&
+        userFilters.location.includes(location),
+    );
+};
+
 export default function ResumeHomePage() {
   const { data: sessionData } = useSession();
   const router = useRouter();
   const [tabsValue, setTabsValue] = useState(BROWSE_TABS_VALUES.ALL);
   const [searchValue, setSearchValue] = useState('');
+  const [userFilters, setUserFilters] = useState(INITIAL_FILTER_STATE);
   const [resumes, setResumes] = useState<Array<Resume>>([]);
   const [renderSignInButton, setRenderSignInButton] = useState(false);
   const [signInButtonText, setSignInButtonText] = useState('');
@@ -102,6 +135,26 @@ export default function ResumeHomePage() {
     }
   };
 
+  const onFilterCheckboxChange = (
+    isChecked: boolean,
+    filterSection: FilterId,
+    filterValue: string,
+  ) => {
+    if (isChecked) {
+      setUserFilters({
+        ...userFilters,
+        [filterSection]: [...userFilters[filterSection], filterValue],
+      });
+    } else {
+      setUserFilters({
+        ...userFilters,
+        [filterSection]: userFilters[filterSection].filter(
+          (value) => value !== filterValue,
+        ),
+      });
+    }
+  };
+
   return (
     <>
       <Head>
@@ -256,8 +309,8 @@ export default function ResumeHomePage() {
                                 </span>
                               </Disclosure.Button>
                             </h3>
-                            <Disclosure.Panel className="pt-6">
-                              <div className="space-y-4">
+                            <Disclosure.Panel className="pt-4">
+                              {/* <div className="space-y-4">
                                 {section.options.map((option, optionIdx) => (
                                   <div
                                     key={option.value}
@@ -269,6 +322,7 @@ export default function ResumeHomePage() {
                                       id={`filter-${section.id}-${optionIdx}`}
                                       name={`${section.id}[]`}
                                       type="checkbox"
+                                      onChange={(value) => console.log(value)}
                                     />
                                     <label
                                       className="ml-3 text-sm text-gray-600"
@@ -277,7 +331,32 @@ export default function ResumeHomePage() {
                                     </label>
                                   </div>
                                 ))}
-                              </div>
+                              </div> */}
+                              <CheckboxList
+                                description=""
+                                isLabelHidden={true}
+                                label=""
+                                orientation="vertical">
+                                {section.options.map((option) => (
+                                  <div
+                                    key={option.value}
+                                    className="[&>div>div:nth-child(2)>label]:font-normal [&>div>div:nth-child(1)>input]:text-indigo-600 [&>div>div:nth-child(1)>input]:ring-indigo-500">
+                                    <CheckboxInput
+                                      label={option.label}
+                                      value={userFilters[section.id].includes(
+                                        option.value,
+                                      )}
+                                      onChange={(isChecked) =>
+                                        onFilterCheckboxChange(
+                                          isChecked,
+                                          section.id,
+                                          option.value,
+                                        )
+                                      }
+                                    />
+                                  </div>
+                                ))}
+                              </CheckboxList>
                             </Disclosure.Panel>
                           </>
                         )}
@@ -296,7 +375,7 @@ export default function ResumeHomePage() {
                     starredResumesQuery.isFetching ||
                     myResumesQuery.isFetching
                   }
-                  resumes={resumes}
+                  resumes={filterResumes(resumes, searchValue, userFilters)}
                 />
               </div>
             </div>
diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index b85852f0..79c1fc9b 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -11,7 +11,7 @@ import { Button, CheckboxInput, Select, TextArea, TextInput } from '@tih/ui';
 import {
   EXPERIENCE,
   LOCATION,
-  ROLES,
+  ROLE,
 } from '~/components/resumes/browse/resumeConstants';
 
 import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
@@ -152,7 +152,7 @@ export default function SubmitResumeForm() {
                   {...register('role', { required: true })}
                   disabled={isLoading}
                   label="Role"
-                  options={ROLES}
+                  options={ROLE}
                   required={true}
                   onChange={(val) => setValue('role', val)}
                 />