diff --git a/components/filter.tsx b/components/filter.tsx
new file mode 100644
index 0000000..f78fd42
--- /dev/null
+++ b/components/filter.tsx
@@ -0,0 +1,73 @@
+"use client";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useState, useTransition } from "react";
+
+interface FilterOption {
+	value: string;
+	label: string;
+	icon: React.ReactNode;
+}
+
+interface FilterProps {
+	options: FilterOption[];
+	defaultOption: string;
+	queryParamKey: string;
+}
+
+export default function Filter({
+	options,
+	defaultOption,
+	queryParamKey,
+}: FilterProps) {
+	const [selectedOption, setSelectedOption] = useState(defaultOption);
+	const searchParams = useSearchParams();
+	const { replace } = useRouter();
+	const pathname = usePathname();
+	const [isPending, startTransition] = useTransition();
+
+	function handleFilterChange(value: string) {
+		setSelectedOption(value);
+		const params = new URLSearchParams(searchParams.toString());
+
+		params.set(queryParamKey, value);
+		params.set("page", "1");
+
+		startTransition(() => {
+			replace(`${pathname}?${params.toString()}`);
+		});
+	}
+
+	return (
+		<div className={cn(isPending && "animate-pulse")}>
+			<Select
+				disabled={isPending}
+				value={selectedOption}
+				onValueChange={(val) => handleFilterChange(val)}
+			>
+				<SelectTrigger className="w-auto bg-white">
+					<SelectValue>
+						{options.find((option) => option.value === selectedOption)?.label}
+					</SelectValue>
+				</SelectTrigger>
+				<SelectContent align="end">
+					{options.map((option) => (
+						<SelectItem key={option.value} value={option.value}>
+							<div className="flex items-center gap-4">
+								{option.icon}
+								<span>{option.label}</span>
+							</div>
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		</div>
+	);
+}
diff --git a/components/pagination.tsx b/components/pagination.tsx
new file mode 100644
index 0000000..bb04780
--- /dev/null
+++ b/components/pagination.tsx
@@ -0,0 +1,109 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+type PaginationProps = {
+	totalPages: number;
+	currentPage: number;
+	maxVisible?: number;
+};
+
+export default function Pagination({
+	totalPages,
+	currentPage,
+	maxVisible = 4,
+}: PaginationProps) {
+	const searchParams = useSearchParams();
+	const activePage = searchParams.get("page") ?? 1;
+	const router = useRouter();
+
+	const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
+
+	useEffect(() => {
+		const params = Object.fromEntries(
+			Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
+		);
+		setQueryParams(params);
+	}, [searchParams]);
+
+	useEffect(() => {
+		if (!searchParams.has("page")) {
+			router.replace(`?page=1${IncludeQueries()}`);
+		}
+	});
+
+	function IncludeQueries() {
+		return Object.entries(queryParams)
+			.map(([key, value]) => `&${key}=${value}`)
+			.join("");
+	}
+
+	const generatePageNumbers = (): (number | string)[] => {
+		const halfVisible = Math.floor(maxVisible / 2);
+		let startPage = Math.max(currentPage - halfVisible, 1);
+		const endPage = Math.min(startPage + maxVisible - 1, totalPages);
+
+		if (endPage - startPage + 1 < maxVisible) {
+			startPage = Math.max(endPage - maxVisible + 1, 1);
+		}
+
+		const pageNumbers: (number | string)[] = [];
+
+		if (startPage > 1) {
+			pageNumbers.push(1);
+			if (startPage > 2) pageNumbers.push("...");
+		}
+
+		for (let i = startPage; i <= endPage; i++) {
+			pageNumbers.push(i);
+		}
+
+		if (endPage < totalPages) {
+			if (endPage < totalPages - 1) pageNumbers.push("...");
+			pageNumbers.push(totalPages);
+		}
+
+		return pageNumbers;
+	};
+
+	const pageNumbers = generatePageNumbers();
+
+	return (
+		<div className="flex items-center justify-center space-x-2 my-4">
+			{currentPage > 1 && (
+				<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
+					<Button variant="secondary" className="flex items-center gap-2">
+						<ArrowLeftIcon className="h-4 w-4" />
+					</Button>
+				</Link>
+			)}
+
+			{pageNumbers.map((page) => (
+				<React.Fragment key={`${page}`}>
+					{typeof page === "number" ? (
+						<Link href={`?page=${page}${IncludeQueries()}`}>
+							<Button
+								variant={Number(activePage) === page ? "default" : "outline"}
+							>
+								{page}
+							</Button>
+						</Link>
+					) : (
+						<span className="px-2">...</span>
+					)}
+				</React.Fragment>
+			))}
+
+			{currentPage < totalPages && (
+				<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
+					<Button variant="secondary" className="flex items-center gap-2">
+						<ArrowRightIcon className="h-4 w-4" />
+					</Button>
+				</Link>
+			)}
+		</div>
+	);
+}
diff --git a/components/search.tsx b/components/search.tsx
new file mode 100644
index 0000000..0c798e0
--- /dev/null
+++ b/components/search.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRef, useTransition } from "react";
+import { Button } from "./ui/button";
+import { Loader } from "lucide-react";
+
+export default function Search({ disabled }: { disabled?: boolean }) {
+	const inputRef = useRef<HTMLInputElement>(null);
+	const { replace } = useRouter();
+
+	const pathname = usePathname();
+	const [isPending, startTransition] = useTransition();
+	const searchParams = useSearchParams();
+	const searchQuery = searchParams.get("query");
+
+	function handleSearch(term: string) {
+		const params = new URLSearchParams(searchParams.toString());
+
+		if (term) {
+			params.set("query", term);
+			params.set("page", "1");
+		} else {
+			params.delete("query");
+		}
+
+		startTransition(() => {
+			replace(`${pathname}?${params.toString()}`);
+		});
+	}
+
+	return (
+		<div className="flex gap-2 items-center justify-end">
+			<Input
+				ref={inputRef}
+				placeholder="Search..."
+				className={cn("bg-white")}
+				type="text"
+				name="search"
+				id="search"
+				defaultValue={searchQuery ? searchQuery : ""}
+				disabled={disabled}
+				spellCheck={false}
+				onChange={(e) => handleSearch(e.target.value)}
+			/>
+			<Button
+				disabled={isPending}
+				onClick={() => {
+					if (inputRef.current) {
+						inputRef.current.value = "";
+					}
+					replace(pathname);
+				}}
+			>
+				{isPending ? <Loader className="animate-spin" /> : "Reset"}
+			</Button>
+		</div>
+	);
+}
diff --git a/components/user-table.tsx b/components/user-table.tsx
new file mode 100644
index 0000000..d8149f3
--- /dev/null
+++ b/components/user-table.tsx
@@ -0,0 +1,204 @@
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import prisma from "@/lib/db";
+import { Badge } from "./ui/badge";
+import Pagination from "./pagination";
+import { UserVerifyDialog } from "./user/user-verify-dialog";
+
+export async function UsersTable({
+	searchParams,
+}: {
+	searchParams: Promise<{
+		query: string;
+		page: number;
+		sortBy: string;
+		status: string;
+	}>;
+}) {
+	const query = (await searchParams)?.query || "";
+	const page = (await searchParams)?.page;
+	const sortBy = (await searchParams)?.sortBy || "asc";
+	const verified = (await searchParams)?.status || "all";
+	const totalUsers = await prisma.user.count({
+		where: {
+			OR: [
+				{
+					name: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					phoneNumber: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					house_name: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					id_card: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+			],
+			verified: verified === "all" ? undefined : verified === "verified",
+		},
+	});
+
+	const totalPages = Math.ceil(totalUsers / 10);
+	const limit = 10;
+	const offset = (Number(page) - 1) * limit || 0;
+
+	const users = await prisma.user.findMany({
+		where: {
+			OR: [
+				{
+					name: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					phoneNumber: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					house_name: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					id_card: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+			],
+			verified: verified === "all" ? undefined : verified === "verified",
+		},
+		include: {
+			island: true,
+			atoll: true,
+		},
+		skip: offset,
+		take: limit,
+		orderBy: {
+			name: `${sortBy}` as "asc" | "desc",
+		},
+	});
+
+	// const users = await prisma.user.findMany({
+	// 	where: {
+	// 		role: "USER",
+	// 	},
+	// 	include: {
+	// 		atoll: true,
+	// 		island: true,
+	// 	},
+	// });
+	return (
+		<div>
+			{users.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+					<h3>No Users yet.</h3>
+				</div>
+			) : (
+				<>
+					<Table className="overflow-scroll">
+						<TableCaption>Table of all users.</TableCaption>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Name</TableHead>
+								<TableHead>ID Card</TableHead>
+								<TableHead>Atoll</TableHead>
+								<TableHead>Island</TableHead>
+								<TableHead>House Name</TableHead>
+								<TableHead>Status</TableHead>
+								<TableHead>Dob</TableHead>
+								<TableHead>Phone Number</TableHead>
+								<TableHead>Action</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody className="overflow-scroll">
+							{users.map((user) => (
+								<TableRow
+									className={`${user.verified && "title-bg"}`}
+									key={user.id}
+								>
+									<TableCell className="font-medium">{user.name}</TableCell>
+									<TableCell className="font-medium">{user.id_card}</TableCell>
+									<TableCell>{user.atoll?.name}</TableCell>
+									<TableCell>{user.island?.name}</TableCell>
+									<TableCell>{user.house_name}</TableCell>
+
+									<TableCell>
+										{user.verified ? (
+											<Badge
+												variant="outline"
+												className="bg-lime-100 text-black"
+											>
+												Verified
+											</Badge>
+										) : (
+											<Badge
+												variant="outline"
+												className="bg-yellow-100 text-black"
+											>
+												Unverified
+											</Badge>
+										)}
+									</TableCell>
+									<TableCell>
+										{new Date(user.dob ?? "").toLocaleDateString("en-US", {
+											month: "short",
+											day: "2-digit",
+											year: "numeric",
+										})}
+									</TableCell>
+
+									<TableCell>{user.phoneNumber}</TableCell>
+									<TableCell>
+										<UserVerifyDialog user={user} />
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+						<TableFooter>
+							<TableRow>
+								<TableCell colSpan={8}>
+									{query.length > 0 && (
+										<p className="text-sm text-muted-foreground">
+											Showing {users.length} locations for &quot;{query}
+											&quot;
+										</p>
+									)}
+								</TableCell>
+								<TableCell className="text-muted-foreground">
+									{totalUsers} users
+								</TableCell>
+							</TableRow>
+						</TableFooter>
+					</Table>
+					<Pagination totalPages={totalPages} currentPage={page} />
+				</>
+			)}
+		</div>
+	);
+}