diff --git a/apps/react-vite/src/app/router.tsx b/apps/react-vite/src/app/router.tsx
index 713d54d1..2434612a 100644
--- a/apps/react-vite/src/app/router.tsx
+++ b/apps/react-vite/src/app/router.tsx
@@ -49,11 +49,11 @@ export const createAppRouter = (queryClient: QueryClient) =>
             );
             return { Component: DiscussionsRoute };
           },
-          loader: async () => {
+          loader: async (args: LoaderFunctionArgs) => {
             const { discussionsLoader } = await import(
               './routes/app/discussions/discussions'
             );
-            return discussionsLoader(queryClient)();
+            return discussionsLoader(queryClient)(args);
           },
         },
         {
diff --git a/apps/react-vite/src/app/routes/app/discussions/discussion.tsx b/apps/react-vite/src/app/routes/app/discussions/discussion.tsx
index 2cc4a5bf..db111d9e 100644
--- a/apps/react-vite/src/app/routes/app/discussions/discussion.tsx
+++ b/apps/react-vite/src/app/routes/app/discussions/discussion.tsx
@@ -4,7 +4,7 @@ import { useParams, LoaderFunctionArgs } from 'react-router-dom';
 
 import { ContentLayout } from '@/components/layouts';
 import { Spinner } from '@/components/ui/spinner';
-import { getCommentsQueryOptions } from '@/features/comments/api/get-comments';
+import { getInfiniteCommentsQueryOptions } from '@/features/comments/api/get-comments';
 import { Comments } from '@/features/comments/components/comments';
 import {
   useDiscussion,
@@ -18,13 +18,13 @@ export const discussionLoader =
     const discussionId = params.discussionId as string;
 
     const discussionQuery = getDiscussionQueryOptions(discussionId);
-    const commentsQuery = getCommentsQueryOptions(discussionId);
+    const commentsQuery = getInfiniteCommentsQueryOptions(discussionId);
 
     const promises = [
       queryClient.getQueryData(discussionQuery.queryKey) ??
         (await queryClient.fetchQuery(discussionQuery)),
       queryClient.getQueryData(commentsQuery.queryKey) ??
-        (await queryClient.fetchQuery(commentsQuery)),
+        (await queryClient.fetchInfiniteQuery(commentsQuery)),
     ] as const;
 
     const [discussion, comments] = await Promise.all(promises);
@@ -50,11 +50,13 @@ export const DiscussionRoute = () => {
     );
   }
 
-  if (!discussionQuery.data) return null;
+  const discussion = discussionQuery.data?.data;
+
+  if (!discussion) return null;
 
   return (
     <>
-      <ContentLayout title={discussionQuery.data.title}>
+      <ContentLayout title={discussion.title}>
         <DiscussionView discussionId={discussionId} />
         <div className="mt-8">
           <ErrorBoundary
diff --git a/apps/react-vite/src/app/routes/app/discussions/discussions.tsx b/apps/react-vite/src/app/routes/app/discussions/discussions.tsx
index f80d150c..502faaa3 100644
--- a/apps/react-vite/src/app/routes/app/discussions/discussions.tsx
+++ b/apps/react-vite/src/app/routes/app/discussions/discussions.tsx
@@ -1,19 +1,26 @@
 import { QueryClient, useQueryClient } from '@tanstack/react-query';
+import { LoaderFunctionArgs } from 'react-router-dom';
 
 import { ContentLayout } from '@/components/layouts';
-import { getCommentsQueryOptions } from '@/features/comments/api/get-comments';
+import { getInfiniteCommentsQueryOptions } from '@/features/comments/api/get-comments';
 import { getDiscussionsQueryOptions } from '@/features/discussions/api/get-discussions';
 import { CreateDiscussion } from '@/features/discussions/components/create-discussion';
 import { DiscussionsList } from '@/features/discussions/components/discussions-list';
 
-export const discussionsLoader = (queryClient: QueryClient) => async () => {
-  const query = getDiscussionsQueryOptions();
+export const discussionsLoader =
+  (queryClient: QueryClient) =>
+  async ({ request }: LoaderFunctionArgs) => {
+    const url = new URL(request.url);
 
-  return (
-    queryClient.getQueryData(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  );
-};
+    const page = Number(url.searchParams.get('page') || 1);
+
+    const query = getDiscussionsQueryOptions({ page });
+
+    return (
+      queryClient.getQueryData(query.queryKey) ??
+      (await queryClient.fetchQuery(query))
+    );
+  };
 
 export const DiscussionsRoute = () => {
   const queryClient = useQueryClient();
@@ -26,7 +33,9 @@ export const DiscussionsRoute = () => {
         <DiscussionsList
           onDiscussionPrefetch={(id) => {
             // Prefetch the comments data when the user hovers over the link in the list
-            queryClient.prefetchQuery(getCommentsQueryOptions(id));
+            queryClient.prefetchInfiniteQuery(
+              getInfiniteCommentsQueryOptions(id),
+            );
           }}
         />
       </div>
diff --git a/apps/react-vite/src/app/routes/auth/register.tsx b/apps/react-vite/src/app/routes/auth/register.tsx
index 0646c9ab..74cd7bb2 100644
--- a/apps/react-vite/src/app/routes/auth/register.tsx
+++ b/apps/react-vite/src/app/routes/auth/register.tsx
@@ -27,7 +27,7 @@ export const RegisterRoute = () => {
         }
         chooseTeam={chooseTeam}
         setChooseTeam={() => setChooseTeam(!chooseTeam)}
-        teams={teamsQuery.data}
+        teams={teamsQuery.data?.data}
       />
     </AuthLayout>
   );
diff --git a/apps/react-vite/src/components/ui/table/pagination.tsx b/apps/react-vite/src/components/ui/table/pagination.tsx
new file mode 100644
index 00000000..5ea63b5d
--- /dev/null
+++ b/apps/react-vite/src/components/ui/table/pagination.tsx
@@ -0,0 +1,188 @@
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+} from '@radix-ui/react-icons';
+import * as React from 'react';
+
+import { ButtonProps, buttonVariants } from '@/components/ui/button';
+import { cn } from '@/utils/cn';
+
+import { Link } from '../link';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  children,
+  href,
+  ...props
+}: PaginationLinkProps) => (
+  <Link
+    to={href as string}
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </Link>
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn('gap-1 pl-2.5', className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="size-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn('gap-1 pr-2.5', className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRightIcon className="size-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="size-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};
+
+export type TablePaginationProps = {
+  totalPages: number;
+  currentPage: number;
+  rootUrl: string;
+};
+
+export const TablePagination = ({
+  totalPages,
+  currentPage,
+  rootUrl,
+}: TablePaginationProps) => {
+  const createHref = (page: number) => `${rootUrl}?page=${page}`;
+
+  return (
+    <Pagination className="justify-end py-8">
+      <PaginationContent>
+        {currentPage > 1 && (
+          <PaginationItem>
+            <PaginationPrevious href={createHref(currentPage - 1)} />
+          </PaginationItem>
+        )}
+        {currentPage > 2 && (
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
+        {currentPage > 1 && (
+          <PaginationItem>
+            <PaginationLink href={createHref(currentPage - 1)}>
+              {currentPage - 1}
+            </PaginationLink>
+          </PaginationItem>
+        )}
+        <PaginationItem className="rounded-sm bg-gray-200">
+          <PaginationLink href={createHref(currentPage)}>
+            {currentPage}
+          </PaginationLink>
+        </PaginationItem>
+        {totalPages > currentPage && (
+          <PaginationItem>
+            <PaginationLink href={createHref(currentPage + 1)}>
+              {currentPage + 1}
+            </PaginationLink>
+          </PaginationItem>
+        )}
+        {totalPages > currentPage + 1 && (
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
+        {currentPage < totalPages && (
+          <PaginationItem>
+            <PaginationNext href={createHref(totalPages)} />
+          </PaginationItem>
+        )}
+      </PaginationContent>
+    </Pagination>
+  );
+};
diff --git a/apps/react-vite/src/components/ui/table/table.tsx b/apps/react-vite/src/components/ui/table/table.tsx
index 3634e938..d1f4bac0 100644
--- a/apps/react-vite/src/components/ui/table/table.tsx
+++ b/apps/react-vite/src/components/ui/table/table.tsx
@@ -4,6 +4,8 @@ import * as React from 'react';
 import { BaseEntity } from '@/types/api';
 import { cn } from '@/utils/cn';
 
+import { TablePagination, TablePaginationProps } from './pagination';
+
 const TableElement = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
@@ -130,11 +132,13 @@ type TableColumn<Entry> = {
 export type TableProps<Entry> = {
   data: Entry[];
   columns: TableColumn<Entry>[];
+  pagination?: TablePaginationProps;
 };
 
 export const Table = <Entry extends BaseEntity>({
   data,
   columns,
+  pagination,
 }: TableProps<Entry>) => {
   if (!data?.length) {
     return (
@@ -145,25 +149,29 @@ export const Table = <Entry extends BaseEntity>({
     );
   }
   return (
-    <TableElement>
-      <TableHeader>
-        <TableRow>
-          {columns.map((column, index) => (
-            <TableHead key={column.title + index}>{column.title}</TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {data.map((entry, entryIndex) => (
-          <TableRow key={entry?.id || entryIndex}>
-            {columns.map(({ Cell, field, title }, columnIndex) => (
-              <TableCell key={title + columnIndex}>
-                {Cell ? <Cell entry={entry} /> : `${entry[field]}`}
-              </TableCell>
+    <>
+      <TableElement>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column, index) => (
+              <TableHead key={column.title + index}>{column.title}</TableHead>
             ))}
           </TableRow>
-        ))}
-      </TableBody>
-    </TableElement>
+        </TableHeader>
+        <TableBody>
+          {data.map((entry, entryIndex) => (
+            <TableRow key={entry?.id || entryIndex}>
+              {columns.map(({ Cell, field, title }, columnIndex) => (
+                <TableCell key={title + columnIndex}>
+                  {Cell ? <Cell entry={entry} /> : `${entry[field]}`}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableElement>
+
+      {pagination && <TablePagination {...pagination} />}
+    </>
   );
 };
diff --git a/apps/react-vite/src/features/comments/api/create-comment.ts b/apps/react-vite/src/features/comments/api/create-comment.ts
index 24089fbb..506a6897 100644
--- a/apps/react-vite/src/features/comments/api/create-comment.ts
+++ b/apps/react-vite/src/features/comments/api/create-comment.ts
@@ -5,7 +5,7 @@ import { api } from '@/lib/api-client';
 import { MutationConfig } from '@/lib/react-query';
 import { Comment } from '@/types/api';
 
-import { getCommentsQueryOptions } from './get-comments';
+import { getInfiniteCommentsQueryOptions } from './get-comments';
 
 export const createCommentInputSchema = z.object({
   discussionId: z.string().min(1, 'Required'),
@@ -38,7 +38,7 @@ export const useCreateComment = ({
   return useMutation({
     onSuccess: (...args) => {
       queryClient.invalidateQueries({
-        queryKey: getCommentsQueryOptions(discussionId).queryKey,
+        queryKey: getInfiniteCommentsQueryOptions(discussionId).queryKey,
       });
       onSuccess?.(...args);
     },
diff --git a/apps/react-vite/src/features/comments/api/delete-comment.ts b/apps/react-vite/src/features/comments/api/delete-comment.ts
index 366dd2d8..7e2dcd3a 100644
--- a/apps/react-vite/src/features/comments/api/delete-comment.ts
+++ b/apps/react-vite/src/features/comments/api/delete-comment.ts
@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api-client';
 import { MutationConfig } from '@/lib/react-query';
 
-import { getCommentsQueryOptions } from './get-comments';
+import { getInfiniteCommentsQueryOptions } from './get-comments';
 
 export const deleteComment = ({ commentId }: { commentId: string }) => {
   return api.delete(`/comments/${commentId}`);
@@ -25,7 +25,7 @@ export const useDeleteComment = ({
   return useMutation({
     onSuccess: (...args) => {
       queryClient.invalidateQueries({
-        queryKey: getCommentsQueryOptions(discussionId).queryKey,
+        queryKey: getInfiniteCommentsQueryOptions(discussionId).queryKey,
       });
       onSuccess?.(...args);
     },
diff --git a/apps/react-vite/src/features/comments/api/get-comments.ts b/apps/react-vite/src/features/comments/api/get-comments.ts
index 3069c0d9..84c07ee5 100644
--- a/apps/react-vite/src/features/comments/api/get-comments.ts
+++ b/apps/react-vite/src/features/comments/api/get-comments.ts
@@ -1,39 +1,47 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
 
 import { api } from '@/lib/api-client';
 import { QueryConfig } from '@/lib/react-query';
-import { Comment } from '@/types/api';
+import { Comment, Meta } from '@/types/api';
 
 export const getComments = ({
   discussionId,
+  page = 1,
 }: {
   discussionId: string;
-}): Promise<Comment[]> => {
+  page?: number;
+}): Promise<{ data: Comment[]; meta: Meta }> => {
   return api.get(`/comments`, {
     params: {
       discussionId,
+      page,
     },
   });
 };
 
-export const getCommentsQueryOptions = (discussionId: string) => {
-  return queryOptions({
+export const getInfiniteCommentsQueryOptions = (discussionId: string) => {
+  return infiniteQueryOptions({
     queryKey: ['comments', discussionId],
-    queryFn: () => getComments({ discussionId }),
+    queryFn: ({ pageParam = 1 }) => {
+      return getComments({ discussionId, page: pageParam as number });
+    },
+    getNextPageParam: (lastPage) => {
+      if (lastPage?.meta?.page === lastPage?.meta?.totalPages) return undefined;
+      const nextPage = lastPage.meta.page + 1;
+      return nextPage;
+    },
+    initialPageParam: 1,
   });
 };
 
 type UseCommentsOptions = {
   discussionId: string;
+  page?: number;
   queryConfig?: QueryConfig<typeof getComments>;
 };
 
-export const useComments = ({
-  discussionId,
-  queryConfig,
-}: UseCommentsOptions) => {
-  return useQuery({
-    ...getCommentsQueryOptions(discussionId),
-    ...queryConfig,
+export const useInfiniteComments = ({ discussionId }: UseCommentsOptions) => {
+  return useInfiniteQuery({
+    ...getInfiniteCommentsQueryOptions(discussionId),
   });
 };
diff --git a/apps/react-vite/src/features/comments/components/comments-list.tsx b/apps/react-vite/src/features/comments/components/comments-list.tsx
index 554e8913..ee307251 100644
--- a/apps/react-vite/src/features/comments/components/comments-list.tsx
+++ b/apps/react-vite/src/features/comments/components/comments-list.tsx
@@ -1,5 +1,6 @@
 import { ArchiveX } from 'lucide-react';
 
+import { Button } from '@/components/ui/button';
 import { MDPreview } from '@/components/ui/md-preview';
 import { Spinner } from '@/components/ui/spinner';
 import { useUser } from '@/lib/auth';
@@ -7,7 +8,7 @@ import { POLICIES, Authorization } from '@/lib/authorization';
 import { User } from '@/types/api';
 import { formatDate } from '@/utils/format';
 
-import { useComments } from '../api/get-comments';
+import { useInfiniteComments } from '../api/get-comments';
 
 import { DeleteComment } from './delete-comment';
 
@@ -17,7 +18,7 @@ type CommentsListProps = {
 
 export const CommentsList = ({ discussionId }: CommentsListProps) => {
   const user = useUser();
-  const commentsQuery = useComments({ discussionId });
+  const commentsQuery = useInfiniteComments({ discussionId });
 
   if (commentsQuery.isLoading) {
     return (
@@ -27,7 +28,9 @@ export const CommentsList = ({ discussionId }: CommentsListProps) => {
     );
   }
 
-  if (!commentsQuery?.data?.length)
+  const comments = commentsQuery.data?.pages.flatMap((page) => page.data);
+
+  if (!comments?.length)
     return (
       <div
         role="list"
@@ -40,35 +43,51 @@ export const CommentsList = ({ discussionId }: CommentsListProps) => {
     );
 
   return (
-    <ul aria-label="comments" className="flex flex-col space-y-3">
-      {commentsQuery.data.map((comment, index) => (
-        <li
-          aria-label={`comment-${comment.body}-${index}`}
-          key={comment.id || index}
-          className="w-full bg-white p-4 shadow-sm"
-        >
-          <Authorization
-            policyCheck={POLICIES['comment:delete'](user.data as User, comment)}
+    <>
+      <ul aria-label="comments" className="flex flex-col space-y-3">
+        {comments.map((comment, index) => (
+          <li
+            aria-label={`comment-${comment.body}-${index}`}
+            key={comment.id || index}
+            className="w-full bg-white p-4 shadow-sm"
           >
-            <div className="flex justify-between">
-              <div>
-                <span className="text-xs font-semibold">
-                  {formatDate(comment.createdAt)}
-                </span>
-                {comment.author && (
-                  <span className="text-xs font-bold">
-                    {' '}
-                    by {comment.author.firstName} {comment.author.lastName}
+            <Authorization
+              policyCheck={POLICIES['comment:delete'](
+                user.data as User,
+                comment,
+              )}
+            >
+              <div className="flex justify-between">
+                <div>
+                  <span className="text-xs font-semibold">
+                    {formatDate(comment.createdAt)}
                   </span>
-                )}
+                  {comment.author && (
+                    <span className="text-xs font-bold">
+                      {' '}
+                      by {comment.author.firstName} {comment.author.lastName}
+                    </span>
+                  )}
+                </div>
+                <DeleteComment discussionId={discussionId} id={comment.id} />
               </div>
-              <DeleteComment discussionId={discussionId} id={comment.id} />
-            </div>
-          </Authorization>
+            </Authorization>
 
-          <MDPreview value={comment.body} />
-        </li>
-      ))}
-    </ul>
+            <MDPreview value={comment.body} />
+          </li>
+        ))}
+      </ul>
+      {commentsQuery.hasNextPage && (
+        <div className="flex items-center justify-center py-4">
+          <Button onClick={() => commentsQuery.fetchNextPage()}>
+            {commentsQuery.isFetchingNextPage ? (
+              <Spinner />
+            ) : (
+              'Load More Comments'
+            )}
+          </Button>
+        </div>
+      )}
+    </>
   );
 };
diff --git a/apps/react-vite/src/features/discussions/api/get-discussion.ts b/apps/react-vite/src/features/discussions/api/get-discussion.ts
index 60caf57f..592ef623 100644
--- a/apps/react-vite/src/features/discussions/api/get-discussion.ts
+++ b/apps/react-vite/src/features/discussions/api/get-discussion.ts
@@ -8,7 +8,7 @@ export const getDiscussion = ({
   discussionId,
 }: {
   discussionId: string;
-}): Promise<Discussion> => {
+}): Promise<{ data: Discussion }> => {
   return api.get(`/discussions/${discussionId}`);
 };
 
diff --git a/apps/react-vite/src/features/discussions/api/get-discussions.ts b/apps/react-vite/src/features/discussions/api/get-discussions.ts
index 347ef831..fd92874b 100644
--- a/apps/react-vite/src/features/discussions/api/get-discussions.ts
+++ b/apps/react-vite/src/features/discussions/api/get-discussions.ts
@@ -2,26 +2,41 @@ import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import { api } from '@/lib/api-client';
 import { QueryConfig } from '@/lib/react-query';
-import { Discussion } from '@/types/api';
+import { Discussion, Meta } from '@/types/api';
 
-export const getDiscussions = (): Promise<Discussion[]> => {
-  return api.get('/discussions');
+export const getDiscussions = (
+  page = 1,
+): Promise<{
+  data: Discussion[];
+  meta: Meta;
+}> => {
+  return api.get(`/discussions`, {
+    params: {
+      page,
+    },
+  });
 };
 
-export const getDiscussionsQueryOptions = () => {
+export const getDiscussionsQueryOptions = ({
+  page,
+}: { page?: number } = {}) => {
   return queryOptions({
-    queryKey: ['discussions'],
-    queryFn: () => getDiscussions(),
+    queryKey: page ? ['discussions', { page }] : ['discussions'],
+    queryFn: () => getDiscussions(page),
   });
 };
 
 type UseDiscussionsOptions = {
+  page?: number;
   queryConfig?: QueryConfig<typeof getDiscussionsQueryOptions>;
 };
 
-export const useDiscussions = ({ queryConfig }: UseDiscussionsOptions = {}) => {
+export const useDiscussions = ({
+  queryConfig,
+  page,
+}: UseDiscussionsOptions) => {
   return useQuery({
-    ...getDiscussionsQueryOptions(),
+    ...getDiscussionsQueryOptions({ page }),
     ...queryConfig,
   });
 };
diff --git a/apps/react-vite/src/features/discussions/components/discussion-view.tsx b/apps/react-vite/src/features/discussions/components/discussion-view.tsx
index 679a509b..47d42b00 100644
--- a/apps/react-vite/src/features/discussions/components/discussion-view.tsx
+++ b/apps/react-vite/src/features/discussions/components/discussion-view.tsx
@@ -18,17 +18,18 @@ export const DiscussionView = ({ discussionId }: { discussionId: string }) => {
     );
   }
 
-  if (!discussionQuery.data) return null;
+  const discussion = discussionQuery?.data?.data;
+
+  if (!discussion) return null;
 
   return (
     <div>
       <span className="text-xs font-bold">
-        {formatDate(discussionQuery.data.createdAt)}
+        {formatDate(discussion.createdAt)}
       </span>
-      {discussionQuery.data.author && (
+      {discussion.author && (
         <span className="ml-2 text-sm font-bold">
-          by {discussionQuery.data.author.firstName}{' '}
-          {discussionQuery.data.author.lastName}
+          by {discussion.author.firstName} {discussion.author.lastName}
         </span>
       )}
       <div className="mt-6 flex flex-col space-y-16">
@@ -39,7 +40,7 @@ export const DiscussionView = ({ discussionId }: { discussionId: string }) => {
           <div className="overflow-hidden bg-white shadow sm:rounded-lg">
             <div className="px-4 py-5 sm:px-6">
               <div className="mt-1 max-w-2xl text-sm text-gray-500">
-                <MDPreview value={discussionQuery.data.body} />
+                <MDPreview value={discussion.body} />
               </div>
             </div>
           </div>
diff --git a/apps/react-vite/src/features/discussions/components/discussions-list.tsx b/apps/react-vite/src/features/discussions/components/discussions-list.tsx
index 78a2a079..3c63e6f0 100644
--- a/apps/react-vite/src/features/discussions/components/discussions-list.tsx
+++ b/apps/react-vite/src/features/discussions/components/discussions-list.tsx
@@ -1,4 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
 
 import { Link } from '@/components/ui/link';
 import { Spinner } from '@/components/ui/spinner';
@@ -17,7 +18,11 @@ export type DiscussionsListProps = {
 export const DiscussionsList = ({
   onDiscussionPrefetch,
 }: DiscussionsListProps) => {
-  const discussionsQuery = useDiscussions();
+  const [searchParams] = useSearchParams();
+
+  const discussionsQuery = useDiscussions({
+    page: +(searchParams.get('page') || 1),
+  });
   const queryClient = useQueryClient();
 
   if (discussionsQuery.isLoading) {
@@ -28,11 +33,14 @@ export const DiscussionsList = ({
     );
   }
 
-  if (!discussionsQuery.data) return null;
+  const discussions = discussionsQuery.data?.data;
+  const meta = discussionsQuery.data?.meta;
+
+  if (!discussions) return null;
 
   return (
     <Table
-      data={discussionsQuery.data}
+      data={discussions}
       columns={[
         {
           title: 'Title',
@@ -71,6 +79,13 @@ export const DiscussionsList = ({
           },
         },
       ]}
+      pagination={
+        meta && {
+          totalPages: meta.totalPages,
+          currentPage: meta.page,
+          rootUrl: '',
+        }
+      }
     />
   );
 };
diff --git a/apps/react-vite/src/features/discussions/components/update-discussion.tsx b/apps/react-vite/src/features/discussions/components/update-discussion.tsx
index e377469d..3c81ce91 100644
--- a/apps/react-vite/src/features/discussions/components/update-discussion.tsx
+++ b/apps/react-vite/src/features/discussions/components/update-discussion.tsx
@@ -29,6 +29,8 @@ export const UpdateDiscussion = ({ discussionId }: UpdateDiscussionProps) => {
     },
   });
 
+  const discussion = discussionQuery.data?.data;
+
   return (
     <Authorization allowedRoles={[ROLES.ADMIN]}>
       <FormDrawer
@@ -60,8 +62,8 @@ export const UpdateDiscussion = ({ discussionId }: UpdateDiscussionProps) => {
           }}
           options={{
             defaultValues: {
-              title: discussionQuery.data?.title ?? '',
-              body: discussionQuery.data?.body ?? '',
+              title: discussion?.title ?? '',
+              body: discussion?.body ?? '',
             },
           }}
           schema={updateDiscussionInputSchema}
diff --git a/apps/react-vite/src/features/teams/api/get-teams.ts b/apps/react-vite/src/features/teams/api/get-teams.ts
index 1230684c..f9d009b1 100644
--- a/apps/react-vite/src/features/teams/api/get-teams.ts
+++ b/apps/react-vite/src/features/teams/api/get-teams.ts
@@ -4,7 +4,7 @@ import { api } from '@/lib/api-client';
 import { QueryConfig } from '@/lib/react-query';
 import { Team } from '@/types/api';
 
-export const getTeams = (): Promise<Team[]> => {
+export const getTeams = (): Promise<{ data: Team[] }> => {
   return api.get('/teams');
 };
 
diff --git a/apps/react-vite/src/features/users/api/get-users.ts b/apps/react-vite/src/features/users/api/get-users.ts
index f2401d9a..e13d1063 100644
--- a/apps/react-vite/src/features/users/api/get-users.ts
+++ b/apps/react-vite/src/features/users/api/get-users.ts
@@ -4,7 +4,7 @@ import { api } from '@/lib/api-client';
 import { QueryConfig } from '@/lib/react-query';
 import { User } from '@/types/api';
 
-export const getUsers = (): Promise<User[]> => {
+export const getUsers = (): Promise<{ data: User[] }> => {
   return api.get(`/users`);
 };
 
diff --git a/apps/react-vite/src/features/users/components/users-list.tsx b/apps/react-vite/src/features/users/components/users-list.tsx
index 5f6ea225..380a3c12 100644
--- a/apps/react-vite/src/features/users/components/users-list.tsx
+++ b/apps/react-vite/src/features/users/components/users-list.tsx
@@ -17,11 +17,13 @@ export const UsersList = () => {
     );
   }
 
-  if (!usersQuery.data) return null;
+  const users = usersQuery.data?.data;
+
+  if (!users) return null;
 
   return (
     <Table
-      data={usersQuery.data}
+      data={users}
       columns={[
         {
           title: 'First Name',
diff --git a/apps/react-vite/src/lib/auth.tsx b/apps/react-vite/src/lib/auth.tsx
index 47338d98..dfaec9a1 100644
--- a/apps/react-vite/src/lib/auth.tsx
+++ b/apps/react-vite/src/lib/auth.tsx
@@ -9,8 +9,10 @@ import { api } from './api-client';
 // api call definitions for auth (types, schemas, requests):
 // these are not part of features as this is a module shared across features
 
-const getUser = (): Promise<User> => {
-  return api.get('/auth/me');
+const getUser = async (): Promise<User> => {
+  const response = await api.get('/auth/me');
+
+  return response.data;
 };
 
 const logout = (): Promise<void> => {
diff --git a/apps/react-vite/src/testing/mocks/handlers/auth.ts b/apps/react-vite/src/testing/mocks/handlers/auth.ts
index ac453af4..5b7a67ef 100644
--- a/apps/react-vite/src/testing/mocks/handlers/auth.ts
+++ b/apps/react-vite/src/testing/mocks/handlers/auth.ts
@@ -154,7 +154,7 @@ export const authHandlers = [
 
     try {
       const { user } = requireAuth(cookies);
-      return HttpResponse.json(user);
+      return HttpResponse.json({ data: user });
     } catch (error: any) {
       return HttpResponse.json(
         { message: error?.message || 'Server Error' },
diff --git a/apps/react-vite/src/testing/mocks/handlers/comments.ts b/apps/react-vite/src/testing/mocks/handlers/comments.ts
index 6ad8cc2d..5d3678c9 100644
--- a/apps/react-vite/src/testing/mocks/handlers/comments.ts
+++ b/apps/react-vite/src/testing/mocks/handlers/comments.ts
@@ -21,6 +21,18 @@ export const commentsHandlers = [
       }
       const url = new URL(request.url);
       const discussionId = url.searchParams.get('discussionId') || '';
+      const page = Number(url.searchParams.get('page') || 1);
+
+      const total = db.comment.count({
+        where: {
+          discussionId: {
+            equals: discussionId,
+          },
+        },
+      });
+
+      const totalPages = Math.ceil(total / 10);
+
       const comments = db.comment
         .findMany({
           where: {
@@ -28,6 +40,8 @@ export const commentsHandlers = [
               equals: discussionId,
             },
           },
+          take: 10,
+          skip: 10 * (page - 1),
         })
         .map(({ authorId, ...comment }) => {
           const author = db.user.findFirst({
@@ -42,7 +56,14 @@ export const commentsHandlers = [
             author: author ? sanitizeUser(author) : {},
           };
         });
-      return HttpResponse.json(comments);
+      return HttpResponse.json({
+        data: comments,
+        meta: {
+          page,
+          total,
+          totalPages,
+        },
+      });
     } catch (error: any) {
       return HttpResponse.json(
         { message: error?.message || 'Server Error' },
diff --git a/apps/react-vite/src/testing/mocks/handlers/discussions.ts b/apps/react-vite/src/testing/mocks/handlers/discussions.ts
index 797e5fd8..37c07976 100644
--- a/apps/react-vite/src/testing/mocks/handlers/discussions.ts
+++ b/apps/react-vite/src/testing/mocks/handlers/discussions.ts
@@ -16,7 +16,7 @@ type DiscussionBody = {
 };
 
 export const discussionsHandlers = [
-  http.get(`${env.API_URL}/discussions`, async ({ cookies }) => {
+  http.get(`${env.API_URL}/discussions`, async ({ cookies, request }) => {
     await networkDelay();
 
     try {
@@ -24,6 +24,21 @@ export const discussionsHandlers = [
       if (error) {
         return HttpResponse.json({ message: error }, { status: 401 });
       }
+
+      const url = new URL(request.url);
+
+      const page = Number(url.searchParams.get('page') || 1);
+
+      const total = db.discussion.count({
+        where: {
+          teamId: {
+            equals: user?.teamId,
+          },
+        },
+      });
+
+      const totalPages = Math.ceil(total / 10);
+
       const result = db.discussion
         .findMany({
           where: {
@@ -31,6 +46,8 @@ export const discussionsHandlers = [
               equals: user?.teamId,
             },
           },
+          take: 10,
+          skip: 10 * (page - 1),
         })
         .map(({ authorId, ...discussion }) => {
           const author = db.user.findFirst({
@@ -45,7 +62,14 @@ export const discussionsHandlers = [
             author: author ? sanitizeUser(author) : {},
           };
         });
-      return HttpResponse.json(result);
+      return HttpResponse.json({
+        data: result,
+        meta: {
+          page,
+          total,
+          totalPages,
+        },
+      });
     } catch (error: any) {
       return HttpResponse.json(
         { message: error?.message || 'Server Error' },
@@ -91,14 +115,12 @@ export const discussionsHandlers = [
           },
         });
 
-        // delete discussion.authorId;
-
         const result = {
           ...discussion,
           author: author ? sanitizeUser(author) : {},
         };
 
-        return HttpResponse.json(result);
+        return HttpResponse.json({ data: result });
       } catch (error: any) {
         return HttpResponse.json(
           { message: error?.message || 'Server Error' },
diff --git a/apps/react-vite/src/testing/mocks/handlers/teams.ts b/apps/react-vite/src/testing/mocks/handlers/teams.ts
index c5f35945..cbec6072 100644
--- a/apps/react-vite/src/testing/mocks/handlers/teams.ts
+++ b/apps/react-vite/src/testing/mocks/handlers/teams.ts
@@ -11,7 +11,7 @@ export const teamsHandlers = [
 
     try {
       const result = db.team.getAll();
-      return HttpResponse.json(result);
+      return HttpResponse.json({ data: result });
     } catch (error: any) {
       return HttpResponse.json(
         { message: error?.message || 'Server Error' },
diff --git a/apps/react-vite/src/testing/mocks/handlers/users.ts b/apps/react-vite/src/testing/mocks/handlers/users.ts
index d064e184..444b9180 100644
--- a/apps/react-vite/src/testing/mocks/handlers/users.ts
+++ b/apps/react-vite/src/testing/mocks/handlers/users.ts
@@ -36,7 +36,7 @@ export const usersHandlers = [
         })
         .map(sanitizeUser);
 
-      return HttpResponse.json(result);
+      return HttpResponse.json({ data: result });
     } catch (error: any) {
       return HttpResponse.json(
         { message: error?.message || 'Server Error' },
diff --git a/apps/react-vite/src/types/api.ts b/apps/react-vite/src/types/api.ts
index ae38d208..dbdf4341 100644
--- a/apps/react-vite/src/types/api.ts
+++ b/apps/react-vite/src/types/api.ts
@@ -11,6 +11,12 @@ export type Entity<T> = {
   [K in keyof T]: T[K];
 } & BaseEntity;
 
+export type Meta = {
+  page: number;
+  total: number;
+  totalPages: number;
+};
+
 export type User = Entity<{
   firstName: string;
   lastName: string;