From 7775e7c14eafbc465e638aa678c9cf7d10925b06 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 21 Feb 2025 07:28:35 +0000
Subject: [PATCH] [TOOL-3473] Add Team Member invites (#6301)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the team management features in the dashboard, including invite management, member roles, and UI improvements for better user experience.

### Detailed summary
- Added `skipShowingPlans` prop in `LoginPage`.
- Updated `AnnouncementBanner` to include new layout segments.
- Enhanced `TeamMember` type with new fields.
- Introduced `DotsBackgroundPattern` component for UI.
- Implemented `service_getTeamBySlug` API function.
- Added `leaveTeam` functionality in various components.
- Improved onboarding logic to skip plans.
- Created `JoinTeamPage` with invite handling.
- Added invite management features in `ManageInvitesSection`.
- Enhanced member management with delete functionality.
- Updated UI components for better accessibility and usability.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 apps/dashboard/src/@/actions/acceptInvite.ts  |  53 +++
 .../dashboard/src/@/actions/sendTeamInvite.ts |  68 ++++
 apps/dashboard/src/@/api/team-invites.ts      |  46 +++
 apps/dashboard/src/@/api/team-members.ts      |   9 +-
 apps/dashboard/src/@/api/team.ts              |  16 +-
 .../@/components/ui/background-patterns.tsx   |  20 +
 .../[invite_id]/JoinTeamPage.stories.tsx      |  42 +++
 .../[team_slug]/[invite_id]/JoinTeamPage.tsx  | 142 +++++++
 .../team/[team_slug]/[invite_id]/page.tsx     |  29 ++
 apps/dashboard/src/app/login/LoginPage.tsx    |   1 +
 .../onboarding/on-boarding-ui.client.tsx      |  10 +-
 .../general/GeneralSettingsPage.stories.tsx   |  11 +-
 .../general/TeamGeneralSettingsPage.tsx       |  14 +
 .../general/TeamGeneralSettingsPageUI.tsx     |  46 +--
 .../members/InviteSection.stories.tsx         | 174 +++++++++
 .../~/settings/members/InviteSection.tsx      | 355 ++++++++++++++----
 .../members/ManageInvitesSection.stories.tsx  | 103 +++++
 .../settings/members/ManageInvitesSection.tsx | 279 ++++++++++++++
 .../settings/members/ManageMembersSection.tsx | 306 +++++++--------
 .../TeamMembersSettingsPage.stories.tsx       | 122 +++---
 .../members/TeamMembersSettingsPage.tsx       | 115 +++++-
 .../(team)/~/settings/members/_common.tsx     | 117 ++++++
 .../(team)/~/settings/members/page.tsx        |  23 +-
 .../[team_slug]/(team)/~/settings/page.tsx    |  17 +-
 .../components/notices/AnnouncementBanner.tsx |   3 +-
 25 files changed, 1742 insertions(+), 379 deletions(-)
 create mode 100644 apps/dashboard/src/@/actions/acceptInvite.ts
 create mode 100644 apps/dashboard/src/@/actions/sendTeamInvite.ts
 create mode 100644 apps/dashboard/src/@/api/team-invites.ts
 create mode 100644 apps/dashboard/src/@/components/ui/background-patterns.tsx
 create mode 100644 apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/JoinTeamPage.stories.tsx
 create mode 100644 apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/JoinTeamPage.tsx
 create mode 100644 apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/page.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.stories.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.stories.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/_common.tsx

diff --git a/apps/dashboard/src/@/actions/acceptInvite.ts b/apps/dashboard/src/@/actions/acceptInvite.ts
new file mode 100644
index 00000000000..aa96cf1fe33
--- /dev/null
+++ b/apps/dashboard/src/@/actions/acceptInvite.ts
@@ -0,0 +1,53 @@
+"use server";
+
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+export async function acceptInvite(options: {
+  teamId: string;
+  inviteId: string;
+}) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      ok: false,
+      errorMessage: "You are not authorized to perform this action",
+    };
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${options.teamId}/invites/${options.inviteId}/accept`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({}),
+    },
+  );
+
+  if (!res.ok) {
+    let errorMessage = "Failed to accept invite";
+    try {
+      const result = (await res.json()) as {
+        error: {
+          code: string;
+          message: string;
+          statusCode: number;
+        };
+      };
+      errorMessage = result.error.message;
+    } catch {}
+
+    return {
+      ok: false,
+      errorMessage,
+    };
+  }
+
+  return {
+    ok: true,
+  };
+}
diff --git a/apps/dashboard/src/@/actions/sendTeamInvite.ts b/apps/dashboard/src/@/actions/sendTeamInvite.ts
new file mode 100644
index 00000000000..5f5163d05be
--- /dev/null
+++ b/apps/dashboard/src/@/actions/sendTeamInvite.ts
@@ -0,0 +1,68 @@
+"use server";
+
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+export async function sendTeamInvites(options: {
+  teamId: string;
+  invites: Array<{ email: string; role: "OWNER" | "MEMBER" }>;
+}): Promise<
+  | {
+      ok: true;
+      results: Array<"fulfilled" | "rejected">;
+    }
+  | {
+      ok: false;
+      errorMessage: string;
+    }
+> {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      ok: false,
+      errorMessage: "You are not authorized to perform this action",
+    };
+  }
+
+  const results = await Promise.allSettled(
+    options.invites.map((invite) => sendInvite(options.teamId, invite, token)),
+  );
+
+  return {
+    ok: true,
+    results: results.map((x) => x.status),
+  };
+}
+
+async function sendInvite(
+  teamId: string,
+  invite: { email: string; role: "OWNER" | "MEMBER" },
+  token: string,
+) {
+  const res = await fetch(`${API_SERVER_URL}/v1/teams/${teamId}/invites`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      inviteEmail: invite.email,
+      inviteRole: invite.role,
+    }),
+  });
+
+  if (!res.ok) {
+    const errorMessage = await res.text();
+    return {
+      email: invite.email,
+      ok: false,
+      errorMessage,
+    };
+  }
+
+  return {
+    email: invite.email,
+    ok: true,
+  };
+}
diff --git a/apps/dashboard/src/@/api/team-invites.ts b/apps/dashboard/src/@/api/team-invites.ts
new file mode 100644
index 00000000000..1d414954510
--- /dev/null
+++ b/apps/dashboard/src/@/api/team-invites.ts
@@ -0,0 +1,46 @@
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+export type TeamInvite = {
+  id: string;
+  teamId: string;
+  email: string;
+  role: "OWNER" | "MEMBER";
+  createdAt: string;
+  status: "pending" | "accepted" | "expired";
+  expiresAt: string;
+};
+
+export async function getTeamInvites(
+  teamId: string,
+  options: {
+    count: number;
+    start: number;
+  },
+) {
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    throw new Error("Unauthorized");
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${teamId}/invites?skip=${options.start}&take=${options.count}`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const errorMessage = await res.text();
+    throw new Error(errorMessage);
+  }
+
+  const json = (await res.json()) as {
+    result: TeamInvite[];
+  };
+
+  return json.result;
+}
diff --git a/apps/dashboard/src/@/api/team-members.ts b/apps/dashboard/src/@/api/team-members.ts
index bc754f39fca..afe19b9316b 100644
--- a/apps/dashboard/src/@/api/team-members.ts
+++ b/apps/dashboard/src/@/api/team-members.ts
@@ -12,15 +12,16 @@ export type TeamAccountRole =
 
 export type TeamMember = {
   account: {
+    creatorWalletAddress: string;
     name: string;
     email: string | null;
+    image: string | null;
   };
-} & {
-  deletedAt: Date | null;
+  deletedAt: string | null;
   accountId: string;
   teamId: string;
-  createdAt: Date;
-  updatedAt: Date;
+  createdAt: string;
+  updatedAt: string;
   role: TeamAccountRole;
 };
 
diff --git a/apps/dashboard/src/@/api/team.ts b/apps/dashboard/src/@/api/team.ts
index efdb350da83..ef51d5ca776 100644
--- a/apps/dashboard/src/@/api/team.ts
+++ b/apps/dashboard/src/@/api/team.ts
@@ -1,5 +1,5 @@
 import "server-only";
-import { API_SERVER_URL } from "@/constants/env";
+import { API_SERVER_URL, THIRDWEB_API_SECRET } from "@/constants/env";
 import type { TeamResponse } from "@thirdweb-dev/service-utils";
 import { getAuthToken } from "../../app/api/lib/getAuthToken";
 
@@ -22,6 +22,20 @@ export async function getTeamBySlug(slug: string) {
   return null;
 }
 
+export async function service_getTeamBySlug(slug: string) {
+  const teamRes = await fetch(`${API_SERVER_URL}/v1/teams/${slug}`, {
+    headers: {
+      "x-service-api-key": THIRDWEB_API_SECRET,
+    },
+  });
+
+  if (teamRes.ok) {
+    return (await teamRes.json())?.result as Team;
+  }
+
+  return null;
+}
+
 export function getTeamById(id: string) {
   return getTeamBySlug(id);
 }
