diff --git a/apps/platform/trpc/routers/orgRouter/users/invitesRouter.ts b/apps/platform/trpc/routers/orgRouter/users/invitesRouter.ts
index 07408bc7..49f163d6 100644
--- a/apps/platform/trpc/routers/orgRouter/users/invitesRouter.ts
+++ b/apps/platform/trpc/routers/orgRouter/users/invitesRouter.ts
@@ -99,7 +99,7 @@ export const invitesRouter = router({
         // Insert teamMemberships - save ID
         if (teamsInput) {
           for (const teamPublicId of teamsInput.teamsPublicIds) {
-            await addOrgMemberToTeamHandler({
+            await addOrgMemberToTeamHandler(db, {
               orgId: org.id,
               teamPublicId: teamPublicId,
               orgMemberPublicId: orgMemberPublicId,
diff --git a/apps/platform/trpc/routers/orgRouter/users/teamsHandler.ts b/apps/platform/trpc/routers/orgRouter/users/teamsHandler.ts
index e677f7bb..8f731ea2 100644
--- a/apps/platform/trpc/routers/orgRouter/users/teamsHandler.ts
+++ b/apps/platform/trpc/routers/orgRouter/users/teamsHandler.ts
@@ -1,5 +1,5 @@
 import { TRPCError } from '@trpc/server';
-import { db } from '@u22n/database';
+import type { DBType } from '@u22n/database';
 import { and, eq } from '@u22n/database/orm';
 import {
   convoParticipantTeamMembers,
@@ -10,17 +10,20 @@ import {
 } from '@u22n/database/schema';
 import { typeIdGenerator, type TypeId } from '@u22n/utils/typeid';
 
-export async function addOrgMemberToTeamHandler({
-  orgId,
-  orgMemberId,
-  orgMemberPublicId,
-  teamPublicId
-}: {
-  orgId: number;
-  orgMemberId: number;
-  orgMemberPublicId: TypeId<'orgMembers'>;
-  teamPublicId: TypeId<'teams'>;
-}) {
+export async function addOrgMemberToTeamHandler(
+  db: DBType,
+  {
+    orgId,
+    orgMemberId,
+    orgMemberPublicId,
+    teamPublicId
+  }: {
+    orgId: number;
+    orgMemberId: number;
+    orgMemberPublicId: TypeId<'orgMembers'>;
+    teamPublicId: TypeId<'teams'>;
+  }
+) {
   const orgMember = await db.query.orgMembers.findFirst({
     columns: {
       id: true,
diff --git a/apps/platform/trpc/routers/orgRouter/users/teamsRouter.ts b/apps/platform/trpc/routers/orgRouter/users/teamsRouter.ts
index 0af744fb..dec738a4 100644
--- a/apps/platform/trpc/routers/orgRouter/users/teamsRouter.ts
+++ b/apps/platform/trpc/routers/orgRouter/users/teamsRouter.ts
@@ -178,7 +178,7 @@ export const teamsRouter = router({
           message: 'Account or Organization is not defined'
         });
       }
-      const { org } = ctx;
+      const { org, db } = ctx;
       const { teamPublicId, orgMemberPublicId } = input;
 
       const isAdmin = await isAccountAdminOfOrg(org);
@@ -189,7 +189,7 @@ export const teamsRouter = router({
         });
       }
 
-      const newTeamMemberPublicId = await addOrgMemberToTeamHandler({
+      const newTeamMemberPublicId = await addOrgMemberToTeamHandler(db, {
         orgId: org.id,
         teamPublicId: teamPublicId,
         orgMemberPublicId: orgMemberPublicId,
diff --git a/apps/web/package.json b/apps/web/package.json
index 57779b0c..3978ad3f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -13,10 +13,17 @@
     "@calcom/embed-react": "^1.5.0",
     "@phosphor-icons/react": "^2.1.5",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/themes": "^3.0.2",
     "@simplewebauthn/browser": "^10.0.0",
diff --git a/apps/web/src/app/[orgShortCode]/settings/layout.tsx b/apps/web/src/app/[orgShortCode]/settings/layout.tsx
index e3e879ff..5d78c3a6 100644
--- a/apps/web/src/app/[orgShortCode]/settings/layout.tsx
+++ b/apps/web/src/app/[orgShortCode]/settings/layout.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Flex } from '@radix-ui/themes';
+import { Flex, ScrollArea } from '@radix-ui/themes';
 import SettingsSidebar from './_components/settings-sidebar';
 
 export default function Layout({
@@ -8,7 +8,9 @@ export default function Layout({
   return (
     <Flex className="h-full w-full">
       <SettingsSidebar />
-      <Flex className="flex-1">{children}</Flex>
+      <Flex className="flex-1">
+        <ScrollArea className="h-full">{children}</ScrollArea>
+      </Flex>
     </Flex>
   );
 }
diff --git a/apps/web/src/app/[orgShortCode]/settings/org/users/invites/_components/columns.tsx b/apps/web/src/app/[orgShortCode]/settings/org/users/invites/_components/columns.tsx
new file mode 100644
index 00000000..48b80f4c
--- /dev/null
+++ b/apps/web/src/app/[orgShortCode]/settings/org/users/invites/_components/columns.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
+import type { RouterOutputs } from '@/src/lib/trpc';
+import { generateAvatarUrl, getInitials } from '@/src/lib/utils';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from '@/src/components/shadcn-ui/avatar';
+import { Badge } from '@/src/components/shadcn-ui/badge';
+import { format } from 'date-fns';
+import { ScrollArea } from '@radix-ui/themes';
+import { Tooltip } from '@radix-ui/themes';
+import CopyButton from '@/src/components/copy-button';
+import { env } from 'next-runtime-env';
+
+const WEBAPP_URL = env('NEXT_PUBLIC_WEBAPP_URL');
+
+type Member =
+  RouterOutputs['org']['users']['invites']['viewInvites']['invites'][number];
+
+const columnHelper = createColumnHelper<Member>();
+
+export const columns: ColumnDef<Member>[] = [
+  columnHelper.display({
+    id: 'status',
+    header: 'Status',
+    cell: ({ row }) => (
+      <div className="flex h-full w-full items-center">
+        <Badge className="uppercase">
+          {row.original.acceptedAt ? 'Used' : 'Pending'}
+        </Badge>
+      </div>
+    )
+  }),
+  columnHelper.display({
+    id: 'user',
+    header: 'User',
+    cell: ({ row }) => {
+      const { publicId, avatarTimestamp, firstName, lastName } =
+        row.original.orgMember?.profile ?? {};
+
+      const avatarUrl =
+        avatarTimestamp && publicId
+          ? generateAvatarUrl({
+              avatarTimestamp,
+              publicId,
+              size: 'lg'
+            })
+          : null;
+      const initials = getInitials(`${firstName} ${lastName}`);
+      return (
+        <div className="flex items-center gap-2">
+          <Avatar className="h-8 w-8">
+            <AvatarImage
+              src={avatarUrl ?? undefined}
+              alt={firstName ?? ''}
+            />
+            <AvatarFallback>{initials}</AvatarFallback>
+          </Avatar>
+          <span>
+            {firstName} {lastName}
+          </span>
+        </div>
+      );
+    }
+  }),
+  columnHelper.display({
+    id: 'invite-code',
+    header: 'Invite Code',
+    cell: ({ row }) => {
+      const inviteCode = row.original.inviteToken;
+      return inviteCode ? (
+        <div className="flex w-fit items-center justify-between gap-2">
+          <ScrollArea
+            scrollbars="horizontal"
+            className="w-32"
+            type="hover">
+            <span>{inviteCode}</span>
+          </ScrollArea>
+          <CopyButton
+            text={inviteCode}
+            size={12}
+          />
+        </div>
+      ) : null;
+    }
+  }),
+  columnHelper.display({
+    id: 'invite-link',
+    header: 'Invite Link',
+    cell: ({ row }) => {
+      const inviteCode = row.original.inviteToken;
+      return inviteCode ? (
+        <div className="flex w-fit items-center justify-between gap-2">
+          <ScrollArea
+            scrollbars="horizontal"
+            className="w-32"
+            type="hover">
+            <span>{`${WEBAPP_URL}/join/invite/${inviteCode}`}</span>
+          </ScrollArea>
+          <CopyButton
+            text={`${WEBAPP_URL}/join/invite/${inviteCode}`}
+            size={12}
+          />
+        </div>
+      ) : null;
+    }
+  }),
+  columnHelper.display({
+    id: 'email',
+    header: 'Email',
+    cell: ({ row }) => {
+      const email = row.original.email;
+      return <div className="flex h-full items-center">{email}</div>;
+    }
+  }),
+  columnHelper.display({
+    id: 'role',
+    header: 'Role',
+    cell: ({ row }) => {
+      const role = row.original.role;
+      return (
+        <div className="flex h-full items-center">
+          <Badge className="uppercase">{role}</Badge>
+        </div>
+      );
+    }
+  }),
+  columnHelper.display({
+    id: 'admin',
+    header: 'Admin',
+    cell: ({ row }) => {
+      const { publicId, avatarTimestamp, firstName, lastName } =
+        row.original.invitedByOrgMember.profile;
+
+      const avatarUrl =
+        avatarTimestamp && publicId
+          ? generateAvatarUrl({
+              avatarTimestamp,
+              publicId,
+              size: 'lg'
+            })
+          : null;
+      const initials = getInitials(`${firstName} ${lastName}`);
+      return (
+        <div className="flex items-center justify-center gap-2">
+          <Tooltip content={`${firstName} ${lastName}`}>
+            <Avatar className="h-8 w-8">
+              <AvatarImage
+                src={avatarUrl ?? undefined}
+                alt={firstName ?? ''}
+              />
+              <AvatarFallback>{initials}</AvatarFallback>
+            </Avatar>
+          </Tooltip>
+        </div>
+      );
+    }
+  }),
+  columnHelper.display({
+    id: 'expiry',
+    header: 'Expiry',
+    cell: ({ row }) => {
+      const expiry = row.original.expiresAt;
+      return expiry ? (
+        <div className="flex h-full items-center">
+          {format(expiry, 'eee, do MMM yyyy')}
+        </div>
+      ) : null;
+    }
+  })
+];
diff --git a/apps/web/src/app/[orgShortCode]/settings/org/users/invites/_components/invite-modal.tsx b/apps/web/src/app/[orgShortCode]/settings/org/users/invites/_components/invite-modal.tsx
new file mode 100644
index 00000000..bf293141
--- /dev/null
+++ b/apps/web/src/app/[orgShortCode]/settings/org/users/invites/_components/invite-modal.tsx
@@ -0,0 +1,492 @@
+'use client';
+
+import { api } from '@/src/lib/trpc';
+import { useGlobalStore } from '@/src/providers/global-store-provider';
+import { useForm } from '@tanstack/react-form';
+import { Input } from '@/src/components/shadcn-ui/input';
+import { Switch } from '@/src/components/shadcn-ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/src/components/shadcn-ui/select';
+import { MultiSelect } from '@/src/components/shared/multiselect';
+import { Button } from '@/src/components/shadcn-ui/button';
+import { z } from 'zod';
+import { zodValidator } from '@tanstack/zod-form-adapter';
+import { type TypeId } from '@u22n/utils/typeid';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+  DialogTitle,
+  DialogDescription,
+  DialogClose
+} from '@/src/components/shadcn-ui/dialog';
+import { useState } from 'react';
+
+export function InviteModal() {
+  const orgShortCode = useGlobalStore((state) => state.currentOrg.shortCode);
+  const invalidateInvites = api.useUtils().org.users.invites.viewInvites;
+
+  const { mutateAsync: createInvite, error: inviteError } =
+    api.org.users.invites.createNewInvite.useMutation({
+      onSuccess: () => {
+        void invalidateInvites.invalidate();
+        setOpen(false);
+      }
+    });
+
+  const form = useForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      role: 'member' as 'member' | 'admin',
+      title: '',
+      invite: {
+        sendInvite: false,
+        email: ''
+      },
+      email: {
+        create: false,
+        address: '',
+        domain: '' as TypeId<'domains'>,
+        sendName: ''
+      },
+      team: {
+        addToTeams: false,
+        teams: [] as TypeId<'teams'>[]
+      }
+    },
+    validatorAdapter: zodValidator,
+    onSubmit: async ({ value }) => {
+      await createInvite({
+        orgShortCode,
+        newOrgMember: {
+          firstName: value.firstName,
+          lastName: value.lastName.length ? value.lastName : undefined,
+          role: value.role,
+          title: value.title.length ? value.title : undefined
+        },
+        email: value.email.create
+          ? {
+              emailUsername: value.email.address,
+              domainPublicId: value.email.domain,
+              sendName: value.email.sendName
+            }
+          : undefined,
+        notification: value.invite.sendInvite
+          ? { notificationEmailAddress: value.invite.email }
+          : undefined,
+        teams: value.team.addToTeams
+          ? { teamsPublicIds: value.team.teams }
+          : undefined
+      });
+    }
+  });
+
+  const { data: orgDomains, isLoading: orgDomainsLoading } =
+    api.org.mail.domains.getOrgDomains.useQuery({
+      orgShortCode
+    });
+
+  const { data: orgTeams, isLoading: orgTeamsLoading } =
+    api.org.users.teams.getOrgTeams.useQuery({ orgShortCode });
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={() => {
+        if (form.state.isSubmitting) return;
+        setOpen(!open);
+      }}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)}>New Invite</Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Invite</DialogTitle>
+          <DialogDescription>
+            Create a new Invite for your Org
+          </DialogDescription>
+        </DialogHeader>
+        <form
+          className="my-2 flex w-fit flex-col gap-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            void form.handleSubmit();
+          }}>
+          <div className="flex w-full gap-2">
+            <div className="flex flex-col">
+              <label
+                htmlFor="firstName"
+                className="font-semibold">
+                First Name
+              </label>
+              <form.Field
+                name="firstName"
+                validators={{ onBlur: z.string().min(1).max(64) }}
+                children={(field) => (
+                  <>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value ?? ''}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                    />
+                    {field.state.meta.errorMap.onBlur && (
+                      <span className="text-red-10">
+                        {field.state.meta.errorMap.onBlur}
+                      </span>
+                    )}
+                  </>
+                )}
+              />
+            </div>
+            <div className="flex flex-col">
+              <label
+                htmlFor="lastName"
+                className="font-semibold">
+                Last Name (Optional)
+              </label>
+              <form.Field
+                name="lastName"
+                validators={{ onBlur: z.string().min(0).max(64) }}
+                children={(field) => (
+                  <>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value ?? ''}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                    />
+                    {field.state.meta.errorMap.onBlur && (
+                      <span className="text-red-10">
+                        {field.state.meta.errorMap.onBlur}
+                      </span>
+                    )}
+                  </>
+                )}
+              />
+            </div>
+          </div>
+          <div className="flex w-full gap-2">
+            <div className="flex flex-1 flex-col">
+              <label className="font-semibold">Role</label>
+              <form.Field
+                name="role"
+                children={(field) => (
+                  <Select
+                    name={field.name}
+                    value={field.state.value ?? ''}
+                    onValueChange={(e: 'member' | 'admin') =>
+                      field.handleChange(e)
+                    }>
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent
+                      id={field.name}
+                      onBlur={field.handleBlur}>
+                      <SelectGroup>
+                        <SelectItem value="admin">Admin</SelectItem>
+                        <SelectItem value="member">Member</SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </div>
+            <div className="flex flex-1 flex-col">
+              <label
+                htmlFor="title"
+                className="font-semibold">
+                Title (Optional)
+              </label>
+              <form.Field
+                name="title"
+                validators={{ onBlur: z.string().min(0).max(64) }}
+                children={(field) => (
+                  <>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value ?? ''}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                    />
+                    {field.state.meta.errorMap.onBlur && (
+                      <span className="text-red-10">
+                        {field.state.meta.errorMap.onBlur}
+                      </span>
+                    )}
+                  </>
+                )}
+              />
+            </div>
+          </div>
+          <div className="mt-4 flex w-full flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <label className="font-bold">Send Invitation via Email</label>
+              <form.Field
+                name="invite.sendInvite"
+                children={(field) => (
+                  <Switch
+                    checked={field.state.value ?? false}
+                    onCheckedChange={field.handleChange}
+                    onBlur={field.handleBlur}
+                  />
+                )}
+              />
+            </div>
+            <form.Subscribe
+              selector={(form) => form.values.invite.sendInvite}
+              children={(sendInvite) =>
+                sendInvite && (
+                  <form.Field
+                    name="invite.email"
+                    validators={{ onBlur: z.string().email() }}
+                    children={(field) => (
+                      <>
+                        <Input
+                          name={field.name}
+                          value={field.state.value ?? ''}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          onBlur={field.handleBlur}
+                          placeholder="somebody@email.com"
+                        />
+                        {field.state.meta.errorMap.onBlur && (
+                          <span className="text-red-10">
+                            {field.state.meta.errorMap.onBlur}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  />
+                )
+              }
+            />
+          </div>
+          <div className="mt-4 flex w-full flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <label className="font-bold">
+                Create an Address for the User
+              </label>
+              <form.Field
+                name="email.create"
+                children={(field) => (
+                  <Switch
+                    checked={field.state.value ?? false}
+                    onCheckedChange={field.handleChange}
+                    onBlur={field.handleBlur}
+                  />
+                )}
+              />
+            </div>
+            <form.Subscribe
+              selector={(form) => form.values.email.create}
+              children={(createEmail) =>
+                createEmail && (
+                  <>
+                    {orgDomainsLoading && <div>Loading...</div>}
+                    {orgDomains && (
+                      <>
+                        <div className="flex gap-1">
+                          <form.Field
+                            name="email.address"
+                            validators={{ onBlur: z.string().min(1).max(64) }}
+                            children={(field) => (
+                              <Input
+                                className="w-full flex-1"
+                                id={field.name}
+                                name={field.name}
+                                value={field.state.value ?? ''}
+                                onChange={(e) =>
+                                  field.handleChange(e.target.value)
+                                }
+                                onBlur={field.handleBlur}
+                                placeholder="username"
+                              />
+                            )}
+                          />
+                          <span className="flex items-center">@</span>
+                          <form.Field
+                            name="email.domain"
+                            children={(field) => (
+                              <Select
+                                name={field.name}
+                                value={field.state.value}
+                                onValueChange={(e: TypeId<'domains'>) =>
+                                  field.handleChange(e)
+                                }>
+                                <SelectTrigger className="w-full flex-1">
+                                  <SelectValue placeholder="Select domain" />
+                                </SelectTrigger>
+                                <SelectContent
+                                  id={field.name}
+                                  onBlur={field.handleBlur}>
+                                  <SelectGroup>
+                                    {orgDomains.domainData.map((domain) => (
+                                      <SelectItem
+                                        key={domain.publicId}
+                                        value={domain.publicId}>
+                                        {domain.domain}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectGroup>
+                                </SelectContent>
+                              </Select>
+                            )}
+                          />
+                        </div>
+                        <form.Field
+                          name="email.sendName"
+                          validators={{ onBlur: z.string().min(1).max(64) }}
+                          children={(field) => (
+                            <>
+                              <Input
+                                id={field.name}
+                                className="w-full"
+                                name={field.name}
+                                value={field.state.value ?? ''}
+                                onChange={(e) =>
+                                  field.handleChange(e.target.value)
+                                }
+                                onBlur={field.handleBlur}
+                                placeholder="Send Name"
+                              />
+                              {field.state.meta.errorMap.onBlur && (
+                                <span className="text-red-10">
+                                  {field.state.meta.errorMap.onBlur}
+                                </span>
+                              )}
+                            </>
+                          )}
+                        />
+                      </>
+                    )}
+                  </>
+                )
+              }
+            />
+          </div>
+          <div className="mt-4 flex w-full flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <label className="font-bold">Add User to Teams</label>
+              <form.Field
+                name="team.addToTeams"
+                children={(field) => (
+                  <Switch
+                    checked={field.state.value ?? false}
+                    onCheckedChange={field.handleChange}
+                    onBlur={field.handleBlur}
+                  />
+                )}
+              />
+            </div>
+            <form.Subscribe
+              selector={(form) => form.values.team.addToTeams}
+              children={(createEmail) =>
+                createEmail && (
+                  <>
+                    {orgTeamsLoading && <div>Loading...</div>}
+                    {orgTeams && (
+                      <form.Field
+                        name="team.teams"
+                        children={(field) => (
+                          <MultiSelect
+                            values={field.state.value ?? []}
+                            setValues={(values) =>
+                              field.handleChange(values as TypeId<'teams'>[])
+                            }
+                            items={orgTeams.teams.map((item) => ({
+                              ...item,
+                              value: item.publicId,
+                              keywords: [
+                                item.name,
+                                item.description ?? '',
+                                item.color ?? ''
+                              ]
+                            }))}
+                            ItemRenderer={(item) => (
+                              <div className="flex gap-1">
+                                <div
+                                  className="h-4 w-4 rounded-full border"
+                                  style={{
+                                    backgroundColor: item.color ?? undefined
+                                  }}
+                                />
+                                {item.name}
+                              </div>
+                            )}
+                            TriggerRenderer={({ items }) => (
+                              <div className="flex gap-1">
+                                {items.map((item) => (
+                                  <div
+                                    key={item.value}
+                                    className="flex items-center gap-1">
+                                    <div
+                                      className="h-4 w-4 rounded-full border"
+                                      style={{
+                                        backgroundColor: item.color ?? undefined
+                                      }}
+                                    />
+                                    <div>{item.name}</div>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                            emptyPlaceholder="Select teams"
+                          />
+                        )}
+                      />
+                    )}
+                  </>
+                )
+              }
+            />
+            <div className="text-red-10">{inviteError?.message}</div>
+            <form.Subscribe
+              selector={(form) => [
+                form.isTouched,
+                form.canSubmit,
+                form.isSubmitting
+              ]}
+              children={([isTouched, canSubmit, isSubmitting]) => (
+                <Button
+                  disabled={!isTouched || !canSubmit || isSubmitting}
+                  // loading={isSubmitting}
+                  className="my-1">
+                  {isSubmitting ? 'Creating...' : 'Create New Invite'}
+                </Button>
+              )}
+            />
+            <DialogClose asChild>
+              <form.Subscribe
+                selector={(form) => form.isSubmitting}
+                children={(isSubmitting) => (
+                  <Button
+                    className="w-full"
+                    disabled={isSubmitting}
+                    onMouseDown={() => setOpen(false)}>
+                    Cancel
+                  </Button>
+                )}
+              />
+            </DialogClose>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/app/[orgShortCode]/settings/org/users/invites/page.tsx b/apps/web/src/app/[orgShortCode]/settings/org/users/invites/page.tsx
new file mode 100644
index 00000000..793ce8a7
--- /dev/null
+++ b/apps/web/src/app/[orgShortCode]/settings/org/users/invites/page.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { DataTable } from '@/src/components/shared/table';
+import { api } from '@/src/lib/trpc';
+import { useGlobalStore } from '@/src/providers/global-store-provider';
+import { columns } from './_components/columns';
+import { InviteModal } from './_components/invite-modal';
+
+export default function Page() {
+  const orgShortCode = useGlobalStore((state) => state.currentOrg.shortCode);
+  const { data: inviteList, isLoading } =
+    api.org.users.invites.viewInvites.useQuery({
+      orgShortCode
+    });
+
+  return (
+    <div className="flex w-full flex-col gap-2 p-4">
+      <div className="flex w-full justify-between">
+        <div className="flex flex-col gap-2">
+          <h1 className="font-display text-3xl leading-5">Invites</h1>
+          <div>Manage Your Org Invitation</div>
+        </div>
+        <InviteModal />
+      </div>
+      {isLoading && <div>Loading...</div>}
+      {inviteList && (
+        <DataTable
+          columns={columns}
+          data={inviteList.invites ?? []}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/app/[orgShortCode]/settings/org/users/members/_components/columns.tsx b/apps/web/src/app/[orgShortCode]/settings/org/users/members/_components/columns.tsx
new file mode 100644
index 00000000..d3d2b73b
--- /dev/null
+++ b/apps/web/src/app/[orgShortCode]/settings/org/users/members/_components/columns.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
+import type { RouterOutputs } from '@/src/lib/trpc';
+import { generateAvatarUrl, getInitials } from '@/src/lib/utils';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from '@/src/components/shadcn-ui/avatar';
+import { Badge } from '@/src/components/shadcn-ui/badge';
+import { format } from 'date-fns';
+
+type Member =
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  (RouterOutputs['org']['users']['members']['getOrgMembers']['members'] & {})[number];
+
+const columnHelper = createColumnHelper<Member>();
+
+export const columns: ColumnDef<Member>[] = [
+  columnHelper.display({
+    id: 'name',
+    header: 'Name',
+    cell: ({ row }) => {
+      const { publicId, avatarTimestamp, firstName, lastName } =
+        row.original.profile;
+
+      const avatarUrl = generateAvatarUrl({
+        avatarTimestamp,
+        publicId,
+        size: 'lg'
+      });
+      const initials = getInitials(`${firstName} ${lastName}`);
+
+      return (
+        <div className="flex items-center gap-2">
+          <Avatar className="h-8 w-8">
+            <AvatarImage
+              src={avatarUrl ?? undefined}
+              alt={firstName ?? ''}
+            />
+            <AvatarFallback>{initials}</AvatarFallback>
+          </Avatar>
+          <span>
+            {firstName} {lastName}
+          </span>
+        </div>
+      );
+    }
+  }),
+  columnHelper.display({
+    id: 'username',
+    header: 'Username',
+    cell: ({ row }) => {
+      const username = row.original.profile.handle;
+      return <div className="flex h-full items-center">@{username}</div>;
+    }
+  }),
+  columnHelper.display({
+    id: 'title',
+    header: 'Title',
+    cell: ({ row }) => {
+      const title = row.original.profile.title;
+      return <div className="flex h-full items-center">{title}</div>;
+    }
+  }),
+  columnHelper.display({
+    id: 'role',
+    header: 'Role',
+    cell: ({ row }) => {
+      const role = row.original.role;
+      return (
+        <div className="flex h-full items-center">
+          <Badge className="uppercase">{role}</Badge>
+        </div>
+      );
+    }
+  }),
+  columnHelper.display({
+    id: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const status = row.original.status;
+      return (
+        <div className="flex h-full items-center">
+          <Badge className="bg-green-11 uppercase">{status}</Badge>
+        </div>
+      );
+    }
+  }),
+  columnHelper.display({
+    id: 'joined',
+    header: 'Joined',
+    cell: ({ row }) => {
+      const joined = row.original.addedAt;
+      return (
+        <div className="flex h-full items-center">
+          {format(joined, 'eee, do MMM yyyy')}
+        </div>
+      );
+    }
+  })
+];
diff --git a/apps/web/src/app/[orgShortCode]/settings/org/users/members/page.tsx b/apps/web/src/app/[orgShortCode]/settings/org/users/members/page.tsx
new file mode 100644
index 00000000..cd60e88d
--- /dev/null
+++ b/apps/web/src/app/[orgShortCode]/settings/org/users/members/page.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { DataTable } from '@/src/components/shared/table';
+import { api } from '@/src/lib/trpc';
+import { useGlobalStore } from '@/src/providers/global-store-provider';
+import { columns } from './_components/columns';
+import { Button } from '@/src/components/shadcn-ui/button';
+import Link from 'next/link';
+
+export default function Page() {
+  const orgShortCode = useGlobalStore((state) => state.currentOrg.shortCode);
+  const { data: memberList, isLoading } =
+    api.org.users.members.getOrgMembers.useQuery({
+      orgShortCode
+    });
+
+  return (
+    <div className="flex w-full flex-col gap-2 p-4">
+      <div className="flex w-full justify-between">
+        <div className="flex flex-col gap-2">
+          <h1 className="font-display text-3xl leading-5">Members</h1>
+          <div>Manage Your Org Members</div>
+        </div>
+        <Button asChild>
+          <Link href={`/${orgShortCode}/settings/org/users/invites`}>
+            Invite a Member
+          </Link>
+        </Button>
+      </div>
+      {isLoading && <div>Loading...</div>}
+      {memberList && (
+        <DataTable
+          columns={columns}
+          data={memberList.members ?? []}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/app/[orgShortCode]/settings/user/addresses/page.tsx b/apps/web/src/app/[orgShortCode]/settings/user/addresses/page.tsx
index 81061018..f87ec34a 100644
--- a/apps/web/src/app/[orgShortCode]/settings/user/addresses/page.tsx
+++ b/apps/web/src/app/[orgShortCode]/settings/user/addresses/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Button, Flex, Heading, Text, Card, Spinner } from '@radix-ui/themes';
-import { DataTable } from './_components/table';
+import { DataTable } from '@/src/components/shared/table';
 import { useGlobalStore } from '@/src/providers/global-store-provider';
 import { api } from '@/src/lib/trpc';
 import { columns } from './_components/columns';
diff --git a/apps/web/src/components/shadcn-ui/command.tsx b/apps/web/src/components/shadcn-ui/command.tsx
new file mode 100644
index 00000000..9e6b39f6
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/command.tsx
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { MagnifyingGlass } from '@phosphor-icons/react';
+import { cn } from '@/src/lib/utils';
+import { Dialog, DialogContent } from '@/src/components/shadcn-ui/dialog';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+type CommandDialogProps = DialogProps;
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div
+    className="flex items-center border-b px-3"
+    cmdk-input-wrapper="">
+    <MagnifyingGlass className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('bg-border -mx-1 h-px', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator
+};
diff --git a/apps/web/src/components/shadcn-ui/dialog.tsx b/apps/web/src/components/shadcn-ui/dialog.tsx
new file mode 100644
index 00000000..34894c3b
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/dialog.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from '@phosphor-icons/react';
+
+import { cn } from '@/src/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}>
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription
+};
diff --git a/apps/web/src/components/shadcn-ui/input.tsx b/apps/web/src/components/shadcn-ui/input.tsx
new file mode 100644
index 00000000..fe914e6c
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/input.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { cn } from '@/src/lib/utils';
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/apps/web/src/components/shadcn-ui/label.tsx b/apps/web/src/components/shadcn-ui/label.tsx
new file mode 100644
index 00000000..63c7db9e
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/src/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/apps/web/src/components/shadcn-ui/popover.tsx b/apps/web/src/components/shadcn-ui/popover.tsx
new file mode 100644
index 00000000..e7afad3b
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/src/lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/apps/web/src/components/shadcn-ui/scroll-area.tsx b/apps/web/src/components/shadcn-ui/scroll-area.tsx
new file mode 100644
index 00000000..6911ffaf
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/scroll-area.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/src/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}>
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/apps/web/src/components/shadcn-ui/select.tsx b/apps/web/src/components/shadcn-ui/select.tsx
new file mode 100644
index 00000000..e6b0494f
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/select.tsx
@@ -0,0 +1,152 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, CaretDown, CaretUp } from '@phosphor-icons/react';
+
+import { cn } from '@/src/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}>
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}>
+    <CaretUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}>
+    <CaretDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton
+};
diff --git a/apps/web/src/components/shadcn-ui/separator.tsx b/apps/web/src/components/shadcn-ui/separator.tsx
new file mode 100644
index 00000000..6bcaaabb
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '@/src/lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/apps/web/src/components/shadcn-ui/switch.tsx b/apps/web/src/components/shadcn-ui/switch.tsx
new file mode 100644
index 00000000..a3511ef0
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/switch.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '@/src/lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+    ref={ref}>
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/apps/web/src/components/shadcn-ui/table.tsx b/apps/web/src/components/shadcn-ui/table.tsx
new file mode 100644
index 00000000..5dc250a1
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/table.tsx
@@ -0,0 +1,121 @@
+import * as React from 'react';
+
+import { cn } from '@/src/lib/utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn('[&_tr]:border-b', className)}
+    {...props}
+  />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('text-muted-foreground mt-4 text-sm', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption
+};
diff --git a/apps/web/src/components/shared/multiselect.tsx b/apps/web/src/components/shared/multiselect.tsx
new file mode 100644
index 00000000..8dfd7ab4
--- /dev/null
+++ b/apps/web/src/components/shared/multiselect.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import {
+  type FC,
+  useState,
+  type ReactNode,
+  type Dispatch,
+  type SetStateAction
+} from 'react';
+import { Check, CaretUpDown } from '@phosphor-icons/react';
+import { cn } from '@/src/lib/utils';
+import { Button } from '../shadcn-ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '../shadcn-ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '../shadcn-ui/popover';
+
+type Item<T extends Record<string, unknown>> = {
+  value: string;
+  keywords?: string[];
+} & T;
+
+type MultiSelectProps<T extends Record<string, unknown>> = {
+  items: Item<T>[];
+  emptyPlaceholder?: ReactNode;
+  searchPlaceholder?: string;
+  noResultsPlaceholder?: ReactNode;
+  ItemRenderer: FC<Item<T>>;
+  TriggerRenderer: FC<{ items: Item<T>[] }>;
+  values: string[];
+  setValues: Dispatch<SetStateAction<string[]>>;
+};
+
+export function MultiSelect<T extends Record<string, unknown>>({
+  items,
+  emptyPlaceholder,
+  searchPlaceholder,
+  noResultsPlaceholder,
+  ItemRenderer,
+  TriggerRenderer,
+  values,
+  setValues
+}: MultiSelectProps<T>) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between">
+          {values.length > 0 ? (
+            <TriggerRenderer
+              items={items.filter((item) => values.includes(item.value))}
+            />
+          ) : (
+            emptyPlaceholder ?? 'Select an Item'
+          )}
+          <CaretUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command
+          filter={(value, search, keywords) => {
+            const extendedValue = value + ' ' + keywords?.join(' ') ?? '';
+            return extendedValue.toLowerCase().includes(search.toLowerCase())
+              ? 1
+              : 0;
+          }}>
+          <CommandInput placeholder={searchPlaceholder ?? 'Search'} />
+          <CommandList>
+            <CommandEmpty>
+              {noResultsPlaceholder ?? 'Nothing Found'}
+            </CommandEmpty>
+            <CommandGroup>
+              {items.map((item) => (
+                <CommandItem
+                  key={item.value}
+                  keywords={item.keywords ?? []}
+                  value={item.value}
+                  onSelect={(currentValue) => {
+                    setValues((prevValues) =>
+                      prevValues.includes(currentValue)
+                        ? prevValues.filter((value) => value !== currentValue)
+                        : prevValues.concat(currentValue)
+                    );
+                  }}>
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      values.includes(item.value) ? 'opacity-100' : 'opacity-0'
+                    )}
+                  />
+                  <ItemRenderer
+                    key={item.value}
+                    {...item}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/web/src/app/[orgShortCode]/settings/user/addresses/_components/table.tsx b/apps/web/src/components/shared/table.tsx
similarity index 71%
rename from apps/web/src/app/[orgShortCode]/settings/user/addresses/_components/table.tsx
rename to apps/web/src/components/shared/table.tsx
index adc49dda..27e370e2 100644
--- a/apps/web/src/app/[orgShortCode]/settings/user/addresses/_components/table.tsx
+++ b/apps/web/src/components/shared/table.tsx
@@ -7,7 +7,14 @@ import {
   useReactTable
 } from '@tanstack/react-table';
 
-import { Table } from '@radix-ui/themes';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '../shadcn-ui/table';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -25,38 +32,38 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <Table.Root>
-      <Table.Header>
+    <Table>
+      <TableHeader>
         {table.getHeaderGroups().map((headerGroup) => (
-          <Table.Row key={headerGroup.id}>
+          <TableRow key={headerGroup.id}>
             {headerGroup.headers.map((header) => {
               return (
-                <Table.ColumnHeaderCell key={header.id}>
+                <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.header,
                         header.getContext()
                       )}
-                </Table.ColumnHeaderCell>
+                </TableHead>
               );
             })}
-          </Table.Row>
+          </TableRow>
         ))}
-      </Table.Header>
-      <Table.Body>
+      </TableHeader>
+      <TableBody>
         {table.getRowModel().rows.map((row) => (
-          <Table.Row
+          <TableRow
             key={row.id}
             data-state={row.getIsSelected() && 'selected'}>
             {row.getVisibleCells().map((cell) => (
-              <Table.Cell key={cell.id}>
+              <TableCell key={cell.id}>
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </Table.Cell>
+              </TableCell>
             ))}
-          </Table.Row>
+          </TableRow>
         ))}
-      </Table.Body>
-    </Table.Root>
+      </TableBody>
+    </Table>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f09a31e7..abf86486 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -269,12 +269,33 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.0.4
         version: 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.0.5
+        version: 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.6
         version: 2.0.6(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-label':
+        specifier: ^2.0.2
+        version: 2.0.2(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popover':
+        specifier: ^1.0.7
+        version: 1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.0.5
+        version: 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-select':
+        specifier: ^2.0.0
+        version: 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.0.3
+        version: 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.0.2(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-switch':
+        specifier: ^1.0.3
+        version: 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-toggle':
         specifier: ^1.0.3
         version: 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -3055,6 +3076,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-separator@1.0.3':
+    resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slider@1.1.2':
     resolution: {integrity: sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==}
     peerDependencies:
@@ -11579,6 +11613,16 @@ snapshots:
       '@types/react': 18.3.1
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-separator@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.1
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-slider@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.5