diff --git a/packages/features/data-table/components/DataTable.tsx b/packages/features/data-table/components/DataTable.tsx
index c8a218ba560430..2bacfa76ef3119 100644
--- a/packages/features/data-table/components/DataTable.tsx
+++ b/packages/features/data-table/components/DataTable.tsx
@@ -10,10 +10,33 @@ import { usePathname } from "next/navigation";
 import { useEffect, memo } from "react";
 
 import classNames from "@calcom/lib/classNames";
-import { Icon, TableNew, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@calcom/ui";
+import { Icon } from "@calcom/ui";
 
 import { useColumnSizingVars } from "../hooks";
 import { usePersistentColumnResizing } from "../lib/resizing";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./Table";
+
+const getPinningStyles = (column: Column<Item>, isHeader: boolean): CSSProperties => {
+  const isPinned = column.getIsPinned();
+  let zIndex = 0;
+  if (isHeader && isPinned) {
+    zIndex = 20;
+  } else if (isHeader && !isPinned) {
+    zIndex = 10;
+  } else if (!isHeader && isPinned) {
+    zIndex = 1;
+  } else {
+    zIndex = 0;
+  }
+
+  return {
+    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    position: isPinned ? "sticky" : "relative",
+    width: column.getSize(),
+    zIndex,
+  };
+};
 
 export type DataTableProps<TData, TValue> = {
   table: ReactTableType<TData>;
@@ -103,64 +126,106 @@ export function DataTable<TData, TValue>({
         ref={tableContainerRef}
         onScroll={onScroll}
         className={classNames(
-          "relative h-[80dvh] overflow-auto", // Set a fixed height for the container
-          "scrollbar-thin border-subtle relative rounded-md border",
+          "relative w-full",
+          "scrollbar-thin h-[80dvh] overflow-auto", // Set a fixed height for the container
+          "bg-background border-subtle rounded-lg border",
           containerClassName
         )}
         style={{ gridArea: "body" }}>
-        <TableNew
-          className="grid border-0"
+        <Table
+          className={classNames(
+            "[&_td]:border-subtle [&_th]:border-subtle border-separate border-spacing-0 [&_tfoot_td]:border-t [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none",
+            Boolean(enableColumnResizing) && "table-fixed"
+          )}
           style={{
             ...columnSizingVars,
-            ...(Boolean(enableColumnResizing) && { width: table.getTotalSize() }),
+            ...(Boolean(enableColumnResizing) && { width: table.getCenterTotalSize() }),
           }}>
           {!hideHeader && (
             <TableHeader className="sticky top-0 z-10">
               {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id} className="hover:bg-subtle flex w-full">
+                <TableRow key={headerGroup.id} className="hover:bg-transparent">
                   {headerGroup.headers.map((header) => {
                     const meta = header.column.columnDef.meta;
+                    const { column } = header;
+                    const isPinned = column.getIsPinned();
+                    const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
+                    const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
+
                     return (
                       <TableHead
                         key={header.id}
+                        className="bg-muted relative h-10 select-none [&>.cursor-col-resize]:last:opacity-0"
+                        aria-sort={
+                          header.column.getIsSorted() === "asc"
+                            ? "ascending"
+                            : header.column.getIsSorted() === "desc"
+                            ? "descending"
+                            : "none"
+                        }
+                        data-pinned={isPinned || undefined}
+                        data-last-col={isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined}
                         style={{
-                          ...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
-                          ...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
+                          ...getPinningStyles(column, true),
                           width: `var(--header-${kebabCase(header?.id)}-size)`,
-                        }}
-                        className={classNames(
-                          "relative flex shrink-0 items-center",
-                          header.column.getCanSort()
-                            ? "bg-subtle hover:bg-muted cursor-pointer select-none"
-                            : "",
-                          meta?.sticky && "top-0 z-20 sm:sticky"
-                        )}>
-                        <div
-                          className="flex h-full w-full items-center overflow-hidden"
-                          onClick={header.column.getToggleSortingHandler()}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(header.column.columnDef.header, header.getContext())}
-                          {header.column.getIsSorted() && (
-                            <Icon
-                              name="arrow-up"
-                              className="ml-2 h-4 w-4"
-                              style={{
-                                transform:
-                                  header.column.getIsSorted() === "asc" ? "rotate(0deg)" : "rotate(180deg)",
-                                transition: "transform 0.2s ease-in-out",
+                        }}>
+                        <div>
+                          {header.isPlaceholder ? null : (
+                            <div
+                              className={classNames(
+                                header.column.getCanSort() &&
+                                  "flex h-full cursor-pointer select-none items-center justify-between gap-2"
+                              )}
+                              onClick={header.column.getToggleSortingHandler()}
+                              onKeyDown={(e) => {
+                                // Enhanced keyboard handling for sorting
+                                if (header.column.getCanSort() && (e.key === "Enter" || e.key === " ")) {
+                                  e.preventDefault();
+                                  header.column.getToggleSortingHandler()?.(e);
+                                }
                               }}
-                            />
+                              tabIndex={header.column.getCanSort() ? 0 : undefined}>
+                              <span className="truncate">
+                                {flexRender(header.column.columnDef.header, header.getContext())}
+                              </span>
+                              {{
+                                asc: (
+                                  <Icon
+                                    name="chevron-up"
+                                    size={16}
+                                    className="mr-2 shrink-0 opacity-60"
+                                    strokeWidth={2}
+                                    aria-hidden="true"
+                                  />
+                                ),
+                                desc: (
+                                  <Icon
+                                    name="chevron-down"
+                                    size={16}
+                                    className="mr-2 shrink-0 opacity-60"
+                                    strokeWidth={2}
+                                    aria-hidden="true"
+                                  />
+                                ),
+                              }[header.column.getIsSorted() as string] ?? null}
+                            </div>
+                          )}
+                          {Boolean(enableColumnResizing) && header.column.getCanResize() && (
+                            <div
+                              onMouseDown={header.getResizeHandler()}
+                              onTouchStart={header.getResizeHandler()}
+                              className={classNames(
+                                "group absolute right-0 top-0 h-full cursor-col-resize touch-none select-none px-2"
+                              )}>
+                              <div className="bg-subtle group-hover:bg-inverted h-full w-[1px]" />
+                            </div>
                           )}
                         </div>
                         {Boolean(enableColumnResizing) && header.column.getCanResize() && (
                           <div
                             onMouseDown={header.getResizeHandler()}
                             onTouchStart={header.getResizeHandler()}
-                            className={classNames(
-                              "bg-inverted absolute right-0 top-0 h-full w-[5px] cursor-col-resize touch-none select-none opacity-0 hover:opacity-50",
-                              header.column.getIsResizing() && "!opacity-75"
-                            )}
+                            className={classNames(header.column.getIsResizing() && "!opacity-75")}
                           />
                         )}
                       </TableHead>
@@ -192,7 +257,7 @@ export function DataTable<TData, TValue>({
               onRowMouseclick={onRowMouseclick}
             />
           )}
-        </TableNew>
+        </Table>
       </div>
       {children}
     </div>
@@ -232,10 +297,7 @@ function DataTableBody<TData>({
 }: DataTableBodyProps<TData>) {
   const virtualRows = rowVirtualizer.getVirtualItems();
   return (
-    <TableBody
-      className="relative grid"
-      data-testid={testId}
-      style={{ height: `${rowVirtualizer.getTotalSize()}px` }}>
+    <TableBody data-testid={testId} style={{ height: `${rowVirtualizer.getTotalSize()}px` }}>
       {virtualRows && !isPending ? (
         virtualRows.map((virtualRow) => {
           const row = rows[virtualRow.index] as Row<TData>;
@@ -245,31 +307,34 @@ function DataTableBody<TData>({
               key={row.id}
               data-index={virtualRow.index} //needed for dynamic row height measurement
               data-state={row.getIsSelected() && "selected"}
-              onClick={() => onRowMouseclick && onRowMouseclick(row)}
               style={{
                 display: "flex",
                 position: "absolute",
                 transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
                 width: "100%",
               }}
-              className={classNames(onRowMouseclick && "hover:cursor-pointer", "group")}>
+              className={classNames(
+                onRowMouseclick && "hover:cursor-pointer",
+                "has-[[data-state=selected]]:bg-muted/50 group"
+              )}
+              onClick={() => onRowMouseclick && onRowMouseclick(row)}>
               {row.getVisibleCells().map((cell) => {
                 const column = table.getColumn(cell.column.id);
                 const meta = column?.columnDef.meta;
+                const isPinned = column.getIsPinned();
+                const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
+                const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
+
                 return (
                   <TableCell
                     key={cell.id}
+                    className="[&[data-pinned]]:bg-default truncate [&[data-pinned]]:backdrop-blur-sm"
+                    data-pinned={isPinned || undefined}
+                    data-last-col={isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined}
                     style={{
-                      ...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
-                      ...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
+                      ...getPinningStyles(column, false),
                       width: `var(--col-${kebabCase(cell.column.id)}-size)`,
-                    }}
-                    className={classNames(
-                      "flex shrink-0 items-center overflow-hidden",
-                      variant === "compact" && "p-0",
-                      meta?.sticky &&
-                        "bg-default group-hover:!bg-muted group-data-[state=selected]:bg-subtle sm:sticky"
-                    )}>
+                    }}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 );
diff --git a/packages/features/data-table/components/Table.tsx b/packages/features/data-table/components/Table.tsx
new file mode 100644
index 00000000000000..c753592fa02d0c
--- /dev/null
+++ b/packages/features/data-table/components/Table.tsx
@@ -0,0 +1,84 @@
+import * as React from "react";
+
+import { classNames as cn } from "@calcom/lib";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+  )
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn(className)} {...props} />
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn("grid", "[&_tr:last-child]:border-0", className)} {...props} />
+  )
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot
+      ref={ref}
+      className={cn("border-border bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-border hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "text-muted-foreground h-12 px-3 text-left align-middle font-medium [&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn(
+        "p-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
+  )
+);
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
diff --git a/packages/features/package.json b/packages/features/package.json
index 199222d951f3e5..d8258072de96dc 100644
--- a/packages/features/package.json
+++ b/packages/features/package.json
@@ -12,7 +12,7 @@
     "@calcom/trpc": "*",
     "@calcom/ui": "*",
     "@lexical/react": "^0.9.0",
-    "@tanstack/react-table": "^8.9.3",
+    "@tanstack/react-table": "^8.20.6",
     "@tanstack/react-virtual": "^3.10.9",
     "@vercel/functions": "^1.4.0",
     "framer-motion": "^10.12.8",
diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx
index b35c407223ac7a..5b26ac42386385 100644
--- a/packages/features/users/components/UserTable/UserListTable.tsx
+++ b/packages/features/users/components/UserTable/UserListTable.tsx
@@ -265,11 +265,6 @@ function UserListTableContent() {
         enableSorting: false,
         enableResizing: false,
         size: 30,
-        meta: {
-          sticky: {
-            position: "left",
-          },
-        },
         header: ({ table }) => (
           <Checkbox
             checked={table.getIsAllPageRowsSelected()}
@@ -296,9 +291,6 @@ function UserListTableContent() {
         header: () => {
           return `Members`;
         },
-        meta: {
-          sticky: { position: "left", gap: 24 },
-        },
         cell: ({ row }) => {
           const { username, email, avatarUrl } = row.original;
           return (
@@ -411,9 +403,6 @@ function UserListTableContent() {
         enableSorting: false,
         enableResizing: false,
         size: 80,
-        meta: {
-          sticky: { position: "right" },
-        },
         cell: ({ row }) => {
           const user = row.original;
           const permissionsRaw = permissions;
@@ -452,6 +441,10 @@ function UserListTableContent() {
     manualPagination: true,
     initialState: {
       columnVisibility: initalColumnVisibility,
+      columnPinning: {
+        left: ["select", "member"],
+        right: ["actions"],
+      },
     },
     defaultColumn: {
       size: 150,
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c9b6be02c06122..e86c53a59bc742 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -78,7 +78,7 @@
     "@storybook/blocks": "^7.6.3",
     "@storybook/react": "^7.6.3",
     "@tanstack/react-query": "^5.17.15",
-    "@tanstack/react-table": "^8.9.3",
+    "@tanstack/react-table": "^8.20.6",
     "@wojtekmaj/react-daterange-picker": "^3.3.1",
     "class-variance-authority": "^0.4.0",
     "cmdk": "^0.2.0",