+
+ {pendingChange?.isRevoking
+ ? t`This will revoke ${pendingChange?.description ?? ''} for ${userLabel}.`
+ : t`This will grant ${pendingChange?.description ?? ''} to ${userLabel}.`}
+
+ {t`Enter your two-factor authentication code to confirm.`}
+ (
+
+ {slots.slice(0, 3).map((slot, index) => (
+
+ ))}
+
+ {slots.slice(3).map((slot, index) => (
+
+ ))}
+
+ )}
+ />
+
+ }
+ />
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminServerAdmins.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminServerAdmins.tsx
new file mode 100644
index 0000000000..b0aeb82cae
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminServerAdmins.tsx
@@ -0,0 +1,102 @@
+import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApolloAdminClient';
+import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableBody } from '@/ui/layout/table/components/TableBody';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { useQuery } from '@apollo/client/react';
+import { styled } from '@linaria/react';
+import { t } from '@lingui/core/macro';
+import { useContext } from 'react';
+import { SettingsPath } from 'twenty-shared/types';
+import { getSettingsPath } from 'twenty-shared/utils';
+import {
+ H2Title,
+ IconChevronRight,
+ OverflowingTextWithTooltip,
+} from 'twenty-ui-deprecated/display';
+import { Section } from 'twenty-ui-deprecated/layout';
+import {
+ ThemeContext,
+ themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
+import { GetServerAdminsDocument } from '~/generated-admin/graphql';
+
+const SERVER_ADMINS_GRID_TEMPLATE_COLUMNS = '2fr 1fr 1fr 36px';
+
+const StyledEmptyState = styled.div`
+ color: ${themeCssVariables.font.color.tertiary};
+ padding: ${themeCssVariables.spacing[4]} 0;
+`;
+
+export const SettingsAdminServerAdmins = () => {
+ const { theme } = useContext(ThemeContext);
+ const apolloAdminClient = useApolloAdminClient();
+
+ const { data, loading, error } = useQuery(GetServerAdminsDocument, {
+ client: apolloAdminClient,
+ });
+
+ const serverAdmins = data?.getServerAdmins ?? [];
+
+ return (
+