diff --git a/apps/web/app/settings/platform/managed-users/page.tsx b/apps/web/app/settings/platform/managed-users/page.tsx
new file mode 100644
index 0000000000..17cb3b45de
--- /dev/null
+++ b/apps/web/app/settings/platform/managed-users/page.tsx
@@ -0,0 +1,14 @@
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import ManagedUsersView from "~/settings/platform/managed-users/managed-users-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("platform_members"),
+    (t) => t("platform_members_description")
+  );
+
+export default WithLayout({
+  Page: ManagedUsersView,
+});
diff --git a/apps/web/components/settings/platform/dashboard/managed-user-header/index.tsx b/apps/web/components/settings/platform/dashboard/managed-user-header/index.tsx
deleted file mode 100644
index 40a7ece0c1..0000000000
--- a/apps/web/components/settings/platform/dashboard/managed-user-header/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { PlatformOAuthClient } from "@calcom/prisma/client";
-
-import { OAuthClientsDropdown } from "@components/settings/platform/dashboard/oauth-client-dropdown";
-
-type ManagedUserHeaderProps = {
-  oauthClients: PlatformOAuthClient[];
-  initialClientName: string;
-  handleChange: (clientId: string, clientName: string) => void;
-};
-
-export const ManagedUserHeader = ({
-  oauthClients,
-  initialClientName,
-  handleChange,
-}: ManagedUserHeaderProps) => {
-  return (
-    <div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
-      <div className="flex w-full flex-col">
-        <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">
-          Managed Users
-        </h1>
-        <p className="text-default text-sm ltr:mr-4 rtl:ml-4">
-          See all the managed users created by your OAuth client.
-        </p>
-      </div>
-      <OAuthClientsDropdown
-        oauthClients={oauthClients}
-        initialClientName={initialClientName}
-        handleChange={handleChange}
-      />
-    </div>
-  );
-};
diff --git a/apps/web/components/settings/platform/dashboard/managed-user-list/index.tsx b/apps/web/components/settings/platform/dashboard/managed-user-list/index.tsx
deleted file mode 100644
index 341e19a073..0000000000
--- a/apps/web/components/settings/platform/dashboard/managed-user-list/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { PlatformOAuthClient } from "@calcom/prisma/client";
-
-import type { ManagedUser } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
-
-import { ManagedUserHeader } from "@components/settings/platform/dashboard/managed-user-header";
-import { ManagedUserTable } from "@components/settings/platform/dashboard/managed-user-table";
-
-type ManagedUserListProps = {
-  oauthClients: PlatformOAuthClient[];
-  managedUsers?: ManagedUser[];
-  initialClientName: string;
-  initialClientId: string;
-  isManagedUserLoading: boolean;
-  handleChange: (clientId: string, clientName: string) => void;
-};
-
-export const ManagedUserList = ({
-  initialClientName,
-  initialClientId,
-  oauthClients,
-  managedUsers,
-  isManagedUserLoading,
-  handleChange,
-}: ManagedUserListProps) => {
-  return (
-    <div>
-      <ManagedUserHeader
-        oauthClients={oauthClients}
-        initialClientName={initialClientName}
-        handleChange={handleChange}
-      />
-      <ManagedUserTable
-        managedUsers={managedUsers}
-        isManagedUserLoading={isManagedUserLoading}
-        initialClientId={initialClientId}
-      />
-    </div>
-  );
-};
diff --git a/apps/web/components/settings/platform/dashboard/managed-user-table/index.tsx b/apps/web/components/settings/platform/dashboard/managed-user-table/index.tsx
deleted file mode 100644
index af32a422e2..0000000000
--- a/apps/web/components/settings/platform/dashboard/managed-user-table/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { EmptyScreen } from "@calcom/ui";
-
-import type { ManagedUser } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
-
-type ManagedUserTableProps = {
-  managedUsers?: ManagedUser[];
-  isManagedUserLoading: boolean;
-  initialClientId: string;
-};
-
-export const ManagedUserTable = ({
-  managedUsers,
-  isManagedUserLoading,
-  initialClientId,
-}: ManagedUserTableProps) => {
-  const showUsers = !isManagedUserLoading && managedUsers?.length;
-
-  return (
-    <div>
-      {showUsers ? (
-        <>
-          <table className="w-[100%] rounded-lg">
-            <colgroup className="border-subtle overflow-hidden rounded-b-lg border border-b-0" span={3} />
-            <tr>
-              <td className="border-subtle border px-4 py-3 md:text-center">Id</td>
-              <td className="border-subtle border px-4 py-3 md:text-center">Username</td>
-              <td className="border-subtle border px-4 py-3 md:text-center">Email</td>
-            </tr>
-            {managedUsers.map((user) => {
-              return (
-                <tr key={user.id} className="">
-                  <td className="border-subtle overflow-hidden border px-4 py-3 md:text-center">{user.id}</td>
-                  <td className="border-subtle border px-4 py-3 md:text-center">{user.username}</td>
-                  <td className="border-subtle overflow-hidden border px-4 py-3 md:overflow-auto md:text-center">
-                    {user.email}
-                  </td>
-                </tr>
-              );
-            })}
-          </table>
-        </>
-      ) : (
-        <EmptyScreen
-          limitWidth={false}
-          headline={
-            initialClientId == undefined
-              ? "OAuth client is missing. You need to create an OAuth client first in order to create a managed user."
-              : `OAuth client ${initialClientId} does not have a managed user present.`
-          }
-          description={
-            initialClientId == undefined
-              ? "Refer to the Platform Docs from the sidebar in order to create an OAuth client."
-              : "Refer to the Platform Docs from the sidebar in order to create a managed user."
-          }
-          className="items-center border"
-        />
-      )}
-    </div>
-  );
-};
diff --git a/apps/web/components/settings/platform/dashboard/oauth-client-dropdown/index.tsx b/apps/web/components/settings/platform/dashboard/oauth-client-dropdown/index.tsx
deleted file mode 100644
index 17ec4c366a..0000000000
--- a/apps/web/components/settings/platform/dashboard/oauth-client-dropdown/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { PlatformOAuthClient } from "@calcom/prisma/client";
-import {
-  Button,
-  Dropdown,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownItem,
-} from "@calcom/ui";
-
-type OAuthClientsDropdownProps = {
-  oauthClients: PlatformOAuthClient[];
-  initialClientName: string;
-  handleChange: (clientId: string, clientName: string) => void;
-};
-
-export const OAuthClientsDropdown = ({
-  oauthClients,
-  initialClientName,
-  handleChange,
-}: OAuthClientsDropdownProps) => {
-  return (
-    <div>
-      {Array.isArray(oauthClients) && oauthClients.length > 0 ? (
-        <Dropdown modal={false}>
-          <DropdownMenuTrigger asChild>
-            <Button color="secondary" EndIcon="chevron-down">
-              {initialClientName}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            {oauthClients.map((client) => {
-              return (
-                <div key={client.id}>
-                  {initialClientName !== client.name ? (
-                    <DropdownMenuItem className="outline-none">
-                      <DropdownItem type="button" onClick={() => handleChange(client.id, client.name)}>
-                        {client.name}
-                      </DropdownItem>
-                    </DropdownMenuItem>
-                  ) : (
-                    <></>
-                  )}
-                </div>
-              );
-            })}
-          </DropdownMenuContent>
-        </Dropdown>
-      ) : null}
-    </div>
-  );
-};
diff --git a/apps/web/modules/settings/platform/managed-users/managed-users-view.tsx b/apps/web/modules/settings/platform/managed-users/managed-users-view.tsx
new file mode 100644
index 0000000000..2311267920
--- /dev/null
+++ b/apps/web/modules/settings/platform/managed-users/managed-users-view.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import Shell from "@calcom/features/shell/Shell";
+import { PlatformManagedUsersTable } from "@calcom/features/users/components/UserTable/PlatformManagedUsersTable";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Select, Skeleton, SkeletonContainer, SkeletonText, Label } from "@calcom/ui";
+
+import { useOAuthClients } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
+
+type OAuthClientOption = { label: string; value: string };
+
+const ManagedUsersView = () => {
+  const { t } = useLocale();
+  const { data: OAuthClientsQueryData, error, isLoading: isOAuthClientLoading } = useOAuthClients();
+
+  const oAuthClientOptions: OAuthClientOption[] = useMemo(
+    () =>
+      OAuthClientsQueryData.map((client) => ({
+        label: client.name,
+        value: client.id,
+      })),
+    [OAuthClientsQueryData]
+  );
+
+  const [oAuthClient, setOAuthClient] = useState<OAuthClientOption | null>(oAuthClientOptions[0] || null);
+
+  const ManagedUsersSkeletonLoader = () => {
+    return (
+      <div className="flex">
+        <div className="w-1/4 p-4" />
+        <div className="flex-1 p-6">
+          <SkeletonContainer>
+            <div className="mb-4 flex justify-between">
+              <SkeletonText className="mb-2 h-6 w-1/3" />
+              <SkeletonText className="h-6 w-1/5" />
+            </div>
+            <div className="mb-4">
+              <SkeletonText className="h-8 w-1/2 rounded-md" />
+            </div>
+            <div className="border-subtle flex items-center border-b py-3">
+              <SkeletonText className="h-6 w-1/4" />
+              <SkeletonText className="ml-4 h-6 w-1/5" />
+              <SkeletonText className="ml-4 h-6 w-1/5" />
+            </div>
+
+            <div className="mt-4">
+              <SkeletonText className="mx-auto h-4 w-1/3" />
+            </div>
+          </SkeletonContainer>
+        </div>
+      </div>
+    );
+  };
+
+  if (isOAuthClientLoading) {
+    return <ManagedUsersSkeletonLoader />;
+  }
+
+  if (error) {
+    return <div className="m-5 text-red-500">{t("Failed to load OAuth clients.")}</div>;
+  }
+
+  if (!OAuthClientsQueryData.length) {
+    return (
+      <div className="m-5">{t("No OAuth clients available. Please create one to view managed users.")}</div>
+    );
+  }
+
+  return (
+    <Shell
+      heading={t("managed_users")}
+      subtitle={t("managed_users_description")}
+      title={t("managed_users")}
+      description={t("managed_users_description")}
+      hideHeadingOnMobile
+      withoutMain={false}
+      isPlatformUser={true}>
+      <Skeleton as={Label} loadingClassName="w-16" title={t("select_oAuth_client")}>
+        {t("select_oAuth_client")}
+      </Skeleton>
+      <Select
+        className="z-20 mb-4 w-40"
+        options={oAuthClientOptions}
+        value={oAuthClient}
+        isSearchable={false}
+        onChange={(client) => client && setOAuthClient(client)}
+      />
+      {oAuthClient && <PlatformManagedUsersTable oAuthClientId={oAuthClient.value} />}
+    </Shell>
+  );
+};
+
+export default ManagedUsersView;
diff --git a/apps/web/modules/settings/platform/platform-view.tsx b/apps/web/modules/settings/platform/platform-view.tsx
index 50ade1b954..5a8465d5d5 100644
--- a/apps/web/modules/settings/platform/platform-view.tsx
+++ b/apps/web/modules/settings/platform/platform-view.tsx
@@ -7,15 +7,11 @@ import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { showToast } from "@calcom/ui";
 
