diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index 2665b3420..7504f00d3 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -3655,7 +3655,8 @@
     "account": "Account",
     "config": "Config",
     "adminSettings": "Admin Settings",
-    "allTools": "All Tools",
+    "allTools": "Tools",
+    "reader": "Reader",
     "helpMenu": {
       "toolsTour": "Tools Tour",
       "toolsTourDesc": "Learn what the tools can do",
@@ -4778,7 +4779,7 @@
       "maybeLater": "Maybe Later",
       "dontShowAgain": "Don't Show Again"
     },
-    "allTools": "This is the <strong>All Tools</strong> panel, where you can browse and select from all available PDF tools.",
+    "allTools": "This is the <strong>Tools</strong> panel, where you can browse and select from all available PDF tools.",
     "selectCropTool": "Let's select the <strong>Crop</strong> tool to demonstrate how to use one of the tools.",
     "toolInterface": "This is the <strong>Crop</strong> tool interface. As you can see, there's not much there because we haven't added any PDF files to work with yet.",
     "filesButton": "The <strong>Files</strong> button on the Quick Access bar allows you to upload PDFs to use the tools on.",
diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json
index 10e923c90..76f89ff4a 100644
--- a/frontend/public/locales/en-US/translation.json
+++ b/frontend/public/locales/en-US/translation.json
@@ -3967,7 +3967,7 @@
     "account": "Account",
     "config": "Config",
     "adminSettings": "Admin Settings",
