diff --git a/apps/studio/src/hooks/useOrganizationMembers.ts b/apps/studio/src/hooks/useOrganizationMembers.ts
new file mode 100644
index 000000000..c8b759350
--- /dev/null
+++ b/apps/studio/src/hooks/useOrganizationMembers.ts
@@ -0,0 +1,244 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * React hooks for organization member and invitation management.
+ * Built on top of better-auth's organization plugin APIs.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { useClient } from '@objectstack/client-react';
+
+export interface OrganizationMember {
+  id: string;
+  userId: string;
+  organizationId: string;
+  role: string;
+  createdAt?: string;
+  user?: {
+    id: string;
+    name?: string;
+    email?: string;
+    image?: string;
+  };
+}
+
+export interface OrganizationInvitation {
+  id: string;
+  email: string;
+  organizationId: string;
+  role: string;
+  status: 'pending' | 'accepted' | 'rejected' | 'expired' | 'canceled';
+  inviterId: string;
+  expiresAt: string;
+  createdAt: string;
+}
+
+/**
+ * Hook to manage members of an organization
+ */
+export function useOrganizationMembers(organizationId: string | undefined) {
+  const client = useClient() as any;
+  const [members, setMembers] = useState<OrganizationMember[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const loadMembers = useCallback(async () => {
+    if (!organizationId || !client?.organizations) return;
+    
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await client.organizations.listMembers(organizationId);
+      const membersList = res?.members ?? res?.data?.members ?? res ?? [];
+      setMembers(membersList);
+    } catch (err) {
+      setError(err as Error);
+      setMembers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, organizationId]);
+
+  useEffect(() => {
+    loadMembers();
+  }, [loadMembers]);
+
+  const inviteMember = useCallback(
+    async (email: string, role: string = 'member') => {
+      if (!organizationId || !client?.organizations) {
+        throw new Error('Organization ID or client not available');
+      }
+
+      const res = await client.organizations.invite({
+        email,
+        role,
+        organizationId,
+      });
+
+      // Reload members after invitation
+      await loadMembers();
+      return res;
+    },
+    [client, organizationId, loadMembers]
+  );
+
+  const removeMember = useCallback(
+    async (userId: string) => {
+      if (!organizationId || !client?.organizations) {
+        throw new Error('Organization ID or client not available');
+      }
+
+      // Note: better-auth's organization plugin may not have a direct remove member endpoint
+      // This would typically be done through the data API or a custom endpoint
+      // For now, we'll use a placeholder that would need to be implemented
+      const route = '/api/v1/auth';
+      const res = await client.fetch(`${client.baseUrl}${route}/organization/remove-member`, {
+        method: 'POST',
+        body: JSON.stringify({ organizationId, userId }),
+      });
+
+      if (!res.ok) {
+        throw new Error('Failed to remove member');
+      }
+
+      // Reload members after removal
+      await loadMembers();
+      return res.json();
+    },
+    [client, organizationId, loadMembers]
+  );
+
+  const updateMemberRole = useCallback(
+    async (userId: string, newRole: string) => {
+      if (!organizationId || !client?.organizations) {
+        throw new Error('Organization ID or client not available');
+      }
+
+      // Note: Role update would need to be implemented via better-auth or custom endpoint
+      const route = '/api/v1/auth';
+      const res = await client.fetch(`${client.baseUrl}${route}/organization/update-member-role`, {
+        method: 'POST',
+        body: JSON.stringify({ organizationId, userId, role: newRole }),
+      });
+
+      if (!res.ok) {
+        throw new Error('Failed to update member role');
+      }
+
+      // Reload members after update
+      await loadMembers();
+      return res.json();
+    },
+    [client, organizationId, loadMembers]
+  );
+
+  return {
+    members,
+    loading,
+    error,
+    reload: loadMembers,
+    inviteMember,
+    removeMember,
+    updateMemberRole,
+  };
+}
+
+/**
+ * Hook to manage organization invitations
+ */
+export function useOrganizationInvitations(organizationId: string | undefined) {
+  const client = useClient() as any;
+  const [invitations, setInvitations] = useState<OrganizationInvitation[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const loadInvitations = useCallback(async () => {
+    if (!organizationId || !client?.organizations) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      // Note: better-auth may not have a direct list invitations endpoint
+      // This would need to query the sys_invitation object via data API
+      const route = '/api/v1/data';
+      const res = await client.fetch(
+        `${client.baseUrl}${route}/sys__invitation?filter=organization_id eq '${organizationId}'&sort=-created_at`
+      );
+      
+      if (!res.ok) {
+        throw new Error('Failed to load invitations');
+      }
+
+      const data = await res.json();
+      const invitationsList = data?.data?.items ?? data?.items ?? [];
+      setInvitations(invitationsList);
+    } catch (err) {
+      setError(err as Error);
+      setInvitations([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, organizationId]);
+
+  useEffect(() => {
+    loadInvitations();
+  }, [loadInvitations]);
+
+  const cancelInvitation = useCallback(
+    async (invitationId: string) => {
+      if (!client) {
+        throw new Error('Client not available');
+      }
+
+      // Update invitation status to 'canceled'
+      const route = '/api/v1/data';
+      const res = await client.fetch(`${client.baseUrl}${route}/sys__invitation/${invitationId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ status: 'canceled' }),
+      });
+
+      if (!res.ok) {
+        throw new Error('Failed to cancel invitation');
+      }
+
+      // Reload invitations after cancellation
+      await loadInvitations();
+      return res.json();
+    },
+    [client, loadInvitations]
+  );
+
+  const resendInvitation = useCallback(
+    async (invitationId: string) => {
+      if (!client) {
+        throw new Error('Client not available');
+      }
+
+      // This would typically create a new invitation with the same email/role
+      // and cancel the old one
+      const route = '/api/v1/auth';
+      const res = await client.fetch(`${client.baseUrl}${route}/organization/resend-invitation`, {
+        method: 'POST',
+        body: JSON.stringify({ invitationId }),
+      });
+
+      if (!res.ok) {
+        throw new Error('Failed to resend invitation');
+      }
+
+      // Reload invitations after resending
+      await loadInvitations();
+      return res.json();
+    },
+    [client, loadInvitations]
+  );
+
+  return {
+    invitations,
+    loading,
+    error,
+    reload: loadInvitations,
+    cancelInvitation,
+    resendInvitation,
+  };
+}
diff --git a/apps/studio/src/routes/orgs.$orgId.tsx b/apps/studio/src/routes/orgs.$orgId.tsx
index 9f58a99c5..8b1fdc0b4 100644
--- a/apps/studio/src/routes/orgs.$orgId.tsx
+++ b/apps/studio/src/routes/orgs.$orgId.tsx
@@ -1,13 +1,41 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
-import { useEffect, useState } from 'react';
-import { ArrowLeft } from 'lucide-react';
-import { useClient } from '@objectstack/client-react';
+import { useState } from 'react';
+import { ArrowLeft, Clock, Mail, MoreVertical, Trash2, UserPlus, Users, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
 import { toast } from '@/hooks/use-toast';
 import { useOrganizations, useSession } from '@/hooks/useSession';
+import {
+  useOrganizationMembers,
+  useOrganizationInvitations,
+} from '@/hooks/useOrganizationMembers';
 
 export const Route = createFileRoute('/orgs/$orgId')({
   component: OrgDetailPage,
@@ -16,33 +44,27 @@ export const Route = createFileRoute('/orgs/$orgId')({
 function OrgDetailPage() {
   const { orgId } = Route.useParams();
   const navigate = useNavigate();
-  const client = useClient() as any;
   const { organizations } = useOrganizations();
   const { session, setActiveOrganization } = useSession();
   const org = organizations.find((o) => o.id === orgId);
-  const [members, setMembers] = useState<any[]>([]);
-  const [loadingMembers, setLoadingMembers] = useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-    async function loadMembers() {
-      if (!client?.organizations) return;
-      setLoadingMembers(true);
-      try {
-        const res = await client.organizations.listMembers(orgId);
-        if (cancelled) return;
-        setMembers(res?.members ?? res?.data?.members ?? res ?? []);
-      } catch {
-        if (!cancelled) setMembers([]);
-      } finally {
-        if (!cancelled) setLoadingMembers(false);
-      }
-    }
-    loadMembers();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, orgId]);
+  
+  const {
+    members,
+    loading: loadingMembers,
+    inviteMember,
+    removeMember,
+  } = useOrganizationMembers(orgId);
+
+  const {
+    invitations,
+    loading: loadingInvitations,
+    cancelInvitation,
+  } = useOrganizationInvitations(orgId);
+
+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteRole, setInviteRole] = useState('member');
+  const [inviting, setInviting] = useState(false);
 
   const handleSetActive = async () => {
     try {
@@ -57,12 +79,75 @@ function OrgDetailPage() {
     }
   };
 
+  const handleInviteMember = async () => {
+    if (!inviteEmail) {
+      toast({
+        title: 'Email required',
+        description: 'Please enter an email address',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setInviting(true);
+    try {
+      await inviteMember(inviteEmail, inviteRole);
+      toast({ title: 'Invitation sent successfully' });
+      setInviteDialogOpen(false);
+      setInviteEmail('');
+      setInviteRole('member');
+    } catch (err) {
+      toast({
+        title: 'Failed to send invitation',
+        description: (err as Error).message,
+        variant: 'destructive',
+      });
+    } finally {
+      setInviting(false);
+    }
+  };
+
+  const handleRemoveMember = async (userId: string, memberName: string) => {
+    if (!confirm(`Are you sure you want to remove ${memberName} from this organization?`)) {
+      return;
+    }
+
+    try {
+      await removeMember(userId);
+      toast({ title: 'Member removed successfully' });
+    } catch (err) {
+      toast({
+        title: 'Failed to remove member',
+        description: (err as Error).message,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleCancelInvitation = async (invitationId: string, email: string) => {
+    if (!confirm(`Cancel invitation for ${email}?`)) {
+      return;
+    }
+
+    try {
+      await cancelInvitation(invitationId);
+      toast({ title: 'Invitation canceled' });
+    } catch (err) {
+      toast({
+        title: 'Failed to cancel invitation',
+        description: (err as Error).message,
+        variant: 'destructive',
+      });
+    }
+  };
+
   const isActive = session?.activeOrganizationId === orgId;
+  const pendingInvitations = invitations.filter((i) => i.status === 'pending');
 
   return (
     <div className="flex flex-1 flex-col overflow-hidden">
       <div className="flex-1 px-6 py-8 overflow-auto">
-        <div className="mx-auto max-w-3xl space-y-6">
+        <div className="mx-auto max-w-4xl space-y-6">
           <div className="flex items-center justify-between">
             <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/orgs' })}>
               <ArrowLeft className="mr-1 h-4 w-4" /> Back
@@ -73,12 +158,25 @@ function OrgDetailPage() {
               </Button>
             )}
           </div>
+
+          {/* Organization Overview Card */}
           <Card>
             <CardHeader>
-              <CardTitle>{org?.name ?? 'Organization'}</CardTitle>
-              {org?.slug && (
-                <CardDescription className="font-mono text-xs">{org.slug}</CardDescription>
-              )}
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>{org?.name ?? 'Organization'}</CardTitle>
+                  {org?.slug && (
+                    <CardDescription className="font-mono text-xs mt-1">
+                      {org.slug}
+                    </CardDescription>
+                  )}
+                </div>
+                {isActive && (
+                  <Badge variant="outline" className="ml-2">
+                    Active
+                  </Badge>
+                )}
+              </div>
             </CardHeader>
             <CardContent className="space-y-3 text-sm">
               <div className="flex justify-between">
@@ -86,36 +184,188 @@ function OrgDetailPage() {
                 <code className="text-xs">{orgId}</code>
               </div>
               <div className="flex justify-between">
-                <span className="text-muted-foreground">Status</span>
-                <span>{isActive ? 'Active' : 'Inactive'}</span>
+                <span className="text-muted-foreground">Members</span>
+                <span>{members.length}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Pending Invitations</span>
+                <span>{pendingInvitations.length}</span>
               </div>
             </CardContent>
           </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Members</CardTitle>
-              <CardDescription>People with access to this organization.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              {loadingMembers && <p className="text-xs text-muted-foreground">Loading…</p>}
-              {!loadingMembers && members.length === 0 && (
-                <p className="text-xs text-muted-foreground">No members found.</p>
-              )}
-              <ul className="divide-y">
-                {members.map((m, i) => (
-                  <li key={m.id ?? i} className="flex items-center justify-between py-2 text-sm">
+
+          {/* Tabs for Members and Invitations */}
+          <Tabs defaultValue="members" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="members">
+                <Users className="mr-2 h-4 w-4" />
+                Members ({members.length})
+              </TabsTrigger>
+              <TabsTrigger value="invitations">
+                <Mail className="mr-2 h-4 w-4" />
+                Invitations ({pendingInvitations.length})
+              </TabsTrigger>
+            </TabsList>
+
+            {/* Members Tab */}
+            <TabsContent value="members" className="space-y-4">
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
                     <div>
-                      <div className="font-medium">{m.user?.name || m.name || m.userId}</div>
-                      {m.user?.email && (
-                        <div className="text-[11px] text-muted-foreground">{m.user.email}</div>
-                      )}
+                      <CardTitle className="text-base">Members</CardTitle>
+                      <CardDescription>
+                        People with access to this organization
+                      </CardDescription>
                     </div>
-                    <code className="text-[10px] text-muted-foreground">{m.role ?? 'member'}</code>
-                  </li>
-                ))}
-              </ul>
-            </CardContent>
-          </Card>
+                    <Button size="sm" onClick={() => setInviteDialogOpen(true)}>
+                      <UserPlus className="mr-2 h-4 w-4" />
+                      Invite
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {loadingMembers && (
+                    <p className="text-xs text-muted-foreground">Loading members...</p>
+                  )}
+                  {!loadingMembers && members.length === 0 && (
+                    <div className="text-center py-8">
+                      <Users className="mx-auto h-12 w-12 text-muted-foreground/50" />
+                      <p className="mt-4 text-sm text-muted-foreground">
+                        No members yet. Invite someone to get started.
+                      </p>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="mt-4"
+                        onClick={() => setInviteDialogOpen(true)}
+                      >
+                        <UserPlus className="mr-2 h-4 w-4" />
+                        Invite member
+                      </Button>
+                    </div>
+                  )}
+                  {!loadingMembers && members.length > 0 && (
+                    <div className="divide-y">
+                      {members.map((m) => (
+                        <div
+                          key={m.id}
+                          className="flex items-center justify-between py-3"
+                        >
+                          <div className="flex-1">
+                            <div className="font-medium text-sm">
+                              {m.user?.name || m.userId}
+                            </div>
+                            {m.user?.email && (
+                              <div className="text-xs text-muted-foreground">
+                                {m.user.email}
+                              </div>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <Badge variant="secondary" className="text-xs">
+                              {m.role ?? 'member'}
+                            </Badge>
+                            {m.role !== 'owner' && (
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                                    <MoreVertical className="h-4 w-4" />
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuItem
+                                    className="text-destructive"
+                                    onClick={() =>
+                                      handleRemoveMember(
+                                        m.userId,
+                                        m.user?.name || m.user?.email || m.userId
+                                      )
+                                    }
+                                  >
+                                    <Trash2 className="mr-2 h-4 w-4" />
+                                    Remove member
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            {/* Invitations Tab */}
+            <TabsContent value="invitations" className="space-y-4">
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <CardTitle className="text-base">Pending Invitations</CardTitle>
+                      <CardDescription>
+                        Invitations sent to join this organization
+                      </CardDescription>
+                    </div>
+                    <Button size="sm" onClick={() => setInviteDialogOpen(true)}>
+                      <UserPlus className="mr-2 h-4 w-4" />
+                      Send invitation
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {loadingInvitations && (
+                    <p className="text-xs text-muted-foreground">Loading invitations...</p>
+                  )}
+                  {!loadingInvitations && pendingInvitations.length === 0 && (
+                    <div className="text-center py-8">
+                      <Mail className="mx-auto h-12 w-12 text-muted-foreground/50" />
+                      <p className="mt-4 text-sm text-muted-foreground">
+                        No pending invitations
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-2">
+                        Invitations will appear here once sent
+                      </p>
+                    </div>
+                  )}
+                  {!loadingInvitations && pendingInvitations.length > 0 && (
+                    <div className="divide-y">
+                      {pendingInvitations.map((inv) => (
+                        <div
+                          key={inv.id}
+                          className="flex items-center justify-between py-3"
+                        >
+                          <div className="flex-1">
+                            <div className="font-medium text-sm">{inv.email}</div>
+                            <div className="flex items-center gap-2 mt-1">
+                              <Badge variant="outline" className="text-xs">
+                                {inv.role}
+                              </Badge>
+                              <span className="text-xs text-muted-foreground flex items-center gap-1">
+                                <Clock className="h-3 w-3" />
+                                Expires {new Date(inv.expiresAt).toLocaleDateString()}
+                              </span>
+                            </div>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => handleCancelInvitation(inv.id, inv.email)}
+                          >
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+
           <p className="text-xs text-muted-foreground">
             Need to manage environments?{' '}
             <Link to="/environments" className="text-primary hover:underline">
@@ -124,6 +374,61 @@ function OrgDetailPage() {
           </p>
         </div>
       </div>
+
+      {/* Invite Member Dialog */}
+      <Dialog open={inviteDialogOpen} onOpenChange={setInviteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Invite member</DialogTitle>
+            <DialogDescription>
+              Send an invitation to join {org?.name}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email address</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="colleague@example.com"
+                value={inviteEmail}
+                onChange={(e) => setInviteEmail(e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="role">Role</Label>
+              <Select value={inviteRole} onValueChange={setInviteRole}>
+                <SelectTrigger id="role">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="owner">Owner</SelectItem>
+                  <SelectItem value="admin">Admin</SelectItem>
+                  <SelectItem value="member">Member</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                {inviteRole === 'owner' && 'Full access to manage the organization'}
+                {inviteRole === 'admin' &&
+                  'Can manage members and settings, but cannot delete the organization'}
+                {inviteRole === 'member' && 'Can view and use organization resources'}
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setInviteDialogOpen(false)}
+              disabled={inviting}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleInviteMember} disabled={inviting}>
+              {inviting ? 'Sending...' : 'Send invitation'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }