diff --git a/sdks/js/packages/core/package.json b/sdks/js/packages/core/package.json
index 13124bc5f..1c6b648ab 100644
--- a/sdks/js/packages/core/package.json
+++ b/sdks/js/packages/core/package.json
@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
-    "@raystack/apsara": "0.11.2",
+    "@raystack/apsara": "0.11.3",
     "@tanstack/react-router": "0.0.1-beta.174",
     "axios": "^1.5.0",
     "class-variance-authority": "^0.7.0",
diff --git a/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx b/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx
index 950301935..b13c89e63 100644
--- a/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx
+++ b/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx
@@ -15,7 +15,6 @@ import { hasWindow } from '~/utils/index';
 // @ts-ignore
 import styles from './onboarding.module.css';
 
-
 type MagicLinkVerifyProps = ComponentPropsWithRef<typeof Container> & {
   logo?: React.ReactNode;
   title?: string;
@@ -51,32 +50,36 @@ export const MagicLinkVerify = ({
     codeParam && setCodeParam(codeParam);
   }, []);
 
-  const OTPVerifyClickHandler = useCallback(async () => {
-    setLoading(true);
-    try {
-      if (!client) return;
+  const OTPVerifyHandler = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setLoading(true);
+      try {
+        if (!client) return;
 
-      await client.frontierServiceAuthCallback({
-        strategyName: 'mailotp',
-        code: otp,
-        state: stateParam
-      });
+        await client.frontierServiceAuthCallback({
+          strategyName: 'mailotp',
+          code: otp,
+          state: stateParam
+        });
 
-      const searchParams = new URLSearchParams(
-        hasWindow() ? window.location.search : ``
-      );
-      const redirectURL =
-        searchParams.get('redirect_uri') || searchParams.get('redirectURL');
+        const searchParams = new URLSearchParams(
+          hasWindow() ? window.location.search : ``
+        );
+        const redirectURL =
+          searchParams.get('redirect_uri') || searchParams.get('redirectURL');
 
-      // @ts-ignore
-      window.location = redirectURL ? redirectURL : window.location.origin;
-    } catch (error) {
-      console.log(error);
-      setSubmitError('Please enter a valid verification code');
-    } finally {
-      setLoading(false);
-    }
-  }, [otp]);
+        // @ts-ignore
+        window.location = redirectURL ? redirectURL : window.location.origin;
+      } catch (error) {
+        console.log(error);
+        setSubmitError('Please enter a valid verification code');
+      } finally {
+        setLoading(false);
+      }
+    },
+    [otp]
+  );
 
   return (
     <Container {...props}>
@@ -99,7 +102,11 @@ export const MagicLinkVerify = ({
           <Text>Enter code manually</Text>
         </Button>
       ) : (
-        <Flex direction={'column'} className={styles.container80} gap="medium">
+        <form
+          onSubmit={OTPVerifyHandler}
+          className={styles.container80}
+          style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
+        >
           <Flex direction="column">
             <TextField
               // @ts-ignore
@@ -117,11 +124,13 @@ export const MagicLinkVerify = ({
             variant="primary"
             className={styles.container}
             disabled={!otp}
-            onClick={OTPVerifyClickHandler}
+            type="submit"
           >
-            <Text className={styles.continue}>Continue with login code</Text>
+            <Text className={styles.continue}>
+              {loading ? 'Submitting...' : 'Continue with login code'}
+            </Text>
           </Button>
-        </Flex>
+        </form>
       )}
       <Link href={config.redirectLogin}>
         <Text size={2}>Back to login</Text>
diff --git a/sdks/js/packages/core/react/components/onboarding/magiclink.tsx b/sdks/js/packages/core/react/components/onboarding/magiclink.tsx
index ece894c5c..346f2ec0f 100644
--- a/sdks/js/packages/core/react/components/onboarding/magiclink.tsx
+++ b/sdks/js/packages/core/react/components/onboarding/magiclink.tsx
@@ -26,28 +26,32 @@ export const MagicLink = ({ children, ...props }: MagicLinkProps) => {
   const [email, setEmail] = useState<string>('');
   const [state, setState] = useState<string>('');
 
-  const magicLinkClickHandler = useCallback(async () => {
-    setLoading(true);
-    try {
-      if (!client) return;
+  const magicLinkHandler = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setLoading(true);
+      try {
+        if (!client) return;
 
-      const {
-        data: { state = '' }
-      } = await client.frontierServiceAuthenticate('mailotp', {
-        email,
-        callbackUrl: config.callbackUrl
-      });
+        const {
+          data: { state = '' }
+        } = await client.frontierServiceAuthenticate('mailotp', {
+          email,
+          callbackUrl: config.callbackUrl
+        });
 
-      const searchParams = new URLSearchParams({ state, email });
+        const searchParams = new URLSearchParams({ state, email });
 
-      // @ts-ignore
-      window.location = `${
-        config.redirectMagicLinkVerify
-      }?${searchParams.toString()}`;
-    } finally {
-      setLoading(false);
-    }
-  }, [client, config.callbackUrl, config.redirectMagicLinkVerify, email]);
+        // @ts-ignore
+        window.location = `${
+          config.redirectMagicLinkVerify
+        }?${searchParams.toString()}`;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client, config.callbackUrl, config.redirectMagicLinkVerify, email]
+  );
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value);
@@ -66,7 +70,10 @@ export const MagicLink = ({ children, ...props }: MagicLinkProps) => {
     );
 
   return (
-    <div style={{ ...styles.container, flexDirection: 'column' }}>
+    <form
+      style={{ ...styles.container, flexDirection: 'column' }}
+      onSubmit={magicLinkHandler}
+    >
       <Separator />
       <TextField
         // @ts-ignore
@@ -85,12 +92,12 @@ export const MagicLink = ({ children, ...props }: MagicLinkProps) => {
           ...(!email ? styles.disabled : {})
         }}
         disabled={!email}
-        onClick={magicLinkClickHandler}
+        type="submit"
       >
         <Text style={{ color: 'var(--foreground-inverted)' }}>
-          {loading ? 'loading...' : 'Continue with Emails'}
+          {loading ? 'loading...' : 'Continue with Email'}
         </Text>
       </Button>
-    </div>
+    </form>
   );
 };
