diff --git a/src/__test__/unit/formatting.test.ts b/src/__test__/unit/formatting.test.ts
index 70d7c77eb..60f092fdd 100644
--- a/src/__test__/unit/formatting.test.ts
+++ b/src/__test__/unit/formatting.test.ts
@@ -5,12 +5,14 @@ import {
   formatChartTimestampUTC,
   formatCompactDate,
   formatCPUCores,
+  formatDate,
   formatDecimal,
   formatDuration,
   formatMemory,
   formatNumber,
   formatTimeAxisLabel,
   parseUTCDateComponents,
+  pluralize,
 } from '@/lib/utils/formatting'
 
 describe('Date & Time Formatting', () => {
@@ -75,6 +77,22 @@ describe('Date & Time Formatting', () => {
     })
   })
 
+  describe('formatDate', () => {
+    it('formats a date with the requested structure', () => {
+      const date = new Date('2024-01-05T14:30:00Z')
+      expect(formatDate(date, 'MMM d')).toBe('Jan 5')
+    })
+
+    it('supports a format that includes the year', () => {
+      const date = new Date('2024-01-05T14:30:00Z')
+      expect(formatDate(date, 'MMM d, yyyy')).toBe('Jan 5, 2024')
+    })
+
+    it('returns null for invalid dates', () => {
+      expect(formatDate(new Date('not-a-date'), 'MMM d')).toBeNull()
+    })
+  })
+
   describe('parseUTCDateComponents', () => {
     it('parses UTC date into components', () => {
       const date = new Date('2024-01-05T14:30:45Z')
@@ -185,4 +203,23 @@ describe('Number Formatting', () => {
       expect(formatCPUCores(4)).toBe('4 cores')
     })
   })
+
+  describe('pluralize', () => {
+    it('returns the singular word for a count of one', () => {
+      expect(pluralize(1, 'member')).toBe('member')
+    })
+
+    it('adds es for words ending in s-like sounds', () => {
+      expect(pluralize(2, 'class')).toBe('classes')
+      expect(pluralize(2, 'match')).toBe('matches')
+    })
+
+    it('changes a trailing consonant y to ies', () => {
+      expect(pluralize(2, 'company')).toBe('companies')
+    })
+
+    it('supports an explicit plural override for irregular nouns', () => {
+      expect(pluralize(2, 'person', 'people')).toBe('people')
+    })
+  })
 })
diff --git a/src/__test__/unit/member-table-utils.test.ts b/src/__test__/unit/member-table-utils.test.ts
new file mode 100644
index 000000000..4d85cfe7b
--- /dev/null
+++ b/src/__test__/unit/member-table-utils.test.ts
@@ -0,0 +1,105 @@
+import { describe, expect, it } from 'vitest'
+import type { TeamMember } from '@/core/modules/teams/models'
+import {
+  getAddedByMember,
+  shouldShowRemoveMemberAction,
+  wasAddedBySystem,
+} from '@/features/dashboard/members/member-table.utils'
+
+const createMember = ({
+  addedBy = null,
+  email,
+  id,
+  isDefault = false,
+  name,
+  providers,
+}: {
+  addedBy?: string | null
+  email: string
+  id: string
+  isDefault?: boolean
+  name?: string
+  providers?: string[]
+}): TeamMember => ({
+  info: {
+    id,
+    email,
+    name,
+    providers,
+    createdAt: '2026-04-08T00:00:00.000Z',
+  },
+  relation: {
+    added_by: addedBy,
+    is_default: isDefault,
+  },
+})
+
+describe('member table utils', () => {
+  it('finds the inviter from the full member list', () => {
+    const owner = createMember({
+      email: 'owner@example.com',
+      id: 'owner-id',
+      isDefault: true,
+      name: 'Owner',
+    })
+    const invited = createMember({
+      addedBy: owner.info.id,
+      email: 'invited@example.com',
+      id: 'invited-id',
+      name: 'Invited',
+    })
+
+    expect(getAddedByMember([owner, invited], invited.relation.added_by)).toBe(
+      owner
+    )
+  })
+
+  it('hides removal for default members and the current user', () => {
+    const defaultMember = createMember({
+      email: 'default@example.com',
+      id: 'default-id',
+      isDefault: true,
+    })
+    const currentUser = createMember({
+      email: 'me@example.com',
+      id: 'me-id',
+    })
+    const invited = createMember({
+      email: 'invited@example.com',
+      id: 'invited-id',
+    })
+
+    expect(shouldShowRemoveMemberAction(defaultMember, 'someone-else')).toBe(
+      false
+    )
+    expect(shouldShowRemoveMemberAction(currentUser, currentUser.info.id)).toBe(
+      false
+    )
+    expect(shouldShowRemoveMemberAction(invited, currentUser.info.id)).toBe(
+      true
+    )
+  })
+
+  it('treats self-added or unresolved rows as system-added', () => {
+    const owner = createMember({
+      email: 'owner@example.com',
+      id: 'owner-id',
+      isDefault: true,
+    })
+    const selfAdded = createMember({
+      addedBy: owner.info.id,
+      email: 'owner@example.com',
+      id: 'owner-id',
+      isDefault: true,
+    })
+    const invited = createMember({
+      addedBy: owner.info.id,
+      email: 'invited@example.com',
+      id: 'invited-id',
+    })
+
+    expect(wasAddedBySystem(selfAdded, owner)).toBe(true)
+    expect(wasAddedBySystem(invited, owner)).toBe(false)
+    expect(wasAddedBySystem(invited, undefined)).toBe(true)
+  })
+})
diff --git a/src/app/dashboard/[teamSlug]/members/page.tsx b/src/app/dashboard/[teamSlug]/members/page.tsx
index 6ce32e938..1fbdd1bf9 100644
--- a/src/app/dashboard/[teamSlug]/members/page.tsx
+++ b/src/app/dashboard/[teamSlug]/members/page.tsx
@@ -1,5 +1,5 @@
+import { Page } from '@/features/dashboard/layouts/page'
 import { MemberCard } from '@/features/dashboard/members/member-card'
