diff --git a/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx
index 26eec72438..5f3c45f5c6 100644
--- a/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx
+++ b/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx
@@ -7,19 +7,28 @@ import { useContext, useEffect, useMemo, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import { useDebounce } from 'use-debounce';
+import { useSnackBarOnQueryError } from '@/apollo/hooks/useSnackBarOnQueryError';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { type WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam';
-import { useSnackBarOnQueryError } from '@/apollo/hooks/useSnackBarOnQueryError';
-import { CoreObjectNameSingular, SettingsPath } from 'twenty-shared/types';
+import { useQuery } from '@apollo/client/react';
+import {
+ AppPath,
+ CoreObjectNameSingular,
+ SettingsPath,
+} from 'twenty-shared/types';
import {
generateILikeFiltersForCompositeFields,
getSettingsPath,
@@ -29,16 +38,19 @@ import {
AppTooltip,
Avatar,
H2Title,
+ IconArrowUpRight,
IconChevronRight,
+ IconHierarchy2,
+ IconListDetails,
IconMail,
IconReload,
IconTrash,
Status,
TooltipDelay,
} from 'twenty-ui/display';
-import { IconButton, SearchInput } from 'twenty-ui/input';
+import { Button, IconButton, SearchInput } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
-import { useQuery } from '@apollo/client/react';
+import { MenuItem } from 'twenty-ui/navigation';
import { GetWorkspaceInvitationsDocument } from '~/generated-metadata/graphql';
import { SettingsRolesQueryEffect } from '@/settings/roles/components/SettingsRolesQueryEffect';
@@ -49,6 +61,7 @@ import { useDeleteWorkspaceInvitation } from '@/workspace-invitation/hooks/useDe
import { useResendWorkspaceInvitation } from '@/workspace-invitation/hooks/useResendWorkspaceInvitation';
import { workspaceInvitationsState } from '@/workspace-invitation/states/workspaceInvitationsStates';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { normalizeSearchText } from '~/utils/normalizeSearchText';
@@ -87,6 +100,9 @@ const StyledTextContainerWithEllipsis = styled.div`
`;
const StyledSearchContainer = styled.div`
+ align-items: center;
+ display: flex;
+ gap: ${themeCssVariables.spacing[2]};
padding-bottom: ${themeCssVariables.spacing[2]};
`;
@@ -107,7 +123,9 @@ export const SettingsWorkspaceMembers = () => {
const { theme } = useContext(ThemeContext);
const { t } = useLingui();
const { enqueueErrorSnackBar } = useSnackBar();
+ const navigateApp = useNavigateApp();
const navigateSettings = useNavigateSettings();
+ const { closeDropdown } = useCloseDropdown();
const [isFetchingMore, setIsFetchingMore] = useState(false);
const [searchFilter, setSearchFilter] = useState('');
const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState);
@@ -381,6 +399,45 @@ export const SettingsWorkspaceMembers = () => {
onChange={handleSearchChange}
placeholder={t`Search a team member...`}
/>
+
+ }
+ dropdownPlacement="bottom-end"
+ dropdownOffset={{ y: 8 }}
+ dropdownComponents={
+
+
+
+
+ }
+ />