diff --git a/src/components/Accounts/ApprovedAccounts.jsx b/src/components/Accounts/ApprovedAccounts.jsx
index 927c1b4..d2de376 100644
--- a/src/components/Accounts/ApprovedAccounts.jsx
+++ b/src/components/Accounts/ApprovedAccounts.jsx
@@ -1,67 +1,177 @@
 import { NPOBackend } from '../../utils/auth_utils.js';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { Box, Table, Thead, Tbody, Tr, Th, Td, TableContainer, Button, Checkbox, useDisclosure } from '@chakra-ui/react'
 import { CloseIcon } from '@chakra-ui/icons'
 import DeleteAccountModal from './DeleteAccountModal.jsx';
 import PropTypes from 'prop-types';
+import PaginationFooter from "../../components/Catalog/PaginationFooter/PaginationFooter";
+import { usePagination } from '@ajna/pagination';
 
-const ApprovedAccounts = ( {accountType} ) => {
+const ApprovedAccounts = ( {accountType, searchQuery} ) => {
     const [approvedAccounts, setApprovedAccounts] = useState([]);
     const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure();
-    const [deleteItemId, setDeleteItemId] = useState("");
+    const [deleteItemId, setDeleteItemId] = useState([]);
+    const [totalRowCount, setTotalRowCount] = useState(0);
+    const { currentPage, setCurrentPage, pagesCount, offset, pageSize, setPageSize} = usePagination({
+        initialState: { currentPage: 1, pageSize: 10 },
+        total: totalRowCount,
+      });
+    const [individualChecked, setIndividualChecked] = useState(new Array(approvedAccounts.length).fill(false));
+    const [checkedAccountIds, setCheckedAccountIds] = useState([]);
+    const [dataShouldRevalidate, setDataShouldRevalidate] = useState(false);
+
+    const fetchTableData = useCallback(async () => {
+        try {
+            const { data } = await NPOBackend.get(`/users/approved-accounts`, {
+                params: {
+                    keyword: (searchQuery && searchQuery.length) && searchQuery,
+                    page: currentPage,
+                    limit: pageSize,
+                    accountType: accountType}
+            });
+            setApprovedAccounts(data.accounts);
+            setTotalRowCount(Number(data.count[0].count));
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    }, [searchQuery, currentPage, pageSize, accountType]);
+
+    useEffect(() => {
+        fetchTableData();
+    }, [fetchTableData]);
+
+    useEffect(() => {
+        if (dataShouldRevalidate) {
+            fetchTableData();
+            setDataShouldRevalidate(false);
+            setIndividualChecked(new Array(totalRowCount).fill(false));
+            setCheckedAccountIds([]);
+        }
+    }, [dataShouldRevalidate, fetchTableData, totalRowCount]);
+
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [searchQuery, setCurrentPage, pageSize]);
 
     useEffect(() => {
-        const renderTable = async () => {
-            const { data } = await NPOBackend.get('/users/approved-accounts');
-            setApprovedAccounts(data);
-        };
-        renderTable();
-    }, [approvedAccounts])
+        setIndividualChecked(new Array(totalRowCount).fill(false));
+        setCheckedAccountIds([]);
+    }, [searchQuery, currentPage, totalRowCount]);
 
     const handleDeleteClick = id => {
         setDeleteItemId(id);
         onDeleteOpen();
     }
 
