diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9989edc98..b4623fc53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Filter, search and sort the event log #376 #455
 - Dark mode! #420 #453
 - Support multiple wallets: WalletConnect, Trust, Rainbow etc #424
 - Export the user list as csv #402 #450
diff --git a/packages/api/src/eventlog/controllers.ts b/packages/api/src/eventlog/controllers.ts
index 57918cb6a..fe6116cbc 100644
--- a/packages/api/src/eventlog/controllers.ts
+++ b/packages/api/src/eventlog/controllers.ts
@@ -1,5 +1,6 @@
 import { getQuerySort } from '@shared/functions';
 import {
+  EventLogsQueryInputParsedQs,
   PaginatedResponseBody,
   QueryInputParsedQs,
   TypedRequestQuery,
@@ -7,22 +8,40 @@ import {
 } from '@shared/types';
 import { BadRequestError } from '@error/errors';
 import { StatusCodes } from 'http-status-codes';
-import { EventLogModel } from './entities';
-import { EventLogDto } from './types';
-import { eventLogListTransformer } from './transformers';
+import { EventLogModel, EventLogTypeModel } from './entities';
+import { EventLogDto, EventLogInput, EventLogTypeDto } from './types';
+import {
+  eventLogListTransformer,
+  eventLogTypeListTransformer,
+} from './transformers';
+import mongoose from 'mongoose';
 
 /**
  * Fetch a paginated list of EventLogs
  */
 export const all = async (
-  req: TypedRequestQuery<QueryInputParsedQs>,
+  req: TypedRequestQuery<EventLogsQueryInputParsedQs>,
   res: TypedResponse<PaginatedResponseBody<EventLogDto>>
 ): Promise<void> => {
   if (!req.query.limit || !req.query.page)
     throw new BadRequestError('limit and page are required');
 
+  const query: EventLogInput = {};
+  if (req.query.type) {
+    const typesArray = req.query.type.split(',');
+    const types = await EventLogTypeModel.find({ key: { $in: typesArray } });
+    query.type = types.map((item) => new mongoose.Types.ObjectId(item.id));
+  }
+
+  if (req.query.search && req.query.search !== '') {
+    query.description = {
+      $regex: `${req.query.search.toString()}`,
+      $options: 'i',
+    };
+  }
+
   const paginateQuery = {
-    query: {},
+    query,
     limit: parseInt(req.query.limit),
     page: parseInt(req.query.page),
     sort: getQuerySort(req.query),
@@ -43,3 +62,22 @@ export const all = async (
     docs: docsTransfomed,
   });
 };
+
+/**
+ * Fetch a list of EventLogsTypes
+ */
+export const types = async (
+  req: TypedRequestQuery<QueryInputParsedQs>,
+  res: TypedResponse<PaginatedResponseBody<EventLogTypeDto>>
+): Promise<void> => {
+  const response = await EventLogTypeModel.find();
+
+  if (!response) throw new BadRequestError('Failed to query event log types');
+
+  const docsTransfomed = await eventLogTypeListTransformer(response);
+
+  res.status(StatusCodes.OK).json({
+    ...response,
+    docs: docsTransfomed,
+  });
+};
diff --git a/packages/api/src/eventlog/routes.ts b/packages/api/src/eventlog/routes.ts
index b470e754f..00c6e04b2 100644
--- a/packages/api/src/eventlog/routes.ts
+++ b/packages/api/src/eventlog/routes.ts
@@ -5,5 +5,6 @@ import * as controller from './controllers';
 const eventLogRouter = Router();
 
 eventLogRouter.getAsync('/all', controller.all);
+eventLogRouter.getAsync('/types', controller.types);
 
 export { eventLogRouter };
diff --git a/packages/api/src/eventlog/transformers.ts b/packages/api/src/eventlog/transformers.ts
index 8c573188f..aca22f75f 100644
--- a/packages/api/src/eventlog/transformers.ts
+++ b/packages/api/src/eventlog/transformers.ts
@@ -23,6 +23,16 @@ const eventLogTypeTransformer = (
   } as EventLogTypeDto;
 };
 
