diff --git a/src/authz-module/authz-home/index.test.tsx b/src/authz-module/authz-home/index.test.tsx
index 43f3da1d..818984da 100644
--- a/src/authz-module/authz-home/index.test.tsx
+++ b/src/authz-module/authz-home/index.test.tsx
@@ -1,40 +1,74 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
-import { renderWrapper } from '@src/setupTest';
+import { useAllRoleAssignments, useOrgs, useScopes } from '@src/authz-module/data/hooks';
+import { ToastManagerProvider } from '@src/authz-module/libraries-manager/ToastManagerContext';
+import { renderWithAllProviders } from '@src/setupTest';
+import userEvent from '@testing-library/user-event';
 import AuthzHome from './index';
+import messages from './messages';
 
-jest.mock('../components/AuthZLayout', () => function MockAuthZLayout({ children }: { children: React.ReactNode }) {
-  return <div data-testid="authz-layout">{children}</div>;
-});
+jest.mock('@src/authz-module/data/hooks', () => ({
+  useAllRoleAssignments: jest.fn(),
+  useOrgs: jest.fn(),
+  useScopes: jest.fn(),
+}));
 
-jest.mock('../roles-permissions/RolesPermissions', () => function MockRolesPermissions() {
-  return <div data-testid="roles-permissions">Roles & Permissions Content</div>;
-});
+const emptyResponse = {
+  data: {
+    results: [], count: 0, next: null, previous: null,
+  },
+  error: null,
+  isLoading: false,
+  refetch: jest.fn(),
+};
 