+    const updateAllCheckedAccountIds = (e) => {
+        setIndividualChecked(new Array(approvedAccounts.length).fill(e.target.checked));
+        if (e.target.checked) {
+            let allIds = [];
+            for (let i = 0; i < approvedAccounts.length; i++) {
+                allIds.push(approvedAccounts[i].id)
+            }
+            setCheckedAccountIds(allIds);
+        } else {
+            setCheckedAccountIds([]);
+        }
+    }
+
+    const updateIndividualCheckedAccountIds = (e, id, index) => {
+        const newIndividualChecked = [...individualChecked];
+        newIndividualChecked[index] = e.target.checked;
+        setIndividualChecked(newIndividualChecked);
+        let newCheckedAccountIds = [... checkedAccountIds];
+        if (e.target.checked) {
+            newCheckedAccountIds.push(id);
+            setCheckedAccountIds(newCheckedAccountIds);
+        } else {
+            let index = newCheckedAccountIds.indexOf(id);
+            newCheckedAccountIds.splice(index, 1);
+            setCheckedAccountIds(newCheckedAccountIds);
+        }
+    }
+
     return (
         <Box>
-            <TableContainer>
-                <Table variant='simple'>
-                    <Thead>
-                        <Tr>
-                            <Th width="5%"><Checkbox isDisabled /></Th>
-                            <Th>Name</Th>
-                            <Th>Email</Th>
-                            <Th>Deactivate</Th>
-                        </Tr>
-                    </Thead>
-                    <Tbody>
-                    {
-                        approvedAccounts.map((account, i) => (
-                            accountType === account.type ? (
-                                <Tr key={i}>
-                                    <Td><Checkbox></Checkbox></Td>
-                                    <Td>{account.firstName} {account.lastName}</Td>
-                                    <Td>{account.email}</Td>
-                                    <Td>
-                                        <Button onClick={() => { handleDeleteClick(account.id) }} size='sm' variant='outline'><CloseIcon w={3} h={3} color='gray'/></Button>
-                                    </Td>
-                                </Tr>
-                            ) : (
-                                <></>
-                            )
-                        ))
+          <TableContainer border="1px solid #ededed" borderRadius="10px">
+            <Table variant='simple'>
+              <Thead>
+                <Tr>
+                  <Th w="5%" h="50px"><Checkbox onChange={(e) => { updateAllCheckedAccountIds(e) }}/></Th>
+                  <Th w="30%">Name</Th>
+                  <Th w="30%">Email</Th>
+                  <Th w="0" textAlign="right" >Deactivate</Th>
+                  {checkedAccountIds.length > 0 &&
+                    <Th w="20%" textAlign="right">
+                      <Button isDisabled={checkedAccountIds.length === 0}
+                        onClick={() => { handleDeleteClick(checkedAccountIds) }}
+                        size="xs"
+                        variant="outline"
+                        borderRadius="4px"
+                        borderWidth="1px"
+                        padding="0"
+                        borderColor={checkedAccountIds.length != 0 ? 'red' : 'gray.500'}>
+                        <CloseIcon w="10px" h="10px" color={checkedAccountIds.length != 0 ? 'red' : 'gray'}/>
+                      </Button>
+                    </Th>
+                    }
+                </Tr>
+              </Thead>
+              <Tbody>
+              {
+                approvedAccounts.map((account, i) => (
+                  <Tr key={i}>
+                    <Td>
+                      <Checkbox
+                        isChecked={individualChecked[i]}
+                        onChange={(e) => { updateIndividualCheckedAccountIds(e, account.id, i)}}>
+                      </Checkbox>
+                    </Td>
+                    <Td>{account.firstName} {account.lastName}</Td>
+                    <Td>{account.email}</Td>
+                    {checkedAccountIds.length > 0 &&
+                      <Td></Td>
                     }
-                    </Tbody>
-                </Table>
-            </TableContainer>
-            <DeleteAccountModal isOpen={isDeleteOpen} onClose={onDeleteClose} deleteItemId={deleteItemId} />
+                    <Td textAlign="right">
+                      <Button
+                        onClick={() => { handleDeleteClick([account.id]) }}
+                        size="xs"
+                        variant="outline"
+                        borderColor="gray.500"
+                        borderRadius="4px"
+                        borderWidth="1px"
+                        padding="0"
+                      >
+                        <CloseIcon w="10px" h="10px" color="gray.500"/>
+                      </Button>
+                    </Td>
+                  </Tr>
+                ))
+              }
+              </Tbody>
+            </Table>
+            <PaginationFooter
+              pagesCount={pagesCount}
+              totalRowCount={totalRowCount}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              rangeString={`${offset + 1} - ${offset + approvedAccounts.length}`}
+            />
+          </TableContainer>
+          <DeleteAccountModal
+              isOpen={isDeleteOpen}
+              onClose={onDeleteClose}
+              deleteItemId={deleteItemId}
+              setDataShouldRevalidate={setDataShouldRevalidate}
+          />
         </Box>
     )
 }
 
 ApprovedAccounts.propTypes = {
     accountType: PropTypes.string.isRequired,
+    searchQuery: PropTypes.string
 };
 
-export default ApprovedAccounts;
\ No newline at end of file
+export default ApprovedAccounts;
diff --git a/src/components/Accounts/DeleteAccountModal.jsx b/src/components/Accounts/DeleteAccountModal.jsx
index 040ef34..dc15679 100644
--- a/src/components/Accounts/DeleteAccountModal.jsx
+++ b/src/components/Accounts/DeleteAccountModal.jsx
@@ -11,11 +11,14 @@ import {
 } from '@chakra-ui/react';
 import { NPOBackend } from '../../utils/auth_utils.js';
 