-import {
-  useOAuthClients,
-  useGetOAuthClientManagedUsers,
-} from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
+import { useOAuthClients } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
 import { useDeleteOAuthClient } from "@lib/hooks/settings/platform/oauth-clients/usePersistOAuthClient";
 
 import { HelpCards } from "@components/settings/platform/dashboard/HelpCards";
 import NoPlatformPlan from "@components/settings/platform/dashboard/NoPlatformPlan";
-import { ManagedUserList } from "@components/settings/platform/dashboard/managed-user-list";
 import { OAuthClientsList } from "@components/settings/platform/dashboard/oauth-clients-list";
 import { useGetUserAttributes } from "@components/settings/platform/hooks/useGetUserAttributes";
 import { PlatformPricing } from "@components/settings/platform/pricing/platform-pricing";
@@ -28,11 +24,6 @@ export default function Platform() {
   const [initialClientName, setInitialClientName] = useState("");
 
   const { data, isLoading: isOAuthClientLoading, refetch: refetchClients } = useOAuthClients();
-  const {
-    isLoading: isManagedUserLoading,
-    data: managedUserData,
-    refetch: refetchManagedUsers,
-  } = useGetOAuthClientManagedUsers(initialClientId);
 
   const { isUserLoading, isUserBillingDataLoading, isPlatformUser, isPaidUser, userBillingData, userOrgId } =
     useGetUserAttributes();
@@ -41,7 +32,6 @@ export default function Platform() {
     onSuccess: () => {
       showToast(t("oauth_client_deletion_message"), "success");
       refetchClients();
-      refetchManagedUsers();
     },
   });
 
