diff --git a/apps/api/src/controllers/Projects.ts b/apps/api/src/controllers/Projects.ts
index 1667138..a45d62f 100644
--- a/apps/api/src/controllers/Projects.ts
+++ b/apps/api/src/controllers/Projects.ts
@@ -1,5 +1,6 @@
-import {Controller, Get, Middleware} from '@overnightjs/core';
+import {Controller, Delete, Get, Middleware, Patch, Post} from '@overnightjs/core';
 import type {NextFunction, Request, Response} from 'express';
+import {MembershipSchemas} from '@plunk/shared';
 
 import {prisma} from '../database/prisma.js';
 import {HttpException} from '../exceptions/index.js';
@@ -129,4 +130,254 @@ export class Projects {
       })),
     });
   }
+
+  /**
+   * Add a member to a project by email
+   * POST /projects/:id/members
+   * Body: { email: string, role?: 'ADMIN' | 'MEMBER' }
+   */
+  @Post(':id/members')
+  @Middleware([requireAuth])
+  @CatchAsync
+  private async addMember(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth as AuthResponse;
+    const {id} = req.params;
+
+    // Validate params
+    if (!id) {
+      throw new HttpException(400, 'Project ID is required');
+    }
+
+    // Validate and parse request body
+    const parseResult = MembershipSchemas.addMember.safeParse(req.body);
+    if (!parseResult.success) {
+      throw new HttpException(400, parseResult.error.errors[0]?.message || 'Invalid request body');
+    }
+
+    const {email, role} = parseResult.data;
+
+    // Verify current user is ADMIN or OWNER
+    const currentMembership = await prisma.membership.findFirst({
+      where: {
+        userId: auth.userId,
+        projectId: id,
+        role: {
+          in: ['ADMIN', 'OWNER'],
+        },
+      },
+    });
+
+    if (!currentMembership) {
+      throw new HttpException(403, 'Only project admins and owners can add members');
+    }
+
+    // Find user by email
+    const userToAdd = await prisma.user.findUnique({
+      where: {email: email.toLowerCase()},
+      select: {id: true, email: true},
+    });
+
+    if (!userToAdd) {
+      throw new HttpException(404, 'User with this email does not have an account');
+    }
+
+    // Check if user is already a member
+    const existingMembership = await prisma.membership.findUnique({
+      where: {
+        userId_projectId: {
+          userId: userToAdd.id,
+          projectId: id,
+        },
+      },
+    });
+
+    if (existingMembership) {
+      throw new HttpException(409, 'User is already a member of this project');
+    }
+
+    // Create membership
+    const newMembership = await prisma.membership.create({
+      data: {
+        userId: userToAdd.id,
+        projectId: id,
+        role,
+      },
+    });
+
+    return res.json({
+      success: true,
+      data: {
+        userId: userToAdd.id,
+        email: userToAdd.email,
+        role: newMembership.role,
+      },
+    });
+  }
+
+  /**
+   * Update a member's role
+   * PATCH /projects/:id/members/:userId
+   * Body: { role: 'ADMIN' | 'MEMBER' }
+   */
+  @Patch(':id/members/:userId')
+  @Middleware([requireAuth])
+  @CatchAsync
+  private async updateMemberRole(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth as AuthResponse;
+    const {id, userId} = req.params;
+
+    // Validate params
+    if (!id) {
+      throw new HttpException(400, 'Project ID is required');
+    }
+    if (!userId) {
+      throw new HttpException(400, 'User ID is required');
+    }
+
+    // Validate and parse request body
+    const parseResult = MembershipSchemas.updateRole.safeParse(req.body);
+    if (!parseResult.success) {
+      throw new HttpException(400, parseResult.error.errors[0]?.message || 'Invalid request body');
+    }
+
+    const {role} = parseResult.data;
+
+    // Verify current user is ADMIN or OWNER
+    const currentMembership = await prisma.membership.findFirst({
+      where: {
+        userId: auth.userId,
+        projectId: id,
+        role: {
+          in: ['ADMIN', 'OWNER'],
+        },
+      },
+    });
+
+    if (!currentMembership) {
+      throw new HttpException(403, 'Only project admins and owners can update member roles');
+    }
+
+    // Get target membership
+    const targetMembership = await prisma.membership.findUnique({
+      where: {
+        userId_projectId: {
+          userId,
+          projectId: id,
+        },
+      },
+    });
+
+    if (!targetMembership) {
+      throw new HttpException(404, 'Member not found');
+    }
+
+    // Cannot change OWNER role
+    if (targetMembership.role === 'OWNER') {
+      throw new HttpException(403, 'Cannot change the role of the project owner');
+    }
+
+    // Get user info
+    const user = await prisma.user.findUnique({
+      where: {id: userId},
+      select: {id: true, email: true},
+    });
+
+    if (!user) {
+      throw new HttpException(404, 'User not found');
+    }
+
+    // Update role
+    await prisma.membership.update({
+      where: {
+        userId_projectId: {
+          userId,
+          projectId: id,
+        },
+      },
+      data: {role},
+    });
+
+    return res.json({
+      success: true,
+      data: {
+        userId: user.id,
+        email: user.email,
+        role,
+      },
+    });
+  }
+
+  /**
+   * Remove a member from a project
+   * DELETE /projects/:id/members/:userId
+   */
+  @Delete(':id/members/:userId')
+  @Middleware([requireAuth])
+  @CatchAsync
+  private async removeMember(req: Request, res: Response, _next: NextFunction) {
+    const auth = res.locals.auth as AuthResponse;
+    const {id, userId} = req.params;
+
+    // Validate params
+    if (!id) {
+      throw new HttpException(400, 'Project ID is required');
+    }
+    if (!userId) {
+      throw new HttpException(400, 'User ID is required');
+    }
+
+    // Verify current user is ADMIN or OWNER
+    const currentMembership = await prisma.membership.findFirst({
+      where: {
+        userId: auth.userId,
+        projectId: id,
+        role: {
+          in: ['ADMIN', 'OWNER'],
+        },
+      },
+    });
+
+    if (!currentMembership) {
+      throw new HttpException(403, 'Only project admins and owners can remove members');
+    }
+
+    // Get target membership
+    const targetMembership = await prisma.membership.findUnique({
+      where: {
+        userId_projectId: {
+          userId,
+          projectId: id,
+        },
+      },
+    });
+
+    if (!targetMembership) {
+      throw new HttpException(404, 'Member not found');
+    }
+
+    // Cannot remove OWNER
+    if (targetMembership.role === 'OWNER') {
+      throw new HttpException(403, 'Cannot remove the project owner');
+    }
+
+    // Cannot remove yourself
+    if (userId === auth.userId) {
+      throw new HttpException(403, 'You cannot remove yourself from the project');
+    }
+
+    // Delete membership
+    await prisma.membership.delete({
+      where: {
+        userId_projectId: {
+          userId,
+          projectId: id,
+        },
+      },
+    });
+
+    return res.json({
+      success: true,
+      data: {message: 'Member removed successfully'},
+    });
+  }
 }
