From 4a01a21f5d916f45c800ec5e627ae90a793d4f51 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 19 May 2026 14:18:43 +0530
Subject: [PATCH 1/3] fix: sdk action menu behaviour

---
 web/sdk/react/assets/user-minus.svg           |  3 +++
 web/sdk/react/hooks/useOrganizationTeams.ts   |  8 +++++---
 .../members/components/member-columns.tsx     |  6 +++---
 .../views-new/members/members-view.module.css |  4 ++++
 .../react/views-new/members/members-view.tsx  | 19 ++++++++++++++++---
 .../components/member-columns.module.css      |  7 +++++++
 .../projects/components/member-columns.tsx    | 11 ++++++-----
 .../components/project-columns.module.css     |  7 +++++++
 .../projects/components/project-columns.tsx   |  9 +++++----
 .../projects/project-details-view.module.css  |  4 ++++
 .../projects/project-details-view.tsx         |  3 ++-
 .../components/service-account-columns.tsx    |  6 +++---
 .../components/member-columns.module.css      |  7 +++++++
 .../teams/components/member-columns.tsx       | 11 ++++++-----
 .../teams/components/team-columns.module.css  |  7 +++++++
 .../teams/components/team-columns.tsx         |  9 +++++----
 .../teams/team-details-view.module.css        |  4 ++++
 .../views-new/teams/team-details-view.tsx     |  6 ++++--
 web/sdk/react/views-new/teams/teams-view.tsx  | 11 ++++++++---
 19 files changed, 106 insertions(+), 36 deletions(-)
 create mode 100644 web/sdk/react/assets/user-minus.svg
 create mode 100644 web/sdk/react/views-new/projects/components/member-columns.module.css
 create mode 100644 web/sdk/react/views-new/projects/components/project-columns.module.css
 create mode 100644 web/sdk/react/views-new/teams/components/member-columns.module.css
 create mode 100644 web/sdk/react/views-new/teams/components/team-columns.module.css