-const DeleteAccountModal = ({ isOpen, onClose, deleteItemId}) => {
+const DeleteAccountModal = ({ isOpen, onClose, deleteItemId, setDataShouldRevalidate}) => {
   const handleConfirmDelete = async idToDelete => {
     try {
-      await NPOBackend.delete(`/users/${idToDelete}`);
+      for (let i = 0; i < idToDelete.length; i++) {
+        await NPOBackend.delete(`/users/${idToDelete[i]}`);
+      }
       onClose();
+      setDataShouldRevalidate(true);
     } catch (error) {
       console.error(error);
     }
@@ -30,7 +33,7 @@ const DeleteAccountModal = ({ isOpen, onClose, deleteItemId}) => {
         <ModalBody>Are you sure? You cannot undo this action afterwards.</ModalBody>
         <ModalFooter gap='3'>
         <Button onClick={onClose}>Cancel</Button>
-          <Button onClick={() => handleConfirmDelete(deleteItemId)} colorScheme='red'>Delete</Button>
+          <Button onClick={() => {handleConfirmDelete(deleteItemId)}} colorScheme='red'>Delete</Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
@@ -40,7 +43,8 @@ const DeleteAccountModal = ({ isOpen, onClose, deleteItemId}) => {
 DeleteAccountModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  deleteItemId: PropTypes.string.isRequired,
+  deleteItemId: PropTypes.array.isRequired,
+  setDataShouldRevalidate: PropTypes.func.isRequired
 };
 
 export default DeleteAccountModal;
diff --git a/src/components/Accounts/PendingAccounts.jsx b/src/components/Accounts/PendingAccounts.jsx
index bd775ae..52e71c8 100644
--- a/src/components/Accounts/PendingAccounts.jsx
+++ b/src/components/Accounts/PendingAccounts.jsx
@@ -4,60 +4,182 @@ import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Button } from '@chakra
 import { Checkbox } from '@chakra-ui/react'
 import PropTypes from 'prop-types';
 
-const PendingAccounts = ( {accountType} ) => {
+const PendingAccounts = ( {accountType, setHasPendingAccounts} ) => {
     const [pendingAccounts, setPendingAccounts] = useState([]);
+    const [individualChecked, setIndividualChecked] = useState(new Array(pendingAccounts.length).fill(false));
+    const [checkedAccountIds, setCheckedAccountIds] = useState([]);
+    const [accountStatus, setAccountStatus] = useState({});
+
 
     useEffect(() => {
         const renderTable = async () => {
-            const { data } = await NPOBackend.get('/users/pending-accounts');
+            const { data } = await NPOBackend.get('/users/pending-accounts', {params: {accountType: accountType}});
             setPendingAccounts(data);
+            setHasPendingAccounts(data.length !== 0);
         };
         renderTable();
+    }, [accountType, setHasPendingAccounts])
+
+    useEffect(() => {
+        const newAccountStatus = {}
+        for (let i = 0; i < pendingAccounts.length; i++) {
+            newAccountStatus[pendingAccounts[i]["id"]] = "pending";
+        }
+        setAccountStatus(newAccountStatus);
     }, [pendingAccounts])
 
-    const handleApproveUser = async (id) => {
+    const changeStatus = ((accountid, status) => {
+        let newAccountStatus = {...accountStatus};
+        newAccountStatus[accountid] = status;
+        setAccountStatus(newAccountStatus);
+    });
+
+    const handleApproveDeclineUser = async (ids, option) => {
         try {
-            await NPOBackend.put(`/users/approve/${id}`);
+            for (let i = 0; i < ids.length; i++) {
+                if (option === "approve-option") {
+                    await NPOBackend.put(`/users/approve/${ids[i]}`);
+                }
+                else if (option === "decline-option") {
+                    await NPOBackend.delete(`/users/${ids[i]}`);
+                }
+            }
+            setIndividualChecked(new Array(pendingAccounts.length).fill(false));
         } catch (error) {
             console.log(error);
         }
     }
 
-    const handleDeleteUser = async (id) => {
-        try {
-            await NPOBackend.delete(`/users/${id}`);
-        } catch (error) {
-            console.log(error);
+    const updateAllIndividualChecked = (e) => {
+        let newIndividualChecked = [];
+        for (let i = 0; i < pendingAccounts.length; i++) {
+            if (accountStatus[pendingAccounts[i].id] === "pending") {
+                newIndividualChecked.push(e.target.checked);
+            }
+            else {
+                newIndividualChecked.push(false);
+            }
+        }
+        setIndividualChecked(newIndividualChecked);
+    }
+
+    const updateAllCheckedAccountIds = (e) => {
+        if (e.target.checked) {
+            let allIds = [];
+            for (let i = 0; i < pendingAccounts.length; i++) {
+                if (accountStatus[pendingAccounts[i].id] === "pending") {
+                    allIds.push(pendingAccounts[i].id);
+                }
+            }
+            setCheckedAccountIds(allIds);
+        } else {
+            setCheckedAccountIds([]);
+        }
+    }
+
+    const updateIndividualCheckedAccountIds = (e, id, index) => {
+        const newIndividualChecked = [...individualChecked];
+        newIndividualChecked[index] = e.target.checked;
+        setIndividualChecked(newIndividualChecked);
+        let newCheckedAccountIds = [... checkedAccountIds];
+        if (e.target.checked) {
+            newCheckedAccountIds.push(id);
+            setCheckedAccountIds(newCheckedAccountIds);
+        } else {
+            let index = newCheckedAccountIds.indexOf(id);
+            newCheckedAccountIds.splice(index, 1);
+            setCheckedAccountIds(newCheckedAccountIds);
+        }
+    }
+
+    const acceptDeclineAllClick = (option) => {
+        handleApproveDeclineUser(checkedAccountIds, option);
+        const newAccountStatus = {... accountStatus};
+        for (let i = 0; i < checkedAccountIds.length; i++) {
+            newAccountStatus[checkedAccountIds[i]] = option === "approve-option" ? "approved" : "declined";
         }
+        setAccountStatus(newAccountStatus);
+        setCheckedAccountIds([]);
     }
 
     return (
-        <TableContainer>
+        <TableContainer border="1px solid #ededed" borderRadius="10px">
             <Table variant='simple'>
                 <Thead>
                     <Tr>
-                        <Th width="5%"><Checkbox isDisabled /></Th>
-                        <Th>Name</Th>
-                        <Th>Email</Th>
-                        <Th>Action</Th>
+                        <Th w="5%" h="50px"><Checkbox onChange={(e) => {updateAllIndividualChecked(e); updateAllCheckedAccountIds(e);}}/></Th>
+                        <Th w="30%">Name</Th>
+                        <Th w="30%">Email</Th>
+                        <Th w="0" textAlign="right">Action</Th>
+                        {checkedAccountIds.length > 0 &&
+                            <Th w="20%" textAlign="right">
+                                <Button
+                                    onClick={ () => acceptDeclineAllClick("approve-option") }
+                                    mr={3}
+                                    colorScheme='blue'
+                                    fontSize="sm"
+                                    h="6"
+                                    w="16"
+                                    fontWeight="400"
+                                >
+                                    Accept
+                                </Button>
+                                <Button
+                                    onClick={ () => acceptDeclineAllClick("decline-option") }
+                                    fontSize="sm"
+                                    h="6"
+                                    w="16"
+                                    fontWeight="400"
+                                >
+                                    Decline
+                                </Button>
+                            </Th>
+                        }
                     </Tr>
                 </Thead>
                 <Tbody>
                 {
                     pendingAccounts.map((account, i) => (
-                         accountType === account.type ? (
-                                <Tr key={i}>
-                                    <Td><Checkbox></Checkbox></Td>
-                                    <Td>{account.firstName} {account.lastName}</Td>
-                                    <Td>{account.email}</Td>
-                                    <Td>
-                                        <Button onClick={() => { handleApproveUser(account.id) }} mr={3} colorScheme='blue'>Accept</Button>
-                                        <Button onClick={() => { handleDeleteUser(account.id) }}>Decline</Button>
+                        <Tr key={i}>
+                            <Td><Checkbox isDisabled={accountStatus[account.id] != "pending"} isChecked={individualChecked[i]} onChange={(e) => {updateIndividualCheckedAccountIds(e, account.id, i);}}>
+                                </Checkbox>
+                            </Td>
+                            <Td color={accountStatus[account.id] === "pending" ? "black" : "gray"}>{account.firstName} {account.lastName}</Td>
+                            <Td color={accountStatus[account.id] === "pending" ? "black" : "gray"}>{account.email}</Td>
+                            {checkedAccountIds.length > 0 &&
+                                <Td></Td>
+                            }
+                            {
+                                accountStatus[account.id] === "pending" ? (
+                                    <Td textAlign="right">
+                                        <Button
+                                            onClick={() => { handleApproveDeclineUser([account.id], "approve-option"); changeStatus(account.id, "approved");}}
+                                            mr={3}
+                                            colorScheme='blue'
+                                            fontSize="sm"
+                                            h="6"
+                                            w="16"
+                                            fontWeight="400"
+                                        >
+                                            Accept
+                                        </Button>
+                                        <Button
+                                            onClick={() => { handleApproveDeclineUser([account.id], "decline-option"); changeStatus(account.id, "declined");}}
+                                            fontSize="sm"
+                                            h="6"
+                                            w="16"
+                                            fontWeight="400"
+                                        >
+                                            Decline
+                                        </Button>
                                     </Td>
-                                </Tr>
-                            ) : (
-                                <></>
-                            )
+                                ) : accountStatus[account.id] === "approved" ? (
+                                    <Td textAlign="right" color="green">Approved</Td>
+                                ) : (
+                                    <Td textAlign="right" color="red">Declined</Td>
+                                )
+                            }
+                        </Tr>
                         )
                     )
                 }
@@ -69,6 +191,7 @@ const PendingAccounts = ( {accountType} ) => {
 
 PendingAccounts.propTypes = {
     accountType: PropTypes.string.isRequired,
+    setHasPendingAccounts: PropTypes.func.isRequired
 };
 
-export default PendingAccounts;
\ No newline at end of file
+export default PendingAccounts;
diff --git a/src/components/Authentication/SignUp.jsx b/src/components/Authentication/SignUp.jsx
index 95a1c98..5b9168c 100644
--- a/src/components/Authentication/SignUp.jsx
+++ b/src/components/Authentication/SignUp.jsx
@@ -6,7 +6,7 @@ import emailtemplate from '../EmailTemplates/emailtemplate';
 import { Box, Heading, Text, FormControl, Button, Center, Link, Input, Alert, AlertDescription } from '@chakra-ui/react';
 import AUTH_ROLES from '../../utils/auth_config';
 
-const { USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
+const { ADMIN_ROLE, USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
 
 const SignUp = () => {
   const [firstName, setFirstName] = useState();
@@ -45,7 +45,7 @@ const SignUp = () => {
       }
 
       // register email and password
-      await registerWithEmailAndPassword(email, password, USER_ROLE, navigate, '/awaitConfirmation', firstName, lastName);
+      await registerWithEmailAndPassword(email, password, userType, navigate, '/awaitConfirmation', firstName, lastName);
 
       // send email to Debbie 
       const subject = "New User Created Account";
@@ -86,7 +86,7 @@ const SignUp = () => {
                 }}
               >
                 <Button
-                  onClick={() => setUserType("admin")}
+                  onClick={() => setUserType(ADMIN_ROLE)}
                   type="submit"
                   style={{
                     borderRadius: '30px',
@@ -104,7 +104,7 @@ const SignUp = () => {
                 </Button>
 
                 <Button
-                  onClick={() => setUserType("student")}
+                  onClick={() => setUserType(USER_ROLE)}
                   type="submit"
                   style={{
                     borderRadius: '30px',
diff --git a/src/pages/Accounts/Accounts.jsx b/src/pages/Accounts/Accounts.jsx
index 6b65ef8..8d14e15 100644
--- a/src/pages/Accounts/Accounts.jsx
+++ b/src/pages/Accounts/Accounts.jsx
@@ -1,33 +1,88 @@
 import PendingAccounts from "../../components/Accounts/PendingAccounts";
 import ApprovedAccounts from "../../components/Accounts/ApprovedAccounts";
-import { Box, Heading, Tabs, TabList, TabPanels, Tab, TabPanel} from '@chakra-ui/react'
+import { Box, Heading, Tabs, TabList, TabPanels, Tab, TabPanel, Input, InputGroup, InputLeftElement, HStack, Center } from '@chakra-ui/react'
+import { SearchIcon } from '@chakra-ui/icons';
+import { useState } from 'react';
 
 const Accounts = () => {
+    const [approvedAdminKeyword, setApprovedAdminKeyword] = useState("");
+    const [approvedStudentKeyword, setApprovedStudentKeyword] = useState("");
+    const [hasAdminPendingAccounts, setHasAdminPendingAccounts] = useState(true);
+    const [hasStudentPendingAccounts, setHasStudentPendingAccounts] = useState(true);
+
     return (
-        <Box>
+        <Box marginTop='4vh' marginBottom='8vh'>
+            <Center>
             <Tabs>
-                <TabList>
+                <TabList marginBottom='2vh'>
                     <Tab>Admins</Tab>
                     <Tab>Students</Tab>
                 </TabList>
 
                 <TabPanels>
                     <TabPanel>
-                        <Heading>Pending Accounts</Heading>
-                        <PendingAccounts accountType="admin" />
-                        <Heading>Accounts</Heading>
-                        <ApprovedAccounts accountType="admin" />
+                        { hasAdminPendingAccounts ? (
+                            <>
+                            <Box marginBottom="6vh">
+                                <Heading marginBottom="2vh" fontSize="24px">Pending</Heading>
+                                <PendingAccounts accountType="admin" setHasPendingAccounts={setHasAdminPendingAccounts}/>
+                            </Box>
+                            </>
+                            ) : <></>
+                        }
+                        <HStack spacing='90vh' align="start">
+                            <Box><Heading marginBottom="2vh" fontSize="24px">Accounts</Heading></Box>
+                            <Box>
+                                <InputGroup width="315px">
+                                    <InputLeftElement pointerEvents="none" h="full">
+                                        <SearchIcon />
+                                    </InputLeftElement>
+                                    <Input
+                                        type="text"
+                                        placeholder="Search..."
+                                        variant="filled"
+                                        bgColor="blackAlpha.200"
+                                        h="30px"
+                                        onChange={ (e) => setApprovedAdminKeyword(e.target.value)}
+                                    />
+                                </InputGroup>
+                            </Box>
+                        </HStack>
+                        <ApprovedAccounts accountType="admin" searchQuery={approvedAdminKeyword}/>
                     </TabPanel>
                     <TabPanel>
-                        <Heading>Pending Accounts</Heading>
-                        <PendingAccounts accountType="student" />
-                        <Heading>Accounts</Heading>
-                        <ApprovedAccounts accountType="student" />
+                            { hasStudentPendingAccounts ? (
+                                <Box marginBottom="6vh">
+                                    <Heading marginBottom="2vh" fontSize="24px">Pending</Heading>
+                                    <PendingAccounts accountType="student" setHasPendingAccounts={setHasStudentPendingAccounts} marginBottom="4vh" />
+                                </Box>
+                                ): <></>
+                            }
+                        <HStack spacing='90vh' align="start">
+                            <Box><Heading marginBottom="2vh" fontSize="24px">Accounts</Heading></Box>
+                            <Box>
+                                <InputGroup width="315px">
+                                    <InputLeftElement pointerEvents="none" h="full">
+                                        <SearchIcon />
+                                    </InputLeftElement>
+                                    <Input
+                                        type="text"
+                                        placeholder="Search..."
+                                        variant="filled"
+                                        bgColor="blackAlpha.200"
+                                        h="30px"
+                                        onChange={ (e) => setApprovedStudentKeyword(e.target.value)}
+                                    />
+                                </InputGroup>
+                            </Box>
+                        </HStack>
+                        <Box><ApprovedAccounts accountType="student" searchQuery={approvedStudentKeyword}/></Box>
                     </TabPanel>
                 </TabPanels>
             </Tabs>
+            </Center>
         </Box>
     );
 }
 
-export default Accounts;
\ No newline at end of file
+export default Accounts;
diff --git a/src/pages/Catalog/Catalog.jsx b/src/pages/Catalog/Catalog.jsx
index 3a4517b..859155c 100644
--- a/src/pages/Catalog/Catalog.jsx
+++ b/src/pages/Catalog/Catalog.jsx
@@ -54,7 +54,7 @@ export default function Catalog({ onDayPlanner, addExistingEventFunc, setCurrEve
 
   const { currentPage, setCurrentPage, pagesCount, offset, pageSize, setPageSize } = usePagination({
     initialState: { currentPage: 1, pageSize: 10 },
-    pagesCount: Math.ceil(totalRowCount / 10),
+    total: totalRowCount
   });
 
   // const handleEditForm = data => {
@@ -116,7 +116,7 @@ export default function Catalog({ onDayPlanner, addExistingEventFunc, setCurrEve
   // Reset pagination on filter change
   useEffect(() => {
     setCurrentPage(1);
-  }, [filterValues, setCurrentPage]);
+  }, [filterValues, setCurrentPage, pageSize, searchTerm]);
 
   return (
     <Container maxW="none" m="0" p="0">