@@ -87,18 +77,6 @@ export default function Platform() {
             isPlatformUser={true}>
             <HelpCards />
             <OAuthClientsList oauthClients={data} isDeleting={isDeleting} handleDelete={handleDelete} />
-            <ManagedUserList
-              oauthClients={data}
-              managedUsers={managedUserData}
-              isManagedUserLoading={isManagedUserLoading}
-              initialClientName={initialClientName}
-              initialClientId={initialClientId}
-              handleChange={(id: string, name: string) => {
-                setInitialClientId(id);
-                setInitialClientName(name);
-                refetchManagedUsers();
-              }}
-            />
           </Shell>
         </div>
       </QueryClientProvider>
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 7a1877a9f5..5e4accb1db 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -2920,5 +2920,8 @@
   "choose_an_option": "Choose an option",
   "enter_option_value": "Enter option value",
   "remove_option": "Remove option",
+  "managed_users": "Managed Users",
+  "managed_users_description": "See all the managed users created by your OAuth client",
+  "select_oAuth_client": "Select Oauth Client",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
\ No newline at end of file
diff --git a/packages/features/shell/navigation/Navigation.tsx b/packages/features/shell/navigation/Navigation.tsx
index 101734fbc5..385cc0f091 100644
--- a/packages/features/shell/navigation/Navigation.tsx
+++ b/packages/features/shell/navigation/Navigation.tsx
@@ -167,6 +167,12 @@ const platformNavigationItems: NavigationItemType[] = [
     icon: "users",
     moreOnMobile: true,
   },
+  {
+    name: "Managed Users",
+    href: "/settings/platform/managed-users",
+    icon: "users",
+    moreOnMobile: true,
+  },
 ];
 
 const useNavigationItems = (isPlatformNavigation = false) => {
diff --git a/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx b/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx
index 55b7619d50..4d6bf4d7bb 100644
--- a/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx
+++ b/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx
@@ -6,7 +6,7 @@ import { ConfirmationDialogContent, Dialog, DialogTrigger, showToast } from "@ca
 import type { UserTableUser } from "../types";
 
 interface Props {
-  users: UserTableUser[];
+  users: Array<{ id: UserTableUser["id"] }>;
   onRemove: () => void;
 }
 
diff --git a/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx b/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
new file mode 100644
index 0000000000..d0d49c7387
--- /dev/null
+++ b/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
@@ -0,0 +1,359 @@
+"use client";
+
+import { keepPreviousData } from "@tanstack/react-query";
+import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table";
+import { useMemo, useReducer, useRef, useState } from "react";
+
+import {
+  DataTableProvider,
+  DataTable,
+  DataTableToolbar,
+  DataTableFilters,
+  DataTableSelectionBar,
+  DataTablePagination,
+  useColumnFilters,
+  useFetchMoreOnBottomReached,
+} from "@calcom/features/data-table";
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc";
+import { Avatar, Badge, Checkbox, SkeletonText } from "@calcom/ui";
+
+import { DeleteBulkUsers } from "./BulkActions/DeleteBulkUsers";
+import { DeleteMemberModal } from "./DeleteMemberModal";
+import type { UserTableState, UserTableAction, PlatformManagedUserTableUser } from "./types";
+
+const initialState: UserTableState = {
+  changeMemberRole: {
+    showModal: false,
+  },
+  deleteMember: {
+    showModal: false,
+  },
+  impersonateMember: {
+    showModal: false,
+  },
+  inviteMember: {
+    showModal: false,
+  },
+  editSheet: {
+    showModal: false,
+  },
+};
+
+const initalColumnVisibility = {
+  select: true,
+  member: true,
+  role: true,
+  teams: true,
+  actions: true,
+};
+
+type PlatformManagedUsersTableProps = {
+  oAuthClientId: string;
+};
+
+export function PlatformManagedUsersTable(props: PlatformManagedUsersTableProps) {
+  return (
+    <DataTableProvider>
+      <UserListTableContent {...props} />
+    </DataTableProvider>
+  );
+}
+
+function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps) {
+  const { t } = useLocale();
+
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [rowSelection, setRowSelection] = useState({});
+
+  const columnFilters = useColumnFilters();
+
+  const { data, isPending, hasNextPage, fetchNextPage, isFetching } =
+    trpc.viewer.organizations.listMembers.useInfiniteQuery(
+      {
+        limit: 30,
+        searchTerm: debouncedSearchTerm,
+        filters: columnFilters,
+        oAuthClientId,
+      },
+      {
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+        placeholderData: keepPreviousData,
+        enabled: !!oAuthClientId,
+      }
+    );
+
+  const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0;
+
+  //we must flatten the array of arrays from the useInfiniteQuery hook
+  const flatData = useMemo(
+    () => data?.pages?.flatMap((page) => page.rows) ?? [],
+    [data]
+  ) as PlatformManagedUserTableUser[];
+
+  const columns = useMemo(() => {
+    const cols: ColumnDef<PlatformManagedUserTableUser>[] = [
+      // Disabling select for this PR: Will work on actions etc in a follow up
+      {
+        id: "select",
+        enableHiding: false,
+        enableSorting: false,
+        enableResizing: false,
+        size: 30,
+        meta: {
+          sticky: {
+            position: "left",
+          },
+        },
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label="Select all"
+            className="translate-y-[2px]"
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+            className="translate-y-[2px]"
+          />
+        ),
+      },
+      {
+        id: "member",
+        accessorFn: (data) => data.email,
+        enableHiding: false,
+        size: 200,
+        header: () => {
+          return `Managed Users`;
+        },
+        meta: {
+          sticky: { position: "left", gap: 24 },
+        },
+        cell: ({ row }) => {
+          if (isPending) {
+            return <SkeletonText className="h-6 w-1/4" />;
+          }
+          const { username, email, avatarUrl } = row.original;
+          return (
+            <div className="flex items-center gap-2">
+              <Avatar
+                size="sm"
+                alt={username || email}
+                imageSrc={getUserAvatarUrl({
+                  avatarUrl,
+                })}
+              />
+              <div className="">
+                <div
+                  data-testid={`member-${username}-username`}
+                  className="text-emphasis text-sm font-medium leading-none">
+                  {username || "No username"}
+                </div>
+                <div
+                  data-testid={`member-${username}-email`}
+                  className="text-subtle mt-1 text-sm leading-none">
+                  {email}
+                </div>
+              </div>
+            </div>
+          );
+        },
+        filterFn: (rows, id, filterValue) => {
+          const userEmail = rows.original.email;
+          return filterValue.includes(userEmail);
+        },
+      },
+      {
+        id: "role",
+        accessorFn: (data) => data.role,
+        header: "Role",
+        size: 100,
+        cell: ({ row, table }) => {
+          if (isPending) {
+            return <SkeletonText className="h-6 w-1/4" />;
+          }
+          const { role, username } = row.original;
+          return (
+            <Badge
+              data-testid={`member-${username}-role`}
+              variant={role === "MEMBER" ? "gray" : "blue"}
+              onClick={() => {
+                table.getColumn("role")?.setFilterValue([role]);
+              }}>
+              {role}
+            </Badge>
+          );
+        },
+        filterFn: (rows, id, filterValue) => {
+          if (filterValue.includes("PENDING")) {
+            if (filterValue.length === 1) return !rows.original.accepted;
+            else return !rows.original.accepted || filterValue.includes(rows.getValue(id));
+          }
+
+          // Show only the selected roles
+          return filterValue.includes(rows.getValue(id));
+        },
+      },
+      {
+        id: "teams",
+        accessorFn: (data) => data.teams.map((team) => team.name),
+        header: "Teams",
+        size: 140,
+        cell: ({ row, table }) => {
+          if (isPending) {
+            return <SkeletonText className="h-6 w-1/4" />;
+          }
+          const { teams, accepted, email, username } = row.original;
+          // TODO: Implement click to filter
+          return (
+            <div className="flex h-full flex-wrap items-center gap-2">
+              {accepted ? null : (
+                <Badge
+                  data-testid2={`member-${username}-pending`}
+                  variant="red"
+                  className="text-xs"
+                  data-testid={`email-${email.replace("@", "")}-pending`}
+                  onClick={() => {
+                    table.getColumn("role")?.setFilterValue(["PENDING"]);
+                  }}>
+                  Pending
+                </Badge>
+              )}
+
+              {teams.map((team) => (
+                <Badge
+                  key={team.id}
+                  variant="gray"
+                  onClick={() => {
+                    table.getColumn("teams")?.setFilterValue([team.name]);
+                  }}>
+                  {team.name}
+                </Badge>
+              ))}
+            </div>
+          );
+        },
+        filterFn: (rows, _, filterValue: string[]) => {
+          const teamNames = rows.original.teams.map((team) => team.name);
+          return filterValue.some((value: string) => teamNames.includes(value));
+        },
+      },
+    ];
+    return cols;
+  }, [isPending]);
+
+  const table = useReactTable({
+    data: flatData,
+    columns,
+    enableRowSelection: true,
+    columnResizeMode: "onChange",
+    debugTable: true,
+    manualPagination: true,
+    initialState: {
+      columnVisibility: initalColumnVisibility,
+    },
+    defaultColumn: {
+      size: 150,
+    },
+    state: {
+      columnFilters,
+      rowSelection,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onRowSelectionChange: setRowSelection,
+    getRowId: (row) => `${row.id}`,
+  });
+
+  function reducer(state: UserTableState, action: UserTableAction): UserTableState {
+    switch (action.type) {
+      case "SET_CHANGE_MEMBER_ROLE_ID":
+        return { ...state, changeMemberRole: action.payload };
+      case "SET_DELETE_ID":
+        return { ...state, deleteMember: action.payload };
+      case "SET_IMPERSONATE_ID":
+        return { ...state, impersonateMember: action.payload };
+      case "INVITE_MEMBER":
+        return { ...state, inviteMember: action.payload };
+      case "EDIT_USER_SHEET":
+        return { ...state, editSheet: action.payload };
+      case "CLOSE_MODAL":
+        return {
+          ...state,
+          changeMemberRole: { showModal: false },
+          deleteMember: { showModal: false },
+          impersonateMember: { showModal: false },
+          inviteMember: { showModal: false },
+          editSheet: { showModal: false },
+        };
+      default:
+        return state;
+    }
+  }
+
+  const fetchMoreOnBottomReached = useFetchMoreOnBottomReached({
+    tableContainerRef,
+    hasNextPage,
+    fetchNextPage,
+    isFetching,
+  });
+
+  const numberOfSelectedRows = useMemo(() => table.getSelectedRowModel().rows.length, [table]);
+
+  return (
+    <>
+      <DataTable
+        data-testid="managed-user-list-data-table"
+        table={table}
+        tableContainerRef={tableContainerRef}
+        isPending={isPending}
+        enableColumnResizing={true}
+        onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}>
+        <DataTableToolbar.Root>
+          <div className="flex w-full flex-col gap-2 sm:flex-row">
+            <div className="w-full sm:w-auto sm:min-w-[200px] sm:flex-1">
+              <DataTableToolbar.SearchBar
+                table={table}
+                onSearch={(value) => setDebouncedSearchTerm(value)}
+                className="sm:max-w-64 max-w-full"
+              />
+            </div>
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              {/* We have to omit member because we don't want the filter to show but we can't disable filtering as we need that for the search bar */}
+              <DataTableFilters.AddFilterButton table={table} />
+              <DataTableFilters.ColumnVisibilityButton table={table} />
+            </div>
+          </div>
+          <div className="flex gap-2 justify-self-start">
+            <DataTableFilters.ActiveFilters table={table} />
+          </div>
+        </DataTableToolbar.Root>
+
+        <div style={{ gridArea: "footer", marginTop: "1rem" }}>
+          <DataTablePagination table={table} totalDbDataCount={totalDBRowCount} />
+        </div>
+
+        {numberOfSelectedRows > 0 && (
+          <DataTableSelectionBar.Root className="justify-center">
+            <p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
+              {t("number_selected", { count: numberOfSelectedRows })}
+            </p>
+            <DeleteBulkUsers
+              users={table.getSelectedRowModel().flatRows.map((row) => row.original)}
+              onRemove={() => table.toggleAllPageRowsSelected(false)}
+            />
+          </DataTableSelectionBar.Root>
+        )}
+      </DataTable>
+      {state.deleteMember.showModal && <DeleteMemberModal state={state} dispatch={dispatch} />}
+    </>
+  );
+}
diff --git a/packages/features/users/components/UserTable/types.ts b/packages/features/users/components/UserTable/types.ts
index 785e061ca5..cd92f7347d 100644
--- a/packages/features/users/components/UserTable/types.ts
+++ b/packages/features/users/components/UserTable/types.ts
@@ -26,11 +26,21 @@ export interface UserTableUser {
   }[];
 }
 