diff --git a/sdks/js/packages/core/react/components/organization/domain/domain.columns.tsx b/sdks/js/packages/core/react/components/organization/domain/domain.columns.tsx
index 4086cec62..66d03290e 100644
--- a/sdks/js/packages/core/react/components/organization/domain/domain.columns.tsx
+++ b/sdks/js/packages/core/react/components/organization/domain/domain.columns.tsx
@@ -12,6 +12,7 @@ export const getColumns: (
   isLoading?: boolean
 ) => ColumnDef<V1Beta1Domain, any>[] = (canCreateDomain, isLoading) => [
   {
+    header: 'Name',
     accessorKey: 'name',
     meta: {
       style: {
@@ -29,6 +30,7 @@ export const getColumns: (
         }
   },
   {
+    header: 'Created at',
     accessorKey: 'created_at',
     cell: isLoading
       ? () => <Skeleton />
diff --git a/sdks/js/packages/core/react/components/organization/members/invite.tsx b/sdks/js/packages/core/react/components/organization/members/invite.tsx
index 97bedb27b..4a4821acc 100644
--- a/sdks/js/packages/core/react/components/organization/members/invite.tsx
+++ b/sdks/js/packages/core/react/components/organization/members/invite.tsx
@@ -11,7 +11,7 @@ import {
 
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useNavigate } from '@tanstack/react-router';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import Skeleton from 'react-loading-skeleton';
 import { toast } from 'sonner';
@@ -19,10 +19,11 @@ import * as yup from 'yup';
 import cross from '~/react/assets/cross.svg';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import { V1Beta1Group, V1Beta1Role } from '~/src';
+import { PERMISSIONS } from '~/utils';
 
 const inviteSchema = yup.object({
   type: yup.string().required(),
-  team: yup.string().required(),
+  team: yup.string(),
   emails: yup.string().required()
 });
 
@@ -44,35 +45,45 @@ export const InviteMember = () => {
   const navigate = useNavigate({ from: '/members/modal' });
   const { client, activeOrganization: organization } = useFrontier();
 
-  async function onSubmit({ emails, type, team }: InviteSchemaType) {
-    const emailList = emails
-      .split(',')
-      .map(e => e.trim())
-      .filter(str => str.length > 0);
-
-    if (!organization?.id) return;
-    if (!emailList.length) return;
-    if (!type) return;
-    if (!team) return;
-
-    try {
-      await client?.frontierServiceCreateOrganizationInvitation(
-        organization?.id,
-        {
-          userIds: emailList,
-          groupIds: [team],
-          roleIds: [type]
-        }
-      );
-      toast.success('memebers added');
-
-      navigate({ to: '/members' });
-    } catch ({ error }: any) {
-      toast.error('Something went wrong', {
-        description: error.message
-      });
-    }
-  }
+  const values = watch(['emails', 'team', 'type']);
+
+  const isGroupRole = useMemo(() => {
+    const role = values[2] && roles.find(r => r.id === values[2]);
+    return role && role.scopes?.includes(PERMISSIONS.GroupNamespace);
+  }, [roles, values]);
+
+  const onSubmit = useCallback(
+    async ({ emails, type, team }: InviteSchemaType) => {
+      const emailList = emails
+        .split(',')
+        .map(e => e.trim())
+        .filter(str => str.length > 0);
+
+      if (!organization?.id) return;
+      if (!emailList.length) return;
+      if (!type) return;
+      if (isGroupRole && !team) return;
+
+      try {
+        await client?.frontierServiceCreateOrganizationInvitation(
+          organization?.id,
+          {
+            userIds: emailList,
+            groupIds: isGroupRole && team ? [team] : undefined,
+            roleIds: [type]
+          }
+        );
+        toast.success('memebers added');
+
+        navigate({ to: '/members' });
+      } catch ({ error }: any) {
+        toast.error('Something went wrong', {
+          description: error.message
+        });
+      }
+    },
+    [client, navigate, organization?.id, isGroupRole]
+  );
 
   useEffect(() => {
     async function getInformation() {
@@ -83,11 +94,24 @@ export const InviteMember = () => {
         const {
           // @ts-ignore
           data: { roles: orgRoles }
-        } = await client?.frontierServiceListOrganizationRoles(organization.id);
+        } = await client?.frontierServiceListOrganizationRoles(
+          organization.id,
+          {
+            scopes: [
+              PERMISSIONS.OrganizationNamespace,
+              PERMISSIONS.GroupNamespace
+            ]
+          }
+        );
         const {
           // @ts-ignore
           data: { roles }
-        } = await client?.frontierServiceListRoles();
+        } = await client?.frontierServiceListRoles({
+          scopes: [
+            PERMISSIONS.OrganizationNamespace,
+            PERMISSIONS.GroupNamespace
+          ]
+        });
         const {
           // @ts-ignore
           data: { groups }
@@ -105,8 +129,6 @@ export const InviteMember = () => {
     getInformation();
   }, [client, organization?.id]);
 
-  const values = watch(['emails', 'team', 'type']);
-
   const isDisabled = useMemo(() => {
     const [emails, team, type] = values;
     const emailList =
@@ -114,8 +136,10 @@ export const InviteMember = () => {
         ?.split(',')
         .map((e: string) => e.trim())
         .filter(str => str.length > 0) || [];
-    return emailList.length <= 0 || !team || !type || isSubmitting;
-  }, [isSubmitting, values]);
+    return (
+      emailList.length <= 0 || !type || isSubmitting || (isGroupRole && !team)
+    );
+  }, [isGroupRole, isSubmitting, values]);
 
   return (
     <Dialog open={true}>
@@ -141,7 +165,7 @@ export const InviteMember = () => {
             gap="medium"
             style={{ padding: '24px 32px' }}
           >
-            <InputField label="Invite as">
+            <InputField label="Email">
               <Controller
                 render={({ field }) => (
                   <textarea
@@ -211,8 +235,13 @@ export const InviteMember = () => {
                 <Skeleton height={'25px'} />
               ) : (
                 <Controller
+                  rules={{ required: isGroupRole }}
                   render={({ field }) => (
-                    <Select {...field} onValueChange={field.onChange}>
+                    <Select
+                      {...field}
+                      onValueChange={field.onChange}
+                      disabled={!isGroupRole}
+                    >
                       <Select.Trigger className="w-[180px]">
                         <Select.Value placeholder="Select a team" />
                       </Select.Trigger>
diff --git a/sdks/js/packages/core/react/components/organization/profile.tsx b/sdks/js/packages/core/react/components/organization/profile.tsx
index f73c1cb37..0abfce741 100644
--- a/sdks/js/packages/core/react/components/organization/profile.tsx
+++ b/sdks/js/packages/core/react/components/organization/profile.tsx
@@ -33,6 +33,7 @@ import { DeleteTeam } from './teams/delete';
 import { TeamPage } from './teams/team';
 import { UserSetting } from './user';
 import { SkeletonTheme } from 'react-loading-skeleton';
+import { InviteTeamMembers } from './teams/members/invite';
 
 interface OrganizationProfileProps {
   organizationId: string;
@@ -124,6 +125,12 @@ const teamRoute = new Route({
   component: TeamPage
 });
 
+const inviteTeamMembersRoute = new Route({
+  getParentRoute: () => teamRoute,
+  path: '/invite',
+  component: InviteTeamMembers
+});
+
 const deleteTeamRoute = new Route({
   getParentRoute: () => teamRoute,
   path: '/delete',
@@ -178,7 +185,7 @@ const routeTree = rootRoute.addChildren([
   membersRoute.addChildren([inviteMemberRoute]),
   teamsRoute.addChildren([addTeamRoute]),
   domainsRoute.addChildren([addDomainRoute, verifyDomainRoute]),
-  teamRoute.addChildren([deleteTeamRoute]),
+  teamRoute.addChildren([deleteTeamRoute, inviteTeamMembersRoute]),
   projectsRoute.addChildren([addProjectRoute]),
   projectPageRoute.addChildren([deleteProjectRoute, projectTeamInviteRoute]),
   profileRoute,
diff --git a/sdks/js/packages/core/react/components/organization/project/members/invite.tsx b/sdks/js/packages/core/react/components/organization/project/members/invite.tsx
index b2af017a1..9ecb704cd 100644
--- a/sdks/js/packages/core/react/components/organization/project/members/invite.tsx
+++ b/sdks/js/packages/core/react/components/organization/project/members/invite.tsx
@@ -71,12 +71,15 @@ export const InviteProjectTeam = () => {
       const {
         // @ts-ignore
         data: { roles: orgRoles }
-      } = await client?.frontierServiceListOrganizationRoles(organization.id);
+      } = await client?.frontierServiceListOrganizationRoles(organization.id, {
+        scopes: [PERMISSIONS.ProjectNamespace]
+      });
       const {
         // @ts-ignore
         data: { roles }
-      } = await client?.frontierServiceListRoles();
-
+      } = await client?.frontierServiceListRoles({
+        scopes: [PERMISSIONS.ProjectNamespace]
+      });
       setRoles([...roles, ...orgRoles]);
     } catch (err) {
       console.error(err);
diff --git a/sdks/js/packages/core/react/components/organization/project/members/member.columns.tsx b/sdks/js/packages/core/react/components/organization/project/members/member.columns.tsx
index cf6f37782..114ddf36d 100644
--- a/sdks/js/packages/core/react/components/organization/project/members/member.columns.tsx
+++ b/sdks/js/packages/core/react/components/organization/project/members/member.columns.tsx
@@ -26,6 +26,7 @@ export const columns: ColumnDef<V1Beta1User, any>[] = [
     }
   },
   {
+    header: 'Title',
     accessorKey: 'title',
     meta: {
       style: {
@@ -42,6 +43,7 @@ export const columns: ColumnDef<V1Beta1User, any>[] = [
     }
   },
   {
+    header: 'Email',
     accessorKey: 'email',
     cell: info => <Text>{info.getValue()}</Text>
   }
diff --git a/sdks/js/packages/core/react/components/organization/sidebar/index.tsx b/sdks/js/packages/core/react/components/organization/sidebar/index.tsx
index d2115e1c2..2a95b03e6 100644
--- a/sdks/js/packages/core/react/components/organization/sidebar/index.tsx
+++ b/sdks/js/packages/core/react/components/organization/sidebar/index.tsx
@@ -36,7 +36,11 @@ export const Sidebar = () => {
             // @ts-ignore
             size="medium"
             // @ts-ignore
-            leading={<MagnifyingGlassIcon />}
+            leading={
+              <MagnifyingGlassIcon
+                style={{ color: 'var(--foreground-base)' }}
+              />
+            }
             placeholder="Search"
             onChange={event => setSearch(event.target.value)}
           />
diff --git a/sdks/js/packages/core/react/components/organization/teams/members/index.tsx b/sdks/js/packages/core/react/components/organization/teams/members/index.tsx
index 3f9ec3abb..77976cb34 100644
--- a/sdks/js/packages/core/react/components/organization/teams/members/index.tsx
+++ b/sdks/js/packages/core/react/components/organization/teams/members/index.tsx
@@ -1,41 +1,21 @@
-import {
-  Avatar,
-  Button,
-  Command,
-  DataTable,
-  DropdownMenu,
-  EmptyState,
-  Flex,
-  Text
-} from '@raystack/apsara';
-import { useParams } from '@tanstack/react-router';
+import { Button, DataTable, EmptyState, Flex } from '@raystack/apsara';
+import { useNavigate, useParams } from '@tanstack/react-router';
 import { useMemo } from 'react';
-import { toast } from 'sonner';
-import { useFrontier } from '~/react/contexts/FrontierContext';
+
 import { usePermissions } from '~/react/hooks/usePermissions';
 import { V1Beta1User } from '~/src';
-import {
-  PERMISSIONS,
-  filterUsersfromUsers,
-  getInitials,
-  shouldShowComponent
-} from '~/utils';
+import { PERMISSIONS, shouldShowComponent } from '~/utils';
 import { getColumns } from './member.columns';
 
 export type MembersProps = {
-  orgMembers?: V1Beta1User[];
   members: V1Beta1User[];
-  setMembers: React.Dispatch<React.SetStateAction<V1Beta1User[]>>;
   organizationId?: string;
 };
 
-export const Members = ({
-  orgMembers,
-  members,
-  setMembers,
-  organizationId
-}: MembersProps) => {
+export const Members = ({ members, organizationId }: MembersProps) => {
   let { teamId } = useParams({ from: '/teams/$teamId' });
+  const navigate = useNavigate({ from: '/teams/$teamId' });
+
   const tableStyle = members?.length
     ? { width: '100%' }
     : { width: '100%', height: '100%' };
@@ -58,7 +38,6 @@ export const Members = ({
     };
   }, [permissions, resource]);
 
-  const invitableUser = filterUsersfromUsers(orgMembers, members) || [];
   return (
     <Flex direction="column" style={{ paddingTop: '32px' }}>
       <DataTable
@@ -78,43 +57,18 @@ export const Members = ({
               />
             </Flex>
             {canUpdateGroup ? (
-              <DropdownMenu>
-                <DropdownMenu.Trigger asChild>
-                  <Button variant="primary" style={{ width: 'fit-content' }}>
-                    Add a member
-                  </Button>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content
-                  align="end"
-                  style={{ minWidth: '220px', padding: 0 }}
-                >
-                  <Command>
-                    <Command.Input
-                      placeholder="Add team member"
-                      style={{ padding: '8px 0' }}
-                    />
-                    <Command.List>
-                      <Command.Empty>No results found.</Command.Empty>
-                      <Command.Group>
-                        {invitableUser.length === 0 ? (
-                          <Flex align="center" justify="center">
-                            <Text>No member to invite</Text>
-                          </Flex>
-                        ) : null}
-                        {invitableUser.map(user => (
-                          <InviteUser
-                            user={user}
-                            key={user.id}
-                            members={members}
-                            setMembers={setMembers}
-                            organizationId={organizationId}
-                          />
-                        ))}
-                      </Command.Group>
-                    </Command.List>
-                  </Command>
-                </DropdownMenu.Content>
-              </DropdownMenu>
+              <Button
+                variant="primary"
+                style={{ width: 'fit-content' }}
+                onClick={() =>
+                  navigate({
+                    to: '/teams/$teamId/invite',
+                    params: { teamId: teamId }
+                  })
+                }
+              >
+                Add Members
+              </Button>
             ) : null}
           </Flex>
         </DataTable.Toolbar>
@@ -130,51 +84,3 @@ const noDataChildren = (
     <div className="pera">Try adding new members.</div>
   </EmptyState>
 );
-
-const InviteUser = ({
-  user,
-  organizationId,
-  members = [],
-  setMembers
-}: {
-  user: V1Beta1User;
-  organizationId?: string;
-  members?: V1Beta1User[];
-  setMembers: React.Dispatch<React.SetStateAction<V1Beta1User[]>>;
-}) => {
-  let { teamId } = useParams({ from: '/teams/$teamId' });
-  const { client } = useFrontier();
-
-  async function inviteMember() {
-    try {
-      await client?.frontierServiceAddGroupUsers(
-        organizationId as string,
-        teamId as string,
-        { userIds: [user?.id as string] }
-      );
-      setMembers([...members, user]);
-      toast.success('Member Invited');
-    } catch ({ error }: any) {
-      toast.error('Something went wrong', {
-        description: error.message
-      });
-    }
-  }
-
-  return (
-    <Flex
-      align="center"
-      gap="small"
-      style={{ padding: 'var(--pd-8)', cursor: 'pointer' }}
-      onClick={inviteMember}
-    >
-      <Avatar
-        alt="profile"
-        shape="square"
-        fallback={getInitials(user?.title || user?.email)}
-        imageProps={{ width: '16px', height: '16px', fontSize: '8px' }}
-      />
-      <Text>{user?.title || user.email}</Text>
-    </Flex>
-  );
-};
diff --git a/sdks/js/packages/core/react/components/organization/teams/members/invite.tsx b/sdks/js/packages/core/react/components/organization/teams/members/invite.tsx
new file mode 100644
index 000000000..a0eda2338
--- /dev/null
+++ b/sdks/js/packages/core/react/components/organization/teams/members/invite.tsx
@@ -0,0 +1,276 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { V1Beta1PolicyRequestBody, V1Beta1Role, V1Beta1User } from '~/src';
+import { useNavigate, useParams } from '@tanstack/react-router';
+import {
+  Button,
+  Dialog,
+  Flex,
+  Image,
+  InputField,
+  Select,
+  Separator,
+  Text
+} from '@raystack/apsara';
+import Skeleton from 'react-loading-skeleton';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import cross from '~/react/assets/cross.svg';
+import * as yup from 'yup';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { toast } from 'sonner';
+import { PERMISSIONS, filterUsersfromUsers } from '~/utils';
+
+const inviteSchema = yup.object({
+  userId: yup.string().required(),
+  role: yup.string().required()
+});
+
+type InviteSchemaType = yup.InferType<typeof inviteSchema>;
+
+export const InviteTeamMembers = () => {
+  let { teamId } = useParams({ from: '/teams/$teamId/invite' });
+  const navigate = useNavigate({ from: '/teams/$teamId/invite' });
+  const [roles, setRoles] = useState<V1Beta1Role[]>([]);
+
+  const [orgMembers, setOrgMembers] = useState<V1Beta1User[]>([]);
+  const [isOrgMembersLoading, setIsOrgMembersLoading] = useState(false);
+
+  const [members, setMembers] = useState<V1Beta1User[]>([]);
+  const [isTeamMembersLoading, setIsTeamMembersLoading] = useState(false);
+
+  const [isRolesLoading, setIsRolesLoading] = useState(false);
+  const { client, activeOrganization: organization } = useFrontier();
+
+  const {
+    watch,
+    reset,
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting }
+  } = useForm({
+    resolver: yupResolver(inviteSchema)
+  });
+
+  useEffect(() => {
+    async function getOrganizationMembers() {
+      if (!organization?.id) return;
+      try {
+        setIsOrgMembersLoading(true);
+        const {
+          // @ts-ignore
+          data: { users }
+        } = await client?.frontierServiceListOrganizationUsers(
+          organization?.id
+        );
+        setOrgMembers(users);
+      } catch ({ error }: any) {
+        toast.error('Something went wrong', {
+          description: error.message
+        });
+      } finally {
+        setIsOrgMembersLoading(false);
+      }
+    }
+    getOrganizationMembers();
+  }, [client, organization?.id]);
+
+  useEffect(() => {
+    async function getTeamMembers() {
+      if (!organization?.id || !teamId) return;
+      try {
+        setIsTeamMembersLoading(true);
+        const {
+          // @ts-ignore
+          data: { users, role_pairs }
+        } = await client?.frontierServiceListGroupUsers(
+          organization?.id,
+          teamId,
+          { withRoles: true }
+        );
+        setMembers(users);
+      } catch ({ error }: any) {
+        toast.error('Something went wrong', {
+          description: error.message
+        });
+      } finally {
+        setIsTeamMembersLoading(false);
+      }
+    }
+    getTeamMembers();
+  }, [client, organization?.id, teamId]);
+
+  const getRoles = useCallback(async () => {
+    try {
+      setIsRolesLoading(true);
+      if (!organization?.id) return;
+      const {
+        // @ts-ignore
+        data: { roles: orgRoles }
+      } = await client?.frontierServiceListOrganizationRoles(organization.id, {
+        scopes: [PERMISSIONS.GroupNamespace]
+      });
+      const {
+        // @ts-ignore
+        data: { roles }
+      } = await client?.frontierServiceListRoles({
+        scopes: [PERMISSIONS.GroupNamespace]
+      });
+      setRoles([...roles, ...orgRoles]);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsRolesLoading(false);
+    }
+  }, [client, organization?.id]);
+
+  useEffect(() => {
+    getRoles();
+  }, [getRoles, organization?.id]);
+
+  const addGroupTeamPolicy = useCallback(
+    async (roleId: string, userId: string) => {
+      const role = roles.find(r => r.id === roleId);
+      if (role?.name && role.name !== PERMISSIONS.RoleGroupMember) {
+        const resource = `${PERMISSIONS.GroupPrincipal}:${teamId}`;
+        const principal = `${PERMISSIONS.UserPrincipal}:${userId}`;
+        const policy: V1Beta1PolicyRequestBody = {
+          roleId,
+          resource,
+          principal
+        };
+        await client?.frontierServiceCreatePolicy(policy);
+      }
+    },
+    [client, roles, teamId]
+  );
+
+  async function onSubmit({ role, userId }: InviteSchemaType) {
+    if (!userId || !role || !organization?.id) return;
+    try {
+      await client?.frontierServiceAddGroupUsers(organization?.id, teamId, {
+        userIds: [userId]
+      });
+      await addGroupTeamPolicy(role, userId);
+      toast.success('member added');
+      navigate({
+        to: '/teams/$teamId',
+        params: { teamId }
+      });
+    } catch ({ error }: any) {
+      toast.error('Something went wrong', {
+        description: error.message
+      });
+    }
+  }
+
+  const invitableUser = useMemo(
+    () => filterUsersfromUsers(orgMembers, members) || [],
+    [orgMembers, members]
+  );
+
+  const isUserLoading = isOrgMembersLoading || isTeamMembersLoading;
+
+  return (
+    <Dialog open={true}>
+      {/* @ts-ignore */}
+      <Dialog.Content style={{ padding: 0, maxWidth: '600px', width: '100%' }}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Flex justify="between" style={{ padding: '16px 24px' }}>
+            <Text size={6} style={{ fontWeight: '500' }}>
+              Add Member
+            </Text>
+
+            <Image
+              alt="cross"
+              style={{ cursor: 'pointer' }}
+              // @ts-ignore
+              src={cross}
+              onClick={() =>
+                navigate({ to: '/teams/$teamId', params: { teamId } })
+              }
+            />
+          </Flex>
+          <Separator />
+          <Flex
+            direction="column"
+            gap="medium"
+            style={{ padding: '24px 32px' }}
+          >
+            <InputField label="Members">
+              {isUserLoading ? (
+                <Skeleton height={'25px'} />
+              ) : (
+                <Controller
+                  render={({ field }) => (
+                    <Select {...field} onValueChange={field.onChange}>
+                      <Select.Trigger className="w-[180px]">
+                        <Select.Value placeholder="Select members" />
+                      </Select.Trigger>
+                      <Select.Content style={{ width: '100% !important' }}>
+                        <Select.Viewport style={{ maxHeight: '300px' }}>
+                          <Select.Group>
+                            {!invitableUser.length && (
+                              <Select.Label>No member to invite</Select.Label>
+                            )}
+                            {invitableUser.map(user => (
+                              <Select.Item value={user.id} key={user.id}>
+                                {user.title || user.email}
+                              </Select.Item>
+                            ))}
+                          </Select.Group>
+                        </Select.Viewport>
+                      </Select.Content>
+                    </Select>
+                  )}
+                  control={control}
+                  name="userId"
+                />
+              )}
+              <Text size={1} style={{ color: 'var(--foreground-danger)' }}>
+                {errors.userId && String(errors.userId?.message)}
+              </Text>
+            </InputField>
+            <InputField label="Invite as">
+              {isRolesLoading ? (
+                <Skeleton height={'25px'} />
+              ) : (
+                <Controller
+                  render={({ field }) => (
+                    <Select {...field} onValueChange={field.onChange}>
+                      <Select.Trigger className="w-[180px]">
+                        <Select.Value placeholder="Select a role" />
+                      </Select.Trigger>
+                      <Select.Content style={{ width: '100% !important' }}>
+                        <Select.Group>
+                          {!roles.length && (
+                            <Select.Label>No roles available</Select.Label>
+                          )}
+                          {roles.map(role => (
+                            <Select.Item value={role.id} key={role.id}>
+                              {role.title || role.name}
+                            </Select.Item>
+                          ))}
+                        </Select.Group>
+                      </Select.Content>
+                    </Select>
+                  )}
+                  control={control}
+                  name="role"
+                />
+              )}
+              <Text size={1} style={{ color: 'var(--foreground-danger)' }}>
+                {errors.role && String(errors.role?.message)}
+              </Text>
+            </InputField>
+            <Separator />
+            <Flex justify="end">
+              <Button variant="primary" size="medium" type="submit">
+                {isSubmitting ? 'adding...' : 'Add Member'}
+              </Button>
+            </Flex>
+          </Flex>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
diff --git a/sdks/js/packages/core/react/components/organization/teams/members/member.columns.tsx b/sdks/js/packages/core/react/components/organization/teams/members/member.columns.tsx
index 532585fb8..be6cff465 100644
--- a/sdks/js/packages/core/react/components/organization/teams/members/member.columns.tsx
+++ b/sdks/js/packages/core/react/components/organization/teams/members/member.columns.tsx
@@ -36,6 +36,7 @@ export const getColumns: (
     }
   },
   {
+    header: 'Title',
     accessorKey: 'title',
     meta: {
       style: {
@@ -52,6 +53,7 @@ export const getColumns: (
     }
   },
   {
+    header: 'Email',
     accessorKey: 'email',
     cell: info => <Text>{info.getValue()}</Text>
   },
diff --git a/sdks/js/packages/core/react/components/organization/teams/team.tsx b/sdks/js/packages/core/react/components/organization/teams/team.tsx
index 0b10dedf4..50e63017e 100644
--- a/sdks/js/packages/core/react/components/organization/teams/team.tsx
+++ b/sdks/js/packages/core/react/components/organization/teams/team.tsx
@@ -1,7 +1,12 @@
 import { Flex, Text, Image } from '@raystack/apsara';
 
 import { Tabs } from '@raystack/apsara';
-import { Outlet, useNavigate, useParams } from '@tanstack/react-router';
+import {
+  Outlet,
+  useNavigate,
+  useParams,
+  useRouterState
+} from '@tanstack/react-router';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { useFrontier } from '~/react/contexts/FrontierContext';
@@ -14,10 +19,10 @@ import backIcon from '~/react/assets/chevron-left.svg';
 export const TeamPage = () => {
   let { teamId } = useParams({ from: '/teams/$teamId' });
   const [team, setTeam] = useState<V1Beta1Group>();
-  const [orgMembers, setOrgMembers] = useState<V1Beta1User[]>([]);
   const [members, setMembers] = useState<V1Beta1User[]>([]);
   const { client, activeOrganization: organization } = useFrontier();
   let navigate = useNavigate({ from: '/teams/$teamId' });
+  const routerState = useRouterState();
 
   useEffect(() => {
     async function getTeamDetails() {
@@ -59,27 +64,7 @@ export const TeamPage = () => {
       }
     }
     getTeamMembers();
-  }, [client, organization?.id, teamId]);
-
-  useEffect(() => {
-    async function getOrganizationMembers() {
-      if (!organization?.id) return;
-      try {
-        const {
-          // @ts-ignore
-          data: { users }
-        } = await client?.frontierServiceListOrganizationUsers(
-          organization?.id
-        );
-        setOrgMembers(users);
-      } catch ({ error }: any) {
-        toast.error('Something went wrong', {
-          description: error.message
-        });
-      }
-    }
-    getOrganizationMembers();
-  }, [client, organization?.id]);
+  }, [client, organization?.id, teamId, routerState.location.key]);
 
   return (
     <Flex direction="column" style={{ width: '100%' }}>
@@ -106,12 +91,7 @@ export const TeamPage = () => {
           <General organization={organization} team={team} />
         </Tabs.Content>
         <Tabs.Content value="members">
-          <Members
-            orgMembers={orgMembers}
-            members={members}
-            setMembers={setMembers}
-            organizationId={organization?.id}
-          />
+          <Members members={members} organizationId={organization?.id} />
         </Tabs.Content>
       </Tabs>
       <Outlet />
diff --git a/sdks/js/packages/core/react/components/organization/teams/teams.columns.tsx b/sdks/js/packages/core/react/components/organization/teams/teams.columns.tsx
index 26c1e3cbd..ecd3f1036 100644
--- a/sdks/js/packages/core/react/components/organization/teams/teams.columns.tsx
+++ b/sdks/js/packages/core/react/components/organization/teams/teams.columns.tsx
@@ -33,6 +33,7 @@ export const getColumns: (
         )
   },
   {
+    header: 'Members',
     accessorKey: 'members',
     cell: isLoading
       ? () => <Skeleton />
diff --git a/sdks/js/packages/core/utils/index.ts b/sdks/js/packages/core/utils/index.ts
index 8241320b8..23fbea84e 100644
--- a/sdks/js/packages/core/utils/index.ts
+++ b/sdks/js/packages/core/utils/index.ts
@@ -21,10 +21,13 @@ export const filterUsersfromUsers = (
   exclude: V1Beta1User[] = []
 ) => {
   const excludeIds = exclude.map(e => e.id);
-  return arr.filter(user => !excludeIds.includes(user.id));
+  return arr
+    .filter(user => !excludeIds.includes(user.id))
+    .sort((a, b) =>
+      (a.title || a.email || '').localeCompare(b.title || b.email || '')
+    );
 };
 
-
 export const PERMISSIONS = {
   // namespace
   PlatformNamespace: 'app/platform',
@@ -78,7 +81,8 @@ export const PERMISSIONS = {
   SuperUserPrincipal: 'app/superuser',
 
   // Roles
-  RoleProjectOwner: 'app_project_owner'
+  RoleProjectOwner: 'app_project_owner',
+  RoleGroupMember: 'app_group_member'
 };
 
 export const formatPermissions = (
@@ -95,4 +99,4 @@ export const shouldShowComponent = (
   permisionsRequired: string
 ) => {
   return permissions[permisionsRequired] === true;
-};
\ No newline at end of file
+};
diff --git a/sdks/js/pnpm-lock.yaml b/sdks/js/pnpm-lock.yaml
index 496cae0c8..4fede7efa 100644
--- a/sdks/js/pnpm-lock.yaml
+++ b/sdks/js/pnpm-lock.yaml
@@ -37,8 +37,8 @@ importers:
         specifier: ^3.3.1
         version: 3.3.1(react-hook-form@7.46.2)
       '@raystack/apsara':
-        specifier: 0.11.2
-        version: 0.11.2
+        specifier: 0.11.3
+        version: 0.11.3
       '@tanstack/react-router':
         specifier: 0.0.1-beta.174
         version: 0.0.1-beta.174(react-dom@18.2.0)(react@18.2.0)
@@ -1346,8 +1346,8 @@ packages:
       react: 18.2.0
     dev: true
 
-  /@raystack/apsara@0.11.2:
-    resolution: {integrity: sha512-6WxlqJThvAKJq4K6QQs7JE7YvVJVun9QulJ8TZKts3f502GSdWqiBs/rYt9B8QmT9yJ2tOdLHz36sEu1h8wayg==}
+  /@raystack/apsara@0.11.3:
+    resolution: {integrity: sha512-kCpTyk4xLZk35WjbEMAakM70FFqltqvUdai6IIc9BVrsSg66wNPz58rNNRhXS9zd5W6VlLVaMgIHUBlgLcl1Tw==}
     engines: {node: '>=12.x.x'}
     dev: false