diff --git a/actions/providers.ts b/actions/providers.ts
index 30ac54ff5b..6c6f3adee7 100644
--- a/actions/providers.ts
+++ b/actions/providers.ts
@@ -1,22 +1,30 @@
 "use server";
 
 import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
 
 import { parseStringify } from "@/lib";
 
-export const getProvider = async () => {
+export const getProvider = async ({ page = 1 }) => {
+  if (isNaN(Number(page)) || page < 1) redirect("/providers");
+
   const keyServer = process.env.LOCAL_SERVER_URL;
 
   try {
-    const providers = await fetch(`${keyServer}/providers`, {
-      headers: {
-        "X-Tenant-ID": `${process.env.HEADER_TENANT_ID}`,
+    const providers = await fetch(
+      `${keyServer}/providers?page%5Bnumber%5D=${page}`,
+      {
+        headers: {
+          "X-Tenant-ID": `${process.env.HEADER_TENANT_ID}`,
+        },
       },
-    });
+    );
     const data = await providers.json();
+    const parsedData = parseStringify(data);
     revalidatePath("/providers");
-    return parseStringify(data);
+    return parsedData;
   } catch (error) {
+    console.error("Error fetching providers:", error);
     return undefined;
   }
 };
diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index c58d57db4a..2c79e94c79 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -1,4 +1,5 @@
 import { Spacer } from "@nextui-org/react";
+import { redirect } from "next/navigation";
 import { Suspense } from "react";
 
 import { getProvider } from "@/actions";
@@ -9,8 +10,9 @@ import {
   SkeletonTableProvider,
 } from "@/components/providers";
 import { Header } from "@/components/ui";
+import { searchParamsProps } from "@/types";
 
-export default async function Providers() {
+export default async function Providers({ searchParams }: searchParamsProps) {
   return (
     <>
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
@@ -20,18 +22,26 @@ export default async function Providers() {
           <AddProviderModal />
         </div>
         <Spacer y={6} />
-        <Suspense fallback={<SkeletonTableProvider />}>
-          <SSRDataTable />
+        <Suspense key={searchParams.page} fallback={<SkeletonTableProvider />}>
+          <SSRDataTable searchParams={searchParams} />
         </Suspense>
       </div>
     </>
   );
 }
 
-const SSRDataTable = async () => {
-  const providersData = await getProvider();
+const SSRDataTable = async ({ searchParams }: searchParamsProps) => {
+  const page = searchParams.page ? parseInt(searchParams.page) : 1;
+  const providersData = await getProvider({ page });
   const [providers] = await Promise.all([providersData]);
+
+  if (providers?.errors) redirect("/providers");
+
   return (
-    <DataTableProvider columns={ColumnsProvider} data={providers?.data ?? []} />
+    <DataTableProvider
+      columns={ColumnsProvider}
+      data={providers?.data ?? []}
+      metadata={providers?.meta}
+    />
   );
 };
diff --git a/components/providers/AddProviderModal.tsx b/components/providers/AddProviderModal.tsx
index a04c19c7bb..b9facbe627 100644
--- a/components/providers/AddProviderModal.tsx
+++ b/components/providers/AddProviderModal.tsx
@@ -48,7 +48,9 @@ export const AddProviderModal = () => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="ghost">Add Cloud Account</Button>
+        <Button aria-label="Add Cloud Account" variant="ghost">
+          Add Cloud Account
+        </Button>
       </DialogTrigger>
       <DialogContent className="flex flex-col sm:max-w-md md:max-w-4xl">
         <DialogHeader className="mb-6 space-y-3">
diff --git a/components/providers/index.ts b/components/providers/index.ts
index 00bd2634c5..0b4074236c 100644
--- a/components/providers/index.ts
+++ b/components/providers/index.ts
@@ -10,5 +10,7 @@ export * from "./DeleteProvider";
 export * from "./ProviderInfo";
 export * from "./ScanStatus";
 export * from "./table/ColumnsProvider";
+export * from "./table/DataTableColumnHeader";
+export * from "./table/DataTablePagination";
 export * from "./table/DataTableProvider";
 export * from "./table/SkeletonTableProvider";
diff --git a/components/providers/table/DataTableColumnHeader.tsx b/components/providers/table/DataTableColumnHeader.tsx
new file mode 100644
index 0000000000..7fe6027527
--- /dev/null
+++ b/components/providers/table/DataTableColumnHeader.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@nextui-org/react";
+import { Column } from "@tanstack/react-table";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronsLeftRightIcon,
+} from "lucide-react";
+import { HTMLAttributes } from "react";
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export const DataTableColumnHeader = <TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) => {
+  const renderSortIcon = () => {
+    const sort = column.getIsSorted();
+    if (!sort) {
+      return <ChevronsLeftRightIcon className="ml-2 h-4 w-4 rotate-90" />;
+    }
+    return sort === "desc" ? (
+      <ArrowDownIcon className="ml-2 h-4 w-4" />
+    ) : (
+      <ArrowUpIcon className="ml-2 h-4 w-4" />
+    );
+  };
+
+  if (!column.getCanSort()) {
+    return <div className={className}>{title}</div>;
+  }
+  return (
+    <div className={className}>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-8"
+        onClick={column.getToggleSortingHandler()}
+      >
+        <span>{title}</span>
+        {renderSortIcon()}
+      </Button>
+    </div>
+  );
+};
diff --git a/components/providers/table/DataTablePagination.tsx b/components/providers/table/DataTablePagination.tsx
new file mode 100644
index 0000000000..0e195f0507
--- /dev/null
+++ b/components/providers/table/DataTablePagination.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from "@radix-ui/react-icons";
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+
+import { extractPaginationInfo } from "@/lib";
+import { MetaDataProps } from "@/types";
+
+interface DataTablePaginationProps {
+  pageSizeOptions?: number[];
+  metadata?: MetaDataProps;
+}
+
+export function DataTablePagination({ metadata }: DataTablePaginationProps) {
+  if (!metadata) return null;
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const { currentPage, totalPages, totalEntries } =
+    extractPaginationInfo(metadata);
+
+  const createPageUrl = (pageNumber: number | string) => {
+    const params = new URLSearchParams(searchParams);
+
+    if (pageNumber === "...") return `${pathname}?${params.toString()}`;
+
+    if (+pageNumber > totalPages) {
+      return `${pathname}?${params.toString()}`;
+    }
+
+    params.set("page", pageNumber.toString());
+    return `${pathname}?${params.toString()}`;
+  };
+
+  return (
+    <div className="flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8">
+      <div className="whitespace-nowrap text-sm font-medium">
+        {totalEntries} entries in Total.
+      </div>
+      <div className="flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center justify-center text-sm font-medium">
+          Page {currentPage} of {totalPages}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Link
+            aria-label="Go to first page"
+            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            href={createPageUrl(1)}
+            aria-disabled="true"
+          >
+            <DoubleArrowLeftIcon className="size-4" aria-hidden="true" />
+          </Link>
+          <Link
+            aria-label="Go to previous page"
+            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            href={createPageUrl(currentPage - 1)}
+            aria-disabled="true"
+          >
+            <ChevronLeftIcon className="size-4" aria-hidden="true" />
+          </Link>
+          <Link
+            aria-label="Go to next page"
+            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            href={createPageUrl(currentPage + 1)}
+          >
+            <ChevronRightIcon className="size-4" aria-hidden="true" />
+          </Link>
+          <Link
+            aria-label="Go to last page"
+            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            href={createPageUrl(totalPages)}
+          >
+            <DoubleArrowRightIcon className="size-4" aria-hidden="true" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/providers/table/DataTableProvider.tsx b/components/providers/table/DataTableProvider.tsx
index 9fa480bd16..172af2d891 100644
--- a/components/providers/table/DataTableProvider.tsx
+++ b/components/providers/table/DataTableProvider.tsx
@@ -1,13 +1,15 @@
 "use client";
 
-import { Button } from "@nextui-org/react";
 import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
   getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
   useReactTable,
 } from "@tanstack/react-table";
+import { useState } from "react";
 
 import {
   Table,
@@ -17,23 +19,34 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table/Table";
+import { MetaDataProps } from "@/types";
+
+import { DataTablePagination } from "./DataTablePagination";
 
 interface DataTableProviderProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
+  metadata?: MetaDataProps;
 }
 
 export function DataTableProvider<TData, TValue>({
   columns,
   data,
+  metadata,
 }: DataTableProviderProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
   const table = useReactTable({
     data,
     columns,
+    enableSorting: true,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
   });
-
   return (
     <>
       <div className="rounded-md border w-full">
@@ -86,23 +99,8 @@ export function DataTableProvider<TData, TValue>({
           </TableBody>
         </Table>
       </div>
-      <div className="flex items-center justify-end space-x-2 py-4">
-        <Button
-          variant="solid"
-          size="sm"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-        >
-          Previous
-        </Button>
-        <Button
-          variant="solid"
-          size="sm"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-        >
-          Next
-        </Button>
+      <div className="flex items-center w-full space-x-2 py-4">
+        <DataTablePagination metadata={metadata} />
       </div>
     </>
   );
diff --git a/components/ui/index.ts b/components/ui/index.ts
index 96064508d6..f202f8ffe5 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -1,6 +1,7 @@
 export * from "./alert/Alert";
 export * from "./dialog/Dialog";
 export * from "./header/Header";
+export * from "./select/Select";
 export * from "./sidebar";
 export * from "./table/StatusBadge";
 export * from "./table/Table";
diff --git a/components/ui/select/Select.tsx b/components/ui/select/Select.tsx
new file mode 100644
index 0000000000..64b4d471c5
--- /dev/null
+++ b/components/ui/select/Select.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import {
+  CaretSortIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-slate-800 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretSortIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/lib/utils.ts b/lib/utils.ts
index c3e96dd8df..84a5fe24e3 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,8 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
+import { MetaDataProps } from "@/types";
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
@@ -9,6 +11,14 @@ export const parseStringify = (value: any) => JSON.parse(JSON.stringify(value));
 
 export const convertFileToUrl = (file: File) => URL.createObjectURL(file);
 
+export const extractPaginationInfo = (metadata: MetaDataProps) => {
+  const currentPage = metadata?.pagination.page ?? "1";
+  const totalPages = metadata?.pagination.pages;
+  const totalEntries = metadata?.pagination.count;
+
+  return { currentPage, totalPages, totalEntries };
+};
+
 // FORMAT DATE TIME
 export const formatDateTime = (
   dateString: Date | string,
diff --git a/package-lock.json b/package-lock.json
index 7b8757dbd2..3ef31ce458 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@nextui-org/theme": "2.2.5",
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-toast": "^1.2.1",
         "@react-aria/ssr": "3.9.4",
         "@react-aria/visually-hidden": "3.8.12",
@@ -649,6 +650,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.6.tgz",
+      "integrity": "sha512-Vkvsw6EcpMHjvZZdMkSY+djMGFbt7CRssW99Ne8tar2WLnZ/l3dbxeTShbLQj+/s35h+Qb4cmnob+EzwtjrXGQ==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.6"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.9.tgz",
+      "integrity": "sha512-zB1PcI350t4tkm3rvUhSRKa9sT7vH5CrAbQxW+VaPYJXKAO0gsg4CTueL+6Ajp7XzAQC8CW4Jj1Wgqc0sB6oUQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.6"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.6.tgz",
+      "integrity": "sha512-0KI3zGxIUs1KDR/pjQPdJH4Z8nGBm0yJ5WRoRfdw1Kzeh45jkIfA0rmD0kBF6fKHH+xaH7g8y4jIXyAV5MGK3g=="
+    },
     "node_modules/@formatjs/ecma402-abstract": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
@@ -2592,11 +2627,38 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
@@ -2709,6 +2771,20 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
@@ -2798,6 +2874,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
@@ -2866,6 +2973,72 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
+      "integrity": "sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -2978,6 +3151,54 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-visually-hidden": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
@@ -3000,6 +3221,11 @@
         }
       }
     },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
+    },
     "node_modules/@react-aria/breadcrumbs": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.13.tgz",
diff --git a/package.json b/package.json
index 7795424b1a..2c9b02c073 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "@nextui-org/theme": "2.2.5",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-toast": "^1.2.1",
     "@react-aria/ssr": "3.9.4",
     "@react-aria/visually-hidden": "3.8.12",
diff --git a/types/components.ts b/types/components.ts
index 209b6e4c0d..3d8a49393d 100644
--- a/types/components.ts
+++ b/types/components.ts
@@ -9,6 +9,12 @@ export type IconProps = {
   style?: React.CSSProperties;
 };
 
+export interface searchParamsProps {
+  searchParams: {
+    page?: string;
+  };
+}
+
 export interface ProviderProps {
   id: string;
   type: "providers";
@@ -65,3 +71,12 @@ export interface FindingProps {
     referenceLink: string;
   };
 }
+
+export interface MetaDataProps {
+  pagination: {
+    page: number;
+    pages: number;
+    count: number;
+  };
+  version: string;
+}