-    "allTools": "All Tools"
+    "allTools": "Tools"
   },
   "admin": {
     "error": "Error",
diff --git a/frontend/src/core/components/AppProviders.tsx b/frontend/src/core/components/AppProviders.tsx
index 24f793188..c8a7c99f8 100644
--- a/frontend/src/core/components/AppProviders.tsx
+++ b/frontend/src/core/components/AppProviders.tsx
@@ -16,6 +16,7 @@ import { OnboardingProvider } from "@app/contexts/OnboardingContext";
 import { TourOrchestrationProvider } from "@app/contexts/TourOrchestrationContext";
 import { AdminTourOrchestrationProvider } from "@app/contexts/AdminTourOrchestrationContext";
 import { PageEditorProvider } from "@app/contexts/PageEditorContext";
+import { InviteModalProvider } from "@app/contexts/InviteModalContext";
 import ErrorBoundary from "@app/components/shared/ErrorBoundary";
 import { useScarfTracking } from "@app/hooks/useScarfTracking";
 import { useAppInitialization } from "@app/hooks/useAppInitialization";
@@ -68,11 +69,13 @@ export function AppProviders({ children, appConfigRetryOptions, appConfigProvide
                               <PageEditorProvider>
                                 <SignatureProvider>
                                   <RightRailProvider>
-                                    <TourOrchestrationProvider>
-                                      <AdminTourOrchestrationProvider>
-                                        {children}
-                                      </AdminTourOrchestrationProvider>
-                                    </TourOrchestrationProvider>
+                                    <InviteModalProvider>
+                                      <TourOrchestrationProvider>
+                                        <AdminTourOrchestrationProvider>
+                                          {children}
+                                        </AdminTourOrchestrationProvider>
+                                      </TourOrchestrationProvider>
+                                    </InviteModalProvider>
                                   </RightRailProvider>
                                 </SignatureProvider>
                               </PageEditorProvider>
diff --git a/frontend/src/core/components/onboarding/OnboardingTour.tsx b/frontend/src/core/components/onboarding/OnboardingTour.tsx
index 8f7608b14..503a246dc 100644
--- a/frontend/src/core/components/onboarding/OnboardingTour.tsx
+++ b/frontend/src/core/components/onboarding/OnboardingTour.tsx
@@ -123,7 +123,7 @@ export default function OnboardingTour() {
   const stepsConfig: Record<TourStep, StepType> = {
     [TourStep.ALL_TOOLS]: {
       selector: '[data-tour="tool-panel"]',
-      content: t('onboarding.allTools', 'This is the <strong>All Tools</strong> panel, where you can browse and select from all available PDF tools.'),
+      content: t('onboarding.allTools', 'This is the <strong>Tools</strong> panel, where you can browse and select from all available PDF tools.'),
       position: 'center',
       padding: 0,
       action: () => {
diff --git a/frontend/src/core/components/shared/AllToolsNavButton.tsx b/frontend/src/core/components/shared/AllToolsNavButton.tsx
index 9a333878a..f5ba4a97c 100644
--- a/frontend/src/core/components/shared/AllToolsNavButton.tsx
+++ b/frontend/src/core/components/shared/AllToolsNavButton.tsx
@@ -35,20 +35,20 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
 
   const iconNode = (
     <span className="iconContainer">
-      <AppsIcon sx={{ fontSize: '2rem' }} />
+      <AppsIcon sx={{ fontSize: isActive ? '1.875rem' : '1.5rem' }} />
     </span>
   );
 
   return (
-    <Tooltip content={t("quickAccess.allTools", "All Tools")} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
+    <Tooltip content={t("quickAccess.allTools", "Tools")} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
       <div className="flex flex-col items-center gap-1 mt-4 mb-2">
         <ActionIcon
           component="a"
           href={navProps.href}
           onClick={handleNavClick}
-          size={'lg'}
+          size={isActive ? 'lg' : 'md'}
           variant="subtle"
-          aria-label={t("quickAccess.allTools", "All Tools")}
+          aria-label={t("quickAccess.allTools", "Tools")}
           style={{
             backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
             color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)',
@@ -61,7 +61,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
           {iconNode}
         </ActionIcon>
         <span className={`all-tools-text ${isActive ? 'active' : 'inactive'}`}>
-          {t("quickAccess.allTools", "All Tools")}
+          {t("quickAccess.allTools", "Tools")}
         </span>
       </div>
     </Tooltip>
diff --git a/frontend/src/core/components/shared/InviteMembersModal.tsx b/frontend/src/core/components/shared/InviteMembersModal.tsx
new file mode 100644
index 000000000..a52fe39f2
--- /dev/null
+++ b/frontend/src/core/components/shared/InviteMembersModal.tsx
@@ -0,0 +1,515 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Modal,
+  Stack,
+  Text,
+  Button,
+  TextInput,
+  Select,
+  Paper,
+  Checkbox,
+  Textarea,
+  SegmentedControl,
+  Tooltip,
+  CloseButton,
+  Box,
+  Group,
+} from '@mantine/core';
+import LocalIcon from '@app/components/shared/LocalIcon';
+import { alert } from '@app/components/toast';
+import { userManagementService } from '@app/services/userManagementService';
+import { teamService, Team } from '@app/services/teamService';
+import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import { useAppConfig } from '@app/contexts/AppConfigContext';
+
+interface InviteMembersModalProps {
+  opened: boolean;
+  onClose: () => void;
+}
+
+export default function InviteMembersModal({ opened, onClose }: InviteMembersModalProps) {
+  const { t } = useTranslation();
+  const { config } = useAppConfig();
+  const [teams, setTeams] = useState<Team[]>([]);
+  const [processing, setProcessing] = useState(false);
+  const [inviteMode, setInviteMode] = useState<'email' | 'direct' | 'link'>('direct');
+  const [generatedInviteLink, setGeneratedInviteLink] = useState<string | null>(null);
+
+  // License information
+  const [licenseInfo, setLicenseInfo] = useState<{
+    maxAllowedUsers: number;
+    availableSlots: number;
+    grandfatheredUserCount: number;
+    licenseMaxUsers: number;
+    premiumEnabled: boolean;
+    totalUsers: number;
+  } | null>(null);
+
+  // Form state for direct invite
+  const [inviteForm, setInviteForm] = useState({
+    username: '',
+    password: '',
+    role: 'ROLE_USER',
+    teamId: undefined as number | undefined,
+    forceChange: false,
+  });
+
+  // Form state for email invite
+  const [emailInviteForm, setEmailInviteForm] = useState({
+    emails: '',
+    role: 'ROLE_USER',
+    teamId: undefined as number | undefined,
+  });
+
+  // Form state for invite link
+  const [inviteLinkForm, setInviteLinkForm] = useState({
+    email: '',
+    role: 'ROLE_USER',
+    teamId: undefined as number | undefined,
+    expiryHours: 72,
+    sendEmail: false,
+  });
+
+  // Fetch teams and license info
+  useEffect(() => {
+    if (opened) {
+      const fetchData = async () => {
+        try {
+          const [adminData, teamsData] = await Promise.all([
+            userManagementService.getUsers(),
+            teamService.getTeams(),
+          ]);
+
+          setTeams(teamsData);
+
+          setLicenseInfo({
+            maxAllowedUsers: adminData.maxAllowedUsers,
+            availableSlots: adminData.availableSlots,
+            grandfatheredUserCount: adminData.grandfatheredUserCount,
+            licenseMaxUsers: adminData.licenseMaxUsers,
+            premiumEnabled: adminData.premiumEnabled,
+            totalUsers: adminData.totalUsers,
+          });
+        } catch (error) {
+          console.error('Failed to fetch data:', error);
+        }
+      };
+      fetchData();
+    }
+  }, [opened]);
+
+  const roleOptions = [
+    {
+      value: 'ROLE_USER',
+      label: t('workspace.people.roleDescriptions.user', 'User'),
+    },
+    {
+      value: 'ROLE_ADMIN',
+      label: t('workspace.people.roleDescriptions.admin', 'Admin'),
+    },
+  ];
+
+  const teamOptions = teams.map((team) => ({
+    value: team.id.toString(),
+    label: team.name,
+  }));
+
+  const handleInviteUser = async () => {
+    if (!inviteForm.username || !inviteForm.password) {
+      alert({ alertType: 'error', title: t('workspace.people.addMember.usernameRequired') });
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      await userManagementService.createUser({
+        username: inviteForm.username,
+        password: inviteForm.password,
+        role: inviteForm.role,
+        teamId: inviteForm.teamId,
+        authType: 'password',
+        forceChange: inviteForm.forceChange,
+      });
+      alert({ alertType: 'success', title: t('workspace.people.addMember.success') });
+      onClose();
+      // Reset form
+      setInviteForm({
+        username: '',
+        password: '',
+        role: 'ROLE_USER',
+        teamId: undefined,
+        forceChange: false,
+      });
+    } catch (error: any) {
+      console.error('Failed to invite user:', error);
+      const errorMessage = error.response?.data?.message || error.response?.data?.error || error.message || t('workspace.people.addMember.error');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleEmailInvite = async () => {
+    if (!emailInviteForm.emails.trim()) {
+      alert({ alertType: 'error', title: t('workspace.people.emailInvite.emailsRequired', 'Email addresses are required') });
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      const response = await userManagementService.inviteUsers({
+        emails: emailInviteForm.emails, // comma-separated string as required by API
+        role: emailInviteForm.role,
+        teamId: emailInviteForm.teamId,
+      });
+
+      if (response.successCount > 0) {
+        alert({
+          alertType: 'success',
+          title: t('workspace.people.emailInvite.success', { count: response.successCount, defaultValue: `Successfully invited ${response.successCount} user(s)` })
+        });
+        onClose();
+        setEmailInviteForm({
+          emails: '',
+          role: 'ROLE_USER',
+          teamId: undefined,
+        });
+      } else {
+        alert({
+          alertType: 'error',
+          title: t('workspace.people.emailInvite.allFailed', 'Failed to invite users'),
+          body: response.errors || response.error
+        });
+      }
+    } catch (error: any) {
+      console.error('Failed to invite users:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.people.emailInvite.error', 'Failed to send invites');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleGenerateInviteLink = async () => {
+    try {
+      setProcessing(true);
+      const response = await userManagementService.generateInviteLink({
+        email: inviteLinkForm.email || undefined,
+        role: inviteLinkForm.role,
+        teamId: inviteLinkForm.teamId,
+        expiryHours: inviteLinkForm.expiryHours,
+        sendEmail: inviteLinkForm.sendEmail,
+      });
+      setGeneratedInviteLink(response.inviteUrl);
+      if (inviteLinkForm.sendEmail && inviteLinkForm.email) {
+        alert({ alertType: 'success', title: t('workspace.people.inviteLink.emailSent', 'Invite link generated and sent via email') });
+      }
+    } catch (error: any) {
+      console.error('Failed to generate invite link:', error);
+      const errorMessage = error.response?.data?.message || error.response?.data?.error || error.message || t('workspace.people.inviteLink.error', 'Failed to generate invite link');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleClose = () => {
+    setGeneratedInviteLink(null);
+    setInviteMode('direct');
+    setInviteForm({
+      username: '',
+      password: '',
+      role: 'ROLE_USER',
+      teamId: undefined,
+      forceChange: false,
+    });
+    setEmailInviteForm({
+      emails: '',
+      role: 'ROLE_USER',
+      teamId: undefined,
+    });
+    setInviteLinkForm({
+      email: '',
+      role: 'ROLE_USER',
+      teamId: undefined,
+      expiryHours: 72,
+      sendEmail: false,
+    });
+    onClose();
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={handleClose}
+      size="md"
+      zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+      centered
+      padding="xl"
+      withCloseButton={false}
+    >
+      <Box pos="relative">
+        <CloseButton
+          onClick={handleClose}
+          size="lg"
+          style={{
+            position: 'absolute',
+            top: -8,
+            right: -8,
+            zIndex: 1
+          }}
+        />
+        <Stack gap="lg" pt="md">
+          {/* Header with Icon */}
+          <Stack gap="md" align="center">
+            <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+            <Text size="xl" fw={600} ta="center">
+              {t('workspace.people.inviteMembers.label', 'Invite Members')}
+            </Text>
+            {inviteMode === 'email' && (
+              <Text size="sm" c="dimmed" ta="center" px="md">
+                {t('workspace.people.inviteMembers.subtitle', 'Type or paste in emails below, separated by commas. Your workspace will be billed by members.')}
+              </Text>
+            )}
+          </Stack>
+
+          {/* License Warning/Info */}
+          {licenseInfo && (
+            <Paper withBorder p="sm" bg={licenseInfo.availableSlots === 0 ? 'var(--mantine-color-red-light)' : 'var(--mantine-color-blue-light)'}>
+              <Stack gap="xs">
+                <Group gap="xs">
+                  <LocalIcon icon={licenseInfo.availableSlots > 0 ? 'info' : 'warning'} width="1rem" height="1rem" />
+                  <Text size="sm" fw={500}>
+                    {licenseInfo.availableSlots > 0
+                      ? t('workspace.people.license.slotsAvailable', {
+                          count: licenseInfo.availableSlots,
+                          defaultValue: `${licenseInfo.availableSlots} user slot(s) available`
+                        })
+                      : t('workspace.people.license.noSlotsAvailable', 'No user slots available')}
+                  </Text>
+                </Group>
+                <Text size="xs" c="dimmed">
+                  {t('workspace.people.license.currentUsage', {
+                    current: licenseInfo.totalUsers,
+                    max: licenseInfo.maxAllowedUsers,
+                    defaultValue: `Currently using ${licenseInfo.totalUsers} of ${licenseInfo.maxAllowedUsers} user licenses`
+                  })}
+                </Text>
+              </Stack>
+            </Paper>
+          )}
+
+          {/* Mode Toggle */}
+          <Tooltip
+            label={t('workspace.people.inviteMode.emailDisabled', 'Email invites require SMTP configuration and mail.enableInvites=true in settings')}
+            disabled={!!config?.enableEmailInvites}
+            position="bottom"
+            withArrow
+            zIndex={Z_INDEX_OVER_CONFIG_MODAL + 1}
+          >
+            <div>
+              <SegmentedControl
+                value={inviteMode}
+                onChange={(value) => {
+                  setInviteMode(value as 'email' | 'direct' | 'link');
+                  setGeneratedInviteLink(null);
+                }}
+                data={[
+                  {
+                    label: t('workspace.people.inviteMode.username', 'Username'),
+                    value: 'direct',
+                  },
+                  {
+                    label: t('workspace.people.inviteMode.link', 'Link'),
+                    value: 'link',
+                  },
+                  {
+                    label: t('workspace.people.inviteMode.email', 'Email'),
+                    value: 'email',
+                    disabled: !config?.enableEmailInvites,
+                  },
+                ]}
+                fullWidth
+              />
+            </div>
+          </Tooltip>
+
+          {/* Link Mode */}
+          {inviteMode === 'link' && (
+            <>
+              <TextInput
+                label={t('workspace.people.inviteLink.email', 'Email (optional)')}
+                placeholder={t('workspace.people.inviteLink.emailPlaceholder', 'user@example.com')}
+                value={inviteLinkForm.email}
+                onChange={(e) => setInviteLinkForm({ ...inviteLinkForm, email: e.currentTarget.value })}
+                description={t('workspace.people.inviteLink.emailDescription', 'If provided, the link will be tied to this email address')}
+              />
+              <Select
+                label={t('workspace.people.addMember.role')}
+                data={roleOptions}
+                value={inviteLinkForm.role}
+                onChange={(value) => setInviteLinkForm({ ...inviteLinkForm, role: value || 'ROLE_USER' })}
+                comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+              />
+              <Select
+                label={t('workspace.people.addMember.team')}
+                placeholder={t('workspace.people.addMember.teamPlaceholder')}
+                data={teamOptions}
+                value={inviteLinkForm.teamId?.toString()}
+                onChange={(value) => setInviteLinkForm({ ...inviteLinkForm, teamId: value ? parseInt(value) : undefined })}
+                clearable
+                comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+              />
+              <TextInput
+                label={t('workspace.people.inviteLink.expiryHours', 'Link expires in (hours)')}
+                type="number"
+                value={inviteLinkForm.expiryHours}
+                onChange={(e) => setInviteLinkForm({ ...inviteLinkForm, expiryHours: parseInt(e.currentTarget.value) || 72 })}
+                min={1}
+                max={720}
+              />
+              {inviteLinkForm.email && (
+                <Checkbox
+                  label={t('workspace.people.inviteLink.sendEmail', 'Send invite link via email')}
+                  description={t('workspace.people.inviteLink.sendEmailDescription', 'Also send the link to the provided email address')}
+                  checked={inviteLinkForm.sendEmail}
+                  onChange={(e) => setInviteLinkForm({ ...inviteLinkForm, sendEmail: e.currentTarget.checked })}
+                />
+              )}
+
+              {/* Display generated link */}
+              {generatedInviteLink && (
+                <Paper withBorder p="md" bg="var(--mantine-color-green-light)">
+                  <Stack gap="sm">
+                    <Text size="sm" fw={500}>{t('workspace.people.inviteLink.generated', 'Invite Link Generated')}</Text>
+                    <Group gap="xs">
+                      <TextInput
+                        value={generatedInviteLink}
+                        readOnly
+                        style={{ flex: 1 }}
+                      />
+                      <Button
+                        variant="light"
+                        onClick={async () => {
+                          try {
+                            await navigator.clipboard.writeText(generatedInviteLink);
+                            alert({ alertType: 'success', title: t('workspace.people.inviteLink.copied', 'Link copied to clipboard!') });
+                          } catch {
+                            // Fallback for browsers without clipboard API
+                            const textArea = document.createElement('textarea');
+                            textArea.value = generatedInviteLink;
+                            textArea.style.position = 'fixed';
+                            textArea.style.opacity = '0';
+                            document.body.appendChild(textArea);
+                            textArea.select();
+                            document.execCommand('copy');
+                            document.body.removeChild(textArea);
+                            alert({ alertType: 'success', title: t('workspace.people.inviteLink.copied', 'Link copied to clipboard!') });
+                          }
+                        }}
+                      >
+                        <LocalIcon icon="content-copy" width="1rem" height="1rem" />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              )}
+            </>
+          )}
+
+          {/* Email Mode */}
+          {inviteMode === 'email' && config?.enableEmailInvites && (
+            <>
+              <Textarea
+                label={t('workspace.people.emailInvite.emails', 'Email Addresses')}
+                placeholder={t('workspace.people.emailInvite.emailsPlaceholder', 'user1@example.com, user2@example.com')}
+                value={emailInviteForm.emails}
+                onChange={(e) => setEmailInviteForm({ ...emailInviteForm, emails: e.currentTarget.value })}
+                minRows={3}
+                required
+              />
+              <Select
+                label={t('workspace.people.addMember.role')}
+                data={roleOptions}
+                value={emailInviteForm.role}
+                onChange={(value) => setEmailInviteForm({ ...emailInviteForm, role: value || 'ROLE_USER' })}
+                comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+              />
+              <Select
+                label={t('workspace.people.addMember.team')}
+                placeholder={t('workspace.people.addMember.teamPlaceholder')}
+                data={teamOptions}
+                value={emailInviteForm.teamId?.toString()}
+                onChange={(value) => setEmailInviteForm({ ...emailInviteForm, teamId: value ? parseInt(value) : undefined })}
+                clearable
+                comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+              />
+            </>
+          )}
+
+          {/* Direct/Username Mode */}
+          {inviteMode === 'direct' && (
+            <>
+              <TextInput
+                label={t('workspace.people.addMember.username')}
+                placeholder={t('workspace.people.addMember.usernamePlaceholder')}
+                value={inviteForm.username}
+                onChange={(e) => setInviteForm({ ...inviteForm, username: e.currentTarget.value })}
+                required
+              />
+              <TextInput
+                label={t('workspace.people.addMember.password')}
+                type="password"
+                placeholder={t('workspace.people.addMember.passwordPlaceholder')}
+                value={inviteForm.password}
+                onChange={(e) => setInviteForm({ ...inviteForm, password: e.currentTarget.value })}
+                required
+              />
+              <Select
+                label={t('workspace.people.addMember.role')}
+                data={roleOptions}
+                value={inviteForm.role}
+                onChange={(value) => setInviteForm({ ...inviteForm, role: value || 'ROLE_USER' })}
+                comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+              />
+              <Select
+                label={t('workspace.people.addMember.team')}
+                placeholder={t('workspace.people.addMember.teamPlaceholder')}
+                data={teamOptions}
+                value={inviteForm.teamId?.toString()}
+                onChange={(value) => setInviteForm({ ...inviteForm, teamId: value ? parseInt(value) : undefined })}
+                clearable
+                comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+              />
+              <Checkbox
+                label={t('workspace.people.addMember.forcePasswordChange', 'Force password change on first login')}
+                checked={inviteForm.forceChange}
+                onChange={(e) => setInviteForm({ ...inviteForm, forceChange: e.currentTarget.checked })}
+              />
+            </>
+          )}
+
+          {/* Action Button */}
+          <Button
+            onClick={inviteMode === 'email' ? handleEmailInvite : inviteMode === 'link' ? handleGenerateInviteLink : handleInviteUser}
+            loading={processing}
+            fullWidth
+            size="md"
+            mt="md"
+          >
+            {inviteMode === 'email'
+              ? t('workspace.people.emailInvite.submit', 'Send Invites')
+              : inviteMode === 'link'
+                ? t('workspace.people.inviteLink.submit', 'Generate Link')
+                : t('workspace.people.addMember.submit')}
+          </Button>
+        </Stack>
+      </Box>
+    </Modal>
+  );
+}
+
diff --git a/frontend/src/core/components/shared/QuickAccessBar.tsx b/frontend/src/core/components/shared/QuickAccessBar.tsx
index 2f73132a8..5eab9c16b 100644
--- a/frontend/src/core/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/core/components/shared/QuickAccessBar.tsx
@@ -16,6 +16,7 @@ import ActiveToolButton from "@app/components/shared/quickAccessBar/ActiveToolBu
 import AppConfigModal from '@app/components/shared/AppConfigModal';
 import { useAppConfig } from '@app/contexts/AppConfigContext';
 import { useOnboarding } from '@app/contexts/OnboardingContext';
+import InviteMembersModal from '@app/components/shared/InviteMembersModal';
 import {
   isNavButtonActive,
   getNavButtonStyle,
@@ -34,6 +35,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   const { config } = useAppConfig();
   const { startTour } = useOnboarding();
   const [configModalOpen, setConfigModalOpen] = useState(false);
+  const [inviteModalOpen, setInviteModalOpen] = useState(false);
   const [activeButton, setActiveButton] = useState<string>('tools');
   const scrollableRef = useRef<HTMLDivElement>(null);
   const isOverflow = useIsOverflowing(scrollableRef);
@@ -88,7 +90,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
             onClick: () => handleClick(),
             'aria-label': config.name
           })}
-          size={isActive ? (config.size || 'lg') : 'lg'}
+          size={isActive ? 'lg' : 'md'}
           variant="subtle"
           style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)}
           className={isActive ? 'activeIconScale' : ''}
@@ -108,9 +110,9 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   const mainButtons: ButtonConfig[] = [
     {
       id: 'read',
-      name: t("quickAccess.read", "Read"),
-      icon: <LocalIcon icon="menu-book-rounded" width="1.5rem" height="1.5rem" />,
-      size: 'lg',
+      name: t("quickAccess.reader", "Reader"),
+      icon: <LocalIcon icon="menu-book-rounded" width="1.25rem" height="1.25rem" />,
+      size: 'md',
       isRound: false,
       type: 'navigation',
       onClick: () => {
@@ -118,23 +120,11 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
         handleReaderToggle();
       }
     },
-    // {
-    //  id: 'sign',
-    //  name: t("quickAccess.sign", "Sign"),
-    //  icon: <LocalIcon icon="signature-rounded" width="1.25rem" height="1.25rem" />,
-    //  size: 'lg',
-    //  isRound: false,
-    //  type: 'navigation',
-    //  onClick: () => {
-    //    setActiveButton('sign');
-    //    handleToolSelect('sign');
-    //  }
-    // },
     {
       id: 'automate',
       name: t("quickAccess.automate", "Automate"),
-      icon: <LocalIcon icon="automation-outline" width="1.6rem" height="1.6rem" />,
-      size: 'lg',
+      icon: <LocalIcon icon="automation-outline" width="1.25rem" height="1.25rem" />,
+      size: 'md',
       isRound: false,
       type: 'navigation',
       onClick: () => {
@@ -147,47 +137,59 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
         }
       }
     },
-  ];
-
-  const middleButtons: ButtonConfig[] = [
     {
       id: 'files',
       name: t("quickAccess.files", "Files"),
-      icon: <LocalIcon icon="folder-rounded" width="1.6rem" height="1.6rem" />,
+      icon: <LocalIcon icon="folder-rounded" width="1.25rem" height="1.25rem" />,
       isRound: true,
-      size: 'lg',
+      size: 'md',
       type: 'modal',
       onClick: handleFilesButtonClick
     },
-    //TODO: Activity
-    //{
-    //  id: 'activity',
-    //  name: t("quickAccess.activity", "Activity"),
-    //  icon: <LocalIcon icon="vital-signs-rounded" width="1.25rem" height="1.25rem" />,
-    //  isRound: true,
-    //  size: 'lg',
-    //  type: 'navigation',
-    //  onClick: () => setActiveButton('activity')
-    //},
   ];
 
+  const isAdmin = config?.isAdmin === true;
+
+  const middleButtons: ButtonConfig[] = [];
+  //TODO: Activity
+  //{
+  //  id: 'activity',
+  //  name: t("quickAccess.activity", "Activity"),
+  //  icon: <LocalIcon icon="vital-signs-rounded" width="1.25rem" height="1.25rem" />,
+  //  isRound: true,
+  //  size: 'lg',
+  //  type: 'navigation',
+  //  onClick: () => setActiveButton('activity')
+  //},
+
   const bottomButtons: ButtonConfig[] = [
     {
       id: 'help',
       name: t("quickAccess.help", "Help"),
-      icon: <LocalIcon icon="help-rounded" width="1.5rem" height="1.5rem" />,
+      icon: <LocalIcon icon="help-rounded" width="1.25rem" height="1.25rem" />,
       isRound: true,
-      size: 'lg',
+      size: 'md',
       type: 'action',
       onClick: () => {
         // This will be overridden by the wrapper logic
       },
     },
+    ...(isAdmin ? [{
+      id: 'invite',
+      name: t("quickAccess.invite", "Invite"),
+      icon: <LocalIcon icon="person-add" width="1.25rem" height="1.25rem" />,
+      isRound: true,
+      size: 'md' as const,
+      type: 'action' as const,
+      onClick: () => {
+        setInviteModalOpen(true);
+      }
+    }] : []),
     {
       id: 'config',
-      name: config?.enableLogin ? t("quickAccess.account", "Account") : t("quickAccess.config", "Config"),
-      icon: config?.enableLogin ? <LocalIcon icon="person-rounded" width="1.25rem" height="1.25rem" /> : <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
-      size: 'lg',
+      name: t("quickAccess.settings", "Settings"),
+      icon: <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
+      size: 'md',
       type: 'modal',
       onClick: () => {
         navigate('/settings/overview');
@@ -200,7 +202,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     <div
       ref={ref}
       data-sidebar="quick-access"
-      className={`h-screen flex flex-col w-20 quick-access-bar-main ${isRainbowMode ? 'rainbow-mode' : ''}`}
+      className={`h-screen flex flex-col w-16 quick-access-bar-main ${isRainbowMode ? 'rainbow-mode' : ''}`}
       style={{
         borderRight: '1px solid var(--border-default)'
       }}
@@ -239,20 +241,30 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
             ))}
           </Stack>
 
-          {/* Divider after main buttons */}
-          <Divider
-            size="xs"
-            className="content-divider"
-          />
+          {/* Divider after main buttons (creates gap) */}
+          {middleButtons.length === 0 && (
+            <Divider
+              size="xs"
+              className="content-divider"
+            />
+          )}
 
           {/* Middle section */}
-          <Stack gap="lg" align="center">
-            {middleButtons.map((config, index) => (
-              <React.Fragment key={config.id}>
-                {renderNavButton(config, index)}
-              </React.Fragment>
-            ))}
-          </Stack>
+          {middleButtons.length > 0 && (
+            <>
+              <Divider
+                size="xs"
+                className="content-divider"
+              />
+              <Stack gap="lg" align="center">
+                {middleButtons.map((config, index) => (
+                  <React.Fragment key={config.id}>
+                    {renderNavButton(config, index)}
+                  </React.Fragment>
+                ))}
+              </Stack>
+            </>
+          )}
 
           {/* Spacer to push bottom buttons to bottom */}
           <div className="spacer" />
@@ -331,6 +343,11 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
         opened={configModalOpen}
         onClose={() => setConfigModalOpen(false)}
       />
+
+      <InviteMembersModal
+        opened={inviteModalOpen}
+        onClose={() => setInviteModalOpen(false)}
+      />
     </div>
   );
 });
diff --git a/frontend/src/core/components/shared/RightRail.tsx b/frontend/src/core/components/shared/RightRail.tsx
index 8efe507a1..bec38b0fe 100644
--- a/frontend/src/core/components/shared/RightRail.tsx
+++ b/frontend/src/core/components/shared/RightRail.tsx
@@ -14,6 +14,8 @@ import { ViewerContext } from '@app/contexts/ViewerContext';
 import { useSignature } from '@app/contexts/SignatureContext';
 import LocalIcon from '@app/components/shared/LocalIcon';
 import { RightRailFooterExtensions } from '@app/components/rightRail/RightRailFooterExtensions';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
 
 import { useSidebarContext } from '@app/contexts/SidebarContext';
 import { RightRailButtonConfig, RightRailRenderContext, RightRailSection } from '@app/types/rightRail';
@@ -39,7 +41,7 @@ export default function RightRail() {
   const { sidebarRefs } = useSidebarContext();
   const { t } = useTranslation();
   const viewerContext = React.useContext(ViewerContext);
-  const { toggleTheme } = useRainbowThemeContext();
+  const { toggleTheme, themeMode } = useRainbowThemeContext();
   const { buttons, actions, allButtonsDisabled } = useRightRail();
 
   const { pageEditorFunctions, toolPanelMode, leftPanelView } = useToolWorkflow();
@@ -195,7 +197,11 @@ export default function RightRail() {
               className="right-rail-icon"
               onClick={toggleTheme}
             >
-              <LocalIcon icon="contrast" width="1.5rem" height="1.5rem" />
+              {themeMode === 'dark' ? (
+                <LightModeIcon sx={{ fontSize: '1.5rem' }} />
+              ) : (
+                <DarkModeIcon sx={{ fontSize: '1.5rem' }} />
+              )}
             </ActionIcon>,
             t('rightRail.toggleTheme', 'Toggle Theme')
           )}
diff --git a/frontend/src/core/components/shared/TopControls.tsx b/frontend/src/core/components/shared/TopControls.tsx
index 089f5b769..f414cc91a 100644
--- a/frontend/src/core/components/shared/TopControls.tsx
+++ b/frontend/src/core/components/shared/TopControls.tsx
@@ -2,10 +2,10 @@ import React, { useState, useCallback, useMemo } from "react";
 import { SegmentedControl, Loader } from "@mantine/core";
 import { useRainbowThemeContext } from '@app/components/shared/RainbowThemeProvider';
 import rainbowStyles from '@app/styles/rainbow.module.css';
-import VisibilityIcon from "@mui/icons-material/Visibility";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import GridViewIcon from "@mui/icons-material/GridView";
 import FolderIcon from "@mui/icons-material/Folder";
 import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
-import { LocalIcon } from '@app/components/shared/LocalIcon';
 import { WorkbenchType, isValidWorkbench } from '@app/types/workbench';
 import { PageEditorFileDropdown } from '@app/components/shared/PageEditorFileDropdown';
 import type { CustomWorkbenchViewInstance } from '@app/contexts/ToolWorkflowContext';
@@ -55,7 +55,7 @@ const createViewOptions = (
         {switchingTo === "viewer" ? (
           <Loader size="sm" />
         ) : (
-          <VisibilityIcon fontSize="medium" />
+          <InsertDriveFileIcon fontSize="medium" />
         )}
       </div>
     ),
@@ -84,7 +84,7 @@ const createViewOptions = (
         {switchingTo === "pageEditor" ? (
           <Loader size="sm" />
         ) : (
-          <LocalIcon icon="dashboard-customize-rounded" width="1.5rem" height="1.5rem" />
+          <GridViewIcon fontSize="medium" />
         )}
       </div>
     ),
diff --git a/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx b/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx
index 043cb09f9..81ed8f43a 100644
--- a/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx
+++ b/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx
@@ -1,13 +1,13 @@
 /**
  * ActiveToolButton - Shows the currently selected tool at the top of the Quick Access Bar
  *
- * When a user selects a tool from the All Tools list, this component displays the tool's
+ * When a user selects a tool from the Tools list, this component displays the tool's
  * icon and name at the top of the navigation bar. It provides a quick way to see which
- * tool is currently active and offers a back button to return to the All Tools list.
+ * tool is currently active and offers a back button to return to the Tools list.
  *
  * Features:
  * - Shows tool icon and name when a tool is selected
- * - Hover to reveal back arrow for returning to All Tools
+ * - Hover to reveal back arrow for returning to Tools
  * - Smooth slide-down/slide-up animations
  * - Only appears for tools that don't have dedicated nav buttons (read, sign, automate)
  */
@@ -149,7 +149,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
                       handleBackToTools();
                     });
                   }}
-                  size={'xl'}
+                  size={'lg'}
                   variant="subtle"
                   onMouseEnter={() => setIsBackHover(true)}
                   onMouseLeave={() => setIsBackHover(false)}
@@ -165,7 +165,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
                 >
                   <span className="iconContainer">
                     {isBackHover ? (
-                      <ArrowBackRoundedIcon sx={{ fontSize: '1.5rem' }} />
+                      <ArrowBackRoundedIcon sx={{ fontSize: '1.875rem' }} />
                     ) : (
                       indicatorTool.icon
                     )}
diff --git a/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.css b/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.css
index e2c261b52..cbea90655 100644
--- a/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.css
+++ b/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.css
@@ -1,15 +1,29 @@
 .activeIconScale {
-  transform: scale(1.3);
+  transform: scale(1);
   transition: transform 0.2s;
   z-index: 1;
+  width: calc(1.75rem + 10px) !important;
+  height: calc(1.75rem + 10px) !important;
+}
+
+.activeIconScale .iconContainer {
+  width: calc(1.5rem + 10px);
+  height: calc(1.5rem + 10px);
+}
+
+.activeIconScale .iconContainer svg,
+.activeIconScale .iconContainer img {
+  width: calc(1.25rem + 10px) !important;
+  height: calc(1.25rem + 10px) !important;
 }
 
 .iconContainer {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  transition: width 0.2s, height 0.2s;
 }
 
 /* Action icon styles */
@@ -24,9 +38,9 @@
 /* Main container styles */
 .quick-access-bar-main {
   background-color: var(--bg-muted);
-  width: 5rem;
-  min-width: 5rem;
-  max-width: 5rem;
+  width: 4rem;
+  min-width: 4rem;
+  max-width: 4rem;
   position: relative;
   z-index: 10;
 }
@@ -34,9 +48,9 @@
 /* Rainbow mode container */
 .quick-access-bar-main.rainbow-mode {
   background-color: var(--bg-muted);
-  width: 5rem;
-  min-width: 5rem;
-  max-width: 5rem;
+  width: 4rem;
+  min-width: 4rem;
+  max-width: 4rem;
   position: relative;
   z-index: 10;
 }
@@ -57,7 +71,7 @@
 
 /* Nav header divider */
 .nav-header-divider {
-  width: 3.75rem;
+  width: 3rem;
   border-color: var(--color-gray-300);
   margin-top: 0.5rem;
   margin-bottom: 1rem;
@@ -85,7 +99,7 @@
 
 /* Overflow divider */
 .overflow-divider {
-  width: 3.75rem;
+  width: 3rem;
   border-color: var(--color-gray-300);
   margin: 0 0.5rem;
 }
@@ -143,7 +157,7 @@
 
 /* Content divider */
 .content-divider {
-  width: 3.75rem;
+  width: 3rem;
   border-color: var(--color-gray-300);
   margin: 1rem 0;
 }
@@ -241,7 +255,7 @@
 
 /* Divider that animates growing from top */
 .current-tool-divider {
-  width: 3.75rem;
+  width: 3rem;
   border-color: var(--color-gray-300);
   margin: 0.5rem auto 0.5rem auto;
   transform-origin: top;
diff --git a/frontend/src/core/components/tools/ToolPicker.tsx b/frontend/src/core/components/tools/ToolPicker.tsx
index 396f97ed6..b9da16689 100644
--- a/frontend/src/core/components/tools/ToolPicker.tsx
+++ b/frontend/src/core/components/tools/ToolPicker.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useLayoutEffect, useState } from "react";
+import React, { useMemo, useRef } from "react";
 import { Box, Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
@@ -8,11 +8,10 @@ import type { SubcategoryGroup } from "@app/hooks/useToolSections";
 import { useFavoriteToolItems } from "@app/hooks/tools/useFavoriteToolItems";
 import NoToolsFound from "@app/components/tools/shared/NoToolsFound";
 import { renderToolButtons } from "@app/components/tools/shared/renderToolButtons";
-import Badge from "@app/components/shared/Badge";
-import SubcategoryHeader from "@app/components/tools/shared/SubcategoryHeader";
 import ToolButton from "@app/components/tools/toolPicker/ToolButton";
 import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
 import { ToolId } from "@app/types/toolId";
+import { getSubcategoryLabel } from "@app/data/toolsTaxonomy";
 
 interface ToolPickerProps {
   selectedToolKey: string | null;
@@ -23,49 +22,8 @@ interface ToolPickerProps {
 
 const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = false }: ToolPickerProps) => {
   const { t } = useTranslation();
-  const [quickHeaderHeight, setQuickHeaderHeight] = useState(0);
-  const [allHeaderHeight, setAllHeaderHeight] = useState(0);
 
   const scrollableRef = useRef<HTMLDivElement>(null);
-  const quickHeaderRef = useRef<HTMLDivElement>(null);
-  const allHeaderRef = useRef<HTMLDivElement>(null);
-  const quickAccessRef = useRef<HTMLDivElement>(null);
-  const allToolsRef = useRef<HTMLDivElement>(null);
-
-  // Keep header heights in sync with any dynamic size changes
-  useLayoutEffect(() => {
-    const update = () => {
-      if (quickHeaderRef.current) {
-        setQuickHeaderHeight(quickHeaderRef.current.offsetHeight || 0);
-      }
-      if (allHeaderRef.current) {
-        setAllHeaderHeight(allHeaderRef.current.offsetHeight || 0);
-      }
-    };
-
-    update();
-
-    // Update on window resize
-    window.addEventListener("resize", update);
-
-    // Update on element resize (e.g., font load, badge count change, zoom)
-    const observers: ResizeObserver[] = [];
-    if (typeof ResizeObserver !== "undefined") {
-      const observe = (el: HTMLDivElement | null, cb: () => void) => {
-        if (!el) return;
-        const ro = new ResizeObserver(() => cb());
-        ro.observe(el);
-        observers.push(ro);
-      };
-      observe(quickHeaderRef.current, update);
-      observe(allHeaderRef.current, update);
-    }
-
-    return () => {
-      window.removeEventListener("resize", update);
-      observers.forEach(o => o.disconnect());
-    };
-  }, []);
 
   const { sections: visibleSections } = useToolSections(filteredTools);
   const { favoriteTools, toolRegistry } = useToolWorkflow();
@@ -84,31 +42,25 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
     return items;
   }, [quickSection]);
 
-  const recommendedCount = useMemo(() => favoriteToolItems.length + recommendedItems.length, [favoriteToolItems.length, recommendedItems.length]);
   const allSection = useMemo(
     () => visibleSections.find(s => s.key === 'all'),
     [visibleSections]
   );
 
-  const scrollTo = (ref: React.RefObject<HTMLDivElement | null>) => {
-    const container = scrollableRef.current;
-    const target = ref.current;
-    if (container && target) {
-      const stackedOffset = ref === allToolsRef
-        ? (quickHeaderHeight + allHeaderHeight)
-        : quickHeaderHeight;
-      const top = target.offsetTop - container.offsetTop - (stackedOffset || 0);
-      container.scrollTo({
-        top: Math.max(0, top),
-        behavior: "smooth"
-      });
-    }
-  };
-
   // Build flat list by subcategory for search mode
   const emptyFilteredTools: ToolPickerProps['filteredTools'] = [];
   const effectiveFilteredForSearch: ToolPickerProps['filteredTools'] = isSearching ? filteredTools : emptyFilteredTools;
   const { searchGroups } = useToolSections(effectiveFilteredForSearch);
+  const headerTextStyle: React.CSSProperties = {
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    padding: "0.5rem 0 0.25rem 0.5rem",
+    textTransform: "none",
+    color: "var(--text-secondary, rgba(0, 0, 0, 0.6))",
+    opacity: 0.7
+  };
+  const toTitleCase = (s: string) =>
+    s.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase());
 
   return (
     <Box
@@ -141,110 +93,55 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
           </Stack>
         ) : (
           <>
-        {quickSection && (
-          <>
-            <div
-              ref={quickHeaderRef}
-              style={{
-                position: "sticky",
-                top: 0,
-                zIndex: 2,
-                borderTop: `0.0625rem solid var(--tool-header-border)`,
-                borderBottom: `0.0625rem solid var(--tool-header-border)`,
-                padding: "0.5rem 1rem",
-                fontWeight: 600,
-                background: "var(--tool-header-bg)",
-                color: "var(--tool-header-text)",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-              }}
-              onClick={() => scrollTo(quickAccessRef)}
-            >
-              <span style={{ fontSize: "1rem" }}>{t("toolPicker.quickAccess", "QUICK ACCESS")}</span>
-              <Badge>
-                {recommendedCount}
-              </Badge>
-            </div>
-
-            <Box ref={quickAccessRef} w="100%" my="sm">
-              <Stack p="sm" gap="xs">
-                {favoriteToolItems.length > 0 && (
-                  <Box w="100%">
-                    <SubcategoryHeader label={t('toolPanel.fullscreen.favorites', 'Favourites')} mt={0} />
-                    <div>
-                      {favoriteToolItems.map(({ id, tool }) => (
-                        <ToolButton
-                          key={`fav-${id}`}
-                          id={id}
-                          tool={tool}
-                          isSelected={selectedToolKey === id}
-                          onSelect={onSelect}
-                          hasStars
-                        />
-                      ))}
-                    </div>
-                  </Box>
-                )}
-                {recommendedItems.length > 0 && (
-                  <Box w="100%">
-                    <SubcategoryHeader label={t('toolPanel.fullscreen.recommended', 'Recommended')} />
-                    <div>
-                      {recommendedItems.map(({ id, tool }) => (
-                        <ToolButton
-                          key={`rec-${id}`}
-                          id={id as ToolId}
-                          tool={tool}
-                          isSelected={selectedToolKey === id}
-                          onSelect={onSelect}
-                          hasStars
-                        />
-                      ))}
-                    </div>
-                  </Box>
-                )}
-              </Stack>
+        {/* Flat list: favorites and recommended first, then all subcategories */}
+        <Stack p="sm" gap="xs">
+          {favoriteToolItems.length > 0 && (
+            <Box w="100%">
+              <div style={headerTextStyle}>
+                {t('toolPanel.fullscreen.favorites', 'Favourites')}
+              </div>
+              <div>
+                {favoriteToolItems.map(({ id, tool }) => (
+                  <ToolButton
+                    key={`fav-${id}`}
+                    id={id}
+                    tool={tool}
+                    isSelected={selectedToolKey === id}
+                    onSelect={onSelect}
+                    hasStars
+                  />
+                ))}
+              </div>
             </Box>
-          </>
-        )}
-
-        {allSection && (
-          <>
-            <div
-              ref={allHeaderRef}
-              style={{
-                position: "sticky",
-                top: quickSection ? quickHeaderHeight -1 : 0,
-                zIndex: 2,
-                borderTop: `0.0625rem solid var(--tool-header-border)`,
-                borderBottom: `0.0625rem solid var(--tool-header-border)`,
-                padding: "0.5rem 1rem",
-                fontWeight: 600,
-                background: "var(--tool-header-bg)",
-                color: "var(--tool-header-text)",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between"
-              }}
-              onClick={() => scrollTo(allToolsRef)}
-            >
-              <span style={{ fontSize: "1rem" }}>{t("toolPicker.allTools", "ALL TOOLS")}</span>
-              <Badge>
-                {allSection?.subcategories.reduce((acc, sc) => acc + sc.tools.length, 0)}
-              </Badge>
-            </div>
-
-            <Box ref={allToolsRef} w="100%">
-              <Stack p="sm" gap="xs">
-                        {allSection?.subcategories.map((sc: SubcategoryGroup) =>
-                          renderToolButtons(t, sc, selectedToolKey, onSelect, true, false, undefined, true)
-                        )}
-              </Stack>
+          )}
+          {recommendedItems.length > 0 && (
+            <Box w="100%">
+              <div style={headerTextStyle}>
+                {t('toolPanel.fullscreen.recommended', 'Recommended')}
+              </div>
+              <div>
+                {recommendedItems.map(({ id, tool }) => (
+                  <ToolButton
+                    key={`rec-${id}`}
+                    id={id as ToolId}
+                    tool={tool}
+                    isSelected={selectedToolKey === id}
+                    onSelect={onSelect}
+                    hasStars
+                  />
+                ))}
+              </div>
             </Box>
-          </>
-        )}
+          )}
+          {allSection && allSection.subcategories.map((sc: SubcategoryGroup) => (
+            <Box key={sc.subcategoryId} w="100%">
+              <div style={headerTextStyle}>
+                {toTitleCase(getSubcategoryLabel(t, sc.subcategoryId))}
+              </div>
+              {renderToolButtons(t, sc, selectedToolKey, onSelect, false, false, undefined, true)}
+            </Box>
+          ))}
+        </Stack>
 
         {!quickSection && !allSection && <NoToolsFound />}
 
diff --git a/frontend/src/core/components/tools/automate/ToolSelector.tsx b/frontend/src/core/components/tools/automate/ToolSelector.tsx
index 3fc6b0a2a..6413f59e7 100644
--- a/frontend/src/core/components/tools/automate/ToolSelector.tsx
+++ b/frontend/src/core/components/tools/automate/ToolSelector.tsx
@@ -80,7 +80,7 @@ export default function ToolSelector({
       // If no sections, create a simple group from filtered tools
       if (baseFilteredTools.length > 0) {
         return [{
-          name: 'All Tools',
+          name: 'Tools',
           subcategoryId: 'all' as any,
           tools: baseFilteredTools.map(([key, tool]) => ({ id: key, tool }))
         }];
diff --git a/frontend/src/core/contexts/InviteModalContext.tsx b/frontend/src/core/contexts/InviteModalContext.tsx
new file mode 100644
index 000000000..e954c41be
--- /dev/null
+++ b/frontend/src/core/contexts/InviteModalContext.tsx
@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+interface InviteModalContextType {
+  isInviteModalOpen: boolean;
+  openInviteModal: () => void;
+  closeInviteModal: () => void;
+}
+
+const InviteModalContext = createContext<InviteModalContextType | null>(null);
+
+export function InviteModalProvider({ children }: { children: ReactNode }) {
+  const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
+
+  const openInviteModal = useCallback(() => {
+    setIsInviteModalOpen(true);
+  }, []);
+
+  const closeInviteModal = useCallback(() => {
+    setIsInviteModalOpen(false);
+  }, []);
+
+  return (
+    <InviteModalContext.Provider value={{ isInviteModalOpen, openInviteModal, closeInviteModal }}>
+      {children}
+    </InviteModalContext.Provider>
+  );
+}
+
+export function useInviteModal(): InviteModalContextType {
+  const context = useContext(InviteModalContext);
+  if (!context) {
+    throw new Error('useInviteModal must be used within InviteModalProvider');
+  }
+  return context;
+}
+
diff --git a/frontend/src/core/contexts/TourOrchestrationContext.tsx b/frontend/src/core/contexts/TourOrchestrationContext.tsx
index 3c55fd394..d8b7afdc0 100644
--- a/frontend/src/core/contexts/TourOrchestrationContext.tsx
+++ b/frontend/src/core/contexts/TourOrchestrationContext.tsx
@@ -68,7 +68,7 @@ export const TourOrchestrationProvider: React.FC<{ children: React.ReactNode }>
   const restoreWorkbenchState = useCallback(async () => {
     console.log('Restoring workbench state, saved files count:', savedFilesRef.current.length);
 
-    // Go back to All Tools
+    // Go back to Tools
     handleBackToTools();
 
     // Clear all files (including tour sample)
diff --git a/frontend/src/core/hooks/useToolSections.ts b/frontend/src/core/hooks/useToolSections.ts
index 79850f559..a94e4c474 100644
--- a/frontend/src/core/hooks/useToolSections.ts
+++ b/frontend/src/core/hooks/useToolSections.ts
@@ -64,8 +64,12 @@ export function useToolSections(
 
       Object.entries(subs).forEach(([s, tools]) => {
         const subcategoryId = s as SubcategoryId;
-        if (!all[subcategoryId]) all[subcategoryId] = [];
-        all[subcategoryId].push(...tools);
+        // Build the 'all' collection without duplicating recommended tools
+        // Recommended tools are shown in the Quick section only
+        if (categoryId !== ToolCategoryId.RECOMMENDED_TOOLS) {
+          if (!all[subcategoryId]) all[subcategoryId] = [];
+          all[subcategoryId].push(...tools);
+        }
       });
 
       if (categoryId === ToolCategoryId.RECOMMENDED_TOOLS) {
diff --git a/frontend/src/core/pages/HomePage.tsx b/frontend/src/core/pages/HomePage.tsx
index 6df688e55..1fcf8eccc 100644
--- a/frontend/src/core/pages/HomePage.tsx
+++ b/frontend/src/core/pages/HomePage.tsx
@@ -219,7 +219,7 @@ export default function HomePage() {
           <div className="mobile-bottom-bar">
             <button
               className="mobile-bottom-button"
-              aria-label={t('quickAccess.allTools', 'All Tools')}
+              aria-label={t('quickAccess.allTools', 'Tools')}
               onClick={() => {
                 handleBackToTools();
                 if (isMobile) {
@@ -228,7 +228,7 @@ export default function HomePage() {
               }}
             >
               <AppsIcon sx={{ fontSize: '1.5rem' }} />
-              <span className="mobile-bottom-button-label">{t('quickAccess.allTools', 'All Tools')}</span>
+              <span className="mobile-bottom-button-label">{t('quickAccess.allTools', 'Tools')}</span>
             </button>
             <button
               className="mobile-bottom-button"
diff --git a/frontend/src/core/services/userManagementService.ts b/frontend/src/core/services/userManagementService.ts
index 851b36cba..a74d60d07 100644
--- a/frontend/src/core/services/userManagementService.ts
+++ b/frontend/src/core/services/userManagementService.ts
@@ -69,7 +69,7 @@ export interface InviteUsersResponse {
 }
 
 export interface InviteLinkRequest {
-  email: string;
+  email?: string;
   role: string;
   teamId?: number;
   expiryHours?: number;
diff --git a/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx
index 090ae2a46..463a57e9c 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx
@@ -28,6 +28,7 @@ import { userManagementService, User } from '@app/services/userManagementService
 import { teamService, Team } from '@app/services/teamService';
 import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
 import { useAppConfig } from '@app/contexts/AppConfigContext';
+import InviteMembersModal from '@app/components/shared/InviteMembersModal';
 
 export default function PeopleSection() {
   const { t } = useTranslation();
@@ -40,8 +41,6 @@ export default function PeopleSection() {
   const [editUserModalOpened, setEditUserModalOpened] = useState(false);
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [processing, setProcessing] = useState(false);
-  const [inviteMode, setInviteMode] = useState<'email' | 'direct' | 'link'>('direct');
-  const [generatedInviteLink, setGeneratedInviteLink] = useState<string | null>(null);
 
   // License information
   const [licenseInfo, setLicenseInfo] = useState<{
@@ -53,31 +52,6 @@ export default function PeopleSection() {
     totalUsers: number;
   } | null>(null);
 
-  // Form state for direct invite
-  const [inviteForm, setInviteForm] = useState({
-    username: '',
-    password: '',
-    role: 'ROLE_USER',
-    teamId: undefined as number | undefined,
-    forceChange: false,
-  });
-
-  // Form state for email invite
-  const [emailInviteForm, setEmailInviteForm] = useState({
-    emails: '',
-    role: 'ROLE_USER',
-    teamId: undefined as number | undefined,
-  });
-
-  // Form state for invite link
-  const [inviteLinkForm, setInviteLinkForm] = useState({
-    email: '',
-    role: 'ROLE_USER',
-    teamId: undefined as number | undefined,
-    expiryHours: 72,
-    sendEmail: false,
-  });
-
   // Form state for edit user modal
   const [editForm, setEditForm] = useState({
     role: 'ROLE_USER',
@@ -129,143 +103,6 @@ export default function PeopleSection() {
     }
   };
 
-  const handleInviteUser = async () => {
-    if (!inviteForm.username || !inviteForm.password) {
-      alert({ alertType: 'error', title: t('workspace.people.addMember.usernameRequired') });
-      return;
-    }
-
-    try {
-      setProcessing(true);
-      await userManagementService.createUser({
-        username: inviteForm.username,
-        password: inviteForm.password,
-        role: inviteForm.role,
-        teamId: inviteForm.teamId,
-        authType: 'password',
-        forceChange: inviteForm.forceChange,
-      });
-      alert({ alertType: 'success', title: t('workspace.people.addMember.success') });
-      setInviteModalOpened(false);
-      setInviteForm({
-        username: '',
-        password: '',
-        role: 'ROLE_USER',
-        teamId: undefined,
-        forceChange: false,
-      });
-      fetchData();
-    } catch (error: any) {
-      console.error('Failed to create user:', error);
-      const errorMessage = error.response?.data?.message ||
-                          error.response?.data?.error ||
-                          error.message ||
-                          t('workspace.people.addMember.error');
-      alert({ alertType: 'error', title: errorMessage });
-    } finally {
-      setProcessing(false);
-    }
-  };
-
-  const handleEmailInvite = async () => {
-    if (!emailInviteForm.emails.trim()) {
-      alert({ alertType: 'error', title: t('workspace.people.emailInvite.emailsRequired', 'At least one email address is required') });
-      return;
-    }
-
-    try {
-      setProcessing(true);
-      const response = await userManagementService.inviteUsers({
-        emails: emailInviteForm.emails,
-        role: emailInviteForm.role,
-        teamId: emailInviteForm.teamId,
-      });
-
-      if (response.successCount > 0) {
-        alert({
-          alertType: 'success',
-          title: t('workspace.people.emailInvite.success', `${response.successCount} user(s) invited successfully`)
-        });
-
-        if (response.failureCount > 0 && response.errors) {
-          alert({
-            alertType: 'warning',
-            title: t('workspace.people.emailInvite.partialSuccess', 'Some invites failed'),
-            body: response.errors
-          });
-        }
-
-        setInviteModalOpened(false);
-        setEmailInviteForm({
-          emails: '',
-          role: 'ROLE_USER',
-          teamId: undefined,
-        });
-        fetchData();
-      } else {
-        alert({
-          alertType: 'error',
-          title: t('workspace.people.emailInvite.allFailed', 'Failed to invite users'),
-          body: response.errors || response.error
-        });
-      }
-    } catch (error: any) {
-      console.error('Failed to invite users:', error);
-      const errorMessage = error.response?.data?.message ||
-                          error.response?.data?.error ||
-                          error.message ||
-                          t('workspace.people.emailInvite.error', 'Failed to send invites');
-      alert({ alertType: 'error', title: errorMessage });
-    } finally {
-      setProcessing(false);
-    }
-  };
-
-  const handleGenerateInviteLink = async () => {
-    try {
-      setProcessing(true);
-      const response = await userManagementService.generateInviteLink({
-        email: inviteLinkForm.email,
-        role: inviteLinkForm.role,
-        teamId: inviteLinkForm.teamId,
-        expiryHours: inviteLinkForm.expiryHours,
-        sendEmail: inviteLinkForm.sendEmail,
-      });
-
-      // Construct full frontend URL
-      const frontendUrl = `${window.location.origin}/invite/${response.token}`;
-      setGeneratedInviteLink(frontendUrl);
-
-      if (response.emailSent) {
-        alert({
-          alertType: 'success',
-          title: t('workspace.people.inviteLink.successWithEmail', 'Invite link generated and email sent!')
-        });
-      } else if (inviteLinkForm.sendEmail && response.emailError) {
-        // Email was requested but failed
-        alert({
-          alertType: 'warning',
-          title: t('workspace.people.inviteLink.emailFailed', 'Invite link generated, but email failed'),
-          body: t('workspace.people.inviteLink.emailFailedDetails', 'Error: {0}. Please share the invite link manually.').replace('{0}', response.emailError)
-        });
-      } else {
-        alert({
-          alertType: 'success',
-          title: t('workspace.people.inviteLink.success', 'Invite link generated successfully!')
-        });
-      }
-    } catch (error: any) {
-      console.error('Failed to generate invite link:', error);
-      const errorMessage = error.response?.data?.message ||
-                          error.response?.data?.error ||
-                          error.message ||
-                          t('workspace.people.inviteLink.error', 'Failed to generate invite link');
-      alert({ alertType: 'error', title: errorMessage });
-    } finally {
-      setProcessing(false);
-    }
-  };
-
   const handleUpdateUserRole = async () => {
     if (!selectedUser) return;
 
@@ -344,18 +181,6 @@ export default function PeopleSection() {
     });
   };
 
-  const closeInviteModal = () => {
-    setInviteModalOpened(false);
-    setGeneratedInviteLink(null);
-    setInviteLinkForm({
-      email: '',
-      role: 'ROLE_USER',
-      teamId: undefined,
-      expiryHours: 72,
-      sendEmail: false,
-    });
-  };
-
   const filteredUsers = users.filter((user) =>
     user.username.toLowerCase().includes(searchQuery.toLowerCase())
   );
@@ -642,277 +467,11 @@ export default function PeopleSection() {
         </Table.Tbody>
       </Table>
 
-      {/* Add Member Modal */}
-      <Modal
+      {/* Invite Members Modal (reusable) */}
+      <InviteMembersModal
         opened={inviteModalOpened}
-        onClose={closeInviteModal}
-        size="md"
-        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
-        centered
-        padding="xl"
-        withCloseButton={false}
-      >
-        <Box pos="relative">
-          <CloseButton
-            onClick={closeInviteModal}
-            size="lg"
-            style={{
-              position: 'absolute',
-              top: -8,
-              right: -8,
-              zIndex: 1
-            }}
-          />
-          <Stack gap="lg" pt="md">
-            {/* Header with Icon */}
-            <Stack gap="md" align="center">
-              <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
-              <Text size="xl" fw={600} ta="center">
-                {t('workspace.people.inviteMembers.label', 'Invite Members')}
-              </Text>
-              {inviteMode === 'email' && (
-                <Text size="sm" c="dimmed" ta="center" px="md">
-                  {t('workspace.people.inviteMembers.subtitle', 'Type or paste in emails below, separated by commas. Your workspace will be billed by members.')}
-                </Text>
-              )}
-            </Stack>
-
-            {/* License Warning/Info */}
-            {licenseInfo && (
-              <Paper withBorder p="sm" bg={licenseInfo.availableSlots === 0 ? 'var(--mantine-color-red-light)' : 'var(--mantine-color-blue-light)'}>
-                <Stack gap="xs">
-                  <Group gap="xs">
-                    <LocalIcon icon={licenseInfo.availableSlots > 0 ? 'info' : 'warning'} width="1rem" height="1rem" />
-                    <Text size="sm" fw={500}>
-                      {licenseInfo.availableSlots > 0
-                        ? t('workspace.people.license.slotsAvailable', {
-                            count: licenseInfo.availableSlots,
-                            defaultValue: `${licenseInfo.availableSlots} user slot(s) available`
-                          })
-                        : t('workspace.people.license.noSlotsAvailable', 'No user slots available')}
-                    </Text>
-                  </Group>
-                  <Text size="xs" c="dimmed">
-                    {t('workspace.people.license.currentUsage', {
-                      current: licenseInfo.totalUsers,
-                      max: licenseInfo.maxAllowedUsers,
-                      defaultValue: `Currently using ${licenseInfo.totalUsers} of ${licenseInfo.maxAllowedUsers} user licenses`
-                    })}
-                  </Text>
-                </Stack>
-              </Paper>
-            )}
-
-            {/* Mode Toggle */}
-            <Tooltip
-              label={t('workspace.people.inviteMode.emailDisabled', 'Email invites require SMTP configuration and mail.enableInvites=true in settings')}
-              disabled={!!config?.enableEmailInvites}
-              position="bottom"
-              withArrow
-              zIndex={Z_INDEX_OVER_CONFIG_MODAL + 1}
-            >
-              <div>
-                <SegmentedControl
-                  value={inviteMode}
-                  onChange={(value) => {
-                    setInviteMode(value as 'email' | 'direct' | 'link');
-                    setGeneratedInviteLink(null);
-                  }}
-                  data={[
-                    {
-                      label: t('workspace.people.inviteMode.username', 'Username'),
-                      value: 'direct',
-                    },
-                    {
-                      label: t('workspace.people.inviteMode.link', 'Link'),
-                      value: 'link',
-                    },
-                    {
-                      label: t('workspace.people.inviteMode.email', 'Email'),
-                      value: 'email',
-                      disabled: !config?.enableEmailInvites,
-                    },
-                  ]}
-                  fullWidth
-                />
-              </div>
-            </Tooltip>
-
-            {/* Link Mode */}
-            {inviteMode === 'link' && (
-              <>
-                <TextInput
-                  label={t('workspace.people.inviteLink.email', 'Email (optional)')}
-                  placeholder={t('workspace.people.inviteLink.emailPlaceholder', 'user@example.com')}
-                  value={inviteLinkForm.email}
-                  onChange={(e) => setInviteLinkForm({ ...inviteLinkForm, email: e.currentTarget.value })}
-                  description={t('workspace.people.inviteLink.emailDescription', 'If provided, the link will be tied to this email address')}
-                />
-                <Select
-                  label={t('workspace.people.addMember.role')}
-                  data={roleOptions}
-                  value={inviteLinkForm.role}
-                  onChange={(value) => setInviteLinkForm({ ...inviteLinkForm, role: value || 'ROLE_USER' })}
-                  renderOption={renderRoleOption}
-                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
-                />
-                <Select
-                  label={t('workspace.people.addMember.team')}
-                  placeholder={t('workspace.people.addMember.teamPlaceholder')}
-                  data={teamOptions}
-                  value={inviteLinkForm.teamId?.toString()}
-                  onChange={(value) => setInviteLinkForm({ ...inviteLinkForm, teamId: value ? parseInt(value) : undefined })}
-                  clearable
-                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
-                />
-                <TextInput
-                  label={t('workspace.people.inviteLink.expiryHours', 'Link expires in (hours)')}
-                  type="number"
-                  value={inviteLinkForm.expiryHours}
-                  onChange={(e) => setInviteLinkForm({ ...inviteLinkForm, expiryHours: parseInt(e.currentTarget.value) || 72 })}
-                  min={1}
-                  max={720}
-                />
-                {inviteLinkForm.email && (
-                  <Checkbox
-                    label={t('workspace.people.inviteLink.sendEmail', 'Send invite link via email')}
-                    description={t('workspace.people.inviteLink.sendEmailDescription', 'Also send the link to the provided email address')}
-                    checked={inviteLinkForm.sendEmail}
-                    onChange={(e) => setInviteLinkForm({ ...inviteLinkForm, sendEmail: e.currentTarget.checked })}
-                  />
-                )}
-
-                {/* Display generated link */}
-                {generatedInviteLink && (
-                  <Paper withBorder p="md" bg="var(--mantine-color-green-light)">
-                    <Stack gap="sm">
-                      <Text size="sm" fw={500}>{t('workspace.people.inviteLink.generated', 'Invite Link Generated')}</Text>
-                      <Group gap="xs">
-                        <TextInput
-                          value={generatedInviteLink}
-                          readOnly
-                          style={{ flex: 1 }}
-                        />
-                        <Button
-                          variant="light"
-                          onClick={async () => {
-                            try {
-                              await navigator.clipboard.writeText(generatedInviteLink);
-                              alert({ alertType: 'success', title: t('workspace.people.inviteLink.copied', 'Link copied to clipboard!') });
-                            } catch {
-                              // Fallback for browsers without clipboard API
-                              const textArea = document.createElement('textarea');
-                              textArea.value = generatedInviteLink;
-                              textArea.style.position = 'fixed';
-                              textArea.style.opacity = '0';
-                              document.body.appendChild(textArea);
-                              textArea.select();
-                              document.execCommand('copy');
-                              document.body.removeChild(textArea);
-                              alert({ alertType: 'success', title: t('workspace.people.inviteLink.copied', 'Link copied to clipboard!') });
-                            }
-                          }}
-                        >
-                          <LocalIcon icon="content-copy" width="1rem" height="1rem" />
-                        </Button>
-                      </Group>
-                    </Stack>
-                  </Paper>
-                )}
-              </>
-            )}
-
-            {/* Email Mode */}
-            {inviteMode === 'email' && config?.enableEmailInvites && (
-              <>
-                <Textarea
-                  label={t('workspace.people.emailInvite.emails', 'Email Addresses')}
-                  placeholder={t('workspace.people.emailInvite.emailsPlaceholder', 'user1@example.com, user2@example.com')}
-                  value={emailInviteForm.emails}
-                  onChange={(e) => setEmailInviteForm({ ...emailInviteForm, emails: e.currentTarget.value })}
-                  minRows={3}
-                  required
-                />
-                <Select
-                  label={t('workspace.people.addMember.role')}
-                  data={roleOptions}
-                  value={emailInviteForm.role}
-                  onChange={(value) => setEmailInviteForm({ ...emailInviteForm, role: value || 'ROLE_USER' })}
-                  renderOption={renderRoleOption}
-                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
-                />
-                <Select
-                  label={t('workspace.people.addMember.team')}
-                  placeholder={t('workspace.people.addMember.teamPlaceholder')}
-                  data={teamOptions}
-                  value={emailInviteForm.teamId?.toString()}
-                  onChange={(value) => setEmailInviteForm({ ...emailInviteForm, teamId: value ? parseInt(value) : undefined })}
-                  clearable
-                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
-                />
-              </>
-            )}
-
-            {/* Direct/Username Mode */}
-            {inviteMode === 'direct' && (
-              <>
-                <TextInput
-                  label={t('workspace.people.addMember.username')}
-                  placeholder={t('workspace.people.addMember.usernamePlaceholder')}
-                  value={inviteForm.username}
-                  onChange={(e) => setInviteForm({ ...inviteForm, username: e.currentTarget.value })}
-                  required
-                />
-                <TextInput
-                  label={t('workspace.people.addMember.password')}
-                  type="password"
-                  placeholder={t('workspace.people.addMember.passwordPlaceholder')}
-                  value={inviteForm.password}
-                  onChange={(e) => setInviteForm({ ...inviteForm, password: e.currentTarget.value })}
-                  required
-                />
-                <Select
-                  label={t('workspace.people.addMember.role')}
-                  data={roleOptions}
-                  value={inviteForm.role}
-                  onChange={(value) => setInviteForm({ ...inviteForm, role: value || 'ROLE_USER' })}
-                  renderOption={renderRoleOption}
-                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
-                />
-                <Select
-                  label={t('workspace.people.addMember.team')}
-                  placeholder={t('workspace.people.addMember.teamPlaceholder')}
-                  data={teamOptions}
-                  value={inviteForm.teamId?.toString()}
-                  onChange={(value) => setInviteForm({ ...inviteForm, teamId: value ? parseInt(value) : undefined })}
-                  clearable
-                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
-                />
-                <Checkbox
-                  label={t('workspace.people.addMember.forcePasswordChange', 'Force password change on first login')}
-                  checked={inviteForm.forceChange}
-                  onChange={(e) => setInviteForm({ ...inviteForm, forceChange: e.currentTarget.checked })}
-                />
-              </>
-            )}
-
-            {/* Action Button */}
-            <Button
-              onClick={inviteMode === 'email' ? handleEmailInvite : inviteMode === 'link' ? handleGenerateInviteLink : handleInviteUser}
-              loading={processing}
-              fullWidth
-              size="md"
-              mt="md"
-            >
-              {inviteMode === 'email'
-                ? t('workspace.people.emailInvite.submit', 'Send Invites')
-                : inviteMode === 'link'
-                  ? t('workspace.people.inviteLink.submit', 'Generate Link')
-                  : t('workspace.people.addMember.submit')}
-            </Button>
-          </Stack>
-        </Box>
-      </Modal>
+        onClose={() => setInviteModalOpened(false)}
+      />
 
       {/* Edit User Modal */}
       <Modal