-jest.mock('@openedx/paragon', () => ({
-  Tab: ({ children, title } : { children: React.ReactNode, title: string }) => <div data-testid="tab" role="tabpanel">{title}: {children}</div>,
-  Tabs: ({ children }: { children: React.ReactNode }) => <div data-testid="tabs">{children}</div>,
-}));
+const renderAuthzHome = () => renderWithAllProviders(
+  <ToastManagerProvider>
+    <AuthzHome />
+  </ToastManagerProvider>,
+);
 
 describe('AuthzHome', () => {
+  beforeEach(() => {
+    (useAllRoleAssignments as jest.Mock).mockReturnValue(emptyResponse);
+    (useOrgs as jest.Mock).mockReturnValue(emptyResponse);
+    (useScopes as jest.Mock).mockReturnValue(emptyResponse);
+  });
+
   it('renders without crashing', () => {
-    renderWrapper(<AuthzHome />);
+    renderAuthzHome();
   });
 
   it('renders the main layout and tabs', () => {
-    renderWrapper(<AuthzHome />);
-    expect(screen.getByTestId('authz-layout')).toBeInTheDocument();
-    expect(screen.getByTestId('tabs')).toBeInTheDocument();
+    renderAuthzHome();
+    expect(screen.getByText(messages['authz.manage.page.title'].defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages['authz.tabs.permissionsRoles'].defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages['authz.tabs.team'].defaultMessage)).toBeInTheDocument();
   });
 
   it('renders both tab panels', () => {
-    renderWrapper(<AuthzHome />);
-    const tabs = screen.getAllByTestId('tab');
-    expect(tabs).toHaveLength(2);
+    renderAuthzHome();
+    expect(screen.getByText(messages['authz.tabs.permissionsRoles'].defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages['authz.tabs.team'].defaultMessage)).toBeInTheDocument();
+    expect(screen.getAllByRole('tab')).toHaveLength(3); // 2 + tab invisible for more...
+  });
+
+  it('renders the RolesPermissions component in the permissions tab', async () => {
+    const user = userEvent.setup();
+    renderAuthzHome();
+    await user.click(screen.getByText(messages['authz.tabs.permissionsRoles'].defaultMessage));
+    expect(screen.getByRole('button', { name: 'Courses' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Libraries' })).toBeInTheDocument();
   });
 
-  it('renders the RolesPermissions component in the permissions tab', () => {
-    renderWrapper(<AuthzHome />);
-    expect(screen.getByTestId('roles-permissions')).toBeInTheDocument();
+  it('renders the TeamMembersTable component in the team members tab', () => {
+    renderAuthzHome();
+    expect(screen.getByText(messages['authz.manage.page.title'].defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    expect(screen.getAllByText('Organization').length).toBe(2); // Header and org filter;
+    expect(screen.getAllByText('Scope').length).toBe(2); // Header and scope filter;
+    expect(screen.getAllByText('Role').length).toBe(2); // Header and role filter;
+    expect(screen.getByText('Actions')).toBeInTheDocument();
   });
 });
diff --git a/src/authz-module/authz-home/index.tsx b/src/authz-module/authz-home/index.tsx
index f6cc7169..27a1a7fd 100644
--- a/src/authz-module/authz-home/index.tsx
+++ b/src/authz-module/authz-home/index.tsx
@@ -1,6 +1,8 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tab, Tabs } from '@openedx/paragon';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import TeamMembersTable from '@src/authz-module/team-members/TeamMembersTable';
+import AddRoleButton from '@src/authz-module/components/AddRoleButton';
 import RolesPermissions from '../roles-permissions/RolesPermissions';
 import AuthZLayout from '../components/AuthZLayout';
 
@@ -9,24 +11,19 @@ import messages from './messages';
 const AuthzHome = () => {
   const { hash } = useLocation();
   const intl = useIntl();
+  const [searchParams] = useSearchParams();
+  const presetScope = searchParams.get('scope') || undefined;
 
-  const rootBreadcrumb = intl.formatMessage(messages['authz.breadcrumb.root']) || '';
   const pageTitle = intl.formatMessage(messages['authz.manage.page.title']);
 
   return (
-    <div className="authz-libraries">
+    <div className="authz-module">
       <AuthZLayout
         context={{ id: '', title: '', org: '' }}
-        navLinks={[{ label: rootBreadcrumb }]}
-        activeLabel={pageTitle}
         pageTitle={pageTitle}
         pageSubtitle=""
         actions={
-          []
-          // this needs to be enable again once is refactored to be used outside of library context
-          // [
-          //   <AddNewTeamMemberTrigger libraryId="" key="add-new-member" />,
-          // ]
+          [<AddRoleButton key="add-role-button" />]
         }
       >
         <Tabs
@@ -34,9 +31,8 @@ const AuthzHome = () => {
           defaultActiveKey={hash ? 'permissionsRoles' : 'team'}
           className="bg-light-100 px-5"
         >
-          <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="p-5">
-            {/* TODO: once TeamTable is refactored we can call it here. For now, this tab will be empty. */}
-            {/* <TeamTable /> */}
+          <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="p-5 bg-light-200">
+            <TeamMembersTable presetScope={presetScope} />
           </Tab>
           <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['authz.tabs.permissionsRoles'])}>
             <RolesPermissions />
diff --git a/src/authz-module/authz-home/messages.ts b/src/authz-module/authz-home/messages.ts
index 39eb74af..bccd2d64 100644
--- a/src/authz-module/authz-home/messages.ts
+++ b/src/authz-module/authz-home/messages.ts
@@ -3,23 +3,23 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   'authz.manage.page.title': {
     id: 'authz.manage.page.title',
-    defaultMessage: 'Library Team Management',
-    description: 'Libraries AuthZ page title',
+    defaultMessage: 'Roles and Permissions Management',
+    description: 'AuthZ home page title',
   },
   'authz.breadcrumb.root': {
     id: 'authz.breadcrumb.root',
     defaultMessage: 'Manage Access',
-    description: 'Libraries AuthZ root breadcrumb',
+    description: 'AuthZ root breadcrumb',
   },
   'authz.tabs.team': {
     id: 'authz.tabs.team',
     defaultMessage: 'Team Members',
-    description: 'Libraries AuthZ title for the team management tab',
+    description: 'AuthZ title for the team management tab',
   },
   'authz.tabs.permissionsRoles': {
     id: 'authz.tabs.permissionsRoles',
     defaultMessage: 'Roles and Permissions',
-    description: 'Libraries AuthZ title for the roles tab',
+    description: 'AuthZ title for the roles tab',
   },
 });
 
diff --git a/src/authz-module/components/AddRoleButton.test.tsx b/src/authz-module/components/AddRoleButton.test.tsx
new file mode 100644
index 00000000..7765faf4
--- /dev/null
+++ b/src/authz-module/components/AddRoleButton.test.tsx
@@ -0,0 +1,134 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useNavigate } from 'react-router-dom';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+import { renderWrapper } from '@src/setupTest';
+import AddRoleButton from './AddRoleButton';
+
+// Mock react-router-dom navigation
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('AddRoleButton', () => {
+  const mockNavigate = jest.fn();
+
+  beforeAll(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 1,
+        username: 'testuser',
+        email: 'test@example.com',
+      },
+    });
+  });
+
+  beforeEach(() => {
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders the assign role button with correct text', () => {
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      expect(button).toBeInTheDocument();
+    });
+
+    it('displays the plus icon', () => {
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      expect(button.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('renders correctly when presetUsername is provided', () => {
+      renderWrapper(<AddRoleButton presetUsername="testuser123" />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('navigation behavior', () => {
+    it('navigates to assign role page without username when clicked', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(1);
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role');
+    });
+
+    it('navigates to assign role page with username query parameter when presetUsername is provided', async () => {
+      const user = userEvent.setup();
+      const presetUsername = 'john.doe';
+      renderWrapper(<AddRoleButton presetUsername={presetUsername} />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(1);
+      expect(mockNavigate).toHaveBeenCalledWith(`/authz/assign-role?username=${presetUsername}`);
+    });
+
+    it('handles special characters in presetUsername correctly', async () => {
+      const user = userEvent.setup();
+      const presetUsername = 'user@example.com';
+      renderWrapper(<AddRoleButton presetUsername={presetUsername} />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(1);
+      expect(mockNavigate).toHaveBeenCalledWith(`/authz/assign-role?username=${presetUsername}`);
+    });
+  });
+
+  describe('user interactions', () => {
+    it('responds to keyboard navigation', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+
+      await user.tab();
+      expect(button).toHaveFocus();
+
+      await user.keyboard('{Enter}');
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role');
+    });
+
+    it('responds to spacebar activation', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      button.focus();
+
+      await user.keyboard(' ');
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role');
+    });
+
+    it('handles multiple clicks gracefully', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton presetUsername="testuser" />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(3);
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role?username=testuser');
+    });
+  });
+});
diff --git a/src/authz-module/components/AddRoleButton.tsx b/src/authz-module/components/AddRoleButton.tsx
new file mode 100644
index 00000000..8a44e750
--- /dev/null
+++ b/src/authz-module/components/AddRoleButton.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import { Plus } from '@openedx/paragon/icons';
+
+import baseMessages from '@src/authz-module/messages';
+import { useNavigate } from 'react-router-dom';
+
+interface AddRoleButtonProps {
+  presetUsername?: string;
+}
+
+const AddRoleButton = ({ presetUsername }: AddRoleButtonProps) => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    const assignRolePath = `/authz/assign-role${presetUsername ? `?username=${presetUsername}` : ''}`;
+    navigate(assignRolePath);
+  };
+
+  return (
+    <Button
+      iconBefore={Plus}
+      onClick={handleClick}
+    >
+      {intl.formatMessage(baseMessages['authz.management.assign.role.title'])}
+    </Button>
+  );
+};
+
+export default AddRoleButton;
diff --git a/src/authz-module/components/AuthZLayout.tsx b/src/authz-module/components/AuthZLayout.tsx
index 9845b90c..06b572cc 100644
--- a/src/authz-module/components/AuthZLayout.tsx
+++ b/src/authz-module/components/AuthZLayout.tsx
@@ -14,9 +14,10 @@ interface AuthZLayoutProps extends AuthZTitleProps {
 const AuthZLayout = ({ children, context, ...props }: AuthZLayoutProps) => (
   <>
     <StudioHeader
-      number={context.id}
-      org={context.org}
-      title={context.title}
+      number={context?.id || null}
+      org={context?.org || null}
+      title={context?.title || null}
+      isHiddenMainMenu
     />
     <AuthZTitle {...props} />
     {children}
diff --git a/src/authz-module/components/AuthZTitle.tsx b/src/authz-module/components/AuthZTitle.tsx
index a169c840..c4aaa734 100644
--- a/src/authz-module/components/AuthZTitle.tsx
+++ b/src/authz-module/components/AuthZTitle.tsx
@@ -21,7 +21,7 @@ interface Action {
 }
 
 export interface AuthZTitleProps {
-  activeLabel: string;
+  activeLabel?: string;
   pageTitle: string;
   pageSubtitle: string | ReactNode;
   navLinks?: BreadcrumbLink[];
@@ -53,8 +53,8 @@ const AuthZTitle = ({
           <div className="d-flex align-items-center">
             <h2 className="text-primary mb-0">{pageTitle}</h2>
             {typeof pageSubtitle === 'string'
-              ? <><hr className="mx-lg-3" /><h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3></>
-              : <><hr className="mx-lg-3" /> <div className="mb-0">{pageSubtitle}</div></>}
+              ? <> { pageSubtitle !== '' && <hr className="mx-lg-3" /> }<h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3></>
+              : <>{ pageSubtitle !== '' && <hr className="mx-lg-3" /> } <div className="mb-0">{pageSubtitle}</div></>}
 
           </div>
         </Col>
diff --git a/src/authz-module/components/TableCells.test.tsx b/src/authz-module/components/TableCells.test.tsx
new file mode 100644
index 00000000..00e7ad3d
--- /dev/null
+++ b/src/authz-module/components/TableCells.test.tsx
@@ -0,0 +1,420 @@
+import { screen } from '@testing-library/react';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+import { renderWrapper } from '@src/setupTest';
+import userEvent from '@testing-library/user-event';
+import {
+  NameCell,
+  ViewActionCell,
+  RoleCell,
+  OrgCell,
+  ScopeCell,
+} from './TableCells';
+
+const mockNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+describe('TableCells Components', () => {
+  beforeAll(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 1,
+        username: 'testuser',
+        email: 'test@example.com',
+      },
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('NameCell', () => {
+    const mockUserRole = {
+      isSuperadmin: false,
+      role: 'course_staff',
+      org: 'OpenedX',
+      scope: 'course-v1:OpenedX+DemoX+DemoCourse',
+      permissionCount: 27,
+      fullName: 'John Doe',
+      username: 'johndoe',
+      email: 'johndoe@example.com',
+    };
+    const mockCellProps = {
+      row: {
+        original: mockUserRole,
+      },
+    };
+    beforeEach(() => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 1,
+          username: 'testuser',
+          email: 'testuser@example.com',
+        },
+      });
+    });
+
+    it('displays the full name when available', () => {
+      renderWrapper(<NameCell {...mockCellProps} />);
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+
+    it('displays username when full name is not available', () => {
+      const propsWithoutFullName = {
+        row: {
+          original: {
+            ...mockUserRole,
+            fullName: undefined,
+          },
+        },
+      };
+
+      renderWrapper(<NameCell {...propsWithoutFullName} />);
+      expect(screen.getByText('johndoe')).toBeInTheDocument();
+    });
+
+    it('displays username when full name is empty string', () => {
+      const propsWithEmptyFullName = {
+        row: {
+          original: {
+            ...mockUserRole,
+            fullName: '',
+          },
+        },
+      };
+
+      renderWrapper(<NameCell {...propsWithEmptyFullName} />);
+      expect(screen.getByText('johndoe')).toBeInTheDocument();
+    });
+
+    it('shows current user indicator when username matches authenticated user', () => {
+      const currentUserProps = {
+        row: {
+          original: {
+            ...mockUserRole,
+            username: 'testuser',
+            fullName: 'Test User',
+          },
+        },
+      };
+
+      renderWrapper(<NameCell {...currentUserProps} />);
+      expect(screen.getByText('Test User')).toBeInTheDocument();
+      expect(screen.getByText(/\(Me\)/)).toBeInTheDocument();
+    });
+
+    it('does not show current user indicator when username does not match authenticated user', () => {
+      renderWrapper(<NameCell {...mockCellProps} />);
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText(/\(Me\)/)).not.toBeInTheDocument();
+    });
+
+    it('shows current user indicator with username fallback when no full name is provided', () => {
+      const currentUserPropsNoFullName = {
+        row: {
+          original: {
+            ...mockUserRole,
+            username: 'testuser',
+            fullName: undefined,
+          },
+        },
+      };
+
+      renderWrapper(<NameCell {...currentUserPropsNoFullName} />);
+      expect(screen.getByText('testuser')).toBeInTheDocument();
+      expect(screen.getByText(/\(Me\)/)).toBeInTheDocument();
+    });
+
+    it('handles missing username in authenticated user gracefully', () => {
+      const contextWithoutUsername = {
+        authenticatedUser: {
+          username: undefined,
+          email: 'testuser@example.com',
+        },
+      };
+
+      renderWrapper(<NameCell {...mockCellProps} />, contextWithoutUsername);
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText(/\(Me\)/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('ViewActionCell', () => {
+    const mockUserRole = {
+      isSuperadmin: false,
+      role: 'course_staff',
+      org: 'OpenedX',
+      scope: 'course-v1:OpenedX+DemoX+DemoCourse',
+      permissionCount: 27,
+      fullName: 'John Doe',
+      username: 'johndoe',
+      email: 'johndoe@example.com',
+    };
+
+    const mockCellProps = {
+      row: {
+        original: mockUserRole,
+      },
+    };
+    beforeEach(() => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 1,
+          username: 'testuser',
+          email: 'testuser@example.com',
+        },
+      });
+      mockNavigate.mockClear();
+    });
+
+    it('renders view action button', () => {
+      renderWrapper(<ViewActionCell {...mockCellProps} />);
+      const viewButton = screen.getByRole('button', { name: /view/i });
+      expect(viewButton).toBeInTheDocument();
+    });
+
+    it('has correct accessibility attributes', () => {
+      renderWrapper(<ViewActionCell {...mockCellProps} />);
+      const viewButton = screen.getByRole('button', { name: /view/i });
+      expect(viewButton).toHaveAttribute('aria-label');
+    });
+
+    it('navigates to user profile when clicked', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<ViewActionCell {...mockCellProps} />);
+
+      const viewButton = screen.getByRole('button', { name: /view/i });
+      await user.click(viewButton);
+
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/user/johndoe');
+    });
+
+    it('navigates with correct username for different user', async () => {
+      const user = userEvent.setup();
+      const differentUserProps = {
+        row: {
+          original: {
+            ...mockUserRole,
+            username: 'janedoe',
+          },
+        },
+      };
+
+      renderWrapper(<ViewActionCell {...differentUserProps} />);
+
+      const viewButton = screen.getByRole('button', { name: /view/i });
+      await user.click(viewButton);
+
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/user/janedoe');
+    });
+
+    it('handles empty username gracefully', async () => {
+      const user = userEvent.setup();
+      const emptyUsernameProps = {
+        row: {
+          original: {
+            ...mockUserRole,
+            username: '',
+          },
+        },
+      };
+
+      renderWrapper(<ViewActionCell {...emptyUsernameProps} />);
+
+      const viewButton = screen.getByRole('button', { name: /view/i });
+      await user.click(viewButton);
+
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/user/');
+    });
+
+    it('handles special characters in username', async () => {
+      const user = userEvent.setup();
+      const specialUsernameProps = {
+        row: {
+          original: {
+            ...mockUserRole,
+            username: 'user+with@special.chars',
+          },
+        },
+      };
+
+      renderWrapper(<ViewActionCell {...specialUsernameProps} />);
+
+      const viewButton = screen.getByRole('button', { name: /view/i });
+      await user.click(viewButton);
+
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/user/user+with@special.chars');
+    });
+  });
+
+  describe('RoleCell', () => {
+    const mockCell = {
+      getCellProps: jest.fn(() => ({ 'data-testid': 'role-cell' })),
+    };
+
+    it('renders the role label for a mapped role', () => {
+      const props = {
+        value: 'library_admin',
+        cell: mockCell,
+        row: {
+          original: {
+            role: 'library_admin', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+          },
+        },
+        column: { id: 'role' },
+      };
+
+      renderWrapper(<RoleCell {...props} />);
+
+      expect(screen.getByText('Library Admin')).toBeInTheDocument();
+      expect(mockCell.getCellProps).toHaveBeenCalledWith({ 'data-role': 'Library Admin' });
+    });
+
+    it('renders empty string for unmapped role', () => {
+      const props = {
+        value: 'unknown_role',
+        cell: mockCell,
+        row: {
+          original: {
+            role: 'unknown_role', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+          },
+        },
+        column: { id: 'role' },
+      };
+
+      renderWrapper(<RoleCell {...props} />);
+
+      const cellElement = screen.getByTestId('role-cell');
+      expect(cellElement).toHaveTextContent('');
+      expect(mockCell.getCellProps).toHaveBeenCalledWith({ 'data-role': '' });
+    });
+
+    it('applies cell props correctly', () => {
+      const props = {
+        value: 'course_staff',
+        cell: mockCell,
+        row: {
+          original: {
+            role: 'course_staff', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+          },
+        },
+        column: { id: 'role' },
+      };
+
+      renderWrapper(<RoleCell {...props} />);
+
+      expect(screen.getByText('Course Staff')).toBeInTheDocument();
+      expect(mockCell.getCellProps).toHaveBeenCalledWith({ 'data-role': 'Course Staff' });
+    });
+  });
+
+  describe('OrgCell', () => {
+    it('displays "All Organizations" for Django superuser role', () => {
+      const props = {
+        value: 'Test Org',
+        row: {
+          original: {
+            role: 'django.superuser', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+          },
+        },
+        column: { id: 'org' },
+      };
+
+      renderWrapper(<OrgCell {...props} />);
+
+      expect(screen.getByText('All Organizations')).toBeInTheDocument();
+      expect(screen.queryByText('Test Org')).not.toBeInTheDocument();
+    });
+
+    it('displays "All Organizations" for Django global staff role', () => {
+      const props = {
+        value: 'Test Org',
+        row: {
+          original: {
+            role: 'django.globalstaff', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+          },
+        },
+        column: { id: 'org' },
+      };
+
+      renderWrapper(<OrgCell {...props} />);
+
+      expect(screen.getByText('All Organizations')).toBeInTheDocument();
+      expect(screen.queryByText('Test Org')).not.toBeInTheDocument();
+    });
+
+    it('displays the actual org value for non-Django roles', () => {
+      const props = {
+        value: 'Test Organization',
+        row: {
+          original: {
+            role: 'library_admin', org: 'Test Organization', scope: 'Test Scope', permissionCount: 1,
+          },
+        },
+        column: { id: 'org' },
+      };
+
+      renderWrapper(<OrgCell {...props} />);
+
+      expect(screen.getByText('Test Organization')).toBeInTheDocument();
+      expect(screen.queryByText('All Organizations')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('ScopeCell', () => {
+    it('displays "Global" for Django superuser role', () => {
+      const props = {
+        value: 'library',
+        row: {
+          original: {
+            role: 'django.superuser', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+          },
+        },
+        column: { id: 'scope' },
+      };
+
+      renderWrapper(<ScopeCell {...props} />);
+
+      expect(screen.getByText('Global')).toBeInTheDocument();
+      expect(screen.queryByText('library')).not.toBeInTheDocument();
+    });
+
+    it('displays "Global" for Django global staff role', () => {
+      const props = {
+        value: 'course',
+        row: {
+          original: {
+            role: 'django.globalstaff', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+          },
+        },
+        column: { id: 'scope' },
+      };
+
+      renderWrapper(<ScopeCell {...props} />);
+
+      expect(screen.getByText('Global')).toBeInTheDocument();
+      expect(screen.queryByText('course')).not.toBeInTheDocument();
+    });
+
+    it('displays the actual scope value for non-Django roles', () => {
+      const props = {
+        value: 'Course Scope',
+        row: {
+          original: {
+            role: 'course_admin', org: 'Test Org', scope: 'Course Scope', permissionCount: 1,
+          },
+        },
+        column: { id: 'scope' },
+      };
+
+      renderWrapper(<ScopeCell {...props} />);
+
+      expect(screen.getByText('Course Scope')).toBeInTheDocument();
+      expect(screen.queryByText('Global')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/authz-module/components/TableCells.tsx b/src/authz-module/components/TableCells.tsx
new file mode 100644
index 00000000..a1a36947
--- /dev/null
+++ b/src/authz-module/components/TableCells.tsx
@@ -0,0 +1,96 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, IconButton } from '@openedx/paragon';
+import { AppContext } from '@edx/frontend-platform/react';
+import {
+  RemoveRedEye,
+} from '@openedx/paragon/icons';
+import { TableCellValue, AppContextType, UserRole } from '@src/types';
+import { useNavigate } from 'react-router-dom';
+import { useContext, useMemo } from 'react';
+import { DJANGO_MANAGED_ROLES, MAP_ROLE_KEY_TO_LABEL } from '@src/authz-module/constants';
+import messages from './messages';
+import { RESOURCE_ICONS } from './constants';
+
+type CellProps = TableCellValue<UserRole>;
+type CellPropsWithValue = CellProps & {
+  value: string;
+};
+type ExtendedCellProps = CellPropsWithValue & {
+  cell: {
+    getCellProps: (props?: Record<string, string>) => Record<string, string>;
+  };
+};
+
+const NameCell = ({ row }: CellProps) => {
+  const intl = useIntl();
+  const { authenticatedUser } = useContext(AppContext) as AppContextType;
+  const username = authenticatedUser?.username;
+
+  if (row.original.username === username) {
+    return (
+      <span>
+        {row.original.fullName || row.original.username}
+        <span className="text-gray-500">{intl.formatMessage(messages['authz.table.username.current'])}</span>
+      </span>
+    );
+  }
+  return row.original.fullName || row.original.username;
+};
+
+const ViewActionCell = ({ row }: CellProps) => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const viewPath = `/authz/user/${row.original.username}`;
+  return (
+    <IconButton
+      src={RemoveRedEye}
+      alt={formatMessage(messages['authz.table.column.actions.view.title'])}
+      size="sm"
+      onClick={() => navigate(viewPath)}
+    />
+  );
+};
+
+const OrgCell = ({ value, row }: CellPropsWithValue) => {
+  const { formatMessage } = useIntl();
+  return (
+    <span>
+      {DJANGO_MANAGED_ROLES.includes(row.original.role) ? formatMessage(messages['authz.user.table.org.all.organizations.label']) : value}
+    </span>
+  );
+};
+
+const ScopeCell = ({ row }: CellProps) => {
+  const { formatMessage } = useIntl();
+
+  const { scopeText, iconSrc } = useMemo(() => {
+    if (DJANGO_MANAGED_ROLES.includes(row.original.role)) {
+      return {
+        scopeText: formatMessage(messages['authz.user.table.scope.global.label']),
+        iconSrc: RESOURCE_ICONS.GLOBAL,
+      };
+    }
+    const scopeIcon = row.original.role?.startsWith('lib') ? RESOURCE_ICONS.LIBRARY : RESOURCE_ICONS.COURSE;
+    return {
+      scopeText: row.original.scope,
+      iconSrc: scopeIcon,
+    };
+  }, [row.original.role, row.original.scope, formatMessage]);
+
+  return (
+    <span className="d-flex align-items-center">
+      {iconSrc && <Icon color="primary" src={iconSrc} className="mr-2" size="xs" />}
+      {scopeText}
+    </span>
+  );
+};
+
+const RoleCell = ({ value, cell }: ExtendedCellProps) => (
+  <span {...cell.getCellProps({ 'data-role': MAP_ROLE_KEY_TO_LABEL[value] || '' })}>
+    {MAP_ROLE_KEY_TO_LABEL[value] || ''}
+  </span>
+);
+
+export {
+  NameCell, ViewActionCell, ScopeCell, RoleCell, OrgCell,
+};
diff --git a/src/authz-module/components/TableControlBar/MultipleChoiceFilter.test.tsx b/src/authz-module/components/TableControlBar/MultipleChoiceFilter.test.tsx
new file mode 100644
index 00000000..ab56c751
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/MultipleChoiceFilter.test.tsx
@@ -0,0 +1,164 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWrapper } from '@src/setupTest';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+
+describe('MultipleChoiceFilter', () => {
+  const defaultProps = {
+    filterButtonText: 'Test Filter',
+    filterChoices: [
+      { displayName: 'Option 1', value: 'option1' },
+      { displayName: 'Option 2', value: 'option2', description: 'desc' },
+    ],
+    filterValue: [],
+    setFilter: jest.fn(),
+  };
+
+  const groupedChoices = [
+    { displayName: 'Group A Option', value: 'groupA1', groupName: 'Group A' },
+    { displayName: 'Group B Option', value: 'groupB1', groupName: 'Group B' },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} />);
+    expect(screen.getByText('Test Filter')).toBeInTheDocument();
+  });
+
+  it('displays filter button text', () => {
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} filterButtonText="Custom Filter" />);
+    expect(screen.getByText('Custom Filter')).toBeInTheDocument();
+  });
+
+  it('shows count when items are selected', () => {
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} filterValue={['option1']} />);
+    expect(screen.getByText('Test Filter (1)')).toBeInTheDocument();
+  });
+
+  it('opens dropdown menu when clicked', async () => {
+    const user = userEvent.setup();
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} />);
+    const button = screen.getByText('Test Filter');
+    await user.click(button);
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} disabled />);
+    expect(screen.getByText('Test Filter')).toBeInTheDocument();
+  });
+
+  it('displays search input when searchable', async () => {
+    const user = userEvent.setup();
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} isSearchable onSearchChange={jest.fn()} />);
+    const button = screen.getByText('Test Filter');
+    await user.click(button);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('handles grouped choices', async () => {
+    const user = userEvent.setup();
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} filterChoices={groupedChoices} isGrouped />);
+    const button = screen.getByText('Test Filter');
+    await user.click(button);
+    expect(screen.getByText('Group A')).toBeInTheDocument();
+    expect(screen.getByText('Group B')).toBeInTheDocument();
+    const CheckA1 = screen.getByText('Group A Option');
+    await user.click(CheckA1);
+    expect(defaultProps.setFilter).toHaveBeenCalledWith(
+      ['groupA1'],
+      {
+        groupName: 'test filter',
+        value: 'groupA1',
+        displayName: 'Group A Option',
+      },
+    );
+  });
+
+  it('calls setFilter when option is selected', async () => {
+    const user = userEvent.setup();
+    const mockSetFilter = jest.fn();
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} setFilter={mockSetFilter} />);
+    const button = screen.getByText('Test Filter');
+    await user.click(button);
+    const option = screen.getByText('Option 1');
+    await user.click(option);
+    expect(mockSetFilter).toHaveBeenCalled();
+  });
+
+  it('adds option to selection on first click', async () => {
+    const user = userEvent.setup();
+    const mockSetFilter = jest.fn();
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} setFilter={mockSetFilter} filterValue={[]} />);
+    const button = screen.getByText('Test Filter');
+    await user.click(button);
+    const checkbox = screen.getByLabelText('Option 1');
+    await user.click(checkbox);
+    expect(mockSetFilter).toHaveBeenCalledWith(
+      ['option1'],
+      {
+        groupName: 'test filter',
+        value: 'option1',
+        displayName: 'Option 1',
+      },
+    );
+  });
+
+  it('removes option from selection when already selected', async () => {
+    const user = userEvent.setup();
+    const mockSetFilter = jest.fn();
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} setFilter={mockSetFilter} filterValue={['option1']} />);
+    const button = screen.getByText('Test Filter (1)');
+    await user.click(button);
+    const checkbox = screen.getByLabelText('Option 1');
+    await user.click(checkbox);
+    expect(mockSetFilter).toHaveBeenCalledWith(
+      [],
+      {
+        groupName: 'test filter',
+        value: 'option1',
+        displayName: 'Option 1',
+      },
+    );
+  });
+
+  it('handles multiple selections correctly', async () => {
+    const user = userEvent.setup();
+    const mockSetFilter = jest.fn();
+    renderWrapper(<MultipleChoiceFilter {...defaultProps} setFilter={mockSetFilter} filterValue={['option1']} />);
+    const button = screen.getByText('Test Filter (1)');
+    await user.click(button);
+    const checkbox = screen.getByLabelText('Option 2');
+    await user.click(checkbox);
+    expect(mockSetFilter).toHaveBeenCalledWith(
+      ['option1', 'option2'],
+      {
+        groupName: 'test filter',
+        value: 'option2',
+        displayName: 'Option 2',
+      },
+    );
+  });
+
+  it('calls onSearchChange when search input changes', async () => {
+    const user = userEvent.setup();
+    const mockOnSearchChange = jest.fn();
+    renderWrapper(
+      <MultipleChoiceFilter
+        {...defaultProps}
+        isSearchable
+        onSearchChange={mockOnSearchChange}
+      />,
+    );
+    const button = screen.getByRole('button', { name: /test filter/i });
+    await user.click(button);
+    const searchInput = screen.getByRole('textbox');
+    await user.type(searchInput, 'test search');
+    expect(mockOnSearchChange).toHaveBeenCalled();
+    expect(mockOnSearchChange).toHaveBeenLastCalledWith('test search');
+  });
+});
diff --git a/src/authz-module/components/TableControlBar/MultipleChoiceFilter.tsx b/src/authz-module/components/TableControlBar/MultipleChoiceFilter.tsx
new file mode 100644
index 00000000..cb77b67c
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/MultipleChoiceFilter.tsx
@@ -0,0 +1,144 @@
+import {
+  Dropdown, Form, Icon, Stack,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { FilterList, Info, Search } from '@openedx/paragon/icons';
+import { useState } from 'react';
+import messages from '../messages';
+import { FilterChoice, MultipleChoiceFilterProps } from './types';
+
+const MultipleChoiceFilter = ({
+  filterButtonText,
+  filterChoices,
+  filterValue,
+  setFilter,
+  isGrouped = false,
+  isSearchable = false,
+  onSearchChange,
+  iconSrc,
+  disabled = false,
+}: MultipleChoiceFilterProps) => {
+  const [searchValue, setSearchValue] = useState<string | undefined>(undefined);
+  const { formatMessage } = useIntl();
+
+  const checkedBoxes = filterValue || [];
+  const handleClickCheckbox = (value, displayName) => {
+    const newValue = {
+      groupName: filterButtonText?.toLocaleLowerCase() || '',
+      value,
+      displayName,
+    };
+    if (checkedBoxes.includes(value)) {
+      const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);
+      return setFilter(newCheckedBoxes, newValue);
+    }
+    const newCheckedBoxes = [...checkedBoxes, value];
+    return setFilter(newCheckedBoxes, newValue);
+  };
+
+  const getGroupedChoices = () => {
+    const groupedFilterChoices = filterChoices.reduce((groups, choice) => {
+      const groupName = choice.groupName || 'Ungrouped';
+      const icon = choice.groupIcon || undefined;
+      if (!groups.has(groupName)) {
+        groups.set(groupName, { groupName, options: [], icon });
+      }
+      groups.get(groupName)!.options.push({
+        displayName: choice.displayName,
+        value: choice.value,
+        description: choice.description,
+      });
+      return groups;
+    }, new Map<string, { groupName: string; options: Array<FilterChoice>; icon?: any }>());
+    return Array.from(groupedFilterChoices.values());
+  };
+
+  return (
+    <Dropdown className="no-caret-dropdown filters">
+      <Dropdown.Toggle variant={checkedBoxes.length > 0 ? 'primary' : 'outline-primary'}>
+        <Stack direction="horizontal" gap={2}>
+          {iconSrc && <Icon color="primary" src={iconSrc} />}
+          {filterButtonText}
+          {checkedBoxes.length > 0 && ` (${checkedBoxes.length})`}
+          <Icon color="primary" src={FilterList} />
+        </Stack>
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        {isSearchable && (
+        <Form.Control
+          className="m-1"
+          type="text"
+          trailingElement={<Icon src={Search} />}
+          placeholder={formatMessage(messages['authz.table.controlbar.search'])}
+          onChange={(e) => {
+            setSearchValue(e.target.value);
+            onSearchChange?.(e.target.value);
+          }}
+          value={searchValue}
+        />
+        )}
+        <Form.CheckboxSet
+          className="pgn__dropdown-filter-checkbox-group"
+          name={filterButtonText}
+          aria-label={filterButtonText}
+          value={checkedBoxes}
+        >
+          <span className="small text-info-700 mt-2">
+            {formatMessage(messages['authz.table.controlbar.filters.items.showing'], { current: filterChoices.length, total: filterChoices.length })}
+          </span>
+          {!isGrouped ? filterChoices.map(({
+            displayName, value, description,
+          }) => (
+            <Form.Checkbox
+              className="m-2 w-100"
+              key={displayName}
+              checked={checkedBoxes.includes(value)}
+              value={value}
+              onChange={() => handleClickCheckbox(value, displayName)}
+              aria-label={displayName}
+              disabled={checkedBoxes.includes(value) ? false : disabled}
+            >
+              <div className="d-flex flex-column">
+                <span className="small">{displayName}</span>
+                { description && <span className="small text-muted d-block">{description}</span> }
+              </div>
+            </Form.Checkbox>
+          ))
+            : getGroupedChoices().map(({ groupName, icon, options }) => (
+              <div key={groupName}>
+                <div className="pgn__dropdown-filter-group-name text-info-700 d-flex align-items-center small m-2 ml-0">
+                  {icon && <Icon color="primary" src={icon} className="mr-2" size="xs" />}
+                  <span>{groupName}</span>
+                </div>
+                {options.map(({ displayName, value, description }) => (
+                  <Form.Checkbox
+                    className="m-2 w-100"
+                    key={displayName}
+                    value={value}
+                    onChange={() => handleClickCheckbox(value, displayName)}
+                    disabled={checkedBoxes.includes(value) ? false : disabled}
+                    aria-label={displayName}
+                  >
+                    <div className="d-flex flex-column">
+                      <span className="small">{displayName}</span>
+                      { description && <span className="small text-muted d-block">{description}</span> }
+                    </div>
+                  </Form.Checkbox>
+                ))}
+              </div>
+            ))}
+          { isSearchable && (
+            <div className="d-flex align-items-center justify-content-between p-2">
+              <span className="text-muted small">{formatMessage(messages['authz.table.controlbar.filters.more.results'])}</span>
+              <Icon className="text-gray-300 ml-1" src={Info} size="xs" />
+            </div>
+          )}
+        </Form.CheckboxSet>
+      </Dropdown.Menu>
+
+    </Dropdown>
+  );
+};
+
+export default MultipleChoiceFilter;
diff --git a/src/authz-module/components/TableControlBar/OrgFilter.test.tsx b/src/authz-module/components/TableControlBar/OrgFilter.test.tsx
new file mode 100644
index 00000000..228b9d69
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/OrgFilter.test.tsx
@@ -0,0 +1,63 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWrapper } from '@src/setupTest';
+import OrgFilter from './OrgFilter';
+
+jest.mock('@src/authz-module/data/hooks', () => ({
+  useOrgs: () => ({
+    data: {
+      count: 2,
+      next: null,
+      previous: null,
+      results: [
+        { id: 'org1', name: 'Organization 1' },
+        { id: 'org2', name: 'Organization 2' },
+      ],
+    },
+  }),
+}));
+
+describe('OrgFilter', () => {
+  const defaultProps = {
+    filterButtonText: 'Organizations',
+    filterValue: [],
+    setFilter: jest.fn(),
+    disabled: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    renderWrapper(<OrgFilter {...defaultProps} />);
+    expect(screen.getByText('Organizations')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    renderWrapper(<OrgFilter {...defaultProps} disabled />);
+    expect(screen.getByText('Organizations')).toBeInTheDocument();
+  });
+
+  it('displays filter options', () => {
+    renderWrapper(<OrgFilter {...defaultProps} />);
+    expect(screen.getByText('Organizations')).toBeInTheDocument();
+  });
+
+  it('handles search input', async () => {
+    const user = userEvent.setup();
+    renderWrapper(<OrgFilter {...defaultProps} />);
+    // Look for search input if it exists
+    const searchInputs = screen.queryAllByRole('textbox');
+    if (searchInputs.length > 0) {
+      await user.type(searchInputs[0], 'test search');
+      expect(searchInputs[0]).toHaveValue('test search');
+    }
+  });
+
+  it('calls setFilter when filter changes', () => {
+    const mockSetFilter = jest.fn();
+    renderWrapper(<OrgFilter {...defaultProps} setFilter={mockSetFilter} />);
+    expect(screen.getByText('Organizations')).toBeInTheDocument();
+  });
+});
diff --git a/src/authz-module/components/TableControlBar/OrgFilter.tsx b/src/authz-module/components/TableControlBar/OrgFilter.tsx
new file mode 100644
index 00000000..cc0cd52e
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/OrgFilter.tsx
@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { Business } from '@openedx/paragon/icons';
+import { useOrgs } from '@src/authz-module/data/hooks';
+import { DEFAULT_FILTER_PAGE_SIZE } from '@src/authz-module/constants';
+import { MultipleChoiceFilterProps } from './types';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+
+type OrgFilterProps = Omit<MultipleChoiceFilterProps, 'filterChoices' | 'isSearchable' | 'onSearchChange'>;
+
+const OrgFilter = ({
+  filterButtonText, filterValue, setFilter, disabled,
+}: OrgFilterProps) => {
+  const [searchValue, setSearchValue] = React.useState<string | undefined>(undefined);
+  const {
+    data: orgsData = {
+      count: 0, next: null, previous: null, results: [],
+    },
+  } = useOrgs(searchValue, 1, DEFAULT_FILTER_PAGE_SIZE);
+  const filterChoices = useMemo(() => orgsData?.results?.map((org) => ({
+    displayName: org.name,
+    value: org.shortName,
+  })) || [], [orgsData]);
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  return (
+    <MultipleChoiceFilter
+      filterButtonText={filterButtonText}
+      filterChoices={filterChoices}
+      filterValue={filterValue}
+      setFilter={setFilter}
+      isSearchable
+      onSearchChange={handleSearchChange}
+      iconSrc={Business}
+      disabled={disabled}
+    />
+  );
+};
+
+export default OrgFilter;
diff --git a/src/authz-module/components/TableControlBar/RolesFilter.test.tsx b/src/authz-module/components/TableControlBar/RolesFilter.test.tsx
new file mode 100644
index 00000000..1ba0724f
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/RolesFilter.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderWrapper } from '@src/setupTest';
+import RolesFilter from './RolesFilter';
+
+describe('RolesFilter', () => {
+  const defaultProps = {
+    filterButtonText: 'Roles',
+    filterValue: [],
+    setFilter: jest.fn(),
+    disabled: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    renderWrapper(<RolesFilter {...defaultProps} />);
+    expect(screen.getByText('Roles')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    renderWrapper(<RolesFilter {...defaultProps} disabled />);
+    expect(screen.getByText('Roles')).toBeInTheDocument();
+  });
+
+  it('displays filter button text', () => {
+    renderWrapper(<RolesFilter {...defaultProps} filterButtonText="Select Roles" />);
+    expect(screen.getByText('Select Roles')).toBeInTheDocument();
+  });
+
+  it('calls setFilter when filter changes', () => {
+    const mockSetFilter = jest.fn();
+    renderWrapper(<RolesFilter {...defaultProps} setFilter={mockSetFilter} />);
+    expect(screen.getByText('Roles')).toBeInTheDocument();
+  });
+});
diff --git a/src/authz-module/components/TableControlBar/RolesFilter.tsx b/src/authz-module/components/TableControlBar/RolesFilter.tsx
new file mode 100644
index 00000000..d0e061e9
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/RolesFilter.tsx
@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Person } from '@openedx/paragon/icons';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+import { MultipleChoiceFilterProps } from './types';
+import { getRolesFiltersOptions } from '../constants';
+
+type RolesFilterProps = Omit<MultipleChoiceFilterProps, 'filterChoices' | 'isSearchable' | 'onSearchChange'>;
+
+const RolesFilter = ({
+  filterButtonText, filterValue, setFilter, disabled,
+}: RolesFilterProps) => {
+  const intl = useIntl();
+  const rolesOptions = useMemo(() => getRolesFiltersOptions(intl), [intl]);
+  return (
+    <MultipleChoiceFilter
+      filterButtonText={filterButtonText}
+      filterChoices={rolesOptions}
+      filterValue={filterValue}
+      setFilter={setFilter}
+      isGrouped
+      iconSrc={Person}
+      disabled={disabled}
+    />
+  );
+};
+
+export default RolesFilter;
diff --git a/src/authz-module/components/TableControlBar/ScopesFilter.test.tsx b/src/authz-module/components/TableControlBar/ScopesFilter.test.tsx
new file mode 100644
index 00000000..18654ad4
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/ScopesFilter.test.tsx
@@ -0,0 +1,67 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWrapper } from '@src/setupTest';
+import ScopesFilter from './ScopesFilter';
+
+jest.mock('@src/authz-module/data/hooks', () => ({
+  useScopes: () => ({
+    data: {
+      results: [
+        {
+          externalKey: 'course:123',
+          name: 'Test Course',
+          organization: { name: 'Test Org' },
+        },
+        {
+          externalKey: 'library:456',
+          name: 'Test Library',
+          organization: { name: 'Another Org' },
+        },
+      ],
+    },
+  }),
+}));
+
+describe('ScopesFilter', () => {
+  const defaultProps = {
+    filterButtonText: 'Scopes',
+    filterValue: [],
+    setFilter: jest.fn(),
+    disabled: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    renderWrapper(<ScopesFilter {...defaultProps} />);
+    expect(screen.getByText('Scopes')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    renderWrapper(<ScopesFilter {...defaultProps} disabled />);
+    expect(screen.getByText('Scopes')).toBeInTheDocument();
+  });
+
+  it('displays filter button text', () => {
+    renderWrapper(<ScopesFilter {...defaultProps} filterButtonText="Select Scopes" />);
+    expect(screen.getByText('Select Scopes')).toBeInTheDocument();
+  });
+
+  it('handles search input', async () => {
+    const user = userEvent.setup();
+    renderWrapper(<ScopesFilter {...defaultProps} />);
+    const searchInputs = screen.queryAllByRole('textbox');
+    if (searchInputs.length > 0) {
+      await user.type(searchInputs[0], 'test search');
+      expect(searchInputs[0]).toHaveValue('test search');
+    }
+  });
+
+  it('calls setFilter when filter changes', () => {
+    const mockSetFilter = jest.fn();
+    renderWrapper(<ScopesFilter {...defaultProps} setFilter={mockSetFilter} />);
+    expect(screen.getByText('Scopes')).toBeInTheDocument();
+  });
+});
diff --git a/src/authz-module/components/TableControlBar/ScopesFilter.tsx b/src/authz-module/components/TableControlBar/ScopesFilter.tsx
new file mode 100644
index 00000000..9661438d
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/ScopesFilter.tsx
@@ -0,0 +1,54 @@
+import React, { useMemo, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { LocationOn } from '@openedx/paragon/icons';
+import { useScopes } from '@src/authz-module/data/hooks';
+import { DEFAULT_FILTER_PAGE_SIZE } from '@src/authz-module/constants';
+import { MultipleChoiceFilterProps } from './types';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+import { RESOURCE_ICONS } from '../constants';
+import messages from '../messages';
+
+type ScopesFilterProps = Omit<MultipleChoiceFilterProps, 'filterChoices' | 'isSearchable' | 'onSearchChange'>;
+
+const ScopesFilter = ({
+  filterButtonText, filterValue, setFilter, disabled,
+}: ScopesFilterProps) => {
+  const { formatMessage } = useIntl();
+  const [searchValue, setSearchValue] = useState<string | undefined>(undefined);
+  const { data: scopesData = { results: [] } } = useScopes(searchValue, 1, DEFAULT_FILTER_PAGE_SIZE);
+
+  const filterChoices = useMemo(() => scopesData.results.map((scope) => {
+    const scopeIcon = scope.externalKey?.startsWith('lib') ? RESOURCE_ICONS.LIBRARY : RESOURCE_ICONS.COURSE;
+    let groupName = formatMessage(messages['authz.team.members.table.group.courses']);
+    if (scope.externalKey?.startsWith('lib')) {
+      groupName = formatMessage(messages['authz.team.members.table.group.libraries']);
+    }
+    return {
+      displayName: scope.displayName,
+      value: scope.externalKey,
+      description: scope.org?.shortName,
+      groupName,
+      groupIcon: scopeIcon,
+    };
+  }), [scopesData, formatMessage]);
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  return (
+    <MultipleChoiceFilter
+      filterButtonText={filterButtonText}
+      filterChoices={filterChoices}
+      filterValue={filterValue}
+      setFilter={setFilter}
+      isSearchable
+      isGrouped
+      onSearchChange={handleSearchChange}
+      iconSrc={LocationOn}
+      disabled={disabled}
+    />
+  );
+};
+
+export default ScopesFilter;
diff --git a/src/authz-module/components/TableControlBar/SearchFilter.test.tsx b/src/authz-module/components/TableControlBar/SearchFilter.test.tsx
new file mode 100644
index 00000000..f66a7a8e
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/SearchFilter.test.tsx
@@ -0,0 +1,50 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWrapper } from '@src/setupTest';
+import SearchFilter from './SearchFilter';
+
+describe('SearchFilter', () => {
+  const defaultProps = {
+    filterValue: '',
+    setFilter: jest.fn(),
+    placeholder: 'Search...',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    renderWrapper(<SearchFilter {...defaultProps} />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('displays placeholder text', () => {
+    renderWrapper(<SearchFilter {...defaultProps} placeholder="Search users..." />);
+    expect(screen.getByPlaceholderText('Search users...')).toBeInTheDocument();
+  });
+
+  it('displays current filter value', () => {
+    renderWrapper(<SearchFilter {...defaultProps} filterValue="test query" />);
+    expect(screen.getByDisplayValue('test query')).toBeInTheDocument();
+  });
+
+  it('calls setFilter when input changes', async () => {
+    const user = userEvent.setup();
+    const mockSetFilter = jest.fn();
+    renderWrapper(<SearchFilter {...defaultProps} setFilter={mockSetFilter} />);
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'search text');
+    expect(mockSetFilter).toHaveBeenCalled();
+  });
+
+  it('handles empty filter value', () => {
+    renderWrapper(<SearchFilter {...defaultProps} filterValue="" />);
+    expect(screen.getByRole('textbox')).toHaveValue('');
+  });
+
+  it('handles undefined filter value', () => {
+    renderWrapper(<SearchFilter {...defaultProps} filterValue={undefined as any} />);
+    expect(screen.getByRole('textbox')).toHaveValue('');
+  });
+});
diff --git a/src/authz-module/components/TableControlBar/SearchFilter.tsx b/src/authz-module/components/TableControlBar/SearchFilter.tsx
new file mode 100644
index 00000000..b2480f1d
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/SearchFilter.tsx
@@ -0,0 +1,30 @@
+import {
+  Form,
+  Icon,
+} from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+
+interface SearchFilterProps {
+  filterValue: string;
+  setFilter: (value: string) => void;
+  placeholder: string;
+}
+
+const SearchFilter = ({
+  filterValue, setFilter, placeholder,
+}: SearchFilterProps) => (
+  <Form.Group className="m-0">
+    <Form.Control
+      className="mw-xs mr-0"
+      trailingElement={<Icon src={Search} />}
+      value={filterValue || ''}
+      type="text"
+      onChange={e => {
+        setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
+      }}
+      placeholder={placeholder}
+    />
+  </Form.Group>
+);
+
+export default SearchFilter;
diff --git a/src/authz-module/components/TableControlBar/TableControlBar.test.tsx b/src/authz-module/components/TableControlBar/TableControlBar.test.tsx
new file mode 100644
index 00000000..a706e15e
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/TableControlBar.test.tsx
@@ -0,0 +1,370 @@
+import { screen } from '@testing-library/react';
+import { renderWrapper } from '@src/setupTest';
+import { DataTableContext, TextFilter } from '@openedx/paragon';
+import userEvent from '@testing-library/user-event';
+import TableControlBar from './TableControlBar';
+import RolesFilter from './RolesFilter';
+
+const mockSetAllFilters = jest.fn();
+const mockOnFilterChange = jest.fn();
+
+const mockColumns = [
+  {
+    id: 'role',
+    canFilter: true,
+    Filter: () => null,
+    setFilter: jest.fn(),
+    filterOrder: 1,
+  },
+  {
+    id: 'org',
+    canFilter: true,
+    Filter: () => null,
+    setFilter: jest.fn(),
+    filterOrder: 2,
+  },
+];
+
+const mockState = {
+  filters: [
+    { id: 'role', value: ['admin'] },
+    { id: 'org', value: ['org1'] },
+  ],
+};
+
+jest.mock('@src/authz-module/data/hooks', () => ({
+  useOrgs: () => ({
+    data: {
+      count: 0, next: null, previous: null, results: [],
+    },
+  }),
+  useScopes: () => ({ data: { scopes: [] } }),
+}));
+
+describe('TableControlBar', () => {
+  const mockDataTableContext = {
+    columns: mockColumns,
+    setAllFilters: mockSetAllFilters,
+    state: mockState,
+  };
+
+  const renderWithContext = (component, contextOverride = {}) => {
+    const context = { ...mockDataTableContext, ...contextOverride };
+    return renderWrapper(
+      <DataTableContext.Provider value={context}>
+        {component}
+      </DataTableContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockSetAllFilters.mockClear();
+    mockOnFilterChange.mockClear();
+  });
+
+  it('renders without crashing', () => {
+    renderWithContext(<TableControlBar />);
+    const container = document.querySelector('.authz-table-control-bar');
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders roles filter when configured', async () => {
+    const user = userEvent.setup();
+    const contextWithRolesFilter = {
+      columns: [
+        {
+          id: 'roles',
+          Header: 'Roles',
+          Filter: RolesFilter,
+          canFilter: true,
+          filterButtonText: 'Select Roles',
+          setFilter: jest.fn(),
+        },
+      ],
+    };
+
+    renderWithContext(<TableControlBar />, contextWithRolesFilter);
+    const rolesButton = screen.getByText('Select Roles');
+    expect(rolesButton).toBeInTheDocument();
+    await user.click(rolesButton);
+    const superAdminOption = screen.getByRole('checkbox', { name: /Super Admin/i });
+    expect(superAdminOption).toBeInTheDocument();
+    await user.click(superAdminOption);
+    expect(contextWithRolesFilter.columns[0].setFilter).toHaveBeenCalled();
+  });
+
+  it('renders search filter when configured', () => {
+    const contextWithTextFilter = {
+      columns: [
+        {
+          id: 'search',
+          Header: 'Search Field',
+          Filter: TextFilter,
+          canFilter: true,
+          filterValue: '',
+          setFilter: jest.fn(),
+        },
+      ],
+    };
+
+    renderWithContext(<TableControlBar />, contextWithTextFilter);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('displays filter chips when filters are applied', () => {
+    const contextWithAppliedFilters = {
+      state: {
+        filters: [
+          { id: 'roles', value: ['Admin'] },
+        ],
+      },
+    };
+
+    renderWithContext(
+      <TableControlBar />,
+      contextWithAppliedFilters,
+    );
+
+    expect(screen.getByText('Filtered by:')).toBeInTheDocument();
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  it('shows clear all button when multiple filters applied', async () => {
+    const user = userEvent.setup();
+    const contextWithMultipleFilters = {
+      state: {
+        filters: [
+          { id: 'roles', value: ['Admin'] },
+          { id: 'org', value: ['TestOrg'] },
+        ],
+      },
+    };
+
+    renderWithContext(
+      <TableControlBar />,
+      contextWithMultipleFilters,
+    );
+    const clearButton = screen.getByText('Clear filters');
+    expect(clearButton).toBeInTheDocument();
+    await user.click(clearButton);
+    expect(mockSetAllFilters).toHaveBeenCalledWith([]);
+    expect(screen.queryByText('Clear filters')).not.toBeInTheDocument();
+  });
+
+  it('calls onFilterChange callback when provided', () => {
+    const contextWithFilters = {
+      state: {
+        filters: [{ id: 'test', value: ['value'] }],
+      },
+    };
+
+    renderWithContext(
+      <TableControlBar onFilterChange={mockOnFilterChange} />,
+      contextWithFilters,
+    );
+
+    expect(mockOnFilterChange).toHaveBeenCalledWith(['test']);
+  });
+
+  it('handles empty columns gracefully', () => {
+    renderWithContext(<TableControlBar />);
+    const container = document.querySelector('.authz-table-control-bar');
+    expect(container).toBeInTheDocument();
+    expect(screen.queryByText('Filter by')).not.toBeInTheDocument();
+  });
+  it('handles empty columns gracefully', () => {
+    renderWithContext(<TableControlBar />);
+    const container = document.querySelector('.authz-table-control-bar');
+    expect(container).toBeInTheDocument();
+    expect(screen.queryByText('Filter by')).not.toBeInTheDocument();
+  });
+
+  it('generates keys using column id when available', () => {
+    const contextWithIdColumn = {
+      columns: [
+        {
+          id: 'test-id',
+          accessor: 'test-accessor',
+          Header: 'Test',
+          Filter: RolesFilter,
+          canFilter: true,
+          filterButtonText: 'Test Filter',
+          setFilter: jest.fn(),
+        },
+      ],
+    };
+
+    renderWithContext(<TableControlBar />, contextWithIdColumn);
+    expect(screen.getByText('Test Filter')).toBeInTheDocument();
+  });
+
+  it('generates keys using column accessor when id is not available', () => {
+    const contextWithAccessorColumn = {
+      columns: [
+        {
+          accessor: 'test-accessor',
+          Header: 'Test',
+          Filter: RolesFilter,
+          canFilter: true,
+          filterButtonText: 'Test Filter',
+          setFilter: jest.fn(),
+        },
+      ],
+    };
+
+    renderWithContext(<TableControlBar />, contextWithAccessorColumn);
+    expect(screen.getByText('Test Filter')).toBeInTheDocument();
+  });
+
+  it('handles chronological filter logic for adding new filters', () => {
+    const mockSetFilter = jest.fn();
+    const contextWithFilter = {
+      columns: [
+        {
+          id: 'roles',
+          Header: 'Roles',
+          Filter: RolesFilter,
+          canFilter: true,
+          filterButtonText: 'Select Roles',
+          setFilter: mockSetFilter,
+        },
+      ],
+    };
+
+    renderWithContext(<TableControlBar />, contextWithFilter);
+
+    const handleSetFilters = mockSetFilter.mock.calls[0]?.[0];
+    if (handleSetFilters) {
+      const newFilter = { groupName: 'roles', value: 'admin', displayName: 'Admin' };
+      handleSetFilters(['admin'], newFilter);
+    }
+  });
+
+  it('handles chronological filter logic for removing existing filters', () => {
+    const mockSetFilter = jest.fn();
+    const contextWithFilter = {
+      columns: [
+        {
+          id: 'roles',
+          Header: 'Roles',
+          Filter: RolesFilter,
+          canFilter: true,
+          filterButtonText: 'Select Roles',
+          setFilter: mockSetFilter,
+        },
+      ],
+    };
+
+    renderWithContext(
+      <TableControlBar />,
+      contextWithFilter,
+    );
+
+    const handleSetFilters = mockSetFilter.mock.calls[0]?.[0];
+    if (handleSetFilters) {
+      const existingFilter = { groupName: 'roles', value: 'admin', displayName: 'Admin' };
+      handleSetFilters([], existingFilter);
+    }
+  });
+
+  it('tests onIconAfterClick functionality directly', () => {
+    const contextWithAppliedFilters = {
+      setAllFilters: mockSetAllFilters,
+      state: {
+        filters: [
+          { id: 'role', value: ['admin', 'user'] },
+          { id: 'org', value: ['TestOrg'] },
+        ],
+      },
+    };
+
+    renderWithContext(
+      <TableControlBar />,
+      contextWithAppliedFilters,
+    );
+    const chipElement = screen.getByText('admin').closest('.pgn__chip');
+    expect(chipElement).toBeInTheDocument();
+    const closeButton = chipElement?.querySelector('button');
+    if (closeButton) {
+      closeButton.click();
+    }
+    expect(mockSetAllFilters).toHaveBeenCalledWith([
+      { id: 'role', value: ['user'] },
+      { id: 'org', value: ['TestOrg'] },
+    ]);
+  });
+
+  it('displays warning alert when filter limit is reached', () => {
+    const maxFilters = Array.from({ length: 10 }, (_, index) => ({
+      id: `filter${index}`,
+      value: [`value${index}`],
+    }));
+
+    const contextWithMaxFilters = {
+      setAllFilters: mockSetAllFilters,
+      state: {
+        filters: maxFilters,
+      },
+    };
+
+    renderWithContext(
+      <TableControlBar />,
+      contextWithMaxFilters,
+    );
+    const warningAlert = screen.getByRole('alert');
+    expect(warningAlert).toBeInTheDocument();
+    expect(warningAlert).toHaveClass('alert-warning');
+  });
+
+  it('manages setChronologicalFilters state correctly when removing filters', () => {
+    const mockSetFilter = jest.fn();
+    const contextWithFilter = {
+      columns: [
+        {
+          id: 'roles',
+          Header: 'Roles',
+          Filter: RolesFilter,
+          canFilter: true,
+          filterButtonText: 'Select Roles',
+          setFilter: mockSetFilter,
+        },
+      ],
+    };
+
+    renderWithContext(
+      <TableControlBar />,
+      contextWithFilter,
+    );
+    const handleSetFilters = mockSetFilter.mock.calls[0]?.[0];
+    if (handleSetFilters) {
+      const existingFilter = { groupName: 'roles', value: 'admin', displayName: 'Admin' };
+      handleSetFilters([], existingFilter);
+      expect(mockSetFilter).toHaveBeenCalled();
+    }
+  });
+
+  it('removes a filter chip when close icon is clicked', async () => {
+    renderWithContext(<TableControlBar onFilterChange={mockOnFilterChange} />);
+    const chip = screen.getByText('admin');
+    const closeButton = chip.parentElement?.querySelector('button');
+    const user = userEvent.setup();
+    await user.click(closeButton as HTMLElement);
+    expect(mockSetAllFilters).toHaveBeenCalledWith([
+      { id: 'role', value: [] },
+      { id: 'org', value: ['org1'] },
+    ]);
+  });
+
+  it('removes the correct filter chip for org', async () => {
+    renderWithContext(<TableControlBar onFilterChange={mockOnFilterChange} />);
+    const chip = screen.getByText('org1');
+    const closeButton = chip.parentElement?.querySelector('button');
+    const user = userEvent.setup();
+    await user.click(closeButton as HTMLElement);
+    expect(mockSetAllFilters).toHaveBeenCalledWith([
+      { id: 'role', value: ['admin'] },
+      { id: 'org', value: [] },
+    ]);
+  });
+});
diff --git a/src/authz-module/components/TableControlBar/TableControlBar.tsx b/src/authz-module/components/TableControlBar/TableControlBar.tsx
new file mode 100644
index 00000000..3d937c0b
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/TableControlBar.tsx
@@ -0,0 +1,199 @@
+import { useContext, useEffect, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  DataTableContext,
+  Stack,
+  TextFilter,
+  Button,
+  Chip,
+  Alert,
+  Icon,
+} from '@openedx/paragon';
+import {
+  Business, Close, LocationOn, Person,
+  Warning,
+} from '@openedx/paragon/icons';
+
+import { MAX_TABLE_FILTERS_APPLIED } from '@src/authz-module/constants';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+import SearchFilter from './SearchFilter';
+import messages from '../messages';
+import RolesFilter from './RolesFilter';
+import OrgFilter from './OrgFilter';
+import ScopesFilter from './ScopesFilter';
+import { FilterChoice } from './types';
+
+const FILTER_CHIPS_ICONS = {
+  role: Person,
+  organization: Business,
+  scope: LocationOn,
+};
+
+const FILTER_GROUP_TO_ID = {
+  role: 'role',
+  organization: 'org',
+  scope: 'scope',
+};
+
+interface TableControlBarProps {
+  onFilterChange?: (filters: string[]) => void;
+}
+
+const TableControlBar = ({ onFilterChange }: TableControlBarProps) => {
+  const intl = useIntl();
+  // applied filters in the order they were selected by the user, to display on the control bar as chips
+  const [chronologicalFilters, setChronologicalFilters] = useState<FilterChoice[]>([]);
+  const [filtersLimitReached, setFiltersLimitReached] = useState(false);
+  const {
+    columns,
+    setAllFilters,
+    state,
+  // @ts-ignore-next-line - Paragon's DataTableContext is not typed
+  } = useContext<DataTableContext>(DataTableContext);
+
+  useEffect(() => {
+    if (state.filters.length > 0) {
+      const formattedInitialFilters = state.filters.map((filter) => ({
+        groupName: filter.id,
+        value: filter.value[0] || '',
+        displayName: filter.value[0] || '',
+      }));
+      setChronologicalFilters(formattedInitialFilters);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    setFiltersLimitReached(chronologicalFilters.length >= MAX_TABLE_FILTERS_APPLIED);
+    if (onFilterChange) {
+      onFilterChange(state.filters.map((filter) => filter.id) || []);
+    }
+  }, [chronologicalFilters, onFilterChange, state.filters]);
+
+  const availableFilters = columns.filter((column) => column.canFilter)
+    .sort((a, b) => (a.filterOrder || 0) - (b.filterOrder || 0));
+
+  const columnTextFilterHeaders = columns
+    .filter((column) => column.Filter === TextFilter)
+    .map((column) => column.Header);
+
+  const getSearchPlaceholder = () => intl.formatMessage(messages['authz.table.controlbar.search.by.fields'], {
+    firstField: columnTextFilterHeaders[0] || '',
+    secondField: columnTextFilterHeaders[1] || '',
+  });
+
+  const handleCloseFilter = (filterName, filterValue) => {
+    const actualFilterId = FILTER_GROUP_TO_ID[filterName] || filterName;
+    const filterGroup = state.filters.find((filter) => filter.id === actualFilterId);
+    const newFilterValue = filterGroup?.value.filter(item => item !== filterValue) || [];
+    setAllFilters(state.filters.map(item => (
+      item.id !== actualFilterId ? item : { id: item.id, value: newFilterValue })));
+    setChronologicalFilters((prevFilters) => prevFilters.filter((filter) => filter.value !== filterValue));
+  };
+
+  const handleSetFilters = (setFilter) => (allFilters: string[], newFilter: FilterChoice) => {
+    setFilter(allFilters);
+    setChronologicalFilters((prevFilters) => {
+      if (!prevFilters.find((filter) => filter.value === newFilter.value)) {
+        return [...prevFilters, newFilter];
+      }
+      return prevFilters.filter((filter) => filter.value !== newFilter.value);
+    });
+  };
+
+  const clearAllFilters = () => {
+    setAllFilters([]);
+    setChronologicalFilters([]);
+  };
+  return (
+    <div className="authz-table-control-bar pgn__data-table-status-bar">
+      <Stack className="mb-2 flex-wrap" gap={2} direction="horizontal">
+        {availableFilters.map((column) => {
+          const { Filter } = column;
+          if (Filter === RolesFilter) {
+            return (
+              <RolesFilter
+                {...column}
+                setFilter={handleSetFilters(column.setFilter)}
+                disabled={filtersLimitReached}
+              />
+            );
+          }
+          if (Filter === OrgFilter) {
+            return (
+              <OrgFilter
+                {...column}
+                setFilter={handleSetFilters(column.setFilter)}
+                disabled={filtersLimitReached}
+              />
+            );
+          }
+          if (Filter === MultipleChoiceFilter) {
+            return (
+              <MultipleChoiceFilter
+                {...column}
+                setFilter={handleSetFilters(column.setFilter)}
+                disabled={filtersLimitReached}
+              />
+            );
+          }
+          if (Filter === ScopesFilter) {
+            return (
+              <ScopesFilter
+                {...column}
+                setFilter={handleSetFilters(column.setFilter)}
+                disabled={filtersLimitReached}
+                filterValue={state.filters.find(filter => filter.id === 'scope')?.value || null}
+              />
+            );
+          }
+
+          if (Filter === TextFilter) {
+            return (
+              <SearchFilter
+                key={column.id || column.accessor}
+                filterValue={column.filterValue}
+                setFilter={column.setFilter}
+                placeholder={getSearchPlaceholder()}
+              />
+            );
+          }
+          return null;
+        })}
+      </Stack>
+
+      {chronologicalFilters.length > 0 && (
+        <Stack gap={1} direction="horizontal" className="flex-wrap mb-2">
+          <span>{intl.formatMessage(messages['authz.table.controlbar.filterby.label'])}</span>
+
+            {chronologicalFilters.map((filter) => (
+              <Chip
+                key={filter.value}
+                iconBefore={FILTER_CHIPS_ICONS[filter.groupName || '']}
+                iconAfter={Close}
+                onIconAfterClick={() => handleCloseFilter(filter.groupName, filter.value)}
+              >
+                {filter.displayName}
+              </Chip>
+            ))}
+            {chronologicalFilters.length > 1 && (
+              <Button className="py-0" variant="link" onClick={clearAllFilters}>
+                {intl.formatMessage(messages['authz.table.controlbar.clearFilters'])}
+              </Button>
+            )}
+        </Stack>
+      )}
+      { filtersLimitReached && (
+      <Alert variant="warning" className="mb-2">
+        <span className="d-flex flex-row">
+          <Icon src={Warning} className="text-warning-400 mr-2" />
+          {intl.formatMessage(messages['authz.table.controlbar.filters.limit.reached'])}
+        </span>
+      </Alert>
+      )}
+
+    </div>
+  );
+};
+
+export default TableControlBar;
diff --git a/src/authz-module/components/TableControlBar/types.ts b/src/authz-module/components/TableControlBar/types.ts
new file mode 100644
index 00000000..686f1361
--- /dev/null
+++ b/src/authz-module/components/TableControlBar/types.ts
@@ -0,0 +1,19 @@
+export type FilterChoice = {
+  groupName?: string;
+  groupIcon?: React.ComponentType<{}>;
+  displayName: string;
+  value: string;
+  description?: string;
+};
+
+export interface MultipleChoiceFilterProps {
+  filterButtonText: string;
+  filterChoices: Array<FilterChoice>;
+  filterValue: string[] | undefined;
+  setFilter: (value: string[], newItem: FilterChoice) => void;
+  isGrouped?: boolean;
+  isSearchable?: boolean;
+  onSearchChange?: (value: string) => void;
+  iconSrc?: React.ComponentType<{}> | undefined;
+  disabled?: boolean;
+}
diff --git a/src/authz-module/components/TableFooter/TableFooter.test.tsx b/src/authz-module/components/TableFooter/TableFooter.test.tsx
new file mode 100644
index 00000000..b03f4efe
--- /dev/null
+++ b/src/authz-module/components/TableFooter/TableFooter.test.tsx
@@ -0,0 +1,195 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DataTableContext } from '@openedx/paragon';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+import { renderWrapper } from '@src/setupTest';
+import Footer from './TableFooter';
+
+describe('TableFooter', () => {
+  const mockGotoPage = jest.fn();
+
+  const defaultDataTableContext = {
+    pageCount: 5,
+    gotoPage: mockGotoPage,
+    state: {
+      pageIndex: 0,
+      pageSize: 10,
+    },
+    itemCount: 42,
+    rows: [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ],
+  };
+
+  const renderFooter = (contextOverrides = {}) => {
+    const contextValue = {
+      ...defaultDataTableContext,
+      ...contextOverrides,
+    };
+
+    return renderWrapper(
+      <DataTableContext.Provider value={contextValue}>
+        <Footer />
+      </DataTableContext.Provider>,
+    );
+  };
+
+  beforeAll(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 1,
+        username: 'testuser',
+        email: 'test@example.com',
+      },
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('pagination text display', () => {
+    it('displays correct showing text with current page items', () => {
+      renderFooter();
+
+      expect(screen.getByText('Showing 3 of 42.')).toBeInTheDocument();
+    });
+
+    it('displays showing text with different row count', () => {
+      const moreRows = [
+        ...defaultDataTableContext.rows,
+        { id: 4, name: 'Item 4' },
+        { id: 5, name: 'Item 5' },
+      ];
+
+      renderFooter({
+        rows: moreRows,
+        itemCount: 100,
+      });
+
+      expect(screen.getByText('Showing 5 of 100.')).toBeInTheDocument();
+    });
+
+    it('displays showing text when on last page with fewer items', () => {
+      renderFooter({
+        state: {
+          pageIndex: 4,
+          pageSize: 10,
+        },
+        rows: [{ id: 41, name: 'Item 41' }, { id: 42, name: 'Item 42' }],
+        itemCount: 42,
+      });
+
+      expect(screen.getByText('Showing 2 of 42.')).toBeInTheDocument();
+    });
+  });
+
+  describe('pagination controls', () => {
+    it('displays pagination with correct current page', () => {
+      renderFooter();
+
+      const pagination = screen.getByRole('navigation');
+      expect(pagination).toBeInTheDocument();
+
+      const currentPageButton = screen.getByRole('button', { name: '1 of 5' });
+      expect(currentPageButton).toBeInTheDocument();
+    });
+
+    it('navigates to different page when next button is clicked', async () => {
+      const user = userEvent.setup();
+      renderFooter();
+
+      const page3Button = screen.getByRole('button', { name: 'Next, Page 2' });
+      await user.click(page3Button);
+
+      expect(mockGotoPage).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows correct current page when on different page', () => {
+      renderFooter({
+        state: {
+          pageIndex: 2,
+          pageSize: 10,
+        },
+      });
+
+      const currentPageButton = screen.getByRole('button', { name: '3 of 5' });
+      expect(currentPageButton).toBeInTheDocument();
+    });
+  });
+
+  describe('user interactions', () => {
+    it('handles keyboard navigation on pagination', async () => {
+      const user = userEvent.setup();
+      renderFooter();
+
+      // Tab to the next page button and activate with Enter
+      const nextPageButton = screen.getByRole('button', { name: 'Next, Page 2' });
+      nextPageButton.focus();
+      await user.keyboard('{Enter}');
+
+      expect(mockGotoPage).toHaveBeenCalledWith(1);
+    });
+
+    it('handles space key activation on pagination buttons', async () => {
+      const user = userEvent.setup();
+      renderFooter();
+
+      const nextPageButton = screen.getByRole('button', { name: 'Next, Page 2' });
+      nextPageButton.focus();
+      await user.keyboard(' ');
+
+      expect(mockGotoPage).toHaveBeenCalledWith(1);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles single page scenario', () => {
+      renderFooter({
+        pageCount: 1,
+        state: {
+          pageIndex: 0,
+          pageSize: 10,
+        },
+        itemCount: 3,
+      });
+
+      expect(screen.getByText('Showing 3 of 3.')).toBeInTheDocument();
+
+      const page1Button = screen.queryByRole('button', { name: /1 of 1/ });
+      expect(page1Button).not.toBeInTheDocument();
+    });
+
+    it('handles empty results', () => {
+      renderFooter({
+        rows: [],
+        itemCount: 0,
+        pageCount: 1,
+        state: {
+          pageIndex: 0,
+          pageSize: 10,
+        },
+      });
+
+      expect(screen.getByText('Showing 0 of 0.')).toBeInTheDocument();
+    });
+
+    it('handles large page counts correctly', () => {
+      renderFooter({
+        pageCount: 10,
+        state: {
+          pageIndex: 5,
+          pageSize: 10,
+        },
+        itemCount: 95,
+      });
+
+      const currentPageButton = screen.getByRole('button', { name: '6 of 10' });
+      expect(currentPageButton).toBeInTheDocument();
+      expect(screen.getByText('Showing 3 of 95.')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/authz-module/components/TableFooter/TableFooter.tsx b/src/authz-module/components/TableFooter/TableFooter.tsx
new file mode 100644
index 00000000..26b3a974
--- /dev/null
+++ b/src/authz-module/components/TableFooter/TableFooter.tsx
@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { DataTableContext, Pagination, TableFooter } from '@openedx/paragon';
+import messages from '../messages';
+
+const Footer = () => {
+  const { formatMessage } = useIntl();
+  const {
+    pageCount, gotoPage, state, itemCount, rows,
+  // @ts-ignore-next-line - Paragon's DataTableContext is not typed
+  } = useContext<DataTableContext>(DataTableContext);
+  const { pageIndex } = state;
+  return (
+    <TableFooter>
+      <span>
+        {formatMessage(messages['authz.table.footer.items.showing.text'], { pageSize: rows.length, itemCount })}
+      </span>
+      <Pagination
+        variant="reduced"
+        currentPage={pageIndex + 1}
+        pageCount={pageCount}
+        onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
+      />
+    </TableFooter>
+  );
+};
+
+export default Footer;
diff --git a/src/authz-module/components/constants.ts b/src/authz-module/components/constants.ts
new file mode 100644
index 00000000..185eecaf
--- /dev/null
+++ b/src/authz-module/components/constants.ts
@@ -0,0 +1,74 @@
+import { IntlShape } from '@edx/frontend-platform/i18n';
+import { Language, LibraryBooks, School } from '@openedx/paragon/icons';
+import messages from './messages';
+
+export const getRolesFiltersOptions = (intl: IntlShape) => [
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.global']),
+    groupIcon: Language,
+    displayName: 'Super Admin',
+    value: 'super_admin',
+  },
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.global']),
+    groupIcon: Language,
+    displayName: 'Global Staff',
+    value: 'global_staff',
+  },
+
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.courses']),
+    groupIcon: School,
+    displayName: 'Course Admin',
+    value: 'course_admin',
+  },
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.courses']),
+    groupIcon: School,
+    displayName: 'Course Staff',
+    value: 'course_staff',
+  },
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.courses']),
+    groupIcon: School,
+    displayName: 'Course Editor',
+    value: 'course_editor',
+  },
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.courses']),
+    groupIcon: School,
+    displayName: 'Course Auditor',
+    value: 'course_auditor',
+  },
+
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.libraries']),
+    groupIcon: LibraryBooks,
+    displayName: 'Library Admin',
+    value: 'library_admin',
+  },
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.libraries']),
+    groupIcon: LibraryBooks,
+    displayName: 'Library Author',
+    value: 'library_author',
+  },
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.libraries']),
+    groupIcon: LibraryBooks,
+    displayName: 'Library Collaborator',
+    value: 'library_collaborator',
+  },
+  {
+    groupName: intl.formatMessage(messages['authz.team.members.table.group.libraries']),
+    groupIcon: LibraryBooks,
+    displayName: 'Library User',
+    value: 'library_user',
+  },
+];
+
+export const RESOURCE_ICONS = {
+  COURSE: School,
+  LIBRARY: LibraryBooks,
+  GLOBAL: Language,
+};
diff --git a/src/authz-module/components/messages.ts b/src/authz-module/components/messages.ts
index 707dde7c..541008f1 100644
--- a/src/authz-module/components/messages.ts
+++ b/src/authz-module/components/messages.ts
@@ -21,6 +21,82 @@ const messages = defineMessages({
     defaultMessage: 'Scroll to top',
     description: 'Alt text for the scroll to top anchor button',
   },
+  'authz.table.controlbar.clearFilters': {
+    id: 'authz.table.controlbar.clearFilters',
+    defaultMessage: 'Clear filters',
+    description: 'Button to clear all active filters in the table',
+  },
+  'authz.user.table.org.all.organizations.label': {
+    id: 'authz.user.table.org.all.organizations.label',
+    defaultMessage: 'All Organizations',
+    description: 'Label for the "All Organizations" message on the user assignments table when a user has a django managed role assigned.',
+  },
+  'authz.table.controlbar.search': {
+    id: 'authz.table.controlbar.search',
+    defaultMessage: 'Search',
+    description: 'Search placeholder for two specific fields',
+  },
+  'authz.user.table.scope.global.label': {
+    id: 'authz.user.table.scope.global.label',
+    defaultMessage: 'Global',
+    description: 'Label for the "Global" scope in the user assignments table when a user has a django managed role assigned.',
+  },
+  'authz.table.controlbar.search.by.fields': {
+    id: 'authz.table.controlbar.search.by.fields',
+    defaultMessage: 'Search by {firstField} or {secondField}',
+    description: 'Search placeholder for two specific fields',
+  },
+  'authz.table.controlbar.filterby.label': {
+    id: 'authz.table.controlbar.filterby.label',
+    defaultMessage: 'Filtered by: ',
+    description: 'Label for active filters in the table',
+  },
+  'authz.table.controlbar.filters.limit.reached': {
+    id: 'authz.table.controlbar.filters.limit.reached',
+    defaultMessage: '10 filter limit reached. Remove one of the applied filters so you can select another one.',
+    description: 'Message displayed when the user reaches the applied filters limit',
+  },
+  'authz.table.controlbar.filters.items.showing': {
+    id: 'authz.table.controlbar.filters.limit.reached',
+    defaultMessage: 'Showing {current} of {total}.',
+    description: 'Message displayed when the user reaches the applied filters limit',
+  },
+  'authz.table.footer.items.showing.text': {
+    id: 'authz.table.footer.items.showing.text',
+    defaultMessage: 'Showing {pageSize} of {itemCount}.',
+    description: 'Message displayed when the user reaches the applied filters limit',
+  },
+  'authz.table.username.current': {
+    id: 'authz.table.username.current',
+    defaultMessage: '(Me)',
+    description: 'Indicates the current user in the team members table',
+  },
+
+  'authz.table.column.actions.view.title': {
+    id: 'authz.table.column.actions.view.title',
+    defaultMessage: 'View',
+    description: 'Team members table view action text',
+  },
+  'authz.team.members.table.group.courses': {
+    id: 'authz.team.members.table.group.courses',
+    defaultMessage: 'Courses',
+    description: 'Label for the "Courses" group in the team members table filters',
+  },
+  'authz.team.members.table.group.libraries': {
+    id: 'authz.team.members.table.group.libraries',
+    defaultMessage: 'Libraries',
+    description: 'Label for the "Libraries" group in the team members table filters',
+  },
+  'authz.team.members.table.group.global': {
+    id: 'authz.team.members.table.group.global',
+    defaultMessage: 'Global',
+    description: 'Label for the "Global" group in the team members table filters',
+  },
+  'authz.table.controlbar.filters.more.results': {
+    id: 'authz.table.controlbar.filters.more.results',
+    defaultMessage: 'Search to show more',
+    description: 'Message displayed when there are more results available than currently shown',
+  },
 });
 
 export default messages;
diff --git a/src/authz-module/components/utils.test.tsx b/src/authz-module/components/utils.test.tsx
new file mode 100644
index 00000000..8c879710
--- /dev/null
+++ b/src/authz-module/components/utils.test.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+import { renderWrapper } from '@src/setupTest';
+import { getCellHeader } from './utils';
+
+const renderCellHeader = (columnId: string, columnTitle: string, filtersApplied: string[]) => {
+  const component = getCellHeader(columnId, columnTitle, filtersApplied);
+  return renderWrapper(<div>{component}</div>);
+};
+
+describe('getCellHeader', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 1,
+        username: 'testuser',
+        email: 'testuser@example.com',
+      },
+    });
+  });
+
+  it('displays column title without filter icon when no filters are applied', () => {
+    const { container } = renderCellHeader('scope', 'Scope', []);
+
+    expect(screen.getByText('Scope')).toBeInTheDocument();
+    expect(container.querySelector('svg')).not.toBeInTheDocument();
+  });
+
+  it('displays column title without filter icon when column is not in filters applied', () => {
+    const { container } = renderCellHeader('scope', 'Scope', ['role', 'organization']);
+
+    expect(screen.getByText('Scope')).toBeInTheDocument();
+    expect(container.querySelector('svg')).not.toBeInTheDocument();
+  });
+
+  it('displays column title with filter icon when column has filter applied', () => {
+    const { container } = renderCellHeader('scope', 'Scope', ['scope', 'role']);
+
+    expect(screen.getByText('Scope')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('displays filter icon only for matching column when multiple filters applied', () => {
+    const { container } = renderCellHeader('organization', 'Organization', ['scope', 'organization', 'role']);
+
+    expect(screen.getByText('Organization')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('handles empty column title', () => {
+    const { container } = renderCellHeader('scope', '', ['scope']);
+
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('handles special characters in column title', () => {
+    const { container } = renderCellHeader('scope', 'Scope & Context', ['scope']);
+
+    expect(screen.getByText('Scope & Context')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('is case sensitive when matching column ID', () => {
+    const { container } = renderCellHeader('scope', 'Scope', ['SCOPE', 'Role']);
+
+    expect(screen.getByText('Scope')).toBeInTheDocument();
+    expect(container.querySelector('svg')).not.toBeInTheDocument();
+  });
+
+  it('handles long column titles with filters', () => {
+    const { container } = renderCellHeader('organization', 'Very Long Organization Column Title', ['organization']);
+
+    expect(screen.getByText('Very Long Organization Column Title')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('displays correct structure when filter is applied', () => {
+    renderCellHeader('role', 'Role', ['role']);
+
+    const container = screen.getByText('Role').closest('span');
+    expect(container).toHaveClass('d-flex', 'flex-row', 'align-items-center');
+  });
+});
diff --git a/src/authz-module/components/utils.tsx b/src/authz-module/components/utils.tsx
new file mode 100644
index 00000000..4d0bd222
--- /dev/null
+++ b/src/authz-module/components/utils.tsx
@@ -0,0 +1,14 @@
+import { Icon } from '@openedx/paragon';
+import { FilterList } from '@openedx/paragon/icons';
+
+export const getCellHeader = (columnId: string, columnTitle: string, filtersApplied: string[]) => {
+  if (filtersApplied.includes(columnId)) {
+    return (
+      <span className="d-flex flex-row align-items-center">
+        <Icon src={FilterList} size="sm" className="mr-2" />
+        {columnTitle}
+      </span>
+    );
+  }
+  return columnTitle;
+};
diff --git a/src/authz-module/constants.ts b/src/authz-module/constants.ts
index 3256bc2c..6cd023df 100644
--- a/src/authz-module/constants.ts
+++ b/src/authz-module/constants.ts
@@ -1,6 +1,7 @@
 export const ROUTES = {
   LIBRARIES_TEAM_PATH: '/libraries/:libraryId',
   LIBRARIES_USER_PATH: '/libraries/:libraryId/:username',
+
 };
 
 export enum RoleOperationErrorStatus {
@@ -10,3 +11,24 @@ export enum RoleOperationErrorStatus {
   ROLE_ASSIGNMENT_ERROR = 'role_assignment_error',
   ROLE_REMOVAL_ERROR = 'role_removal_error',
 }
+
+export const MAX_TABLE_FILTERS_APPLIED = 10;
+
+export const MAP_ROLE_KEY_TO_LABEL: Record<string, string> = {
+  library_admin: 'Library Admin',
+  library_author: 'Library Author',
+  library_contributor: 'Library Contributor',
+  library_user: 'Library User',
+  course_admin: 'Course Admin',
+  course_staff: 'Course Staff',
+  course_editor: 'Course Editor',
+  course_auditor: 'Course Auditor',
+  'django.superuser': 'Super Admin',
+  'django.globalstaff': 'Global Staff',
+};
+
+export const DJANGO_MANAGED_ROLES = ['django.superuser', 'django.globalstaff'];
+
+export const TABLE_DEFAULT_PAGE_SIZE = 10;
+
+export const DEFAULT_FILTER_PAGE_SIZE = 5;
diff --git a/src/authz-module/data/api.ts b/src/authz-module/data/api.ts
index bf5ff1ae..d5eb8437 100644
--- a/src/authz-module/data/api.ts
+++ b/src/authz-module/data/api.ts
@@ -1,10 +1,15 @@
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { LibraryMetadata, TeamMember } from '@src/types';
+import {
+  LibraryMetadata, Org, Scope, TeamMember,
+  UserRole,
+} from '@src/types';
 import { camelCaseObject } from '@edx/frontend-platform';
 import { getApiUrl, getStudioApiUrl } from '@src/data/utils';
 
 export interface QuerySettings {
   roles: string | null;
+  scopes: string | null;
+  organizations: string | null;
   search: string | null;
   order: string | null;
   sortBy: string | null;
@@ -50,6 +55,27 @@ export interface AssignTeamMembersRoleRequest {
   scope: string;
 }
 
+export interface GetAllRoleAssignmentsResponse {
+  results: UserRole[];
+  count: number;
+  next: string | null;
+  previous: string | null;
+}
+
+export interface GetOrgsResponse {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results:Array<Org>;
+}
+
+export interface GetScopesResponse {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results:Array<Scope>;
+}
+
 export const getTeamMembers = async (object: string, querySettings: QuerySettings): Promise<GetTeamMembersResponse> => {
   const url = new URL(getApiUrl(`/api/authz/v1/roles/users/?scope=${object}`));
 
@@ -108,3 +134,60 @@ export const revokeUserRoles = async (
   const res = await getAuthenticatedHttpClient().delete(url.toString());
   return camelCaseObject(res.data);
 };
+
+export const getAllRoleAssignments = async (querySettings: QuerySettings)
+: Promise<GetAllRoleAssignmentsResponse> => {
+  const url = new URL(getApiUrl('/api/authz/v1/assignments/'));
+
+  if (querySettings.roles) {
+    url.searchParams.set('roles', querySettings.roles);
+  }
+  if (querySettings.scopes) {
+    url.searchParams.set('scopes', querySettings.scopes);
+  }
+  if (querySettings.organizations) {
+    url.searchParams.set('orgs', querySettings.organizations);
+  }
+  if (querySettings.search) {
+    url.searchParams.set('search', querySettings.search);
+  }
+  if (querySettings.sortBy && querySettings.order) {
+    url.searchParams.set('sort_by', querySettings.sortBy);
+    url.searchParams.set('order', querySettings.order);
+  }
+  url.searchParams.set('page_size', querySettings.pageSize.toString());
+  url.searchParams.set('page', (querySettings.pageIndex + 1).toString());
+
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  return camelCaseObject(data);
+};
+
+export const getOrgs = async (search?: string, page?: number, pageSize?: number): Promise<GetOrgsResponse> => {
+  const url = new URL(getApiUrl('/api/authz/v1/orgs/'));
+  if (search !== undefined) {
+    url.searchParams.set('search', search);
+  }
+  if (page !== undefined) {
+    url.searchParams.set('page', page.toString());
+  }
+  if (pageSize !== undefined) {
+    url.searchParams.set('page_size', pageSize.toString());
+  }
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  return camelCaseObject(data);
+};
+
+export const getScopes = async (search?: string, page?: number, pageSize?: number): Promise<GetScopesResponse> => {
+  const url = new URL(getApiUrl('/api/authz/v1/scopes/'));
+  if (search !== undefined) {
+    url.searchParams.set('search', search);
+  }
+  if (page !== undefined) {
+    url.searchParams.set('page', page.toString());
+  }
+  if (pageSize !== undefined) {
+    url.searchParams.set('page_size', pageSize.toString());
+  }
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  return camelCaseObject(data);
+};
diff --git a/src/authz-module/data/hooks.test.tsx b/src/authz-module/data/hooks.test.tsx
index d55c7e0a..7fa8f9ea 100644
--- a/src/authz-module/data/hooks.test.tsx
+++ b/src/authz-module/data/hooks.test.tsx
@@ -4,6 +4,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
   useLibrary, usePermissionsByRole, useTeamMembers, useAssignTeamMembersRole, useRevokeUserRoles,
+  useAllRoleAssignments,
+  useOrgs,
+  useScopes,
 } from './hooks';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
@@ -35,6 +38,70 @@ const mockLibrary = {
   slug: 'test-library',
 };
 
+const mockAssignments = {
+  results: [
+    {
+      isSuperadmin: false,
+      role: 'course_staff',
+      org: 'OpenedX',
+      scope: 'course-v1:OpenedX+DemoX+DemoCourse',
+      permissionCount: 27,
+      fullName: 'John Doe',
+      username: 'johndoe',
+      email: 'johndoe@example.com',
+    },
+  ],
+  count: 1,
+  next: null,
+  previous: null,
+};
+
+const mockOrgs = {
+  count: 2,
+  next: null,
+  previous: null,
+  results: [
+    { id: 'org1', name: 'Organization 1' },
+    { id: 'org2', name: 'Organization 2' },
+  ],
+};
+
+const mockScopes = {
+  count: 2,
+  next: null,
+  previous: null,
+  results: [
+    {
+      externalKey: 'course-v1:OpenedX+DemoX+DemoCourse',
+      displayName: 'Open edX Demo Course',
+      org: {
+        id: 1,
+        created: '2026-04-02T19:30:36.779095Z',
+        modified: '2026-04-02T19:30:36.779095Z',
+        name: 'OpenedX',
+        shortName: 'OpenedX',
+        description: '',
+        logo: null,
+        active: true,
+      },
+    },
+    {
+      externalKey: 'lib:WGU:CSPROB',
+      displayName: 'Computer Science Problems',
+      org: {
+        id: 2,
+        created: '2026-04-02T19:31:21.196446Z',
+        modified: '2026-04-02T19:31:21.196446Z',
+        name: 'WGU',
+        shortName: 'WGU',
+        description: '',
+        logo: null,
+        active: true,
+      },
+    },
+  ],
+};
+
 const mockQuerySettings = {
   roles: null,
   search: null,
@@ -340,3 +407,123 @@ describe('useRevokeUserRoles', () => {
     expect(calledUrl.searchParams.get('scope')).toBe(revokeRoleData.scope);
   });
 });
+
+describe('useAllRoleAssignments', () => {
+  beforeEach(() => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest.fn(() => Promise.resolve({ data: mockAssignments })),
+    });
+  });
+
+  it('fetches and returns role assignments', async () => {
+    const { result } = renderHook(
+      () => useAllRoleAssignments({
+        roles: null,
+        scopes: null,
+        organizations: null,
+        search: null,
+        order: null,
+        sortBy: null,
+        pageSize: 10,
+        pageIndex: 0,
+      }),
+      { wrapper: createWrapper() },
+    );
+    await waitFor(() => {
+      expect(result.current.data?.results).toHaveLength(1);
+      expect(result.current.data?.results[0].username).toBe('johndoe');
+      expect(result.current.data?.count).toBe(1);
+    });
+  });
+
+  it('handles empty results', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValueOnce({
+      get: jest.fn(() => Promise.resolve({
+        data: {
+          results: [], count: 0, next: null, previous: null,
+        },
+      })),
+    });
+    const { result } = renderHook(
+      () => useAllRoleAssignments({
+        roles: null,
+        scopes: null,
+        organizations: null,
+        search: null,
+        order: null,
+        sortBy: null,
+        pageSize: 10,
+        pageIndex: 0,
+      }),
+      { wrapper: createWrapper() },
+    );
+    await waitFor(() => {
+      expect(result.current.data?.results).toEqual([]);
+      expect(result.current.data?.count).toBe(0);
+    });
+  });
+});
+
+describe('useOrgs', () => {
+  beforeEach(() => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest.fn(() => Promise.resolve({ data: mockOrgs })),
+    });
+  });
+
+  it('fetches and returns organizations', async () => {
+    const { result } = renderHook(() => useOrgs(), { wrapper: createWrapper() });
+    await waitFor(() => {
+      expect(result.current.data?.results).toHaveLength(2);
+      expect(result.current.data?.results[0].name).toBe('Organization 1');
+      expect(result.current.data?.count).toBe(2);
+    });
+  });
+
+  it('handles empty results', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValueOnce({
+      get: jest.fn(() => Promise.resolve({
+        data: {
+          count: 0, next: null, previous: null, results: [],
+        },
+      })),
+    });
+    const { result } = renderHook(() => useOrgs(), { wrapper: createWrapper() });
+    await waitFor(() => {
+      expect(result.current.data?.results).toEqual([]);
+      expect(result.current.data?.count).toBe(0);
+    });
+  });
+});
+
+describe('useScopes', () => {
+  beforeEach(() => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest.fn(() => Promise.resolve({ data: mockScopes })),
+    });
+  });
+
+  it('fetches and returns scopes', async () => {
+    const { result } = renderHook(() => useScopes(), { wrapper: createWrapper() });
+    await waitFor(() => {
+      expect(result.current.data?.results).toHaveLength(2);
+      expect(result.current.data?.results[0].displayName).toBe('Open edX Demo Course');
+      expect(result.current.data?.count).toBe(2);
+    });
+  });
+
+  it('handles empty results', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValueOnce({
+      get: jest.fn(() => Promise.resolve({
+        data: {
+          count: 0, next: null, previous: null, results: [],
+        },
+      })),
+    });
+    const { result } = renderHook(() => useScopes(), { wrapper: createWrapper() });
+    await waitFor(() => {
+      expect(result.current.data?.results).toEqual([]);
+      expect(result.current.data?.count).toBe(0);
+    });
+  });
+});
diff --git a/src/authz-module/data/hooks.ts b/src/authz-module/data/hooks.ts
index bc5090e0..8b0cfa1d 100644
--- a/src/authz-module/data/hooks.ts
+++ b/src/authz-module/data/hooks.ts
@@ -4,8 +4,11 @@ import {
 import { appId } from '@src/constants';
 import { LibraryMetadata } from '@src/types';
 import {
-  assignTeamMembersRole, AssignTeamMembersRoleRequest, getLibrary, getPermissionsByRole, getTeamMembers,
-  GetTeamMembersResponse, PermissionsByRole, QuerySettings, revokeUserRoles, RevokeUserRolesRequest,
+  assignTeamMembersRole, AssignTeamMembersRoleRequest, getAllRoleAssignments,
+  GetAllRoleAssignmentsResponse, getLibrary, getOrgs, GetOrgsResponse,
+  getPermissionsByRole, getScopes, GetScopesResponse, getTeamMembers,
+  GetTeamMembersResponse, PermissionsByRole, QuerySettings, revokeUserRoles,
+  RevokeUserRolesRequest,
 } from './api';
 
 const authzQueryKeys = {
@@ -15,6 +18,9 @@ const authzQueryKeys = {
     ...authzQueryKeys.teamMembersAll(scope), querySettings] as const,
   permissionsByRole: (scope: string) => [...authzQueryKeys.all, 'permissionsByRole', scope] as const,
   library: (libraryId: string) => [...authzQueryKeys.all, 'library', libraryId] as const,
+  allRoleAssignments: (querySettings?: QuerySettings) => [...authzQueryKeys.all, 'allRoleAssignments', querySettings] as const,
+  orgs: (search?: string, page?: number, pageSize?: number) => [...authzQueryKeys.all, 'organizations', search, page, pageSize] as const,
+  scopes: (search?: string, page?: number, pageSize?: number) => [...authzQueryKeys.all, 'scopes', search, page, pageSize] as const,
 };
 
 /**
@@ -110,3 +116,54 @@ export const useRevokeUserRoles = () => {
     },
   });
 };
+
+/**
+ * React Query hook to fetch all role assignments across scopes and roles,
+ * with support for filtering, sorting, and pagination.
+ * It retrieves a comprehensive list of user-role assignments based
+ * on the provided query settings.
+ *
+ * @param querySettings - Optional parameters for filtering by roles, scopes,
+ * organizations, search term, sorting, and pagination.
+ *
+ * @example
+ * const { data: roleAssignments } = useAllRoleAssignments({ roles: 'editor', pageSize: 20 });
+ */
+export const useAllRoleAssignments = (querySettings: QuerySettings) => {
+  const result = useQuery<GetAllRoleAssignmentsResponse, Error>({
+    queryKey: authzQueryKeys.allRoleAssignments(querySettings),
+    queryFn: () => getAllRoleAssignments(querySettings),
+    staleTime: 1000 * 60 * 30, // refetch after 30 minutes
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+  return result;
+};
+
+/**
+ * React query hook to fetch the list of organizations for the organization filter component.
+ * @param search - The search term to filter organizations.
+ * @returns The list of organizations matching the search term.
+ */
+export const useOrgs = (search?: string, page?: number, pageSize?: number) => {
+  const result = useQuery<GetOrgsResponse, Error>({
+    queryKey: authzQueryKeys.orgs(search, page, pageSize),
+    queryFn: () => getOrgs(search, page, pageSize),
+    refetchOnWindowFocus: false,
+  });
+  return result;
+};
+
+/*
+  * React query hook to fetch the list of scopes for the scope filter component.
+  * @param search - The search term to filter scopes.
+  * @returns The list of scopes matching the search term.
+  */
+export const useScopes = (search?: string, page?: number, pageSize?: number) => {
+  const result = useQuery<GetScopesResponse, Error>({
+    queryKey: authzQueryKeys.scopes(search, page, pageSize),
+    queryFn: () => getScopes(search, page, pageSize),
+    refetchOnWindowFocus: false,
+  });
+  return result;
+};
diff --git a/src/authz-module/hooks/useQuerySettings.test.tsx b/src/authz-module/hooks/useQuerySettings.test.tsx
new file mode 100644
index 00000000..6a342fa6
--- /dev/null
+++ b/src/authz-module/hooks/useQuerySettings.test.tsx
@@ -0,0 +1,464 @@
+import { renderHook, act } from '@testing-library/react';
+import { QuerySettings } from '@src/authz-module/data/api';
+import { useQuerySettings } from './useQuerySettings';
+
+describe('useQuerySettings', () => {
+  const defaultQuerySettings: QuerySettings = {
+    roles: null,
+    search: null,
+    pageSize: 10,
+    pageIndex: 0,
+    sortBy: null,
+    order: null,
+    scopes: null,
+    organizations: null,
+  };
+
+  it('should initialize with default query settings when no initial settings provided', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    expect(result.current.querySettings).toEqual(defaultQuerySettings);
+    expect(typeof result.current.handleTableFetch).toBe('function');
+  });
+
+  it('should initialize with custom initial query settings', () => {
+    const customInitialSettings: QuerySettings = {
+      roles: 'admin,editor',
+      search: 'test-user',
+      pageSize: 20,
+      pageIndex: 2,
+      sortBy: 'username',
+      order: 'asc',
+      scopes: null,
+      organizations: null,
+    };
+
+    const { result } = renderHook(() => useQuerySettings(customInitialSettings));
+
+    expect(result.current.querySettings).toEqual(customInitialSettings);
+  });
+
+  it('should update query settings when handleTableFetch is called with new filters', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 15,
+      pageIndex: 1,
+      sortBy: [{ id: 'username', desc: false }],
+      filters: [
+        { id: 'role', value: ['admin', 'editor'] },
+        { id: 'name', value: 'john' },
+      ],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings).toEqual({
+      roles: 'admin,editor',
+      search: 'john',
+      pageSize: 15,
+      pageIndex: 1,
+      sortBy: 'username',
+      order: 'asc',
+      scopes: null,
+      organizations: null,
+    });
+  });
+
+  it('should handle descending sort order by adding minus prefix', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 10,
+      pageIndex: 0,
+      sortBy: [{ id: 'email', desc: true }],
+      filters: [],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings.order).toBe('desc');
+  });
+
+  it('should convert camelCase sort field to snake_case', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 10,
+      pageIndex: 0,
+      sortBy: [{ id: 'firstName', desc: false }],
+      filters: [],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings.sortBy).toBe('first_name');
+  });
+
+  it('should convert camelCase sort field to snake_case with descending order', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 10,
+      pageIndex: 0,
+      sortBy: [{ id: 'lastName', desc: true }],
+      filters: [],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings.order).toBe('desc');
+  });
+
+  it('should handle empty filters by setting values to null', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 10,
+      pageIndex: 0,
+      sortBy: [],
+      filters: [],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings).toEqual({
+      roles: null,
+      search: null,
+      pageSize: 10,
+      pageIndex: 0,
+      order: null,
+      sortBy: null,
+      organizations: null,
+      scopes: null,
+    });
+  });
+
+  it('should handle empty roles filter array by setting roles to null', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 10,
+      pageIndex: 0,
+      sortBy: [],
+      filters: [
+        { id: 'roles', value: [] },
+        { id: 'username', value: '' },
+      ],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings).toEqual({
+      roles: null,
+      search: null,
+      pageSize: 10,
+      pageIndex: 0,
+      order: null,
+      sortBy: null,
+      organizations: null,
+      scopes: null,
+    });
+  });
+
+  it('should handle missing filters by setting default values', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 10,
+      pageIndex: 0,
+      sortBy: [],
+      filters: [
+        { id: 'roles', value: undefined },
+        { id: 'username', value: undefined },
+      ],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings).toEqual({
+      roles: null,
+      search: null,
+      pageSize: 10,
+      pageIndex: 0,
+      order: null,
+      sortBy: null,
+      organizations: null,
+      scopes: null,
+    });
+  });
+
+  it('should use default pagination values when not provided', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      sortBy: [],
+      filters: [],
+    } as any; // Missing pageSize and pageIndex
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings.pageSize).toBe(10);
+    expect(result.current.querySettings.pageIndex).toBe(0);
+  });
+
+  it('should not update state if settings have not changed', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 10,
+      pageIndex: 0,
+      sortBy: [],
+      filters: [],
+    };
+
+    const initialSettings = result.current.querySettings;
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    // Should be the same object reference since no changes occurred
+    expect(result.current.querySettings).toBe(initialSettings);
+  });
+
+  it('should update state when settings have changed', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const initialSettings = result.current.querySettings;
+
+    const tableFilters = {
+      pageSize: 20, // Different from default
+      pageIndex: 0,
+      sortBy: [],
+      filters: [],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    // Should be a different object reference since pageSize changed
+    expect(result.current.querySettings).not.toBe(initialSettings);
+    expect(result.current.querySettings.pageSize).toBe(20);
+  });
+
+  it('should handle complex filter combinations', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 25,
+      pageIndex: 3,
+      sortBy: [{ id: 'userRole', desc: true }],
+      filters: [
+        { id: 'role', value: ['admin', 'editor', 'viewer'] },
+        { id: 'name', value: 'test@example.com' },
+        { id: 'otherFilter', value: 'ignored' }, // Should be ignored
+        { id: 'org', value: ['org1', 'org2'] },
+        { id: 'scope', value: ['scope1', 'scope2'] },
+      ],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings).toEqual({
+      roles: 'admin,editor,viewer',
+      search: 'test@example.com',
+      pageSize: 25,
+      pageIndex: 3,
+      order: 'desc',
+      sortBy: 'user_role',
+      organizations: 'org1,org2',
+      scopes: 'scope1,scope2',
+
+    });
+  });
+
+  it('should handle multiple camelCase words in sort field', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 10,
+      pageIndex: 0,
+      sortBy: [{ id: 'userFirstLastName', desc: false }],
+      filters: [],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings.sortBy).toBe('user_first_last_name');
+  });
+
+  it('should preserve handleTableFetch function reference across renders', () => {
+    const { result, rerender } = renderHook(() => useQuerySettings());
+
+    const initialHandleTableFetch = result.current.handleTableFetch;
+
+    rerender();
+
+    expect(result.current.handleTableFetch).toBe(initialHandleTableFetch);
+  });
+
+  it('should handle whitespace-only search values as provided', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const tableFilters = {
+      pageSize: 10,
+      pageIndex: 0,
+      sortBy: [],
+      filters: [
+        { id: 'name', value: '   ' }, // Whitespace only
+      ],
+    };
+
+    act(() => {
+      result.current.handleTableFetch(tableFilters);
+    });
+
+    expect(result.current.querySettings.search).toBe('   ');
+  });
+
+  it('should detect changes in roles filter', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    // First set some roles
+    act(() => {
+      result.current.handleTableFetch({
+        pageSize: 10,
+        pageIndex: 0,
+        sortBy: [],
+        filters: [{ id: 'role', value: ['admin'] }],
+      });
+    });
+
+    const settingsAfterFirstUpdate = result.current.querySettings;
+
+    // Then change roles
+    act(() => {
+      result.current.handleTableFetch({
+        pageSize: 10,
+        pageIndex: 0,
+        sortBy: [],
+        filters: [{ id: 'role', value: ['editor'] }],
+      });
+    });
+
+    expect(result.current.querySettings).not.toBe(settingsAfterFirstUpdate);
+    expect(result.current.querySettings.roles).toBe('editor');
+  });
+
+  it('should detect changes in search filter', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    // First set a search term
+    act(() => {
+      result.current.handleTableFetch({
+        pageSize: 10,
+        pageIndex: 0,
+        sortBy: [],
+        filters: [{ id: 'name', value: 'john' }],
+      });
+    });
+
+    const settingsAfterFirstUpdate = result.current.querySettings;
+
+    // Then change search term
+    act(() => {
+      result.current.handleTableFetch({
+        pageSize: 10,
+        pageIndex: 0,
+        sortBy: [],
+        filters: [{ id: 'name', value: 'jane' }],
+      });
+    });
+
+    expect(result.current.querySettings).not.toBe(settingsAfterFirstUpdate);
+    expect(result.current.querySettings.search).toBe('jane');
+  });
+
+  it('should detect changes in ordering', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    // First set ordering
+    act(() => {
+      result.current.handleTableFetch({
+        pageSize: 10,
+        pageIndex: 0,
+        sortBy: [{ id: 'username', desc: false }],
+        filters: [],
+      });
+    });
+
+    const settingsAfterFirstUpdate = result.current.querySettings;
+
+    // Then change ordering
+    act(() => {
+      result.current.handleTableFetch({
+        pageSize: 10,
+        pageIndex: 0,
+        sortBy: [{ id: 'email', desc: true }],
+        filters: [],
+      });
+    });
+
+    expect(result.current.querySettings).not.toBe(settingsAfterFirstUpdate);
+    expect(result.current.querySettings.sortBy).toBe('email');
+    expect(result.current.querySettings.order).toBe('desc');
+  });
+
+  it('should detect changes in pageSize', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const initialSettings = result.current.querySettings;
+
+    act(() => {
+      result.current.handleTableFetch({
+        pageSize: 50,
+        pageIndex: 0,
+        sortBy: [],
+        filters: [],
+      });
+    });
+
+    expect(result.current.querySettings).not.toBe(initialSettings);
+    expect(result.current.querySettings.pageSize).toBe(50);
+  });
+
+  it('should detect changes in pageIndex', () => {
+    const { result } = renderHook(() => useQuerySettings());
+
+    const initialSettings = result.current.querySettings;
+
+    act(() => {
+      result.current.handleTableFetch({
+        pageSize: 10,
+        pageIndex: 5,
+        sortBy: [],
+        filters: [],
+      });
+    });
+
+    expect(result.current.querySettings).not.toBe(initialSettings);
+    expect(result.current.querySettings.pageIndex).toBe(5);
+  });
+});
diff --git a/src/authz-module/hooks/useQuerySettings.tsx b/src/authz-module/hooks/useQuerySettings.tsx
new file mode 100644
index 00000000..33675c82
--- /dev/null
+++ b/src/authz-module/hooks/useQuerySettings.tsx
@@ -0,0 +1,96 @@
+import { useCallback, useState } from 'react';
+import { QuerySettings } from '@src/authz-module/data/api';
+
+interface DataTableFilters {
+  pageSize: number;
+  pageIndex: number;
+  sortBy: Array<{ id: string; desc: boolean }>;
+  filters: Array<{ id: string; value: any }>;
+}
+
+interface UseQuerySettingsReturn {
+  querySettings: QuerySettings;
+  handleTableFetch: (tableFilters: DataTableFilters) => void;
+}
+
+enum SortOrderKeys {
+  ASC = 'asc',
+  DESC = 'desc',
+}
+
+/**
+ * Custom hook to manage query settings for table data fetching
+ * Converts DataTable filter/sort/pagination settings to API query parameters
+ * and manages URL synchronization
+ *
+ * @param initialQuerySettings - Initial query settings
+ * @returns Object containing querySettings and handleTableFetch function
+ */
+export const useQuerySettings = (
+  initialQuerySettings: QuerySettings = {
+    roles: null,
+    scopes: null,
+    organizations: null,
+    search: null,
+    pageSize: 10,
+    pageIndex: 0,
+    order: null,
+    sortBy: null,
+  },
+): UseQuerySettingsReturn => {
+  const [querySettings, setQuerySettings] = useState<QuerySettings>(initialQuerySettings);
+
+  const handleTableFetch = useCallback((tableFilters: DataTableFilters) => {
+    setQuerySettings((prevSettings) => {
+      // Extract filters
+      const rolesFilter = tableFilters.filters?.find((filter) => filter.id === 'role')?.value?.join(',') ?? '';
+      const searchFilter = tableFilters.filters?.find((filter) => filter.id === 'name')?.value ?? '';
+      const organizationsFilter = tableFilters.filters?.find((filter) => filter.id === 'org')?.value?.join(',') ?? '';
+      const scopesFilter = tableFilters.filters?.find((filter) => filter.id === 'scope')?.value?.join(',') ?? '';
+
+      // Extract pagination
+      const { pageSize = 10, pageIndex = 0 } = tableFilters;
+
+      // Extract and convert sorting
+      let sortByOption = '';
+      let sortByOrder = '';
+      if (tableFilters.sortBy?.length) {
+        sortByOption = tableFilters.sortBy[0]?.id.replace(/([A-Z])/g, '_$1').toLowerCase();
+        sortByOrder = tableFilters.sortBy[0]?.desc ? SortOrderKeys.DESC : SortOrderKeys.ASC;
+      }
+
+      const newQuerySettings: QuerySettings = {
+        roles: rolesFilter || null,
+        scopes: scopesFilter || null,
+        organizations: organizationsFilter || null,
+        search: searchFilter || null,
+        sortBy: sortByOption || null,
+        order: sortByOrder || null,
+        pageSize,
+        pageIndex,
+      };
+
+      const hasChanged = (
+        prevSettings.roles !== newQuerySettings.roles
+        || prevSettings.scopes !== newQuerySettings.scopes
+        || prevSettings.organizations !== newQuerySettings.organizations
+        || prevSettings.search !== newQuerySettings.search
+        || prevSettings.pageSize !== newQuerySettings.pageSize
+        || prevSettings.pageIndex !== newQuerySettings.pageIndex
+        || prevSettings.sortBy !== newQuerySettings.sortBy
+        || prevSettings.order !== newQuerySettings.order
+      );
+
+      if (!hasChanged) {
+        return prevSettings; // No change, prevent unnecessary update
+      }
+
+      return newQuerySettings;
+    });
+  }, []);
+
+  return {
+    querySettings,
+    handleTableFetch,
+  };
+};
diff --git a/src/authz-module/index.scss b/src/authz-module/index.scss
index 4c6ef34f..93543517 100644
--- a/src/authz-module/index.scss
+++ b/src/authz-module/index.scss
@@ -1,19 +1,24 @@
 @use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
 
