diff --git a/web/components/molecules/Pagination/Pagination.tsx b/web/components/molecules/Pagination/Pagination.tsx
new file mode 100644
index 00000000..6935a702
--- /dev/null
+++ b/web/components/molecules/Pagination/Pagination.tsx
@@ -0,0 +1,96 @@
+import { PAGINATION_PAGE_SIZE } from "db/consts";
+import React from "react";
+
+const pageSize = PAGINATION_PAGE_SIZE;
+
+const getFirstRecordOnPage = (currPage: number) =>
+ (currPage - 1) * pageSize + 1;
+
+const getLastRecordOnPage = (
+ firstRecordOnPage: number,
+ totalRecords: number
+) => Math.min(firstRecordOnPage + pageSize - 1, totalRecords);
+
+const isValidPage = (firstRecordOnPage: number, totalRecords: number) =>
+ firstRecordOnPage > 0 && firstRecordOnPage <= totalRecords;
+
+const LeftArrow = () => (
+
+);
+
+const RightArrow = () => (
+
+);
+
+const getArrows = (
+ firstRecordOnPage: number,
+ totalRecords: number,
+ currPage: number,
+ onNextPage: any,
+ onPrevPage: any
+) => [
+ { symbol: , disabled: firstRecordOnPage <= pageSize, onClick: onPrevPage },
+ { symbol: , disabled: totalRecords <= currPage * pageSize, onClick: onNextPage },
+];
+
+const ArrowButton = ({
+ symbol,
+ disabled,
+ onClick
+}: {
+ symbol: JSX.Element;
+ disabled: boolean;
+ onClick: () => void;
+}) => (
+
+ {symbol}
+
+);
+
+function Pagination({
+ totalRecords,
+ currPage,
+ onNextPage,
+ onPrevPage
+}: {
+ totalRecords: number;
+ currPage: number;
+ onNextPage: any;
+ onPrevPage: any;
+}) {
+ const firstRecordOnPage = getFirstRecordOnPage(currPage);
+ const lastRecordOnPage = getLastRecordOnPage(
+ firstRecordOnPage,
+ totalRecords
+ );
+
+ if (!isValidPage(firstRecordOnPage, totalRecords)) {
+ return null;
+ }
+
+ const arrows = getArrows(firstRecordOnPage, totalRecords, currPage, onNextPage, onPrevPage);
+
+ return (
+
+
+ {firstRecordOnPage} - {lastRecordOnPage} of {totalRecords}
+
+
+ {arrows.map(({ symbol, disabled, onClick }, index) => (
+
+ ))}
+
+
+ );
+}
+
+export default Pagination;
diff --git a/web/components/molecules/Pagination/PaginationHooks.ts b/web/components/molecules/Pagination/PaginationHooks.ts
new file mode 100644
index 00000000..4661b219
--- /dev/null
+++ b/web/components/molecules/Pagination/PaginationHooks.ts
@@ -0,0 +1,49 @@
+import { CollectionPath } from "@lib/types/db";
+import { getTotalRecords } from "db/firebase/getSize";
+import { useEffect, useState } from "react";
+
+export function usePaginatedData(fetchPage: (page: number, paginationReferences: Map) => Promise<{ data: T[], paginationInfo: any }>, type: CollectionPath) {
+ const [paginationReferences, setPaginationReferences] = useState