-import Frame from '@/ui/frame'
 
 interface MembersPageProps {
   params: Promise<{
@@ -9,15 +9,8 @@ interface MembersPageProps {
 
 export default async function MembersPage({ params }: MembersPageProps) {
   return (
-    <Frame
-      classNames={{
-        wrapper: 'w-full max-md:p-0',
-        frame: 'max-md:border-none max-md:p-0',
-      }}
-    >
-      <section className="col-span-full">
-        <MemberCard params={params} />
-      </section>
-    </Frame>
+    <Page>
+      <MemberCard params={params} />
+    </Page>
   )
 }
diff --git a/src/core/modules/teams/models.ts b/src/core/modules/teams/models.ts
index b77242521..9dd922c85 100644
--- a/src/core/modules/teams/models.ts
+++ b/src/core/modules/teams/models.ts
@@ -9,6 +9,7 @@ export type TeamMemberInfo = {
   name?: string
   avatar_url?: string
   providers?: string[]
+  createdAt: string | null
 }
 
 export type TeamMemberRelation = {
diff --git a/src/core/modules/teams/teams-repository.server.ts b/src/core/modules/teams/teams-repository.server.ts
index a3a5ef9df..219764395 100644
--- a/src/core/modules/teams/teams-repository.server.ts
+++ b/src/core/modules/teams/teams-repository.server.ts
@@ -87,6 +87,7 @@ export function createTeamsRepository(
               name: user?.user_metadata?.name,
               avatar_url: user?.user_metadata?.avatar_url,
               providers: extractSignInProviders(user),
+              createdAt: member.createdAt,
             },
             relation: {
               added_by: member.addedBy ?? null,
diff --git a/src/features/dashboard/billing/invoices.tsx b/src/features/dashboard/billing/invoices.tsx
index f603d5885..f561445ce 100644
--- a/src/features/dashboard/billing/invoices.tsx
+++ b/src/features/dashboard/billing/invoices.tsx
@@ -17,12 +17,12 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableEmptyState,
   TableHead,
   TableHeader,
   TableRow,
 } from '@/ui/primitives/table'
 import { useInvoices } from './hooks'
-import { TableEmptyRowBorder } from './table-empty-row-border'
 
 const COLUMN_WIDTHS = {
   date: 120,
@@ -48,34 +48,19 @@ interface InvoicesEmptyProps {
 
 function InvoicesEmpty({ error }: InvoicesEmptyProps) {
   return (
-    <div className="w-full gap-2 relative flex flex-col justify-center items-center">
-      {Array.from({ length: 3 }).map((_, index) => (
-        <div
-          key={index}
-          className="h-11 w-full border border-bg-highlight relative flex items-center gap-2 justify-center overflow-hidden"
-        >
-          <TableEmptyRowBorder className="absolute bottom-0 left-0 rotate-180 opacity-99" />
-          <TableEmptyRowBorder className="absolute bottom-0 right-0 opacity-99" />
-
-          {index === 1 && (
-            <>
-              <InvoiceIcon
-                className={cn('size-4', error && 'text-accent-error-highlight')}
-              />
-
-              <p
-                className={cn(
-                  'prose-body-highlight',
-                  error && 'text-accent-error-highlight'
-                )}
-              >
-                {error ? error : 'No invoices yet'}
-              </p>
-            </>
-          )}
-        </div>
-      ))}
-    </div>
+    <TableEmptyState colSpan={4}>
+      <InvoiceIcon
+        className={cn('size-4', error && 'text-accent-error-highlight')}
+      />
+      <p
+        className={cn(
+          'prose-body-highlight',
+          error && 'text-accent-error-highlight'
+        )}
+      >
+        {error ? error : 'No invoices yet'}
+      </p>
+    </TableEmptyState>
   )
 }
 
@@ -146,13 +131,7 @@ export default function BillingInvoicesTable() {
             </TableRow>
           )}
 
-          {showEmpty && (
-            <TableRow>
-              <TableCell colSpan={4} className="p-0">
-                <InvoicesEmpty error={error?.message} />
-              </TableCell>
-            </TableRow>
-          )}
+          {showEmpty && <InvoicesEmpty error={error?.message} />}
 
           {hasData &&
             invoices.map((invoice) => (
diff --git a/src/features/dashboard/layouts/page.tsx b/src/features/dashboard/layouts/page.tsx
new file mode 100644
index 000000000..ab28a6947
--- /dev/null
+++ b/src/features/dashboard/layouts/page.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+interface PageProps {
+  children: ReactNode
+  className?: string
+}
+
+export const Page = ({ children, className }: PageProps) => (
+  <div className={cn('mx-auto w-full max-w-[900px]', className)}>
+    {children}
+  </div>
+)
diff --git a/src/features/dashboard/members/add-member-dialog.tsx b/src/features/dashboard/members/add-member-dialog.tsx
new file mode 100644
index 000000000..61494b43a
--- /dev/null
+++ b/src/features/dashboard/members/add-member-dialog.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { Plus } from 'lucide-react'
+import { useState } from 'react'
+import { AddMemberForm } from '@/features/dashboard/members/add-member-form'
+import { Button } from '@/ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/ui/primitives/dialog'
+
+export const AddMemberDialog = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          className="normal-case font-sans"
+          size="md"
+          type="button"
+          variant="default"
+        >
+          <Plus aria-hidden className="size-4 shrink-0" />
+          Add new member
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="gap-2" hideClose>
+        <DialogHeader>
+          <DialogTitle>Add new member</DialogTitle>
+        </DialogHeader>
+        <AddMemberForm onSuccess={() => setOpen(false)} />
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/features/dashboard/members/add-member-form.tsx b/src/features/dashboard/members/add-member-form.tsx
index 68f7f9130..80d656cf2 100644
--- a/src/features/dashboard/members/add-member-form.tsx
+++ b/src/features/dashboard/members/add-member-form.tsx
@@ -20,6 +20,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@/ui/primitives/form'
+import { AddIcon } from '@/ui/primitives/icons'
 import { Input } from '@/ui/primitives/input'
 import { useDashboard } from '../context'
 
@@ -31,9 +32,10 @@ type AddMemberForm = z.infer<typeof addMemberSchema>
 
 interface AddMemberFormProps {
   className?: string
+  onSuccess?: () => void
 }
 
-export default function AddMemberForm({ className }: AddMemberFormProps) {
+export const AddMemberForm = ({ className, onSuccess }: AddMemberFormProps) => {
   'use no memo'
 
   const { team } = useDashboard()
@@ -41,6 +43,7 @@ export default function AddMemberForm({ className }: AddMemberFormProps) {
 
   const form = useForm<AddMemberForm>({
     resolver: zodResolver(addMemberSchema),
+    mode: 'onChange',
     defaultValues: {
       email: '',
     },
@@ -50,16 +53,15 @@ export default function AddMemberForm({ className }: AddMemberFormProps) {
     onSuccess: () => {
       toast(defaultSuccessToast('The member has been added to the team.'))
       form.reset()
+      onSuccess?.()
     },
     onError: ({ error }) => {
       toast(defaultErrorToast(error.serverError || 'An error occurred.'))
     },
   })
 
-  function onSubmit(data: AddMemberForm) {
-    if (!team) {
-      return
-    }
+  const onSubmit = (data: AddMemberForm) => {
+    if (!team) return
 
     execute({
       teamSlug: team.slug,
@@ -71,31 +73,37 @@ export default function AddMemberForm({ className }: AddMemberFormProps) {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className={cn('flex gap-2', className)}
+        className={cn('flex items-start gap-1 py-1', className)}
       >
         <FormField
           control={form.control}
           name="email"
           render={({ field }) => (
-            <FormItem className="relative flex-1">
-              <FormLabel className="">E-mail</FormLabel>
-              <div className="flex items-center gap-2">
-                <FormControl>
-                  <Input placeholder="member@acme.com" {...field} />
-                </FormControl>
-                <Button
-                  loading={isExecuting}
-                  type="submit"
-                  disabled={!form.formState.isValid}
-                  variant="outline"
-                >
-                  Add Member
-                </Button>
-              </div>
+            <FormItem className="flex-1">
+              <FormLabel className="sr-only">Email</FormLabel>
+              <FormControl>
+                <Input
+                  className="h-9 font-sans"
+                  aria-label="Email"
+                  placeholder="Enter email"
+                  {...field}
+                />
+              </FormControl>
               <FormMessage />
             </FormItem>
           )}
         />
+        <Button
+          className="normal-case font-sans"
+          loading={isExecuting}
+          type="submit"
+          disabled={!form.formState.isValid}
+          size="md"
+          variant="default"
+        >
+          <AddIcon aria-hidden className="size-4 shrink-0" />
+          Add
+        </Button>
       </form>
     </Form>
   )
diff --git a/src/features/dashboard/members/member-card.tsx b/src/features/dashboard/members/member-card.tsx
index 8df8f25be..8d5d97c4e 100644
--- a/src/features/dashboard/members/member-card.tsx
+++ b/src/features/dashboard/members/member-card.tsx
@@ -1,12 +1,9 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/ui/primitives/card'
-import AddMemberForm from './add-member-form'
-import MemberTable from './member-table'
+import { Suspense } from 'react'
+import { getTeamMembers } from '@/core/server/functions/team/get-team-members'
+import { ErrorIndicator } from '@/ui/error-indicator'
+import { Card, CardContent } from '@/ui/primitives/card'
+import { Loader } from '@/ui/primitives/loader_d'
+import MembersPageContent from './members-page-content'
 
 interface MemberCardProps {
   params: Promise<{
@@ -15,21 +12,40 @@ interface MemberCardProps {
   className?: string
 }
 
-export function MemberCard({ params, className }: MemberCardProps) {
-  return (
-    <Card className={className}>
-      <CardHeader>
-        <CardTitle>Members</CardTitle>
-        <CardDescription>Manage your team members.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-8">
-          <AddMemberForm className="w-full max-w-[24rem]" />
-          <div className="bg-card w-full overflow-x-auto">
-            <MemberTable params={params} />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
+export const MemberCard = ({ params, className }: MemberCardProps) => (
+  <Card className={className}>
+    <CardContent>
+      <Suspense fallback={<MembersPageContentLoading />}>
+        <MembersPageContentLoader params={params} />
+      </Suspense>
+    </CardContent>
+  </Card>
+)
+
+const MembersPageContentLoader = async ({ params }: MemberCardProps) => {
+  const { teamSlug } = await params
+
+  try {
+    const result = await getTeamMembers({ teamSlug })
+
+    if (!result?.data || result.serverError || result.validationErrors) {
+      throw new Error(result?.serverError || 'Unknown error')
+    }
+
+    return <MembersPageContent members={result.data} />
+  } catch (error) {
+    return (
+      <ErrorIndicator
+        className="bg-bg w-full max-w-full"
+        description="Could not load team members"
+        message={error instanceof Error ? error.message : 'Unknown error'}
+      />
+    )
+  }
 }
+
+const MembersPageContentLoading = () => (
+  <div className="flex items-center justify-center py-24">
+    <Loader />
+  </div>
+)
diff --git a/src/features/dashboard/members/member-table-body.tsx b/src/features/dashboard/members/member-table-body.tsx
deleted file mode 100644
index ab218c0ca..000000000
--- a/src/features/dashboard/members/member-table-body.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { getTeamMembers } from '@/core/server/functions/team/get-team-members'
-import { ErrorIndicator } from '@/ui/error-indicator'
-import { Alert, AlertDescription, AlertTitle } from '@/ui/primitives/alert'
-import { TableCell, TableRow } from '@/ui/primitives/table'
-import MemberTableRow from './member-table-row'
-
-interface TableBodyContentProps {
-  params: Promise<{
-    teamSlug: string
-  }>
-}
-
-export default async function MemberTableBody({
-  params,
-}: TableBodyContentProps) {
-  const { teamSlug } = await params
-
-  try {
-    const result = await getTeamMembers({ teamSlug })
-
-    if (!result?.data || result.serverError || result.validationErrors) {
-      throw new Error(result?.serverError || 'Unknown error')
-    }
-
-    const members = result.data
-
-    if (members.length === 0) {
-      return (
-        <TableRow>
-          <TableCell colSpan={6}>
-            <Alert className="text-left" variant="info">
-              <AlertTitle>No Members</AlertTitle>
-              <AlertDescription>No team members found.</AlertDescription>
-            </Alert>
-          </TableCell>
-        </TableRow>
-      )
-    }
-
-    return (
-      <>
-        {members.map((member, index) => (
-          <MemberTableRow
-            key={member.info.id}
-            member={member}
-            index={index}
-            addedByEmail={
-              members.find((m) => m.info.id === member.relation.added_by)?.info
-                .email
-            }
-          />
-        ))}
-      </>
-    )
-  } catch (error) {
-    return (
-      <TableRow>
-        <TableCell colSpan={6}>
-          <ErrorIndicator
-            description={'Could not load team members'}
-            message={error instanceof Error ? error.message : 'Unknown error'}
-            className="bg-bg mt-2 w-full max-w-full"
-          />
-        </TableCell>
-      </TableRow>
-    )
-  }
-}
diff --git a/src/features/dashboard/members/member-table-row.tsx b/src/features/dashboard/members/member-table-row.tsx
index afd83c8ee..341d68708 100644
--- a/src/features/dashboard/members/member-table-row.tsx
+++ b/src/features/dashboard/members/member-table-row.tsx
@@ -7,6 +7,7 @@ import type { IconType } from 'react-icons'
 import { FaGithub, FaGoogle } from 'react-icons/fa'
 import { FiMail } from 'react-icons/fi'
 import { PROTECTED_URLS } from '@/configs/urls'
+import { getTeamDisplayName } from '@/core/modules/teams/utils'
 import { removeTeamMemberAction } from '@/core/server/actions/team-actions'
 import type { TeamMember } from '@/core/server/functions/team/types'
 import {
@@ -14,17 +15,23 @@ import {
   defaultSuccessToast,
   useToast,
 } from '@/lib/hooks/use-toast'
-import { AlertDialog } from '@/ui/alert-dialog'
+import { formatDate } from '@/lib/utils/formatting'
+import { E2BLogo } from '@/ui/brand'
 import { Avatar, AvatarFallback, AvatarImage } from '@/ui/primitives/avatar'
 import { Badge } from '@/ui/primitives/badge'
 import { Button } from '@/ui/primitives/button'
+import { TrashIcon } from '@/ui/primitives/icons'
 import { TableCell, TableRow } from '@/ui/primitives/table'
 import { useDashboard } from '../context'
+import {
+  shouldShowRemoveMemberAction,
+  wasAddedBySystem,
+} from './member-table.utils'
+import { RemoveMemberDialog } from './remove-member-dialog'
 
 interface TableRowProps {
   member: TeamMember
-  addedByEmail?: string
-  index: number
+  addedByMember?: TeamMember
 }
 
 type MemberProvider = {
@@ -43,27 +50,19 @@ function normalizeProvider(provider: string): string {
 
 function toMemberProvider(provider: string): MemberProvider | null {
   const normalized = normalizeProvider(provider)
-  if (normalized === 'google') {
+  if (normalized === 'google')
     return { key: normalized, label: 'Google', Icon: FaGoogle }
-  }
-  if (normalized === 'github') {
+  if (normalized === 'github')
     return { key: normalized, label: 'GitHub', Icon: FaGithub }
-  }
-  if (normalized === 'email') {
+  if (normalized === 'email')
     return { key: normalized, label: 'Email', Icon: FiMail }
-  }
   return null
 }
 
-export default function MemberTableRow({
-  member,
-  addedByEmail,
-  index,
-}: TableRowProps) {
+export const MemberTableRow = ({ member, addedByMember }: TableRowProps) => {
   const { toast } = useToast()
-  const { team } = useDashboard()
   const router = useRouter()
-  const { user } = useDashboard()
+  const { team, user } = useDashboard()
   const [removeDialogOpen, setRemoveDialogOpen] = useState(false)
 
   const { execute: removeMember, isExecuting: isRemoving } = useAction(
@@ -88,11 +87,8 @@ export default function MemberTableRow({
     }
   )
 
-  const handleRemoveMember = async (userId: string) => {
-    removeMember({
-      teamSlug: team.slug,
-      userId,
-    })
+  const handleRemoveMember = (userId: string) => {
+    removeMember({ teamSlug: team.slug, userId })
   }
 
   const providers =
@@ -100,63 +96,192 @@ export default function MemberTableRow({
       ?.map(toMemberProvider)
       .filter((provider): provider is MemberProvider => provider !== null) ?? []
 
+  const isCurrentUser = member.info.id === user?.id
+  const showRemove = shouldShowRemoveMemberAction(member, user?.id)
+  const dateStr = member.info.createdAt
+    ? formatDate(new Date(member.info.createdAt), 'MMM d, yyyy')
+    : null
+  const addedBySystem = wasAddedBySystem(member, addedByMember)
+
   return (
-    <TableRow key={`${member.info.id}-${index}`}>
-      <TableCell>
-        <Avatar className="size-8">
-          <AvatarImage src={member.info?.avatar_url} />
-          <AvatarFallback>
-            {member.info?.email?.charAt(0).toUpperCase() || '?'}
-          </AvatarFallback>
-        </Avatar>
-      </TableCell>
-      <TableCell className="min-w-36">
-        {member.info.id === user?.id
-          ? 'You'
-          : (member.info.name ?? 'Anonymous')}
-      </TableCell>
-      <TableCell className="text-fg-tertiary">{member.info.email}</TableCell>
-      <TableCell>
-        {providers.length > 0 ? (
-          <div className="flex flex-wrap gap-1.5">
-            {providers.map(({ key, label, Icon }) => (
-              <Badge
-                key={key}
-                size="sm"
-                className="bg-bg-highlight text-fg-tertiary uppercase prose-label-numeric"
-              >
-                <Icon className="size-3.5 mr-0.5" />
-                {label}
-              </Badge>
-            ))}
-          </div>
-        ) : (
-          <span className="text-fg-muted">-</span>
-        )}
-      </TableCell>
-      <TableCell className="text-fg-secondary">
-        {member.relation.added_by === user?.id ? 'You' : (addedByEmail ?? '')}
-      </TableCell>
-      <TableCell className="text-end">
-        {!member.relation.is_default && user?.id !== member.info.id && (
-          <AlertDialog
-            title="Remove Member"
-            description="Are you sure you want to remove this member from the team?"
-            confirm="Remove"
-            onConfirm={() => handleRemoveMember(member.info.id)}
-            confirmProps={{
-              loading: isRemoving,
-            }}
-            trigger={
-              <Button variant="muted" size="iconSm">
-                <span className="text-xs">X</span>
-              </Button>
-            }
-            open={removeDialogOpen}
-            onOpenChange={setRemoveDialogOpen}
-          />
-        )}
-      </TableCell>
+    <TableRow className="h-11">
+      <NameCell
+        avatarUrl={member.info.avatar_url}
+        email={member.info.email}
+        isCurrentUser={isCurrentUser}
+        name={member.info.name}
+      />
+      <ProvidersCell providers={providers} />
+      <AddedCell
+        addedByMember={addedByMember}
+        addedBySystem={addedBySystem}
+        dateStr={dateStr}
+        isRemoving={isRemoving}
+        memberEmail={member.info.email}
+        memberName={member.info.name}
+        onRemove={() => handleRemoveMember(member.info.id)}
+        removeDialogOpen={removeDialogOpen}
+        setRemoveDialogOpen={setRemoveDialogOpen}
+        showRemove={showRemove}
+        teamName={getTeamDisplayName(team)}
+      />
     </TableRow>
   )
 }
+
+const NameCell = ({
+  avatarUrl,
+  email,
+  isCurrentUser,
+  name,
+}: {
+  avatarUrl?: string
+  email: string
+  isCurrentUser: boolean
+  name?: string
+}) => (
+  <TableCell className="max-w-0">
+    <div className="flex min-w-0 items-center gap-3">
+      <Avatar className="border-stroke size-8 shrink-0 border">
+        <AvatarImage referrerPolicy="no-referrer" src={avatarUrl} />
+        <AvatarFallback className="bg-bg text-xl font-bold uppercase">
+          {(name?.charAt(0) ?? email.charAt(0)).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-center gap-2">
+          <span
+            className="text-fg min-w-0 truncate text-sm font-medium"
+            title={name ?? email}
+          >
+            {name ?? email}
+          </span>
+          {isCurrentUser ? (
+            <Badge
+              className="shrink-0 uppercase"
+              size="sm"
+              typography="regular"
+              variant="default"
+            >
+              You
+            </Badge>
+          ) : null}
+        </div>
+        {name ? (
+          <span
+            className="text-fg-tertiary block truncate text-sm"
+            title={email}
+          >
+            {email}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  </TableCell>
+)
+
+const ProvidersCell = ({ providers }: { providers: MemberProvider[] }) => (
+  <TableCell>
+    {providers.length > 0 ? (
+      <>
+        <div className="flex flex-wrap gap-1 md:hidden">
+          {providers.map(({ key, label, Icon }) => (
+            <Badge
+              className="bg-bg-highlight text-fg-tertiary h-[18px] gap-0.5 uppercase prose-label-numeric"
+              key={key}
+              size="sm"
+            >
+              <Icon className="size-3 shrink-0" />
+              {label}
+            </Badge>
+          ))}
+        </div>
+        <div className="hidden flex-wrap gap-1 md:flex">
+          {providers.map(({ key, label, Icon }) => (
+            <Badge
+              className="bg-bg-highlight text-fg-tertiary h-[18px] gap-0.5 uppercase prose-label-numeric"
+              key={key}
+              size="sm"
+            >
+              <Icon className="size-3 shrink-0" />
+              {label}
+            </Badge>
+          ))}
+        </div>
+      </>
+    ) : (
+      <span className="text-fg-tertiary font-sans text-sm">--</span>
+    )}
+  </TableCell>
+)
+
+const AddedCell = ({
+  addedByMember,
+  addedBySystem,
+  dateStr,
+  isRemoving,
+  memberEmail,
+  memberName,
+  onRemove,
+  removeDialogOpen,
+  setRemoveDialogOpen,
+  showRemove,
+  teamName,
+}: {
+  addedByMember?: TeamMember
+  addedBySystem: boolean
+  dateStr: string | null
+  isRemoving: boolean
+  memberEmail: string
+  memberName?: string
+  onRemove: () => void
+  removeDialogOpen: boolean
+  setRemoveDialogOpen: (v: boolean) => void
+  showRemove: boolean
+  teamName?: string | null
+}) => (
+  <TableCell>
+    <div className="flex items-center gap-6">
+      <span className="text-fg-tertiary w-[92px] shrink-0 text-sm">
+        {dateStr ?? '—'}
+      </span>
+      {addedBySystem ? (
+        <div className="flex size-5 shrink-0 items-center justify-center">
+          <E2BLogo className="text-fg-tertiary size-5" />
+        </div>
+      ) : (
+        <Avatar className="border-stroke size-5 shrink-0 border">
+          <AvatarImage
+            referrerPolicy="no-referrer"
+            src={addedByMember?.info.avatar_url}
+          />
+          <AvatarFallback className="bg-bg text-[10px] font-bold uppercase">
+            {addedByMember?.info.email?.charAt(0).toUpperCase() ?? '?'}
+          </AvatarFallback>
+        </Avatar>
+      )}
+      {showRemove ? (
+        <RemoveMemberDialog
+          isRemoving={isRemoving}
+          memberEmail={memberEmail}
+          memberName={memberName}
+          onRemove={onRemove}
+          open={removeDialogOpen}
+          setOpen={setRemoveDialogOpen}
+          teamName={teamName}
+          trigger={
+            <Button
+              aria-label={`Remove ${memberName ?? memberEmail}`}
+              className="text-fg-tertiary hover:text-fg"
+              size="iconSm"
+              type="button"
+              variant="ghost"
+            >
+              <TrashIcon className="size-4" />
+            </Button>
+          }
+        />
+      ) : null}
+    </div>
+  </TableCell>
+)
diff --git a/src/features/dashboard/members/member-table.tsx b/src/features/dashboard/members/member-table.tsx
index 4b08a33cb..06d9bc32f 100644
--- a/src/features/dashboard/members/member-table.tsx
+++ b/src/features/dashboard/members/member-table.tsx
@@ -1,58 +1,74 @@
-import { type FC, Suspense } from 'react'
+'use client'
+
+import type { FC } from 'react'
+import type { TeamMember } from '@/core/modules/teams/models'
 import { cn } from '@/lib/utils'
-import { Alert, AlertDescription, AlertTitle } from '@/ui/primitives/alert'
-import { Loader } from '@/ui/primitives/loader_d'
 import {
   Table,
   TableBody,
-  TableCell,
+  TableEmptyState,
   TableHead,
   TableHeader,
   TableRow,
 } from '@/ui/primitives/table'
-import MemberTableBody from './member-table-body'
+import { getAddedByMember } from './member-table.utils'
+import { MemberTableRow } from './member-table-row'
 
 interface MemberTableProps {
-  params: Promise<{
-    teamSlug: string
-  }>
+  allMembers: TeamMember[]
+  members: TeamMember[]
+  totalMemberCount: number
   className?: string
 }
 
-const MemberTable: FC<MemberTableProps> = ({ params, className }) => {
-  return (
-    <Table className={cn('min-w-[960px]', className)}>
-      <TableHeader>
-        <TableRow>
-          <th className="w-[50px]"></th>
-          <TableHead className="w-[200px]">Name</TableHead>
-          <TableHead className="w-[250px]">E-Mail</TableHead>
-          <TableHead className="w-[200px]">Providers</TableHead>
-          <TableHead className="w-[200px]">Added By</TableHead>
-          <th className="w-[50px]"></th>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <Suspense
-          fallback={
-            <TableRow>
-              <TableCell colSpan={6} className="h-24 text-left">
-                <Alert className="w-full text-left" variant="info">
-                  <AlertTitle className="flex items-center gap-2">
-                    <Loader />
-                    Loading members...
-                  </AlertTitle>
-                  <AlertDescription>This may take a moment.</AlertDescription>
-                </Alert>
-              </TableCell>
-            </TableRow>
-          }
-        >
-          <MemberTableBody params={params} />
-        </Suspense>
-      </TableBody>
-    </Table>
-  )
-}
+const MemberTable: FC<MemberTableProps> = ({
+  allMembers,
+  members,
+  totalMemberCount,
+  className,
+}) => (
+  <Table className={cn('w-full table-fixed', className)}>
+    <colgroup>
+      <col className="w-[220px] lg:w-auto" />
+      <col className="w-[96px] lg:w-[200px]" />
+      <col className="w-[112px] lg:w-[220px]" />
+    </colgroup>
+    <TableHeader className="border-b-0">
+      <TableRow className="border-stroke/80 hover:bg-transparent">
+        <TableHead className="text-fg-tertiary font-sans! normal-case!">
+          NAME
+        </TableHead>
+        <TableHead className="text-fg-tertiary font-sans! normal-case!">
+          PROVIDERS
+        </TableHead>
+        <TableHead className="text-fg-tertiary font-sans! normal-case!">
+          ADDED
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {members.length === 0 ? (
+        <TableEmptyState colSpan={3}>
+          <p className="prose-body-highlight text-fg-tertiary">
+            {totalMemberCount === 0
+              ? 'No team members found.'
+              : 'No members match your search.'}
+          </p>
+        </TableEmptyState>
+      ) : (
+        members.map((member) => (
+          <MemberTableRow
+            addedByMember={getAddedByMember(
+              allMembers,
+              member.relation.added_by
+            )}
+            key={member.info.id}
+            member={member}
+          />
+        ))
+      )}
+    </TableBody>
+  </Table>
+)
 
 export default MemberTable
diff --git a/src/features/dashboard/members/member-table.utils.ts b/src/features/dashboard/members/member-table.utils.ts
new file mode 100644
index 000000000..638fbb5af
--- /dev/null
+++ b/src/features/dashboard/members/member-table.utils.ts
@@ -0,0 +1,21 @@
+import type { TeamMember } from '@/core/modules/teams/models'
+
+const getAddedByMember = (
+  allMembers: TeamMember[],
+  addedById: string | null
+): TeamMember | undefined => {
+  if (!addedById) return undefined
+  return allMembers.find((member) => member.info.id === addedById)
+}
+
+const wasAddedBySystem = (
+  member: TeamMember,
+  addedByMember?: TeamMember
+): boolean => !addedByMember || addedByMember.info.id === member.info.id
+
+const shouldShowRemoveMemberAction = (
+  member: TeamMember,
+  currentUserId?: string
+): boolean => !member.relation.is_default && member.info.id !== currentUserId
+
+export { getAddedByMember, shouldShowRemoveMemberAction, wasAddedBySystem }
diff --git a/src/features/dashboard/members/members-page-content.tsx b/src/features/dashboard/members/members-page-content.tsx
new file mode 100644
index 000000000..b43e7e772
--- /dev/null
+++ b/src/features/dashboard/members/members-page-content.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+import { Search } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import type { TeamMember } from '@/core/modules/teams/models'
+import { cn } from '@/lib/utils'
+import { pluralize } from '@/lib/utils/formatting'
+import { Input } from '@/ui/primitives/input'
+import { AddMemberDialog } from './add-member-dialog'
+import MemberTable from './member-table'
+
+interface MembersPageContentProps {
+  members: TeamMember[]
+  className?: string
+}
+
+const MembersPageContent = ({
+  members,
+  className,
+}: MembersPageContentProps) => {
+  const [query, setQuery] = useState('')
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return members
+
+    return members.filter((m) => {
+      const name = (m.info.name ?? '').toLowerCase()
+      const email = m.info.email.toLowerCase()
+      return name.includes(q) || email.includes(q)
+    })
+  }, [members, query])
+
+  const totalLabel = `${members.length} ${pluralize(members.length, 'member')} total`
+
+  return (
+    <div className={cn('flex w-full flex-col gap-6', className)}>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="relative w-full lg:max-w-[280px]">
+          <Search
+            aria-hidden
+            className="text-fg-tertiary pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2"
+          />
+          <Input
+            aria-label="Search by name or email"
+            className="h-9 border-stroke pl-9 font-sans"
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search by name or email"
+            type="search"
+            value={query}
+          />
+        </div>
+        <AddMemberDialog />
+      </div>
+
+      <div className="text-fg-tertiary flex flex-col gap-1 text-sm lg:flex-row lg:items-center lg:justify-between">
+        <p>All members have the same roles & permissions</p>
+        <p className="shrink-0">{totalLabel}</p>
+      </div>
+
+      <div className="bg-bg w-full overflow-x-auto">
+        <MemberTable
+          allMembers={members}
+          members={filtered}
+          totalMemberCount={members.length}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default MembersPageContent
diff --git a/src/features/dashboard/members/remove-member-dialog.tsx b/src/features/dashboard/members/remove-member-dialog.tsx
new file mode 100644
index 000000000..db40343c6
--- /dev/null
+++ b/src/features/dashboard/members/remove-member-dialog.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { Button } from '@/ui/primitives/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/ui/primitives/dialog'
+import { TrashIcon } from '@/ui/primitives/icons'
+
+interface RemoveMemberDialogProps {
+  isRemoving: boolean
+  memberEmail: string
+  memberName?: string
+  onRemove: () => void
+  open: boolean
+  setOpen: (v: boolean) => void
+  teamName?: string | null
+  trigger: ReactNode
+}
+
+export const RemoveMemberDialog = ({
+  isRemoving,
+  memberEmail,
+  memberName,
+  onRemove,
+  open,
+  setOpen,
+  teamName,
+  trigger,
+}: RemoveMemberDialogProps) => {
+  const shortMemberName = memberName?.trim().split(/\s+/)[0] || memberEmail
+  const fullMemberName = memberName ?? memberEmail
+  const teamLabel = teamName || 'this team'
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent hideClose>
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6">
+          <DialogHeader className="min-w-0 flex-1 gap-2 text-left">
+            <DialogTitle>Remove {shortMemberName}?</DialogTitle>
+            <DialogDescription className="prose-body">
+              {fullMemberName} will be removed from {teamLabel}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex shrink-0 items-center justify-end gap-5">
+            <DialogClose asChild>
+              <Button
+                className="font-sans normal-case text-fg-tertiary hover:text-fg-tertiary focus:text-fg-tertiary"
+                disabled={isRemoving}
+                size="slate"
+                type="button"
+                variant="ghost"
+              >
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button
+              className="font-sans normal-case"
+              loading={isRemoving}
+              onClick={onRemove}
+              size="md"
+              type="button"
+              variant="error"
+            >
+              <TrashIcon className="size-4" />
+              Remove
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/lib/utils/formatting.ts b/src/lib/utils/formatting.ts
index b065142cd..20f0b04d3 100644
--- a/src/lib/utils/formatting.ts
+++ b/src/lib/utils/formatting.ts
@@ -142,6 +142,24 @@ export function formatCompactDate(timestamp: number): string {
   return format(date, 'yyyy MMM d, h:mm:ss a zzz')
 }
 
+const DATE_STRUCTURES = ['MMM d', 'MMM d, yyyy'] as const
+
+type DateStructure = (typeof DATE_STRUCTURES)[number]
+
+/**
+ * Returns a formatted date string
+ * @param date - Date to format
+ * @param dateStructure - Supported date format structure
+ * @returns Formatted date string (e.g., "Apr 8, 2026") or null for invalid dates
+ */
+export const formatDate = (
+  date: Date,
+  dateStructure: DateStructure
+): string | null => {
+  if (!isValid(date)) return null
+  return format(date, dateStructure)
+}
+
 export function formatDay(timestamp: number): string {
   if (isThisYear(timestamp)) {
     return new Intl.DateTimeFormat('en-US', {
@@ -407,6 +425,29 @@ export function formatCPUCores(
   return `${formatNumber(cores, locale)} core${cores !== 1 ? 's' : ''}`
 }
 
+/**
+ * Returns the singular or plural word for a count
+ * @param count - Number used to determine singular vs plural form
+ * @param singular - Singular form of the word
+ * @param plural - Optional plural form override (defaults to an inferred plural form)
+ * @returns Singular or plural word (e.g., "member" or "members")
+ */
+export const pluralize = (
+  count: number,
+  singular: string,
+  plural?: string
+): string => {
+  if (count === 1) return singular
+  if (plural) return plural
+  if (/[sxz]$/i.test(singular) || /(ch|sh)$/i.test(singular)) {
+    return `${singular}es`
+  }
+  if (/[^aeiou]y$/i.test(singular)) {
+    return `${singular.slice(0, -1)}ies`
+  }
+  return `${singular}s`
+}
+
 /**
  * Format a number for chart axis labels with smart abbreviation
  * Uses whole numbers when possible, abbreviated for large numbers
@@ -450,7 +491,7 @@ export function tryParseDatetime(input: string): Date | null {
 
   // Try parsing as timestamp first (for performance with numeric inputs)
   const timestamp = Number(input)
-  if (!isNaN(timestamp)) {
+  if (!Number.isNaN(timestamp)) {
     // if timestamp is less than 10 digits, multiply by 1000 to get milliseconds
     const date = new Date(
       timestamp < 10000000000 ? timestamp * 1000 : timestamp
diff --git a/src/features/dashboard/billing/table-empty-row-border.tsx b/src/ui/primitives/table-empty-row-border.tsx
similarity index 99%
rename from src/features/dashboard/billing/table-empty-row-border.tsx
rename to src/ui/primitives/table-empty-row-border.tsx
index aa7ec16f1..7e13f39ae 100644
--- a/src/features/dashboard/billing/table-empty-row-border.tsx
+++ b/src/ui/primitives/table-empty-row-border.tsx
@@ -12,6 +12,7 @@ const PATTERN_PATH_2 = `M32.944 -12.8C32.944 -13.344 32.76 -13.8 32.392 -14.168C
 export function TableEmptyRowBorder({ className }: TableEmptyRowBorderProps) {
   return (
     <svg
+      aria-hidden="true"
       width="43"
       height="44"
       viewBox="0 0 43 44"
diff --git a/src/ui/primitives/table.tsx b/src/ui/primitives/table.tsx
index 999bcd77f..67bdc1eb9 100644
--- a/src/ui/primitives/table.tsx
+++ b/src/ui/primitives/table.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import { cn } from '@/lib/utils'
+import { TableEmptyRowBorder } from './table-empty-row-border'
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -128,11 +129,48 @@ const TableCaption = React.forwardRef<
 ))
 TableCaption.displayName = 'TableCaption'
 
+interface TableEmptyStateProps {
+  colSpan: number
+  children: React.ReactNode
+  className?: string
+}
+
+const EMPTY_STATE_ROWS = Array.from({ length: 3 })
+
+const TableEmptyState = ({
+  colSpan,
+  children,
+  className,
+}: TableEmptyStateProps) => (
+  <TableRow>
+    <TableCell className="p-0" colSpan={colSpan}>
+      <div
+        className={cn(
+          'w-full gap-2 relative flex flex-col justify-center items-center',
+          className
+        )}
+      >
+        {EMPTY_STATE_ROWS.map((_, index) => (
+          <div
+            key={index}
+            className="h-11 w-full border border-bg-highlight relative flex items-center gap-2 justify-center overflow-hidden"
+          >
+            <TableEmptyRowBorder className="absolute bottom-0 left-0 rotate-180 opacity-99" />
+            <TableEmptyRowBorder className="absolute bottom-0 right-0 opacity-99" />
+            {index === 1 && children}
+          </div>
+        ))}
+      </div>
+    </TableCell>
+  </TableRow>
+)
+
 export {
   Table,
   TableBody,
   TableCaption,
   TableCell,
+  TableEmptyState,
   TableFooter,
   TableHead,
   TableHeader,