+export type PlatformManagedUserTableUser = Omit<
+  UserTableUser,
+  "lastActiveAt" | "attributes" | "completedOnboarding" | "disableImpersonation"
+>;
+
 export type UserTablePayload = {
   showModal: boolean;
   user?: UserTableUser;
 };
 
+export type PlatformUserTablePayload = {
+  showModal: boolean;
+  user?: PlatformManagedUserTableUser;
+};
+
 export type UserTableState = {
   changeMemberRole: UserTablePayload;
   deleteMember: UserTablePayload;
@@ -39,6 +49,10 @@ export type UserTableState = {
   editSheet: UserTablePayload & { user?: UserTableUser };
 };
 
+export type PlatforManagedUserTableState = {
+  deleteMember: UserTablePayload;
+};
+
 export type UserTableAction =
   | {
       type:
@@ -53,3 +67,12 @@ export type UserTableAction =
   | {
       type: "CLOSE_MODAL";
     };
+
+export type PlatformManagedUserTableAction =
+  | {
+      type: "SET_DELETE_ID";
+      payload: PlatformUserTablePayload;
+    }
+  | {
+      type: "CLOSE_MODAL";
+    };
diff --git a/packages/trpc/server/routers/viewer/organizations/listMembers.handler.ts b/packages/trpc/server/routers/viewer/organizations/listMembers.handler.ts
index 6db851d337..22ba89b2e5 100644
--- a/packages/trpc/server/routers/viewer/organizations/listMembers.handler.ts
+++ b/packages/trpc/server/routers/viewer/organizations/listMembers.handler.ts
@@ -18,10 +18,22 @@ type GetOptions = {
 const isAllString = (array: (string | number)[]): array is string[] => {
   return array.every((value) => typeof value === "string");
 };
+function getUserConditions(oAuthClientId?: string) {
+  if (!!oAuthClientId) {
+    return {
+      platformOAuthClients: {
+        some: { id: oAuthClientId },
+      },
+      isPlatformManaged: true,
+    };
+  }
+  return { isPlatformManaged: false };
+}
 
 export const listMembersHandler = async ({ ctx, input }: GetOptions) => {
   const organizationId = ctx.user.organizationId ?? ctx.user.profiles[0].organizationId;
   const searchTerm = input.searchTerm;
+  const oAuthClientId = input.oAuthClientId;
   const expand = input.expand;
   const filters = input.filters || [];
 
@@ -66,13 +78,16 @@ export const listMembersHandler = async ({ ctx, input }: GetOptions) => {
 
   const getTotalMembers = await prisma.membership.count({
     where: {
+      user: {
+        ...getUserConditions(oAuthClientId),
+      },
       teamId: organizationId,
     },
   });
 
   let whereClause: Prisma.MembershipWhereInput = {
     user: {
-      isPlatformManaged: false,
+      ...getUserConditions(oAuthClientId),
     },
     teamId: organizationId,
     ...(searchTerm && {
diff --git a/packages/trpc/server/routers/viewer/organizations/listMembers.schema.ts b/packages/trpc/server/routers/viewer/organizations/listMembers.schema.ts
index 7932dab84c..e4fd34736a 100644
--- a/packages/trpc/server/routers/viewer/organizations/listMembers.schema.ts
+++ b/packages/trpc/server/routers/viewer/organizations/listMembers.schema.ts
@@ -15,6 +15,7 @@ export const ZListMembersSchema = z.object({
   searchTerm: z.string().optional(),
   expand: z.array(expandableColumns).optional(),
   filters: z.array(ZListMembersFilter).optional(),
+  oAuthClientId: z.string().optional(),
 });
 
 export type TListMembersSchema = z.infer<typeof ZListMembersSchema>;