diff --git a/dashboard/src/pages/Users.tsx b/dashboard/src/pages/Users.tsx
index d040585..bed4d0b 100644
--- a/dashboard/src/pages/Users.tsx
+++ b/dashboard/src/pages/Users.tsx
@@ -28,6 +28,7 @@ import {
 	MenuList,
 	MenuItem,
 	useToast,
+	Spinner,
 } from '@chakra-ui/react';
 import {
 	FaAngleLeft,
@@ -97,7 +98,9 @@ export default function Users() {
 			maxPages: 1,
 		});
 	const [userList, setUserList] = React.useState<userDataTypes[]>([]);
+	const [loading, setLoading] = React.useState<boolean>(false);
 	const updateUserList = async () => {
+		setLoading(true);
 		const { data } = await client
 			.query(UserDetailsQuery, {
 				params: {
@@ -114,6 +117,7 @@ export default function Users() {
 			setPaginationProps({ ...paginationProps, ...pagination, maxPages });
 			setUserList(users);
 		}
+		setLoading(false);
 	};
 	React.useEffect(() => {
 		updateUserList();
@@ -161,202 +165,212 @@ export default function Users() {
 					Users
 				</Text>
 			</Flex>
-			{userList.length > 0 ? (
-				<Table variant="simple">
-					<Thead>
-						<Tr>
-							<Th>Email</Th>
-							<Th>Created At</Th>
-							<Th>Verified</Th>
-							<Th>Actions</Th>
-						</Tr>
-					</Thead>
-					<Tbody>
-						{userList.map((user: userDataTypes) => {
-							const { email_verified, created_at, ...rest }: any = user;
-							return (
-								<Tr key={user.id} style={{ fontSize: 14 }}>
-									<Td>{user.email}</Td>
-									<Td>{dayjs(user.created_at).format('MMM DD, YYYY')}</Td>
-									<Td>
-										<Tag
-											size="sm"
-											variant="outline"
-											colorScheme={user.email_verified ? 'green' : 'yellow'}
-										>
-											{user.email_verified.toString()}
-										</Tag>
-									</Td>
-									<Td>
-										<Menu>
-											<MenuButton as={Button} variant="unstyled" size="sm">
-												<Flex
-													justifyContent="space-between"
-													alignItems="center"
-												>
-													<Text fontSize="sm" fontWeight="light">
-														Menu
-													</Text>
-													<FaAngleDown style={{ marginLeft: 10 }} />
-												</Flex>
-											</MenuButton>
-											<MenuList>
-												<EditUserModal
-													user={rest}
-													updateUserList={updateUserList}
-												/>
-												{!user.email_verified && (
-													<MenuItem
-														onClick={() => userVerificationHandler(user)}
+			{!loading ? (
+				userList.length > 0 ? (
+					<Table variant="simple">
+						<Thead>
+							<Tr>
+								<Th>Email</Th>
+								<Th>Created At</Th>
+								<Th>Verified</Th>
+								<Th>Actions</Th>
+							</Tr>
+						</Thead>
+						<Tbody>
+							{userList.map((user: userDataTypes) => {
+								const { email_verified, created_at, ...rest }: any = user;
+								return (
+									<Tr key={user.id} style={{ fontSize: 14 }}>
+										<Td>{user.email}</Td>
+										<Td>{dayjs(user.created_at).format('MMM DD, YYYY')}</Td>
+										<Td>
+											<Tag
+												size="sm"
+												variant="outline"
+												colorScheme={user.email_verified ? 'green' : 'yellow'}
+											>
+												{user.email_verified.toString()}
+											</Tag>
+										</Td>
+										<Td>
+											<Menu>
+												<MenuButton as={Button} variant="unstyled" size="sm">
+													<Flex
+														justifyContent="space-between"
+														alignItems="center"
 													>
-														Verify User
-													</MenuItem>
-												)}
-											</MenuList>
-										</Menu>
-									</Td>
-								</Tr>
-							);
-						})}
-					</Tbody>
-					{paginationProps.maxPages > 1 && (
-						<TableCaption>
-							<Flex justifyContent="space-between" alignItems="center" m="2% 0">
-								<Flex flex="1">
-									<Tooltip label="First Page">
-										<IconButton
-											aria-label="icon button"
-											onClick={() =>
+														<Text fontSize="sm" fontWeight="light">
+															Menu
+														</Text>
+														<FaAngleDown style={{ marginLeft: 10 }} />
+													</Flex>
+												</MenuButton>
+												<MenuList>
+													<EditUserModal
+														user={rest}
+														updateUserList={updateUserList}
+													/>
+													{!user.email_verified && (
+														<MenuItem
+															onClick={() => userVerificationHandler(user)}
+														>
+															Verify User
+														</MenuItem>
+													)}
+												</MenuList>
+											</Menu>
+										</Td>
+									</Tr>
+								);
+							})}
+						</Tbody>
+						{paginationProps.maxPages > 1 && (
+							<TableCaption>
+								<Flex
+									justifyContent="space-between"
+									alignItems="center"
+									m="2% 0"
+								>
+									<Flex flex="1">
+										<Tooltip label="First Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: 1,
+													})
+												}
+												isDisabled={paginationProps.page <= 1}
+												mr={4}
+												icon={<FaAngleDoubleLeft />}
+											/>
+										</Tooltip>
+										<Tooltip label="Previous Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: paginationProps.page - 1,
+													})
+												}
+												isDisabled={paginationProps.page <= 1}
+												icon={<FaAngleLeft />}
+											/>
+										</Tooltip>
+									</Flex>
+									<Flex
+										flex="8"
+										justifyContent="space-evenly"
+										alignItems="center"
+									>
+										<Text mr={8}>
+											Page{' '}
+											<Text fontWeight="bold" as="span">
+												{paginationProps.page}
+											</Text>{' '}
+											of{' '}
+											<Text fontWeight="bold" as="span">
+												{paginationProps.maxPages}
+											</Text>
+										</Text>
+										<Flex alignItems="center">
+											<Text flexShrink="0">Go to page:</Text>{' '}
+											<NumberInput
+												ml={2}
+												mr={8}
+												w={28}
+												min={1}
+												max={paginationProps.maxPages}
+												onChange={(value) =>
+													paginationHandler({
+														page: parseInt(value),
+													})
+												}
+												value={paginationProps.page}
+											>
+												<NumberInputField />
+												<NumberInputStepper>
+													<NumberIncrementStepper />
+													<NumberDecrementStepper />
+												</NumberInputStepper>
+											</NumberInput>
+										</Flex>
+										<Select
+											w={32}
+											value={paginationProps.limit}
+											onChange={(e) =>
 												paginationHandler({
 													page: 1,
+													limit: parseInt(e.target.value),
 												})
 											}
-											isDisabled={paginationProps.page <= 1}
-											mr={4}
-											icon={<FaAngleDoubleLeft />}
-										/>
-									</Tooltip>
-									<Tooltip label="Previous Page">
-										<IconButton
-											aria-label="icon button"
-											onClick={() =>
-												paginationHandler({
-													page: paginationProps.page - 1,
-												})
-											}
-											isDisabled={paginationProps.page <= 1}
-											icon={<FaAngleLeft />}
-										/>
-									</Tooltip>
-								</Flex>
-								<Flex
-									flex="8"
-									justifyContent="space-evenly"
-									alignItems="center"
-								>
-									<Text mr={8}>
-										Page{' '}
-										<Text fontWeight="bold" as="span">
-											{paginationProps.page}
-										</Text>{' '}
-										of{' '}
-										<Text fontWeight="bold" as="span">
-											{paginationProps.maxPages}
-										</Text>
-									</Text>
-									<Flex alignItems="center">
-										<Text flexShrink="0">Go to page:</Text>{' '}
-										<NumberInput
-											ml={2}
-											mr={8}
-											w={28}
-											min={1}
-											max={paginationProps.maxPages}
-											onChange={(value) =>
-												paginationHandler({
-													page: parseInt(value),
-												})
-											}
-											value={paginationProps.page}
 										>
-											<NumberInputField />
-											<NumberInputStepper>
-												<NumberIncrementStepper />
-												<NumberDecrementStepper />
-											</NumberInputStepper>
-										</NumberInput>
+											{getLimits(paginationProps).map((pageSize) => (
+												<option key={pageSize} value={pageSize}>
+													Show {pageSize}
+												</option>
+											))}
+										</Select>
+									</Flex>
+									<Flex flex="1">
+										<Tooltip label="Next Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: paginationProps.page + 1,
+													})
+												}
+												isDisabled={
+													paginationProps.page >= paginationProps.maxPages
+												}
+												icon={<FaAngleRight />}
+											/>
+										</Tooltip>
+										<Tooltip label="Last Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: paginationProps.maxPages,
+													})
+												}
+												isDisabled={
+													paginationProps.page >= paginationProps.maxPages
+												}
+												ml={4}
+												icon={<FaAngleDoubleRight />}
+											/>
+										</Tooltip>
 									</Flex>
-									<Select
-										w={32}
-										value={paginationProps.limit}
-										onChange={(e) =>
-											paginationHandler({
-												page: 1,
-												limit: parseInt(e.target.value),
-											})
-										}
-									>
-										{getLimits(paginationProps).map((pageSize) => (
-											<option key={pageSize} value={pageSize}>
-												Show {pageSize}
-											</option>
-										))}
-									</Select>
 								</Flex>
-								<Flex flex="1">
-									<Tooltip label="Next Page">
-										<IconButton
-											aria-label="icon button"
-											onClick={() =>
-												paginationHandler({
-													page: paginationProps.page + 1,
-												})
-											}
-											isDisabled={
-												paginationProps.page >= paginationProps.maxPages
-											}
-											icon={<FaAngleRight />}
-										/>
-									</Tooltip>
-									<Tooltip label="Last Page">
-										<IconButton
-											aria-label="icon button"
-											onClick={() =>
-												paginationHandler({
-													page: paginationProps.maxPages,
-												})
-											}
-											isDisabled={
-												paginationProps.page >= paginationProps.maxPages
-											}
-											ml={4}
-											icon={<FaAngleDoubleRight />}
-										/>
-									</Tooltip>
-								</Flex>
-							</Flex>
-						</TableCaption>
-					)}
-				</Table>
-			) : (
-				<Flex
-					flexDirection="column"
-					minH="25vh"
-					justifyContent="center"
-					alignItems="center"
-				>
-					<Center w="50px" marginRight="1.5%">
-						<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
-					</Center>
-					<Text
-						fontSize="2xl"
-						paddingRight="1%"
-						fontWeight="bold"
-						color="#d9d9d9"
+							</TableCaption>
+						)}
+					</Table>
+				) : (
+					<Flex
+						flexDirection="column"
+						minH="25vh"
+						justifyContent="center"
+						alignItems="center"
 					>
-						No Data
-					</Text>
-				</Flex>
+						<Center w="50px" marginRight="1.5%">
+							<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
+						</Center>
+						<Text
+							fontSize="2xl"
+							paddingRight="1%"
+							fontWeight="bold"
+							color="#d9d9d9"
+						>
+							No Data
+						</Text>
+					</Flex>
+				)
+			) : (
+				<Center minH="25vh">
+					<Spinner />
+				</Center>
 			)}
 		</Box>
 	);