diff --git a/src/components/group-action-buttons.tsx b/src/components/group-action-buttons.tsx
new file mode 100644
index 0000000..39ba3f3
--- /dev/null
+++ b/src/components/group-action-buttons.tsx
@@ -0,0 +1,73 @@
+import { Eye, EyeOff, ExternalLink, LoaderCircle, Tag, X } from "lucide-react"
+
+import { Button, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export function InviteLinkButton({ link }: { link: string | null }) {
+  if (!link) {
+    return (
+      <span
+        className={cn(
+          buttonVariants({ variant: "outline", size: "icon-sm" }),
+          "pointer-events-none text-muted-foreground opacity-50"
+        )}
+      >
+        <X />
+        <span className="sr-only">Not shared</span>
+      </span>
+    )
+  }
+
+  return (
+    <a
+      className={cn(buttonVariants({ variant: "outline", size: "icon-sm" }), "text-muted-foreground")}
+      href={link}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <ExternalLink />
+      <span className="sr-only">Open invite link</span>
+    </a>
+  )
+}
+
+export function VisibilityToggleButton({
+  title,
+  visible,
+  pending,
+  onToggle,
+}: {
+  title: string
+  visible: boolean
+  pending: boolean
+  onToggle: () => void
+}) {
+  return (
+    <Button
+      variant="outline"
+      size="icon-sm"
+      className={cn(visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground")}
+      disabled={pending}
+      aria-busy={pending}
+      aria-pressed={visible}
+      aria-label={`${title} is ${visible ? "visible" : "hidden"}. Change visibility`}
+      onClick={onToggle}
+    >
+      {pending ? <LoaderCircle className="animate-spin-slow" /> : visible ? <Eye /> : <EyeOff />}
+    </Button>
+  )
+}
+
+export function EditLabelsButton({ title, onClick }: { title: string; onClick: () => void }) {
+  return (
+    <Button
+      variant="outline"
+      size="icon-sm"
+      className="border-amber-300 bg-amber-500/10 text-amber-700 hover:bg-amber-500/20 dark:border-amber-400/30 dark:text-amber-300"
+      aria-label={`Edit labels for ${title}`}
+      onClick={onClick}
+    >
+      <Tag />
+    </Button>
+  )
+}
diff --git a/src/features/groups-by-label/combined-groups-table.tsx b/src/features/groups-by-label/combined-groups-table.tsx
index e0dd048..460877d 100644
--- a/src/features/groups-by-label/combined-groups-table.tsx
+++ b/src/features/groups-by-label/combined-groups-table.tsx
@@ -1,21 +1,12 @@
 import { useRouter } from "@tanstack/react-router"
 import { useServerFn } from "@tanstack/react-start"
 import type { Column } from "@tanstack/react-table"
-import {
-  ArrowDown,
-  ArrowUp,
-  ChevronsUpDown,
-  ExternalLink,
-  Eye,
-  EyeOff,
-  LoaderCircle,
-  MessageCircleMore,
-  X,
-} from "lucide-react"
-import { useMemo, useState } from "react"
+import { ArrowDown, ArrowUp, ChevronsUpDown, MessageCircleMore, Pencil } from "lucide-react"
+import { useEffect, useMemo, useState } from "react"
 import { toast } from "sonner"
 
 import { EmptyState } from "@/components/empty-state"
+import { InviteLinkButton, VisibilityToggleButton, EditLabelsButton } from "@/components/group-action-buttons"
 import { Pagination } from "@/components/pagination"
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Badge } from "@/components/ui/badge"
@@ -31,7 +22,6 @@ import { setWhatsappGroupVisibility } from "@/features/whatsapp/groups.functions
 import { useGroupVisibilityToggle } from "@/hooks/use-group-visibility-toggle"
 import type { TgGroup, TgGroupLabel, WaGroup } from "@/lib/api/types"
 import { createAppColumnHelper, type dashboardFeatures, useAppTable } from "@/lib/table"
-import { cn } from "@/lib/utils"
 
 type CombinedGroupRowBase = {
   key: string
@@ -83,10 +73,14 @@ export function CombinedGroupsTable({
   const refreshError = tgRefreshError || waRefreshError
   const [editingKey, setEditingKey] = useState<string | null>(null)
 
-  const displayRows = rows.map((row) =>
-    row.platform === "telegram"
-      ? { ...row, group: { ...row.group, hide: resolveTgHide(row.group.telegramId, row.group.hide) } }
-      : { ...row, group: { ...row.group, hide: resolveWaHide(row.group.id, row.group.hide) } }
+  const displayRows = useMemo(
+    () =>
+      rows.map((row) =>
+        row.platform === "telegram"
+          ? { ...row, group: { ...row.group, hide: resolveTgHide(row.group.telegramId, row.group.hide) } }
+          : { ...row, group: { ...row.group, hide: resolveWaHide(row.group.id, row.group.hide) } }
+      ),
+    [rows, resolveTgHide, resolveWaHide]
   )
   const editingRow = editingKey ? (displayRows.find((row) => row.key === editingKey) ?? null) : null
 
@@ -141,57 +135,36 @@ export function CombinedGroupsTable({
         header: "Labels",
         cell: ({ getValue }) => <GroupLabelBadges labels={getValue()} />,
       }),
-      groupColumnHelper.accessor("link", {
-        header: "",
-        cell: ({ getValue }) => {
-          const link = getValue()
-          return link ? (
-            <a
-              className="rounded-md font-medium text-primary inline-flex items-center outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/25"
-              href={link}
-              target="_blank"
-              rel="noreferrer"
-              onClick={(event) => event.stopPropagation()}
-            >
-              <ExternalLink className="size-4" />
-              <span className="sr-only">Open invite link</span>
-            </a>
-          ) : (
-            <span className="inline-flex text-muted-foreground">
-              <X className="size-4" />
-              <span className="sr-only">Not shared</span>
-            </span>
-          )
-        },
-      }),
       groupColumnHelper.display({
         id: "actions",
         header: "",
         cell: ({ row }) => {
+          const link = row.original.link
+
           if (row.original.platform === "whatsapp") {
             const group = row.original.group
             const pending = waUpdatingId === group.id
             const visible = !group.hide
             return (
-              <div onClick={(event) => event.stopPropagation()} className="flex items-center gap-1.5">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className={cn(
-                    "gap-1 text-xs",
-                    visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground"
-                  )}
-                  disabled={pending}
-                  aria-busy={pending}
-                  aria-pressed={visible}
-                  aria-label={`${group.title} is ${visible ? "visible" : "hidden"}. Change visibility`}
-                  onClick={() => void toggleWaVisibility(group.id, group.title, group.hide)}
-                >
-                  {pending ? <LoaderCircle className="animate-spin-slow" /> : visible ? <Eye /> : <EyeOff />}
-                  {visible ? "Visible" : "Hidden"}
-                </Button>
-                <CreateEditGroupDialog group={group} />
-                <DeleteGroupDialog id={group.id} title={group.title} />
+              <div className="flex items-center justify-end divide-x divide-border">
+                <div className="pr-3">
+                  <InviteLinkButton link={link} />
+                </div>
+                <div className="px-3">
+                  <VisibilityToggleButton
+                    title={group.title}
+                    visible={visible}
+                    pending={pending}
+                    onToggle={() => void toggleWaVisibility(group.id, group.title, group.hide)}
+                  />
+                </div>
+                <div className="flex items-center gap-1.5 px-3">
+                  <CreateEditGroupDialog group={group} />
+                  <EditLabelsButton title={group.title} onClick={() => setEditingKey(row.original.key)} />
+                </div>
+                <div className="pl-3">
+                  <DeleteGroupDialog id={group.id} title={group.title} />
+                </div>
               </div>
             )
           }
@@ -200,20 +173,33 @@ export function CombinedGroupsTable({
           const pending = updatingId === group.telegramId
           const visible = !group.hide
           return (
-            <div onClick={(event) => event.stopPropagation()} className="flex items-center gap-1.5">
-              <Button
-                variant="outline"
-                size="icon-sm"
-                className={cn(visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground")}
-                disabled={pending}
-                aria-busy={pending}
-                aria-pressed={visible}
-                aria-label={`${group.title} is ${visible ? "visible" : "hidden"}. Change visibility`}
-                onClick={() => void toggleVisibility(group.telegramId, group.title, group.hide)}
-              >
-                {pending ? <LoaderCircle className="animate-spin-slow" /> : visible ? <Eye /> : <EyeOff />}
-              </Button>
-              <LeaveGroupDialog chatId={group.telegramId} title={group.title} />
+            <div className="flex items-center justify-end divide-x divide-border">
+              <div className="pr-3">
+                <InviteLinkButton link={link} />
+              </div>
+              <div className="px-3">
+                <VisibilityToggleButton
+                  title={group.title}
+                  visible={visible}
+                  pending={pending}
+                  onToggle={() => void toggleVisibility(group.telegramId, group.title, group.hide)}
+                />
+              </div>
+              <div className="flex items-center gap-1.5 px-3">
+                <Button
+                  variant="outline"
+                  size="icon-sm"
+                  className="border-border bg-muted/30 text-muted-foreground"
+                  disabled
+                  aria-label={`Editing ${group.title} is not available`}
+                >
+                  <Pencil />
+                </Button>
+                <EditLabelsButton title={group.title} onClick={() => setEditingKey(row.original.key)} />
+              </div>
+              <div className="pl-3">
+                <LeaveGroupDialog chatId={group.telegramId} title={group.title} />
+              </div>
             </div>
           )
         },
@@ -227,8 +213,15 @@ export function CombinedGroupsTable({
     data: displayRows,
     getRowId: (row) => row.key,
     initialState: { sorting: [{ id: "title", desc: false }], pagination: { pageIndex: 0, pageSize: 20 } },
+    autoResetPageIndex: false,
   })
 
+  useEffect(() => {
+    const pageCount = table.getPageCount()
+    if (table.state.pagination.pageIndex >= pageCount) table.setPageIndex(Math.max(0, pageCount - 1))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displayRows.length])
+
   const editingGroupRef =
     editingRow?.platform === "telegram"
       ? { id: editingRow.group.telegramId, title: editingRow.title, type: "tg" as const }
@@ -275,19 +268,7 @@ export function CombinedGroupsTable({
               </TableHeader>
               <TableBody>
                 {table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className="cursor-pointer outline-none focus-visible:bg-muted/70 focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/25"
-                    tabIndex={0}
-                    aria-label={`Edit labels for ${row.original.title}`}
-                    onClick={() => setEditingKey(row.original.key)}
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter" || event.key === " ") {
-                        event.preventDefault()
-                        setEditingKey(row.original.key)
-                      }
-                    }}
-                  >
+                  <TableRow key={row.id}>
                     {row.getAllCells().map((cell) => (
                       <TableCell key={cell.id} className="px-4 py-3.5 text-sm">
                         <table.FlexRender cell={cell} />
diff --git a/src/features/telegram/groups-table.tsx b/src/features/telegram/groups-table.tsx
index cd70807..441d1f4 100644
--- a/src/features/telegram/groups-table.tsx
+++ b/src/features/telegram/groups-table.tsx
@@ -1,22 +1,12 @@
 import { useRouter } from "@tanstack/react-router"
 import { useServerFn } from "@tanstack/react-start"
 import type { Column } from "@tanstack/react-table"
-import {
-  ArrowDown,
-  ArrowUp,
-  ChevronsUpDown,
-  ExternalLink,
-  Eye,
-  EyeOff,
-  LoaderCircle,
-  type LucideIcon,
-  MessageCircleMore,
-  X,
-} from "lucide-react"
-import { useMemo, useState } from "react"
+import { ArrowDown, ArrowUp, ChevronsUpDown, type LucideIcon, MessageCircleMore } from "lucide-react"
+import { useEffect, useMemo, useState } from "react"
 import { toast } from "sonner"
 
 import { EmptyState } from "@/components/empty-state"
+import { InviteLinkButton, VisibilityToggleButton, EditLabelsButton } from "@/components/group-action-buttons"
 import { Pagination } from "@/components/pagination"
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Badge } from "@/components/ui/badge"
@@ -29,11 +19,10 @@ import { LeaveGroupDialog } from "@/features/telegram/leave-group-dialog"
 import { useGroupVisibilityToggle } from "@/hooks/use-group-visibility-toggle"
 import type { TgGroup, TgGroupLabel } from "@/lib/api/types"
 import { createAppColumnHelper, type dashboardFeatures, useAppTable } from "@/lib/table"
-import { cn } from "@/lib/utils"
 
 const groupColumnHelper = createAppColumnHelper<TgGroup>()
 
-/** The interactive groups table (visibility toggle, invite link, leave, click-to-edit-labels), given an already-filtered group list. */
+/** The interactive groups table (visibility toggle, invite link, leave, edit labels), given an already-filtered group list. */
 export function GroupsTable({
   groups: loadedGroups,
   allLabels,
@@ -56,10 +45,15 @@ export function GroupsTable({
   )
   const [editingGroup, setEditingGroup] = useState<TgGroup | null>(null)
 
-  const groups = loadedGroups.map((group) => ({
-    ...group,
-    hide: resolveHide(group.telegramId, group.hide),
-  }))
+  // Keep the data reference stable across table-state renders; TanStack Table resets pagination when data changes.
+  const groups = useMemo(
+    () =>
+      loadedGroups.map((group) => ({
+        ...group,
+        hide: resolveHide(group.telegramId, group.hide),
+      })),
+    [loadedGroups, resolveHide]
+  )
 
   const columns = useMemo(() => {
     const sortableHeader = (
@@ -114,30 +108,6 @@ export function GroupsTable({
         header: "Labels",
         cell: ({ row }) => <GroupLabelBadges labels={labelsByGroupId.get(row.original.telegramId) ?? []} />,
       }),
-      groupColumnHelper.display({
-        id: "invite",
-        header: "",
-        cell: ({ row }) => {
-          const link = row.original.link
-          return link ? (
-            <a
-              className="rounded-md font-medium text-primary inline-flex items-center outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/25"
-              href={link}
-              target="_blank"
-              rel="noreferrer"
-              onClick={(event) => event.stopPropagation()}
-            >
-              <ExternalLink className="size-4" />
-              <span className="sr-only">Open invite link</span>
-            </a>
-          ) : (
-            <span className="inline-flex text-muted-foreground">
-              <X className="size-4" />
-              <span className="sr-only">Not shared</span>
-            </span>
-          )
-        },
-      }),
       groupColumnHelper.display({
         id: "actions",
         header: "",
@@ -146,20 +116,24 @@ export function GroupsTable({
           const pending = updatingId === group.telegramId
           const visible = !group.hide
           return (
-            <div onClick={(event) => event.stopPropagation()} className="flex items-center gap-1.5">
-              <Button
-                variant="outline"
-                size="icon-sm"
-                className={cn(visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground")}
-                disabled={pending}
-                aria-busy={pending}
-                aria-pressed={visible}
-                aria-label={`${group.title} is ${visible ? "visible" : "hidden"}. Change visibility`}
-                onClick={() => void toggleVisibility(group.telegramId, group.title, group.hide)}
-              >
-                {pending ? <LoaderCircle className="animate-spin-slow" /> : visible ? <Eye /> : <EyeOff />}
-              </Button>
-              <LeaveGroupDialog chatId={group.telegramId} title={group.title} />
+            <div className="flex items-center justify-end divide-x divide-border">
+              <div className="pr-3">
+                <InviteLinkButton link={group.link} />
+              </div>
+              <div className="px-3">
+                <VisibilityToggleButton
+                  title={group.title}
+                  visible={visible}
+                  pending={pending}
+                  onToggle={() => void toggleVisibility(group.telegramId, group.title, group.hide)}
+                />
+              </div>
+              <div className="px-3">
+                <EditLabelsButton title={group.title} onClick={() => setEditingGroup(group)} />
+              </div>
+              <div className="pl-3">
+                <LeaveGroupDialog chatId={group.telegramId} title={group.title} />
+              </div>
             </div>
           )
         },
@@ -175,8 +149,15 @@ export function GroupsTable({
       sorting: [{ id: "title", desc: false }],
       pagination: { pageIndex: 0, pageSize: 20 },
     },
+    autoResetPageIndex: false,
   })
 
+  useEffect(() => {
+    const pageCount = table.getPageCount()
+    if (table.state.pagination.pageIndex >= pageCount) table.setPageIndex(Math.max(0, pageCount - 1))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groups.length])
+
   return (
     <>
       {mutationError && (
@@ -215,19 +196,7 @@ export function GroupsTable({
               </TableHeader>
               <TableBody>
                 {table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className="cursor-pointer outline-none focus-visible:bg-muted/70 focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/25"
-                    tabIndex={0}
-                    aria-label={`Edit labels for ${row.original.title}`}
-                    onClick={() => setEditingGroup(row.original)}
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter" || event.key === " ") {
-                        event.preventDefault()
-                        setEditingGroup(row.original)
-                      }
-                    }}
-                  >
+                  <TableRow key={row.id}>
                     {row.getAllCells().map((cell) => (
                       <TableCell key={cell.id} className="px-4 py-3.5 text-sm">
                         <table.FlexRender cell={cell} />
diff --git a/src/features/telegram/users-page.tsx b/src/features/telegram/users-page.tsx
index e50a4fa..882ce9f 100644
--- a/src/features/telegram/users-page.tsx
+++ b/src/features/telegram/users-page.tsx
@@ -103,7 +103,10 @@ export function TelegramUsersPage({ users }: { users: TgUser[] }) {
                 {table.getHeaderGroups().map((headerGroup) => (
                   <TableRow key={headerGroup.id} className="border-0 hover:bg-transparent">
                     {headerGroup.headers.map((header) => (
-                      <DataTableHead key={header.id} className="last:w-16">
+                      <DataTableHead
+                        key={header.id}
+                        className={header.column.id === "actions" ? "w-24 text-right" : undefined}
+                      >
                         {header.isPlaceholder ? null : <table.FlexRender header={header} />}
                       </DataTableHead>
                     ))}
@@ -134,7 +137,10 @@ export function TelegramUsersPage({ users }: { users: TgUser[] }) {
                       }}
                     >
                       {row.getAllCells().map((cell) => (
-                        <TableCell key={cell.id} className="px-4 py-3.5 text-sm">
+                        <TableCell
+                          key={cell.id}
+                          className={`px-4 py-3.5 text-sm${cell.column.id === "actions" ? " text-right" : ""}`}
+                        >
                           <table.FlexRender cell={cell} />
                         </TableCell>
                       ))}
diff --git a/src/features/whatsapp/create-edit-group-dialog.tsx b/src/features/whatsapp/create-edit-group-dialog.tsx
index 5a28b13..282a047 100644
--- a/src/features/whatsapp/create-edit-group-dialog.tsx
+++ b/src/features/whatsapp/create-edit-group-dialog.tsx
@@ -107,7 +107,19 @@ export function CreateEditGroupDialog({
         if (!nextOpen) reset()
       }}
     >
-      <DialogTrigger render={group ? <Button variant="outline" size="icon-sm" /> : <Button />}>
+      <DialogTrigger
+        render={
+          group ? (
+            <Button
+              variant="outline"
+              size="icon-sm"
+              className="border-emerald-300 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/20 dark:border-emerald-400/30 dark:text-emerald-300"
+            />
+          ) : (
+            <Button />
+          )
+        }
+      >
         {group ? (
           <>
             <Pencil />
diff --git a/src/features/whatsapp/whatsapp-groups-page.tsx b/src/features/whatsapp/whatsapp-groups-page.tsx
index 14160bc..e4f9fab 100644
--- a/src/features/whatsapp/whatsapp-groups-page.tsx
+++ b/src/features/whatsapp/whatsapp-groups-page.tsx
@@ -1,23 +1,13 @@
 import { useRouter } from "@tanstack/react-router"
 import { useServerFn } from "@tanstack/react-start"
 import type { Column } from "@tanstack/react-table"
-import {
-  ArrowDown,
-  ArrowUp,
-  ChevronsUpDown,
-  ExternalLink,
-  Eye,
-  EyeOff,
-  LoaderCircle,
-  MessageCircleMore,
-  Tag,
-  X,
-} from "lucide-react"
-import { useMemo, useState } from "react"
+import { ArrowDown, ArrowUp, ChevronsUpDown, MessageCircleMore, Tag } from "lucide-react"
+import { useEffect, useMemo, useState } from "react"
 import { toast } from "sonner"
 
 import { DataToolbar } from "@/components/data-toolbar"
 import { EmptyState } from "@/components/empty-state"
+import { InviteLinkButton, VisibilityToggleButton, EditLabelsButton } from "@/components/group-action-buttons"
 import { Pagination } from "@/components/pagination"
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Badge } from "@/components/ui/badge"
@@ -42,7 +32,6 @@ import { setWhatsappGroupVisibility } from "@/features/whatsapp/groups.functions
 import { useGroupVisibilityToggle } from "@/hooks/use-group-visibility-toggle"
 import type { GroupWithLabels, TgGroupLabel, WaGroup } from "@/lib/api/types"
 import { createAppColumnHelper, type dashboardFeatures, useAppTable } from "@/lib/table"
-import { cn } from "@/lib/utils"
 
 function setManyGroupLabels(current: TgGroupLabel[], labels: TgGroupLabel[], select: boolean): TgGroupLabel[] {
   if (select) {
@@ -136,30 +125,6 @@ export function WhatsappGroupsPage({
         header: "Labels",
         cell: ({ row }) => <GroupLabelBadges labels={labelsByGroupId.get(row.original.id) ?? []} />,
       }),
-      groupColumnHelper.display({
-        id: "invite",
-        header: "",
-        cell: ({ row }) => {
-          const link = row.original.link
-          return link ? (
-            <a
-              className="rounded-md font-medium text-primary inline-flex items-center outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/25"
-              href={link}
-              target="_blank"
-              rel="noreferrer"
-              onClick={(event) => event.stopPropagation()}
-            >
-              <ExternalLink className="size-4" />
-              <span className="sr-only">Open invite link</span>
-            </a>
-          ) : (
-            <span className="inline-flex text-muted-foreground">
-              <X className="size-4" />
-              <span className="sr-only">Not shared</span>
-            </span>
-          )
-        },
-      }),
       groupColumnHelper.display({
         id: "actions",
         header: "",
@@ -168,25 +133,25 @@ export function WhatsappGroupsPage({
           const pending = updatingId === group.id
           const visible = !group.hide
           return (
-            <div onClick={(event) => event.stopPropagation()} className="flex items-center gap-1.5">
-              <Button
-                variant="outline"
-                size="sm"
-                className={cn(
-                  "gap-1 text-xs",
-                  visible ? "border-primary/30 bg-accent text-primary" : "text-muted-foreground"
-                )}
-                disabled={pending}
-                aria-busy={pending}
-                aria-pressed={visible}
-                aria-label={`${group.title} is ${visible ? "visible" : "hidden"}. Change visibility`}
-                onClick={() => void toggleVisibility(group.id, group.title, group.hide)}
-              >
-                {pending ? <LoaderCircle className="animate-spin-slow" /> : visible ? <Eye /> : <EyeOff />}
-                {visible ? "Visible" : "Hidden"}
-              </Button>
-              <CreateEditGroupDialog group={group} />
-              <DeleteGroupDialog id={group.id} title={group.title} />
+            <div className="flex items-center justify-end divide-x divide-border">
+              <div className="pr-3">
+                <InviteLinkButton link={group.link} />
+              </div>
+              <div className="px-3">
+                <VisibilityToggleButton
+                  title={group.title}
+                  visible={visible}
+                  pending={pending}
+                  onToggle={() => void toggleVisibility(group.id, group.title, group.hide)}
+                />
+              </div>
+              <div className="flex items-center gap-1.5 px-3">
+                <CreateEditGroupDialog group={group} />
+                <EditLabelsButton title={group.title} onClick={() => setEditingLabelsGroup(group)} />
+              </div>
+              <div className="pl-3">
+                <DeleteGroupDialog id={group.id} title={group.title} />
+              </div>
             </div>
           )
         },
@@ -200,8 +165,15 @@ export function WhatsappGroupsPage({
     data: visibleGroups,
     getRowId: (group) => String(group.id),
     initialState: { sorting: [{ id: "title", desc: false }], pagination: { pageIndex: 0, pageSize: 20 } },
+    autoResetPageIndex: false,
   })
 
+  useEffect(() => {
+    const pageCount = table.getPageCount()
+    if (table.state.pagination.pageIndex >= pageCount) table.setPageIndex(Math.max(0, pageCount - 1))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visibleGroups.length])
+
   return (
     <div className="animate-appear">
       {mutationError && (
@@ -316,19 +288,7 @@ export function WhatsappGroupsPage({
               </TableHeader>
               <TableBody>
                 {table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className="cursor-pointer outline-none focus-visible:bg-muted/70 focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/25"
-                    tabIndex={0}
-                    aria-label={`Edit labels for ${row.original.title}`}
-                    onClick={() => setEditingLabelsGroup(row.original)}
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter" || event.key === " ") {
-                        event.preventDefault()
-                        setEditingLabelsGroup(row.original)
-                      }
-                    }}
-                  >
+                  <TableRow key={row.id}>
                     {row.getAllCells().map((cell) => (
                       <TableCell key={cell.id} className="px-4 py-3.5 text-sm">
                         <table.FlexRender cell={cell} />