diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index 1d80e513e35..7c828f756b5 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/ui/litellm-dashboard/src/components/view_users.tsx
@@ -79,7 +79,6 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
   const [activeTab, setActiveTab] = useState("users")
   const [filters, setFilters] = useState<FilterState>(initialFilters)
   const [debouncedFilters, setDebouncedFilters, debouncer] = useDebouncedState(filters, { wait: 300 })
-  const [showFilters, setShowFilters] = useState(false)
   const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] = useState(false)
   const [invitationLinkData, setInvitationLinkData] = useState<InvitationLink | null>(null)
   const [baseUrl, setBaseUrl] = useState<string | null>(null)
@@ -330,209 +329,35 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
 
         <TabPanels>
           <TabPanel>
-            <div className="bg-white rounded-lg shadow">
-              <div className="border-b px-6 py-4">
-                <div className="flex flex-col space-y-4">
-                  {/* Search and Filter Controls */}
-                  <div className="flex flex-wrap items-center gap-3">
-                    {/* Email Search */}
-                    <div className="relative w-64">
-                      <input
-                        type="text"
-                        placeholder="Search by email..."
-                        className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                        value={filters.email}
-                        onChange={(e) => updateFilters({ email: e.target.value })}
-                      />
-                      <svg
-                        className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                        />
-                      </svg>
-                    </div>
-
-                    {/* Filter Button */}
-                    <button
-                      className={`px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2 ${showFilters ? "bg-gray-100" : ""}`}
-                      onClick={() => setShowFilters(!showFilters)}
-                    >
-                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-                        />
-                      </svg>
-                      Filters
-                      {(filters.user_id || filters.user_role || filters.team) && (
-                        <span className="w-2 h-2 rounded-full bg-blue-500"></span>
-                      )}
-                    </button>
-
-                    {/* Reset Filters Button */}
-                    <button
-                      className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
-                      onClick={() => {
-                        updateFilters(initialFilters)
-                      }}
-                    >
-                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                        />
-                      </svg>
-                      Reset Filters
-                    </button>
-                  </div>
-
-                  {/* Additional Filters */}
-                  {showFilters && (
-                    <div className="flex flex-wrap items-center gap-3 mt-3">
-                      {/* User ID Search */}
-                      <div className="relative w-64">
-                        <input
-                          type="text"
-                          placeholder="Filter by User ID"
-                          className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                          value={filters.user_id}
-                          onChange={(e) => updateFilters({ user_id: e.target.value })}
-                        />
-                        <svg
-                          className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                          />
-                        </svg>
-                      </div>
-
-                      {/* Role Dropdown */}
-                      <div className="w-64">
-                        <Select
-                          value={filters.user_role}
-                          onValueChange={(value) => updateFilters({ user_role: value })}
-                          placeholder="Select Role"
-                        >
-                          {Object.entries(possibleUIRoles).map(([key, value]) => (
-                            <SelectItem key={key} value={key}>
-                              {value.ui_label}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      </div>
-
-                      {/* Team Dropdown */}
-                      <div className="w-64">
-                        <Select
-                          value={filters.team}
-                          onValueChange={(value) => updateFilters({ team: value })}
-                          placeholder="Select Team"
-                        >
-                          {teams?.map((team) => (
-                            <SelectItem key={team.team_id} value={team.team_id}>
-                              {team.team_alias || team.team_id}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      </div>
-
-                      {/* SSO ID Search */}
-                      <div className="relative w-64">
-                        <input
-                          type="text"
-                          placeholder="Filter by SSO ID"
-                          className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                          value={filters.sso_user_id}
-                          onChange={(e) => updateFilters({ sso_user_id: e.target.value })}
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Results Count and Pagination */}
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-700">
-                      Showing{" "}
-                      {userListResponse && userListResponse.users && userListResponse.users.length > 0
-                        ? (userListResponse.page - 1) * userListResponse.page_size + 1
-                        : 0}{" "}
-                      -{" "}
-                      {userListResponse && userListResponse.users
-                        ? Math.min(userListResponse.page * userListResponse.page_size, userListResponse.total)
-                        : 0}{" "}
-                      of {userListResponse ? userListResponse.total : 0} results
-                    </span>
-
-                    {/* Pagination Buttons */}
-                    <div className="flex space-x-2">
-                      <button
-                        onClick={() => handlePageChange(currentPage - 1)}
-                        disabled={currentPage === 1}
-                        className={`px-3 py-1 text-sm border rounded-md ${
-                          currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "hover:bg-gray-50"
-                        }`}
-                      >
-                        Previous
-                      </button>
-                      <button
-                        onClick={() => handlePageChange(currentPage + 1)}
-                        disabled={!userListResponse || currentPage >= userListResponse.total_pages}
-                        className={`px-3 py-1 text-sm border rounded-md ${
-                          !userListResponse || currentPage >= userListResponse.total_pages
-                            ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                            : "hover:bg-gray-50"
-                        }`}
-                      >
-                        Next
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="overflow-auto">
-              <UserDataTable
-                data={userListQuery.data?.users || []}
-                columns={tableColumns}
-                isLoading={userListQuery.isLoading}
-                accessToken={accessToken}
-                userRole={userRole}
-                onSortChange={handleSortChange}
-                currentSort={{
-                  sortBy: filters.sort_by,
-                  sortOrder: filters.sort_order,
-                }}
-                possibleUIRoles={possibleUIRoles}
-                handleEdit={(user) => {
-                  setSelectedUser(user)
-                  setEditModalVisible(true)
-                }}
-                handleDelete={handleDelete}
-                handleResetPassword={handleResetPassword}
-                enableSelection={selectionMode}
-                selectedUsers={selectedUsers}
-                onSelectionChange={handleSelectionChange}
-              />
-              </div>
-              
-            </div>
+            <UserDataTable
+              data={userListQuery.data?.users || []}
+              columns={tableColumns}
+              isLoading={userListQuery.isLoading}
+              accessToken={accessToken}
+              userRole={userRole}
+              onSortChange={handleSortChange}
+              currentSort={{
+                sortBy: filters.sort_by,
+                sortOrder: filters.sort_order,
+              }}
+              possibleUIRoles={possibleUIRoles}
+              handleEdit={(user) => {
+                setSelectedUser(user)
+                setEditModalVisible(true)
+              }}
+              handleDelete={handleDelete}
+              handleResetPassword={handleResetPassword}
+              enableSelection={selectionMode}
+              selectedUsers={selectedUsers}
+              onSelectionChange={handleSelectionChange}
+              filters={filters}
+              updateFilters={updateFilters}
+              initialFilters={initialFilters}
+              teams={teams}
+              userListResponse={userListResponse}
+              currentPage={currentPage}
+              handlePageChange={handlePageChange}
+            />
           </TabPanel>
 
           <TabPanel>
diff --git a/ui/litellm-dashboard/src/components/view_users/table.tsx b/ui/litellm-dashboard/src/components/view_users/table.tsx
index 0f1193c6e87..0b422ead7b3 100644
--- a/ui/litellm-dashboard/src/components/view_users/table.tsx
+++ b/ui/litellm-dashboard/src/components/view_users/table.tsx
@@ -15,12 +15,27 @@ import {
   TableBody,
   TableRow,
   TableCell,
+  Select,
+  SelectItem,
 } from "@tremor/react";
 import { SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
 import { UserInfo } from "./types";
 import UserInfoView from "./user_info_view";
 import { columns as createColumns } from "./columns";
 
+interface FilterState {
+  email: string;
+  user_id: string;
+  user_role: string;
+  sso_user_id: string;
+  team: string;
+  model: string;
+  min_spend: number | null;
+  max_spend: number | null;
+  sort_by: string;
+  sort_order: "asc" | "desc";
+}
+
 interface UserDataTableProps {
   data: UserInfo[];
   columns: ColumnDef<UserInfo, any>[];
@@ -39,6 +54,15 @@ interface UserDataTableProps {
   selectedUsers?: UserInfo[];
   onSelectionChange?: (selectedUsers: UserInfo[]) => void;
   enableSelection?: boolean;
+  // Filter-related props
+  filters: FilterState;
+  updateFilters: (update: Partial<FilterState>) => void;
+  initialFilters: FilterState;
+  teams: any[] | null;
+  // Pagination props
+  userListResponse: any;
+  currentPage: number;
+  handlePageChange: (newPage: number) => void;
 }
 
 export function UserDataTable({
@@ -56,6 +80,13 @@ export function UserDataTable({
   selectedUsers = [],
   onSelectionChange,
   enableSelection = false,
+  filters,
+  updateFilters,
+  initialFilters,
+  teams,
+  userListResponse,
+  currentPage,
+  handlePageChange,
 }: UserDataTableProps) {
   const [sorting, setSorting] = React.useState<SortingState>([
     { 
@@ -65,6 +96,7 @@ export function UserDataTable({
   ]);
   const [selectedUserId, setSelectedUserId] = React.useState<string | null>(null);
   const [openInEditMode, setOpenInEditMode] = React.useState<boolean>(false);
+  const [showFilters, setShowFilters] = React.useState<boolean>(false);
 
   const handleUserClick = (userId: string, openInEditMode: boolean = false) => {
     setSelectedUserId(userId);
@@ -171,9 +203,190 @@ export function UserDataTable({
   }
 
   return (
-    <div className="rounded-lg custom-border relative">
-      <div className="overflow-x-auto">
-        <Table className="[&_td]:py-0.5 [&_th]:py-1">
+    <div className="bg-white rounded-lg shadow">
+      {/* Filter Section */}
+      <div className="border-b px-6 py-4">
+        <div className="flex flex-col space-y-4">
+          {/* Search and Filter Controls */}
+          <div className="flex flex-wrap items-center gap-3">
+            {/* Email Search */}
+            <div className="relative w-64">
+              <input
+                type="text"
+                placeholder="Search by email..."
+                className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                value={filters.email}
+                onChange={(e) => updateFilters({ email: e.target.value })}
+              />
+              <svg
+                className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+            </div>
+
+            {/* Filter Button */}
+            <button
+              className={`px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2 ${showFilters ? "bg-gray-100" : ""}`}
+              onClick={() => setShowFilters(!showFilters)}
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+                />
+              </svg>
+              Filters
+              {(filters.user_id || filters.user_role || filters.team) && (
+                <span className="w-2 h-2 rounded-full bg-blue-500"></span>
+              )}
+            </button>
+
+            {/* Reset Filters Button */}
+            <button
+              className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
+              onClick={() => {
+                updateFilters(initialFilters)
+              }}
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              Reset Filters
+            </button>
+          </div>
+
+          {/* Additional Filters */}
+          {showFilters && (
+            <div className="flex flex-wrap items-center gap-3 mt-3">
+              {/* User ID Search */}
+              <div className="relative w-64">
+                <input
+                  type="text"
+                  placeholder="Filter by User ID"
+                  className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  value={filters.user_id}
+                  onChange={(e) => updateFilters({ user_id: e.target.value })}
+                />
+                <svg
+                  className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+              </div>
+
+              {/* Role Dropdown */}
+              <div className="w-64">
+                <Select
+                  value={filters.user_role}
+                  onValueChange={(value) => updateFilters({ user_role: value })}
+                  placeholder="Select Role"
+                >
+                  {possibleUIRoles && Object.entries(possibleUIRoles).map(([key, value]) => (
+                    <SelectItem key={key} value={key}>
+                      {value.ui_label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </div>
+
+              {/* Team Dropdown */}
+              <div className="w-64">
+                <Select
+                  value={filters.team}
+                  onValueChange={(value) => updateFilters({ team: value })}
+                  placeholder="Select Team"
+                >
+                  {teams?.map((team) => (
+                    <SelectItem key={team.team_id} value={team.team_id}>
+                      {team.team_alias || team.team_id}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </div>
+
+              {/* SSO ID Search */}
+              <div className="relative w-64">
+                <input
+                  type="text"
+                  placeholder="Filter by SSO ID"
+                  className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  value={filters.sso_user_id}
+                  onChange={(e) => updateFilters({ sso_user_id: e.target.value })}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Results Count and Pagination */}
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-gray-700">
+              Showing{" "}
+              {userListResponse && userListResponse.users && userListResponse.users.length > 0
+                ? (userListResponse.page - 1) * userListResponse.page_size + 1
+                : 0}{" "}
+              -{" "}
+              {userListResponse && userListResponse.users
+                ? Math.min(userListResponse.page * userListResponse.page_size, userListResponse.total)
+                : 0}{" "}
+              of {userListResponse ? userListResponse.total : 0} results
+            </span>
+
+            {/* Pagination Buttons */}
+            <div className="flex space-x-2">
+              <button
+                onClick={() => handlePageChange(currentPage - 1)}
+                disabled={currentPage === 1}
+                className={`px-3 py-1 text-sm border rounded-md ${
+                  currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "hover:bg-gray-50"
+                }`}
+              >
+                Previous
+              </button>
+              <button
+                onClick={() => handlePageChange(currentPage + 1)}
+                disabled={!userListResponse || currentPage >= userListResponse.total_pages}
+                className={`px-3 py-1 text-sm border rounded-md ${
+                  !userListResponse || currentPage >= userListResponse.total_pages
+                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                    : "hover:bg-gray-50"
+                }`}
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Table Section */}
+      <div className="overflow-auto">
+        <div className="rounded-lg custom-border relative">
+          <div className="overflow-x-auto">
+            <Table className="[&_td]:py-0.5 [&_th]:py-1">
           <TableHead>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -260,6 +473,8 @@ export function UserDataTable({
             )}
           </TableBody>
         </Table>
+          </div>
+        </div>
       </div>
     </div>
   );