diff --git a/web/sdk/react/assets/user-minus.svg b/web/sdk/react/assets/user-minus.svg
new file mode 100644
index 000000000..f22dd6321
--- /dev/null
+++ b/web/sdk/react/assets/user-minus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M14.6665 7H10.6665M9.1665 4.25C9.1665 4.54547 9.10831 4.83806 8.99523 5.11104C8.88216 5.38402 8.71643 5.63206 8.50749 5.84099C8.29856 6.04992 8.05052 6.21566 7.77754 6.32873C7.50456 6.4418 7.21198 6.5 6.9165 6.5C6.62103 6.5 6.32845 6.4418 6.05547 6.32873C5.78248 6.21566 5.53445 6.04992 5.32551 5.84099C5.11658 5.63206 4.95085 5.38402 4.83777 5.11104C4.7247 4.83806 4.6665 4.54547 4.6665 4.25C4.6665 3.65326 4.90356 3.08097 5.32551 2.65901C5.74747 2.23705 6.31977 2 6.9165 2C7.51324 2 8.08554 2.23705 8.50749 2.65901C8.92945 3.08097 9.1665 3.65326 9.1665 4.25ZM2.6665 12.8233V12.75C2.6665 11.6228 3.11427 10.5418 3.9113 9.7448C4.70833 8.94777 5.78933 8.5 6.9165 8.5C8.04367 8.5 9.12468 8.94777 9.92171 9.7448C10.7187 10.5418 11.1665 11.6228 11.1665 12.75V12.8227C9.88349 13.5954 8.41358 14.0025 6.91584 14C5.36184 14 3.90784 13.57 2.6665 12.8227V12.8233Z" stroke="#E5484D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/web/sdk/react/hooks/useOrganizationTeams.ts b/web/sdk/react/hooks/useOrganizationTeams.ts
index ae6e04097..c444996fc 100644
--- a/web/sdk/react/hooks/useOrganizationTeams.ts
+++ b/web/sdk/react/hooks/useOrganizationTeams.ts
@@ -16,6 +16,7 @@ export const useOrganizationTeams = ({
   withMemberCount = false
 }: useOrganizationTeamsProps): {
   isFetching: boolean;
+  isFetched: boolean;
   teams: Group[];
   userAccessOnTeam: Record<string, string[]>;
   refetch: () => void;
@@ -27,14 +28,14 @@ export const useOrganizationTeams = ({
   const { activeOrganization: organization } = useFrontier();
 
   // Organization teams query
-  const { data: orgTeamsData, isLoading: isOrgTeamsLoading, error: orgTeamsError, refetch: refetchOrgTeams } = useQuery(
+  const { data: orgTeamsData, isLoading: isOrgTeamsLoading, isFetched: isOrgTeamsFetched, error: orgTeamsError, refetch: refetchOrgTeams } = useQuery(
     FrontierServiceQueries.listOrganizationGroups,
     create(ListOrganizationGroupsRequestSchema, { orgId: organization?.id || '', withMemberCount }),
     { enabled: !!organization?.id && showOrgTeams }
   );
 
-  // User teams query  
-  const { data: userTeamsData, isLoading: isUserTeamsLoading, error: userTeamsError, refetch: refetchUserTeams } = useQuery(
+  // User teams query
+  const { data: userTeamsData, isLoading: isUserTeamsLoading, isFetched: isUserTeamsFetched, error: userTeamsError, refetch: refetchUserTeams } = useQuery(
     FrontierServiceQueries.listCurrentUserGroups,
     create(ListCurrentUserGroupsRequestSchema, { orgId: organization?.id || '', withPermissions, withMemberCount }),
     { enabled: !!organization?.id && !showOrgTeams }
@@ -75,6 +76,7 @@ export const useOrganizationTeams = ({
 
   return {
     isFetching: isTeamsLoading,
+    isFetched: isUserTeamsFetched || isOrgTeamsFetched,
     teams: teams,
     userAccessOnTeam,
     refetch,
diff --git a/web/sdk/react/views-new/members/components/member-columns.tsx b/web/sdk/react/views-new/members/components/member-columns.tsx
index 6a1265128..fcc45a5e6 100644
--- a/web/sdk/react/views-new/members/components/member-columns.tsx
+++ b/web/sdk/react/views-new/members/components/member-columns.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { DotsVerticalIcon } from '@radix-ui/react-icons';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Flex,
   Text,
@@ -141,13 +141,13 @@ export const getColumns = ({
               }}
               render={
                 <IconButton
-                  size={3}
+                  size={2}
                   aria-label="Member actions"
                   data-test-id="member-actions-btn"
                 />
               }
             >
-              <DotsVerticalIcon />
+              <DotsHorizontalIcon />
             </Menu.Trigger>
           </Flex>
         );
diff --git a/web/sdk/react/views-new/members/members-view.module.css b/web/sdk/react/views-new/members/members-view.module.css
index 78da80ac9..5e32e17cb 100644
--- a/web/sdk/react/views-new/members/members-view.module.css
+++ b/web/sdk/react/views-new/members/members-view.module.css
@@ -12,6 +12,10 @@
   table-layout: fixed;
 }
 
+.tableRow > td {
+  padding: var(--rs-space-3);
+}
+
 .menuContent {
   min-width: 180px;
 }
diff --git a/web/sdk/react/views-new/members/members-view.tsx b/web/sdk/react/views-new/members/members-view.tsx
index a5fc80f96..74157b69f 100644
--- a/web/sdk/react/views-new/members/members-view.tsx
+++ b/web/sdk/react/views-new/members/members-view.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { ExclamationTriangleIcon, TrashIcon, UpdateIcon } from '@radix-ui/react-icons';
+import { ExclamationTriangleIcon, UpdateIcon } from '@radix-ui/react-icons';
 import {
   Button,
   Tooltip,
@@ -11,8 +11,10 @@ import {
   EmptyState,
   DataTable,
   Dialog,
+  Image,
   Menu
 } from '@raystack/apsara-v1';
+import deleteIcon from '../../assets/delete.svg';
 import { useFrontier } from '../../contexts/FrontierContext';
 import { useOrganizationMembers } from '../../hooks/useOrganizationMembers';
 import { usePermissions } from '../../hooks/usePermissions';
@@ -189,7 +191,8 @@ export function MembersView({ showTeamField = true }: MembersViewProps) {
             }
             classNames={{
               root: styles.tableRoot,
-              table: styles.table
+              table: styles.table,
+              row: styles.tableRow
             }}
           />
         </Flex>
@@ -218,7 +221,14 @@ export function MembersView({ showTeamField = true }: MembersViewProps) {
                 ))}
               {payload?.canRemove && (
                 <Menu.Item
-                  leadingIcon={<TrashIcon />}
+                  leadingIcon={
+                    <Image
+                      src={deleteIcon as unknown as string}
+                      alt="Remove"
+                      width={16}
+                      height={16}
+                    />
+                  }
                   onClick={() =>
                     removeMemberDialogHandle.openWithPayload({
                       memberId: payload.memberId,
@@ -226,6 +236,9 @@ export function MembersView({ showTeamField = true }: MembersViewProps) {
                     })
                   }
                   data-test-id="remove-member-dropdown-item"
+                  style={{
+                    color: 'var(--rs-color-foreground-danger-primary)'
+                  }}
                 >
                   Remove
                 </Menu.Item>
diff --git a/web/sdk/react/views-new/projects/components/member-columns.module.css b/web/sdk/react/views-new/projects/components/member-columns.module.css
new file mode 100644
index 000000000..72da9c120
--- /dev/null
+++ b/web/sdk/react/views-new/projects/components/member-columns.module.css
@@ -0,0 +1,7 @@
+.actionsCell {
+  visibility: hidden;
+}
+
+tr:hover .actionsCell {
+  visibility: visible;
+}
diff --git a/web/sdk/react/views-new/projects/components/member-columns.tsx b/web/sdk/react/views-new/projects/components/member-columns.tsx
index 738c04276..3e0af7b90 100644
--- a/web/sdk/react/views-new/projects/components/member-columns.tsx
+++ b/web/sdk/react/views-new/projects/components/member-columns.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { DotsVerticalIcon, TrashIcon, UpdateIcon } from '@radix-ui/react-icons';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Flex,
   Text,
@@ -13,6 +13,7 @@ import {
 import type { User, Group, Role } from '@raystack/proton/frontier';
 import { getInitials } from '~/utils';
 import teamIcon from '~/react/assets/users.svg';
+import styles from './member-columns.module.css';
 
 export type MemberRow = (Group & { isTeam: true }) | (User & { isTeam?: false });
 
@@ -52,7 +53,7 @@ export function getColumns({
         const label = member.isTeam ? member.title : member.title;
         const subLabel = member.isTeam ? member.name : member.email;
         return (
-          <Flex align="center" gap={3}>
+          <Flex align="center" gap={4}>
             <Avatar
               src={member.isTeam ? teamIcon as unknown as string : member.avatar}
               fallback={fallback}
@@ -113,7 +114,7 @@ export function getColumns({
         const excludedRoles = roles.filter(r => !currentRoleIds.has(r.id));
 
         return (
-          <Flex align="center" justify="center">
+          <Flex align="center" justify="center" className={styles.actionsCell}>
             <Menu.Trigger
               handle={menuHandle}
               payload={{
@@ -123,13 +124,13 @@ export function getColumns({
               }}
               render={
                 <IconButton
-                  size={3}
+                  size={2}
                   aria-label="Member actions"
                   data-test-id="frontier-sdk-member-actions-btn"
                 />
               }
             >
-              <DotsVerticalIcon />
+              <DotsHorizontalIcon />
             </Menu.Trigger>
           </Flex>
         );
diff --git a/web/sdk/react/views-new/projects/components/project-columns.module.css b/web/sdk/react/views-new/projects/components/project-columns.module.css
new file mode 100644
index 000000000..72da9c120
--- /dev/null
+++ b/web/sdk/react/views-new/projects/components/project-columns.module.css
@@ -0,0 +1,7 @@
+.actionsCell {
+  visibility: hidden;
+}
+
+tr:hover .actionsCell {
+  visibility: visible;
+}
diff --git a/web/sdk/react/views-new/projects/components/project-columns.tsx b/web/sdk/react/views-new/projects/components/project-columns.tsx
index 9b514be3b..4f2785fba 100644
--- a/web/sdk/react/views-new/projects/components/project-columns.tsx
+++ b/web/sdk/react/views-new/projects/components/project-columns.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { DotsVerticalIcon, Pencil1Icon, TrashIcon } from '@radix-ui/react-icons';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Flex,
   Text,
@@ -10,6 +10,7 @@ import {
 } from '@raystack/apsara-v1';
 import type { Project } from '@raystack/proton/frontier';
 import { MembersCell } from './members-cell';
+import styles from './project-columns.module.css';
 
 export interface ProjectMenuPayload {
   projectId: string;
@@ -84,7 +85,7 @@ export const getColumns = ({
         if (!canUpdate && !canDelete) return null;
 
         return (
-          <Flex align="center" justify="center">
+          <Flex align="center" justify="center" className={styles.actionsCell}>
             <Menu.Trigger
               handle={menuHandle}
               payload={{
@@ -96,13 +97,13 @@ export const getColumns = ({
               }}
               render={
                 <IconButton
-                  size={3}
+                  size={2}
                   aria-label="Project actions"
                   data-test-id="project-actions-btn"
                 />
               }
             >
-              <DotsVerticalIcon />
+              <DotsHorizontalIcon />
             </Menu.Trigger>
           </Flex>
         );
diff --git a/web/sdk/react/views-new/projects/project-details-view.module.css b/web/sdk/react/views-new/projects/project-details-view.module.css
index 2674282bc..a9a2e35eb 100644
--- a/web/sdk/react/views-new/projects/project-details-view.module.css
+++ b/web/sdk/react/views-new/projects/project-details-view.module.css
@@ -12,6 +12,10 @@
   table-layout: fixed;
 }
 
+.tableRow > td {
+  padding: var(--rs-space-3);
+}
+
 .menuContent {
   min-width: 160px;
 }
diff --git a/web/sdk/react/views-new/projects/project-details-view.tsx b/web/sdk/react/views-new/projects/project-details-view.tsx
index f06cacf6a..b0e77dbf3 100644
--- a/web/sdk/react/views-new/projects/project-details-view.tsx
+++ b/web/sdk/react/views-new/projects/project-details-view.tsx
@@ -414,7 +414,8 @@ export function ProjectDetailsView({
             }
             classNames={{
               root: styles.tableRoot,
-              table: styles.table
+              table: styles.table,
+              row: styles.tableRow
             }}
           />
         </Flex>
diff --git a/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx b/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx
index b889465d1..a1e50b86d 100644
--- a/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { DotsVerticalIcon } from '@radix-ui/react-icons';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Flex,
   Text,
@@ -81,14 +81,14 @@ export const getColumns = ({
             }}
             render={
               <IconButton
-                size={3}
+                size={2}
                 aria-label="Service account actions"
                 data-test-id="frontier-sdk-service-account-actions-btn"
                 className={styles.actionButton}
               />
             }
           >
-            <DotsVerticalIcon />
+            <DotsHorizontalIcon />
           </Menu.Trigger>
         </Flex>
       );
diff --git a/web/sdk/react/views-new/teams/components/member-columns.module.css b/web/sdk/react/views-new/teams/components/member-columns.module.css
new file mode 100644
index 000000000..72da9c120
--- /dev/null
+++ b/web/sdk/react/views-new/teams/components/member-columns.module.css
@@ -0,0 +1,7 @@
+.actionsCell {
+  visibility: hidden;
+}
+
+tr:hover .actionsCell {
+  visibility: visible;
+}
diff --git a/web/sdk/react/views-new/teams/components/member-columns.tsx b/web/sdk/react/views-new/teams/components/member-columns.tsx
index 38f12cd49..b1a0afddd 100644
--- a/web/sdk/react/views-new/teams/components/member-columns.tsx
+++ b/web/sdk/react/views-new/teams/components/member-columns.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { DotsVerticalIcon } from '@radix-ui/react-icons';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Flex,
   Text,
@@ -12,6 +12,7 @@ import {
 } from '@raystack/apsara-v1';
 import type { User, Role } from '@raystack/proton/frontier';
 import { getInitials } from '~/utils';
+import styles from './member-columns.module.css';
 
 export interface MemberMenuPayload {
   memberId: string;
@@ -42,7 +43,7 @@ export function getColumns({
         const fallback = getInitials(member.title || member.email);
         const color = getAvatarColor(member.id || '');
         return (
-          <Flex align="center" gap={3}>
+          <Flex align="center" gap={4}>
             <Avatar
               src={member.avatar}
               fallback={fallback}
@@ -101,7 +102,7 @@ export function getColumns({
         const excludedRoles = roles.filter(r => !currentRoleIds.has(r.id));
 
         return (
-          <Flex align="center" justify="center">
+          <Flex align="center" justify="center" className={styles.actionsCell}>
             <Menu.Trigger
               handle={menuHandle}
               payload={{
@@ -110,13 +111,13 @@ export function getColumns({
               }}
               render={
                 <IconButton
-                  size={3}
+                  size={2}
                   aria-label="Member actions"
                   data-test-id="frontier-sdk-team-member-actions-btn"
                 />
               }
             >
-              <DotsVerticalIcon />
+              <DotsHorizontalIcon />
             </Menu.Trigger>
           </Flex>
         );
diff --git a/web/sdk/react/views-new/teams/components/team-columns.module.css b/web/sdk/react/views-new/teams/components/team-columns.module.css
new file mode 100644
index 000000000..72da9c120
--- /dev/null
+++ b/web/sdk/react/views-new/teams/components/team-columns.module.css
@@ -0,0 +1,7 @@
+.actionsCell {
+  visibility: hidden;
+}
+
+tr:hover .actionsCell {
+  visibility: visible;
+}
diff --git a/web/sdk/react/views-new/teams/components/team-columns.tsx b/web/sdk/react/views-new/teams/components/team-columns.tsx
index 5e7be2508..94abc9003 100644
--- a/web/sdk/react/views-new/teams/components/team-columns.tsx
+++ b/web/sdk/react/views-new/teams/components/team-columns.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { DotsVerticalIcon } from '@radix-ui/react-icons';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Flex,
   Text,
@@ -9,6 +9,7 @@ import {
   DataTableColumnDef
 } from '@raystack/apsara-v1';
 import type { Group } from '@raystack/proton/frontier';
+import styles from './team-columns.module.css';
 
 export interface TeamMenuPayload {
   teamId: string;
@@ -64,7 +65,7 @@ export function getColumns({
         if (!canUpdate && !canDelete) return null;
 
         return (
-          <Flex align="center" justify="center">
+          <Flex align="center" justify="center" className={styles.actionsCell}>
             <Menu.Trigger
               handle={menuHandle}
               payload={{
@@ -76,13 +77,13 @@ export function getColumns({
               }}
               render={
                 <IconButton
-                  size={3}
+                  size={2}
                   aria-label="Team actions"
                   data-test-id="frontier-sdk-team-actions-btn"
                 />
               }
             >
-              <DotsVerticalIcon />
+              <DotsHorizontalIcon />
             </Menu.Trigger>
           </Flex>
         );
diff --git a/web/sdk/react/views-new/teams/team-details-view.module.css b/web/sdk/react/views-new/teams/team-details-view.module.css
index 8cd2868e7..c835a24ac 100644
--- a/web/sdk/react/views-new/teams/team-details-view.module.css
+++ b/web/sdk/react/views-new/teams/team-details-view.module.css
@@ -6,6 +6,10 @@
   table-layout: fixed;
 }
 
+.tableRow > td {
+  padding: var(--rs-space-3);
+}
+
 .menuContent {
   min-width: 160px;
 }
diff --git a/web/sdk/react/views-new/teams/team-details-view.tsx b/web/sdk/react/views-new/teams/team-details-view.tsx
index 984a3e38f..4b477a9ba 100644
--- a/web/sdk/react/views-new/teams/team-details-view.tsx
+++ b/web/sdk/react/views-new/teams/team-details-view.tsx
@@ -20,6 +20,7 @@ import {
   Image
 } from '@raystack/apsara-v1';
 import deleteIcon from '../../assets/delete.svg';
+import userMinusIcon from '../../assets/user-minus.svg';
 import { toastManager } from '@raystack/apsara-v1';
 import { useQuery, useMutation } from '@connectrpc/connect-query';
 import {
@@ -340,7 +341,8 @@ export function TeamDetailsView({
             }
             classNames={{
               root: styles.tableRoot,
-              table: styles.table
+              table: styles.table,
+              row: styles.tableRow
             }}
           />
         </Flex>
@@ -367,7 +369,7 @@ export function TeamDetailsView({
               <Menu.Item
                 leadingIcon={
                   <Image
-                    src={deleteIcon as unknown as string}
+                    src={userMinusIcon as unknown as string}
                     alt="Remove"
                     width={16}
                     height={16}
diff --git a/web/sdk/react/views-new/teams/teams-view.tsx b/web/sdk/react/views-new/teams/teams-view.tsx
index 56cdad9aa..ba5e67566 100644
--- a/web/sdk/react/views-new/teams/teams-view.tsx
+++ b/web/sdk/react/views-new/teams/teams-view.tsx
@@ -57,6 +57,7 @@ export function TeamsView({
 
   const {
     isFetching: isTeamsLoading,
+    isFetched: isTeamsFetched,
     teams,
     userAccessOnTeam,
     refetch,
@@ -120,6 +121,8 @@ export function TeamsView({
   }, []);
 
   const isLoading = !organization?.id || isPermissionsFetching || isTeamsLoading;
+  const showInitialSkeleton = isLoading && !isTeamsFetched;
+  const filterValue = showOrgTeams ? 'all-teams' : 'my-teams';
 
   const columns = useMemo(
     () =>
@@ -151,7 +154,7 @@ export function TeamsView({
         <Flex direction="column" gap={7}>
           <Flex justify="between" gap={3}>
             <Flex gap={3} align="center">
-              {isLoading ? (
+              {showInitialSkeleton ? (
                 <Skeleton height="34px" width="360px" />
               ) : (
                 <>
@@ -159,11 +162,13 @@ export function TeamsView({
                     placeholder="Search by title"
                     size="large"
                     width={360}
+                    disabled={isLoading}
                   />
                   {canListOrgGroups && (
                     <Select
-                      defaultValue={teamsFilterOptions[0].value}
+                      value={filterValue}
                       onValueChange={onFilterChange}
+                      disabled={isLoading}
                     >
                       <Select.Trigger className={styles.teamsFilter}>
                         <Select.Value />
@@ -180,7 +185,7 @@ export function TeamsView({
                 </>
               )}
             </Flex>
-            {isLoading ? (
+            {showInitialSkeleton ? (
               <Skeleton height="34px" width="120px" />
             ) : (
               <Tooltip>

From ec9dbbb5a8290386dfd61644c0c163a84de234fd Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 19 May 2026 15:24:20 +0530
Subject: [PATCH 2/3] feat: add project member support

---
 .../projects/components/add-member-menu.tsx   | 200 ++++++++++--------
 .../components/edit-project-dialog.module.css |   4 -
 .../components/edit-project-dialog.tsx        |  46 +---
 .../projects/components/project-columns.tsx   |  13 --
 .../views-new/projects/projects-view.tsx      |  21 +-
 5 files changed, 139 insertions(+), 145 deletions(-)
 delete mode 100644 web/sdk/react/views-new/projects/components/edit-project-dialog.module.css

diff --git a/web/sdk/react/views-new/projects/components/add-member-menu.tsx b/web/sdk/react/views-new/projects/components/add-member-menu.tsx
index 7ebd37918..665f0f3d5 100644
--- a/web/sdk/react/views-new/projects/components/add-member-menu.tsx
+++ b/web/sdk/react/views-new/projects/components/add-member-menu.tsx
@@ -39,12 +39,21 @@ interface AddMemberMenuProps {
   refetch: () => void;
 }
 
-export function AddMemberMenu({
+interface AddMemberMenuContentProps {
+  projectId: string;
+  canUpdateProject: boolean;
+  members: User[];
+  refetch: () => void;
+  asSubmenu?: boolean;
+}
+
+export function AddMemberMenuContent({
   projectId,
   canUpdateProject,
   members,
-  refetch
-}: AddMemberMenuProps) {
+  refetch,
+  asSubmenu = false
+}: AddMemberMenuContentProps) {
   const [showTeam, setShowTeam] = useState(false);
 
   const { activeOrganization: organization } = useFrontier();
@@ -92,7 +101,10 @@ export function AddMemberMenu({
   );
 
   const viewerRole = useMemo(
-    () => (rolesData?.roles as Role[] ?? []).find((r: Role) => r.name === PERMISSIONS.RoleProjectViewer),
+    () =>
+      (rolesData?.roles as Role[] ?? []).find(
+        (r: Role) => r.name === PERMISSIONS.RoleProjectViewer
+      ),
     [rolesData]
   );
 
@@ -152,6 +164,99 @@ export function AddMemberMenu({
 
   const isLoading = showTeam ? isTeamsLoading : isOrgUsersLoading;
 
+  const ContentComponent = asSubmenu ? Menu.SubmenuContent : Menu.Content;
+
+  return (
+    <ContentComponent
+      align={asSubmenu ? 'start' : 'end'}
+      className={styles.addMemberContent}
+      searchPlaceholder={showTeam ? 'Search teams...' : 'Search...'}
+    >
+      <div className={styles.addMemberMenuList}>
+        {isLoading
+          ? <Flex gap={1} direction="column">
+            {
+              Array.from({ length: 6 }, (_, i) => (
+                <Skeleton key={i} height="30px" width="100%" />
+              ))
+            }
+          </Flex>
+          : showTeam
+            ? teams.map(team => (
+              <Menu.Item
+                key={team.id}
+                value={team.title || team.name || ''}
+                className={styles.addMemberMenuItem}
+                leadingIcon={
+                  <Avatar
+                    fallback={getInitials(team.title || team.name || '')}
+                    size={1}
+                  />
+                }
+                onClick={() => addTeam(team.id || '')}
+                data-test-id={`frontier-sdk-add-team-to-project-item-${team.id}`}
+              >
+                <span className={styles.addMemberMenuItemText}>{team.title || team.name}</span>
+              </Menu.Item>
+            ))
+            : invitableUsers.map(user => (
+              <Menu.Item
+                key={user.id}
+                value={user.title || user.email || ''}
+                className={styles.addMemberMenuItem}
+                leadingIcon={
+                  <Avatar
+                    src={user.avatar}
+                    fallback={getInitials(
+                      user.title || user.email || ''
+                    )}
+                    size={1}
+                  />
+                }
+                onClick={() => addMember(user.id || '')}
+                data-test-id={`frontier-sdk-add-user-to-project-item-${user.id}`}
+              >
+                <span className={styles.addMemberMenuItemText}>{user.title || user.email}</span>
+              </Menu.Item>
+            ))}
+
+        {!isLoading &&
+          (showTeam ? !teams.length : !invitableUsers.length) && (
+            <Menu.EmptyState className={styles.addMemberEmptyState}>
+              {showTeam ? 'No teams found' : 'No users found'}
+            </Menu.EmptyState>
+          )}
+      </div>
+      <Flex direction="column" align="center" className={styles.addMemberFooter}>
+        <Separator className={styles.addMemberSeparator} />
+        <Button
+          width="100%"
+          variant="text"
+          color="neutral"
+          className={styles.addMemberToggleBtn}
+          leadingIcon={
+            showTeam ? (
+              <PlusIcon />
+            ) : (
+              <CardStackPlusIcon />
+            )
+          }
+          onClick={toggleShowTeam}
+          data-test-id="frontier-sdk-add-project-member-toggle"
+        >
+          {showTeam ? 'Add project member' : 'Add team to project'}
+        </Button>
+      </Flex>
+    </ContentComponent>
+  );
+}
+
+export function AddMemberMenu({
+  projectId,
+  canUpdateProject,
+  members,
+  refetch
+}: AddMemberMenuProps) {
   if (!canUpdateProject) {
     return (
       <Tooltip>
@@ -183,87 +288,12 @@ export function AddMemberMenu({
       >
         Add a member
       </Menu.Trigger>
-      <Menu.Content
-        align="end"
-        className={styles.addMemberContent}
-        searchPlaceholder={showTeam ? 'Search teams...' : 'Search...'}
-      >
-        <div className={styles.addMemberMenuList}>
-          {isLoading
-            ? <Flex gap={1} direction="column">
-              {
-                Array.from({ length: 6 }, (_, i) => (
-                  <Skeleton key={i} height="30px" width="100%" />
-                ))
-              }
-            </Flex>
-            : showTeam
-              ? teams.map(team => (
-                <Menu.Item
-                  key={team.id}
-                  value={team.title || team.name || ''}
-                  className={styles.addMemberMenuItem}
-                  leadingIcon={
-                    <Avatar
-                      fallback={getInitials(team.title || team.name || '')}
-                      size={1}
-                    />
-                  }
-                  onClick={() => addTeam(team.id || '')}
-                  data-test-id={`frontier-sdk-add-team-to-project-item-${team.id}`}
-                >
-                  <span className={styles.addMemberMenuItemText}>{team.title || team.name}</span>
-                </Menu.Item>
-              ))
-              : invitableUsers.map(user => (
-                <Menu.Item
-                  key={user.id}
-                  value={user.title || user.email || ''}
-                  className={styles.addMemberMenuItem}
-                  leadingIcon={
-                    <Avatar
-                      src={user.avatar}
-                      fallback={getInitials(
-                        user.title || user.email || ''
-                      )}
-                      size={1}
-                    />
-                  }
-                  onClick={() => addMember(user.id || '')}
-                  data-test-id={`frontier-sdk-add-user-to-project-item-${user.id}`}
-                >
-                  <span className={styles.addMemberMenuItemText}>{user.title || user.email}</span>
-                </Menu.Item>
-              ))}
-
-          {!isLoading &&
-            (showTeam ? !teams.length : !invitableUsers.length) && (
-              <Menu.EmptyState className={styles.addMemberEmptyState}>
-                {showTeam ? 'No teams found' : 'No users found'}
-              </Menu.EmptyState>
-            )}
-        </div>
-        <Flex direction="column" align="center" className={styles.addMemberFooter}>
-          <Separator className={styles.addMemberSeparator} />
-          <Button
-            width="100%"
-            variant="text"
-            color="neutral"
-            className={styles.addMemberToggleBtn}
-            leadingIcon={
-              showTeam ? (
-                <PlusIcon />
-              ) : (
-                <CardStackPlusIcon />
-              )
-            }
-            onClick={toggleShowTeam}
-            data-test-id="frontier-sdk-add-project-member-toggle"
-          >
-            {showTeam ? 'Add project member' : 'Add team to project'}
-          </Button>
-        </Flex>
-      </Menu.Content>
+      <AddMemberMenuContent
+        projectId={projectId}
+        canUpdateProject={canUpdateProject}
+        members={members}
+        refetch={refetch}
+      />
     </Menu>
   );
 }
diff --git a/web/sdk/react/views-new/projects/components/edit-project-dialog.module.css b/web/sdk/react/views-new/projects/components/edit-project-dialog.module.css
deleted file mode 100644
index 0aa54aa46..000000000
--- a/web/sdk/react/views-new/projects/components/edit-project-dialog.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.radioOptions {
-  display: flex;
-  gap: var(--rs-space-10);
-}
diff --git a/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx b/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx
index 4c23ce005..76e999260 100644
--- a/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx
+++ b/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx
@@ -4,11 +4,9 @@ import { useEffect } from 'react';
 import {
   Button,
   Flex,
-  Text,
   Dialog,
   Field,
-  Input,
-  Radio
+  Input
 } from '@raystack/apsara-v1';
 import { toastManager } from '@raystack/apsara-v1';
 import * as yup from 'yup';
@@ -20,13 +18,11 @@ import {
   UpdateProjectRequestSchema
 } from '@raystack/proton/frontier';
 import { create } from '@bufbuild/protobuf';
-import styles from './edit-project-dialog.module.css';
 import { handleConnectError } from '~/utils/error';
 
 const editProjectSchema = yup
   .object({
-    title: yup.string().required('Project name is required'),
-    privacy: yup.string().oneOf(['private', 'public']).required()
+    title: yup.string().required('Project name is required')
   })
   .required();
 
@@ -76,28 +72,22 @@ function EditProjectForm({ payload, handle, refetch }: EditProjectFormProps) {
   const {
     reset,
     handleSubmit,
-    setValue,
-    watch,
     formState: { errors, isSubmitting, isDirty },
     register
   } = useForm({
     resolver: yupResolver(editProjectSchema),
     defaultValues: {
-      title: payload.title,
-      privacy: 'private' as const
+      title: payload.title
     }
   });
 
-  const privacy = watch('privacy');
-
   const { mutateAsync: updateProject } = useMutation(
     FrontierServiceQueries.updateProject
   );
 
   useEffect(() => {
     reset({
-      title: payload.title,
-      privacy: 'private'
+      title: payload.title
     });
   }, [payload.projectId, payload.title, reset]);
 
@@ -145,34 +135,6 @@ function EditProjectForm({ payload, handle, refetch }: EditProjectFormProps) {
               placeholder="Enter project name"
             />
           </Field>
-          <Flex direction="column" gap={4}>
-            <Text size="mini" weight="medium" variant="secondary">
-              Project privacy
-            </Text>
-            <Radio.Group
-              value={privacy}
-              onValueChange={(val: string) =>
-                setValue('privacy', val as 'private' | 'public', {
-                  shouldDirty: true
-                })
-              }
-            >
-              <div className={styles.radioOptions}>
-                <Flex gap={3}>
-                  <Radio value="private" />
-                  <Text size="small" variant="secondary">
-                    Private
-                  </Text>
-                </Flex>
-                <Flex gap={3}>
-                  <Radio value="public" />
-                  <Text size="small" variant="secondary">
-                    Public
-                  </Text>
-                </Flex>
-              </div>
-            </Radio.Group>
-          </Flex>
         </Flex>
       </Dialog.Body>
       <Dialog.Footer>
diff --git a/web/sdk/react/views-new/projects/components/project-columns.tsx b/web/sdk/react/views-new/projects/components/project-columns.tsx
index 4f2785fba..f98548f84 100644
--- a/web/sdk/react/views-new/projects/components/project-columns.tsx
+++ b/web/sdk/react/views-new/projects/components/project-columns.tsx
@@ -42,19 +42,6 @@ export const getColumns = ({
         );
       }
     },
-    {
-      header: 'Privacy',
-      accessorKey: 'metadata',
-      enableSorting: false,
-
-      cell: () => {
-        return (
-          <Text size="regular">
-            Private
-          </Text>
-        );
-      }
-    },
     {
       header: 'Members',
       accessorKey: 'membersCount',
diff --git a/web/sdk/react/views-new/projects/projects-view.tsx b/web/sdk/react/views-new/projects/projects-view.tsx
index 291c96d4e..3521778ed 100644
--- a/web/sdk/react/views-new/projects/projects-view.tsx
+++ b/web/sdk/react/views-new/projects/projects-view.tsx
@@ -4,7 +4,8 @@ import { useEffect, useMemo } from 'react';
 import {
   ArchiveIcon,
   ExclamationTriangleIcon,
-  Pencil1Icon
+  Pencil1Icon,
+  PlusIcon
 } from '@radix-ui/react-icons';
 import {
   Button,
@@ -31,6 +32,7 @@ import { getColumns, type ProjectMenuPayload } from './components/project-column
 import { AddProjectDialog } from './components/add-project-dialog';
 import { EditProjectDialog, type EditProjectPayload } from './components/edit-project-dialog';
 import { DeleteProjectDialog, type DeleteProjectPayload } from './components/delete-project-dialog';
+import { AddMemberMenuContent } from './components/add-member-menu';
 import styles from './projects-view.module.css';
 import { useTerminology } from '~/react/hooks/useTerminology';
 
@@ -238,6 +240,23 @@ export function ProjectsView({
                   Edit
                 </Menu.Item>
               )}
+              {payload?.canUpdate && (
+                <Menu.Submenu autocomplete>
+                  <Menu.SubmenuTrigger
+                    leadingIcon={<PlusIcon />}
+                    data-test-id="add-project-member-dropdown-item"
+                  >
+                    Add a member
+                  </Menu.SubmenuTrigger>
+                  <AddMemberMenuContent
+                    projectId={payload.projectId}
+                    canUpdateProject={payload.canUpdate}
+                    members={[]}
+                    refetch={refetch}
+                    asSubmenu
+                  />
+                </Menu.Submenu>
+              )}
               {payload?.canDelete && (
                 <Menu.Item
                   leadingIcon={<Image src={deleteIcon as unknown as string} alt="Delete" width={16} height={16} />}

From b9e8edc52179b761045fe9c80b1b0a29961fdd3d Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 19 May 2026 16:22:52 +0530
Subject: [PATCH 3/3] fix: update emptystate

---
 web/sdk/react/assets/inbox-stack.svg          |   4 +
 .../react/hooks/useOrganizationProjects.ts    |  28 +++--
 .../react/views-new/billing/billing-view.tsx  |  14 ++-
 web/sdk/react/views-new/pat/pat-view.tsx      |  17 ++-
 web/sdk/react/views-new/plans/plans-view.tsx  |   1 +
 .../projects/projects-view.module.css         |   6 +
 .../views-new/projects/projects-view.tsx      | 108 ++++++++++++------
 .../service-accounts-view.tsx                 |  26 ++++-
 web/sdk/react/views-new/teams/teams-view.tsx  |  45 ++++++++
 9 files changed, 194 insertions(+), 55 deletions(-)
 create mode 100644 web/sdk/react/assets/inbox-stack.svg

diff --git a/web/sdk/react/assets/inbox-stack.svg b/web/sdk/react/assets/inbox-stack.svg
new file mode 100644
index 000000000..e7584171f
--- /dev/null
+++ b/web/sdk/react/assets/inbox-stack.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 16.3872V19.375C2.5 21.1009 3.89911 22.5 5.625 22.5H34.375C36.1009 22.5 37.5 21.1009 37.5 19.375V16.3872C37.5 15.1937 37.073 14.0395 36.2963 13.1333L30.8215 6.74604C29.8716 5.63781 28.4849 5 27.0252 5H12.9748C11.5151 5 10.1284 5.63781 9.17847 6.74604L3.70372 13.1333C2.92696 14.0395 2.5 15.1937 2.5 16.3872ZM12.9748 7.5C12.2449 7.5 11.5516 7.81891 11.0766 8.37302L6.46778 13.75H11.7431C13.4148 13.75 14.976 14.5855 15.9033 15.9765L16.1768 16.3868C16.6405 17.0822 17.4211 17.5 18.2569 17.5H21.7431C22.5789 17.5 23.3595 17.0822 23.8232 16.3868L24.0967 15.9765C25.024 14.5855 26.5852 13.75 28.2569 13.75H33.5322L28.9234 8.37302C28.4484 7.81891 27.7551 7.5 27.0252 7.5H12.9748Z" fill="#646464"/>
+  <path d="M4.6875 25C3.47938 25 2.5 25.9794 2.5 27.1875V30C2.5 32.7614 4.73858 35 7.5 35H32.5C35.2614 35 37.5 32.7614 37.5 30V27.1875C37.5 25.9794 36.5206 25 35.3125 25H28.2569C26.5852 25 25.024 25.8355 24.0967 27.2265L23.8232 27.6368C23.3595 28.3322 22.5789 28.75 21.7431 28.75H18.2569C17.4211 28.75 16.6405 28.3322 16.1768 27.6367L15.9033 27.2265C14.976 25.8355 13.4148 25 11.7431 25H4.6875Z" fill="#646464"/>
+</svg>
\ No newline at end of file
diff --git a/web/sdk/react/hooks/useOrganizationProjects.ts b/web/sdk/react/hooks/useOrganizationProjects.ts
index bed23543b..85567e48b 100644
--- a/web/sdk/react/hooks/useOrganizationProjects.ts
+++ b/web/sdk/react/hooks/useOrganizationProjects.ts
@@ -12,6 +12,7 @@ interface useOrganizationProjectsProps {
 
 export interface UseOrganizationProjectsReturn {
   isFetching: boolean;
+  isFetched: boolean;
   projects: Project[];
   userAccessOnProject: Record<string, string[]>;
   refetch: () => void;
@@ -25,33 +26,35 @@ export const useOrganizationProjects = ({
   const { activeOrganization: organization } = useFrontier();
 
   // Query for organization projects (all projects)
-  const { 
-    data: orgProjectsData, 
-    isLoading: isOrgProjectsLoading, 
+  const {
+    data: orgProjectsData,
+    isLoading: isOrgProjectsLoading,
+    isFetched: isOrgProjectsFetched,
     error: orgProjectsError,
-    refetch: refetchOrgProjects 
+    refetch: refetchOrgProjects
   } = useQuery(
     FrontierServiceQueries.listOrganizationProjects,
-    create(ListOrganizationProjectsRequestSchema, { 
+    create(ListOrganizationProjectsRequestSchema, {
       id: organization?.id || '',
-      withMemberCount 
+      withMemberCount
     }),
     { enabled: !!organization?.id && allProjects }
   );
 
   // Query for current user projects
-  const { 
-    data: userProjectsData, 
-    isLoading: isUserProjectsLoading, 
+  const {
+    data: userProjectsData,
+    isLoading: isUserProjectsLoading,
+    isFetched: isUserProjectsFetched,
     error: userProjectsError,
-    refetch: refetchUserProjects 
+    refetch: refetchUserProjects
   } = useQuery(
     FrontierServiceQueries.listProjectsByCurrentUser,
-    create(ListProjectsByCurrentUserRequestSchema, { 
+    create(ListProjectsByCurrentUserRequestSchema, {
       orgId: organization?.id || '',
       withPermissions: ['update', 'delete'],
       nonInherited: true,
-      withMemberCount 
+      withMemberCount
     }),
     { enabled: !!organization?.id && !allProjects }
   );
@@ -89,6 +92,7 @@ export const useOrganizationProjects = ({
 
   return {
     isFetching: isLoading,
+    isFetched: isUserProjectsFetched || isOrgProjectsFetched,
     projects: projects,
     userAccessOnProject,
     refetch: refetch,
diff --git a/web/sdk/react/views-new/billing/billing-view.tsx b/web/sdk/react/views-new/billing/billing-view.tsx
index 0e464b149..83826f606 100644
--- a/web/sdk/react/views-new/billing/billing-view.tsx
+++ b/web/sdk/react/views-new/billing/billing-view.tsx
@@ -2,8 +2,8 @@
 
 import { useCallback, useEffect, useMemo } from 'react';
 import qs from 'query-string';
-import { Flex, Dialog, EmptyState, toastManager } from '@raystack/apsara-v1';
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Flex, Dialog, EmptyState, Image, toastManager } from '@raystack/apsara-v1';
+import exclamationTriangleIcon from '../../assets/exclamation-triangle.svg';
 import {
   CreateCheckoutRequestSchema,
   ListInvoicesRequestSchema,
@@ -162,7 +162,15 @@ export function BillingView({ onNavigateToPlans }: BillingViewProps) {
 
       {hasNoAccess ? (
         <EmptyState
-          icon={<ExclamationTriangleIcon />}
+          variant="empty2"
+          icon={
+            <Image
+              src={exclamationTriangleIcon as unknown as string}
+              alt=""
+              width={40}
+              height={40}
+            />
+          }
           heading="Restricted Access"
           subHeading="Admin access required, please reach out to your admin to view billing."
         />
diff --git a/web/sdk/react/views-new/pat/pat-view.tsx b/web/sdk/react/views-new/pat/pat-view.tsx
index 6a4fb2460..5df99a715 100644
--- a/web/sdk/react/views-new/pat/pat-view.tsx
+++ b/web/sdk/react/views-new/pat/pat-view.tsx
@@ -9,8 +9,10 @@ import {
   Dialog,
   EmptyState,
   Flex,
+  Image,
   Skeleton
 } from '@raystack/apsara-v1';
+import keyIcon from '../../assets/key.svg';
 import type { DataTableQuery, DataTableSort } from '@raystack/apsara-v1';
 import { useDebouncedState } from '@raystack/apsara-v1/hooks';
 import { useInfiniteQuery } from '@connectrpc/connect-query';
@@ -166,13 +168,22 @@ export function PatsView({ onPATClick }: PatsViewProps = {}) {
         </Flex>
       ) : hasNoPats ? (
         <EmptyState
-          icon={<LockClosedIcon />}
+          variant="empty2"
+          icon={
+            <Image
+              src={keyIcon as unknown as string}
+              alt=""
+              width={40}
+              height={40}
+            />
+          }
           heading="No Personal Access Token Found"
           subHeading={`Create a new to use the Keys of ${t.appName()} platform`}
           primaryAction={
             <Button
-              variant="outline"
-              color="neutral"
+              variant="solid"
+              color="accent"
+              size="small"
               onClick={() => createPATDialogHandle.open(null)}
               data-test-id="frontier-sdk-add-pat-btn"
             >
diff --git a/web/sdk/react/views-new/plans/plans-view.tsx b/web/sdk/react/views-new/plans/plans-view.tsx
index 0437e8138..c73f75de1 100644
--- a/web/sdk/react/views-new/plans/plans-view.tsx
+++ b/web/sdk/react/views-new/plans/plans-view.tsx
@@ -151,6 +151,7 @@ export function PlansView() {
       <ViewContainer>
         <ViewHeader title="Plans" description="View and manage your subscription plan." />
         <EmptyState
+          variant="empty2"
           icon={<ExclamationTriangleIcon />}
           heading="No Plans Available"
           subHeading="No plans available at this moment. Please try again later."
diff --git a/web/sdk/react/views-new/projects/projects-view.module.css b/web/sdk/react/views-new/projects/projects-view.module.css
index ef5ab7df4..9d3c0abbc 100644
--- a/web/sdk/react/views-new/projects/projects-view.module.css
+++ b/web/sdk/react/views-new/projects/projects-view.module.css
@@ -9,3 +9,9 @@
 .menuContent {
   min-width: 6;
 }
+
+.projectsFilter {
+  width: auto;
+  min-width: 140px;
+  box-shadow: none;
+}
diff --git a/web/sdk/react/views-new/projects/projects-view.tsx b/web/sdk/react/views-new/projects/projects-view.tsx
index 3521778ed..4c64c4244 100644
--- a/web/sdk/react/views-new/projects/projects-view.tsx
+++ b/web/sdk/react/views-new/projects/projects-view.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
-  ArchiveIcon,
   ExclamationTriangleIcon,
   Pencil1Icon,
   PlusIcon
@@ -17,9 +16,11 @@ import {
   Dialog,
   AlertDialog,
   Image,
-  Menu
+  Menu,
+  Select
 } from '@raystack/apsara-v1';
 import deleteIcon from '../../assets/delete.svg';
+import inboxStackIcon from '../../assets/inbox-stack.svg';
 import { toastManager } from '@raystack/apsara-v1';
 import { useFrontier } from '../../contexts/FrontierContext';
 import { useOrganizationProjects } from '../../hooks/useOrganizationProjects';
@@ -36,6 +37,11 @@ import { AddMemberMenuContent } from './components/add-member-menu';
 import styles from './projects-view.module.css';
 import { useTerminology } from '~/react/hooks/useTerminology';
 
+const projectsFilterOptions = [
+  { value: 'my-projects', label: 'My Projects' },
+  { value: 'all-projects', label: 'All Projects' }
+];
+
 const projectMenuHandle = Menu.createHandle<ProjectMenuPayload>();
 const addProjectDialogHandle = Dialog.createHandle();
 const editProjectDialogHandle = Dialog.createHandle<EditProjectPayload>();
@@ -52,13 +58,17 @@ export function ProjectsView({
   description,
   onProjectClick
 }: ProjectsViewProps) {
+  const [showOrgProjects, setShowOrgProjects] = useState(false);
+
   const {
     isFetching: isProjectsLoading,
+    isFetched: isProjectsFetched,
     projects,
     userAccessOnProject,
     refetch,
     error: projectsError
   } = useOrganizationProjects({
+    allProjects: showOrgProjects,
     withMemberCount: true
   });
 
@@ -85,15 +95,23 @@ export function ProjectsView({
     !!organization?.id
   );
 
-  const { canCreateProject } = useMemo(() => {
+  const { canCreateProject, canListOrgProjects } = useMemo(() => {
     return {
       canCreateProject: shouldShowComponent(
         permissions,
         `${PERMISSIONS.ProjectCreatePermission}::${resource}`
+      ),
+      canListOrgProjects: shouldShowComponent(
+        permissions,
+        `${PERMISSIONS.UpdatePermission}::${resource}`
       )
     };
   }, [permissions, resource]);
 
+  const onFilterChange = useCallback((value: string) => {
+    setShowOrgProjects(value === 'all-projects');
+  }, []);
+
   useEffect(() => {
     if (projectsError) {
       toastManager.add({
@@ -108,6 +126,9 @@ export function ProjectsView({
   }, [projectsError]);
 
   const isLoading = !organization?.id || isPermissionsFetching || isProjectsLoading;
+  const showInitialSkeleton = isLoading && !isProjectsFetched;
+  const filterValue = showOrgProjects ? 'all-projects' : 'my-projects';
+  const hasNoProjects = !isLoading && (projects?.length ?? 0) === 0;
 
   const columns = useMemo(
     () =>
@@ -118,39 +139,39 @@ export function ProjectsView({
     [userAccessOnProject]
   );
 
-  if (!isLoading && (projects?.length ?? 0) === 0) {
+  if (hasNoProjects) {
     return (
       <ViewContainer>
         <ViewHeader title={title} description={description ?? `Manage projects for this ${t.organization({ case: 'lower' })}`} />
         <EmptyState
           variant="empty2"
-          icon={<ArchiveIcon />}
+          icon={
+            <Image
+              src={inboxStackIcon as unknown as string}
+              alt=""
+              width="100%"
+              height="100%"
+            />
+          }
           heading={t.project()}
           subHeading="A project is a structured initiative undertaken to achieve a specific outcome. It operates within a defined scope, objectives, and resources, following a process of planning, execution, monitoring, and completion."
           secondaryAction={
-            <Tooltip>
-              <Tooltip.Trigger
-                disabled={canCreateProject}
-                render={<span />}
+            canCreateProject ? (
+              <Button
+                variant="solid"
+                color="accent"
+                size="small"
+                onClick={() => addProjectDialogHandle.open(null)}
+                data-test-id="frontier-sdk-add-project-empty-state-button"
               >
-                <Button
-                  variant="solid"
-                  color="accent"
-                  size="small"
-                  onClick={() => addProjectDialogHandle.open(null)}
-                  disabled={!canCreateProject}
-                  data-test-id="frontier-sdk-add-project-empty-state-button"
-                >
-                  Create new {t.project({ case: 'lower' })}
-                </Button>
-              </Tooltip.Trigger>
-              {!canCreateProject && (
-                <Tooltip.Content>{AuthTooltipMessage}</Tooltip.Content>
-              )}
-            </Tooltip>
+                Create new {t.project({ case: 'lower' })}
+              </Button>
+            ) : null
           }
         />
-        <AddProjectDialog handle={addProjectDialogHandle} refetch={refetch} />
+        {canCreateProject && (
+          <AddProjectDialog handle={addProjectDialogHandle} refetch={refetch} />
+        )}
       </ViewContainer>
     );
   }
@@ -170,17 +191,38 @@ export function ProjectsView({
         <Flex direction="column" gap={7}>
           <Flex justify="between" gap={3}>
             <Flex gap={3} align="center">
-              {isLoading ? (
+              {showInitialSkeleton ? (
                 <Skeleton height="34px" width="360px" />
               ) : (
-                <DataTable.Search
-                  placeholder="Search by name"
-                  size="large"
-                  width={360}
-                />
+                <>
+                  <DataTable.Search
+                    placeholder="Search by name"
+                    size="large"
+                    width={360}
+                    disabled={isLoading}
+                  />
+                  {canListOrgProjects && (
+                    <Select
+                      value={filterValue}
+                      onValueChange={onFilterChange}
+                      disabled={isLoading}
+                    >
+                      <Select.Trigger className={styles.projectsFilter}>
+                        <Select.Value />
+                      </Select.Trigger>
+                      <Select.Content>
+                        {projectsFilterOptions.map(opt => (
+                          <Select.Item value={opt.value} key={opt.value}>
+                            {opt.label}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select>
+                  )}
+                </>
               )}
             </Flex>
-            {isLoading ? (
+            {showInitialSkeleton ? (
               <Skeleton height="34px" width="120px" />
             ) : (
               <Tooltip>
diff --git a/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx b/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx
index 99f7f0b63..df6907951 100644
--- a/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx
+++ b/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx
@@ -16,6 +16,7 @@ import {
 } from '@raystack/apsara-v1';
 import deleteIcon from '~/react/assets/delete.svg';
 import keyIcon from '~/react/assets/key.svg';
+import exclamationTriangleIcon from '~/react/assets/exclamation-triangle.svg';
 import { useQuery } from '@connectrpc/connect-query';
 import { create } from '@bufbuild/protobuf';
 import {
@@ -146,19 +147,36 @@ export function ServiceAccountsView({
 
       {hasNoAccess ? (
         <EmptyState
-          icon={<ExclamationTriangleIcon />}
+          variant="empty2"
+          icon={
+            <Image
+              src={exclamationTriangleIcon as unknown as string}
+              alt=""
+              width={40}
+              height={40}
+            />
+          }
           heading="Restricted Access"
           subHeading="Admin access required, please reach out to your admin incase you want to generate a key."
         />
       ) : hasNoServiceAccounts ? (
         <EmptyState
-          icon={<ExclamationTriangleIcon />}
+          variant="empty2"
+          icon={
+            <Image
+              src={keyIcon as unknown as string}
+              alt=""
+              width={40}
+              height={40}
+            />
+          }
           heading="No Service Account Found"
           subHeading={`Create a new account to use the APIs of ${t.appName()} platform`}
           primaryAction={
             <Button
-              variant="outline"
-              color="neutral"
+              variant="solid"
+              color="accent"
+              size="small"
               onClick={() => addDialogHandle.open(null)}
               data-test-id="frontier-sdk-new-service-account-btn"
             >
diff --git a/web/sdk/react/views-new/teams/teams-view.tsx b/web/sdk/react/views-new/teams/teams-view.tsx
index ba5e67566..31fbe768e 100644
--- a/web/sdk/react/views-new/teams/teams-view.tsx
+++ b/web/sdk/react/views-new/teams/teams-view.tsx
@@ -16,6 +16,7 @@ import {
   Select
 } from '@raystack/apsara-v1';
 import deleteIcon from '../../assets/delete.svg';
+import usersIcon from '../../assets/users.svg';
 import { toastManager } from '@raystack/apsara-v1';
 import { useFrontier } from '../../contexts/FrontierContext';
 import { useOrganizationTeams } from '../../hooks/useOrganizationTeams';
@@ -123,6 +124,7 @@ export function TeamsView({
   const isLoading = !organization?.id || isPermissionsFetching || isTeamsLoading;
   const showInitialSkeleton = isLoading && !isTeamsFetched;
   const filterValue = showOrgTeams ? 'all-teams' : 'my-teams';
+  const hasNoTeams = !isLoading && (teams?.length ?? 0) === 0;
 
   const columns = useMemo(
     () =>
@@ -133,6 +135,49 @@ export function TeamsView({
     [userAccessOnTeam]
   );
 
+  if (hasNoTeams) {
+    return (
+      <ViewContainer>
+        <ViewHeader
+          title={title}
+          description={
+            description ??
+            `Manage teams in this ${t.organization({ case: 'lower' })}`
+          }
+        />
+        <EmptyState
+          variant="empty2"
+          icon={
+            <Image
+              src={usersIcon as unknown as string}
+              alt=""
+              width="100%"
+              height="100%"
+            />
+          }
+          heading={t.team()}
+          subHeading="A team is a group of users working together within an organization. Teams enable structured collaboration, role-based access, and shared management of projects and resources."
+          secondaryAction={
+            canCreateGroup ? (
+              <Button
+                variant="solid"
+                color="accent"
+                size="small"
+                onClick={() => addTeamDialogHandle.open(null)}
+                data-test-id="frontier-sdk-add-team-empty-state-button"
+              >
+                Create new {t.team({ case: 'lower' })}
+              </Button>
+            ) : null
+          }
+        />
+        {canCreateGroup && (
+          <AddTeamDialog handle={addTeamDialogHandle} refetch={refetch} />
+        )}
+      </ViewContainer>
+    );
+  }
+
   return (
     <ViewContainer>
       <ViewHeader