diff --git a/src/components/common/searchable-infinite-scroll-table.tsx b/src/components/common/searchable-infinite-scroll-table.tsx
index 964c344..3dc354a 100644
--- a/src/components/common/searchable-infinite-scroll-table.tsx
+++ b/src/components/common/searchable-infinite-scroll-table.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, useCallback } from "react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Input } from "@/components/ui/input";
 import { Loader2, Search } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 import axios from "axios";
 import debounce from "lodash.debounce";
 
@@ -18,7 +19,7 @@ interface TableData {
     amount: number;
 }
 
-export function SearchableInfiniteScrollTable() {
+export function SearchableInfiniteScrollTable({totalPayments}: {totalPayments: number}) {
     const [data, setData] = useState<TableData[]>([]);
     const [filteredData, setFilteredData] = useState<TableData[]>([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -26,7 +27,6 @@ export function SearchableInfiniteScrollTable() {
     const [searchTerm, setSearchTerm] = useState("");
     const [hasMoreData, setHasMoreData] = useState(true);
     const loaderRef = useRef<HTMLDivElement>(null);
-    const observerRef = useRef<IntersectionObserver | null>(null);
 
     const getPaymentDetails = async (page: number, query: string) => {
         if (isLoading || !hasMoreData) return;
@@ -37,19 +37,18 @@ export function SearchableInfiniteScrollTable() {
                 `/api/users/payment?page=${page}&search=${encodeURIComponent(query)}`
             );
             const users = response.data.users;
-
             if (users.length === 0) {
-                setHasMoreData(false); // No more data to load
+                setHasMoreData(false);
             }
 
             setData((prevData) => {
                 const newData = [...prevData, ...users];
-                // Remove duplicates
                 const uniqueData = Array.from(
                     new Map(newData.map((item) => [item.razorpayPaymentId, item])).values()
                 );
                 return uniqueData;
             });
+            
             setPage((prevPage) => prevPage + 1);
         } catch (error) {
             console.error("Error fetching payment details:", error);
@@ -58,20 +57,22 @@ export function SearchableInfiniteScrollTable() {
         }
     };
 
-    const loadMoreData = () => {
+    const loadMoreData = useCallback(() => {
         if (searchTerm === "") {
             getPaymentDetails(page, "");
         }
-    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [page, searchTerm]);
 
     const fetchSearchResults = useCallback(async (query: string) => {
-        setPage(1); // Reset page number
-        setHasMoreData(true); // Reset hasMoreData
+        setPage(1);
+        setHasMoreData(true);
         try {
             const response = await axios.get(`/api/users/payment?page=1&search=${encodeURIComponent(query)}`);
             const users = response.data.users;
-            setData(users); // Set new data from search
-            setFilteredData(users); // Set filtered data to the same as new data
+            const total = response.data.total;
+            setData(users);
+            setFilteredData(users);
         } catch (error) {
             console.error("Error fetching payment details:", error);
         }
@@ -81,20 +82,19 @@ export function SearchableInfiniteScrollTable() {
     const debouncedFetch = useCallback(
         debounce((query: string) => {
             fetchSearchResults(query);
-        }, 500),
-        []
+        }, 300),
+        [fetchSearchResults]
     );
 
     const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
         const value = event.target.value;
         setSearchTerm(value);
-        debouncedFetch(value); // Use debounced fetch function
+        debouncedFetch(value);
     };
 
     useEffect(() => {
-        loadMoreData(); // Initial load
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        loadMoreData();
+    }, [loadMoreData]);
 
     useEffect(() => {
         const observer = new IntersectionObserver(
@@ -115,50 +115,56 @@ export function SearchableInfiniteScrollTable() {
                 // eslint-disable-next-line react-hooks/exhaustive-deps
                 observer.unobserve(loaderRef.current);
             }
-            observer.disconnect();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isLoading]);
+    }, [isLoading, loadMoreData]);
 
     return (
         <div className="container mx-auto py-10">
-            <div className="mb-4 relative">
-                <Input
-                    type="text"
-                    placeholder="Search..."
-                    value={searchTerm}
-                    onChange={handleSearch}
-                    className="pl-10"
-                />
-                <Search
-                    className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                    size={20}
-                />
+            <div className="flex justify-between items-center mb-4">
+                <Badge variant="secondary" className="text-lg">
+                    Total Payments: {totalPayments}
+                </Badge>
+                <div className="relative w-64">
+                    <Input
+                        type="text"
+                        placeholder="Search..."
+                        value={searchTerm}
+                        onChange={handleSearch}
+                        className="pl-10"
+                        aria-label="Search payments"
+                    />
+                    <Search
+                        className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                        size={20}
+                    />
+                </div>
             </div>
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Name</TableHead>
-                        <TableHead>Email</TableHead>
-                        <TableHead>USN</TableHead>
-                        <TableHead>Payment ID</TableHead>
-                        <TableHead>Contact Number</TableHead>
-                        <TableHead>Amount</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {(searchTerm ? filteredData : data).map((item, index) => (
-                        <TableRow key={index}>
-                            <TableCell>{item.user.name}</TableCell>
-                            <TableCell>{item.user.email}</TableCell>
-                            <TableCell>{item.usn}</TableCell>
-                            <TableCell>{item.razorpayPaymentId}</TableCell>
-                            <TableCell>{item.contactNumber}</TableCell>
-                            <TableCell>₹{item.amount.toFixed(2)}</TableCell>
+            <div className="overflow-x-auto">
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Name</TableHead>
+                            <TableHead>Email</TableHead>
+                            <TableHead>USN</TableHead>
+                            <TableHead>Payment ID</TableHead>
+                            <TableHead>Contact Number</TableHead>
+                            <TableHead>Amount</TableHead>
                         </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
+                    </TableHeader>
+                    <TableBody>
+                        {(searchTerm ? filteredData : data).map((item, index) => (
+                            <TableRow key={item.razorpayPaymentId}>
+                                <TableCell>{item.user.name}</TableCell>
+                                <TableCell>{item.user.email}</TableCell>
+                                <TableCell>{item.usn}</TableCell>
+                                <TableCell>{item.razorpayPaymentId}</TableCell>
+                                <TableCell>{item.contactNumber}</TableCell>
+                                <TableCell>₹{item.amount.toFixed(2)}</TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
             {searchTerm === "" && hasMoreData && (
                 <div ref={loaderRef} className="flex justify-center py-4">
                     {isLoading && <Loader2 className="h-6 w-6 animate-spin" />}
@@ -166,4 +172,4 @@ export function SearchableInfiniteScrollTable() {
             )}
         </div>
     );
-}
+}
\ No newline at end of file