diff --git a/apps/landing/next-env.d.ts b/apps/landing/next-env.d.ts
index 1970904..7996d35 100644
--- a/apps/landing/next-env.d.ts
+++ b/apps/landing/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 1970904..7996d35 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/apps/web/src/components/BillingInvoices.tsx b/apps/web/src/components/BillingInvoices.tsx
index e09e1c1..d95794f 100644
--- a/apps/web/src/components/BillingInvoices.tsx
+++ b/apps/web/src/components/BillingInvoices.tsx
@@ -88,20 +88,20 @@ export function BillingInvoices({projectId, hasSubscription, onManageBilling}: B
   const getStatusBadge = (status: string, paid: boolean) => {
     // Stripe invoices have status 'paid' when paid, or paid boolean is true
     if (paid || status === 'paid') {
-      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Paid</Badge>;
+      return <Badge variant="green">Paid</Badge>;
     }
 
     switch (status) {
       case 'open':
-        return <Badge className="bg-orange-100 text-orange-800 hover:bg-orange-100">Unpaid</Badge>;
+        return <Badge variant="orange">Unpaid</Badge>;
       case 'draft':
-        return <Badge className="bg-neutral-100 text-neutral-800 hover:bg-neutral-100">Draft</Badge>;
+        return <Badge variant="neutral">Draft</Badge>;
       case 'uncollectible':
-        return <Badge className="bg-red-100 text-red-800 hover:bg-red-100">Uncollectible</Badge>;
+        return <Badge variant="red">Uncollectible</Badge>;
       case 'void':
-        return <Badge className="bg-neutral-100 text-neutral-800 hover:bg-neutral-100">Void</Badge>;
+        return <Badge variant="neutral">Void</Badge>;
       default:
-        return <Badge className="bg-neutral-100 text-neutral-800 hover:bg-neutral-100">{status}</Badge>;
+        return <Badge variant="neutral">{status}</Badge>;
     }
   };
 
diff --git a/apps/web/src/components/TeamSettings.tsx b/apps/web/src/components/TeamSettings.tsx
new file mode 100644
index 0000000..fc56b3a
--- /dev/null
+++ b/apps/web/src/components/TeamSettings.tsx
@@ -0,0 +1,399 @@
+import {useState} from 'react';
+import useSWR from 'swr';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@plunk/ui';
+import {MembershipSchemas} from '@plunk/shared';
+import {AlertTriangle, Mail, MoreVertical, Trash2, UserPlus} from 'lucide-react';
+import {useForm} from 'react-hook-form';
+import {zodResolver} from '@hookform/resolvers/zod';
+import type {z} from 'zod';
+import {network} from '../lib/network';
+
+interface Member {
+  userId: string;
+  email: string;
+  role: 'OWNER' | 'ADMIN' | 'MEMBER';
+}
+
+interface TeamSettingsProps {
+  projectId: string;
+  currentUserRole: 'OWNER' | 'ADMIN' | 'MEMBER';
+  currentUserId: string;
+}
+
+type AddMemberForm = z.infer<typeof MembershipSchemas.addMember>;
+
+export function TeamSettings({projectId, currentUserRole, currentUserId}: TeamSettingsProps) {
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [memberToRemove, setMemberToRemove] = useState<Member | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const {data, mutate, isLoading} = useSWR<{success: boolean; data: Member[]}>(
+    projectId ? `/projects/${projectId}/members` : null,
+    {revalidateOnFocus: false},
+  );
+
+  const members = data?.data || [];
+  const canManageMembers = currentUserRole === 'OWNER' || currentUserRole === 'ADMIN';
+
+  const form = useForm<AddMemberForm>({
+    resolver: zodResolver(MembershipSchemas.addMember),
+    defaultValues: {
+      email: '',
+      role: 'MEMBER',
+    },
+  });
+
+  const handleAddMember = async (values: AddMemberForm) => {
+    setIsSubmitting(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      await network.fetch<void, typeof MembershipSchemas.addMember>('POST', `/projects/${projectId}/members`, values);
+      setSuccess('Member added successfully');
+      await mutate();
+      form.reset();
+      setShowAddDialog(false);
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('Failed to add member');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRemoveMember = async () => {
+    if (!memberToRemove) return;
+
+    setIsSubmitting(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      await network.fetch('DELETE', `/projects/${projectId}/members/${memberToRemove.userId}`);
+      setSuccess('Member removed successfully');
+      await mutate();
+      setMemberToRemove(null);
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('Failed to remove member');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleUpdateRole = async (userId: string, newRole: 'ADMIN' | 'MEMBER') => {
+    setError(null);
+    setSuccess(null);
+
+    try {
+      await network.fetch<void, typeof MembershipSchemas.updateRole>(
+        'PATCH',
+        `/projects/${projectId}/members/${userId}`,
+        {role: newRole},
+      );
+      setSuccess('Member role updated successfully');
+      await mutate();
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('Failed to update member role');
+      }
+    }
+  };
+
+  const getRoleBadgeVariant = (role: Member['role']) => {
+    switch (role) {
+      case 'OWNER':
+        return 'default';
+      case 'ADMIN':
+        return 'secondary';
+      case 'MEMBER':
+        return 'outline';
+      default:
+        return 'outline';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {success && (
+        <Alert>
+          <Mail className="h-4 w-4" />
+          <div className="ml-2">
+            <p className="text-sm font-medium">{success}</p>
+          </div>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <div className="ml-2">
+            <p className="text-sm font-medium">{error}</p>
+          </div>
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Team Members</CardTitle>
+              <CardDescription>Manage who has access to this project</CardDescription>
+            </div>
+            {canManageMembers && (
+              <Button
+                onClick={() => {
+                  setError(null);
+                  setShowAddDialog(true);
+                }}
+              >
+                <UserPlus className="mr-2 h-4 w-4" />
+                Add Member
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="flex justify-center py-8">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600" />
+            </div>
+          ) : members.length === 0 ? (
+            <div className="py-8 text-center text-sm text-gray-500">No members found</div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Email</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead className="w-[50px]" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {members.map(member => {
+                  const isCurrentUser = member.userId === currentUserId;
+                  const isOwner = member.role === 'OWNER';
+                  const canModify = canManageMembers && !isOwner && !isCurrentUser;
+
+                  return (
+                    <TableRow key={member.userId}>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          {member.email}
+                          {isCurrentUser && (
+                            <Badge variant="outline" className="text-xs">
+                              You
+                            </Badge>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {canModify ? (
+                          <Select
+                            value={member.role}
+                            onValueChange={value => handleUpdateRole(member.userId, value as 'ADMIN' | 'MEMBER')}
+                          >
+                            <SelectTrigger className="w-[120px]">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="ADMIN">Admin</SelectItem>
+                              <SelectItem value="MEMBER">Member</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        ) : (
+                          <Badge className={'capitalize'} variant={getRoleBadgeVariant(member.role)}>
+                            {member.role.toLowerCase()}
+                          </Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        {canModify && (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" size="sm">
+                                <MoreVertical className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem
+                                className="text-red-600 focus:text-red-600"
+                                onClick={() => setMemberToRemove(member)}
+                              >
+                                <Trash2 className="mr-2 h-4 w-4" />
+                                Remove
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Add Member Dialog */}
+      <Dialog
+        open={showAddDialog}
+        onOpenChange={open => {
+          if (!open) {
+            setError(null);
+          }
+          setShowAddDialog(open);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add Team Member</DialogTitle>
+            <DialogDescription>
+              Add a user to this project by their email address. They must have an existing account.
+            </DialogDescription>
+          </DialogHeader>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleAddMember)} className="space-y-4">
+              {error && (
+                <Alert variant="destructive">
+                  <AlertTriangle className="h-4 w-4" />
+                  <div className="ml-2">
+                    <p className="text-sm font-medium">{error}</p>
+                  </div>
+                </Alert>
+              )}
+              <FormField
+                control={form.control}
+                name="email"
+                render={({field}) => (
+                  <FormItem>
+                    <FormLabel>Email Address</FormLabel>
+                    <FormControl>
+                      <Input type="email" placeholder="user@example.com" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="role"
+                render={({field}) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="MEMBER">Member - Can view and use the project</SelectItem>
+                        <SelectItem value="ADMIN">Admin - Can manage settings and members</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    setError(null);
+                    setShowAddDialog(false);
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? 'Adding...' : 'Add Member'}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Remove Member Dialog */}
+      <Dialog open={!!memberToRemove} onOpenChange={() => setMemberToRemove(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Remove Team Member</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to remove <strong>{memberToRemove?.email}</strong> from this project? They will
+              immediately lose access.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setMemberToRemove(null)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleRemoveMember} disabled={isSubmitting}>
+              {isSubmitting ? 'Removing...' : 'Remove Member'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/apps/web/src/pages/settings/index.tsx b/apps/web/src/pages/settings/index.tsx
index 4d998c4..35c1dc6 100644
--- a/apps/web/src/pages/settings/index.tsx
+++ b/apps/web/src/pages/settings/index.tsx
@@ -32,7 +32,7 @@ import {
 } from '@plunk/ui';
 import {AnimatePresence, motion} from 'framer-motion';
 import {NextSeo} from 'next-seo';
-import {AlertTriangle, CreditCard, Database, Globe, Mail, Settings as SettingsIcon} from 'lucide-react';
+import {AlertTriangle, CreditCard, Database, Globe, Mail, Settings as SettingsIcon, Users} from 'lucide-react';
 import type {z} from 'zod';
 import {useRouter} from 'next/router';
 import {DashboardLayout} from '../../components/DashboardLayout';
@@ -44,12 +44,15 @@ import {UnpaidInvoiceBanner} from '../../components/UnpaidInvoiceBanner';
 import {ApiKeyDisplay} from '../../components/ApiKeyDisplay';
 import {SmtpSettings} from '../../components/SmtpSettings';
 import {DataManagementSettings} from '../../components/DataManagementSettings';
+import {TeamSettings} from '../../components/TeamSettings';
 import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
 import {network} from '../../lib/network';
 import {useProjects} from '../../lib/hooks/useProject';
 import {useConfig} from '../../lib/hooks/useConfig';
+import {useUser} from '../../lib/hooks/useUser';
+import useSWR from 'swr';
 
-type TabId = 'general' | 'billing' | 'domains' | 'smtp' | 'data';
+type TabId = 'general' | 'billing' | 'domains' | 'smtp' | 'data' | 'team';
 
 interface Tab {
   id: TabId;
@@ -62,6 +65,7 @@ const buildTabs = (options: {billingEnabled: boolean; smtpEnabled: boolean}): Ta
   const {billingEnabled, smtpEnabled} = options;
   const allTabs: Tab[] = [
     {id: 'general', label: 'General', icon: SettingsIcon},
+    {id: 'team', label: 'Team', icon: Users},
     {id: 'billing', label: 'Billing', icon: CreditCard, condition: billingEnabled},
     {id: 'domains', label: 'Domains', icon: Globe},
     {id: 'smtp', label: 'SMTP', icon: Mail, condition: smtpEnabled},
@@ -75,6 +79,7 @@ export default function Settings() {
   const {activeProject, setActiveProject} = useActiveProject();
   const {mutate: projectsMutate} = useProjects();
   const {data: config} = useConfig();
+  const {data: user} = useUser();
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [showRegenerateDialog, setShowRegenerateDialog] = useState(false);
@@ -84,6 +89,15 @@ export default function Settings() {
   const [resetConfirmText, setResetConfirmText] = useState('');
   const [isLoadingBilling, setIsLoadingBilling] = useState(false);
 
+  // Fetch current user's membership for the active project
+  const {data: membershipData} = useSWR<{
+    success: boolean;
+    data: Array<{userId: string; email: string; role: 'OWNER' | 'ADMIN' | 'MEMBER'}>;
+  }>(activeProject?.id ? `/projects/${activeProject.id}/members` : null, {revalidateOnFocus: false});
+
+  const currentUserMembership = membershipData?.data.find(m => m.userId === user?.id);
+  const currentUserRole = currentUserMembership?.role || 'MEMBER';
+
   const billingEnabled = config?.features.billing.enabled ?? false;
   const smtpEnabled = config?.features.smtp.enabled ?? false;
   const trackingToggleEnabled = config?.features.email.trackingToggleEnabled ?? false;
@@ -639,6 +653,11 @@ export default function Settings() {
               </div>
             </TabsContent>
 
+            {/* Team Tab */}
+            <TabsContent value="team">
+              <TeamSettings projectId={activeProject.id} currentUserRole={currentUserRole} currentUserId={user?.id || ''} />
+            </TabsContent>
+
             {/* Domains Tab */}
             <TabsContent value="domains">
               <DomainsSettings projectId={activeProject.id} />
diff --git a/apps/web/src/pages/templates/index.tsx b/apps/web/src/pages/templates/index.tsx
index b47e902..ad970de 100644
--- a/apps/web/src/pages/templates/index.tsx
+++ b/apps/web/src/pages/templates/index.tsx
@@ -1,4 +1,14 @@
-import {Button, Card, CardContent, CardDescription, CardHeader, CardTitle, ConfirmDialog, Input} from '@plunk/ui';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ConfirmDialog,
+  Input,
+} from '@plunk/ui';
 import type {Template} from '@plunk/db';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {network} from '../../lib/network';
@@ -65,248 +75,245 @@ export default function TemplatesPage() {
       <NextSeo title="Templates" />
       <DashboardLayout>
         <div className="space-y-6">
-        {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div className="flex-1 min-w-0">
-            <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Email Templates</h1>
-            <p className="text-neutral-500 mt-2 text-sm sm:text-base">
-              Create and manage reusable email templates for your campaigns and workflows.{' '}
-              {data?.total ? `${data.total} total templates` : ''}
-            </p>
+          {/* Header */}
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Email Templates</h1>
+              <p className="text-neutral-500 mt-2 text-sm sm:text-base">
+                Create and manage reusable email templates for your campaigns and workflows.{' '}
+                {data?.total ? `${data.total} total templates` : ''}
+              </p>
+            </div>
+            <Link href="/templates/create" className="w-full sm:w-auto">
+              <Button className="w-full sm:w-auto">
+                <Plus className="h-4 w-4" />
+                <span className="hidden sm:inline">Create Template</span>
+                <span className="sm:hidden">Create</span>
+              </Button>
+            </Link>
           </div>
-          <Link href="/templates/create" className="w-full sm:w-auto">
-            <Button className="w-full sm:w-auto">
-              <Plus className="h-4 w-4" />
-              <span className="hidden sm:inline">Create Template</span>
-              <span className="sm:hidden">Create</span>
-            </Button>
-          </Link>
-        </div>
 
-        {/* Search & Filters */}
-        <Card>
-          <CardContent className="pt-6">
-            <form onSubmit={handleSearch} className="space-y-4">
-              <div className="flex gap-2">
-                <div className="relative flex-1">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-500" />
-                  <Input
-                    type="text"
-                    placeholder="Search templates..."
-                    value={searchInput}
-                    onChange={e => setSearchInput(e.target.value)}
-                    className="pl-10"
-                  />
-                </div>
-                <Button type="submit">Search</Button>
-                {search && (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => {
-                      setSearch('');
-                      setSearchInput('');
-                      setPage(1);
-                    }}
-                  >
-                    Clear
-                  </Button>
-                )}
-              </div>
-
-              {/* Type Filter */}
-              <div className="flex gap-2">
-                <button
-                  type="button"
-                  onClick={() => setTypeFilter('ALL')}
-                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                    typeFilter === 'ALL'
-                      ? 'bg-neutral-900 text-white'
-                      : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
-                  }`}
-                >
-                  All Templates
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setTypeFilter('MARKETING')}
-                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                    typeFilter === 'MARKETING'
-                      ? 'bg-neutral-900 text-white'
-                      : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
-                  }`}
-                >
-                  Marketing
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setTypeFilter('TRANSACTIONAL')}
-                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                    typeFilter === 'TRANSACTIONAL'
-                      ? 'bg-neutral-900 text-white'
-                      : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
-                  }`}
-                >
-                  Transactional
-                </button>
-              </div>
-            </form>
-          </CardContent>
-        </Card>
-
-        {/* Templates Grid */}
-        <div className="grid gap-4">
-          {isLoading ? (
-            <Card>
-              <CardContent className="pt-6">
-                <div className="flex items-center justify-center py-12">
-                  <div className="text-center">
-                    <svg
-                      className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                    >
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                      <path
-                        className="opacity-75"
-                        fill="currentColor"
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      />
-                    </svg>
-                    <p className="mt-2 text-sm text-neutral-500">Loading templates...</p>
+          {/* Search & Filters */}
+          <Card>
+            <CardContent className="pt-6">
+              <form onSubmit={handleSearch} className="space-y-4">
+                <div className="flex gap-2">
+                  <div className="relative flex-1">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-500" />
+                    <Input
+                      type="text"
+                      placeholder="Search templates..."
+                      value={searchInput}
+                      onChange={e => setSearchInput(e.target.value)}
+                      className="pl-10"
+                    />
                   </div>
-                </div>
-              </CardContent>
-            </Card>
-          ) : data?.templates.length === 0 ? (
-            <Card>
-              <CardContent className="pt-6">
-                <div className="text-center py-12">
-                  <FileText className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                  <h3 className="text-lg font-medium text-neutral-900 mb-2">No templates found</h3>
-                  <p className="text-neutral-500 mb-6">
-                    {search ? 'Try adjusting your search terms' : 'Get started by creating your first template'}
-                  </p>
-                  {!search && (
-                    <Link href="/templates/create">
-                      <Button>
-                        <Plus className="h-4 w-4" />
-                        Create Template
-                      </Button>
-                    </Link>
+                  <Button type="submit">Search</Button>
+                  {search && (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => {
+                        setSearch('');
+                        setSearchInput('');
+                        setPage(1);
+                      }}
+                    >
+                      Clear
+                    </Button>
                   )}
                 </div>
-              </CardContent>
-            </Card>
-          ) : (
-            <>
-              {data?.templates.map(template => (
-                <Card key={template.id}>
-                  <CardHeader>
-                    <div className="flex items-start justify-between">
-                      <div className="flex-1">
-                        <div className="flex items-center gap-3">
-                          <CardTitle>{template.name}</CardTitle>
-                          <span
-                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                              template.type === 'MARKETING'
-                                ? 'bg-blue-100 text-blue-800'
-                                : 'bg-purple-100 text-purple-800'
-                            }`}
-                          >
-                            {template.type}
-                          </span>
-                        </div>
-                        {template.description && (
-                          <CardDescription className="mt-2">{template.description}</CardDescription>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-2 ml-4">
-                        <Link href={`/templates/${template.id}`}>
-                          <Button variant="ghost" size="sm">
-                            <Edit className="h-4 w-4" />
-                          </Button>
-                        </Link>
-                        <Button variant="ghost" size="sm" onClick={() => handleDuplicate(template.id)}>
-                          <Copy className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => {
-                            setTemplateToDelete(template.id);
-                            setShowDeleteDialog(true);
-                          }}
-                        >
-                          <Trash2 className="h-4 w-4 text-red-600" />
-                        </Button>
-                      </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-3">
-                      <div>
-                        <p className="text-xs text-neutral-500 mb-1">Subject</p>
-                        <p className="text-sm font-medium text-neutral-900">{template.subject}</p>
-                      </div>
-                      <div>
-                        <p className="text-xs text-neutral-500 mb-1">From</p>
-                        <p className="text-sm text-neutral-700">{template.from}</p>
-                      </div>
-                      <div className="flex items-center gap-6 text-sm text-neutral-500 pt-2 border-t border-neutral-100">
-                        <div>Created {new Date(template.createdAt).toLocaleDateString()}</div>
-                        {template.replyTo && (
-                          <div>
-                            Reply to: <span className="text-neutral-700">{template.replyTo}</span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
 
-              {/* Pagination */}
-              {data && data.totalPages > 1 && (
-                <div className="flex items-center justify-between mt-6">
-                  <p className="text-sm text-neutral-500">
-                    Showing {(page - 1) * data.pageSize + 1} to {Math.min(page * data.pageSize, data.total)} of{' '}
-                    {data.total} templates
-                  </p>
-                  <div className="flex items-center gap-2">
-                    <Button variant="outline" size="sm" onClick={() => setPage(p => p - 1)} disabled={page === 1}>
-                      Previous
-                    </Button>
-                    <span className="text-sm text-neutral-700">
-                      Page {page} of {data.totalPages}
-                    </span>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => setPage(p => p + 1)}
-                      disabled={page === data.totalPages}
-                    >
-                      Next
-                    </Button>
-                  </div>
+                {/* Type Filter */}
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setTypeFilter('ALL')}
+                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                      typeFilter === 'ALL'
+                        ? 'bg-neutral-900 text-white'
+                        : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
+                    }`}
+                  >
+                    All Templates
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setTypeFilter('MARKETING')}
+                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                      typeFilter === 'MARKETING'
+                        ? 'bg-neutral-900 text-white'
+                        : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
+                    }`}
+                  >
+                    Marketing
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setTypeFilter('TRANSACTIONAL')}
+                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                      typeFilter === 'TRANSACTIONAL'
+                        ? 'bg-neutral-900 text-white'
+                        : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
+                    }`}
+                  >
+                    Transactional
+                  </button>
                 </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
+              </form>
+            </CardContent>
+          </Card>
 
-      <ConfirmDialog
-        open={showDeleteDialog}
-        onOpenChange={setShowDeleteDialog}
-        onConfirm={handleDelete}
-        title="Delete Template"
-        description="Are you sure you want to delete this template? This action cannot be undone."
-        confirmText="Delete"
-        variant="destructive"
-      />
-    </DashboardLayout>
+          {/* Templates Grid */}
+          <div className="grid gap-4">
+            {isLoading ? (
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center justify-center py-12">
+                    <div className="text-center">
+                      <svg
+                        className="h-8 w-8 animate-spin mx-auto text-neutral-900"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path
+                          className="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        />
+                      </svg>
+                      <p className="mt-2 text-sm text-neutral-500">Loading templates...</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ) : data?.templates.length === 0 ? (
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="text-center py-12">
+                    <FileText className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
+                    <h3 className="text-lg font-medium text-neutral-900 mb-2">No templates found</h3>
+                    <p className="text-neutral-500 mb-6">
+                      {search ? 'Try adjusting your search terms' : 'Get started by creating your first template'}
+                    </p>
+                    {!search && (
+                      <Link href="/templates/create">
+                        <Button>
+                          <Plus className="h-4 w-4" />
+                          Create Template
+                        </Button>
+                      </Link>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            ) : (
+              <>
+                {data?.templates.map(template => (
+                  <Card key={template.id}>
+                    <CardHeader>
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-3">
+                            <CardTitle>{template.name}</CardTitle>
+                            <Badge
+                              className={'capitalize'}
+                              variant={template.type === 'MARKETING' ? 'info' : 'success'}
+                            >
+                              {template.type.toLowerCase()}
+                            </Badge>
+                          </div>
+                          {template.description && (
+                            <CardDescription className="mt-2">{template.description}</CardDescription>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2 ml-4">
+                          <Link href={`/templates/${template.id}`}>
+                            <Button variant="ghost" size="sm">
+                              <Edit className="h-4 w-4" />
+                            </Button>
+                          </Link>
+                          <Button variant="ghost" size="sm" onClick={() => handleDuplicate(template.id)}>
+                            <Copy className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              setTemplateToDelete(template.id);
+                              setShowDeleteDialog(true);
+                            }}
+                          >
+                            <Trash2 className="h-4 w-4 text-red-600" />
+                          </Button>
+                        </div>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-3">
+                        <div>
+                          <p className="text-xs text-neutral-500 mb-1">Subject</p>
+                          <p className="text-sm font-medium text-neutral-900">{template.subject}</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-neutral-500 mb-1">From</p>
+                          <p className="text-sm text-neutral-700">{template.from}</p>
+                        </div>
+                        <div className="flex items-center gap-6 text-sm text-neutral-500 pt-2 border-t border-neutral-100">
+                          <div>Created {new Date(template.createdAt).toLocaleDateString()}</div>
+                          {template.replyTo && (
+                            <div>
+                              Reply to: <span className="text-neutral-700">{template.replyTo}</span>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+
+                {/* Pagination */}
+                {data && data.totalPages > 1 && (
+                  <div className="flex items-center justify-between mt-6">
+                    <p className="text-sm text-neutral-500">
+                      Showing {(page - 1) * data.pageSize + 1} to {Math.min(page * data.pageSize, data.total)} of{' '}
+                      {data.total} templates
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm" onClick={() => setPage(p => p - 1)} disabled={page === 1}>
+                        Previous
+                      </Button>
+                      <span className="text-sm text-neutral-700">
+                        Page {page} of {data.totalPages}
+                      </span>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setPage(p => p + 1)}
+                        disabled={page === data.totalPages}
+                      >
+                        Next
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        <ConfirmDialog
+          open={showDeleteDialog}
+          onOpenChange={setShowDeleteDialog}
+          onConfirm={handleDelete}
+          title="Delete Template"
+          description="Are you sure you want to delete this template? This action cannot be undone."
+          confirmText="Delete"
+          variant="destructive"
+        />
+      </DashboardLayout>
     </>
   );
 }
diff --git a/apps/web/src/pages/workflows/index.tsx b/apps/web/src/pages/workflows/index.tsx
index 373ae84..62944f0 100644
--- a/apps/web/src/pages/workflows/index.tsx
+++ b/apps/web/src/pages/workflows/index.tsx
@@ -1,4 +1,5 @@
 import {
+  Badge,
   Button,
   Card,
   CardContent,
@@ -88,223 +89,218 @@ export default function WorkflowsPage() {
       <NextSeo title="Workflows" />
       <DashboardLayout>
         <div className="space-y-6">
-        {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div className="flex-1 min-w-0">
-            <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Workflows</h1>
-            <p className="text-neutral-500 mt-2 text-sm sm:text-base">
-              Automate your email campaigns with powerful workflows.{' '}
-              {data?.total ? `${data.total} total workflows` : ''}
-            </p>
+          {/* Header */}
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Workflows</h1>
+              <p className="text-neutral-500 mt-2 text-sm sm:text-base">
+                Automate your email campaigns with powerful workflows.{' '}
+                {data?.total ? `${data.total} total workflows` : ''}
+              </p>
+            </div>
+            <Button onClick={() => setShowCreateDialog(true)} className="w-full sm:w-auto">
+              <Plus className="h-4 w-4" />
+              <span className="hidden sm:inline">Create Workflow</span>
+              <span className="sm:hidden">Create</span>
+            </Button>
           </div>
-          <Button onClick={() => setShowCreateDialog(true)} className="w-full sm:w-auto">
-            <Plus className="h-4 w-4" />
-            <span className="hidden sm:inline">Create Workflow</span>
-            <span className="sm:hidden">Create</span>
-          </Button>
-        </div>
 
-        {/* Search & Filters */}
-        <Card>
-          <CardContent className="pt-6">
-            <form onSubmit={handleSearch} className="flex gap-2">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-500" />
-                <Input
-                  type="text"
-                  placeholder="Search workflows..."
-                  value={searchInput}
-                  onChange={e => setSearchInput(e.target.value)}
-                  className="pl-10"
-                />
-              </div>
-              <Button type="submit">Search</Button>
-              {search && (
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => {
-                    setSearch('');
-                    setSearchInput('');
-                    setPage(1);
-                  }}
-                >
-                  Clear
-                </Button>
-              )}
-            </form>
-          </CardContent>
-        </Card>
+          {/* Search & Filters */}
+          <Card>
+            <CardContent className="pt-6">
+              <form onSubmit={handleSearch} className="flex gap-2">
+                <div className="relative flex-1">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-500" />
+                  <Input
+                    type="text"
+                    placeholder="Search workflows..."
+                    value={searchInput}
+                    onChange={e => setSearchInput(e.target.value)}
+                    className="pl-10"
+                  />
+                </div>
+                <Button type="submit">Search</Button>
+                {search && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      setSearch('');
+                      setSearchInput('');
+                      setPage(1);
+                    }}
+                  >
+                    Clear
+                  </Button>
+                )}
+              </form>
+            </CardContent>
+          </Card>
 
-        {/* Workflows Grid */}
-        <div className="grid gap-4">
-          {isLoading ? (
-            <Card>
-              <CardContent className="pt-6">
-                <div className="flex items-center justify-center py-12">
-                  <div className="text-center">
-                    <svg
-                      className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                    >
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                      <path
-                        className="opacity-75"
-                        fill="currentColor"
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      />
-                    </svg>
-                    <p className="mt-2 text-sm text-neutral-500">Loading workflows...</p>
+          {/* Workflows Grid */}
+          <div className="grid gap-4">
+            {isLoading ? (
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center justify-center py-12">
+                    <div className="text-center">
+                      <svg
+                        className="h-8 w-8 animate-spin mx-auto text-neutral-900"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path
+                          className="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        />
+                      </svg>
+                      <p className="mt-2 text-sm text-neutral-500">Loading workflows...</p>
+                    </div>
                   </div>
-                </div>
-              </CardContent>
-            </Card>
-          ) : data?.workflows.length === 0 ? (
-            <Card>
-              <CardContent className="pt-6">
-                <div className="text-center py-12">
-                  <WorkflowIcon className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                  <h3 className="text-lg font-medium text-neutral-900 mb-2">No workflows found</h3>
-                  <p className="text-neutral-500 mb-6">
-                    {search ? 'Try adjusting your search terms' : 'Get started by creating your first workflow'}
-                  </p>
-                  {!search && (
-                    <Button onClick={() => setShowCreateDialog(true)}>
-                      <Plus className="h-4 w-4" />
-                      Create Workflow
-                    </Button>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          ) : (
-            <>
-              {data?.workflows.map(workflow => (
-                <Card key={workflow.id} className={workflow.enabled ? 'border-green-200' : ''}>
-                  <CardHeader>
-                    <div className="flex items-start justify-between">
-                      <div className="flex-1">
-                        <div className="flex items-center gap-3">
-                          <CardTitle>{workflow.name}</CardTitle>
-                          <span
-                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                              workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800'
-                            }`}
+                </CardContent>
+              </Card>
+            ) : data?.workflows.length === 0 ? (
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="text-center py-12">
+                    <WorkflowIcon className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
+                    <h3 className="text-lg font-medium text-neutral-900 mb-2">No workflows found</h3>
+                    <p className="text-neutral-500 mb-6">
+                      {search ? 'Try adjusting your search terms' : 'Get started by creating your first workflow'}
+                    </p>
+                    {!search && (
+                      <Button onClick={() => setShowCreateDialog(true)}>
+                        <Plus className="h-4 w-4" />
+                        Create Workflow
+                      </Button>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            ) : (
+              <>
+                {data?.workflows.map(workflow => (
+                  <Card key={workflow.id} className={workflow.enabled ? 'border-green-200' : ''}>
+                    <CardHeader>
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-3">
+                            <CardTitle>{workflow.name}</CardTitle>
+                            <Badge variant={workflow.enabled ? 'green' : 'neutral'}>
+                              {workflow.enabled ? (
+                                <>
+                                  <Power className="h-3 w-3 mr-1" />
+                                  Active
+                                </>
+                              ) : (
+                                <>
+                                  <PowerOff className="h-3 w-3 mr-1" />
+                                  Disabled
+                                </>
+                              )}
+                            </Badge>
+
+                            {workflow.triggerConfig &&
+                              typeof workflow.triggerConfig === 'object' &&
+                              'eventName' in workflow.triggerConfig && (
+                                <Badge variant={'info'}>{String(workflow.triggerConfig.eventName)}</Badge>
+                              )}
+                          </div>
+                          {workflow.description && (
+                            <CardDescription className="mt-2">{workflow.description}</CardDescription>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2 ml-4">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleToggleEnabled(workflow.id, workflow.enabled)}
                           >
                             {workflow.enabled ? (
-                              <>
-                                <Power className="h-3 w-3 mr-1" />
-                                Active
-                              </>
+                              <PowerOff className="h-4 w-4 text-orange-600" />
                             ) : (
-                              <>
-                                <PowerOff className="h-3 w-3 mr-1" />
-                                Disabled
-                              </>
+                              <Power className="h-4 w-4 text-green-600" />
                             )}
-                          </span>
-                          {workflow.triggerConfig &&
-                            typeof workflow.triggerConfig === 'object' &&
-                            'eventName' in workflow.triggerConfig && (
-                              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                                {String(workflow.triggerConfig.eventName)}
-                              </span>
-                            )}
-                        </div>
-                        {workflow.description && (
-                          <CardDescription className="mt-2">{workflow.description}</CardDescription>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-2 ml-4">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleToggleEnabled(workflow.id, workflow.enabled)}
-                        >
-                          {workflow.enabled ? (
-                            <PowerOff className="h-4 w-4 text-orange-600" />
-                          ) : (
-                            <Power className="h-4 w-4 text-green-600" />
-                          )}
-                        </Button>
-                        <Link href={`/workflows/${workflow.id}`}>
-                          <Button variant="ghost" size="sm">
-                            <Edit className="h-4 w-4" />
                           </Button>
-                        </Link>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => {
-                            setWorkflowToDelete(workflow.id);
-                            setShowDeleteDialog(true);
-                          }}
-                        >
-                          <Trash2 className="h-4 w-4 text-red-600" />
-                        </Button>
+                          <Link href={`/workflows/${workflow.id}`}>
+                            <Button variant="ghost" size="sm">
+                              <Edit className="h-4 w-4" />
+                            </Button>
+                          </Link>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              setWorkflowToDelete(workflow.id);
+                              setShowDeleteDialog(true);
+                            }}
+                          >
+                            <Trash2 className="h-4 w-4 text-red-600" />
+                          </Button>
+                        </div>
                       </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex items-center gap-6 text-sm text-neutral-500">
-                      <div>
-                        <span className="font-medium text-neutral-900">{workflow._count?.steps ?? 0}</span> steps
+                    </CardHeader>
+                    <CardContent>
+                      <div className="flex items-center gap-6 text-sm text-neutral-500">
+                        <div>
+                          <span className="font-medium text-neutral-900">{workflow._count?.steps ?? 0}</span> steps
+                        </div>
+                        <div>
+                          <span className="font-medium text-neutral-900">{workflow._count?.executions ?? 0}</span>{' '}
+                          executions
+                        </div>
+                        <div>Created {new Date(workflow.createdAt).toLocaleDateString()}</div>
                       </div>
-                      <div>
-                        <span className="font-medium text-neutral-900">{workflow._count?.executions ?? 0}</span>{' '}
-                        executions
-                      </div>
-                      <div>Created {new Date(workflow.createdAt).toLocaleDateString()}</div>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
+                    </CardContent>
+                  </Card>
+                ))}
 
-              {/* Pagination */}
-              {data && data.totalPages > 1 && (
-                <div className="flex items-center justify-between mt-6">
-                  <p className="text-sm text-neutral-500">
-                    Showing {(page - 1) * data.pageSize + 1} to {Math.min(page * data.pageSize, data.total)} of{' '}
-                    {data.total} workflows
-                  </p>
-                  <div className="flex items-center gap-2">
-                    <Button variant="outline" size="sm" onClick={() => setPage(p => p - 1)} disabled={page === 1}>
-                      Previous
-                    </Button>
-                    <span className="text-sm text-neutral-700">
-                      Page {page} of {data.totalPages}
-                    </span>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => setPage(p => p + 1)}
-                      disabled={page === data.totalPages}
-                    >
-                      Next
-                    </Button>
+                {/* Pagination */}
+                {data && data.totalPages > 1 && (
+                  <div className="flex items-center justify-between mt-6">
+                    <p className="text-sm text-neutral-500">
+                      Showing {(page - 1) * data.pageSize + 1} to {Math.min(page * data.pageSize, data.total)} of{' '}
+                      {data.total} workflows
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm" onClick={() => setPage(p => p - 1)} disabled={page === 1}>
+                        Previous
+                      </Button>
+                      <span className="text-sm text-neutral-700">
+                        Page {page} of {data.totalPages}
+                      </span>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setPage(p => p + 1)}
+                        disabled={page === data.totalPages}
+                      >
+                        Next
+                      </Button>
+                    </div>
                   </div>
-                </div>
-              )}
-            </>
-          )}
+                )}
+              </>
+            )}
+          </div>
         </div>
-      </div>
 
-      {/* Create Workflow Dialog */}
-      <CreateWorkflowDialog open={showCreateDialog} onOpenChange={setShowCreateDialog} onSuccess={() => mutate()} />
+        {/* Create Workflow Dialog */}
+        <CreateWorkflowDialog open={showCreateDialog} onOpenChange={setShowCreateDialog} onSuccess={() => mutate()} />
 
-      <ConfirmDialog
-        open={showDeleteDialog}
-        onOpenChange={setShowDeleteDialog}
-        onConfirm={handleDelete}
-        title="Delete Workflow"
-        description="Are you sure you want to delete this workflow? This action cannot be undone."
-        confirmText="Delete"
-        variant="destructive"
-      />
-    </DashboardLayout>
+        <ConfirmDialog
+          open={showDeleteDialog}
+          onOpenChange={setShowDeleteDialog}
+          onConfirm={handleDelete}
+          title="Delete Workflow"
+          description="Are you sure you want to delete this workflow? This action cannot be undone."
+          confirmText="Delete"
+          variant="destructive"
+        />
+      </DashboardLayout>
     </>
   );
 }
@@ -440,7 +436,13 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
           </div>
 
           <DialogFooter className="flex-col sm:flex-row gap-2">
-            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting} className="w-full sm:w-auto">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isSubmitting}
+              className="w-full sm:w-auto"
+            >
               Cancel
             </Button>
             <Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
diff --git a/apps/wiki/next-env.d.ts b/apps/wiki/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/apps/wiki/next-env.d.ts
+++ b/apps/wiki/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/packages/shared/src/schemas/index.ts b/packages/shared/src/schemas/index.ts
index 133a847..371e39a 100644
--- a/packages/shared/src/schemas/index.ts
+++ b/packages/shared/src/schemas/index.ts
@@ -394,3 +394,13 @@ export const BillingLimitSchemas = {
     transactional: z.coerce.number().int().positive().nullable(),
   }),
 } as const;
+
+export const MembershipSchemas = {
+  addMember: z.object({
+    email,
+    role: z.enum(['ADMIN', 'MEMBER']).default('MEMBER'),
+  }),
+  updateRole: z.object({
+    role: z.enum(['ADMIN', 'MEMBER']),
+  }),
+} as const;
diff --git a/packages/ui/src/components/atoms/Badge.tsx b/packages/ui/src/components/atoms/Badge.tsx
index 9fbdb6f..2a0ce87 100644
--- a/packages/ui/src/components/atoms/Badge.tsx
+++ b/packages/ui/src/components/atoms/Badge.tsx
@@ -8,12 +8,18 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-neutral-900 text-neutral-50',
+        default: 'border-transparent bg-neutral-100 text-neutral-900',
         secondary: 'border-transparent bg-neutral-100 text-neutral-900',
         destructive: 'border-transparent bg-red-100 text-red-900',
         outline: 'text-neutral-950',
         success: 'border-transparent bg-green-100 text-green-900',
         warning: 'border-transparent bg-yellow-100 text-yellow-900',
+        // Additional semantic variants for common use cases
+        info: 'border-transparent bg-blue-100 text-blue-900',
+        orange: 'border-transparent bg-orange-100 text-orange-800',
+        green: 'border-transparent bg-green-100 text-green-800',
+        red: 'border-transparent bg-red-100 text-red-800',
+        neutral: 'border-transparent bg-neutral-50 text-neutral-600',
       },
     },
     defaultVariants: {