Moved pagination below list and added margin

client/src/components/PaginatedList.jsx

@@ -1,4 +1,4 @@
-import { List, Pagination } from '@mui/material';
+import { List, Pagination, Box } from '@mui/material';
 
 import { NoData } from 'components';
 
@@ -8,22 +8,27 @@ export default function PaginatedList({
     data,
     handleChangePage,
     noData = true,
-    page
+    page,
 }) {
     return (
         <List sx={{ pl: 2, pr: 2, width: '100%' }}>
+            {data.length
+                ? data.map((item) => Component(item))
+                : noData && <NoData />}
             {count > 1 && (
-                <Pagination
-                    count={count}
-                    onChange={handleChangePage}
-                    page={page}
-                />
+                <Box
+                    fullWidth
+                    display='flex'
+                    justifyContent='center'
+                    sx={{ margin: '1vh 0' }}
+                >
+                    <Pagination
+                        count={count}
+                        onChange={handleChangePage}
+                        page={page}
+                    />
+                </Box>
             )}
-            {
-                data.length
-                    ? data.map(item => Component(item))
-                    : noData && <NoData />
-            }
         </List>
     );
 }