diff --git a/netmanager-app/app/(authenticated)/clients/columns.tsx b/netmanager-app/app/(authenticated)/clients/columns.tsx
deleted file mode 100644
index 398a793ae3..0000000000
--- a/netmanager-app/app/(authenticated)/clients/columns.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client"
-
-import type { ColumnDef } from "@tanstack/react-table"
-import { Button } from "@/components/ui/button"
-import { ArrowUpDown, MoreHorizontal } from "lucide-react"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import type { Client } from "@/app/types/clients"
-
-interface ColumnProps {
-  onActivate: (client: Client) => void
-  onDeactivate: (client: Client) => void
-}
-
-export const columns = ({ onActivate, onDeactivate }: ColumnProps): ColumnDef<Client>[] => [
-  {
-    accessorKey: "name",
-    header: ({ column }) => {
-      return (
-        <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
-          Client Name
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-  },
-  {
-    accessorKey: "_id",
-    header: "Client ID",
-  },
-  {
-    accessorKey: "user.email",
-    header: "User Email",
-  },
-  {
-    accessorKey: "access_token.expires",
-    header: "Token Expiry",
-    cell: ({ row }) => {
-      const accessToken = row.original.access_token
-      if (!accessToken || !accessToken.expires) return "N/A"
-      const expires = new Date(accessToken.expires)
-      if (isNaN(expires.getTime())) return "Invalid Date"
-
-      const now = new Date()
-      const diffTime = expires.getTime() - now.getTime()
-      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-
-      if (diffDays < 0) return "Expired"
-      if (diffDays === 0) return "Expires today"
-      if (diffDays === 1) return "Expires tomorrow"
-      return `Expires in ${diffDays} days`
-    },
-  },
-  {
-    accessorKey: "isActive",
-    header: "Status",
-    cell: ({ row }) => {
-      const isActive = row.getValue("isActive")
-      return (
-        <div className={`px-2 py-1 rounded-full text-white text-center ${isActive ? "bg-green-500" : "bg-red-500"}`}>
-          {isActive ? "Activated" : "Not Activated"}
-        </div>
-      )
-    },
-  },
-  {
-    id: "actions",
-    cell: ({ row }) => {
-      const client = row.original
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem onClick={() => navigator.clipboard.writeText(client._id)}>
-              Copy client ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => (client.isActive ? onDeactivate(client) : onActivate(client))}>
-              {client.isActive ? "Deactivate" : "Activate"}
-            </DropdownMenuItem>
-            <DropdownMenuItem>View client details</DropdownMenuItem>
-            <DropdownMenuItem>Update client information</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
-    },
-  },
-]
-
diff --git a/netmanager-app/app/(authenticated)/clients/data-table.tsx b/netmanager-app/app/(authenticated)/clients/data-table.tsx
deleted file mode 100644
index 716e5a6389..0000000000
--- a/netmanager-app/app/(authenticated)/clients/data-table.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client"
-
-import {
-  type ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type SortingState,
-  getFilteredRowModel,
-  type ColumnFiltersState,
-} from "@tanstack/react-table"
-
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import React from "react"
-import type { Client } from "@/app/types/clients"
-
-interface DataTableProps {
-  columns: ColumnDef<Client>[]
-  data: Client[]
-  onActivate: (client: Client) => void
-  onDeactivate: (client: Client) => void
-}
-
-export function DataTable({ columns, data, onActivate, onDeactivate }: DataTableProps) {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
-
-  const table = useReactTable({
-    data,
-    columns: columns({ onActivate, onDeactivate }),
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onSortingChange: setSorting,
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    getFilteredRowModel: getFilteredRowModel(),
-    state: {
-      sorting,
-      columnFilters,
-    },
-  })
-
-  return (
-    <div>
-      <div className="flex items-center py-4">
-        <Input
-          placeholder="Filter clients..."
-          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
-          onChange={(event) => table.getColumn("name")?.setFilterValue(event.target.value)}
-          className="max-w-sm"
-        />
-      </div>
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <div className="flex items-center justify-end space-x-2 py-4">
-        <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
-          Previous
-        </Button>
-        <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
-          Next
-        </Button>
-      </div>
-    </div>
-  )
-}
-
diff --git a/netmanager-app/app/(authenticated)/clients/page.tsx b/netmanager-app/app/(authenticated)/clients/page.tsx
index f5aa65dcaa..def9e5c7df 100644
--- a/netmanager-app/app/(authenticated)/clients/page.tsx
+++ b/netmanager-app/app/(authenticated)/clients/page.tsx
@@ -2,12 +2,24 @@
 
 import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
-import { DataTable } from "./data-table"
-import { columns } from "./columns"
-import { ActivateClientDialog, DeactivateClientDialog } from "./dialogs"
+import { Input } from "@/components/ui/input"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { ActivateClientDialog, DeactivateClientDialog } from "../../../components/clients/dialogs"
 import { getClientsApi, activateUserClientApi } from "@/core/apis/analytics"
 import { useToast } from "@/components/ui/use-toast"
 import type { Client } from "@/app/types/clients"
+import { Search, ArrowUpDown, Loader2 } from "lucide-react"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+
+const ITEMS_PER_PAGE = 8
 
 const formatDate = (dateString: string | undefined): string => {
   if (!dateString) return "N/A"
@@ -24,18 +36,24 @@ const formatDate = (dateString: string | undefined): string => {
   return `Expires in ${diffDays} days`
 }
 
+
 const ClientManagement = () => {
   const [clients, setClients] = useState<Client[]>([])
   const [loading, setLoading] = useState(false)
   const [selectedClient, setSelectedClient] = useState<Client | null>(null)
   const [activateDialogOpen, setActivateDialogOpen] = useState(false)
   const [deactivateDialogOpen, setDeactivateDialogOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [sortField, setSortField] = useState<keyof Client>("name")
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")
   const { toast } = useToast()
 
   const fetchClients = async () => {
     setLoading(true)
     try {
       const response = await getClientsApi()
+      console.log(response.clients)
       setClients(response.clients)
     } catch (error) {
       toast({
@@ -48,6 +66,14 @@ const ClientManagement = () => {
     }
   }
 
+  const handleCopyClientId = (clientId: string) => {
+    navigator.clipboard.writeText(clientId)
+    toast({
+      title: "Client ID Copied",
+      description: "The client ID has been copied to your clipboard.",
+    })
+  }
+
   useEffect(() => {
     fetchClients()
   }, [])
@@ -73,9 +99,6 @@ const ClientManagement = () => {
     }
   }
 
-  const activatedClients = clients.filter((client) => client.isActive).length
-  const deactivatedClients = clients.filter((client) => !client.isActive).length
-
   const handleActivateClick = (client: Client) => {
     setSelectedClient(client)
     setActivateDialogOpen(true)
@@ -86,6 +109,33 @@ const ClientManagement = () => {
     setDeactivateDialogOpen(true)
   }
 
+  const handleSort = (field: keyof Client) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc")
+    } else {
+      setSortField(field)
+      setSortOrder("asc")
+    }
+  }
+
+  const filteredClients = clients.filter(
+    (client) =>
+      client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      client.user.email.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const sortedClients = [...filteredClients].sort((a, b) => {
+    if (a[sortField] < b[sortField]) return sortOrder === "asc" ? -1 : 1
+    if (a[sortField] > b[sortField]) return sortOrder === "asc" ? 1 : -1
+    return 0
+  })
+
+  const totalPages = Math.ceil(sortedClients.length / ITEMS_PER_PAGE)
+  const paginatedClients = sortedClients.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)
+
+  const activatedClients = clients.filter((client) => client.isActive).length
+  const deactivatedClients = clients.filter((client) => !client.isActive).length
+
   const nearestExpiringToken = clients
     .filter((client) => client.access_token && client.access_token.expires)
     .filter((client) => {
@@ -98,58 +148,155 @@ const ClientManagement = () => {
       return dateA - dateB
     })[0]
 
-  const nearestExpiryDate = nearestExpiringToken
-    ? formatDate(nearestExpiringToken.access_token.expires)
-    : "No upcoming expiries"
 
   return (
     <div className="container mx-auto py-10">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">Client Management</h1>
-        <Button onClick={fetchClients}>Refresh</Button>
-      </div>
-
-      <div className="grid grid-cols-3 gap-4 mb-6">
-        <div className="bg-green-100 p-4 rounded-lg">
-          <h2 className="text-lg font-semibold">Activated Clients</h2>
-          <p className="text-3xl font-bold">{activatedClients}</p>
+      {loading ? (
+        <div className="flex justify-center items-center h-64">
+          <Loader2 className="h-8 w-8 animate-spin" />
         </div>
-        <div className="bg-red-100 p-4 rounded-lg">
-          <h2 className="text-lg font-semibold">Deactivated Clients</h2>
-          <p className="text-3xl font-bold">{deactivatedClients}</p>
-        </div>
-        <div className="bg-blue-100 p-4 rounded-lg">
-          <h2 className="text-lg font-semibold">Nearest Token Expiry</h2>
-          <p className="text-xl font-bold">
-            {nearestExpiringToken ? formatDate(nearestExpiringToken.access_token.expires) : "No upcoming expiries"}
-          </p>
-          <p className="text-sm">{nearestExpiringToken?.name || "N/A"}</p>
-        </div>
-      </div>
-
-      <DataTable
-        columns={columns}
-        data={clients}
-        onActivate={handleActivateClick}
-        onDeactivate={handleDeactivateClick}
-      />
-
-      <ActivateClientDialog
-        open={activateDialogOpen}
-        onOpenChange={setActivateDialogOpen}
-        onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, true)}
-        clientName={selectedClient?.name}
-      />
-
-      <DeactivateClientDialog
-        open={deactivateDialogOpen}
-        onOpenChange={setDeactivateDialogOpen}
-        onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, false)}
-        clientName={selectedClient?.name}
-      />
+      ) : (
+        <>
+          <div className="flex justify-between items-center mb-6">
+            <h1 className="text-3xl font-bold">Client Management</h1>
+            <Button onClick={fetchClients}>Refresh</Button>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4 mb-6">
+            <div className="bg-green-100 p-4 rounded-lg">
+              <h2 className="text-lg font-semibold">Activated Clients</h2>
+              <p className="text-3xl font-bold">{activatedClients}</p>
+            </div>
+            <div className="bg-red-100 p-4 rounded-lg">
+              <h2 className="text-lg font-semibold">Deactivated Clients</h2>
+              <p className="text-3xl font-bold">{deactivatedClients}</p>
+            </div>
+
+          </div>
+
+          <div className="flex items-center gap-2 mb-4">
+            <div className="relative flex-1 max-w-sm">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search clients..."
+                className="pl-8"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-2">
+                  Sort by <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => handleSort("name")}>
+                  Name {sortField === "name" && (sortOrder === "asc" ? "↑" : "↓")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleSort("isActive")}>
+                  Status {sortField === "isActive" && (sortOrder === "asc" ? "↑" : "↓")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[250px]">Client Name</TableHead>
+                  <TableHead>User Email</TableHead>
+                  <TableHead>Token Expiry</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedClients.map((client) => (
+                  <TableRow key={client._id}>
+                    <TableCell>
+                      <div className="font-medium">{client.name}</div>
+                      <div className="text-sm text-muted-foreground">{client._id}</div>
+                    </TableCell>
+                    <TableCell>{client.user.email}</TableCell>
+                    <TableCell>
+                      {client.access_token?.expires 
+                        ? formatDate(client.access_token.expires) 
+                        : "N/A"}
+                    </TableCell>
+                    <TableCell>
+                      <span
+                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                            client.isActive
+                              ? "bg-green-100 text-green-800"
+                              : "bg-red-100 text-red-800"
+                          }`}
+                      >
+                        {client.isActive ? "Activated" : "Not Activated"}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        variant="ghost"
+                        onClick={() => (client.isActive ? handleDeactivateClick(client) : handleActivateClick(client))}
+                      >
+                        {client.isActive ? "Deactivate" : "Activate"}
+                      </Button>
+                      <Button variant="ghost" onClick={() => handleCopyClientId(client._id)}>
+                        Copy ID
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          <div className="mt-4 flex justify-center">
+            <Pagination>
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationPrevious
+                    onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+                    className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                  />
+                </PaginationItem>
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                  <PaginationItem key={page}>
+                    <PaginationLink onClick={() => setCurrentPage(page)} isActive={currentPage === page}>
+                      {page}
+                    </PaginationLink>
+                  </PaginationItem>
+                ))}
+                <PaginationItem>
+                  <PaginationNext
+                    onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
+                    className={currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                  />
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+          </div>
+
+          <ActivateClientDialog
+            open={activateDialogOpen}
+            onOpenChange={setActivateDialogOpen}
+            onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, true)}
+            clientName={selectedClient?.name}
+          />
+
+          <DeactivateClientDialog
+            open={deactivateDialogOpen}
+            onOpenChange={setDeactivateDialogOpen}
+            onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, false)}
+            clientName={selectedClient?.name}
+          />
+        </>
+      )}
     </div>
   )
 }
 
-export default ClientManagement;
+export default ClientManagement
 
diff --git a/netmanager-app/app/(authenticated)/clients/dialogs.tsx b/netmanager-app/components/clients/dialogs.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/clients/dialogs.tsx
rename to netmanager-app/components/clients/dialogs.tsx