diff --git a/apps/web/app/api/workspaces/[workspaceId]/email-accounts/[emailAccountId]/route.ts b/apps/web/app/api/workspaces/[workspaceId]/email-accounts/[emailAccountId]/route.ts
new file mode 100644
index 0000000..c4c385b
--- /dev/null
+++ b/apps/web/app/api/workspaces/[workspaceId]/email-accounts/[emailAccountId]/route.ts
@@ -0,0 +1,133 @@
+import { auth } from "@/app/api/auth/[...nextauth]/auth";
+import prisma from "@/utils/prisma";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const updateEmailAccountSchema = z.object({
+  name: z.string().trim().min(1).max(80).optional(),
+  email: z
+    .string()
+    .trim()
+    .email()
+    .max(255)
+    .transform((email) => email.toLowerCase())
+    .optional(),
+});
+
+async function canManageWorkspace(workspaceId: string, userId: string) {
+  const membership = await prisma.membership.findFirst({
+    where: {
+      organizationId: workspaceId,
+      userId,
+    },
+  });
+
+  return membership?.role === "OWNER" || membership?.role === "ADMIN";
+}
+
+async function getEmailAccount(workspaceId: string, emailAccountId: string) {
+  return prisma.emailAccount.findFirst({
+    where: {
+      id: emailAccountId,
+      organizationId: workspaceId,
+    },
+    select: {
+      id: true,
+      email: true,
+    },
+  });
+}
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: { workspaceId: string; emailAccountId: string } },
+) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  if (!(await canManageWorkspace(params.workspaceId, session.user.id))) {
+    return NextResponse.json({ error: "Workspace not found" }, { status: 404 });
+  }
+
+  const targetEmailAccount = await getEmailAccount(
+    params.workspaceId,
+    params.emailAccountId,
+  );
+  if (!targetEmailAccount) {
+    return NextResponse.json(
+      { error: "Email account not found" },
+      { status: 404 },
+    );
+  }
+
+  const parsed = updateEmailAccountSchema.safeParse(await request.json());
+  if (!parsed.success || (!parsed.data.name && !parsed.data.email)) {
+    return NextResponse.json(
+      { error: "Invalid email account payload" },
+      { status: 400 },
+    );
+  }
+
+  if (parsed.data.email && parsed.data.email !== targetEmailAccount.email) {
+    const existingEmailAccount = await prisma.emailAccount.findFirst({
+      where: {
+        organizationId: params.workspaceId,
+        email: parsed.data.email,
+        NOT: { id: targetEmailAccount.id },
+      },
+    });
+    if (existingEmailAccount) {
+      return NextResponse.json(
+        { error: "Email account already exists in this workspace" },
+        { status: 409 },
+      );
+    }
+  }
+
+  const emailAccount = await prisma.emailAccount.update({
+    where: { id: targetEmailAccount.id },
+    data: parsed.data,
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
+  return NextResponse.json({ emailAccount });
+}
+
+export async function DELETE(
+  _request: Request,
+  { params }: { params: { workspaceId: string; emailAccountId: string } },
+) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  if (!(await canManageWorkspace(params.workspaceId, session.user.id))) {
+    return NextResponse.json({ error: "Workspace not found" }, { status: 404 });
+  }
+
+  const targetEmailAccount = await getEmailAccount(
+    params.workspaceId,
+    params.emailAccountId,
+  );
+  if (!targetEmailAccount) {
+    return NextResponse.json(
+      { error: "Email account not found" },
+      { status: 404 },
+    );
+  }
+
+  await prisma.emailAccount.delete({
+    where: { id: targetEmailAccount.id },
+  });
+
+  return NextResponse.json({ success: true });
+}
diff --git a/apps/web/app/api/workspaces/[workspaceId]/email-accounts/route.ts b/apps/web/app/api/workspaces/[workspaceId]/email-accounts/route.ts
new file mode 100644
index 0000000..d97bfaa
--- /dev/null
+++ b/apps/web/app/api/workspaces/[workspaceId]/email-accounts/route.ts
@@ -0,0 +1,120 @@
+import { auth } from "@/app/api/auth/[...nextauth]/auth";
+import prisma from "@/utils/prisma";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const emailAccountSchema = z.object({
+  name: z.string().trim().min(1).max(80),
+  email: z
+    .string()
+    .trim()
+    .email()
+    .max(255)
+    .transform((email) => email.toLowerCase()),
+});
+
+async function getWorkspaceMembership(workspaceId: string, userId: string) {
+  return prisma.membership.findFirst({
+    where: {
+      organizationId: workspaceId,
+      userId,
+    },
+  });
+}
+
+async function canManageWorkspace(workspaceId: string, userId: string) {
+  const membership = await getWorkspaceMembership(workspaceId, userId);
+  return membership?.role === "OWNER" || membership?.role === "ADMIN";
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: { workspaceId: string } },
+) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  const membership = await getWorkspaceMembership(
+    params.workspaceId,
+    session.user.id,
+  );
+  if (!membership) {
+    return NextResponse.json({ error: "Workspace not found" }, { status: 404 });
+  }
+
+  const emailAccounts = await prisma.emailAccount.findMany({
+    where: { organizationId: params.workspaceId },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+    orderBy: { createdAt: "asc" },
+  });
+
+  return NextResponse.json({ emailAccounts });
+}
+
+export async function POST(
+  request: Request,
+  { params }: { params: { workspaceId: string } },
+) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  if (!(await canManageWorkspace(params.workspaceId, session.user.id))) {
+    return NextResponse.json({ error: "Workspace not found" }, { status: 404 });
+  }
+
+  const parsed = emailAccountSchema.safeParse(await request.json());
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid email account payload" },
+      { status: 400 },
+    );
+  }
+
+  const accountCount = await prisma.emailAccount.count({
+    where: { organizationId: params.workspaceId },
+  });
+  if (accountCount >= 10) {
+    return NextResponse.json(
+      { error: "A workspace can have up to 10 email accounts" },
+      { status: 400 },
+    );
+  }
+
+  const existingEmailAccount = await prisma.emailAccount.findFirst({
+    where: {
+      organizationId: params.workspaceId,
+      email: parsed.data.email,
+    },
+  });
+  if (existingEmailAccount) {
+    return NextResponse.json(
+      { error: "Email account already exists in this workspace" },
+      { status: 409 },
+    );
+  }
+
+  const emailAccount = await prisma.emailAccount.create({
+    data: {
+      organizationId: params.workspaceId,
+      name: parsed.data.name,
+      email: parsed.data.email,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
+  return NextResponse.json({ emailAccount }, { status: 201 });
+}
diff --git a/apps/web/app/api/workspaces/[workspaceId]/members/[memberId]/route.ts b/apps/web/app/api/workspaces/[workspaceId]/members/[memberId]/route.ts
new file mode 100644
index 0000000..6aa5fbf
--- /dev/null
+++ b/apps/web/app/api/workspaces/[workspaceId]/members/[memberId]/route.ts
@@ -0,0 +1,125 @@
+import { auth } from "@/app/api/auth/[...nextauth]/auth";
+import prisma from "@/utils/prisma";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const updateMemberSchema = z.object({
+  role: z.enum(["ADMIN", "USER"]),
+});
+
+async function getOwnerMembership(workspaceId: string, userId: string) {
+  return prisma.membership.findFirst({
+    where: {
+      organizationId: workspaceId,
+      userId,
+      role: "OWNER",
+    },
+  });
+}
+
+async function getTargetMembership(workspaceId: string, memberId: string) {
+  return prisma.membership.findFirst({
+    where: {
+      id: memberId,
+      organizationId: workspaceId,
+    },
+    select: {
+      id: true,
+      role: true,
+      userId: true,
+    },
+  });
+}
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: { workspaceId: string; memberId: string } },
+) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  if (!(await getOwnerMembership(params.workspaceId, session.user.id))) {
+    return NextResponse.json({ error: "Workspace not found" }, { status: 404 });
+  }
+
+  const targetMembership = await getTargetMembership(
+    params.workspaceId,
+    params.memberId,
+  );
+  if (!targetMembership) {
+    return NextResponse.json({ error: "Member not found" }, { status: 404 });
+  }
+  if (targetMembership.role === "OWNER") {
+    return NextResponse.json(
+      { error: "Owner role cannot be changed" },
+      { status: 400 },
+    );
+  }
+
+  const parsed = updateMemberSchema.safeParse(await request.json());
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid member payload" },
+      { status: 400 },
+    );
+  }
+
+  const member = await prisma.membership.update({
+    where: { id: targetMembership.id },
+    data: { role: parsed.data.role },
+    select: {
+      id: true,
+      role: true,
+      invitedName: true,
+      invitedEmail: true,
+      user: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+          image: true,
+        },
+      },
+    },
+  });
+
+  return NextResponse.json({ member });
+}
+
+export async function DELETE(
+  _request: Request,
+  { params }: { params: { workspaceId: string; memberId: string } },
+) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  if (!(await getOwnerMembership(params.workspaceId, session.user.id))) {
+    return NextResponse.json({ error: "Workspace not found" }, { status: 404 });
+  }
+
+  const targetMembership = await getTargetMembership(
+    params.workspaceId,
+    params.memberId,
+  );
+  if (!targetMembership) {
+    return NextResponse.json({ error: "Member not found" }, { status: 404 });
+  }
+  if (targetMembership.role === "OWNER") {
+    return NextResponse.json(
+      { error: "Owner membership cannot be removed" },
+      { status: 400 },
+    );
+  }
+
+  await prisma.membership.delete({
+    where: { id: targetMembership.id },
+  });
+
+  return NextResponse.json({ success: true });
+}
diff --git a/apps/web/app/api/workspaces/[workspaceId]/members/route.ts b/apps/web/app/api/workspaces/[workspaceId]/members/route.ts
new file mode 100644
index 0000000..e03b05b
--- /dev/null
+++ b/apps/web/app/api/workspaces/[workspaceId]/members/route.ts
@@ -0,0 +1,133 @@
+import { auth } from "@/app/api/auth/[...nextauth]/auth";
+import prisma from "@/utils/prisma";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const inviteMemberSchema = z.object({
+  name: z.string().trim().max(80).optional(),
+  email: z
+    .string()
+    .trim()
+    .email()
+    .max(255)
+    .transform((email) => email.toLowerCase()),
+  role: z.enum(["ADMIN", "USER"]).default("USER"),
+});
+
+async function getWorkspaceMembership(workspaceId: string, userId: string) {
+  return prisma.membership.findFirst({
+    where: {
+      organizationId: workspaceId,
+      userId,
+    },
+  });
+}
+
+async function canManageWorkspace(workspaceId: string, userId: string) {
+  const membership = await getWorkspaceMembership(workspaceId, userId);
+  return membership?.role === "OWNER" || membership?.role === "ADMIN";
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: { workspaceId: string } },
+) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  const membership = await getWorkspaceMembership(
+    params.workspaceId,
+    session.user.id,
+  );
+  if (!membership) {
+    return NextResponse.json({ error: "Workspace not found" }, { status: 404 });
+  }
+
+  const members = await prisma.membership.findMany({
+    where: { organizationId: params.workspaceId },
+    select: {
+      id: true,
+      role: true,
+      invitedName: true,
+      invitedEmail: true,
+      user: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+          image: true,
+        },
+      },
+    },
+    orderBy: { id: "asc" },
+  });
+
+  return NextResponse.json({ members });
+}
+
+export async function POST(
+  request: Request,
+  { params }: { params: { workspaceId: string } },
+) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  if (!(await canManageWorkspace(params.workspaceId, session.user.id))) {
+    return NextResponse.json({ error: "Workspace not found" }, { status: 404 });
+  }
+
+  const parsed = inviteMemberSchema.safeParse(await request.json());
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid member invite payload" },
+      { status: 400 },
+    );
+  }
+
+  const existingMembership = await prisma.membership.findFirst({
+    where: {
+      organizationId: params.workspaceId,
+      OR: [
+        { invitedEmail: parsed.data.email },
+        { user: { email: parsed.data.email } },
+      ],
+    },
+  });
+  if (existingMembership) {
+    return NextResponse.json(
+      { error: "Member already belongs to this workspace" },
+      { status: 409 },
+    );
+  }
+
+  const member = await prisma.membership.create({
+    data: {
+      organizationId: params.workspaceId,
+      role: parsed.data.role,
+      invitedName: parsed.data.name || null,
+      invitedEmail: parsed.data.email,
+    },
+    select: {
+      id: true,
+      role: true,
+      invitedName: true,
+      invitedEmail: true,
+      user: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+          image: true,
+        },
+      },
+    },
+  });
+
+  return NextResponse.json({ member }, { status: 201 });
+}
diff --git a/apps/web/app/api/workspaces/[workspaceId]/route.ts b/apps/web/app/api/workspaces/[workspaceId]/route.ts
new file mode 100644
index 0000000..119ebed
--- /dev/null
+++ b/apps/web/app/api/workspaces/[workspaceId]/route.ts
@@ -0,0 +1,59 @@
+import { auth } from "@/app/api/auth/[...nextauth]/auth";
+import prisma from "@/utils/prisma";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const updateWorkspaceSchema = z.object({
+  name: z.string().trim().min(1).max(80),
+  image: z.string().trim().url().optional().nullable(),
+});
+
+async function canManageWorkspace(workspaceId: string, userId: string) {
+  const membership = await prisma.membership.findFirst({
+    where: {
+      organizationId: workspaceId,
+      userId,
+    },
+    select: { role: true },
+  });
+
+  return membership?.role === "OWNER" || membership?.role === "ADMIN";
+}
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: { workspaceId: string } },
+) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  if (!(await canManageWorkspace(params.workspaceId, session.user.id))) {
+    return NextResponse.json({ error: "Workspace not found" }, { status: 404 });
+  }
+
+  const parsed = updateWorkspaceSchema.safeParse(await request.json());
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid workspace payload" },
+      { status: 400 },
+    );
+  }
+
+  const workspace = await prisma.organization.update({
+    where: { id: params.workspaceId },
+    data: {
+      name: parsed.data.name,
+      image: parsed.data.image || null,
+    },
+    select: {
+      id: true,
+      name: true,
+      image: true,
+    },
+  });
+
+  return NextResponse.json({ workspace });
+}
diff --git a/apps/web/app/api/workspaces/route.ts b/apps/web/app/api/workspaces/route.ts
new file mode 100644
index 0000000..29f895a
--- /dev/null
+++ b/apps/web/app/api/workspaces/route.ts
@@ -0,0 +1,187 @@
+import { auth } from "@/app/api/auth/[...nextauth]/auth";
+import prisma from "@/utils/prisma";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const createWorkspaceSchema = z.object({
+  name: z.string().trim().min(1).max(80),
+  image: z.string().url().optional().nullable(),
+  invitedMembers: z
+    .array(
+      z.object({
+        name: z.string().trim().max(80).optional(),
+        email: z
+          .string()
+          .trim()
+          .email()
+          .max(255)
+          .transform((email) => email.toLowerCase()),
+        role: z.enum(["ADMIN", "USER"]).default("USER"),
+      }),
+    )
+    .max(10)
+    .refine(
+      (members) =>
+        new Set(members.map((member) => member.email)).size === members.length,
+      "Invited members must have unique email addresses",
+    )
+    .optional(),
+  emailAccounts: z
+    .array(
+      z.object({
+        name: z.string().trim().min(1).max(80),
+        email: z
+          .string()
+          .trim()
+          .email()
+          .max(255)
+          .transform((email) => email.toLowerCase()),
+      }),
+    )
+    .max(10)
+    .refine(
+      (accounts) =>
+        new Set(accounts.map((account) => account.email)).size ===
+        accounts.length,
+      "Email accounts must have unique email addresses",
+    )
+    .optional(),
+});
+
+export async function GET() {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  const memberships = await prisma.membership.findMany({
+    where: { userId: session.user.id },
+    include: {
+      organization: {
+        include: {
+          membership: {
+            select: {
+              id: true,
+              role: true,
+              invitedName: true,
+              invitedEmail: true,
+              user: {
+                select: {
+                  id: true,
+                  name: true,
+                  email: true,
+                  image: true,
+                },
+              },
+            },
+            orderBy: { id: "asc" },
+          },
+          emailAccounts: {
+            select: {
+              id: true,
+              name: true,
+              email: true,
+            },
+            orderBy: { createdAt: "asc" },
+          },
+        },
+      },
+    },
+    orderBy: { id: "asc" },
+  });
+
+  return NextResponse.json({
+    workspaces: memberships.map((membership) => ({
+      id: membership.organization.id,
+      name: membership.organization.name,
+      image: membership.organization.image,
+      role: membership.role,
+      members: membership.organization.membership,
+      emailAccounts: membership.organization.emailAccounts,
+    })),
+  });
+}
+
+export async function POST(request: Request) {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  const parsed = createWorkspaceSchema.safeParse(await request.json());
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid workspace payload" },
+      { status: 400 },
+    );
+  }
+
+  const workspace = await prisma.organization.create({
+    data: {
+      name: parsed.data.name,
+      image: parsed.data.image || null,
+      emailAccounts: parsed.data.emailAccounts?.length
+        ? {
+            create: parsed.data.emailAccounts.map((emailAccount) => ({
+              name: emailAccount.name,
+              email: emailAccount.email,
+            })),
+          }
+        : undefined,
+      membership: {
+        create: [
+          {
+            role: "OWNER",
+            userId: session.user.id,
+          },
+          ...(parsed.data.invitedMembers ?? []).map((invitedMember) => ({
+            role: invitedMember.role,
+            invitedName: invitedMember.name || null,
+            invitedEmail: invitedMember.email,
+          })),
+        ],
+      },
+    },
+    include: {
+      membership: {
+        select: {
+          id: true,
+          role: true,
+          invitedName: true,
+          invitedEmail: true,
+          user: {
+            select: {
+              id: true,
+              name: true,
+              email: true,
+              image: true,
+            },
+          },
+        },
+      },
+      emailAccounts: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+        },
+      },
+    },
+  });
+
+  return NextResponse.json(
+    {
+      workspace: {
+        id: workspace.id,
+        name: workspace.name,
+        image: workspace.image,
+        role: "OWNER",
+        members: workspace.membership,
+        emailAccounts: workspace.emailAccounts,
+      },
+    },
+    { status: 201 },
+  );
+}
diff --git a/apps/web/components/mail/components/account-switcher.tsx b/apps/web/components/mail/components/account-switcher.tsx
index 3a94fb6..9d28bb8 100644
--- a/apps/web/components/mail/components/account-switcher.tsx
+++ b/apps/web/components/mail/components/account-switcher.tsx
@@ -25,11 +25,24 @@ export function AccountSwitcher({
   accounts,
 }: AccountSwitcherProps) {
   const [selectedAccount, setSelectedAccount] = React.useState<string>(
-    accounts[0].email,
+    accounts[0]?.email || "",
   );
+  const selectedAccountDetails = accounts.find(
+    (account) => account.email === selectedAccount,
+  );
+
+  React.useEffect(() => {
+    if (!accounts.some((account) => account.email === selectedAccount)) {
+      setSelectedAccount(accounts[0]?.email || "");
+    }
+  }, [accounts, selectedAccount]);
+
+  if (!accounts.length) {
+    return null;
+  }
 
   return (
-    <Select defaultValue={selectedAccount} onValueChange={setSelectedAccount}>
+    <Select value={selectedAccount} onValueChange={setSelectedAccount}>
       <SelectTrigger
         className={cn(
           "flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
@@ -39,12 +52,9 @@ export function AccountSwitcher({
         aria-label="Select account"
       >
         <SelectValue placeholder="Select an account">
-          {accounts.find((account) => account.email === selectedAccount)?.icon}
+          {selectedAccountDetails?.icon}
           <span className={cn("ml-2", isCollapsed && "hidden")}>
-            {
-              accounts.find((account) => account.email === selectedAccount)
-                ?.label
-            }
+            {selectedAccountDetails?.label}
           </span>
         </SelectValue>
       </SelectTrigger>
diff --git a/apps/web/components/mail/components/mail.tsx b/apps/web/components/mail/components/mail.tsx
index 19cac9b..2e37332 100644
--- a/apps/web/components/mail/components/mail.tsx
+++ b/apps/web/components/mail/components/mail.tsx
@@ -38,7 +38,7 @@ import {
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import useSWR from "swr";
+import useSWR, { useSWRConfig } from "swr";
 import {
   configAtom,
   openComposeAtom,
@@ -76,12 +76,50 @@ interface MailProps {
   navCollapsedSize: number;
 }
 
+interface WorkspaceResponse {
+  workspaces: {
+    id: string;
+    name: string;
+    members: {
+      id: string;
+      role: "OWNER" | "ADMIN" | "USER";
+      invitedName: string | null;
+      invitedEmail: string | null;
+      user: {
+        id: string;
+        name: string | null;
+        email: string | null;
+        image: string | null;
+      } | null;
+    }[];
+    emailAccounts: {
+      id: string;
+      name: string;
+      email: string;
+    }[];
+  }[];
+}
+
+type WorkspaceEmailAccountDraft = {
+  name: string;
+  email: string;
+};
+
+type InvitedMemberDraft = {
+  name: string;
+  email: string;
+  role: "ADMIN" | "USER";
+};
+
 export function Mail({
   accounts,
   defaultLayout = [225, 440, 655],
   defaultCollapsed = false,
   navCollapsedSize,
 }: MailProps) {
+  const { data: workspacesData } =
+    useSWR<WorkspaceResponse>("/api/workspaces");
+
   const {
     data: threadsData,
     error: threadsError,
@@ -125,6 +163,16 @@ export function Mail({
   const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
   const [file, setFile] = React.useState<File | undefined>();
   const [isUploading, setIsUploading] = React.useState(false);
+  const [workspaceName, setWorkspaceName] = React.useState("");
+  const [emailAccountDrafts, setEmailAccountDrafts] = React.useState<
+    WorkspaceEmailAccountDraft[]
+  >([{ name: "", email: "" }]);
+  const [invitedMemberDrafts, setInvitedMemberDrafts] = React.useState<
+    InvitedMemberDraft[]
+  >([{ name: "", email: "", role: "USER" }]);
+  const [workspaceError, setWorkspaceError] = React.useState<string | null>(
+    null,
+  );
   const [selectedTab, setSelectedTab] = useAtom(tabAtom);
   const [composeOpen, setComposeOpen] = useAtom(openComposeAtom);
   const [stateThreadsData, setStateThreadsData] = useAtom(threadsAtom);
@@ -133,9 +181,44 @@ export function Mail({
   );
 
   const { edgestore } = useEdgeStore();
+  const { mutate } = useSWRConfig();
 
   const mail = useAtomValue(configAtom);
 
+  const workspaceAccounts =
+    workspacesData?.workspaces.flatMap((workspace) =>
+      workspace.emailAccounts.map((emailAccount) => ({
+        label: emailAccount.name || workspace.name,
+        email: emailAccount.email,
+        icon: <MessagesSquare className="h-4 w-4" />,
+      })),
+    ) ?? [];
+  const visibleAccounts = workspaceAccounts.length
+    ? workspaceAccounts
+    : accounts;
+  const updateEmailAccountDraft = (
+    index: number,
+    updates: Partial<WorkspaceEmailAccountDraft>,
+  ) => {
+    setEmailAccountDrafts((drafts) =>
+      drafts.map((draft, draftIndex) =>
+        draftIndex === index ? { ...draft, ...updates } : draft,
+      ),
+    );
+    setWorkspaceError(null);
+  };
+  const updateInvitedMemberDraft = (
+    index: number,
+    updates: Partial<InvitedMemberDraft>,
+  ) => {
+    setInvitedMemberDrafts((drafts) =>
+      drafts.map((draft, draftIndex) =>
+        draftIndex === index ? { ...draft, ...updates } : draft,
+      ),
+    );
+    setWorkspaceError(null);
+  };
+
   React.useEffect(() => {
     if (threadsData) {
       setStateThreadsData(threadsData);
@@ -246,9 +329,9 @@ export function Mail({
         <WorkspaceSidebar />
         <Dialog
           open={createWorkspaceOpen}
-          onOpenChange={() => setCreateWorkspaceOpen(!createWorkspaceOpen)}
+          onOpenChange={setCreateWorkspaceOpen}
         >
-          <DialogContent className="sm:max-w-[625px]">
+          <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[625px]">
             <DialogHeader>
               <DialogTitle className="pb-2 font-cal text-xl font-bold">
                 Create Workspace
@@ -267,12 +350,175 @@ export function Mail({
               </div>
               <div className="flex flex-col space-y-2">
                 <Label>Name</Label>
-                <Input type="text" name="name" />
+                <Input
+                  type="text"
+                  name="name"
+                  value={workspaceName}
+                  onChange={(event) => {
+                    setWorkspaceName(event.target.value);
+                    setWorkspaceError(null);
+                  }}
+                />
               </div>
-              <div className="flex flex-col space-y-2">
-                <Label>Description</Label>
-                <Input type="text" name="description" />
+              <div className="space-y-3">
+                {emailAccountDrafts.map((emailAccount, index) => (
+                  <div
+                    key={`email-account-${index}`}
+                    className="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_1fr_auto]"
+                  >
+                    <div className="flex flex-col space-y-2">
+                      <Label>Email account name</Label>
+                      <Input
+                        type="text"
+                        name={`emailAccountName-${index}`}
+                        placeholder="Shared inbox"
+                        value={emailAccount.name}
+                        onChange={(event) =>
+                          updateEmailAccountDraft(index, {
+                            name: event.target.value,
+                          })
+                        }
+                      />
+                    </div>
+                    <div className="flex flex-col space-y-2">
+                      <Label>Email account address</Label>
+                      <Input
+                        type="email"
+                        name={`emailAccountEmail-${index}`}
+                        placeholder="team@example.com"
+                        value={emailAccount.email}
+                        onChange={(event) =>
+                          updateEmailAccountDraft(index, {
+                            email: event.target.value,
+                          })
+                        }
+                      />
+                    </div>
+                    <div className="flex items-end">
+                      <Button
+                        size="icon"
+                        variant="secondary"
+                        onClick={() => {
+                          setEmailAccountDrafts((drafts) =>
+                            drafts.length === 1
+                              ? [{ name: "", email: "" }]
+                              : drafts.filter(
+                                  (_draft, draftIndex) => draftIndex !== index,
+                                ),
+                          );
+                          setWorkspaceError(null);
+                        }}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                        <span className="sr-only">Remove email account</span>
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+                <Button
+                  variant="secondary"
+                  onClick={() =>
+                    setEmailAccountDrafts((drafts) => [
+                      ...drafts,
+                      { name: "", email: "" },
+                    ])
+                  }
+                  disabled={emailAccountDrafts.length >= 10}
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Add email account
+                </Button>
+              </div>
+              <div className="space-y-3">
+                {invitedMemberDrafts.map((invitedMember, index) => (
+                  <div
+                    key={`invited-member-${index}`}
+                    className="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_1fr_120px_auto]"
+                  >
+                    <div className="flex flex-col space-y-2">
+                      <Label>Invite name</Label>
+                      <Input
+                        type="text"
+                        name={`invitedMemberName-${index}`}
+                        placeholder="Alex Morgan"
+                        value={invitedMember.name}
+                        onChange={(event) =>
+                          updateInvitedMemberDraft(index, {
+                            name: event.target.value,
+                          })
+                        }
+                      />
+                    </div>
+                    <div className="flex flex-col space-y-2">
+                      <Label>Invite email</Label>
+                      <Input
+                        type="email"
+                        name={`invitedMemberEmail-${index}`}
+                        placeholder="alex@example.com"
+                        value={invitedMember.email}
+                        onChange={(event) =>
+                          updateInvitedMemberDraft(index, {
+                            email: event.target.value,
+                          })
+                        }
+                      />
+                    </div>
+                    <div className="flex flex-col space-y-2">
+                      <Label>Role</Label>
+                      <select
+                        name={`invitedMemberRole-${index}`}
+                        className="h-10 rounded-md border border-input bg-background px-3 py-2 text-sm"
+                        value={invitedMember.role}
+                        onChange={(event) =>
+                          updateInvitedMemberDraft(index, {
+                            role: event.target.value as "ADMIN" | "USER",
+                          })
+                        }
+                      >
+                        <option value="USER">User</option>
+                        <option value="ADMIN">Admin</option>
+                      </select>
+                    </div>
+                    <div className="flex items-end">
+                      <Button
+                        size="icon"
+                        variant="secondary"
+                        onClick={() => {
+                          setInvitedMemberDrafts((drafts) =>
+                            drafts.length === 1
+                              ? [{ name: "", email: "", role: "USER" }]
+                              : drafts.filter(
+                                  (_draft, draftIndex) => draftIndex !== index,
+                                ),
+                          );
+                          setWorkspaceError(null);
+                        }}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                        <span className="sr-only">Remove invite</span>
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+                <Button
+                  variant="secondary"
+                  onClick={() =>
+                    setInvitedMemberDrafts((drafts) => [
+                      ...drafts,
+                      { name: "", email: "", role: "USER" },
+                    ])
+                  }
+                  disabled={invitedMemberDrafts.length >= 10}
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Add invite
+                </Button>
               </div>
+              {workspaceError ? (
+                <DialogDescription className="text-sm text-red-500">
+                  {workspaceError}
+                </DialogDescription>
+              ) : null}
             </div>
             <DialogFooter>
               <div className="flex space-x-2">
@@ -284,8 +530,96 @@ export function Mail({
                 </Button>
                 <Button
                   onClick={async () => {
+                    const name = workspaceName.trim();
+                    if (!name) {
+                      setWorkspaceError("Workspace name is required.");
+                      return;
+                    }
+
+                    const emailAccounts = emailAccountDrafts
+                      .map((emailAccount) => ({
+                        name: emailAccount.name.trim(),
+                        email: emailAccount.email.trim(),
+                      }))
+                      .filter(
+                        (emailAccount) =>
+                          emailAccount.name || emailAccount.email,
+                      );
+                    const invitedMembers = invitedMemberDrafts
+                      .map((invitedMember) => ({
+                        name: invitedMember.name.trim(),
+                        email: invitedMember.email.trim(),
+                        role: invitedMember.role,
+                      }))
+                      .filter(
+                        (invitedMember) =>
+                          invitedMember.name || invitedMember.email,
+                      );
+
+                    if (
+                      emailAccounts.some(
+                        (emailAccount) => !emailAccount.email,
+                      )
+                    ) {
+                      setWorkspaceError("Email account address is required.");
+                      return;
+                    }
+                    if (
+                      emailAccounts.some(
+                        (emailAccount) =>
+                          !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(
+                            emailAccount.email,
+                          ),
+                      )
+                    ) {
+                      setWorkspaceError("Enter valid email account addresses.");
+                      return;
+                    }
+                    if (
+                      new Set(
+                        emailAccounts.map((emailAccount) =>
+                          emailAccount.email.toLowerCase(),
+                        ),
+                      ).size !== emailAccounts.length
+                    ) {
+                      setWorkspaceError("Email account addresses must be unique.");
+                      return;
+                    }
+                    if (
+                      invitedMembers.some(
+                        (invitedMember) => !invitedMember.email,
+                      )
+                    ) {
+                      setWorkspaceError("Invite email address is required.");
+                      return;
+                    }
+                    if (
+                      invitedMembers.some(
+                        (invitedMember) =>
+                          !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(
+                            invitedMember.email,
+                          ),
+                      )
+                    ) {
+                      setWorkspaceError("Enter valid invite email addresses.");
+                      return;
+                    }
+                    if (
+                      new Set(
+                        invitedMembers.map((invitedMember) =>
+                          invitedMember.email.toLowerCase(),
+                        ),
+                      ).size !== invitedMembers.length
+                    ) {
+                      setWorkspaceError("Invite email addresses must be unique.");
+                      return;
+                    }
+
+                    setWorkspaceError(null);
+                    setIsUploading(true);
+                    let image: string | undefined;
+
                     if (file) {
-                      setIsUploading(true);
                       const res = await edgestore.publicFiles.upload({
                         file,
                         onProgressChange: (progress) => {
@@ -293,14 +627,48 @@ export function Mail({
                           console.log(progress);
                         },
                       });
-                      // you can run some server action or api here
-                      // to add the necessary data to your database
-                      console.log(res);
+                      image = res.url;
+                    }
+
+                    const response = await fetch("/api/workspaces", {
+                      method: "POST",
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify({
+                        name,
+                        image,
+                        emailAccounts: emailAccounts.length
+                          ? emailAccounts.map((emailAccount) => ({
+                              name: emailAccount.name || emailAccount.email,
+                              email: emailAccount.email,
+                            }))
+                          : undefined,
+                        invitedMembers: invitedMembers.length
+                          ? invitedMembers.map((invitedMember) => ({
+                              name: invitedMember.name || undefined,
+                              email: invitedMember.email,
+                              role: invitedMember.role,
+                            }))
+                          : undefined,
+                      }),
+                    });
+
+                    if (!response.ok) {
+                      setWorkspaceError("Could not create workspace.");
+                      setIsUploading(false);
+                      return;
                     }
 
+                    await mutate("/api/workspaces");
+                    setWorkspaceName("");
+                    setEmailAccountDrafts([{ name: "", email: "" }]);
+                    setInvitedMemberDrafts([
+                      { name: "", email: "", role: "USER" },
+                    ]);
+                    setFile(undefined);
                     setIsUploading(false);
                     setCreateWorkspaceOpen(false);
                   }}
+                  disabled={isUploading}
                 >
                   {isUploading ? (
                     <>
@@ -333,7 +701,10 @@ export function Mail({
               isCollapsed ? "h-[52px] flex-col" : "px-2",
             )}
           >
-            <AccountSwitcher isCollapsed={isCollapsed} accounts={accounts} />
+            <AccountSwitcher
+              isCollapsed={isCollapsed}
+              accounts={visibleAccounts}
+            />
           </div>
           <Separator />
           <div className="flex h-[calc(100vh-52px)] flex-col justify-between">
diff --git a/apps/web/components/mail/components/workspace-sidebar.tsx b/apps/web/components/mail/components/workspace-sidebar.tsx
index a8d6cbc..62c5937 100644
--- a/apps/web/components/mail/components/workspace-sidebar.tsx
+++ b/apps/web/components/mail/components/workspace-sidebar.tsx
@@ -1,16 +1,84 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { openCreateWorkspaceOpenAtom } from "@/utils/store";
 import { useSetAtom } from "jotai";
-import { Plus } from "lucide-react";
+import {
+  Building2,
+  Loader2,
+  Mail,
+  Plus,
+  Save,
+  Trash2,
+  UserPlus,
+} from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
-import Image from "next/image";
+import * as React from "react";
+import useSWR from "swr";
+
+type EmailAccount = {
+  id: string;
+  name: string;
+  email: string;
+};
+
+type WorkspaceMember = {
+  id: string;
+  role: "OWNER" | "ADMIN" | "USER";
+  invitedName: string | null;
+  invitedEmail: string | null;
+  user: {
+    id: string;
+    name: string | null;
+    email: string | null;
+    image: string | null;
+  } | null;
+};
+
+type Workspace = {
+  id: string;
+  name: string;
+  image: string | null;
+  role: "OWNER" | "ADMIN" | "USER";
+  members: WorkspaceMember[];
+  emailAccounts: EmailAccount[];
+};
+
+type WorkspacesResponse = {
+  workspaces: Workspace[];
+};
+
+type EmailAccountDraft = {
+  name: string;
+  email: string;
+};
+
+type WorkspaceDraft = {
+  name: string;
+  image: string;
+};
+
+type MemberDraft = {
+  name: string;
+  email: string;
+  role: "ADMIN" | "USER";
+};
 
 const userNavigation = [
   { name: "Usage", href: "/usage" },
@@ -24,57 +92,804 @@ const userNavigation = [
 export function WorkspaceSidebar() {
   const { data: session, status } = useSession();
   const setCreateWorkspaceOpen = useSetAtom(openCreateWorkspaceOpenAtom);
+  const { data, isLoading, mutate } = useSWR<WorkspacesResponse>(
+    status === "authenticated" ? "/api/workspaces" : null,
+  );
+  const workspaces = data?.workspaces ?? [];
+  const [managingWorkspaceId, setManagingWorkspaceId] = React.useState<
+    string | null
+  >(null);
+  const [emailAccountDraft, setEmailAccountDraft] =
+    React.useState<EmailAccountDraft>({ name: "", email: "" });
+  const [editingEmailAccounts, setEditingEmailAccounts] = React.useState<
+    Record<string, EmailAccountDraft>
+  >({});
+  const [emailAccountError, setEmailAccountError] = React.useState<
+    string | null
+  >(null);
+  const [isSavingEmailAccount, setIsSavingEmailAccount] =
+    React.useState(false);
+  const [workspaceDraft, setWorkspaceDraft] =
+    React.useState<WorkspaceDraft>({ name: "", image: "" });
+  const [workspaceError, setWorkspaceError] = React.useState<string | null>(
+    null,
+  );
+  const [isSavingWorkspace, setIsSavingWorkspace] = React.useState(false);
+  const [memberDraft, setMemberDraft] = React.useState<MemberDraft>({
+    name: "",
+    email: "",
+    role: "USER",
+  });
+  const [editingMembers, setEditingMembers] = React.useState<
+    Record<string, { role: "ADMIN" | "USER" }>
+  >({});
+  const [memberError, setMemberError] = React.useState<string | null>(null);
+  const [isSavingMember, setIsSavingMember] = React.useState(false);
+  const managingWorkspace =
+    workspaces.find((workspace) => workspace.id === managingWorkspaceId) ??
+    null;
+
+  React.useEffect(() => {
+    if (!managingWorkspace) {
+      return;
+    }
+
+    setEditingEmailAccounts(
+      Object.fromEntries(
+        managingWorkspace.emailAccounts.map((emailAccount) => [
+          emailAccount.id,
+          {
+            name: emailAccount.name,
+            email: emailAccount.email,
+          },
+        ]),
+      ),
+    );
+    setWorkspaceDraft({
+      name: managingWorkspace.name,
+      image: managingWorkspace.image ?? "",
+    });
+    setEditingMembers(
+      Object.fromEntries(
+        managingWorkspace.members.map((member) => [
+          member.id,
+          {
+            role: member.role === "OWNER" ? "USER" : member.role,
+          },
+        ]),
+      ),
+    );
+    setEmailAccountDraft({ name: "", email: "" });
+    setMemberDraft({ name: "", email: "", role: "USER" });
+    setWorkspaceError(null);
+    setEmailAccountError(null);
+    setMemberError(null);
+  }, [managingWorkspace]);
+
+  const updateWorkspace = async () => {
+    if (!managingWorkspace) {
+      return;
+    }
+
+    const name = workspaceDraft.name.trim();
+    const image = workspaceDraft.image.trim();
+    if (!name) {
+      setWorkspaceError("Workspace name is required.");
+      return;
+    }
+    if (image) {
+      try {
+        new URL(image);
+      } catch {
+        setWorkspaceError("Enter a valid workspace image URL.");
+        return;
+      }
+    }
+
+    setIsSavingWorkspace(true);
+    setWorkspaceError(null);
+    const response = await fetch(`/api/workspaces/${managingWorkspace.id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, image: image || null }),
+    });
+    setIsSavingWorkspace(false);
+
+    if (!response.ok) {
+      setWorkspaceError("Could not update workspace details.");
+      return;
+    }
+
+    await mutate();
+  };
+
+  const addEmailAccount = async () => {
+    if (!managingWorkspace) {
+      return;
+    }
+
+    const name = emailAccountDraft.name.trim();
+    const email = emailAccountDraft.email.trim();
+    if (!name || !email) {
+      setEmailAccountError("Name and email address are required.");
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setEmailAccountError("Enter a valid email account address.");
+      return;
+    }
+    if (
+      managingWorkspace.emailAccounts.some(
+        (emailAccount) =>
+          emailAccount.email.toLowerCase() === email.toLowerCase(),
+      )
+    ) {
+      setEmailAccountError("Email account already exists in this workspace.");
+      return;
+    }
+
+    setIsSavingEmailAccount(true);
+    setEmailAccountError(null);
+    const response = await fetch(
+      `/api/workspaces/${managingWorkspace.id}/email-accounts`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email }),
+      },
+    );
+    setIsSavingEmailAccount(false);
+
+    if (!response.ok) {
+      setEmailAccountError("Could not add email account.");
+      return;
+    }
+
+    setEmailAccountDraft({ name: "", email: "" });
+    await mutate();
+  };
+
+  const addMember = async () => {
+    if (!managingWorkspace) {
+      return;
+    }
+
+    const name = memberDraft.name.trim();
+    const email = memberDraft.email.trim();
+    if (!email) {
+      setMemberError("Invite email address is required.");
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setMemberError("Enter a valid invite email address.");
+      return;
+    }
+    if (
+      managingWorkspace.members.some(
+        (member) =>
+          getMemberEmail(member)?.toLowerCase() === email.toLowerCase(),
+      )
+    ) {
+      setMemberError("Member already belongs to this workspace.");
+      return;
+    }
+
+    setIsSavingMember(true);
+    setMemberError(null);
+    const response = await fetch(
+      `/api/workspaces/${managingWorkspace.id}/members`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: name || undefined,
+          email,
+          role: memberDraft.role,
+        }),
+      },
+    );
+    setIsSavingMember(false);
+
+    if (!response.ok) {
+      setMemberError("Could not invite member.");
+      return;
+    }
+
+    setMemberDraft({ name: "", email: "", role: "USER" });
+    await mutate();
+  };
+
+  const updateMemberRole = async (member: WorkspaceMember) => {
+    if (!managingWorkspace || member.role === "OWNER") {
+      return;
+    }
+
+    const draft = editingMembers[member.id] ?? {
+      role: member.role === "OWNER" ? "USER" : member.role,
+    };
+    setIsSavingMember(true);
+    setMemberError(null);
+    const response = await fetch(
+      `/api/workspaces/${managingWorkspace.id}/members/${member.id}`,
+      {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ role: draft.role }),
+      },
+    );
+    setIsSavingMember(false);
+
+    if (!response.ok) {
+      setMemberError("Could not update member role.");
+      return;
+    }
+
+    await mutate();
+  };
+
+  const deleteMember = async (member: WorkspaceMember) => {
+    if (!managingWorkspace || member.role === "OWNER") {
+      return;
+    }
+
+    setIsSavingMember(true);
+    setMemberError(null);
+    const response = await fetch(
+      `/api/workspaces/${managingWorkspace.id}/members/${member.id}`,
+      { method: "DELETE" },
+    );
+    setIsSavingMember(false);
+
+    if (!response.ok) {
+      setMemberError("Could not remove member.");
+      return;
+    }
+
+    await mutate();
+  };
+
+  const updateEmailAccount = async (emailAccount: EmailAccount) => {
+    if (!managingWorkspace) {
+      return;
+    }
+
+    const draft = editingEmailAccounts[emailAccount.id] ?? emailAccount;
+    const name = draft.name.trim();
+    const email = draft.email.trim();
+    if (!name || !email) {
+      setEmailAccountError("Name and email address are required.");
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setEmailAccountError("Enter a valid email account address.");
+      return;
+    }
+    if (
+      managingWorkspace.emailAccounts.some(
+        (account) =>
+          account.id !== emailAccount.id &&
+          account.email.toLowerCase() === email.toLowerCase(),
+      )
+    ) {
+      setEmailAccountError("Email account already exists in this workspace.");
+      return;
+    }
+
+    setIsSavingEmailAccount(true);
+    setEmailAccountError(null);
+    const response = await fetch(
+      `/api/workspaces/${managingWorkspace.id}/email-accounts/${emailAccount.id}`,
+      {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email }),
+      },
+    );
+    setIsSavingEmailAccount(false);
+
+    if (!response.ok) {
+      setEmailAccountError("Could not update email account.");
+      return;
+    }
+
+    await mutate();
+  };
+
+  const deleteEmailAccount = async (emailAccount: EmailAccount) => {
+    if (!managingWorkspace) {
+      return;
+    }
+
+    setIsSavingEmailAccount(true);
+    setEmailAccountError(null);
+    const response = await fetch(
+      `/api/workspaces/${managingWorkspace.id}/email-accounts/${emailAccount.id}`,
+      { method: "DELETE" },
+    );
+    setIsSavingEmailAccount(false);
+
+    if (!response.ok) {
+      setEmailAccountError("Could not remove email account.");
+      return;
+    }
+
+    await mutate();
+  };
+
   return (
-    <div className="left-0 top-0 h-screen w-16 flex-col items-center justify-between space-y-2 border-r">
-      <div className="flex h-full flex-col justify-between">
-        <div className="flex flex-col items-center space-y-4 p-2">
-          <Button className="relative flex h-12 w-full items-center justify-center rounded-xl bg-foreground/60 font-cal text-xl font-semibold text-white">
-            <Image
-              src="https://github.com/jeremyscatigna.png"
-              fill={true}
-              alt="Workspace"
-              className="rounded-xl"
-            />
-          </Button>
-          <Button className="flex h-12 w-full items-center justify-center rounded-xl bg-foreground/80 font-cal text-xl font-semibold text-white">
-            JS
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.preventDefault();
-              setCreateWorkspaceOpen(true);
-            }}
-            className="flex h-12 w-full items-center justify-center rounded-xl bg-foreground font-cal text-xl font-semibold"
-          >
-            <Plus className="h-8 w-8 text-background" />
-          </Button>
-        </div>
+    <>
+      <div className="left-0 top-0 h-screen w-16 flex-col items-center justify-between space-y-2 border-r">
+        <div className="flex h-full flex-col justify-between">
+          <div className="flex flex-col items-center space-y-4 p-2">
+            {isLoading ? (
+              <Button className="flex h-12 w-full items-center justify-center rounded-xl bg-foreground/60">
+                <Loader2 className="h-5 w-5 animate-spin text-background" />
+              </Button>
+            ) : workspaces.length > 0 ? (
+              workspaces.map((workspace) => {
+                const canManageWorkspace =
+                  workspace.role === "OWNER" || workspace.role === "ADMIN";
 
-        {session && session.user && (
-          <div className="flex w-full flex-col items-center pb-4">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Avatar className="cursor-pointer">
-                  <AvatarImage src={session?.user.image || undefined} />
-                  <AvatarFallback>
-                    {session?.user.name ? session.user.name[0] : ""}
-                  </AvatarFallback>
-                </Avatar>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-[160px]">
-                <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
-                {userNavigation.map((item) => (
-                  <DropdownMenuItem key={item.name}>
-                    <a href={item.href} onClick={item.onClick}>
-                      {item.name}
-                    </a>
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
+                return (
+                  <DropdownMenu key={workspace.id}>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        title={workspace.name}
+                        className="flex h-12 w-full items-center justify-center rounded-xl bg-foreground/80 p-0"
+                      >
+                        <Avatar className="h-full w-full rounded-xl">
+                          <AvatarImage src={workspace.image || undefined} />
+                          <AvatarFallback className="rounded-xl bg-foreground/80 font-cal text-xl font-semibold text-background">
+                            {getWorkspaceInitials(workspace.name)}
+                          </AvatarFallback>
+                        </Avatar>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="start"
+                      side="right"
+                      className="w-56"
+                    >
+                      <DropdownMenuLabel>{workspace.name}</DropdownMenuLabel>
+                      <DropdownMenuItem
+                        disabled={!canManageWorkspace}
+                        onSelect={(event) => {
+                          event.preventDefault();
+                          if (canManageWorkspace) {
+                            setManagingWorkspaceId(workspace.id);
+                          }
+                        }}
+                      >
+                        <UserPlus className="mr-2 h-4 w-4" />
+                        Manage workspace
+                      </DropdownMenuItem>
+                      {workspace.emailAccounts.length ? (
+                        <>
+                          <DropdownMenuSeparator />
+                          {workspace.emailAccounts.slice(0, 3).map((account) => (
+                            <DropdownMenuItem
+                              key={account.id}
+                              disabled
+                              className="block truncate"
+                            >
+                              {account.email}
+                            </DropdownMenuItem>
+                          ))}
+                        </>
+                      ) : null}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                );
+              })
+            ) : (
+              <Button className="flex h-12 w-full items-center justify-center rounded-xl bg-foreground/60">
+                <Building2 className="h-5 w-5 text-background" />
+              </Button>
+            )}
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                setCreateWorkspaceOpen(true);
+              }}
+              className="flex h-12 w-full items-center justify-center rounded-xl bg-foreground font-cal text-xl font-semibold"
+            >
+              <Plus className="h-8 w-8 text-background" />
+            </Button>
           </div>
-        )}
+
+          {session && session.user && (
+            <div className="flex w-full flex-col items-center pb-4">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Avatar className="cursor-pointer">
+                    <AvatarImage src={session?.user.image || undefined} />
+                    <AvatarFallback>
+                      {session?.user.name ? session.user.name[0] : ""}
+                    </AvatarFallback>
+                  </Avatar>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-[160px]">
+                  <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
+                  {userNavigation.map((item) => (
+                    <DropdownMenuItem key={item.name}>
+                      <a href={item.href} onClick={item.onClick}>
+                        {item.name}
+                      </a>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+      <Dialog
+        open={!!managingWorkspace}
+        onOpenChange={(open) => {
+          if (!open) {
+            setManagingWorkspaceId(null);
+          }
+        }}
+      >
+        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{managingWorkspace?.name} workspace</DialogTitle>
+            <DialogDescription>
+              Manage team members and connected Gmail or Google Workspace
+              accounts.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-3">
+              <div className="flex items-center space-x-2">
+                <Building2 className="h-4 w-4" />
+                <DialogDescription>Workspace details</DialogDescription>
+              </div>
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_1fr_auto]">
+                <div className="flex flex-col space-y-2">
+                  <Label>Name</Label>
+                  <Input
+                    value={workspaceDraft.name}
+                    onChange={(event) => {
+                      setWorkspaceDraft((draft) => ({
+                        ...draft,
+                        name: event.target.value,
+                      }));
+                      setWorkspaceError(null);
+                    }}
+                  />
+                </div>
+                <div className="flex flex-col space-y-2">
+                  <Label>Logo URL</Label>
+                  <Input
+                    placeholder="https://example.com/logo.png"
+                    value={workspaceDraft.image}
+                    onChange={(event) => {
+                      setWorkspaceDraft((draft) => ({
+                        ...draft,
+                        image: event.target.value,
+                      }));
+                      setWorkspaceError(null);
+                    }}
+                  />
+                </div>
+                <div className="flex items-end">
+                  <Button
+                    size="icon"
+                    variant="secondary"
+                    disabled={isSavingWorkspace}
+                    onClick={updateWorkspace}
+                  >
+                    <Save className="h-4 w-4" />
+                    <span className="sr-only">Save workspace details</span>
+                  </Button>
+                </div>
+              </div>
+              {workspaceError ? (
+                <DialogDescription className="text-red-500">
+                  {workspaceError}
+                </DialogDescription>
+              ) : null}
+            </div>
+            <div className="space-y-3">
+              <div className="flex items-center space-x-2">
+                <UserPlus className="h-4 w-4" />
+                <DialogDescription>Team members</DialogDescription>
+              </div>
+              {managingWorkspace?.members.length ? (
+                <div className="space-y-3">
+                  {managingWorkspace.members.map((member) => {
+                    const draft = editingMembers[member.id] ?? {
+                      role: member.role === "OWNER" ? "USER" : member.role,
+                    };
+                    const canEditMember =
+                      managingWorkspace.role === "OWNER" &&
+                      member.role !== "OWNER";
+
+                    return (
+                      <div
+                        key={member.id}
+                        className="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_1fr_120px_auto_auto]"
+                      >
+                        <div className="flex flex-col space-y-2">
+                          <Label>Name</Label>
+                          <Input value={getMemberName(member)} disabled />
+                        </div>
+                        <div className="flex flex-col space-y-2">
+                          <Label>Email</Label>
+                          <Input value={getMemberEmail(member) ?? ""} disabled />
+                        </div>
+                        <div className="flex flex-col space-y-2">
+                          <Label>Role</Label>
+                          <select
+                            className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50"
+                            value={member.role === "OWNER" ? "OWNER" : draft.role}
+                            disabled={!canEditMember || isSavingMember}
+                            onChange={(event) => {
+                              setEditingMembers((drafts) => ({
+                                ...drafts,
+                                [member.id]: {
+                                  role: event.target.value as "ADMIN" | "USER",
+                                },
+                              }));
+                              setMemberError(null);
+                            }}
+                          >
+                            {member.role === "OWNER" ? (
+                              <option value="OWNER">Owner</option>
+                            ) : null}
+                            <option value="USER">User</option>
+                            <option value="ADMIN">Admin</option>
+                          </select>
+                        </div>
+                        <div className="flex items-end">
+                          <Button
+                            size="icon"
+                            variant="secondary"
+                            disabled={!canEditMember || isSavingMember}
+                            onClick={() => updateMemberRole(member)}
+                          >
+                            <Save className="h-4 w-4" />
+                            <span className="sr-only">Save member role</span>
+                          </Button>
+                        </div>
+                        <div className="flex items-end">
+                          <Button
+                            size="icon"
+                            variant="secondary"
+                            disabled={!canEditMember || isSavingMember}
+                            onClick={() => deleteMember(member)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                            <span className="sr-only">Remove member</span>
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : null}
+              <div className="grid grid-cols-1 gap-3 border-t pt-4 sm:grid-cols-[1fr_1fr_120px_auto]">
+                <div className="flex flex-col space-y-2">
+                  <Label>Invite name</Label>
+                  <Input
+                    placeholder="Alex Morgan"
+                    value={memberDraft.name}
+                    onChange={(event) => {
+                      setMemberDraft((draft) => ({
+                        ...draft,
+                        name: event.target.value,
+                      }));
+                      setMemberError(null);
+                    }}
+                  />
+                </div>
+                <div className="flex flex-col space-y-2">
+                  <Label>Invite email</Label>
+                  <Input
+                    type="email"
+                    placeholder="alex@example.com"
+                    value={memberDraft.email}
+                    onChange={(event) => {
+                      setMemberDraft((draft) => ({
+                        ...draft,
+                        email: event.target.value,
+                      }));
+                      setMemberError(null);
+                    }}
+                  />
+                </div>
+                <div className="flex flex-col space-y-2">
+                  <Label>Role</Label>
+                  <select
+                    className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm"
+                    value={memberDraft.role}
+                    onChange={(event) => {
+                      setMemberDraft((draft) => ({
+                        ...draft,
+                        role: event.target.value as "ADMIN" | "USER",
+                      }));
+                      setMemberError(null);
+                    }}
+                  >
+                    <option value="USER">User</option>
+                    <option value="ADMIN">Admin</option>
+                  </select>
+                </div>
+                <div className="flex items-end">
+                  <Button
+                    variant="secondary"
+                    disabled={isSavingMember}
+                    onClick={addMember}
+                  >
+                    <Plus className="mr-2 h-4 w-4" />
+                    Invite
+                  </Button>
+                </div>
+              </div>
+              {memberError ? (
+                <DialogDescription className="text-red-500">
+                  {memberError}
+                </DialogDescription>
+              ) : null}
+            </div>
+            <div className="space-y-3 border-t pt-4">
+              <div className="flex items-center space-x-2">
+                <Mail className="h-4 w-4" />
+                <DialogDescription>Email accounts</DialogDescription>
+              </div>
+              {managingWorkspace?.emailAccounts.length ? (
+                <div className="space-y-3">
+                  {managingWorkspace.emailAccounts.map((emailAccount) => {
+                    const draft = editingEmailAccounts[emailAccount.id] ?? {
+                      name: emailAccount.name,
+                      email: emailAccount.email,
+                    };
+
+                    return (
+                      <div
+                        key={emailAccount.id}
+                        className="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_1fr_auto_auto]"
+                      >
+                        <div className="flex flex-col space-y-2">
+                          <Label>Name</Label>
+                          <Input
+                            value={draft.name}
+                            onChange={(event) => {
+                              setEditingEmailAccounts((drafts) => ({
+                                ...drafts,
+                                [emailAccount.id]: {
+                                  ...draft,
+                                  name: event.target.value,
+                                },
+                              }));
+                              setEmailAccountError(null);
+                            }}
+                          />
+                        </div>
+                        <div className="flex flex-col space-y-2">
+                          <Label>Email</Label>
+                          <Input
+                            type="email"
+                            value={draft.email}
+                            onChange={(event) => {
+                              setEditingEmailAccounts((drafts) => ({
+                                ...drafts,
+                                [emailAccount.id]: {
+                                  ...draft,
+                                  email: event.target.value,
+                                },
+                              }));
+                              setEmailAccountError(null);
+                            }}
+                          />
+                        </div>
+                        <div className="flex items-end">
+                          <Button
+                            size="icon"
+                            variant="secondary"
+                            disabled={isSavingEmailAccount}
+                            onClick={() => updateEmailAccount(emailAccount)}
+                          >
+                            <Save className="h-4 w-4" />
+                            <span className="sr-only">Save email account</span>
+                          </Button>
+                        </div>
+                        <div className="flex items-end">
+                          <Button
+                            size="icon"
+                            variant="secondary"
+                            disabled={isSavingEmailAccount}
+                            onClick={() => deleteEmailAccount(emailAccount)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                            <span className="sr-only">
+                              Remove email account
+                            </span>
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <DialogDescription>
+                  This workspace does not have email accounts yet.
+                </DialogDescription>
+              )}
+              <div className="grid grid-cols-1 gap-3 border-t pt-4 sm:grid-cols-[1fr_1fr_auto]">
+                <div className="flex flex-col space-y-2">
+                  <Label>New account name</Label>
+                  <Input
+                    placeholder="Support inbox"
+                    value={emailAccountDraft.name}
+                    onChange={(event) => {
+                      setEmailAccountDraft((draft) => ({
+                        ...draft,
+                        name: event.target.value,
+                      }));
+                      setEmailAccountError(null);
+                    }}
+                  />
+                </div>
+                <div className="flex flex-col space-y-2">
+                  <Label>New account email</Label>
+                  <Input
+                    type="email"
+                    placeholder="support@example.com"
+                    value={emailAccountDraft.email}
+                    onChange={(event) => {
+                      setEmailAccountDraft((draft) => ({
+                        ...draft,
+                        email: event.target.value,
+                      }));
+                      setEmailAccountError(null);
+                    }}
+                  />
+                </div>
+                <div className="flex items-end">
+                  <Button
+                    variant="secondary"
+                    disabled={
+                      isSavingEmailAccount ||
+                      (managingWorkspace?.emailAccounts.length ?? 0) >= 10
+                    }
+                    onClick={addEmailAccount}
+                  >
+                    <Plus className="mr-2 h-4 w-4" />
+                    Add
+                  </Button>
+                </div>
+              </div>
+              {emailAccountError ? (
+                <DialogDescription className="text-red-500">
+                  {emailAccountError}
+                </DialogDescription>
+              ) : null}
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
+
+function getMemberName(member: WorkspaceMember) {
+  return member.user?.name || member.invitedName || "Pending invite";
+}
+
+function getMemberEmail(member: WorkspaceMember) {
+  return member.user?.email || member.invitedEmail;
+}
+
+function getWorkspaceInitials(name: string) {
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join("")
+    .toUpperCase();
+
+  return initials || "WS";
+}