diff --git a/app/components/settings/invite-user-dialog.tsx b/app/components/settings/invite-user-dialog.tsx
new file mode 100644
index 000000000..4ef96c4b9
--- /dev/null
+++ b/app/components/settings/invite-user-dialog.tsx
@@ -0,0 +1,244 @@
+import { cloneElement, useCallback, useEffect, useState } from "react";
+import { OrganizationRoles } from "@prisma/client";
+import { UserIcon } from "lucide-react";
+import { useZorm } from "react-zorm";
+import { z } from "zod";
+import { useCurrentOrganization } from "~/hooks/use-current-organization-id";
+import useFetcherWithReset from "~/hooks/use-fetcher-with-reset";
+import type { UserFriendlyRoles } from "~/routes/_layout+/settings.team";
+import { isFormProcessing } from "~/utils/form";
+import { validEmail } from "~/utils/misc";
+import Input from "../forms/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "../forms/select";
+import { Dialog, DialogPortal } from "../layout/dialog";
+import { Button } from "../shared/button";
+import { Image } from "../shared/image";
+import When from "../when/when";
+
+type InviteUserDialogProps = {
+  className?: string;
+  teamMemberId?: string;
+  trigger?: React.ReactElement<{ onClick: () => void }>;
+  open?: boolean;
+  onClose?: () => void;
+};
+
+export const InviteUserFormSchema = z.object({
+  email: z
+    .string()
+    .transform((email) => email.toLowerCase())
+    .refine(validEmail, () => ({
+      message: "Please enter a valid email",
+    })),
+  teamMemberId: z.string().optional(),
+  role: z.nativeEnum(OrganizationRoles, { message: "Please select a role." }),
+});
+
+const organizationRolesMap: Record<string, UserFriendlyRoles> = {
+  [OrganizationRoles.ADMIN]: "Administrator",
+  [OrganizationRoles.BASE]: "Base",
+  [OrganizationRoles.SELF_SERVICE]: "Self service",
+};
+
+export default function InviteUserDialog({
+  className,
+  trigger,
+  teamMemberId,
+  open = false,
+  onClose,
+}: InviteUserDialogProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const organization = useCurrentOrganization();
+
+  const fetcher = useFetcherWithReset<{
+    error?: { message?: string };
+    success?: boolean;
+  }>();
+
+  const disabled = isFormProcessing(fetcher.state);
+
+  const zo = useZorm("NewQuestionWizardScreen", InviteUserFormSchema);
+
+  function openDialog() {
+    setIsDialogOpen(true);
+  }
+
+  const closeDialog = useCallback(() => {
+    zo.form?.reset();
+    setIsDialogOpen(false);
+    onClose && onClose();
+  }, [onClose, zo.form]);
+
+  useEffect(
+    function handleSuccess() {
+      if (fetcher.data?.success === true) {
+        closeDialog();
+        fetcher.reset();
+      }
+    },
+    [closeDialog, fetcher, fetcher.data?.success]
+  );
+
+  if (!organization) {
+    return null;
+  }
+
+  return (
+    <>
+      {trigger ? cloneElement(trigger, { onClick: openDialog }) : null}
+
+      <DialogPortal>
+        <Dialog
+          className={className}
+          title={
+            <div className="mt-4 inline-flex items-center justify-center rounded-full border-4 border-solid border-primary-50 bg-primary-100 p-1.5 text-primary">
+              <UserIcon />
+            </div>
+          }
+          open={isDialogOpen || open}
+          onClose={closeDialog}
+        >
+          <div className="px-6 py-4">
+            <div className="mb-5">
+              <h4>Invite team members</h4>
+              <p>
+                Invite a user to this workspace. Make sure to give them the
+                proper role.
+              </p>
+            </div>
+
+            <fetcher.Form
+              ref={zo.ref}
+              action="/api/settings/invite-user"
+              method="post"
+              className="flex flex-col gap-3"
+            >
+              {/* <input type="hidden" name="redirectTo" value={redirectTo} /> */}
+              <When truthy={!!teamMemberId}>
+                <input
+                  type="hidden"
+                  name="teamMemberId"
+                  value={teamMemberId!}
+                />
+              </When>
+
+              <SelectGroup>
+                <SelectLabel className="pl-0">Workspace</SelectLabel>
+                <Select name="organizationId" defaultValue={organization.id}>
+                  <div className="flex h-10 w-full items-center justify-between truncate rounded-md border border-gray-300 bg-transparent px-3.5 py-3 text-[16px] text-gray-500 placeholder:text-gray-500 focus:border-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-25 focus:ring-offset-2 disabled:opacity-50  [&_span]:max-w-full [&_span]:truncate">
+                    <SelectValue />
+                  </div>
+                  <SelectContent
+                    position="popper"
+                    className="w-full min-w-[300px] max-w-full"
+                    align="start"
+                  >
+                    <div className=" max-h-[320px] overflow-auto ">
+                      <SelectItem
+                        value={organization.id}
+                        key={organization.id}
+                        className="p-2"
+                      >
+                        <div className="flex max-w-full items-center gap-2 truncate">
+                          <Image
+                            imageId={organization.imageId}
+                            alt="img"
+                            className="size-6 rounded-[2px] object-cover"
+                          />
+
+                          <div className=" ml-px max-w-full truncate text-sm text-gray-900">
+                            {organization.name}
+                          </div>
+                        </div>
+                      </SelectItem>
+                    </div>
+                  </SelectContent>
+                </Select>
+              </SelectGroup>
+
+              <SelectGroup>
+                <SelectLabel className="pl-0">Role</SelectLabel>
+                <Select name="role">
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select user role" />
+                  </SelectTrigger>
+                  <SelectContent
+                    position="popper"
+                    className="w-full min-w-[300px]"
+                    align="start"
+                  >
+                    <div className=" max-h-[320px] overflow-auto">
+                      {Object.entries(organizationRolesMap).map(([k, v]) => (
+                        <SelectItem value={k} key={k} className="p-2">
+                          <div className="flex items-center gap-2">
+                            <div className=" ml-px block text-sm lowercase text-gray-900 first-letter:uppercase">
+                              {v}
+                            </div>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </div>
+                  </SelectContent>
+                </Select>
+              </SelectGroup>
+              <When truthy={!!zo.errors.role()}>
+                <p className="-mt-1 text-sm text-error-500">
+                  {zo.errors?.role()?.message}
+                </p>
+              </When>
+
+              <div className="pt-1.5">
+                <Input
+                  name={zo.fields.email()}
+                  type="email"
+                  autoComplete="email"
+                  disabled={disabled}
+                  error={zo.errors.email()?.message}
+                  icon="mail"
+                  label={"Email address"}
+                  placeholder="rick@rolled.com"
+                  required
+                />
+              </div>
+
+              <When truthy={!!fetcher?.data?.error}>
+                <p className="text-sm text-error-500">
+                  {fetcher.data?.error?.message}
+                </p>
+              </When>
+
+              <div className="mt-7 flex gap-1">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="sm"
+                  width="full"
+                  disabled={disabled}
+                  onClick={closeDialog}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  size="sm"
+                  width="full"
+                  disabled={disabled}
+                >
+                  Send Invite
+                </Button>
+              </div>
+            </fetcher.Form>
+          </div>
+        </Dialog>
+      </DialogPortal>
+    </>
+  );
+}
diff --git a/app/components/workspace/nrm-actions-dropdown.tsx b/app/components/workspace/nrm-actions-dropdown.tsx
index 2b68592ea..fa5e90251 100644
--- a/app/components/workspace/nrm-actions-dropdown.tsx
+++ b/app/components/workspace/nrm-actions-dropdown.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import type { Prisma } from "@prisma/client";
 import { useLoaderData } from "@remix-run/react";
 import { VerticalDotsIcon } from "~/components/icons/library";
@@ -10,8 +11,8 @@ import {
 
 import { useControlledDropdownMenu } from "~/hooks/use-controlled-dropdown-menu";
 import type { loader } from "~/routes/_layout+/settings.team.nrm";
-import { tw } from "~/utils/tw";
 import { DeleteMember } from "./delete-member";
+import InviteUserDialog from "../settings/invite-user-dialog";
 import { Button } from "../shared/button";
 
 export function TeamMembersActionsDropdown({
@@ -27,68 +28,80 @@ export function TeamMembersActionsDropdown({
     };
   }>;
 }) {
+  const [isInviteOpen, setIsInviteOpen] = useState(false);
   const { isPersonalOrg } = useLoaderData<typeof loader>();
   const { ref, open, setOpen } = useControlledDropdownMenu();
 
   return (
-    <DropdownMenu
-      modal={false}
-      onOpenChange={(open) => setOpen(open)}
-      open={open}
-    >
-      <DropdownMenuTrigger
-        className="outline-none focus-visible:border-0"
-        aria-label="Actions Trigger"
+    <>
+      <DropdownMenu
+        modal={false}
+        onOpenChange={(open) => setOpen(open)}
+        open={open}
       >
-        <i className="inline-block px-3 py-0 text-gray-400 ">
-          <VerticalDotsIcon />
-        </i>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="end"
-        className="order w-[180px] rounded-md bg-white p-[6px] text-right "
-        ref={ref}
-      >
-        <DropdownMenuItem className="p-0 text-gray-700 hover:bg-slate-100 hover:text-gray-700">
-          <Button
-            icon="send"
-            to={`/settings/team/invites/invite-user?teamMemberId=${teamMember.id}`}
-            role="link"
-            variant="link"
-            width="full"
-            className={tw(
-              "!hover:text-gray-700 justify-start  p-4 !text-gray-700"
-            )}
-            onClick={() => setOpen(false)}
-            disabled={
-              isPersonalOrg
-                ? {
-                    reason:
-                      "You are not able to invite users to a personal workspace. ",
-                  }
-                : false
-            }
+        <DropdownMenuTrigger
+          className="outline-none focus-visible:border-0"
+          aria-label="Actions Trigger"
+        >
+          <i className="inline-block px-3 py-0 text-gray-400 ">
+            <VerticalDotsIcon />
+          </i>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          className="order w-[180px] rounded-md bg-white p-[6px] text-right "
+          ref={ref}
+        >
+          <DropdownMenuItem
+            className="p-0 text-gray-700 hover:bg-slate-100 hover:text-gray-700"
+            onSelect={(e) => e.preventDefault()}
           >
-            Invite user
-          </Button>
-        </DropdownMenuItem>
+            <Button
+              icon="send"
+              variant="link"
+              className="!hover:text-gray-700 justify-start p-4 !text-gray-700"
+              onClick={() => {
+                setIsInviteOpen(true);
+                setOpen(false);
+              }}
+              disabled={
+                isPersonalOrg
+                  ? {
+                      reason:
+                        "You are not able to invite users to a personal workspace. ",
+                    }
+                  : false
+              }
+            >
+              Invite user
+            </Button>
+          </DropdownMenuItem>
 
-        <DropdownMenuItem className="p-0 text-gray-700 hover:bg-slate-100 hover:text-gray-700">
-          <Button
-            to={`${teamMember.id}/edit`}
-            role="link"
-            variant="link"
-            className="justify-start whitespace-nowrap px-4 py-3  text-gray-700 hover:text-gray-700"
-            width="full"
-            icon="pen"
-            onClick={() => setOpen(false)}
-          >
-            Edit
-          </Button>
-        </DropdownMenuItem>
+          <DropdownMenuItem className="p-0 text-gray-700 hover:bg-slate-100 hover:text-gray-700">
+            <Button
+              to={`${teamMember.id}/edit`}
+              role="link"
+              variant="link"
+              className="justify-start whitespace-nowrap px-4 py-3  text-gray-700 hover:text-gray-700"
+              width="full"
+              icon="pen"
+              onClick={() => setOpen(false)}
+            >
+              Edit
+            </Button>
+          </DropdownMenuItem>
+
+          <DeleteMember teamMember={teamMember} />
+        </DropdownMenuContent>
+      </DropdownMenu>
 
-        <DeleteMember teamMember={teamMember} />
-      </DropdownMenuContent>
-    </DropdownMenu>
+      <InviteUserDialog
+        teamMemberId={teamMember.id}
+        open={isInviteOpen}
+        onClose={() => {
+          setIsInviteOpen(false);
+        }}
+      />
+    </>
   );
 }
diff --git a/app/routes/_layout+/settings.team.invites.invite-user.tsx b/app/routes/_layout+/settings.team.invites.invite-user.tsx
deleted file mode 100644
index 94d4249a9..000000000
--- a/app/routes/_layout+/settings.team.invites.invite-user.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-import { OrganizationRoles } from "@prisma/client";
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
-import { json, redirect } from "@remix-run/node";
-import { useActionData, useNavigation } from "@remix-run/react";
-import { useZorm } from "react-zorm";
-import z from "zod";
-import { Form } from "~/components/custom-form";
-import Input from "~/components/forms/input";
-import {
-  Select,
-  SelectGroup,
-  SelectContent,
-  SelectItem,
-  SelectLabel,
-  SelectValue,
-  SelectTrigger,
-} from "~/components/forms/select";
-import { UserIcon } from "~/components/icons/library";
-import { Button } from "~/components/shared/button";
-import { Image } from "~/components/shared/image";
-import { db } from "~/database/db.server";
-import { useSearchParams } from "~/hooks/search-params";
-import { useCurrentOrganization } from "~/hooks/use-current-organization-id";
-import { createInvite } from "~/modules/invite/service.server";
-import styles from "~/styles/layout/custom-modal.css?url";
-import { sendNotification } from "~/utils/emitter/send-notification.server";
-import { ShelfError, makeShelfError } from "~/utils/error";
-import { isFormProcessing } from "~/utils/form";
-import { data, error, parseData } from "~/utils/http.server";
-import { validEmail } from "~/utils/misc";
-import {
-  PermissionAction,
-  PermissionEntity,
-} from "~/utils/permissions/permission.data";
-import { requirePermission } from "~/utils/roles.server";
-import { assertUserCanInviteUsersToWorkspace } from "~/utils/subscription.server";
-import { tw } from "~/utils/tw";
-import type { UserFriendlyRoles } from "./settings.team";
-
-const InviteUserFormSchema = z.object({
-  email: z
-    .string()
-    .transform((email) => email.toLowerCase())
-    .refine(validEmail, () => ({
-      message: "Please enter a valid email",
-    })),
-  teamMemberId: z.string().optional(),
-  role: z.nativeEnum(OrganizationRoles),
-});
-
-export const loader = async ({ context, request }: LoaderFunctionArgs) => {
-  const authSession = context.getSession();
-  const { userId } = authSession;
-
-  try {
-    const { organizationId } = await requirePermission({
-      userId,
-      request,
-      entity: PermissionEntity.teamMember,
-      action: PermissionAction.create,
-    });
-
-    await assertUserCanInviteUsersToWorkspace({ organizationId });
-
-    return json(
-      data({
-        showModal: true,
-      })
-    );
-  } catch (cause) {
-    const reason = makeShelfError(cause);
-    throw json(error(reason), { status: reason.status });
-  }
-};
-
-export const action = async ({ context, request }: ActionFunctionArgs) => {
-  const authSession = context.getSession();
-  const { userId } = authSession;
-
-  try {
-    const { organizationId } = await requirePermission({
-      userId,
-      request,
-      entity: PermissionEntity.teamMember,
-      action: PermissionAction.create,
-    });
-
-    const { email, teamMemberId, role } = parseData(
-      await request.formData(),
-      InviteUserFormSchema
-    );
-
-    let teamMemberName = email.split("@")[0];
-
-    if (teamMemberId) {
-      const teamMember = await db.teamMember
-        .findUnique({
-          where: { deletedAt: null, id: teamMemberId },
-        })
-        .catch((cause) => {
-          throw new ShelfError({
-            cause,
-            message: "Failed to get team member",
-            additionalData: { teamMemberId, userId },
-            label: "Team",
-          });
-        });
-
-      if (teamMember) {
-        teamMemberName = teamMember.name;
-      }
-    }
-
-    const existingInvites = await db.invite.findMany({
-      where: {
-        status: "PENDING",
-        inviteeEmail: email,
-        organizationId,
-      },
-    });
-
-    if (existingInvites.length) {
-      throw new ShelfError({
-        cause: null,
-        message:
-          "User already has a pending invite. Either resend it or cancel it in order to be able to send a new one.",
-        additionalData: { email, organizationId },
-        label: "Invite",
-        shouldBeCaptured: false,
-      });
-    }
-
-    const invite = await createInvite({
-      organizationId,
-      inviteeEmail: email,
-      inviterId: userId,
-      roles: [role],
-      teamMemberName,
-      teamMemberId,
-      userId,
-    });
-
-    if (invite) {
-      sendNotification({
-        title: "Successfully invited user",
-        message:
-          "They will receive an email in which they can complete their registration.",
-        icon: { name: "success", variant: "success" },
-        senderId: userId,
-      });
-
-      return redirect("/settings/team/invites");
-    }
-
-    return json(data(null));
-  } catch (cause) {
-    const reason = makeShelfError(cause, {});
-    return json(error(reason), { status: reason.status });
-  }
-};
-
-export function links() {
-  return [{ rel: "stylesheet", href: styles }];
-}
-export const handle = {
-  name: "settings.team.invites.invite-user",
-};
-
-const organizationRolesMap: Record<string, UserFriendlyRoles> = {
-  [OrganizationRoles.ADMIN]: "Administrator",
-  [OrganizationRoles.BASE]: "Base",
-  [OrganizationRoles.SELF_SERVICE]: "Self service",
-};
-
-export default function InviteUser() {
-  const organization = useCurrentOrganization();
-  const zo = useZorm("NewQuestionWizardScreen", InviteUserFormSchema);
-  const navigation = useNavigation();
-  const disabled = isFormProcessing(navigation.state);
-  const [searchParams] = useSearchParams();
-  const teamMemberId = searchParams.get("teamMemberId");
-
-  const actionData = useActionData<typeof action>();
-  return organization ? (
-    <>
-      <div className="modal-content-wrapper">
-        <div className="mb-4 mr-3 inline-flex items-center justify-center rounded-full border-[5px] border-solid border-primary-50 bg-primary-100 p-1.5 text-primary">
-          <UserIcon />
-        </div>
-        <div className="mb-5">
-          <h4>Invite team members</h4>
-          <p>
-            Invite a user to this workspace. Make sure to give them the proper
-            role.
-          </p>
-        </div>
-        <Form method="post" className="flex flex-col gap-3" ref={zo.ref}>
-          {teamMemberId ? (
-            <input type="hidden" name="teamMemberId" value={teamMemberId} />
-          ) : null}
-          <SelectGroup>
-            <SelectLabel className="pl-0">Workspace</SelectLabel>
-            <Select name="organizationId" defaultValue={organization.id}>
-              <div className="flex h-10 w-full items-center justify-between truncate rounded-md border border-gray-300 bg-transparent px-3.5 py-3 text-[16px] text-gray-500 placeholder:text-gray-500 focus:border-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-25 focus:ring-offset-2 disabled:opacity-50  [&_span]:max-w-full [&_span]:truncate">
-                <SelectValue />
-              </div>
-              <SelectContent
-                position="popper"
-                className="w-full min-w-[300px] max-w-full"
-                align="start"
-              >
-                <div className=" max-h-[320px] overflow-auto ">
-                  <SelectItem
-                    value={organization.id}
-                    key={organization.id}
-                    className="p-2"
-                  >
-                    <div className="flex max-w-full items-center gap-2 truncate">
-                      <Image
-                        imageId={organization.imageId}
-                        alt="img"
-                        className={tw("size-6 rounded-[2px] object-cover")}
-                      />
-
-                      <div className=" ml-px max-w-full truncate text-sm text-gray-900">
-                        {organization.name}
-                      </div>
-                    </div>
-                  </SelectItem>
-                </div>
-              </SelectContent>
-            </Select>
-          </SelectGroup>
-
-          <SelectGroup>
-            <SelectLabel className="pl-0">Role</SelectLabel>
-            <Select name="role">
-              <SelectTrigger>
-                <SelectValue placeholder="Select user role" />
-              </SelectTrigger>
-              <SelectContent
-                position="popper"
-                className="w-full min-w-[300px]"
-                align="start"
-              >
-                <div className=" max-h-[320px] overflow-auto">
-                  {Object.entries(organizationRolesMap).map(([k, v]) => (
-                    <SelectItem value={k} key={k} className="p-2">
-                      <div className="flex items-center gap-2">
-                        <div className=" ml-px block text-sm lowercase text-gray-900 first-letter:uppercase">
-                          {v}
-                        </div>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </div>
-              </SelectContent>
-            </Select>
-          </SelectGroup>
-
-          <div className="pt-1.5">
-            <Input
-              name={zo.fields.email()}
-              type="email"
-              autoComplete="email"
-              disabled={disabled}
-              error={zo.errors.email()?.message}
-              icon="mail"
-              label={"Email address"}
-              placeholder="rick@rolled.com"
-              required
-            />
-          </div>
-
-          {actionData?.error ? (
-            <div className="text-sm text-error-500">
-              {actionData.error.message}
-            </div>
-          ) : null}
-
-          <div className="mt-7 flex gap-1">
-            <Button
-              variant="secondary"
-              to=".."
-              size="sm"
-              width="full"
-              disabled={disabled}
-            >
-              Cancel
-            </Button>
-            <Button type="submit" size="sm" width="full" disabled={disabled}>
-              Send Invite
-            </Button>
-          </div>
-        </Form>
-      </div>
-    </>
-  ) : null;
-}
diff --git a/app/routes/_layout+/settings.team.invites.tsx b/app/routes/_layout+/settings.team.invites.tsx
index a306e1889..0d41546ec 100644
--- a/app/routes/_layout+/settings.team.invites.tsx
+++ b/app/routes/_layout+/settings.team.invites.tsx
@@ -11,6 +11,7 @@ import type { HeaderData } from "~/components/layout/header/types";
 import { List } from "~/components/list";
 import { ListContentWrapper } from "~/components/list/content-wrapper";
 import { Filters } from "~/components/list/filters";
+import InviteUserDialog from "~/components/settings/invite-user-dialog";
 import { Button } from "~/components/shared/button";
 import { InfoTooltip } from "~/components/shared/info-tooltip";
 import { Td, Th } from "~/components/table";
@@ -159,13 +160,16 @@ export default function UserInvitesSetting() {
 
       <ListContentWrapper>
         <Filters>
-          <Button
-            variant="primary"
-            to="invite-user"
-            className="mt-2 w-full md:mt-0 md:w-max"
-          >
-            <span className=" whitespace-nowrap">Invite a user</span>
-          </Button>
+          <InviteUserDialog
+            trigger={
+              <Button
+                variant="primary"
+                className="mt-2 w-full md:mt-0 md:w-max"
+              >
+                <span className=" whitespace-nowrap">Invite a user</span>
+              </Button>
+            }
+          />
         </Filters>
 
         <List
diff --git a/app/routes/_layout+/settings.team.users.tsx b/app/routes/_layout+/settings.team.users.tsx
index ce4a770c5..a629342d4 100644
--- a/app/routes/_layout+/settings.team.users.tsx
+++ b/app/routes/_layout+/settings.team.users.tsx
@@ -11,6 +11,7 @@ import type { HeaderData } from "~/components/layout/header/types";
 import { List } from "~/components/list";
 import { ListContentWrapper } from "~/components/list/content-wrapper";
 import { Filters } from "~/components/list/filters";
+import InviteUserDialog from "~/components/settings/invite-user-dialog";
 import { Button } from "~/components/shared/button";
 import { InfoTooltip } from "~/components/shared/info-tooltip";
 import { Td, Th } from "~/components/table";
@@ -159,13 +160,16 @@ export default function UserTeamSetting() {
 
       <ListContentWrapper>
         <Filters>
-          <Button
-            variant="primary"
-            to="../invites/invite-user"
-            className="mt-2 w-full md:mt-0 md:w-max"
-          >
-            <span className=" whitespace-nowrap">Invite a user</span>
-          </Button>
+          <InviteUserDialog
+            trigger={
+              <Button
+                className="mt-2 w-full md:mt-0 md:w-max"
+                variant="primary"
+              >
+                <span className="whitespace-nowrap">Invite a user</span>
+              </Button>
+            }
+          />
         </Filters>
 
         <List
diff --git a/app/routes/api+/settings.invite-user.ts b/app/routes/api+/settings.invite-user.ts
new file mode 100644
index 000000000..304cc99ab
--- /dev/null
+++ b/app/routes/api+/settings.invite-user.ts
@@ -0,0 +1,101 @@
+import { json, type ActionFunctionArgs } from "@remix-run/node";
+import { InviteUserFormSchema } from "~/components/settings/invite-user-dialog";
+import { db } from "~/database/db.server";
+import { createInvite } from "~/modules/invite/service.server";
+import { sendNotification } from "~/utils/emitter/send-notification.server";
+import { makeShelfError, ShelfError } from "~/utils/error";
+import { data, error, parseData } from "~/utils/http.server";
+import {
+  PermissionAction,
+  PermissionEntity,
+} from "~/utils/permissions/permission.data";
+import { requirePermission } from "~/utils/roles.server";
+import { assertUserCanInviteUsersToWorkspace } from "~/utils/subscription.server";
+
+export async function action({ context, request }: ActionFunctionArgs) {
+  const authSession = context.getSession();
+  const { userId } = authSession;
+
+  try {
+    const { organizationId } = await requirePermission({
+      userId,
+      request,
+      entity: PermissionEntity.teamMember,
+      action: PermissionAction.create,
+    });
+
+    await assertUserCanInviteUsersToWorkspace({ organizationId });
+
+    const { email, teamMemberId, role } = parseData(
+      await request.formData(),
+      InviteUserFormSchema
+    );
+
+    let teamMemberName = email.split("@")[0];
+
+    if (teamMemberId) {
+      const teamMember = await db.teamMember
+        .findUnique({
+          where: { deletedAt: null, id: teamMemberId },
+        })
+        .catch((cause) => {
+          throw new ShelfError({
+            cause,
+            message: "Failed to get team member",
+            additionalData: { teamMemberId, userId },
+            label: "Team",
+          });
+        });
+
+      if (teamMember) {
+        teamMemberName = teamMember.name;
+      }
+    }
+
+    const existingInvites = await db.invite.findMany({
+      where: {
+        status: "PENDING",
+        inviteeEmail: email,
+        organizationId,
+      },
+    });
+
+    if (existingInvites.length) {
+      throw new ShelfError({
+        cause: null,
+        message:
+          "User already has a pending invite. Either resend it or cancel it in order to be able to send a new one.",
+        additionalData: { email, organizationId },
+        label: "Invite",
+        shouldBeCaptured: false,
+      });
+    }
+
+    const invite = await createInvite({
+      organizationId,
+      inviteeEmail: email,
+      inviterId: userId,
+      roles: [role],
+      teamMemberName,
+      teamMemberId,
+      userId,
+    });
+
+    if (!invite) {
+      return json(data(null));
+    }
+
+    sendNotification({
+      title: "Successfully invited user",
+      message:
+        "They will receive an email in which they can complete their registration.",
+      icon: { name: "success", variant: "success" },
+      senderId: userId,
+    });
+
+    return json(data({ success: true }));
+  } catch (cause) {
+    const reason = makeShelfError(cause, { userId });
+    return json(error(reason), { status: reason.status });
+  }
+}