-.authz-libraries {
+.authz-module {
   --height-action-divider: 30px;
 
-  hr {
-    border-top: var(--pgn-size-border-width) solid var(--pgn-color-border);
-    width: 100%;
+  .pgn__data-table-wrapper {
+    padding: 1rem;
   }
 
-  @media (--pgn-size-breakpoint-min-width-lg) {
-    hr {
-      border-right: var(--pgn-size-border-width) solid var(--pgn-color-border);
-      height: var(--height-action-divider);
-      width: 0;
-    }
+  .filters .dropdown-toggle::after {
+    display: none !important;
+  }
+  .pgn__data-table tr:has(td[data-role="Super Admin"]),
+  .pgn__data-table tr:has(td[data-role="Global Staff"]) {
+    background-color: var(--pgn-color-primary-200);
+  }
+
+  hr {
+    border-right: var(--pgn-size-border-width) solid var(--pgn-color-border);
+    height: var(--height-action-divider);
+    width: 0;
   }
 
   .tab-content {
diff --git a/src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx b/src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx
index 0ed2346a..63aba40e 100644
--- a/src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx
+++ b/src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx
@@ -3,7 +3,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, useToggle } from '@openedx/paragon';
 import { Plus } from '@openedx/paragon/icons';
 
-import { PutAssignTeamMembersRoleResponse } from 'authz-module/data/api';
+import { PutAssignTeamMembersRoleResponse } from '@src/authz-module/data/api';
 import { useAssignTeamMembersRole } from '@src/authz-module/data/hooks';
 import { RoleOperationErrorStatus } from '@src/authz-module/constants';
 import { AppToast, useToastManager } from '@src/authz-module/libraries-manager/ToastManagerContext';
diff --git a/src/authz-module/libraries-manager/components/TeamTable/index.tsx b/src/authz-module/libraries-manager/components/TeamTable/index.tsx
index 3763bd8d..5b1bc893 100644
--- a/src/authz-module/libraries-manager/components/TeamTable/index.tsx
+++ b/src/authz-module/libraries-manager/components/TeamTable/index.tsx
@@ -12,6 +12,7 @@ import { useTeamMembers } from '@src/authz-module/data/hooks';
 import { useLibraryAuthZ } from '@src/authz-module/libraries-manager/context';
 import { useToastManager } from '@src/authz-module/libraries-manager/ToastManagerContext';
 import { SKELETON_ROWS } from '@src/authz-module/libraries-manager/constants';
+import { TABLE_DEFAULT_PAGE_SIZE } from '@src/authz-module/constants';
 import { useQuerySettings } from './hooks/useQuerySettings';
 import TableControlBar from './components/TableControlBar';
 import messages from './messages';
@@ -19,8 +20,6 @@ import {
   ActionCell, EmailCell, NameCell, RolesCell,
 } from './components/Cells';
 
-const DEFAULT_PAGE_SIZE = 10;
-
 const TeamTable = () => {
   const intl = useIntl();
   const {
@@ -39,7 +38,7 @@ const TeamTable = () => {
   }
 
   const rows = isError ? [] : (teamMembers?.results || SKELETON_ROWS);
-  const pageCount = teamMembers?.count ? Math.ceil(teamMembers.count / DEFAULT_PAGE_SIZE) : 1;
+  const pageCount = teamMembers?.count ? Math.ceil(teamMembers.count / TABLE_DEFAULT_PAGE_SIZE) : 1;
 
   const adaptedFilterChoices = useMemo(
     () => roles.map((role) => ({
@@ -68,7 +67,7 @@ const TeamTable = () => {
       data={rows}
       itemCount={teamMembers?.count || 0}
       pageCount={pageCount}
-      initialState={{ pageSize: DEFAULT_PAGE_SIZE }}
+      initialState={{ pageSize: TABLE_DEFAULT_PAGE_SIZE }}
       additionalColumns={[
         {
           id: 'action',
diff --git a/src/authz-module/libraries-manager/constants.ts b/src/authz-module/libraries-manager/constants.ts
index d1368961..787edfb9 100644
--- a/src/authz-module/libraries-manager/constants.ts
+++ b/src/authz-module/libraries-manager/constants.ts
@@ -1,20 +1,26 @@
 import { PermissionMetadata, ResourceMetadata, RoleMetadata } from 'types';
+import {
+  Group, CollectionsBookmark, Notes, AutoAwesomeMosaic,
+} from '@openedx/paragon/icons';
 
 export const CONTENT_LIBRARY_PERMISSIONS = {
   DELETE_LIBRARY: 'content_libraries.delete_library',
   MANAGE_LIBRARY_TAGS: 'content_libraries.manage_library_tags',
   VIEW_LIBRARY: 'content_libraries.view_library',
 
+  CREATE_LIBRARY_CONTENT: 'content_libraries.create_library_content',
   EDIT_LIBRARY_CONTENT: 'content_libraries.edit_library_content',
+  DELETE_LIBRARY_CONTENT: 'content_libraries.delete_library_content',
   PUBLISH_LIBRARY_CONTENT: 'content_libraries.publish_library_content',
   REUSE_LIBRARY_CONTENT: 'content_libraries.reuse_library_content',
+  IMPORT_LIBRARY_CONTENT: 'content_libraries.import_library_content',
+
+  MANAGE_LIBRARY_TEAM: 'content_libraries.manage_library_team',
+  VIEW_LIBRARY_TEAM: 'content_libraries.view_library_team',
 
   CREATE_LIBRARY_COLLECTION: 'content_libraries.create_library_collection',
   EDIT_LIBRARY_COLLECTION: 'content_libraries.edit_library_collection',
   DELETE_LIBRARY_COLLECTION: 'content_libraries.delete_library_collection',
-
-  MANAGE_LIBRARY_TEAM: 'content_libraries.manage_library_team',
-  VIEW_LIBRARY_TEAM: 'content_libraries.view_library_team',
 };
 
 // Note: this information will eventually come from the backend API
@@ -27,27 +33,114 @@ export const libraryRolesMetadata: RoleMetadata[] = [
 ];
 
 export const libraryResourceTypes: ResourceMetadata[] = [
-  { key: 'library', label: 'Library', description: 'Permissions related to the library as a whole.' },
-  { key: 'library_content', label: 'Content', description: 'Permissions to create, edit, delete, and publish individual content items within the library.' },
-  { key: 'library_collection', label: 'Collection', description: 'Permissions to create, edit, and delete content collections within the library.' },
-  { key: 'library_team', label: 'Team', description: 'Permissions to manage user access and roles within the library.' },
+  {
+    key: 'library', label: 'Library', description: 'Permissions related to the library as a whole.', icon: CollectionsBookmark,
+  },
+  {
+    key: 'library_content', label: 'Content', description: 'Permissions to create, edit, delete, and publish individual content items within the library.', icon: Notes,
+  },
+  {
+    key: 'library_team', label: 'Team', description: 'Permissions to manage user access and roles within the library.', icon: Group,
+  },
+  {
+    key: 'library_collection', label: 'Collection', description: 'Permissions to create, edit, and delete content collections within the library.', icon: AutoAwesomeMosaic,
+  },
 ];
 
 export const libraryPermissions: PermissionMetadata[] = [
-  { key: CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY, resource: 'library', description: 'Allows the user to delete the library and all its contents.' },
-  { key: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TAGS, resource: 'library', description: 'Add or remove tags from content.' },
   { key: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY, resource: 'library', description: 'View content, search, filter, and sort within the library.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TAGS, resource: 'library', description: 'Add or remove tags from content.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY, resource: 'library', description: 'Allows the user to delete the library and all its contents.' },
 
+  { key: CONTENT_LIBRARY_PERMISSIONS.CREATE_LIBRARY_CONTENT, resource: 'library_content', description: 'Create content within the library.' },
   { key: CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_CONTENT, resource: 'library_content', description: 'Edit content in draft mode' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_CONTENT, resource: 'library_content', description: 'Delete content within the library.' },
   { key: CONTENT_LIBRARY_PERMISSIONS.PUBLISH_LIBRARY_CONTENT, resource: 'library_content', description: 'Publish content, making it available for reuse' },
   { key: CONTENT_LIBRARY_PERMISSIONS.REUSE_LIBRARY_CONTENT, resource: 'library_content', description: 'Reuse published content within a course.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.IMPORT_LIBRARY_CONTENT, resource: 'library_content', description: 'Import content from courses.' },
+
+  { key: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM, resource: 'library_team', description: 'View the list of users who have access to the library.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, resource: 'library_team', description: 'Add, remove, and assign roles to users within the library.' },
 
   { key: CONTENT_LIBRARY_PERMISSIONS.CREATE_LIBRARY_COLLECTION, resource: 'library_collection', description: 'Create new collections within a library.' },
   { key: CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_COLLECTION, resource: 'library_collection', description: 'Add or remove content from existing collections.' },
   { key: CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_COLLECTION, resource: 'library_collection', description: 'Delete entire collections from the library.' },
+];
+
+export const rolesLibraryObject = [
+  {
+    role: 'library_admin',
+    permissions: [
+      CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY,
+      CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TAGS,
+      CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY,
+      CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.PUBLISH_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM,
+      CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM,
+      CONTENT_LIBRARY_PERMISSIONS.CREATE_LIBRARY_COLLECTION,
+      CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_COLLECTION,
+      CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_COLLECTION,
+      CONTENT_LIBRARY_PERMISSIONS.CREATE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.REUSE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.IMPORT_LIBRARY_CONTENT,
+    ],
+    userCount: 1,
+    name: 'Library Admin',
+    description: 'The Library Admin has full control over the library, including managing users, modifying content, and handling publishing workflows. They ensure content is properly maintained and accessible as needed.',
+  },
+  {
+    role: 'library_author',
+    permissions: [
+      CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY,
+      CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TAGS,
+      CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.PUBLISH_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.REUSE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM,
+      CONTENT_LIBRARY_PERMISSIONS.CREATE_LIBRARY_COLLECTION,
+      CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_COLLECTION,
+      CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_COLLECTION,
+      CONTENT_LIBRARY_PERMISSIONS.CREATE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.IMPORT_LIBRARY_CONTENT,
+    ],
+    userCount: 1,
+    name: 'Library Author',
+    description: 'The Library Author is responsible for creating, editing, and publishing content within a library. They can manage tags and collections but cannot delete libraries or manage users.',
+  },
+  {
+    role: 'library_contributor',
+    permissions: [
+      CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY,
+      CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TAGS,
+      CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.REUSE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM,
+      CONTENT_LIBRARY_PERMISSIONS.CREATE_LIBRARY_COLLECTION,
+      CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_COLLECTION,
+      CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_COLLECTION,
+      CONTENT_LIBRARY_PERMISSIONS.CREATE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.IMPORT_LIBRARY_CONTENT,
 
-  { key: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, resource: 'library_team', description: 'View the list of users who have access to the library.' },
-  { key: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM, resource: 'library_team', description: 'Add, remove, and assign roles to users within the library.' },
+    ],
+    userCount: 1,
+    name: 'Library Contributor',
+    description: 'The Library Contributor can create and edit content within a library but cannot publish it. They support the authoring process while leaving final publishing to Authors or Admins.',
+  },
+  {
+    role: 'library_user',
+    permissions: [
+      CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY,
+      CONTENT_LIBRARY_PERMISSIONS.REUSE_LIBRARY_CONTENT,
+      CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM,
+    ],
+    userCount: 1,
+    name: 'Library User',
+    description: 'The Library User can view and reuse content but cannot edit or delete anything.',
+  },
 ];
 
 export const DEFAULT_TOAST_DELAY = 5000;
diff --git a/src/authz-module/libraries-manager/messages.ts b/src/authz-module/libraries-manager/messages.ts
index 9ed3f7d4..bbb2ad41 100644
--- a/src/authz-module/libraries-manager/messages.ts
+++ b/src/authz-module/libraries-manager/messages.ts
@@ -4,27 +4,72 @@ const messages = defineMessages({
   'library.authz.manage.page.title': {
     id: 'library.authz.manage.page.title',
     defaultMessage: 'Library Team Management',
-    description: 'Libreries AuthZ page title',
+    description: 'Libraries AuthZ page title',
   },
   'library.authz.breadcrumb.root': {
     id: 'library.authz.breadcrumb.root',
     defaultMessage: 'Manage Access',
-    description: 'Libreries AuthZ root breafcrumb',
+    description: 'Libraries AuthZ root breadcrumb',
   },
   'library.authz.tabs.team': {
     id: 'library.authz.tabs.team',
     defaultMessage: 'Team Members',
-    description: 'Libreries AuthZ title for the team management tab',
+    description: 'Libraries AuthZ title for the team management tab',
   },
   'library.authz.tabs.roles': {
     id: 'library.authz.tabs.roles',
     defaultMessage: 'Roles',
-    description: 'Libreries AuthZ title for the roles tab',
+    description: 'Libraries AuthZ title for the roles tab',
   },
   'library.authz.tabs.permissions': {
     id: 'library.authz.tabs.permissions',
     defaultMessage: 'Permissions',
-    description: 'Libreries AuthZ title for the permissions tab',
+    description: 'Libraries AuthZ title for the permissions tab',
+  },
+  'library.authz.tabs.permissionsRoles': {
+    id: 'library.authz.tabs.permissionsRoles',
+    defaultMessage: 'Roles and Permissions',
+    description: 'Libraries AuthZ title for the permissions and roles tab',
+  },
+  'library.authz.tabs.permissionsRoles.courses.alert.title': {
+    id: 'library.authz.tabs.permissionsRoles.courses.alert.title',
+    defaultMessage: 'Course Roles',
+    description: 'Libraries AuthZ title for the course roles alert',
+  },
+  'library.authz.tabs.permissionsRoles.courses.tab': {
+    id: 'library.authz.tabs.permissionsRoles.courses.tab',
+    defaultMessage: 'Courses',
+    description: 'Libraries AuthZ title for the course roles tab',
+  },
+  'library.authz.tabs.permissionsRoles.libraries.tab': {
+    id: 'library.authz.tabs.permissionsRoles.libraries.tab',
+    defaultMessage: 'Libraries',
+    description: 'Libraries AuthZ title for the libraries roles tab',
+  },
+  'library.authz.tabs.permissionsRoles.libraries.tab.title': {
+    id: 'library.authz.tabs.permissionsRoles.libraries.tab.title',
+    defaultMessage: 'Library Roles',
+    description: 'Libraries AuthZ title for the library roles table',
+  },
+  'library.authz.tabs.permissionsRoles.courses.tab.title': {
+    id: 'library.authz.tabs.permissionsRoles.courses.tab.title',
+    defaultMessage: 'Course Roles',
+    description: 'Libraries AuthZ title for the course roles table',
+  },
+  'library.authz.tabs.permissionsRoles.courses.alert.note': {
+    id: 'library.authz.tabs.permissionsRoles.courses.alert.note',
+    defaultMessage: 'Note:',
+    description: 'Libraries AuthZ note for the course roles alert',
+  },
+  'library.authz.tabs.permissionsRoles.courses.alert.description': {
+    id: 'library.authz.tabs.permissionsRoles.courses.alert.description',
+    defaultMessage: 'This list shows the permissions currently available in Authoring Studio. Some roles may grant additional permissions manages outside this interface.',
+    description: 'Libraries AuthZ description for the course roles alert',
+  },
+  'library.authz.tabs.permissionsRoles.courses.alert.link': {
+    id: 'library.authz.tabs.permissionsRoles.courses.alert.link',
+    defaultMessage: 'See full documentation',
+    description: 'Libraries AuthZ link for the course roles alert',
   },
   'library.authz.team.remove.user.toast.success.description': {
     id: 'library.authz.team.remove.user.toast.success.description',
@@ -44,12 +89,12 @@ const messages = defineMessages({
   'library.authz.team.toast.502.error.message': {
     id: 'library.authz.team.toast.502.error.message',
     defaultMessage: '<Bold>We\'re having trouble connecting to our services.</Bold> <Br></Br>Please try again later.',
-    description: 'Libraries bad getaway error message',
+    description: 'Libraries bad gateway error message',
   },
   'library.authz.team.toast.503.error.message': {
     id: 'library.authz.team.toast.503.error.message',
     defaultMessage: '<Bold>The service is temporarily unavailable.</Bold> <Br></Br>Please try again in a few moments.',
-    description: 'Libraries service temporary unabailable message',
+    description: 'Libraries service temporary unavailable message',
   },
   'library.authz.team.toast.408.error.message': {
     id: 'library.authz.team.toast.408.error.message',
diff --git a/src/authz-module/messages.ts b/src/authz-module/messages.ts
new file mode 100644
index 00000000..88229f8c
--- /dev/null
+++ b/src/authz-module/messages.ts
@@ -0,0 +1,13 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages(
+  {
+    'authz.management.assign.role.title': {
+      id: 'authz.management.assign.role.title',
+      defaultMessage: 'Assign Role',
+      description: 'Text for the assign role button',
+    },
+  },
+);
+
+export default messages;
diff --git a/src/authz-module/team-members/TeamMembersTable.test.tsx b/src/authz-module/team-members/TeamMembersTable.test.tsx
new file mode 100644
index 00000000..7619b88c
--- /dev/null
+++ b/src/authz-module/team-members/TeamMembersTable.test.tsx
@@ -0,0 +1,212 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithAllProviders } from '@src/setupTest';
+import { useAllRoleAssignments, useOrgs, useScopes } from '@src/authz-module/data/hooks';
+import { ToastManagerProvider } from '@src/authz-module/libraries-manager/ToastManagerContext';
+import TeamMembersTable from './TeamMembersTable';
+
+const mockedAllRoleAssignments = {
+  data: {
+    results: [
+      {
+        isSuperadmin: false,
+        role: 'course_staff',
+        org: 'OpenedX',
+        scope: 'course-v1:OpenedX+DemoX+DemoCourse',
+        permissionCount: 27,
+        fullName: 'John Doe',
+        username: 'johndoe',
+        email: 'johndoe@example.com',
+      },
+      {
+        isSuperadmin: true,
+        role: 'super_admin',
+        org: 'Global',
+        scope: 'system',
+        permissionCount: 100,
+        fullName: 'Jane Admin',
+        username: 'janeadmin',
+        email: 'jane@example.com',
+      },
+    ],
+    count: 2,
+    next: null,
+    previous: null,
+  },
+  error: null,
+  isLoading: false,
+  refetch: jest.fn(),
+};
+
+const mockedOrgs = {
+  data: {
+    count: 2,
+    next: null,
+    previous: null,
+    results: [
+      { id: 'org1', name: 'Organization 1' },
+      { id: 'org2', name: 'Organization 2' },
+    ],
+  },
+  error: null,
+  isLoading: false,
+  refetch: jest.fn(),
+};
+
+const mockedScopes = {
+  data: {
+    count: 2,
+    next: null,
+    previous: null,
+    results: [
+      {
+        externalKey: 'course-v1:OpenedX+DemoX+DemoCourse',
+        displayName: 'Open edX Demo Course',
+        org: {
+          id: 1,
+          created: '2026-04-02T19:30:36.779095Z',
+          modified: '2026-04-02T19:30:36.779095Z',
+          name: 'OpenedX',
+          shortName: 'OpenedX',
+          description: '',
+          logo: null,
+          active: true,
+        },
+      },
+      {
+        externalKey: 'lib:WGU:CSPROB',
+        displayName: 'Computer Science Problems',
+        org: {
+          id: 2,
+          created: '2026-04-02T19:31:21.196446Z',
+          modified: '2026-04-02T19:31:21.196446Z',
+          name: 'WGU',
+          shortName: 'WGU',
+          description: '',
+          logo: null,
+          active: true,
+        },
+      },
+    ],
+  },
+  error: null,
+  isLoading: false,
+  refetch: jest.fn(),
+};
+
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+}));
+
+jest.mock('@src/authz-module/data/hooks', () => ({
+  useAllRoleAssignments: jest.fn(),
+  useOrgs: jest.fn(),
+  useScopes: jest.fn(),
+}));
+
+const mockApiResponses = (
+  allAsignmentsResponse = mockedAllRoleAssignments,
+  orgResponse = mockedOrgs,
+  scopesResponse = mockedScopes,
+) => {
+  (useAllRoleAssignments as jest.Mock).mockReturnValue(allAsignmentsResponse);
+  (useOrgs as jest.Mock).mockReturnValue(orgResponse);
+  (useScopes as jest.Mock).mockReturnValue(scopesResponse);
+};
+
+describe('TeamMembersTable', () => {
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+
+  it('renders table with role assignments data', async () => {
+    const presetScope = 'course-v1:OpenedX+DemoX+DemoCourse';
+    mockApiResponses();
+    renderWithAllProviders(<ToastManagerProvider><TeamMembersTable presetScope={presetScope} /></ToastManagerProvider>);
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.getByText('Jane Admin')).toBeInTheDocument();
+      expect(screen.getByText('johndoe@example.com')).toBeInTheDocument();
+      expect(screen.getByText('jane@example.com')).toBeInTheDocument();
+    });
+  });
+
+  it('shows loading state initially', () => {
+    const allAsignmentsResponse = { ...mockedAllRoleAssignments, isLoading: true };
+    mockApiResponses(allAsignmentsResponse);
+    renderWithAllProviders(<ToastManagerProvider><TeamMembersTable /></ToastManagerProvider>);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('shows error toast message', () => {
+    const allAsignmentsResponse = {
+      ...mockedAllRoleAssignments,
+      isLoading: false,
+      error: new Error('Failed to fetch'),
+      data: { results: [] },
+    };
+    // @ts-ignore
+    mockApiResponses(allAsignmentsResponse);
+    renderWithAllProviders(<ToastManagerProvider><TeamMembersTable /></ToastManagerProvider>);
+    expect(screen.getByText(/Something went wrong on our end./)).toBeInTheDocument();
+  });
+  it('renders table headers correctly', async () => {
+    mockApiResponses();
+    renderWithAllProviders(<ToastManagerProvider><TeamMembersTable /></ToastManagerProvider>);
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('Email')).toBeInTheDocument();
+      expect(screen.getAllByText('Organization').length).toBe(2); // Header and org filter;
+      expect(screen.getAllByText('Scope').length).toBe(2); // Header and scope filter;
+      expect(screen.getAllByText('Role').length).toBe(2); // Header and role filter;
+      expect(screen.getByText('Actions')).toBeInTheDocument();
+    });
+  });
+
+  it('renders view action buttons for each user', async () => {
+    mockApiResponses();
+    renderWithAllProviders(<ToastManagerProvider><TeamMembersTable /></ToastManagerProvider>);
+    await waitFor(() => {
+      const viewButtons = screen.getAllByRole('button', { name: /view/i });
+      expect(viewButtons).toHaveLength(2);
+    });
+  });
+
+  it('navigates to user profile when view button is clicked', async () => {
+    const user = userEvent.setup();
+    mockApiResponses();
+    renderWithAllProviders(<ToastManagerProvider><TeamMembersTable /></ToastManagerProvider>);
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+    const viewButtons = screen.getAllByRole('button', { name: /view/i });
+    await user.click(viewButtons[0]);
+    expect(mockNavigate).toHaveBeenCalledWith('/authz/user/johndoe');
+  });
+
+  it('handles empty data gracefully', async () => {
+    const allAsignmentsResponse = {
+      data: {
+        results: [],
+        count: 0,
+        next: null,
+        previous: null,
+      },
+      error: null,
+      isLoading: false,
+      refetch: jest.fn(),
+    };
+    mockApiResponses(allAsignmentsResponse);
+    renderWithAllProviders(<ToastManagerProvider><TeamMembersTable /></ToastManagerProvider>);
+    await waitFor(() => {
+      expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/authz-module/team-members/TeamMembersTable.tsx b/src/authz-module/team-members/TeamMembersTable.tsx
new file mode 100644
index 00000000..efa930fe
--- /dev/null
+++ b/src/authz-module/team-members/TeamMembersTable.tsx
@@ -0,0 +1,145 @@
+import { useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash.debounce';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  DataTable,
+  TextFilter,
+} from '@openedx/paragon';
+
+import { useToastManager } from '@src/authz-module/libraries-manager/ToastManagerContext';
+import { useQuerySettings } from '@src/authz-module/hooks/useQuerySettings';
+import OrgFilter from '@src/authz-module/components/TableControlBar/OrgFilter';
+import RolesFilter from '@src/authz-module/components/TableControlBar/RolesFilter';
+import ScopesFilter from '@src/authz-module/components/TableControlBar/ScopesFilter';
+import TableControlBar from '@src/authz-module/components/TableControlBar/TableControlBar';
+import { getCellHeader } from '@src/authz-module/components/utils';
+import {
+  ViewActionCell, NameCell, OrgCell, RoleCell, ScopeCell,
+} from '@src/authz-module/components/TableCells';
+import { useAllRoleAssignments } from '@src/authz-module/data/hooks';
+import { TABLE_DEFAULT_PAGE_SIZE } from '@src/authz-module/constants';
+import messages from './messages';
+import TableFooter from '../components/TableFooter/TableFooter';
+
+interface TeamMembersTableProps {
+  presetScope?: string;
+}
+
+const TeamMembersTable = ({ presetScope }: TeamMembersTableProps) => {
+  const intl = useIntl();
+  const { showErrorToast } = useToastManager();
+  const [columnsWithFiltersApplied, setColumnsWithFiltersApplied] = useState<string[]>([]);
+
+  const initialQuerySettings = presetScope ? {
+    scopes: presetScope,
+    pageSize: TABLE_DEFAULT_PAGE_SIZE,
+    pageIndex: 0,
+    roles: null,
+    organizations: null,
+    search: null,
+    order: null,
+    sortBy: null,
+  } : undefined;
+
+  const { querySettings, handleTableFetch } = useQuerySettings(initialQuerySettings);
+
+  const {
+    data: { results: roleAssignments, count } = { results: [], count: 0 },
+    isLoading: isLoadingAllRoleAssignments,
+    error,
+    refetch,
+  } = useAllRoleAssignments(querySettings);
+
+  const initialFilters = presetScope ? [{ id: 'scope', value: [presetScope] }] : [];
+
+  useEffect(() => {
+    if (error) {
+      showErrorToast(error, refetch);
+    }
+  }, [error, showErrorToast, refetch]);
+
+  const pageCount = Math.ceil(count / TABLE_DEFAULT_PAGE_SIZE);
+
+  const fetchData = useMemo(() => debounce(handleTableFetch, 500), [handleTableFetch]);
+
+  useEffect(() => () => fetchData.cancel(), [fetchData]);
+
+  return (
+    <div className="authz-module">
+      <DataTable
+        isFilterable
+        isPaginated
+        isSortable
+        manualFilters
+        manualPagination
+        manualSortBy
+        numBreakoutFilters={4}
+        fetchData={fetchData}
+        data={roleAssignments}
+        itemCount={count}
+        pageCount={pageCount}
+        initialState={{ pageSize: TABLE_DEFAULT_PAGE_SIZE, filters: initialFilters }}
+        isLoading={isLoadingAllRoleAssignments}
+        additionalColumns={[
+          {
+            id: 'action',
+            Header: intl.formatMessage(messages['authz.team.members.table.column.actions.title']),
+            Cell: ViewActionCell,
+          },
+        ]}
+        columns={
+            [
+              {
+                Header: intl.formatMessage(messages['authz.team.members.table.column.name.title']),
+                accessor: 'name',
+                Cell: NameCell,
+                filter: 'text',
+                Filter: TextFilter,
+                filterOrder: 1,
+              },
+              {
+                Header: intl.formatMessage(messages['authz.team.members.table.column.email.title']),
+                accessor: 'email',
+                disableFilters: true,
+                filter: 'text',
+                Filter: TextFilter,
+              },
+              {
+                Header: getCellHeader('org', intl.formatMessage(messages['authz.team.members.table.column.organization.title']), columnsWithFiltersApplied),
+                accessor: 'org',
+                Cell: OrgCell,
+                filter: 'includesValue',
+                Filter: OrgFilter,
+                filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.organization.title']),
+                filterOrder: 2,
+              },
+              {
+                Header: getCellHeader('scope', intl.formatMessage(messages['authz.team.members.table.column.scope.title']), columnsWithFiltersApplied),
+                accessor: 'scope',
+                Cell: ScopeCell,
+                filter: 'includesValue',
+                Filter: ScopesFilter,
+                filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.scope.title']),
+                filterOrder: 4,
+              },
+              {
+                Header: getCellHeader('role', intl.formatMessage(messages['authz.team.members.table.column.role.title']), columnsWithFiltersApplied),
+                accessor: 'role',
+                filter: 'includesValue',
+                Cell: RoleCell,
+                Filter: RolesFilter,
+                filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.role.title']),
+                filterOrder: 3,
+              },
+            ]
+        }
+      >
+        <TableControlBar onFilterChange={setColumnsWithFiltersApplied} />
+        <DataTable.Table />
+        <TableFooter />
+      </DataTable>
+    </div>
+  );
+};
+
+export default TeamMembersTable;
diff --git a/src/authz-module/team-members/messages.ts b/src/authz-module/team-members/messages.ts
new file mode 100644
index 00000000..30eebf70
--- /dev/null
+++ b/src/authz-module/team-members/messages.ts
@@ -0,0 +1,37 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'authz.team.members.table.column.name.title': {
+    id: 'authz.team.members.table.column.name.title',
+    defaultMessage: 'Name',
+    description: 'Team members table name column header',
+  },
+  'authz.team.members.table.column.email.title': {
+    id: 'authz.team.members.table.column.email.title',
+    defaultMessage: 'Email',
+    description: 'Team members table email column header',
+  },
+  'authz.team.members.table.column.organization.title': {
+    id: 'authz.team.members.table.column.organization.title',
+    defaultMessage: 'Organization',
+    description: 'Team members table organization column header',
+  },
+  'authz.team.members.table.column.scope.title': {
+    id: 'authz.team.members.table.column.scope.title',
+    defaultMessage: 'Scope',
+    description: 'Team members table scope column header',
+  },
+  'authz.team.members.table.column.role.title': {
+    id: 'authz.team.members.table.column.role.title',
+    defaultMessage: 'Role',
+    description: 'Team members table role column header',
+  },
+  'authz.team.members.table.column.actions.title': {
+    id: 'authz.team.members.table.column.actions.title',
+    defaultMessage: 'Actions',
+    description: 'Team members table actions column header',
+  },
+
+});
+
+export default messages;
diff --git a/src/setupTest.tsx b/src/setupTest.tsx
index 9f051cbb..a6375170 100644
--- a/src/setupTest.tsx
+++ b/src/setupTest.tsx
@@ -5,6 +5,7 @@ import { render } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const mockAppContext = {
   authenticatedUser: {
@@ -20,6 +21,29 @@ interface WrapperProps {
   children: ReactNode;
 }
 
+export const renderWithAllProviders = (ui, options = {}) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  const Wrapper = ({ children }: WrapperProps) => (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <AppContext.Provider value={mockAppContext}>
+          <IntlProvider locale="en">
+            {children}
+          </IntlProvider>
+        </AppContext.Provider>
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  return render(ui, { wrapper: Wrapper, ...options });
+};
+
 export const renderWrapper = (ui, options = {}) => {
   const Wrapper = ({ children }: WrapperProps) => (
     <BrowserRouter>
diff --git a/src/types.ts b/src/types.ts
index 27d78f9f..1ce1c194 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -14,6 +14,9 @@ export interface TeamMember {
   email: string;
   roles: string[];
   createdAt: string;
+  scope: { resource: string, type: 'COURSE' | 'LIBRARY' | 'GLOBAL' };
+  organization: string;
+  role: string;
 }
 
 export interface LibraryMetadata {
@@ -49,6 +52,18 @@ export type PermissionMetadata = {
   description?: string;
 };
 
+export type Org = {
+  id: string;
+  name: string;
+  shortName: string;
+};
+
+export type Scope = {
+  externalKey: string;
+  displayName: string;
+  org: Org;
+};
+
 // Permissions Matrix
 
 export type EnrichedPermission = PermissionMetadata & {
@@ -84,3 +99,21 @@ export interface TableCellValue<T> {
     original: T;
   };
 }
+
+export type AppContextType = {
+  authenticatedUser: {
+    username: string;
+    email: string;
+  };
+};
+
+export interface UserRole {
+  isSuperadmin?: boolean;
+  role: string;
+  org: string;
+  scope: string;
+  permissionCount: number;
+  fullName?: string;
+  username?: string;
+  email?: string;
+}