+export const eventLogTypeListTransformer = async (
+  eventLogTypes: EventLogTypeDocument[]
+): Promise<EventLogTypeDto[]> => {
+  const eventLogTypeDtos = await Promise.all(
+    eventLogTypes.map((eventLogType) => eventLogTypeTransformer(eventLogType))
+  );
+
+  return eventLogTypeDtos;
+};
+
 export const eventLogTransformer = async (
   eventLog: EventLogDocument,
   currentUserRoles: UserRole[] = [UserRole.USER]
diff --git a/packages/api/src/eventlog/types.ts b/packages/api/src/eventlog/types.ts
index 044309564..b4e5cbc8b 100644
--- a/packages/api/src/eventlog/types.ts
+++ b/packages/api/src/eventlog/types.ts
@@ -47,3 +47,8 @@ export interface EventLogTypeDto {
   label: string;
   description: string;
 }
+
+export interface EventLogInput {
+  type?: Types.ObjectId[];
+  description?: Object;
+}
diff --git a/packages/api/src/shared/types.ts b/packages/api/src/shared/types.ts
index de25e45a4..7ba643dc2 100644
--- a/packages/api/src/shared/types.ts
+++ b/packages/api/src/shared/types.ts
@@ -20,6 +20,15 @@ export interface SearchQueryInput extends QueryInput {
 
 export interface SearchQueryInputParsedQs extends SearchQueryInput, Query {}
 
+export interface EventLogsQueryInput extends QueryInput {
+  search?: string;
+  type?: string;
+}
+
+export interface EventLogsQueryInputParsedQs
+  extends EventLogsQueryInput,
+    Query {}
+
 export interface TypedRequest<T extends Query, U> extends Request {
   body: U;
   query: T;
diff --git a/packages/frontend/public/index.html b/packages/frontend/public/index.html
index 62443c692..edf1db805 100644
--- a/packages/frontend/public/index.html
+++ b/packages/frontend/public/index.html
@@ -60,7 +60,7 @@
     <meta property="twitter:image" content="%PUBLIC_URL%/Share.png" />
     <title>Praise</title>
   </head>
-  <body class="text-sm">
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/packages/frontend/src/components/form/MultiselectInput.tsx b/packages/frontend/src/components/form/MultiselectInput.tsx
new file mode 100644
index 000000000..4373c5581
--- /dev/null
+++ b/packages/frontend/src/components/form/MultiselectInput.tsx
@@ -0,0 +1,94 @@
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Listbox, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+
+interface ISelectedItem {
+  key: string;
+  label: string;
+}
+
+interface MultiselectInputProps {
+  selected: ISelectedItem[];
+  handleChange: (element) => void;
+  options: ISelectedItem[];
+  noSelectedMessage: string;
+}
+
+const MultiselectInput = ({
+  handleChange,
+  selected,
+  options,
+  noSelectedMessage,
+}: MultiselectInputProps): JSX.Element => {
+  return (
+    <div className="relative w-60 border border-gray-400 h-[42px]">
+      <Listbox value={selected} onChange={handleChange} multiple>
+        <Listbox.Button className=" pl-2 pr-8 text-left h-[42px] w-full bg-transparent border-none outline-none focus:ring-0 ">
+          {(): JSX.Element => (
+            <>
+              <span className="block truncate">
+                {selected.length === 0 && noSelectedMessage}
+                {selected.length > 3
+                  ? `${selected.length} items.`
+                  : selected
+                      .map((filter) =>
+                        filter && filter.label ? filter.label : ''
+                      )
+                      .join(', ')}
+              </span>
+
+              <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+                <span className="text-gray-800">
+                  <FontAwesomeIcon icon={faChevronDown} className="mt-[-1]" />
+                </span>
+              </div>
+            </>
+          )}
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto bg-white border border-gray-400 max-h-60">
+            {options.map((filter, filterIdx) => (
+              <Listbox.Option
+                key={filterIdx}
+                className={({ active }): string =>
+                  `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-600'
+                  }`
+                }
+                value={filter}
+              >
+                {({ selected }): JSX.Element => (
+                  <>
+                    <span
+                      className={`block truncate ${
+                        selected ? 'font-medium' : 'font-normal'
+                      }`}
+                    >
+                      {filter.label}
+                    </span>
+                    <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                      <input
+                        type="checkbox"
+                        className="w-4 h-4 mr-4 text-black focus:ring-0"
+                        checked={selected}
+                        onChange={(): void => {}}
+                      />
+                    </span>
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </Listbox>
+    </div>
+  );
+};
+
+export default MultiselectInput;
diff --git a/packages/frontend/src/components/form/SearchInput.tsx b/packages/frontend/src/components/form/SearchInput.tsx
new file mode 100644
index 000000000..10896000a
--- /dev/null
+++ b/packages/frontend/src/components/form/SearchInput.tsx
@@ -0,0 +1,38 @@
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+interface SearchInputProps {
+  handleChange: (element) => void;
+  value: string;
+}
+
+const SearchInput = ({
+  handleChange,
+  value,
+}: SearchInputProps): JSX.Element => {
+  return (
+    <div className="relative flex items-center border border-gray-400 h-[42px]">
+      <div className="absolute inset-y-0 left-0 flex items-center pl-3">
+        <span className="text-gray-800">
+          <FontAwesomeIcon
+            icon={faMagnifyingGlass}
+            size="1x"
+            className="absolute transform -translate-y-1/2 top-1/2 left-3"
+          />
+        </span>
+      </div>
+      <input
+        className="h-[42px] block pl-8 bg-transparent border-none outline-none focus:ring-0"
+        name="search"
+        type="text"
+        placeholder="Search"
+        value={value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>
+          handleChange(e.target.value)
+        }
+      />
+    </div>
+  );
+};
+
+export default SearchInput;
diff --git a/packages/frontend/src/components/form/SelectInput.tsx b/packages/frontend/src/components/form/SelectInput.tsx
new file mode 100644
index 000000000..a0dd4ce5e
--- /dev/null
+++ b/packages/frontend/src/components/form/SelectInput.tsx
@@ -0,0 +1,71 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Listbox, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+
+interface ISelectedItem {
+  value: string;
+  label: string;
+}
+
+interface SelectInputProps {
+  selected: ISelectedItem;
+  handleChange: (element) => void;
+  options: ISelectedItem[];
+  icon?: IconProp;
+}
+
+const SelectInput = ({
+  selected,
+  handleChange,
+  options,
+  icon,
+}: SelectInputProps): JSX.Element => {
+  return (
+    <div className="relative w-40 h-[42px]">
+      <Listbox value={selected} onChange={handleChange}>
+        <Listbox.Button className="h-[42px] border border-gray-400 w-full py-1.5 pl-3 pr-10 text-left bg-transparent ">
+          <span className="block truncate">{selected.label}</span>
+          <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+            <span className="text-gray-800 ">
+              <FontAwesomeIcon icon={icon || faChevronDown} />
+            </span>
+          </div>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto bg-white border border-gray-400 max-h-60">
+            {options.map((s, sIdx) => (
+              <Listbox.Option
+                key={sIdx}
+                className={({ active }): string =>
+                  `relative cursor-default select-none py-2 pl-4 pr-4 ${
+                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-600'
+                  }`
+                }
+                value={s}
+              >
+                {({ selected }): JSX.Element => (
+                  <span
+                    className={`block truncate ${
+                      selected ? 'font-medium' : 'font-normal'
+                    }`}
+                  >
+                    {s.label}
+                  </span>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </Listbox>
+    </div>
+  );
+};
+
+export default SelectInput;
diff --git a/packages/frontend/src/model/eventlogs.ts b/packages/frontend/src/model/eventlogs.ts
index f8657f2f7..d83afa793 100644
--- a/packages/frontend/src/model/eventlogs.ts
+++ b/packages/frontend/src/model/eventlogs.ts
@@ -1,49 +1,75 @@
+import { useAuthApiQuery } from '@/model/api';
 import { makeApiAuthClient } from '@/utils/api';
-import { EventLogDto } from 'api/dist/eventlog/types';
+import { EventLogDto, EventLogTypeDto } from 'api/dist/eventlog/types';
 import { PaginatedResponseBody } from 'api/dist/shared/types';
+import { AxiosResponse } from 'axios';
 import { useEffect, useState } from 'react';
+import { selectorFamily } from 'recoil';
 
 export type AllEventLogsQueryParameters = {
-  sortColumn?: string;
-  sortType?: string;
-  limit?: number;
-  page?: number;
+  sortColumn: string;
+  sortType: string;
+  limit: number;
+  page: number;
+  type: string;
+  search: string;
 };
 
-export const useAllEventLogs = ({
-  page,
-  limit,
-  sortColumn,
-  sortType,
-}: AllEventLogsQueryParameters): {
-  data: PaginatedResponseBody<EventLogDto>;
+/**
+ * Query selector that fetches all praise periods from the API.
+ */
+export const AllEventLogsQuery = selectorFamily({
+  key: 'AllEventLogsQuery',
+  get:
+    (queryParams: AllEventLogsQueryParameters) =>
+    async ({ get }): Promise<AxiosResponse<unknown>> => {
+      const apiAuthClient = makeApiAuthClient();
+      const response = await apiAuthClient.get('/eventlogs/all', {
+        params: queryParams,
+      });
+
+      return response;
+    },
+});
+
+export const useAllEventLogs = (
+  queryParameters: AllEventLogsQueryParameters
+): {
+  logsData: PaginatedResponseBody<EventLogDto>;
+  loading: boolean;
+} => {
+  const allEventLogsQueryResponse = useAuthApiQuery(
+    AllEventLogsQuery(queryParameters)
+  );
+
+  const paginatedResponse =
+    allEventLogsQueryResponse.data as PaginatedResponseBody<EventLogDto>;
+
+  return { logsData: paginatedResponse, loading: false };
+};
+
+export const useAllEventLogTypes = (): {
+  types: PaginatedResponseBody<EventLogTypeDto>;
   loading: boolean;
 } => {
   const [loading, setLoading] = useState<boolean>(false);
-  const [data, setData] = useState<PaginatedResponseBody<EventLogDto>>({
+  const [types, setTypes] = useState<PaginatedResponseBody<EventLogTypeDto>>({
     docs: [],
   });
 
   useEffect(() => {
-    const fetchData = async (page, limit): Promise<void> => {
+    const fetchData = async (): Promise<void> => {
       setLoading(true);
 
       const apiAuthClient = makeApiAuthClient();
-      const response = await apiAuthClient.get('/eventlogs/all', {
-        params: {
-          page,
-          limit,
-          sortColumn,
-          sortType,
-        },
-      });
+      const response = await apiAuthClient.get('/eventlogs/types');
 
-      setData(response.data);
+      setTypes(response.data);
       setLoading(false);
     };
 
-    void fetchData(page, limit);
-  }, [page, limit, sortColumn, sortType, setData, setLoading]);
+    void fetchData();
+  }, [setTypes, setLoading]);
 
-  return { data, loading };
+  return { types, loading };
 };
diff --git a/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx b/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx
index f2e7e4f64..82e1aa817 100644
--- a/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx
+++ b/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx
@@ -1,21 +1,146 @@
 import BreadCrumb from '@/components/BreadCrumb';
-import { faBook } from '@fortawesome/free-solid-svg-icons';
-import { Suspense } from 'react';
+import {
+  faArrowDownWideShort,
+  faBook,
+} from '@fortawesome/free-solid-svg-icons';
+import { Suspense, useEffect, useMemo, useState } from 'react';
 import EventLogsList from './components/EventLogsList';
+import LoaderSpinner from '@/components/LoaderSpinner';
+import MultiselectInput from '@/components/form/MultiselectInput';
+import SearchInput from '@/components/form/SearchInput';
+import SelectInput from '@/components/form/SelectInput';
+import {
+  AllEventLogsQueryParameters,
+  useAllEventLogTypes,
+} from '@/model/eventlogs';
+import { debounce } from '@mui/material';
+
+const sortOptions = [
+  { value: 'desc', label: 'Newest' },
+  { value: 'asc', label: 'Oldest' },
+];
+
+interface filterOptionsProps {
+  key: string;
+  label: string;
+}
+
+interface sortOptionsProps {
+  value: string;
+  label: string;
+}
+
+const defaultQueryParameters = {
+  sortColumn: 'createdAt',
+  sortType: 'desc',
+  limit: 15,
+  page: 1,
+  type: '',
+  search: '',
+} as AllEventLogsQueryParameters;
 
 const EventLogsPage = (): JSX.Element => {
+  const [selectedFilters, setSelectedFilters] = useState<filterOptionsProps[]>(
+    []
+  );
+  const [selectedSort, setSelectedSort] = useState<sortOptionsProps>(
+    sortOptions[0]
+  );
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  const [page, setPage] = useState<number>(1);
+
+  const { types } = useAllEventLogTypes();
+  const filterOptions = types.docs;
+
+  const [queryParameters, setQueryParameters] = useState(
+    defaultQueryParameters
+  );
+
+  const setLocalParameters = useMemo(
+    () =>
+      debounce((data) => {
+        const params = {
+          ...defaultQueryParameters,
+          ...{ sortType: data.selectedSort.value },
+          ...{
+            type: Array.prototype.map
+              .call(data.selectedFilters, (s) => s.key)
+              .toString(),
+          },
+          ...{
+            search: data.searchValue,
+          },
+          ...{ page: data.page },
+        };
+
+        setQueryParameters(params);
+      }, 600),
+    []
+  );
+
+  useEffect(() => {
+    setLocalParameters({
+      selectedFilters: selectedFilters,
+      selectedSort: selectedSort,
+      searchValue: searchValue,
+      page: page,
+    });
+  }, [selectedFilters, selectedSort, searchValue, page, setLocalParameters]);
+
   return (
     <div className="praise-page">
       <BreadCrumb name="Transparency Log" icon={faBook} />
 
-      <div className="w-full praise-box overflow-x-auto">
+      <div className="w-full overflow-x-auto praise-box">
         <h2 className="mb-2">Transparency Log</h2>
         <p>A log of all user actions that change the database state.</p>
       </div>
 
-      <Suspense fallback="Loading…">
-        <EventLogsList />
-      </Suspense>
+      <div className="praise-box">
+        <div className="flex mb-8">
+          {/* Filter */}
+          <div>
+            <MultiselectInput
+              handleChange={(e): void => {
+                setSelectedFilters(e);
+                setPage(1);
+              }}
+              selected={selectedFilters}
+              options={filterOptions}
+              noSelectedMessage="All log items"
+            />
+          </div>
+
+          {/* Search */}
+          <div className="ml-4">
+            <SearchInput
+              handleChange={(e): void => {
+                setSearchValue(e);
+                setPage(1);
+              }}
+              value={searchValue}
+            />
+          </div>
+
+          {/* Sort */}
+          <div className="ml-auto">
+            <SelectInput
+              handleChange={(e): void => {
+                setSelectedSort(e);
+                setPage(1);
+              }}
+              selected={selectedSort}
+              options={sortOptions}
+              icon={faArrowDownWideShort}
+            />
+          </div>
+        </div>
+
+        <Suspense fallback={<LoaderSpinner />}>
+          <EventLogsList queryParameters={queryParameters} setPage={setPage} />
+        </Suspense>
+      </div>
     </div>
   );
 };
diff --git a/packages/frontend/src/pages/EventLogs/components/EventLogsList.tsx b/packages/frontend/src/pages/EventLogs/components/EventLogsList.tsx
index 0178d77be..84c4cc09c 100644
--- a/packages/frontend/src/pages/EventLogs/components/EventLogsList.tsx
+++ b/packages/frontend/src/pages/EventLogs/components/EventLogsList.tsx
@@ -1,24 +1,27 @@
-import { useState } from 'react';
-import { useAllEventLogs } from '@/model/eventlogs';
+import {
+  AllEventLogsQueryParameters,
+  useAllEventLogs,
+} from '@/model/eventlogs';
 import EventLog from '@/components/eventlog/EventLog';
 import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Dispatch, SetStateAction } from 'react';
 
-const EventLogsTable = (): JSX.Element | null => {
-  const [page, setPage] = useState<number>(1);
-  const { data } = useAllEventLogs({
-    sortColumn: 'createdAt',
-    sortType: 'desc',
-    limit: 15,
-    page,
-  });
+interface EventLogsTableProps {
+  queryParameters: AllEventLogsQueryParameters;
+  setPage: Dispatch<SetStateAction<number>>;
+}
 
-  if (data.docs.length === 0) return null;
+const EventLogsTable = ({
+  queryParameters,
+  setPage,
+}: EventLogsTableProps): JSX.Element | null => {
+  const { logsData } = useAllEventLogs(queryParameters);
 
   return (
-    <div className="praise-box px-0">
-      <div className="w-full">
-        {data.docs.map((eventlog, i) => (
+    <div className="w-full">
+      <div className="w-full space-y-4">
+        {logsData.docs.map((eventlog, i) => (
           <EventLog
             eventlog={eventlog}
             className={`${i % 2 === 0 && 'bg-gray-100 dark:bg-slate-500'} px-7`}
@@ -26,18 +29,18 @@ const EventLogsTable = (): JSX.Element | null => {
           />
         ))}
       </div>
-      {(data.hasNextPage || data.hasPrevPage) && (
-        <div className="w-full flex justify-between space-x-4 mt-4">
+      {(logsData.hasNextPage || logsData.hasPrevPage) && (
+        <div className="flex justify-between w-full mt-4 space-x-4">
           <div>
-            {data.hasPrevPage && (
+            {logsData.hasPrevPage && (
               <a
                 className="cursor-pointer"
-                onClick={(): void => setPage(page - 1)}
+                onClick={(): void => setPage(queryParameters.page - 1)}
               >
                 <FontAwesomeIcon
                   icon={faArrowLeft}
                   size="1x"
-                  className="mr-2 pl-5"
+                  className="pl-5 mr-2"
                 />
                 Previous
               </a>
@@ -45,16 +48,17 @@ const EventLogsTable = (): JSX.Element | null => {
           </div>
 
           <div>
-            {data.hasNextPage && (
+            {logsData.hasNextPage && (
               <a
                 className="cursor-pointer"
-                onClick={(): void => setPage(page + 1)}
+                // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+                onClick={(): void => setPage(queryParameters.page + 1)}
               >
                 Next
                 <FontAwesomeIcon
                   icon={faArrowRight}
                   size="1x"
-                  className="ml-2 pr-5"
+                  className="pr-5 ml-2"
                 />
               </a>
             )}
diff --git a/packages/frontend/src/pages/Users/components/UsersTable.tsx b/packages/frontend/src/pages/Users/components/UsersTable.tsx
index 940433bb5..6a0115f80 100644
--- a/packages/frontend/src/pages/Users/components/UsersTable.tsx
+++ b/packages/frontend/src/pages/Users/components/UsersTable.tsx
@@ -7,16 +7,21 @@ import {
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { UserDto, UserRole } from 'api/dist/user/types';
-import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import UsersTableRow from './UsersTableRow';
 import UsersTablePagination from './UsersTablePagination';
+import SearchInput from '@/components/form/SearchInput';
+import SelectInput from '@/components/form/SelectInput';
+
+interface roleOptionsProps {
+  value: string;
+  label: string;
+}
 
 const roleOptions = [
-  { name: 'All users', value: UserRole.USER },
-  { name: 'Admins', value: UserRole.ADMIN },
-  { name: 'Forwarders', value: UserRole.FORWARDER },
-  { name: 'Quantifiers', value: UserRole.QUANTIFIER },
+  { label: 'All users', value: UserRole.USER },
+  { label: 'Admins', value: UserRole.ADMIN },
+  { label: 'Forwarders', value: UserRole.FORWARDER },
+  { label: 'Quantifiers', value: UserRole.QUANTIFIER },
 ];
 
 const USERS_PER_PAGE = 10;
@@ -27,8 +32,8 @@ const UsersTable = (): JSX.Element => {
   const allQuantifierUsers = useRecoilValue(AllQuantifierUsers);
   const allUsers = useRecoilValue(AllUsers);
   const [tableData, setTableData] = React.useState<UserDto[]>();
-  const [selectedRole, setSelectedRole] = React.useState<UserRole>(
-    UserRole.USER
+  const [selectedRole, setSelectedRole] = React.useState<roleOptionsProps>(
+    roleOptions[0]
   );
   const [filter, setFilter] = React.useState<string>('');
   const [page, setPage] = React.useState<number>(1);
@@ -60,7 +65,7 @@ const UsersTable = (): JSX.Element => {
   }, [allUsers]);
 
   React.useEffect(() => {
-    switch (selectedRole) {
+    switch (selectedRole.value) {
       case UserRole.USER:
         setTableData(allUsers);
         break;
@@ -98,40 +103,16 @@ const UsersTable = (): JSX.Element => {
 
   return (
     <>
-      <div className="flex flex-col gap-4 px-5 sm:flex-row sm:gap-4">
-        <select
-          className="bg-transparent border-black dark:bg-slate-500 dark:text-white/50"
-          onChange={(event: React.ChangeEvent<HTMLSelectElement>): void =>
-            setSelectedRole(UserRole[event.target.value])
-          }
-        >
-          {roleOptions.map((option) => (
-            <option key={option.name} value={option.value}>
-              {option.name}
-            </option>
-          ))}
-        </select>
-        <div className="flex items-center border border-black">
-          <label className="relative">
-            <FontAwesomeIcon
-              icon={faMagnifyingGlass}
-              size="1x"
-              className="absolute transform -translate-y-1/2 top-1/2 left-3"
-            />
-            <input
-              type="text"
-              name="search"
-              placeholder="Search"
-              className="block pl-8 bg-transparent border-none outline-none focus:ring-0 dark:placeholder:text-white/50"
-              value={filter}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>): void =>
-                setFilter(event.target.value)
-              }
-            />
-          </label>
-        </div>
+      <div className="flex flex-col gap-4 mx-5 sm:flex-row">
+        <SelectInput
+          handleChange={setSelectedRole}
+          selected={selectedRole}
+          options={roleOptions}
+        />
+        <SearchInput handleChange={setFilter} value={filter} />
       </div>
-      <div className="flex justify-between px-9 my-4">
+
+      <div className="flex justify-between px-4 my-4">
         <div className="w-1/2">
           <span className="font-bold">User</span>
         </div>
diff --git a/packages/frontend/src/styles/globals.css b/packages/frontend/src/styles/globals.css
index d0c3538bc..2aab86a2f 100644
--- a/packages/frontend/src/styles/globals.css
+++ b/packages/frontend/src/styles/globals.css
@@ -11,7 +11,7 @@
     @apply dark:border-slate-700;
   }
   #root {
-    @apply min-h-screen bg-[#f3f4f6] text-gray-800 dark:bg-slate-800 dark:text-white;
+    @apply min-h-screen bg-[#f3f4f6] text-gray-800 dark:bg-slate-800 dark:text-white text-base;
   }
 
   h2 {
@@ -31,6 +31,24 @@
     @apply dark:bg-slate-500 dark:border-slate-900; 
   }
 
+  [type='text'], 
+    [type='email'], 
+    [type='url'], 
+    [type='password'], 
+    [type='number'], 
+    [type='date'], 
+    [type='datetime-local'], 
+    [type='month'], 
+    [type='search'], 
+    [type='tel'], 
+    [type='time'], 
+    [type='week'], 
+    [multiple], 
+    textarea, 
+    select { 
+      @apply text-base 
+    }
+
   [type='text']:focus,
     [type='email']:focus,
     [type='url']:focus,
@@ -46,7 +64,7 @@
     [multiple]:focus,
     textarea:focus,
     select:focus {
-        @apply dark:focus:ring-teal-300 dark:focus:ring-2;
+      @apply  dark:focus:ring-teal-300 dark:focus:ring-2;
     }
 
   .praise-box {