diff --git a/apps/dashboard/src/@/components/ui/background-patterns.tsx b/apps/dashboard/src/@/components/ui/background-patterns.tsx
new file mode 100644
index 00000000000..664031cb7a3
--- /dev/null
+++ b/apps/dashboard/src/@/components/ui/background-patterns.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+
+export function DotsBackgroundPattern(props: {
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-0 text-foreground/30 dark:text-foreground/10",
+        props.className,
+      )}
+      style={{
+        backgroundImage: "radial-gradient(currentColor 1px, transparent 1px)",
+        backgroundSize: "24px 24px",
+        maskImage:
+          "radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 50%)",
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/JoinTeamPage.stories.tsx b/apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/JoinTeamPage.stories.tsx
new file mode 100644
index 00000000000..261c230dbe9
--- /dev/null
+++ b/apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/JoinTeamPage.stories.tsx
@@ -0,0 +1,42 @@
+import { Toaster } from "@/components/ui/sonner";
+import type { Meta, StoryObj } from "@storybook/react";
+import { mobileViewport } from "../../../../../stories/utils";
+import { JoinTeamPageUI } from "./JoinTeamPage";
+
+const meta = {
+  title: "Team/Join Team",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div>
+      <JoinTeamPageUI
+        teamName="XYZ Inc"
+        invite={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }}
+      />
+      <Toaster richColors />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/JoinTeamPage.tsx b/apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/JoinTeamPage.tsx
new file mode 100644
index 00000000000..d6a875c4b3c
--- /dev/null
+++ b/apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/JoinTeamPage.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { acceptInvite } from "@/actions/acceptInvite";
+import type { Team } from "@/api/team";
+import { ToggleThemeButton } from "@/components/color-mode-toggle";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { DotsBackgroundPattern } from "@/components/ui/background-patterns";
+import { Button } from "@/components/ui/button";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { useMutation } from "@tanstack/react-query";
+import { CheckIcon, UsersIcon } from "lucide-react";
+import Link from "next/link";
+import { toast } from "sonner";
+import { ThirdwebMiniLogo } from "../../../../components/ThirdwebMiniLogo";
+
+export function JoinTeamPage(props: {
+  team: Team;
+  inviteId: string;
+}) {
+  const router = useDashboardRouter();
+  return (
+    <JoinTeamPageUI
+      teamName={props.team.name}
+      invite={async () => {
+        const res = await acceptInvite({
+          inviteId: props.inviteId,
+          teamId: props.team.id,
+        });
+
+        if (!res.ok) {
+          console.error(res.errorMessage);
+          throw new Error(res.errorMessage);
+        }
+
+        router.replace(`/team/${props.team.slug}`);
+      }}
+    />
+  );
+}
+
+export function JoinTeamPageUI(props: {
+  teamName: string;
+  invite: () => Promise<void>;
+}) {
+  return (
+    <div className="relative flex min-h-dvh flex-col overflow-hidden">
+      <Header />
+
+      <div className="container flex grow flex-col items-center justify-center ">
+        <div className="z-10">
+          <AcceptInviteCardUI teamName={props.teamName} invite={props.invite} />
+        </div>
+      </div>
+
+      <DotsBackgroundPattern />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <div className="border-b bg-background">
+      <header className="container flex w-full flex-row items-center justify-between px-6 py-4">
+        <div className="flex shrink-0 items-center gap-3">
+          <ThirdwebMiniLogo className="size-7 md:size-8" />
+          <span className="font-medium text-foreground text-xl tracking-tight">
+            thirdweb
+          </span>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Link
+              href="/support"
+              target="_blank"
+              className="px-2 text-muted-foreground text-sm hover:text-foreground"
+            >
+              Support
+            </Link>
+          </div>
+          <ToggleThemeButton />
+        </div>
+      </header>
+    </div>
+  );
+}
+
+function AcceptInviteCardUI(props: {
+  teamName: string;
+  invite: () => Promise<void>;
+}) {
+  const invite = useMutation({
+    mutationFn: props.invite,
+  });
+  return (
+    <div className="w-full rounded-xl border bg-card shadow-2xl lg:w-[600px]">
+      <div className="p-4 lg:p-6">
+        <div className="mb-5 flex size-12 items-center justify-center rounded-full border bg-background">
+          <UsersIcon className="size-5 text-muted-foreground" />
+        </div>
+
+        <h1 className="mb-3 font-semibold text-2xl tracking-tight">
+          Join your team on thirdweb
+        </h1>
+        <p className="mb-1.5 font-medium text-muted-foreground">
+          You have been invited to join team{" "}
+          <em className="text-foreground not-italic">{props.teamName}</em>{" "}
+        </p>
+
+        <p className="text-muted-foreground">
+          Accepting this invite will add you to the team and give you access to
+          the team&apos;s resources
+        </p>
+      </div>
+      <div className="flex justify-end border-t p-4 lg:p-6">
+        <Button
+          disabled={invite.isPending}
+          className="gap-2"
+          onClick={() => {
+            const promise = invite.mutateAsync();
+            toast.promise(promise, {
+              success: "Invite accepted",
+              error: (e) => {
+                if (e instanceof Error && e.message) {
+                  return e.message;
+                }
+                return "Failed to accept invite";
+              },
+            });
+          }}
+        >
+          {invite.isPending ? (
+            <Spinner className="size-4" />
+          ) : (
+            <CheckIcon className="size-4" />
+          )}
+          Accept Invite
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/page.tsx b/apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/page.tsx
new file mode 100644
index 00000000000..012a5d0fb99
--- /dev/null
+++ b/apps/dashboard/src/app/join/team/[team_slug]/[invite_id]/page.tsx
@@ -0,0 +1,29 @@
+import { getTeamBySlug, service_getTeamBySlug } from "@/api/team";
+import { notFound, redirect } from "next/navigation";
+import { getValidAccount } from "../../../../account/settings/getAccount";
+import { JoinTeamPage } from "./JoinTeamPage";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string; invite_id: string }>;
+}) {
+  const { team_slug, invite_id } = await props.params;
+
+  // ensure the user is logged in + onboarded
+  await getValidAccount(`/join/team/${team_slug}/${invite_id}`);
+
+  const [userTeam, inviteTeam] = await Promise.all([
+    getTeamBySlug(team_slug),
+    service_getTeamBySlug(team_slug),
+  ]);
+
+  // if the user is already a member of the team, redirect to the team
+  if (userTeam) {
+    redirect(`/team/${team_slug}`);
+  }
+
+  if (!inviteTeam) {
+    notFound();
+  }
+
+  return <JoinTeamPage team={inviteTeam} inviteId={invite_id} />;
+}
diff --git a/apps/dashboard/src/app/login/LoginPage.tsx b/apps/dashboard/src/app/login/LoginPage.tsx
index d01be457eb4..f3ab1479128 100644
--- a/apps/dashboard/src/app/login/LoginPage.tsx
+++ b/apps/dashboard/src/app/login/LoginPage.tsx
@@ -202,6 +202,7 @@ function PageContent(props: {
           onLogout={() => {
             setScreen({ id: "login" });
           }}
+          skipShowingPlans={props.redirectPath.startsWith("/join/team")}
         />
       </Suspense>
     );
diff --git a/apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx b/apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx
index 85467d12253..54b72f7b2bd 100644
--- a/apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx
+++ b/apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx
@@ -25,6 +25,7 @@ function OnboardingUI(props: {
   // path to redirect from stripe
   redirectPath: string;
   redirectToCheckout: RedirectBillingCheckoutAction;
+  skipShowingPlans: boolean;
 }) {
   const { account } = props;
   const [screen, setScreen] = useState<OnboardingScreen>({ id: "onboarding" });
@@ -119,7 +120,12 @@ function OnboardingUI(props: {
               if (account.onboardSkipped) {
                 props.onComplete();
               } else {
-                setScreen({ id: "plan", team: res.team });
+                if (props.skipShowingPlans) {
+                  props.onComplete();
+                  skipOnboarding();
+                } else {
+                  setScreen({ id: "plan", team: res.team });
+                }
               }
             }
           }}
@@ -137,8 +143,8 @@ function OnboardingUI(props: {
           redirectPath={props.redirectPath}
           teamSlug={screen.team.slug}
           skipPlan={async () => {
-            await skipOnboarding().catch(() => {});
             props.onComplete();
+            skipOnboarding();
           }}
           canTrialGrowth={true}
           redirectToCheckout={props.redirectToCheckout}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
index 2c6ea9c6747..f19dfc8d3cb 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
@@ -48,6 +48,9 @@ function Story() {
           await new Promise((resolve) => setTimeout(resolve, 1000));
         }}
         client={getThirdwebClient()}
+        leaveTeam={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }}
       />
       <ComponentVariants />
       <Toaster richColors />
@@ -61,8 +64,12 @@ function ComponentVariants() {
       <div className="mx-auto max-w-[1100px]">
         <h2 className="mb-5 text-3xl"> Component variations </h2>
         <div className="flex flex-col gap-6">
-          <LeaveTeamCard enabled={true} teamName="foo" />
-          <LeaveTeamCard enabled={false} teamName="foo" />
+          <LeaveTeamCard
+            teamName="foo"
+            leaveTeam={async () => {
+              await new Promise((resolve) => setTimeout(resolve, 1000));
+            }}
+          />
           <DeleteTeamCard enabled={true} teamName="foo" />
           <DeleteTeamCard enabled={false} teamName="foo" />
         </div>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPage.tsx
index 8316867373c..a44bd96b093 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPage.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { apiServerProxy } from "@/actions/proxies";
 import type { Team } from "@/api/team";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { ThirdwebClient } from "thirdweb";
@@ -10,6 +11,7 @@ import { updateTeam } from "./updateTeam";
 export function TeamGeneralSettingsPage(props: {
   team: Team;
   client: ThirdwebClient;
+  accountId: string;
 }) {
   const router = useDashboardRouter();
 
@@ -30,6 +32,18 @@ export function TeamGeneralSettingsPage(props: {
           router.refresh();
         }
       }}
+      leaveTeam={async () => {
+        const res = await apiServerProxy({
+          pathname: `/v1/teams/${props.team.id}/members/${props.accountId}`,
+          method: "DELETE",
+        });
+
+        if (!res.ok) {
+          throw new Error(res.error);
+        }
+
+        router.replace("/team");
+      }}
       updateTeamImage={async (file) => {
         let uri: string | undefined = undefined;
 
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx
index e4a6f3cfaa1..a5747083397 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx
@@ -20,6 +20,7 @@ export function TeamGeneralSettingsPageUI(props: {
   updateTeamImage: (file: File | undefined) => Promise<void>;
   updateTeamField: UpdateTeamField;
   client: ThirdwebClient;
+  leaveTeam: () => Promise<void>;
 }) {
   const hasPermissionToDelete = false; // TODO
   return (
@@ -38,7 +39,7 @@ export function TeamGeneralSettingsPageUI(props: {
         client={props.client}
       />
       <TeamIdCard team={props.team} />
-      <LeaveTeamCard enabled={false} teamName={props.team.name} />
+      <LeaveTeamCard teamName={props.team.name} leaveTeam={props.leaveTeam} />
       <DeleteTeamCard
         enabled={hasPermissionToDelete}
         teamName={props.team.name}
@@ -238,20 +239,15 @@ function TeamIdCard(props: {
 }
 
 export function LeaveTeamCard(props: {
-  enabled: boolean;
   teamName: string;
+  leaveTeam: () => Promise<void>;
 }) {
   const title = "Leave Team";
   const description =
     "Revoke your access to this Team. Any resources you've added to the Team will remain.";
 
-  // TODO
   const leaveTeam = useMutation({
-    mutationFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 3000));
-      console.log("Deleting team");
-      throw new Error("Not implemented");
-    },
+    mutationFn: props.leaveTeam,
   });
 
   function handleLeave() {
@@ -262,32 +258,18 @@ export function LeaveTeamCard(props: {
     });
   }
 
-  if (props.enabled) {
-    return (
-      <DangerSettingCard
-        title={title}
-        description={description}
-        buttonLabel={title}
-        buttonOnClick={handleLeave}
-        isPending={leaveTeam.isPending}
-        confirmationDialog={{
-          title: `Are you sure you want to leave team "${props.teamName}" ?`,
-          description:
-            "This will revoke your access to this Team. Any resources you've added to the Team will remain.",
-        }}
-      />
-    );
-  }
-
   return (
-    <SettingsCard
-      header={{
-        title,
-        description,
+    <DangerSettingCard
+      title={title}
+      description={description}
+      buttonLabel={title}
+      buttonOnClick={handleLeave}
+      isPending={leaveTeam.isPending}
+      confirmationDialog={{
+        title: `Are you sure you want to leave team "${props.teamName}" ?`,
+        description:
+          "This will revoke your access to this Team. Any resources you've added to the Team will remain.",
       }}
-      bottomText="To leave this Team, ensure at least one more Member has the Owner role."
-      errorText={undefined}
-      noPermissionText={undefined}
     />
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.stories.tsx
new file mode 100644
index 00000000000..71cfc9c31fe
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.stories.tsx
@@ -0,0 +1,174 @@
+import type { TeamAccountRole } from "@/api/team-members";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {} from "@/components/ui/select";
+import { Toaster } from "@/components/ui/sonner";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { teamStub } from "../../../../../../../stories/stubs";
+import { mobileViewport } from "../../../../../../../stories/utils";
+import { InviteSection } from "./InviteSection";
+
+const meta = {
+  title: "Team/Settings/Members/InviteSection",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+const TEAM_CONFIGS = [
+  { id: "free", label: "Free Team", team: teamStub("foo", "free") },
+  { id: "starter", label: "Starter Team", team: teamStub("foo", "starter") },
+  { id: "growth", label: "Growth Team", team: teamStub("bazz", "growth") },
+  { id: "pro", label: "Pro Team", team: teamStub("bar", "pro") },
+] as const;
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+type InviteParams = Array<{ email: string; role: TeamAccountRole }>;
+
+const INVITE_HANDLERS = {
+  success: async (params: InviteParams) => {
+    await sleep(500);
+    return { results: params.map(() => "fulfilled" as const) };
+  },
+  failure: async (params: InviteParams) => {
+    await sleep(500);
+    return { results: params.map(() => "rejected" as const) };
+  },
+  mixed: async (params: InviteParams) => {
+    await sleep(500);
+    return {
+      results: params.map((_, index) =>
+        index % 2 === 0 ? ("fulfilled" as const) : ("rejected" as const),
+      ),
+    };
+  },
+} as const;
+
+function RadioOption({
+  id,
+  label,
+  value,
+}: { id: string; label: string; value: string }) {
+  return (
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value={value} id={id} />
+      <Label htmlFor={id}>{label}</Label>
+    </div>
+  );
+}
+
+function Story() {
+  const [selectedTeam, setSelectedTeam] = useState({
+    id: "free",
+    team: TEAM_CONFIGS[0].team,
+  });
+  const [hasEditPermission, setHasEditPermission] = useState("true");
+  const [inviteResult, setInviteResult] =
+    useState<keyof typeof INVITE_HANDLERS>("success");
+
+  const showPermissionControls =
+    selectedTeam.id !== "free" && selectedTeam.id !== "pro";
+  const showInviteControls =
+    showPermissionControls && hasEditPermission === "true";
+
+  return (
+    <div className="mx-auto w-full max-w-[1100px] px-4 py-6">
+      <div className="mb-8 flex flex-col gap-6">
+        <div>
+          <h3 className="mb-3 font-medium">Team Type</h3>
+          <RadioGroup
+            value={selectedTeam.id}
+            onValueChange={(value: typeof selectedTeam.id) => {
+              const config = TEAM_CONFIGS.find(({ id }) => id === value);
+              if (config) setSelectedTeam({ id: value, team: config.team });
+            }}
+            className="flex gap-4"
+          >
+            {TEAM_CONFIGS.map(({ id, label }) => (
+              <RadioOption key={id} id={id} label={label} value={id} />
+            ))}
+          </RadioGroup>
+        </div>
+
+        {showPermissionControls && (
+          <div>
+            <h3 className="mb-3 font-medium">Edit Permission</h3>
+            <RadioGroup
+              value={hasEditPermission}
+              onValueChange={setHasEditPermission}
+              className="flex gap-4"
+            >
+              <RadioOption
+                id="permission-true"
+                label="Has Permission"
+                value="true"
+              />
+              <RadioOption
+                id="permission-false"
+                label="No Permission"
+                value="false"
+              />
+            </RadioGroup>
+          </div>
+        )}
+
+        {showInviteControls && (
+          <div>
+            <h3 className="mb-3 font-medium">Invite Result</h3>
+            <RadioGroup
+              value={inviteResult}
+              onValueChange={(value: typeof inviteResult) => {
+                setInviteResult(value as keyof typeof INVITE_HANDLERS);
+              }}
+              className="flex gap-4"
+            >
+              <RadioOption
+                id="result-success"
+                label="All Success"
+                value="success"
+              />
+              <RadioOption
+                id="result-failure"
+                label="All Failure"
+                value="failure"
+              />
+              <RadioOption
+                id="result-mixed"
+                label="Mixed Results"
+                value="mixed"
+              />
+            </RadioGroup>
+          </div>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-10">
+        <InviteSection
+          team={selectedTeam.team}
+          userHasEditPermission={hasEditPermission === "true"}
+          inviteTeamMembers={INVITE_HANDLERS[inviteResult]}
+        />
+      </div>
+
+      <Toaster richColors />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
index 26321f74543..2b1e3c4cae6 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
@@ -1,10 +1,17 @@
 "use client";
-
 import type { Team } from "@/api/team";
 import type { TeamAccountRole } from "@/api/team-members";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -12,26 +19,76 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import { ExternalLinkIcon, LinkIcon, UserPlus } from "lucide-react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { ExternalLinkIcon, PlusIcon, Trash2Icon, UserPlus } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { getValidTeamPlan } from "../../../../../components/TeamHeader/getValidTeamPlan";
 
+const inviteFormSchema = z.object({
+  invites: z
+    .array(
+      z.object({
+        email: z.string().email("Invalid email address"),
+        role: z.enum(["OWNER", "MEMBER"] as const),
+      }),
+    )
+    .min(1, "No invites added"),
+});
+
+type InviteFormValues = z.infer<typeof inviteFormSchema>;
+
 export function InviteSection(props: {
   team: Team;
   userHasEditPermission: boolean;
+  inviteTeamMembers: (
+    params: Array<{
+      email: string;
+      role: TeamAccountRole;
+    }>,
+  ) => Promise<{
+    results: Array<"fulfilled" | "rejected">;
+  }>;
 }) {
   const teamPlan = getValidTeamPlan(props.team);
   let bottomSection: React.ReactNode = null;
-  const inviteEnabled = false; // teamPlan !== "free" && props.userHasEditPermission;
+  const maxAllowedInvitesAtOnce = 10;
+  const inviteEnabled =
+    (teamPlan === "starter" || teamPlan === "growth") &&
+    props.userHasEditPermission;
+
+  const form = useForm<InviteFormValues>({
+    resolver: zodResolver(inviteFormSchema),
+    defaultValues: {
+      invites: [
+        {
+          email: "",
+          role: "MEMBER",
+        },
+      ],
+    },
+  });
+
+  const sendInvites = useMutation({
+    mutationFn: async (data: InviteFormValues) => {
+      const res = await props.inviteTeamMembers(data.invites);
+
+      return {
+        inviteStatuses: res.results,
+      };
+    },
+  });
 
   if (teamPlan === "free") {
     bottomSection = (
       <div className="lg:px6 flex items-center justify-between gap-4 border-border border-t px-4 py-4">
         <p className="text-muted-foreground text-sm">
-          This feature is not available on the Free Plan.{" "}
+          This feature is not available on the {teamPlan} plan.{" "}
           <Link
             href="https://thirdweb.com/pricing"
             target="_blank"
@@ -61,108 +118,242 @@ export function InviteSection(props: {
     );
   } else {
     bottomSection = (
-      <div className="flex items-center border-border border-t px-4 py-4 lg:justify-end lg:px-6">
+      <div className="flex items-center border-border border-t px-4 py-4 lg:justify-between lg:px-6">
+        {teamPlan === "pro" && (
+          <p className="text-muted-foreground text-sm">
+            Team invites are not enabled on your plan.{" "}
+            <Link
+              href="https://meetings.hubspot.com/sales-thirdweb/thirdweb-pro"
+              target="_blank"
+              className="text-link-foreground hover:text-foreground"
+            >
+              Reach out to sales <ExternalLinkIcon className="inline size-3" />
+            </Link>
+          </p>
+        )}
+
+        {(teamPlan === "starter" || teamPlan === "growth") && (
+          <p className="text-muted-foreground text-sm">
+            Team members are billed according to your plan.{" "}
+            <Link
+              href="https://thirdweb.com/pricing"
+              target="_blank"
+              className="text-link-foreground hover:text-foreground"
+            >
+              View pricing <ExternalLinkIcon className="inline size-3" />
+            </Link>
+          </p>
+        )}
+
         <Button
           variant="outline"
           size="sm"
           className="gap-2 max-sm:w-full"
-          disabled
+          type="submit"
+          disabled={sendInvites.isPending}
         >
-          <UserPlus className="size-3" />
-          Invite
+          {sendInvites.isPending ? (
+            <Spinner className="size-4" />
+          ) : (
+            <UserPlus className="size-4" />
+          )}
+          {form.watch("invites").length > 1 ? "Send Invites" : "Send Invite"}
         </Button>
       </div>
     );
   }
 
+  async function onSubmit(data: InviteFormValues) {
+    if (!inviteEnabled) return;
+    sendInvites.mutate(data, {
+      onSuccess(data) {
+        const inviteStatuses = data.inviteStatuses;
+
+        const failedInvites = inviteStatuses.filter((r) => r === "rejected");
+        const inviteOrInvites =
+          data.inviteStatuses.length > 1 ? "invites" : "invite";
+
+        if (failedInvites.length > 0) {
+          // all invites failed
+          if (failedInvites.length === data.inviteStatuses.length) {
+            toast.error(`Failed to send ${inviteOrInvites}`);
+          }
+          // some invites failed
+          else {
+            toast.error(
+              `Failed to send ${failedInvites.length} of ${data.inviteStatuses.length} ${inviteOrInvites}`,
+            );
+          }
+        }
+
+        // all invites succeeded
+        else {
+          toast.success(
+            `Successfully sent ${data.inviteStatuses.length === 1 ? "" : data.inviteStatuses.length} ${inviteOrInvites}`,
+          );
+        }
+      },
+    });
+  }
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    // when form updates - reset mutation result
+    const subscription = form.watch(() => {
+      sendInvites.reset();
+    });
+
+    return () => subscription.unsubscribe();
+  }, [form.watch, sendInvites.reset]);
+
   return (
-    <section>
-      <h2 className="mb-3 font-semibold text-2xl tracking-tight">Invite</h2>
-
-      {/* Card */}
-      <div className="rounded-lg border border-border bg-card">
-        {/* Invite via Link */}
-        <div
-          className={cn(
-            "px-4 py-4 lg:px-6",
-            !inviteEnabled && "cursor-not-allowed",
-          )}
-        >
-          <div className="flex flex-col justify-between gap-3 lg:flex-row lg:items-center">
-            <p className="text-foreground text-sm">
-              Invite new members via email or link
-            </p>
-
-            <Button
-              size="sm"
-              variant="outline"
-              className="gap-2 max-sm:bg-card"
-              disabled={!inviteEnabled}
-            >
-              <LinkIcon className="size-3" />
-              Copy Link
-            </Button>
-          </div>
-        </div>
-
-        <div className="mt-2 px-4 lg:my-0 lg:px-6">
-          <Separator />
-        </div>
-
-        {/* Invite via Email Send */}
-        <div className="px-4 py-6 lg:px-6">
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div>
-              <Label
-                htmlFor="email"
-                className={cn(
-                  "mb-1 block text-sm",
-                  !inviteEnabled && "text-muted-foreground",
-                )}
-              >
-                Email
-              </Label>
-              <Input
-                type="email"
-                id="email"
-                placeholder="user@example.com"
-                disabled={!inviteEnabled}
-                className="disabled:bg-muted"
-              />
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <section>
+          <div className="rounded-lg border border-border bg-card">
+            <div className="border-b px-4 py-4 lg:px-6">
+              <h2 className="font-semibold text-lg tracking-tight">Invite</h2>
+
+              <p className="text-muted-foreground text-sm">
+                Invite new members to your team by email
+              </p>
             </div>
 
-            <div>
-              <Label
-                htmlFor="role"
-                className={cn(
-                  "mb-1 block text-sm",
-                  !inviteEnabled && "text-muted-foreground",
-                )}
+            <div className="px-4 py-6 lg:px-6">
+              <div className="flex flex-col gap-5">
+                {form.watch("invites").map((_, index) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  <div key={index} className="flex items-start gap-4">
+                    <div className="grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
+                      <FormField
+                        control={form.control}
+                        name={`invites.${index}.email`}
+                        render={({ field }) => (
+                          <FormItem className="relative">
+                            <FormLabel
+                              className={cn(
+                                !inviteEnabled && "text-muted-foreground",
+                              )}
+                            >
+                              Email
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...field}
+                                type="email"
+                                placeholder="user@example.com"
+                                disabled={!inviteEnabled}
+                                className="disabled:bg-muted"
+                              />
+                            </FormControl>
+                            {sendInvites.data && (
+                              <div
+                                className={cn(
+                                  "mt-1 text-sm leading-none",
+                                  sendInvites.data.inviteStatuses[index] ===
+                                    "rejected" && "text-destructive-text",
+                                  sendInvites.data.inviteStatuses[index] ===
+                                    "fulfilled" && "text-success-text",
+                                )}
+                              >
+                                {sendInvites.data.inviteStatuses[index] ===
+                                "rejected"
+                                  ? "Failed to send invite"
+                                  : "Invite sent"}
+                              </div>
+                            )}
+
+                            {!sendInvites.data && <FormMessage />}
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name={`invites.${index}.role`}
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel
+                              className={cn(
+                                !inviteEnabled && "text-muted-foreground",
+                              )}
+                            >
+                              Role
+                            </FormLabel>
+                            <FormControl>
+                              <RoleSelector
+                                disabled={!inviteEnabled}
+                                value={field.value}
+                                onChange={field.onChange}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+
+                    {form.watch("invites").length > 1 && (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="mt-8 bg-background text-destructive-text disabled:cursor-not-allowed disabled:opacity-100"
+                        onClick={() => {
+                          const currentInvites = form.getValues("invites");
+                          form.setValue(
+                            "invites",
+                            currentInvites.filter((_, i) => i !== index),
+                          );
+                        }}
+                      >
+                        <Trash2Icon className="size-4" />
+                      </Button>
+                    )}
+                  </div>
+                ))}
+              </div>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="mt-4 gap-2"
+                disabled={
+                  !inviteEnabled ||
+                  form.watch("invites").length >= maxAllowedInvitesAtOnce
+                }
+                onClick={() => {
+                  const currentInvites = form.watch("invites");
+                  form.setValue("invites", [
+                    ...currentInvites,
+                    { email: "", role: "MEMBER" },
+                  ]);
+                }}
               >
-                Role
-              </Label>
-              <RoleSelector disabled={!inviteEnabled} />
+                <PlusIcon className="size-4" />
+                Add Another
+              </Button>
             </div>
+            {bottomSection}
           </div>
-        </div>
-
-        {bottomSection}
-      </div>
-    </section>
+        </section>
+      </form>
+    </Form>
   );
 }
 
 function RoleSelector(props: {
   disabled?: boolean;
+  value: TeamAccountRole;
+  onChange: (v: TeamAccountRole) => void;
 }) {
   const roles: TeamAccountRole[] = ["OWNER", "MEMBER"];
-  const [role, setRole] = useState<TeamAccountRole>("MEMBER");
 
   return (
     <Select
-      value={role}
+      value={props.value}
       onValueChange={(v) => {
-        setRole(v as TeamAccountRole);
+        props.onChange(v as TeamAccountRole);
       }}
     >
       <SelectTrigger
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.stories.tsx
new file mode 100644
index 00000000000..b67b2510126
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.stories.tsx
@@ -0,0 +1,103 @@
+import type { TeamInvite } from "@/api/team-invites";
+import type { TeamAccountRole } from "@/api/team-members";
+import { Toaster } from "@/components/ui/sonner";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import type { Meta, StoryObj } from "@storybook/react";
+import { teamStub } from "../../../../../../../stories/stubs";
+import {
+  BadgeContainer,
+  mobileViewport,
+} from "../../../../../../../stories/utils";
+import { ManageInvitesSection } from "./ManageInvitesSection";
+
+const meta = {
+  title: "Team/Settings/Members/Invites",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+const freeTeam = teamStub("foo", "free");
+
+function createInviteStub(
+  email: string,
+  role: TeamAccountRole,
+  createdDays: number,
+  status: TeamInvite["status"],
+): TeamInvite {
+  const createdAt = new Date();
+  createdAt.setDate(createdAt.getDate() - createdDays);
+
+  const expiresAt = new Date();
+  expiresAt.setDate(expiresAt.getDate() + 10);
+
+  const invite: TeamInvite = {
+    id: `invite-id-${email}`,
+    email,
+    role,
+    createdAt: createdAt.toISOString(),
+    status,
+    teamId: "team-id-foo",
+    expiresAt: expiresAt.toISOString(),
+  };
+
+  return invite;
+}
+
+const invitesStub: TeamInvite[] = [
+  createInviteStub("firstUser@foo.com", "OWNER", 1, "pending"),
+  createInviteStub("thirdUser@foo.com", "MEMBER", 3, "expired"),
+  createInviteStub("secondUser@foo.com", "OWNER", 2, "pending"),
+];
+
+const deleteInviteStub = async (inviteId: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  console.log("deleted", inviteId);
+};
+
+function Story() {
+  return (
+    <div className="mx-auto w-full max-w-[1100px] px-4 py-6">
+      <div className="flex flex-col gap-10">
+        <BadgeContainer label="Has permission">
+          <ManageInvitesSection
+            team={freeTeam}
+            userHasEditPermission={true}
+            teamInvites={invitesStub}
+            client={getThirdwebClient()}
+            deleteInvite={deleteInviteStub}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="No permission">
+          <ManageInvitesSection
+            team={freeTeam}
+            userHasEditPermission={false}
+            teamInvites={invitesStub}
+            client={getThirdwebClient()}
+            deleteInvite={deleteInviteStub}
+          />
+        </BadgeContainer>
+      </div>
+
+      <Toaster richColors />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx
new file mode 100644
index 00000000000..1235109d4a7
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import type { Team } from "@/api/team";
+import type { TeamInvite } from "@/api/team-invites";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useMutation } from "@tanstack/react-query";
+import { formatDate } from "date-fns";
+import { EllipsisIcon, MailIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
+import {
+  FiltersSection,
+  type MemberSortId,
+  type RoleFilterValue,
+} from "./_common";
+
+export function ManageInvitesSection(props: {
+  team: Team;
+  userHasEditPermission: boolean;
+  teamInvites: TeamInvite[];
+  client: ThirdwebClient;
+  deleteInvite: (inviteId: string) => Promise<void>;
+}) {
+  let topSection: React.ReactNode = null;
+
+  const [deletedInviteIds, setDeletedInviteIds] = useState<string[]>([]);
+  const [role, setRole] = useState<RoleFilterValue>("ALL ROLES");
+  const [sortBy, setSortBy] = useState<MemberSortId>("date");
+
+  const invitesToShow = useMemo(() => {
+    let value = props.teamInvites;
+
+    value = value.filter((inv) => !deletedInviteIds.includes(inv.id));
+
+    if (role !== "ALL ROLES") {
+      value = value.filter((m) => m.role === role);
+    }
+
+    switch (sortBy) {
+      case "date":
+        value = value.sort(
+          (a, b) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+        );
+        break;
+      case "a-z":
+        value = value.sort((a, b) => a.email.localeCompare(b.email));
+        break;
+      case "z-a":
+        value = value.sort((a, b) => b.email.localeCompare(a.email));
+        break;
+    }
+
+    return value;
+  }, [role, props.teamInvites, sortBy, deletedInviteIds]);
+
+  if (!props.userHasEditPermission) {
+    topSection = (
+      <div className="border-border border-b p-4">
+        <p className="text-muted-foreground text-sm">
+          You don't have permission to manage invites
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <section>
+      <FiltersSection
+        // don't use invitesToShow here
+        disabled={props.teamInvites.length === 0}
+        role={role}
+        setRole={setRole}
+        setSortBy={setSortBy}
+        sortBy={sortBy}
+      />
+
+      <div className="h-3" />
+
+      {/* Card */}
+      <div className="rounded-lg border border-border bg-card">
+        {/* Top section */}
+        {topSection}
+
+        {invitesToShow.length > 0 && (
+          <ul>
+            {invitesToShow.map((invite) => {
+              return (
+                <li
+                  key={invite.id}
+                  className="border-border border-b last:border-b-0"
+                >
+                  <InviteRow
+                    invite={invite}
+                    client={props.client}
+                    userHasEditPermission={props.userHasEditPermission}
+                    deleteInvite={props.deleteInvite}
+                    onInviteDeleted={() => {
+                      setDeletedInviteIds([...deletedInviteIds, invite.id]);
+                    }}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        )}
+
+        {/* Empty state */}
+        {invitesToShow.length === 0 && (
+          <div className="flex justify-center px-4 py-20">
+            <p className="text-muted-foreground text-sm">No Invites</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function InviteRow(props: {
+  invite: TeamInvite;
+  userHasEditPermission: boolean;
+  client: ThirdwebClient;
+  deleteInvite: (inviteId: string) => Promise<void>;
+  onInviteDeleted: () => void;
+}) {
+  return (
+    <div className="relative flex flex-col justify-between gap-3 px-4 py-4 lg:flex-row lg:items-center">
+      <div className="flex items-center gap-3 lg:gap-4">
+        {/* Mail Icon */}
+        <div className="hidden size-6 items-center justify-center rounded-full border bg-background lg:flex lg:size-9">
+          <MailIcon className="size-3 text-muted-foreground lg:size-4" />
+        </div>
+
+        {/* Email + Timestamps */}
+        <div>
+          <p className="mb-2 font-semibold text-sm lg:mb-1">
+            {props.invite.email}
+          </p>
+          <div className="flex flex-col gap-1 text-muted-foreground text-xs lg:flex-row lg:items-center lg:gap-2">
+            <span>
+              Invited on {formatDate(props.invite.createdAt, "MMM d, yyyy")}
+            </span>
+            <div className="hidden size-1 rounded-full bg-muted-foreground/50 lg:block" />
+            <span>
+              Invitation expires on{" "}
+              {formatDate(props.invite.expiresAt, "MMM d, yyyy")}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between gap-4 lg:justify-start lg:gap-6">
+        {/* Role */}
+        <p className="text-muted-foreground text-xs capitalize lg:text-sm">
+          {props.invite.role.toLowerCase()}
+        </p>
+
+        {/* Status */}
+        <Badge
+          className="absolute top-4 right-4 capitalize lg:static lg:px-3 lg:py-1.5"
+          variant={
+            props.invite.status === "pending"
+              ? "outline"
+              : props.invite.status === "accepted"
+                ? "success"
+                : "destructive"
+          }
+        >
+          {props.invite.status}
+        </Badge>
+
+        {/* Options */}
+        {props.userHasEditPermission && (
+          <ManageInviteButton
+            invite={props.invite}
+            userHasEditPermission={props.userHasEditPermission}
+            deleteInvite={props.deleteInvite}
+            onInviteDeleted={props.onInviteDeleted}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ManageInviteButton(props: {
+  invite: TeamInvite;
+  userHasEditPermission: boolean;
+  deleteInvite: (inviteId: string) => Promise<void>;
+  onInviteDeleted: () => void;
+}) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  const deleteMutation = useMutation({
+    mutationFn: () => props.deleteInvite(props.invite.id),
+  });
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="!h-auto !w-auto p-1.5"
+            disabled={!props.userHasEditPermission}
+          >
+            <EllipsisIcon className="size-4 text-muted-foreground" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40">
+          <DropdownMenuItem
+            className="text-destructive focus:text-destructive"
+            onClick={() => setShowDeleteDialog(true)}
+          >
+            Delete Invite
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent className="overflow-hidden p-0">
+          <DialogHeader className="p-6">
+            <DialogTitle className="text-xl">Delete Invite</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete this invite?
+              <span className="mt-1 block text-muted-foreground">
+                The invite link sent to {props.invite.email} will no longer work
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end gap-3 border-t bg-card p-6">
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteDialog(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              className="gap-2 bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={deleteMutation.isPending}
+              onClick={() => {
+                const promise = deleteMutation.mutateAsync();
+                toast.promise(promise, {
+                  success: "Invite deleted successfully",
+                  error: "Failed to delete invite",
+                });
+                promise.then(() => {
+                  setShowDeleteDialog(false);
+                  props.onInviteDeleted();
+                });
+              }}
+            >
+              {deleteMutation.isPending && <Spinner className="size-4" />}
+              Delete Invite
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
index 118439fbf47..30c0d4dd3fe 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
@@ -2,19 +2,28 @@
 
 import type { Team } from "@/api/team";
 import type { TeamAccountRole, TeamMember } from "@/api/team-members";
+import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { EllipsisIcon, SearchIcon } from "lucide-react";
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useMutation } from "@tanstack/react-query";
+import { EllipsisIcon } from "lucide-react";
 import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
+import { FiltersSection, type MemberSortId } from "./_common";
 
 type RoleFilterValue = "ALL ROLES" | TeamAccountRole;
 
@@ -22,14 +31,20 @@ export function ManageMembersSection(props: {
   team: Team;
   userHasEditPermission: boolean;
   members: TeamMember[];
+  client: ThirdwebClient;
+  deleteMember: (memberId: string) => Promise<void>;
 }) {
   let topSection: React.ReactNode = null;
 
+  const [deletedMembersIds, setDeletedMembersIds] = useState<string[]>([]);
   const [role, setRole] = useState<RoleFilterValue>("ALL ROLES");
   const [sortBy, setSortBy] = useState<MemberSortId>("date");
 
   const membersToShow = useMemo(() => {
     let value = props.members;
+
+    value = value.filter((m) => !deletedMembersIds.includes(m.accountId));
+
     if (role !== "ALL ROLES") {
       value = value.filter((m) => m.role === role);
     }
@@ -37,7 +52,8 @@ export function ManageMembersSection(props: {
     switch (sortBy) {
       case "date":
         value = value.sort(
-          (a, b) => a.createdAt.getTime() - b.createdAt.getTime(),
+          (a, b) =>
+            new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
         );
         break;
       case "a-z":
@@ -53,7 +69,7 @@ export function ManageMembersSection(props: {
     }
 
     return value;
-  }, [role, props.members, sortBy]);
+  }, [role, props.members, sortBy, deletedMembersIds]);
 
   if (!props.userHasEditPermission) {
     topSection = (
@@ -63,43 +79,10 @@ export function ManageMembersSection(props: {
         </p>
       </div>
     );
-  } else {
-    topSection = (
-      <div className="flex items-center justify-between border-border border-b p-4">
-        <div className="flex items-center gap-3 lg:gap-4">
-          <Checkbox
-            id="select-all"
-            className="border-muted-foreground data-[state=checked]:border-inverted"
-            disabled={
-              !props.userHasEditPermission || membersToShow.length === 0
-            }
-          />
-          <Label
-            htmlFor="select-all"
-            className="cursor-pointer text-muted-foreground"
-          >
-            Select All ({membersToShow.length})
-          </Label>
-        </div>
-
-        <Button
-          size="icon"
-          variant="ghost"
-          className="!h-auto !w-auto p-1.5"
-          disabled={!props.userHasEditPermission || membersToShow.length === 0}
-        >
-          <EllipsisIcon className="size-4 text-muted-foreground" />
-        </Button>
-      </div>
-    );
   }
 
   return (
     <section>
-      <h2 className="font-semibold text-2xl tracking-tight">Team Members</h2>
-
-      <div className="h-3" />
-
       <FiltersSection
         // don't use membersToShow here
         disabled={props.members.length === 0}
@@ -109,7 +92,7 @@ export function ManageMembersSection(props: {
         sortBy={sortBy}
       />
 
-      <div className="h-4" />
+      <div className="h-3" />
 
       {/* Card */}
       <div className="rounded-lg border border-border bg-card">
@@ -127,6 +110,14 @@ export function ManageMembersSection(props: {
                   <MemberRow
                     member={member}
                     userHasEditPermission={props.userHasEditPermission}
+                    client={props.client}
+                    deleteMember={props.deleteMember}
+                    onMemberDeleted={() => {
+                      setDeletedMembersIds([
+                        ...deletedMembersIds,
+                        member.accountId,
+                      ]);
+                    }}
                   />
                 </li>
               );
@@ -148,27 +139,30 @@ export function ManageMembersSection(props: {
 function MemberRow(props: {
   member: TeamMember;
   userHasEditPermission: boolean;
+  client: ThirdwebClient;
+  deleteMember: (memberId: string) => Promise<void>;
+  onMemberDeleted: () => void;
 }) {
   return (
-    <div className="flex items-center justify-between px-4 py-4">
+    <div className="flex items-center justify-between gap-3 px-4 py-4">
       <div className="flex items-center gap-3 lg:gap-4">
-        {/* Checkbox */}
-        <Checkbox
-          id="select-all"
-          className="border-muted-foreground data-[state=checked]:border-inverted"
-          disabled={!props.userHasEditPermission}
+        <GradientAvatar
+          className="size-6 lg:size-9"
+          src={props.member.account.image || ""}
+          id={props.member.account.creatorWalletAddress}
+          client={props.client}
         />
 
-        {/* PFP */}
-        <div className="size-8 rounded-full border border-border bg-muted lg:size-9" />
-
-        <div>
-          <p className="mb-0.5 font-semibold text-sm">
-            {props.member.account.name}
-          </p>
-          <p className="text-muted-foreground text-sm opacity-70">
-            {props.member.account.email}
+        <div className="flex flex-col gap-0.5">
+          <p className="font-semibold text-sm">
+            {props.member.account.name || props.member.account.email}
           </p>
+
+          {props.member.account.name && (
+            <p className="text-muted-foreground text-xs lg:text-sm">
+              {props.member.account.email}
+            </p>
+          )}
         </div>
       </div>
 
@@ -177,119 +171,101 @@ function MemberRow(props: {
           {props.member.role.toLowerCase()}
         </p>
 
-        <Button
-          size="icon"
-          variant="ghost"
-          className="!h-auto !w-auto p-1.5"
-          disabled={!props.userHasEditPermission}
-        >
-          <EllipsisIcon className="size-4 text-muted-foreground" />
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function FiltersSection(props: {
-  disabled: boolean;
-  role: RoleFilterValue;
-  setRole: (role: RoleFilterValue) => void;
-  setSortBy: (sortBy: MemberSortId) => void;
-  sortBy: MemberSortId;
-}) {
-  const { role, setRole, setSortBy, sortBy } = props;
-  return (
-    <div className="flex flex-col gap-4 lg:flex-row lg:items-center">
-      {/* Search  */}
-      <div className="relative grow">
-        <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 transform text-muted-foreground" />
-        <Input
-          placeholder="Search Team members"
-          className="bg-card pl-9"
-          disabled={props.disabled}
-        />
-      </div>
-
-      <div className="grid grid-cols-2 items-center gap-3 lg:flex">
-        <RoleSelector disabled={props.disabled} role={role} setRole={setRole} />
-        <SortMembersBy
-          disabled={props.disabled}
-          setSortBy={setSortBy}
-          sortBy={sortBy}
-        />
+        {props.userHasEditPermission && (
+          <ManageMemberButton
+            member={props.member}
+            userHasEditPermission={props.userHasEditPermission}
+            deleteMember={props.deleteMember}
+            onMemberDeleted={props.onMemberDeleted}
+          />
+        )}
       </div>
     </div>
   );
 }
 
-type MemberSortId = "date" | "a-z" | "z-a";
-
-function SortMembersBy(props: {
-  disabled?: boolean;
-  setSortBy: (sortBy: MemberSortId) => void;
-  sortBy: MemberSortId;
+function ManageMemberButton(props: {
+  member: TeamMember;
+  userHasEditPermission: boolean;
+  deleteMember: (memberId: string) => Promise<void>;
+  onMemberDeleted: () => void;
 }) {
-  const { sortBy, setSortBy } = props;
-  const valueToLabel: Record<MemberSortId, string> = {
-    date: "Date",
-    "a-z": "Name (A-Z)",
-    "z-a": "Name (Z-A)",
-  };
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
-  const sortByIds: MemberSortId[] = ["date", "a-z", "z-a"];
+  const deleteMutation = useMutation({
+    mutationFn: () => props.deleteMember(props.member.accountId),
+  });
 
   return (
-    <Select
-      value={sortBy}
-      onValueChange={(v) => {
-        setSortBy(v as "date" | "a-z" | "z-a");
-      }}
-    >
-      <SelectTrigger
-        className="bg-card capitalize disabled:bg-muted lg:w-[150px]"
-        disabled={props.disabled}
-      >
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent>
-        {sortByIds.map((id) => (
-          <SelectItem key={id} value={id} className="capitalize">
-            {valueToLabel[id]}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
-
-function RoleSelector(props: {
-  disabled?: boolean;
-  role: RoleFilterValue;
-  setRole: (role: RoleFilterValue) => void;
-}) {
-  const { role, setRole } = props;
-  const roles: RoleFilterValue[] = ["OWNER", "MEMBER", "ALL ROLES"];
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="!h-auto !w-auto p-1.5"
+            disabled={!props.userHasEditPermission}
+          >
+            <EllipsisIcon className="size-4 text-muted-foreground" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40">
+          <DropdownMenuItem
+            className="text-destructive focus:text-destructive"
+            onClick={() => setShowDeleteDialog(true)}
+          >
+            Remove Member
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
-  return (
-    <Select
-      value={role}
-      onValueChange={(v) => {
-        setRole(v as RoleFilterValue);
-      }}
-    >
-      <SelectTrigger
-        className="bg-card capitalize disabled:bg-muted lg:w-[150px]"
-        disabled={props.disabled}
-      >
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent>
-        {roles.map((role) => (
-          <SelectItem key={role} value={role} className="capitalize">
-            {role.toLowerCase()}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent className="overflow-hidden p-0">
+          <DialogHeader className="p-6">
+            <DialogTitle className="text-xl">Remove Member</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to remove{" "}
+              <span
+                className={
+                  props.member.account.name
+                    ? "text-foreground"
+                    : "text-muted-foreground"
+                }
+              >
+                {props.member.account.name || "this member"}
+              </span>{" "}
+              from the team?
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end gap-3 border-t bg-card p-6">
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteDialog(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              className="gap-2 bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={deleteMutation.isPending}
+              onClick={() => {
+                const promise = deleteMutation.mutateAsync();
+                toast.promise(promise, {
+                  success: "Member deleted successfully",
+                  error: "Failed to delete member",
+                });
+                promise.then(() => {
+                  setShowDeleteDialog(false);
+                  props.onMemberDeleted();
+                });
+              }}
+            >
+              {deleteMutation.isPending && <Spinner className="size-4" />}
+              Remove Member
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.stories.tsx
index c6b5c3ef156..196eec63d92 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.stories.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.stories.tsx
@@ -1,17 +1,16 @@
 import type { TeamAccountRole, TeamMember } from "@/api/team-members";
 import { Toaster } from "@/components/ui/sonner";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { teamStub } from "../../../../../../../stories/stubs";
 import {
   BadgeContainer,
   mobileViewport,
 } from "../../../../../../../stories/utils";
-import { InviteSection } from "./InviteSection";
 import { ManageMembersSection } from "./ManageMembersSection";
-import { TeamMembersSettingsPage } from "./TeamMembersSettingsPage";
 
 const meta = {
-  title: "Team/Settings/Members",
+  title: "Team/Settings/Members/Manage",
   component: Story,
   parameters: {
     nextjs: {
@@ -35,11 +34,10 @@ export const Mobile: Story = {
 };
 
 const freeTeam = teamStub("foo", "free");
-const proTeam = teamStub("bar", "pro");
-const growthTeam = teamStub("bazz", "growth");
 
 function createMemberStub(
   id: string,
+  name: string,
   role: TeamAccountRole,
   createdHours: number,
 ): TeamMember {
@@ -49,88 +47,74 @@ function createMemberStub(
   const member: TeamMember = {
     account: {
       email: `user-${id}@foo.com`,
-      name: id,
+      name: name,
+      creatorWalletAddress: "0x1234567890123456789012345678901234567890",
+      image: null,
     },
     accountId: `account-id-${id}`,
-    createdAt: date,
+    createdAt: date.toISOString(),
     deletedAt: null,
     role: role,
     teamId: "team-id-foo-bar",
-    updatedAt: new Date(),
+    updatedAt: date.toISOString(),
   };
 
   return member;
 }
 
 const membersStub: TeamMember[] = [
-  createMemberStub("first-member", "OWNER", 1),
-  createMemberStub("third-member", "MEMBER", 3),
-  createMemberStub("second-member", "OWNER", 2),
+  createMemberStub("first-member", "First Member", "OWNER", 1),
+  createMemberStub("third-member", "Third Member", "MEMBER", 3),
+  createMemberStub("second-member", "Second Member", "OWNER", 2),
 ];
 
+const membersStubNoName: TeamMember[] = [
+  createMemberStub("first-member", "", "OWNER", 1),
+  createMemberStub("third-member", "", "MEMBER", 3),
+  createMemberStub("second-member", "", "OWNER", 2),
+];
+
+const deleteMemberStub = async (memberId: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  console.log("deleted", memberId);
+};
+
 function Story() {
   return (
     <div className="mx-auto w-full max-w-[1100px] px-4 py-6">
-      <TeamMembersSettingsPage
-        team={proTeam}
-        userHasEditPermission={true}
-        members={membersStub}
-      />
-
-      <CompVariants />
+      <div className="flex flex-col gap-10">
+        <BadgeContainer label="Has permission">
+          <ManageMembersSection
+            team={freeTeam}
+            userHasEditPermission={true}
+            members={membersStub}
+            client={getThirdwebClient()}
+            deleteMember={deleteMemberStub}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="No permission">
+          <ManageMembersSection
+            team={freeTeam}
+            userHasEditPermission={false}
+            members={membersStub}
+            client={getThirdwebClient()}
+            deleteMember={deleteMemberStub}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="Has permission, Members dont have names">
+          <ManageMembersSection
+            team={freeTeam}
+            userHasEditPermission={true}
+            members={membersStubNoName}
+            client={getThirdwebClient()}
+            deleteMember={deleteMemberStub}
+          />
+        </BadgeContainer>
+      </div>
 
       <Toaster richColors />
     </div>
   );
 }
-
-function CompVariants() {
-  return (
-    <div className="mt-20 border-border border-t py-10">
-      <div className="">
-        <h2 className="py-4 font-semibold text-3xl"> Invite Variants </h2>
-
-        {/* Invite */}
-        <div className="flex flex-col gap-10">
-          <BadgeContainer label="Free Team">
-            <InviteSection team={freeTeam} userHasEditPermission={false} />
-          </BadgeContainer>
-
-          <BadgeContainer label="Pro Team, User does not have permission">
-            <InviteSection team={proTeam} userHasEditPermission={false} />
-          </BadgeContainer>
-
-          <BadgeContainer label="Pro, User has permission">
-            <InviteSection team={proTeam} userHasEditPermission={true} />
-          </BadgeContainer>
-
-          <BadgeContainer label="Growth, User has permission">
-            <InviteSection team={growthTeam} userHasEditPermission={true} />
-          </BadgeContainer>
-        </div>
-
-        <div className="my-10" />
-
-        <h2 className="py-4 font-semibold text-3xl">Team Members Variants</h2>
-
-        <div className="flex flex-col gap-10">
-          <BadgeContainer label="Has permission">
-            <ManageMembersSection
-              team={freeTeam}
-              userHasEditPermission={true}
-              members={membersStub}
-            />
-          </BadgeContainer>
-
-          <BadgeContainer label="No permission">
-            <ManageMembersSection
-              team={freeTeam}
-              userHasEditPermission={false}
-              members={membersStub}
-            />
-          </BadgeContainer>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
index 03690e02885..f04f8444f66 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
@@ -1,38 +1,121 @@
+"use client";
+
+import { apiServerProxy } from "@/actions/proxies";
+import { sendTeamInvites } from "@/actions/sendTeamInvite";
 import type { Team } from "@/api/team";
+import type { TeamInvite } from "@/api/team-invites";
 import type { TeamMember } from "@/api/team-members";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { AlertCircleIcon } from "lucide-react";
+import { TabButtons } from "@/components/ui/tabs";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
 import { InviteSection } from "./InviteSection";
+import { ManageInvitesSection } from "./ManageInvitesSection";
 import { ManageMembersSection } from "./ManageMembersSection";
 
 export function TeamMembersSettingsPage(props: {
   team: Team;
   userHasEditPermission: boolean;
   members: TeamMember[];
+  client: ThirdwebClient;
+  teamInvites: TeamInvite[];
 }) {
+  const [manageTab, setManageTab] = useState<"members" | "invites">("members");
+  const router = useDashboardRouter();
+
   return (
     <div>
-      <Alert variant="info">
-        <AlertCircleIcon className="size-5 text-red-400" />
-        <AlertTitle>
-          Inviting and Managing Team Members is not available yet
-        </AlertTitle>
-        <AlertDescription>
-          This feature will be available in Q1 2025
-        </AlertDescription>
-      </Alert>
-      <div className="h-10" />
+      <h2 className="font-semibold text-2xl tracking-tight">Members</h2>
+      <p className="text-muted-foreground text-sm">
+        Manage team members and invitations
+      </p>
+
+      <div className="h-5" />
 
       <InviteSection
         team={props.team}
         userHasEditPermission={props.userHasEditPermission}
+        inviteTeamMembers={async (params) => {
+          const res = await sendTeamInvites({
+            teamId: props.team.id,
+            invites: params,
+          });
+
+          if (!res.ok) {
+            throw new Error(res.errorMessage);
+          }
+
+          router.refresh();
+
+          return {
+            results: res.results,
+          };
+        }}
       />
+
       <div className="h-10" />
-      <ManageMembersSection
-        team={props.team}
-        userHasEditPermission={props.userHasEditPermission}
-        members={props.members}
+
+      <TabButtons
+        tabClassName="!text-sm"
+        tabs={[
+          {
+            isActive: manageTab === "members",
+            name: "Team Members",
+            onClick: () => setManageTab("members"),
+            isEnabled: true,
+          },
+          {
+            isActive: manageTab === "invites",
+            name: "Pending Invites",
+            onClick: () => setManageTab("invites"),
+            isEnabled: true,
+          },
+        ]}
       />
+
+      <div className="h-3" />
+
+      {manageTab === "members" && (
+        <ManageMembersSection
+          team={props.team}
+          userHasEditPermission={props.userHasEditPermission}
+          members={props.members}
+          client={props.client}
+          deleteMember={async (memberAccountId) => {
+            const res = await apiServerProxy({
+              pathname: `/v1/teams/${props.team.id}/members/${memberAccountId}`,
+              method: "DELETE",
+            });
+
+            router.refresh();
+
+            if (!res.ok) {
+              throw new Error(res.error);
+            }
+          }}
+        />
+      )}
+
+      {manageTab === "invites" && (
+        <ManageInvitesSection
+          team={props.team}
+          userHasEditPermission={props.userHasEditPermission}
+          client={props.client}
+          deleteInvite={async (inviteId) => {
+            const res = await apiServerProxy({
+              pathname: `/v1/teams/${props.team.id}/invites/${inviteId}`,
+              method: "DELETE",
+            });
+
+            router.refresh();
+
+            if (!res.ok) {
+              throw new Error(res.error);
+            }
+          }}
+          teamInvites={props.teamInvites}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/_common.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/_common.tsx
new file mode 100644
index 00000000000..87ff5be7753
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/_common.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import type { TeamAccountRole } from "@/api/team-members";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { SearchIcon } from "lucide-react";
+
+export type RoleFilterValue = "ALL ROLES" | TeamAccountRole;
+export type MemberSortId = "date" | "a-z" | "z-a";
+
+export function FiltersSection(props: {
+  disabled: boolean;
+  role: RoleFilterValue;
+  setRole: (role: RoleFilterValue) => void;
+  setSortBy: (sortBy: MemberSortId) => void;
+  sortBy: MemberSortId;
+}) {
+  const { role, setRole, setSortBy, sortBy } = props;
+  return (
+    <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+      {/* Search  */}
+      <div className="relative grow">
+        <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 transform text-muted-foreground" />
+        <Input
+          placeholder="Search Team members"
+          className="bg-card pl-9"
+          disabled={props.disabled}
+        />
+      </div>
+
+      <div className="grid grid-cols-2 items-center gap-3 lg:flex">
+        <RoleSelector disabled={props.disabled} role={role} setRole={setRole} />
+        <SortMembersBy
+          disabled={props.disabled}
+          setSortBy={setSortBy}
+          sortBy={sortBy}
+        />
+      </div>
+    </div>
+  );
+}
+
+function SortMembersBy(props: {
+  disabled?: boolean;
+  setSortBy: (sortBy: MemberSortId) => void;
+  sortBy: MemberSortId;
+}) {
+  const { sortBy, setSortBy } = props;
+  const valueToLabel: Record<MemberSortId, string> = {
+    date: "Date",
+    "a-z": "Name (A-Z)",
+    "z-a": "Name (Z-A)",
+  };
+
+  const sortByIds: MemberSortId[] = ["date", "a-z", "z-a"];
+
+  return (
+    <Select
+      value={sortBy}
+      onValueChange={(v) => {
+        setSortBy(v as "date" | "a-z" | "z-a");
+      }}
+    >
+      <SelectTrigger
+        className="bg-card capitalize disabled:bg-muted lg:w-[150px]"
+        disabled={props.disabled}
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {sortByIds.map((id) => (
+          <SelectItem key={id} value={id} className="capitalize">
+            {valueToLabel[id]}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function RoleSelector(props: {
+  disabled?: boolean;
+  role: RoleFilterValue;
+  setRole: (role: RoleFilterValue) => void;
+}) {
+  const { role, setRole } = props;
+  const roles: RoleFilterValue[] = ["OWNER", "MEMBER", "ALL ROLES"];
+
+  return (
+    <Select
+      value={role}
+      onValueChange={(v) => {
+        setRole(v as RoleFilterValue);
+      }}
+    >
+      <SelectTrigger
+        className="bg-card capitalize disabled:bg-muted lg:w-[150px]"
+        disabled={props.disabled}
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {roles.map((role) => (
+          <SelectItem key={role} value={role} className="capitalize">
+            {role.toLowerCase()}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/page.tsx
index 49ef0270da1..c394777aa40 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/page.tsx
@@ -1,7 +1,10 @@
 import { getTeamBySlug } from "@/api/team";
+import { getTeamInvites } from "@/api/team-invites";
 import { getMembers } from "@/api/team-members";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { notFound, redirect } from "next/navigation";
 import { getValidAccount } from "../../../../../../account/settings/getAccount";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
 import { TeamMembersSettingsPage } from "./TeamMembersSettingsPage";
 
 export default async function Page(props: {
@@ -10,13 +13,23 @@ export default async function Page(props: {
   }>;
 }) {
   const params = await props.params;
+  const pagePath = `/team/${params.team_slug}/~/settings/members`;
 
-  const [account, team, members] = await Promise.all([
-    getValidAccount(`/team/${params.team_slug}/~/settings/members`),
+  const [authToken, account, team, members, teamInvites] = await Promise.all([
+    getAuthToken(),
+    getValidAccount(pagePath),
     getTeamBySlug(params.team_slug),
     getMembers(params.team_slug),
+    getTeamInvites(params.team_slug, {
+      count: 100,
+      start: 0,
+    }),
   ]);
 
+  if (!authToken) {
+    redirect(pagePath);
+  }
+
   if (!team) {
     redirect("/team");
   }
@@ -33,11 +46,17 @@ export default async function Page(props: {
     notFound();
   }
 
+  const pendingOrExpiredInvites = teamInvites.filter(
+    (invite) => invite.status === "pending" || invite.status === "expired",
+  );
+
   return (
     <TeamMembersSettingsPage
       team={team}
       members={members}
       userHasEditPermission={accountMemberInfo.role === "OWNER"}
+      client={getThirdwebClient(authToken)}
+      teamInvites={pendingOrExpiredInvites}
     />
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/page.tsx
index 78663689bbc..f4a4a2f07d9 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/page.tsx
@@ -1,6 +1,7 @@
 import { getTeamBySlug } from "@/api/team";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { notFound } from "next/navigation";
+import { getValidAccount } from "../../../../../account/settings/getAccount";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";
 import { TeamGeneralSettingsPage } from "./general/TeamGeneralSettingsPage";
 
@@ -9,13 +10,23 @@ export default async function Page(props: {
     team_slug: string;
   }>;
 }) {
-  const team = await getTeamBySlug((await props.params).team_slug);
-  const token = await getAuthToken();
+  const params = await props.params;
+
+  const [team, account, token] = await Promise.all([
+    getTeamBySlug(params.team_slug),
+    getValidAccount(`/team/${params.team_slug}/settings`),
+    getAuthToken(),
+  ]);
+
   if (!team || !token) {
     notFound();
   }
 
   return (
-    <TeamGeneralSettingsPage team={team} client={getThirdwebClient(token)} />
+    <TeamGeneralSettingsPage
+      team={team}
+      client={getThirdwebClient(token)}
+      accountId={account.id}
+    />
   );
 }
diff --git a/apps/dashboard/src/components/notices/AnnouncementBanner.tsx b/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
index 8bedc8dbf56..aaf1e77ad9f 100644
--- a/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
+++ b/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
@@ -18,7 +18,8 @@ export function AnnouncementBanner(props: {
     layoutSegment === "/_not-found" ||
     hasDismissedAnnouncement ||
     layoutSegment === "login" ||
-    layoutSegment === "nebula-app"
+    layoutSegment === "nebula-app" ||
+    layoutSegment === "join"
   ) {
     return null;
   }