diff --git a/my-app/app/admin/groups/groups-table-columns.tsx b/my-app/app/admin/groups/groups-table-columns.tsx
index c731e0f..4f53a45 100644
--- a/my-app/app/admin/groups/groups-table-columns.tsx
+++ b/my-app/app/admin/groups/groups-table-columns.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { MoreVertical, Trash2, Pencil } from "lucide-react";
+import { MoreVertical, Trash2, Edit } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { SortingIcon } from "@/components/table-components";
@@ -18,13 +18,19 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { Group } from "@/lib/types";
 import { SortingState } from "@tanstack/react-table";
+import { formatRelativeTime, formatDateTime } from "@/lib/utils";
 
 interface GroupsTableCoreProps {
   groups: Group[];
   searchTerm: string;
-  onGroupAction: (groupName: string, action: "delete" | "edit") => void;
+  onGroupAction: (groupName: string, action: "delete" | "rename") => void;
   selectedGroups: string[];
   onSelectGroup: (groupName: string, checked: boolean) => void;
   onSelectAll: (checked: boolean) => void;
@@ -87,7 +93,7 @@ export function GroupsTableCore({
               disabled={allSelectableGroups.length === 0}
             />
           </TableHead>
-          <TableHead className="w-[300px]">
+          <TableHead>
             <div className="flex items-center justify-between pr-2 group">
               <Button
                 variant="ghost"
@@ -100,7 +106,7 @@ export function GroupsTableCore({
               <SortingIcon sortDirection={getSortDirection("name")} />
             </div>
           </TableHead>
-          <TableHead className="w-[175px]">
+          <TableHead>
             <div className="flex items-center justify-between pr-2 group">
               <Button
                 variant="ghost"
@@ -113,12 +119,20 @@ export function GroupsTableCore({
               <SortingIcon sortDirection={getSortDirection("user_count")} />
             </div>
           </TableHead>
-          <TableHead className="min-w-[200px]">
-            <div>
-              <span className="font-medium">Comment</span>
+          <TableHead>
+            <div className="flex items-center justify-between pr-2 group">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleSortingChange("created_at")}
+                className="-ml-3 flex-1 justify-start hover:bg-muted transition-colors"
+              >
+                <span className="font-medium">Created At</span>
+              </Button>
+              <SortingIcon sortDirection={getSortDirection("created_at")} />
             </div>
           </TableHead>
-          <TableHead className="w-[20px]">
+          <TableHead className="w-[50px]">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" disabled={selectedGroups.length === 0}>
@@ -169,8 +183,21 @@ export function GroupsTableCore({
             <TableCell className="text-muted-foreground">
               {group.user_count ?? 0}
             </TableCell>
-            <TableCell className="text-muted-foreground max-w-[300px]">
-              <div className="truncate">{group.comment || ""}</div>
+            <TableCell>
+              {group.created_at ? (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="text-sm text-muted-foreground cursor-help">
+                      {formatRelativeTime(group.created_at)}
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{formatDateTime(group.created_at)}</p>
+                  </TooltipContent>
+                </Tooltip>
+              ) : (
+                <span className="text-sm text-muted-foreground">N/A</span>
+              )}
             </TableCell>
             <TableCell>
               <DropdownMenu>
@@ -181,16 +208,18 @@ export function GroupsTableCore({
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                   <DropdownMenuItem
-                    onClick={() => onGroupAction(group.name, "edit")}
+                    onClick={() => onGroupAction(group.name, "rename")}
                     className="cursor-pointer"
+                    disabled={!group.can_modify}
                   >
-                    <Pencil className="mr-2 h-4 w-4" />
-                    Edit
+                    <Edit className="mr-2 h-4 w-4" />
+                    Rename
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem
                     onClick={() => onGroupAction(group.name, "delete")}
                     className="cursor-pointer text-destructive focus:text-destructive"
+                    disabled={!group.can_modify}
                   >
                     <Trash2 className="mr-2 h-4 w-4" />
                     Delete
diff --git a/my-app/app/admin/groups/groups-table-core.tsx b/my-app/app/admin/groups/groups-table-core.tsx
index 38a8190..32cba55 100644
--- a/my-app/app/admin/groups/groups-table-core.tsx
+++ b/my-app/app/admin/groups/groups-table-core.tsx
@@ -7,7 +7,7 @@ interface GroupsTableCoreWrapperProps {
   groups: Group[];
   sorting: SortingState;
   onSortingChange: (sorting: SortingState) => void;
-  onGroupAction: (groupName: string, action: "delete" | "edit") => void;
+  onGroupAction: (groupName: string, action: "delete" | "rename") => void;
   searchTerm: string;
   selectedGroups: string[];
   onSelectGroup: (groupName: string, checked: boolean) => void;
diff --git a/my-app/app/admin/groups/groups-table.tsx b/my-app/app/admin/groups/groups-table.tsx
index 718323b..c94f1ce 100644
--- a/my-app/app/admin/groups/groups-table.tsx
+++ b/my-app/app/admin/groups/groups-table.tsx
@@ -12,7 +12,7 @@ import { GroupsTablePagination } from "./groups-table-pagination";
 import { SortingState } from "@tanstack/react-table";
 
 interface GroupsTableProps {
-  onGroupAction: (groupName: string, action: "delete" | "edit") => void;
+  onGroupAction: (groupName: string, action: "delete" | "rename") => void;
   onBulkDeleteRequest?: (groupNames: string[]) => void;
 }
 
@@ -31,9 +31,9 @@ export function GroupsTable({
   // Pagination state
   const [currentPage, setCurrentPage] = React.useState(1);
   const [itemsPerPage, setItemsPerPage] = React.useState(25);
-  // Sorting state with default sort by name
+  // Sorting state with default sort by created_at (recent to old)
   const [sorting, setSorting] = React.useState<SortingState>([
-    { id: "name", desc: false },
+    { id: "created_at", desc: false },
   ]);
   // Multi-select state
   const [selectedGroups, setSelectedGroups] = React.useState<string[]>([]);
@@ -80,9 +80,11 @@ export function GroupsTable({
       } else if (sort.id === "user_count") {
         aValue = a.user_count || 0;
         bValue = b.user_count || 0;
-      } else if (sort.id === "comment") {
-        aValue = (a.comment || "").toLowerCase();
-        bValue = (b.comment || "").toLowerCase();
+      } else if (sort.id === "created_at") {
+        // Sort by date (most recent first by default)
+        const aDate = a.created_at ? new Date(a.created_at).getTime() : 0;
+        const bDate = b.created_at ? new Date(b.created_at).getTime() : 0;
+        return sort.desc ? aDate - bDate : bDate - aDate;
       } else {
         return 0;
       }
diff --git a/my-app/app/admin/groups/manage-group-members-dialog.tsx b/my-app/app/admin/groups/manage-group-members-dialog.tsx
index 8585339..859cfba 100644
--- a/my-app/app/admin/groups/manage-group-members-dialog.tsx
+++ b/my-app/app/admin/groups/manage-group-members-dialog.tsx
@@ -99,10 +99,10 @@ export function ManageGroupMembersDialog({
     // Filter based on operation
     if (operation === "add") {
       // Show users NOT in the selected group
-      return !user.groups.includes(selectedGroup);
+      return !user.groups.some((group) => group.name === selectedGroup);
     } else {
       // Show users IN the selected group
-      return user.groups.includes(selectedGroup);
+      return user.groups.some((group) => group.name === selectedGroup);
     }
   });
 
@@ -379,11 +379,11 @@ export function ManageGroupMembersDialog({
                                 <div className="flex gap-2 flex-wrap justify-end">
                                   {user.groups.slice(0, 3).map((group) => (
                                     <Badge
-                                      key={group}
+                                      key={group.name}
                                       variant="outline"
                                       className="text-muted-foreground"
                                     >
-                                      {group}
+                                      {group.name}
                                     </Badge>
                                   ))}
                                   {user.groups.length > 3 && (
diff --git a/my-app/app/admin/groups/page.tsx b/my-app/app/admin/groups/page.tsx
index 5c0e4e9..1e6f17c 100644
--- a/my-app/app/admin/groups/page.tsx
+++ b/my-app/app/admin/groups/page.tsx
@@ -5,6 +5,8 @@ import { AuthGuard } from "@/components/auth-guard";
 import { PageLayout } from "@/app/admin/admin-page-layout";
 import { GroupsTable } from "@/app/admin/groups/groups-table";
 import { handleDeleteGroups } from "@/lib/admin-operations";
+import { renameGroup } from "@/lib/api";
+import { toast } from "sonner";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,16 +16,30 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
 import { Group } from "@/lib/types";
 
 const breadcrumbs = [{ label: "Groups", href: "/admin/groups" }];
 
 export default function AdminGroupsPage() {
   const [alertOpen, setAlertOpen] = useState(false);
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
   const [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState(false);
   const [bulkDeleteGroups, setBulkDeleteGroups] = useState<string[]>([]);
   const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
+  const [newGroupName, setNewGroupName] = useState("");
   const [isBulkDeleting, setIsBulkDeleting] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
 
   const handleRefresh = async () => {
@@ -32,11 +48,18 @@ export default function AdminGroupsPage() {
     await new Promise((resolve) => setTimeout(resolve, 500));
   };
 
-  const handleGroupAction = (groupName: string, action: "delete" | "edit") => {
+  const handleGroupAction = (
+    groupName: string,
+    action: "delete" | "rename",
+  ) => {
     const group = { name: groupName } as Group;
     if (action === "delete") {
       setSelectedGroup(group);
       setAlertOpen(true);
+    } else if (action === "rename") {
+      setSelectedGroup(group);
+      setNewGroupName(groupName);
+      setRenameDialogOpen(true);
     }
   };
 
@@ -79,6 +102,32 @@ export default function AdminGroupsPage() {
     }
   };
 
+  const handleConfirmRename = async () => {
+    if (!selectedGroup || !newGroupName.trim()) return;
+    if (newGroupName.trim() === selectedGroup.name) {
+      toast.error("New name must be different from current name");
+      return;
+    }
+    setIsRenaming(true);
+    try {
+      await renameGroup(selectedGroup.name, newGroupName.trim());
+      toast.success(
+        `Group renamed from "${selectedGroup.name}" to "${newGroupName.trim()}"`,
+      );
+      setRenameDialogOpen(false);
+      setSelectedGroup(null);
+      setNewGroupName("");
+      handleRefresh();
+    } catch (error) {
+      toast.error(
+        `Failed to rename group: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+      console.error("Failed to rename group:", error);
+    } finally {
+      setIsRenaming(false);
+    }
+  };
+
   return (
     <AuthGuard adminOnly>
       <PageLayout breadcrumbs={breadcrumbs}>
@@ -97,6 +146,45 @@ export default function AdminGroupsPage() {
         </div>
       </PageLayout>
 
+      {/* Rename Dialog */}
+      <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Rename Group</DialogTitle>
+            <DialogDescription>
+              Enter a new name for &quot;{selectedGroup?.name}&quot;
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="name">New Group Name</Label>
+              <Input
+                id="name"
+                value={newGroupName}
+                onChange={(e) => setNewGroupName(e.target.value)}
+                placeholder="Enter new group name"
+                disabled={isRenaming}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setRenameDialogOpen(false)}
+              disabled={isRenaming}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirmRename}
+              disabled={isRenaming || !newGroupName.trim()}
+            >
+              {isRenaming ? "Renaming..." : "Rename"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* Delete Confirmation Dialog */}
       <AlertDialog open={alertOpen} onOpenChange={setAlertOpen}>
         <AlertDialogContent>
diff --git a/my-app/app/admin/users/edit-groups-dialog.tsx b/my-app/app/admin/users/edit-groups-dialog.tsx
index a5f10b8..e0d806a 100644
--- a/my-app/app/admin/users/edit-groups-dialog.tsx
+++ b/my-app/app/admin/users/edit-groups-dialog.tsx
@@ -62,10 +62,10 @@ export function EditGroupsDialog({
   // Set initial selected groups when user changes
   useEffect(() => {
     if (user) {
-      // Filter out empty strings from groups
-      const validGroups = user.groups.filter((g) => g && g.trim() !== "");
-      setSelectedGroups(validGroups);
-      setInitialGroups(validGroups);
+      // Extract group names from Group objects
+      const groupNames = user.groups.map((g) => g.name);
+      setSelectedGroups(groupNames);
+      setInitialGroups(groupNames);
     }
   }, [user]);
 
diff --git a/my-app/app/admin/users/header-stats.tsx b/my-app/app/admin/users/header-stats.tsx
index e32f952..631401d 100644
--- a/my-app/app/admin/users/header-stats.tsx
+++ b/my-app/app/admin/users/header-stats.tsx
@@ -7,21 +7,27 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { GetUsersResponse } from "@/lib/types";
-import { User } from "lucide-react";
+import { User, UserX, Shield, Pencil } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { CreateUserDialog } from "@/components/shared/create-user-dialog";
 
+interface UserStats {
+  count: number;
+  disabled_count: number;
+  admin_count: number;
+  creator_count: number;
+}
+
 interface HeaderStatsProps {
-  usersData: GetUsersResponse;
+  stats: UserStats;
   onUserCreated?: () => void;
 }
 
-export function HeaderStats({ usersData, onUserCreated }: HeaderStatsProps) {
+export function HeaderStats({ stats, onUserCreated }: HeaderStatsProps) {
   return (
     <>
       <div
-        className={`*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs pb-2 lg:grid-cols-2 grid-cols-1`}
+        className={`*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs pb-2 lg:grid-cols-3 xl:grid-cols-5 grid-cols-1`}
       >
         <Card className="@container/card">
           <CardHeader>
@@ -30,7 +36,43 @@ export function HeaderStats({ usersData, onUserCreated }: HeaderStatsProps) {
               <User />
             </CardAction>
             <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-              {usersData.count}
+              {stats.count}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+
+        <Card className="@container/card">
+          <CardHeader>
+            <CardDescription>Disabled Users</CardDescription>
+            <CardAction>
+              <UserX />
+            </CardAction>
+            <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+              {stats.disabled_count}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+
+        <Card className="@container/card">
+          <CardHeader>
+            <CardDescription>Admin Users</CardDescription>
+            <CardAction>
+              <Shield />
+            </CardAction>
+            <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+              {stats.admin_count}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+
+        <Card className="@container/card">
+          <CardHeader>
+            <CardDescription>Creator Users</CardDescription>
+            <CardAction>
+              <Pencil />
+            </CardAction>
+            <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+              {stats.creator_count}
             </CardTitle>
           </CardHeader>
         </Card>
diff --git a/my-app/app/admin/users/use-user-filters.ts b/my-app/app/admin/users/use-user-filters.ts
index 1d5a51a..c533451 100644
--- a/my-app/app/admin/users/use-user-filters.ts
+++ b/my-app/app/admin/users/use-user-filters.ts
@@ -23,7 +23,7 @@ export function useUserFilters({ users, searchTerm }: UseUserFiltersProps) {
         // Search in groups
         if (
           user.groups.some((group) =>
-            group.toLowerCase().includes(lowercaseSearch),
+            group.name.toLowerCase().includes(lowercaseSearch),
           )
         ) {
           return true;
diff --git a/my-app/app/admin/users/users-table-columns.tsx b/my-app/app/admin/users/users-table-columns.tsx
index 9892b7d..890b097 100644
--- a/my-app/app/admin/users/users-table-columns.tsx
+++ b/my-app/app/admin/users/users-table-columns.tsx
@@ -18,9 +18,15 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { User } from "@/lib/types";
 import { Badge } from "@/components/ui/badge";
 import { SortingState } from "@tanstack/react-table";
+import { formatRelativeTime, formatDateTime } from "@/lib/utils";
 
 interface UsersTableCoreProps {
   users: User[];
@@ -122,6 +128,19 @@ export function UsersTableCore({
           <TableHead className="min-w-[150px]">
             <span className="font-medium">Groups</span>
           </TableHead>
+          <TableHead className="min-w-[180px]">
+            <div className="flex items-center justify-between pr-2 group">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleSortingChange("created_at")}
+                className="-ml-3 flex-1 justify-start hover:bg-muted transition-colors"
+              >
+                <span className="font-medium">Created</span>
+              </Button>
+              <SortingIcon sortDirection={getSortDirection("created_at")} />
+            </div>
+          </TableHead>
           <TableHead className="w-[20px]">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -147,7 +166,7 @@ export function UsersTableCore({
         {users.length === 0 && (
           <TableRow key="empty-state">
             <TableCell
-              colSpan={4}
+              colSpan={5}
               className="text-center py-8 text-muted-foreground"
             >
               {searchTerm
@@ -172,24 +191,37 @@ export function UsersTableCore({
             </TableCell>
             <TableCell>
               <div className="flex flex-wrap gap-1">
-                {user.groups &&
-                user.groups.filter((g) => g && g.trim() !== "").length > 0 ? (
-                  user.groups
-                    .filter((g) => g && g.trim() !== "")
-                    .map((group) => (
-                      <Badge
-                        key={group}
-                        variant="secondary"
-                        className="text-xs"
-                      >
-                        {group}
-                      </Badge>
-                    ))
+                {user.groups && user.groups.length > 0 ? (
+                  user.groups.map((group) => (
+                    <Badge
+                      key={group.name}
+                      variant="secondary"
+                      className="text-xs"
+                    >
+                      {group.name}
+                    </Badge>
+                  ))
                 ) : (
                   <span className="text-muted-foreground text-sm">N/A</span>
                 )}
               </div>
             </TableCell>
+            <TableCell>
+              {user.created_at ? (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="text-sm text-muted-foreground">
+                      {formatRelativeTime(user.created_at)}
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{formatDateTime(user.created_at)}</p>
+                  </TooltipContent>
+                </Tooltip>
+              ) : (
+                <span className="text-sm text-muted-foreground">N/A</span>
+              )}
+            </TableCell>
             <TableCell>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
diff --git a/my-app/app/admin/users/users-table.tsx b/my-app/app/admin/users/users-table.tsx
index 094aacc..c0724f5 100644
--- a/my-app/app/admin/users/users-table.tsx
+++ b/my-app/app/admin/users/users-table.tsx
@@ -28,10 +28,7 @@ interface UsersTableProps {
 export function UsersTable({ onUserAction, onRefresh }: UsersTableProps) {
   const [searchTerm, setSearchTerm] = React.useState("");
   const [isRefreshing, setIsRefreshing] = React.useState(false);
-  const [usersData, setUsersData] = React.useState<GetUsersResponse>({
-    users: [],
-    count: 0,
-  });
+  const [users, setUsers] = React.useState<User[]>([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
 
@@ -46,7 +43,7 @@ export function UsersTable({ onUserAction, onRefresh }: UsersTableProps) {
 
   // Sorting state
   const [sorting, setSorting] = React.useState<SortingState>([
-    { id: "name", desc: false }, // Default sort by name
+    { id: "created_at", desc: false }, // Default sort by created_at (recent to old)
   ]);
 
   // Dialog states
@@ -56,9 +53,19 @@ export function UsersTable({ onUserAction, onRefresh }: UsersTableProps) {
   const [deleteConfirmDialogOpen, setDeleteConfirmDialogOpen] =
     React.useState(false);
 
+  // Compute stats from users data
+  const stats = React.useMemo(() => {
+    return {
+      count: users.length,
+      disabled_count: users.filter((u) => !u.enabled).length,
+      admin_count: users.filter((u) => u.is_admin).length,
+      creator_count: users.filter((u) => u.is_creator).length,
+    };
+  }, [users]);
+
   // Apply filters
   const filteredUsers = useUserFilters({
-    users: usersData.users,
+    users,
     searchTerm,
   });
 
@@ -79,6 +86,11 @@ export function UsersTable({ onUserAction, onRefresh }: UsersTableProps) {
       } else if (sort.id === "groups") {
         aValue = a.groups.length;
         bValue = b.groups.length;
+      } else if (sort.id === "created_at") {
+        // Sort by date (most recent first by default)
+        const aDate = a.created_at ? new Date(a.created_at).getTime() : 0;
+        const bDate = b.created_at ? new Date(b.created_at).getTime() : 0;
+        return sort.desc ? aDate - bDate : bDate - aDate;
       } else {
         return 0;
       }
@@ -98,8 +110,8 @@ export function UsersTable({ onUserAction, onRefresh }: UsersTableProps) {
 
   // Get selected user objects
   const selectedUserObjects = React.useMemo(() => {
-    return usersData.users.filter((user) => selectedUsers.has(user.name));
-  }, [usersData.users, selectedUsers]);
+    return users.filter((user) => selectedUsers.has(user.name));
+  }, [users, selectedUsers]);
 
   // Bulk operation handlers
   const handleBulkAddToGroup = () => {
@@ -206,7 +218,7 @@ export function UsersTable({ onUserAction, onRefresh }: UsersTableProps) {
       setLoading(true);
       setError(null);
       const fetchedUsersData = await getAllUsers();
-      setUsersData(fetchedUsersData);
+      setUsers(fetchedUsersData.users);
     } catch (error) {
       const errorMessage =
         error instanceof Error ? error.message : "Failed to fetch users";
@@ -272,7 +284,7 @@ export function UsersTable({ onUserAction, onRefresh }: UsersTableProps) {
   return (
     <div className="space-y-4">
       {/* Header Stats */}
-      <HeaderStats usersData={usersData} onUserCreated={handleRefresh} />
+      <HeaderStats stats={stats} onUserCreated={handleRefresh} />
 
       {/* Users Table */}
       <div className="rounded-md border">
diff --git a/my-app/app/page.tsx b/my-app/app/page.tsx
index b56a6f0..dae5e97 100644
--- a/my-app/app/page.tsx
+++ b/my-app/app/page.tsx
@@ -147,8 +147,8 @@ export default function Page() {
                             </span>
                           </TooltipTrigger>
                           <TooltipContent className="text-sm">
-                            {currentUserData.groups.map((group: string) => (
-                              <p key={group}>{group}</p>
+                            {currentUserData.groups.map((group) => (
+                              <p key={group.name}>{group.name}</p>
                             ))}
                           </TooltipContent>
                         </Tooltip>
diff --git a/my-app/lib/api.ts b/my-app/lib/api.ts
index 541f721..79a8381 100644
--- a/my-app/lib/api.ts
+++ b/my-app/lib/api.ts
@@ -278,13 +278,11 @@ export async function getAllUsers(): Promise<GetUsersResponse> {
     }),
   );
 
-  // Normalize groups to ensure it's always an array and filter out empty strings
+  // Ensure groups is always an array
   if (data.users) {
     data.users = data.users.map((user) => ({
       ...user,
-      groups: Array.isArray(user.groups)
-        ? user.groups.filter((g) => g && g.trim() !== "")
-        : [],
+      groups: Array.isArray(user.groups) ? user.groups : [],
     }));
   }
 
diff --git a/my-app/lib/types.ts b/my-app/lib/types.ts
index db26a9f..27d81b1 100644
--- a/my-app/lib/types.ts
+++ b/my-app/lib/types.ts
@@ -33,15 +33,20 @@ export interface DeployedPodResponse {
   pods: DeployedPod[];
 }
 
-export interface User {
+export interface Group {
   name: string;
-  groups: string[];
+  can_modify: boolean;
+  created_at?: string;
+  user_count?: number;
 }
 
-export interface Group {
+export interface User {
   name: string;
-  user_count?: number;
-  comment?: string;
+  created_at: string;
+  enabled: boolean;
+  is_admin: boolean;
+  is_creator: boolean;
+  groups: Group[];
 }
 
 export interface UserLogin {
@@ -93,7 +98,10 @@ export interface VirtualMachinesResponse {
 
 export interface GetUsersResponse {
   users: User[];
-  count: number;
+  count?: number;
+  disabled_count?: number;
+  admin_count?: number;
+  creator_count?: number;
 }
 
 export interface Resources {