diff --git a/app/dashboard/organization/clients/actions.ts b/app/dashboard/organization/clients/actions.ts
new file mode 100644
index 000000000..3aff7936e
--- /dev/null
+++ b/app/dashboard/organization/clients/actions.ts
@@ -0,0 +1,144 @@
+"use server"
+
+import { revalidatePath } from "next/cache"
+import { Session } from "@auth0/nextjs-auth0"
+
+import { managementClient } from "@/lib/auth0"
+import { Client } from "@/lib/clients"
+import { withServerActionAuth } from "@/lib/with-server-action-auth"
+
+interface CreateApiClientError {
+  error: string
+}
+export interface CreateApiClientSuccess {
+  clientId: string
+  clientSecret: string
+}
+
+export const createApiClient = withServerActionAuth(
+  async function createApiClient(formData: FormData, _: Session) {
+    const name = formData.get("name") as Client["name"]
+    const app_type = formData.get("app_type") as Client["app_type"]
+
+    if (!name) {
+      return {
+        error: "Client name is required.",
+      } as CreateApiClientError
+    }
+
+    if (!app_type) {
+      return {
+        error: "Application type is required.",
+      } as CreateApiClientError
+    }
+
+    try {
+      const { data: newClient } = await managementClient.clients.create({
+        name,
+        app_type,
+        is_first_party: true,
+      })
+
+      revalidatePath("/dashboard/organization/api-clients")
+      return {
+        clientId: newClient.client_id,
+        clientSecret: newClient.client_secret,
+      } as CreateApiClientSuccess
+    } catch (error) {
+      console.error("Failed to create API client", error)
+      return {
+        error: "Failed to create API client.",
+      } as CreateApiClientError
+    }
+  },
+  {
+    role: "admin",
+  }
+)
+
+export const deleteApiClient = withServerActionAuth(
+  async function deleteApiClient(client_id: string, _: Session) {
+    try {
+      await managementClient.clients.delete({ client_id })
+
+      revalidatePath("/dashboard/organization/api-clients")
+    } catch (error) {
+      console.error("Failed to delete API client", error)
+      return {
+        error: "Failed to delete API client.",
+      }
+    }
+
+    return {}
+  },
+  {
+    role: "admin",
+  }
+)
+
+export const updateApiClient = withServerActionAuth(
+  async function updateApiClient(
+    clientId: string,
+    formData: FormData,
+    _: Session
+  ) {
+    const name = formData.get("name") as Client["name"]
+    const app_type = formData.get("app_type") as Client["app_type"]
+
+    if (!name) {
+      return {
+        error: "Client name is required.",
+      }
+    }
+
+    if (!app_type) {
+      return {
+        error: "Application type is required.",
+      }
+    }
+
+    try {
+      await managementClient.clients.update(
+        { client_id: clientId },
+        {
+          name,
+          app_type,
+        }
+      )
+
+      revalidatePath("/dashboard/organization/api-clients")
+    } catch (error) {
+      console.error("Failed to update API client", error)
+      return {
+        error: "Failed to update API client.",
+      }
+    }
+
+    return {}
+  },
+  {
+    role: "admin",
+  }
+)
+
+export const rotateApiClientSecret = withServerActionAuth(
+  async function rotateApiClientSecret(client_id: string, _: Session) {
+    try {
+      const { data: result } =
+        await managementClient.clients.rotateClientSecret({
+          client_id,
+        })
+
+      revalidatePath("/dashboard/organization/api-clients")
+      return { clientSecret: result.client_secret }
+    } catch (error) {
+      console.error("Failed to rotate API client secret", error)
+      return {
+        error: "Failed to rotate API client secret.",
+      }
+    }
+  },
+  {
+    role: "admin",
+  }
+)
diff --git a/app/dashboard/organization/clients/clients-list.tsx b/app/dashboard/organization/clients/clients-list.tsx
new file mode 100644
index 000000000..945389208
--- /dev/null
+++ b/app/dashboard/organization/clients/clients-list.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import { DotsVerticalIcon, ReloadIcon, TrashIcon } from "@radix-ui/react-icons"
+import { toast } from "sonner"
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+import { deleteApiClient, rotateApiClientSecret } from "./actions"
+
+interface Props {
+  clients: {
+    id: string
+    name: string
+    type: string
+  }[]
+}
+
+export function ApiClientsList({ clients }: Props) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>API Clients</CardTitle>
+        <CardDescription>
+          The current API clients for your organization.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Client</TableHead>
+              <TableHead>Type</TableHead>
+              <TableHead></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {clients.map((client) => (
+              <TableRow key={client.id}>
+                <TableCell>
+                  <div className="flex items-center space-x-4">
+                    <Avatar>
+                      <AvatarFallback>
+                        {client.name.charAt(0).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="text-sm font-medium leading-none">
+                        {client.name}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {client.id}
+                      </p>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <span className="capitalize">{client.type}</span>
+                </TableCell>
+                <TableCell className="flex justify-end">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button size="icon" variant="outline">
+                        <DotsVerticalIcon className="size-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onSelect={async () => {
+                          const result = await rotateApiClientSecret(client.id)
+                          if (result.error) {
+                            return toast.error(result.error)
+                          }
+                          toast.success(
+                            `Rotated secret for client: ${client.name}`
+                          )
+                          // You might want to display the new secret here, or copy it to clipboard
+                        }}
+                      >
+                        <ReloadIcon className="mr-1 size-4" />
+                        Rotate Secret
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        className="text-destructive"
+                        onSelect={async () => {
+                          const result = await deleteApiClient(client.id)
+                          if (result?.error) {
+                            return toast.error(result.error)
+                          }
+                          toast.success(`Deleted client: ${client.name}`)
+                        }}
+                      >
+                        <TrashIcon className="mr-1 size-4" />
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/app/dashboard/organization/clients/create-client-form.tsx b/app/dashboard/organization/clients/create-client-form.tsx
new file mode 100644
index 000000000..72cce71f5
--- /dev/null
+++ b/app/dashboard/organization/clients/create-client-form.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import { useRef } from "react"
+import { toast } from "sonner"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { SubmitButton } from "@/components/submit-button"
+
+import { createApiClient, CreateApiClientSuccess } from "./actions"
+
+export function CreateApiClientForm() {
+  const ref = useRef<HTMLFormElement>(null)
+
+  return (
+    <Card>
+      <form
+        ref={ref}
+        action={async (formData: FormData) => {
+          toast.promise(createApiClient(formData), {
+            loading: "Creating client...",
+            success: (result) => {
+              if ("error" in result) {
+                throw result.error
+              }
+
+              toast(() => <h5>Your client secret is:</h5>, {
+                description: () => (
+                  <code>
+                    {
+                      (result as unknown as CreateApiClientSuccess)
+                        ?.clientSecret
+                    }
+                  </code>
+                ),
+                duration: Infinity,
+                action: {
+                  label: "Dismiss",
+                  onClick: () => {},
+                },
+              })
+              return `API Client created: ${formData.get("name")}`
+            },
+            error: (err) => err,
+          })
+        }}
+      >
+        <CardHeader>
+          <CardTitle>Create API Client</CardTitle>
+          <CardDescription>
+            Create a new API client for your application to access this
+            organization&apos;s resources.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex space-x-4">
+            <div className="grid w-full items-center gap-1.5">
+              <Label htmlFor="name">Client Name</Label>
+              <Input
+                type="text"
+                id="name"
+                name="name"
+                placeholder="My Application"
+              />
+            </div>
+
+            <div className="grid w-full items-center gap-1.5">
+              <Label htmlFor="app_type">Application Type</Label>
+              <Select defaultValue="regular_web" name="app_type">
+                <SelectTrigger id="app_type">
+                  <SelectValue placeholder="Select an application type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="native">Native</SelectItem>
+                  <SelectItem value="spa">Single Page App</SelectItem>
+                  <SelectItem value="regular_web">Regular Web App</SelectItem>
+                  <SelectItem value="non_interactive">
+                    Non Interactive
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-end">
+          <SubmitButton>Create Client</SubmitButton>
+        </CardFooter>
+      </form>
+    </Card>
+  )
+}
diff --git a/app/dashboard/organization/clients/page.tsx b/app/dashboard/organization/clients/page.tsx
new file mode 100644
index 000000000..1bfa76fcd
--- /dev/null
+++ b/app/dashboard/organization/clients/page.tsx
@@ -0,0 +1,31 @@
+import { appClient, managementClient } from "@/lib/auth0"
+import { PageHeader } from "@/components/page-header"
+
+import { ApiClientsList } from "./clients-list"
+import { CreateApiClientForm } from "./create-client-form"
+
+export default async function ApiClients() {
+  const session = await appClient.getSession()
+  const { data: apiClients } = await managementClient.clients.getAll({
+    is_global: false,
+  })
+
+  return (
+    <div className="space-y-2">
+      <PageHeader
+        title="API Clients"
+        description="Manage the clients (often Applications) that are allowed to access your organization's APIs."
+      />
+
+      <ApiClientsList
+        clients={apiClients.map((client) => ({
+          id: client.client_id,
+          name: client.name,
+          type: client.app_type,
+        }))}
+      />
+
+      <CreateApiClientForm />
+    </div>
+  )
+}
diff --git a/app/dashboard/organization/layout.tsx b/app/dashboard/organization/layout.tsx
index e19150591..7d321dfa1 100644
--- a/app/dashboard/organization/layout.tsx
+++ b/app/dashboard/organization/layout.tsx
@@ -23,6 +23,10 @@ const sidebarNavItems = [
     title: "Members",
     href: "/dashboard/organization/members",
   },
+  {
+    title: "API Clients",
+    href: "/dashboard/organization/clients",
+  },
   {
     title: "SSO",
     href: "/dashboard/organization/sso",
diff --git a/app/layout.tsx b/app/layout.tsx
index 93f95819b..504a177b8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -34,7 +34,7 @@ export default async function RootLayout({
           {children}
         </ThemeProvider>
 
-        <Toaster position="bottom-right" />
+        <Toaster position="bottom-right" expand richColors />
         <Script id="heap">
           {`window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
         heap.load("1279799279");`}
diff --git a/lib/clients.ts b/lib/clients.ts
new file mode 100644
index 000000000..4dffc38c1
--- /dev/null
+++ b/lib/clients.ts
@@ -0,0 +1,5 @@
+import type { Client as Auth0Client } from "auth0"
+
+export interface Client extends Partial<Auth0Client> {
+  app_type: "native" | "spa" | "regular_web" | "non_interactive"
+}
diff --git a/scripts/bootstrap.mjs b/scripts/bootstrap.mjs
index 8640d4d02..b62b1a323 100644
--- a/scripts/bootstrap.mjs
+++ b/scripts/bootstrap.mjs
@@ -126,8 +126,11 @@ const createClientGrant = ora({
 try {
   // prettier-ignore
   const createClientGrantArgs = [
-    "api", "post", "client-grants",
-    "--data", JSON.stringify({
+    "api",
+    "post",
+    "client-grants",
+    "--data",
+    JSON.stringify({
       client_id: managementClient.client_id,
       audience: `https://${AUTH0_DOMAIN}/api/v2/`,
       scope: [
@@ -136,6 +139,16 @@ try {
         "update:users",
         "delete:users",
         "create:users",
+        // Clients
+        "read:clients",
+        "create:clients",
+        "update:clients",
+        "delete:clients",
+        "create:client_keys",
+        "read:client_keys",
+        "update:client_keys",
+        "delete:client_keys",
+        "read:client_credentials",
         // Connections
         "read:connections",
         "update:connections",
@@ -173,9 +186,9 @@ try {
         "create:scim_config",
         "update:scim_config",
         "delete:scim_config",
-      ]
+      ],
     }),
-  ];
+  ]
 
   await $`auth0 ${createClientGrantArgs}`
   createClientGrant.succeed()