diff --git a/apps/agent/go.mod b/apps/agent/go.mod
index dddfa1c91f..0e55e76bfe 100644
--- a/apps/agent/go.mod
+++ b/apps/agent/go.mod
@@ -107,7 +107,6 @@ require (
 	github.com/fvbommel/sortorder v1.1.0 // indirect
 	github.com/fxamacker/cbor/v2 v2.7.0 // indirect
 	github.com/gammazero/deque v0.2.1 // indirect
-	github.com/getkin/kin-openapi v0.124.0 // indirect
 	github.com/go-faster/city v1.0.1 // indirect
 	github.com/go-faster/errors v0.7.1 // indirect
 	github.com/go-logr/logr v1.4.2 // indirect
@@ -152,7 +151,6 @@ require (
 	github.com/in-toto/in-toto-golang v0.9.0 // indirect
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/influxdata/tdigest v0.0.1 // indirect
-	github.com/invopop/yaml v0.2.0 // indirect
 	github.com/jonboulle/clockwork v0.4.0 // indirect
 	github.com/josharian/intern v1.0.0 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
@@ -184,16 +182,13 @@ require (
 	github.com/moby/term v0.5.0 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
-	github.com/mohae/deepcopy v0.0.0-20170929034955-c48cc78d4826 // indirect
 	github.com/morikuni/aec v1.0.0 // indirect
 	github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 // indirect
 	github.com/mxk/go-flowrate v0.0.0-20140419014527-cca7078d478f // indirect
-	github.com/oapi-codegen/oapi-codegen/v2 v2.3.0 // indirect
 	github.com/opencontainers/go-digest v1.0.0 // indirect
 	github.com/opencontainers/image-spec v1.1.0 // indirect
 	github.com/paulmach/orb v0.11.1 // indirect
 	github.com/pelletier/go-toml v1.9.5 // indirect
-	github.com/perimeterx/marshmallow v1.1.5 // indirect
 	github.com/pierrec/lz4/v4 v4.1.21 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 // indirect
diff --git a/apps/dashboard/app/(app)/[...not-found]/page.tsx b/apps/dashboard/app/(app)/[...not-found]/page.tsx
index d9f4dce6bd..9d6134567d 100644
--- a/apps/dashboard/app/(app)/[...not-found]/page.tsx
+++ b/apps/dashboard/app/(app)/[...not-found]/page.tsx
@@ -1,5 +1,5 @@
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
-import { Button } from "@/components/ui/button";
+import { Button } from "@unkey/ui";
 import Link from "next/link";
 export default function NotFound() {
   return (
@@ -10,9 +10,7 @@ export default function NotFound() {
       </EmptyPlaceholder.Description>
       <div className="flex flex-col items-center justify-center gap-2 md:flex-row">
         <Link href="/">
-          <Button variant="secondary" className="items-center w-full gap-2 ">
-            Go Back
-          </Button>
+          <Button variant="default">Go Back</Button>
         </Link>
       </div>
     </EmptyPlaceholder>
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/chart.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/chart.tsx
index a3385368ed..faacf07bee 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/chart.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/chart.tsx
@@ -11,7 +11,6 @@ import ReactFlow, {
   Controls,
 } from "reactflow";
 
-import { Button } from "@/components/ui/button";
 import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
@@ -21,6 +20,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import dagre from "dagre";
 import { MoreVertical, Settings2 } from "lucide-react";
 import Link from "next/link";
@@ -206,8 +206,8 @@ const KeyNode: React.FC<
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <MoreVertical className="w-4 h-4" />
+            <Button variant="ghost">
+              <MoreVertical />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -246,8 +246,8 @@ const RoleNode: React.FC<
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon">
-            <MoreVertical className="w-4 h-4" />
+          <Button variant="ghost" shape="square">
+            <MoreVertical />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
@@ -283,7 +283,7 @@ const PermissionNode: React.FC<NodeProps<{ name: string; active: boolean; permis
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon">
+            <Button variant="ghost" shape="square">
               <MoreVertical className="w-4 h-4" />
             </Button>
           </DropdownMenuTrigger>
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
index 1bbdd5ad66..46595ddd37 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
@@ -8,7 +8,6 @@ import { CreateNewRole } from "@/app/(app)/authorization/roles/create-new-role";
 import { StackedColumnChart } from "@/components/dashboard/charts";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Badge } from "@/components/ui/badge";
-import { Button, buttonVariants } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
@@ -16,6 +15,7 @@ import { clickhouse } from "@/lib/clickhouse";
 import { and, db, eq, isNull, schema } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
 import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@unkey/ui";
 import { BarChart, Minus } from "lucide-react";
 import ms from "ms";
 import { notFound } from "next/navigation";
@@ -241,9 +241,9 @@ export default async function APIKeyDetailPage(props: {
         </Link>
         <Link
           href={`/apis/${props.params.apiId}/keys/${props.params.keyAuthId}/${props.params.keyId}/settings`}
-          className={cn(buttonVariants({ variant: "outline" }), "gap-1")}
+          className={cn(buttonVariants({ variant: "default" }))}
         >
-          <Settings2 className="w-4 h-4" />
+          <Settings2 />
           Key settings
         </Link>
       </div>
@@ -339,12 +339,10 @@ export default async function APIKeyDetailPage(props: {
           </div>
           <div className="flex items-center gap-2">
             <CreateNewRole
-              trigger={<Button variant="secondary">Create New Role</Button>}
+              trigger={<Button>Create New Role</Button>}
               permissions={key.workspace.permissions}
             />
-            <CreateNewPermission
-              trigger={<Button variant="secondary">Create New Permission</Button>}
-            />
+            <CreateNewPermission trigger={<Button>Create New Permission</Button>} />
           </div>
         </div>
 
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/delete-key.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/delete-key.tsx
index 531ce15e4f..31bb5f492f 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/delete-key.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/delete-key.tsx
@@ -1,8 +1,8 @@
 "use client";
 import { revalidate } from "@/app/actions";
-import { Button } from "@/components/ui/button";
 import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
+import { Button } from "@unkey/ui";
 import type React from "react";
 import { useState } from "react";
 
@@ -51,7 +51,7 @@ export const DeleteKey: React.FC<Props> = ({ apiKey, keyAuthId }) => {
         </CardHeader>
 
         <CardFooter className="z-10 justify-end">
-          <Button type="button" onClick={() => setOpen(!open)} variant="alert">
+          <Button type="button" onClick={() => setOpen(!open)} variant="destructive">
             Delete Key
           </Button>
         </CardFooter>
@@ -73,12 +73,12 @@ export const DeleteKey: React.FC<Props> = ({ apiKey, keyAuthId }) => {
           <input type="hidden" name="keyId" value={apiKey.id} />
 
           <DialogFooter className="justify-end">
-            <Button type="button" onClick={() => setOpen(!open)} variant="secondary">
+            <Button type="button" onClick={() => setOpen(!open)}>
               Cancel
             </Button>
             <Button
               type="submit"
-              variant="alert"
+              variant="destructive"
               disabled={deleteKey.isLoading}
               onClick={() => deleteKey.mutate({ keyIds: [apiKey.id] })}
             >
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-enabled.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-enabled.tsx
index 39a8f55211..186e5ee422 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-enabled.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-enabled.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -14,6 +13,7 @@ import { Switch } from "@/components/ui/switch";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-expiration.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-expiration.tsx
index 23bb38c8ff..10191752cd 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-expiration.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-expiration.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -24,6 +23,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { format } from "date-fns";
 
 import { useRouter } from "next/navigation";
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-metadata.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-metadata.tsx
index 37d06d77f0..408bdc6e33 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-metadata.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-metadata.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -15,6 +14,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -97,7 +97,6 @@ export const UpdateKeyMetadata: React.FC<Props> = ({ apiKey }) => {
           </CardContent>
           <CardFooter className="items-center justify-end gap-4">
             <Button
-              variant="secondary"
               type="button"
               onClick={() => {
                 try {
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-name.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-name.tsx
index a546cd047b..5272b363c6 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-name.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-name.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -16,6 +15,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-owner-id.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-owner-id.tsx
index d635c63673..3677d96d7a 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-owner-id.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-owner-id.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -16,6 +15,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-ratelimit.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-ratelimit.tsx
index bb4aae4d2f..8a4abab7ad 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-ratelimit.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-ratelimit.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -25,6 +24,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx
index beee505036..57b235ce45 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -32,6 +31,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx
index 0f8d79214d..5e15b3d73e 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx
@@ -2,8 +2,8 @@ import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import BackButton from "@/components/ui/back-button";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { db } from "@/lib/db";
+import { Button } from "@unkey/ui";
 import { ChevronRight, Scan, User, VenetianMask } from "lucide-react";
 import Link from "next/link";
 
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx
index 6b4eb46b2c..ebcecf9150 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx
@@ -5,7 +5,6 @@ import { Loading } from "@/components/dashboard/loading";
 import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
 import {
@@ -25,6 +24,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Button } from "@unkey/ui";
 
 import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
@@ -198,10 +198,10 @@ export const CreateKey = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }: Pro
           </Code>
           <div className="flex justify-end my-4 space-x-4">
             <Link href={`/keys/${keyAuthId}`}>
-              <Button variant="secondary">Back</Button>
+              <Button>Back</Button>
             </Link>
             <Link href={`/apis/${apiId}/keys/${keyAuthId}/${key.data.keyId}`}>
-              <Button variant="secondary">View key details</Button>
+              <Button>View key details</Button>
             </Link>
             <Button
               onClick={() => {
@@ -718,7 +718,6 @@ export const CreateKey = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }: Pro
                                     </FormDescription>
                                     <FormMessage />
                                     <Button
-                                      variant="secondary"
                                       type="button"
                                       onClick={(_e) => {
                                         try {
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx
index 92a7b7f77a..d5715a1a60 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -14,6 +13,7 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -93,9 +93,7 @@ export const DefaultBytes: React.FC<Props> = ({ keyAuth }) => {
         </CardContent>
         <CardFooter className="justify-end">
           <Button
-            variant={
-              form.formState.isValid && !form.formState.isSubmitting ? "primary" : "disabled"
-            }
+            variant="primary"
             disabled={!form.formState.isValid || form.formState.isSubmitting}
             type="submit"
           >
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx
index 9fc31edd6f..89af88491a 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx
@@ -1,6 +1,4 @@
 "use client";
-import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -14,6 +12,7 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -80,13 +79,12 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
         </CardContent>
         <CardFooter className="justify-end">
           <Button
-            variant={
-              form.formState.isValid && !form.formState.isSubmitting ? "primary" : "disabled"
-            }
+            variant="primary"
             disabled={!form.formState.isValid || form.formState.isSubmitting}
             type="submit"
+            loading={form.formState.isSubmitting}
           >
-            {form.formState.isSubmitting ? <Loading /> : "Save"}
+            Save
           </Button>
         </CardFooter>
       </Card>
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx
index 1a210362c3..decee0cfe8 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx
@@ -1,7 +1,5 @@
 "use client";
-import { Loading } from "@/components/dashboard/loading";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
 import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Dialog,
@@ -24,6 +22,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import type React from "react";
 import { useState } from "react";
@@ -107,7 +106,7 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
             type="button"
             disabled={!!api.deleteProtection}
             onClick={() => setOpen(!open)}
-            variant="alert"
+            variant="destructive"
           >
             Delete API
           </Button>
@@ -173,20 +172,16 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
               />
 
               <DialogFooter className="justify-end gap-4">
-                <Button
-                  type="button"
-                  disabled={deleteApi.isLoading}
-                  onClick={() => setOpen(!open)}
-                  variant="secondary"
-                >
+                <Button type="button" disabled={deleteApi.isLoading} onClick={() => setOpen(!open)}>
                   Cancel
                 </Button>
                 <Button
                   type="submit"
-                  variant={isValid ? "alert" : "disabled"}
+                  variant="destructive"
+                  loading={deleteApi.isLoading}
                   disabled={!isValid || deleteApi.isLoading}
                 >
-                  {deleteApi.isLoading ? <Loading /> : "Delete API"}
+                  Delete API
                 </Button>
               </DialogFooter>
             </form>
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-protection.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-protection.tsx
index a7d3b8d7e6..58662392ec 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-protection.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-protection.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Button } from "@/components/ui/button";
+import { Button } from "@unkey/ui";
 import type React from "react";
 import { useState } from "react";
 
@@ -92,7 +92,7 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
           </CardHeader>
 
           <CardFooter className="z-10 justify-end">
-            <Button type="button" onClick={() => setOpen(!open)} variant="alert">
+            <Button type="button" onClick={() => setOpen(!open)} variant="destructive">
               Disable Delete Protection
             </Button>
           </CardFooter>
@@ -135,13 +135,12 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
                       form.reset();
                       setOpen(!open);
                     }}
-                    variant="secondary"
                   >
                     Cancel
                   </Button>
                   <Button
                     type="submit"
-                    variant={isValid ? "alert" : "disabled"}
+                    variant="destructive"
                     disabled={!isValid || updateDeleteProtection.isLoading}
                   >
                     {updateDeleteProtection.isLoading ? <Loading /> : "Disable"}
@@ -170,8 +169,9 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
           onClick={() => updateDeleteProtection.mutate({ apiId: api.id, enabled: true })}
           variant="primary"
           disabled={updateDeleteProtection.isLoading}
+          loading={updateDeleteProtection.isLoading}
         >
-          {updateDeleteProtection.isLoading ? <Loading /> : "Enable"}
+          Enable
         </Button>
       </CardFooter>
     </Card>
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx
index 1711664eea..19e3865635 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx
@@ -1,6 +1,4 @@
 "use client";
-import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -14,6 +12,7 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -87,13 +86,12 @@ export const UpdateApiName: React.FC<Props> = ({ api }) => {
         </CardContent>
         <CardFooter className="justify-end">
           <Button
-            variant={
-              form.formState.isValid && !form.formState.isSubmitting ? "primary" : "disabled"
-            }
+            variant="primary"
             disabled={!form.formState.isValid || form.formState.isSubmitting}
+            loading={form.formState.isSubmitting}
             type="submit"
           >
-            {form.formState.isSubmitting ? <Loading /> : "Save"}
+            Save
           </Button>
         </CardFooter>
       </Card>
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx
index df8224e196..4f429a4f16 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx
@@ -1,7 +1,5 @@
 "use client";
-import { Loading } from "@/components/dashboard/loading";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -17,6 +15,7 @@ import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Workspace } from "@unkey/db";
+import { Button } from "@unkey/ui";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -114,13 +113,12 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
         </CardContent>
         <CardFooter className={cn("justify-end", { "opacity-30 ": !isEnabled })}>
           <Button
-            variant={
-              form.formState.isValid && !form.formState.isSubmitting ? "primary" : "disabled"
-            }
+            variant="primary"
             disabled={!form.formState.isValid || form.formState.isSubmitting}
             type="submit"
+            loading={form.formState.isSubmitting}
           >
-            {form.formState.isSubmitting ? <Loading /> : "Save"}
+            Save
           </Button>
         </CardFooter>
       </Card>
diff --git a/apps/dashboard/app/(app)/audit/[bucket]/filter.tsx b/apps/dashboard/app/(app)/audit/[bucket]/filter.tsx
index 44444a2b99..f911f489b4 100644
--- a/apps/dashboard/app/(app)/audit/[bucket]/filter.tsx
+++ b/apps/dashboard/app/(app)/audit/[bucket]/filter.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { ArrayInput } from "@/components/array-input";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -14,6 +13,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import { Check, ChevronDown } from "lucide-react";
 import { parseAsArrayOf, parseAsString, useQueryState } from "nuqs";
 import type React from "react";
@@ -36,7 +36,7 @@ export const Filter: React.FC<Props> = ({ options, title, param }) => {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="flex items-center h-8 gap-2 ">
+        <Button className="flex items-center h-8 gap-2 ">
           {title}
           {selected.length > 0 && (
             <>
diff --git a/apps/dashboard/app/(app)/audit/[bucket]/page.tsx b/apps/dashboard/app/(app)/audit/[bucket]/page.tsx
index e865a0c64b..9e851efc5c 100644
--- a/apps/dashboard/app/(app)/audit/[bucket]/page.tsx
+++ b/apps/dashboard/app/(app)/audit/[bucket]/page.tsx
@@ -1,7 +1,6 @@
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Loading } from "@/components/dashboard/loading";
 import { PageHeader } from "@/components/dashboard/page-header";
-import { Button } from "@/components/ui/button";
 import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
@@ -9,6 +8,7 @@ import { clerkClient } from "@clerk/nextjs";
 import type { User } from "@clerk/nextjs/server";
 import type { SelectAuditLog, SelectAuditLogTarget } from "@unkey/db/src/schema";
 import { unkeyAuditLogEvents } from "@unkey/schema/src/auditlog";
+import { Button } from "@unkey/ui";
 import { Box, X } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
@@ -152,11 +152,7 @@ export default async function AuditPage(props: Props) {
           </Suspense>
           {selectedEvents.length > 0 || selectedUsers.length > 0 || selectedRootKeys.length > 0 ? (
             <Link href="/audit">
-              <Button
-                variant="outline"
-                size="sm"
-                className="flex items-center h-8 gap-2 bg-background-subtle"
-              >
+              <Button className="flex items-center h-8 gap-2 bg-background-subtle">
                 Clear
                 <X className="w-4 h-4" />
               </Button>
@@ -236,7 +232,7 @@ const AuditLogTable: React.FC<{
               No events matched these filters, try changing them.{" "}
             </EmptyPlaceholder.Description>
             <Link href="/audit" prefetch>
-              <Button variant="secondary">Reset Filters</Button>
+              <Button>Reset Filters</Button>
             </Link>
           </div>
         ) : (
@@ -328,11 +324,7 @@ const AuditLogTable: React.FC<{
 
       <div className="w-full mt-8">
         <Link href={buildHref({ before: logs.at(-1)?.time })} prefetch>
-          <Button
-            size="block"
-            disabled={!hasMoreLogs}
-            variant={hasMoreLogs ? "secondary" : "disabled"}
-          >
+          <Button className="block" disabled={!hasMoreLogs}>
             {hasMoreLogs ? "Load more" : "No more logs"}
           </Button>
         </Link>
diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx
index c40b07a7ab..d46fa10052 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx
@@ -2,9 +2,9 @@
 
 import { revalidateTag } from "@/app/actions";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { tags } from "@/lib/cache";
+import { Button } from "@unkey/ui";
 
 import {
   Form,
diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
index 421309b107..1227dd061e 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
@@ -1,9 +1,7 @@
 "use client";
 
 import { revalidate } from "@/app/actions";
-import { Loading } from "@/components/dashboard/loading";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -25,6 +23,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTrigger } from "@radix-ui/react-dialog";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -115,16 +114,16 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
                 type="button"
                 disabled={deletePermission.isLoading}
                 onClick={() => setOpen(!open)}
-                variant="secondary"
               >
                 Cancel
               </Button>
               <Button
                 type="submit"
-                variant={isValid ? "alert" : "disabled"}
+                variant="destructive"
                 disabled={!isValid || deletePermission.isLoading}
+                loading={deletePermission.isLoading}
               >
-                {deletePermission.isLoading ? <Loading /> : "Delete"}
+                Delete
               </Button>
             </DialogFooter>
           </form>
diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
index c02b0dc434..374ef47b51 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
@@ -1,10 +1,10 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { PageHeader } from "@/components/dashboard/page-header";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
+import { Button } from "@unkey/ui";
 import {
   Activity,
   CalendarPlus,
@@ -109,7 +109,7 @@ export default async function RolesPage(props: Props) {
           </Badge>,
           <DeletePermission
             key="delete-permission"
-            trigger={<Button variant="alert">Delete</Button>}
+            trigger={<Button variant="destructive">Delete</Button>}
             permission={permission}
           />,
         ]}
diff --git a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
index 6d9bd30737..bb1fe8febd 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
@@ -2,7 +2,7 @@
 
 import { Loading } from "@/components/dashboard/loading";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button } from "@unkey/ui";
 
 import {
   Dialog,
diff --git a/apps/dashboard/app/(app)/authorization/permissions/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/page.tsx
index 9865d67916..140b96b733 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/page.tsx
@@ -1,9 +1,9 @@
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { getTenantId } from "@/lib/auth";
 import { asc, db } from "@/lib/db";
 import { permissions } from "@unkey/db/src/schema";
+import { Button } from "@unkey/ui";
 import { ChevronRight, Scan } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
index 3d8255b197..8a7c7934ac 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
@@ -1,8 +1,6 @@
 "use client";
 
-import { Loading } from "@/components/dashboard/loading";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -24,6 +22,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTrigger } from "@radix-ui/react-dialog";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -112,20 +111,16 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
             />
 
             <DialogFooter className="justify-end gap-4">
-              <Button
-                type="button"
-                disabled={deleteRole.isLoading}
-                onClick={() => setOpen(!open)}
-                variant="secondary"
-              >
+              <Button type="button" disabled={deleteRole.isLoading} onClick={() => setOpen(!open)}>
                 Cancel
               </Button>
               <Button
                 type="submit"
-                variant={isValid ? "alert" : "disabled"}
+                variant="destructive"
                 disabled={!isValid || deleteRole.isLoading}
+                loading={deleteRole.isLoading}
               >
-                {deleteRole.isLoading ? <Loading /> : "Delete Role"}
+                Delete Role
               </Button>
             </DialogFooter>
           </form>
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx
index 383f70a3d5..222c4b8c71 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@/components/ui/button";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
+import { Button } from "@unkey/ui";
 import { notFound, redirect } from "next/navigation";
 import { DeleteRole } from "./delete-role";
 import { type NestedPermissions, Tree } from "./tree";
@@ -117,8 +117,8 @@ export default async function RolesPage(props: Props) {
           <p className="text-xs text-content-subtle truncate">{role.description}</p>
         </div>
         <div className="flex items-center gap-2">
-          <UpdateRole role={role} trigger={<Button variant="secondary">Update Role</Button>} />
-          <DeleteRole role={role} trigger={<Button variant="alert">Delete Role</Button>} />
+          <UpdateRole role={role} trigger={<Button>Update Role</Button>} />
+          <DeleteRole role={role} trigger={<Button variant="destructive">Delete Role</Button>} />
         </div>
       </div>
 
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx
index d21db6a8e3..ca64b1b856 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { revalidateTag } from "@/app/actions";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -27,6 +26,7 @@ import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import type { Role } from "@unkey/db";
+import { Button } from "@unkey/ui";
 import { validation } from "@unkey/validation";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
diff --git a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
index 159e5649d3..7213af97e4 100644
--- a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
@@ -2,7 +2,7 @@
 
 import { Loading } from "@/components/dashboard/loading";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button } from "@unkey/ui";
 
 import {
   Dialog,
diff --git a/apps/dashboard/app/(app)/authorization/roles/page.tsx b/apps/dashboard/app/(app)/authorization/roles/page.tsx
index ea93280c1f..77a5fb9739 100644
--- a/apps/dashboard/app/(app)/authorization/roles/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/page.tsx
@@ -1,8 +1,8 @@
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
+import { Button } from "@unkey/ui";
 import { ChevronRight, Scan } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
diff --git a/apps/dashboard/app/(app)/identities/[identityId]/page.tsx b/apps/dashboard/app/(app)/identities/[identityId]/page.tsx
index d7694e597e..7e7c15ffd9 100644
--- a/apps/dashboard/app/(app)/identities/[identityId]/page.tsx
+++ b/apps/dashboard/app/(app)/identities/[identityId]/page.tsx
@@ -3,7 +3,6 @@ import { notFound } from "next/navigation";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Code } from "@/components/ui/code";
 import {
   Table,
@@ -16,6 +15,7 @@ import {
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
+import { Button } from "@unkey/ui";
 import { ChevronRight, Minus } from "lucide-react";
 import ms from "ms";
 import Link from "next/link";
@@ -146,8 +146,8 @@ export default async function Page(props: Props) {
                 <LastUsed workspaceId={key.workspaceId} keySpaceId={key.keyAuthId} keyId={key.id} />
                 <TableCell className="flex justify-end">
                   <Link href={`/apis/${key.keyAuth.api.id}/keys/${key.keyAuth.id}/${key.id}`}>
-                    <Button variant="ghost" size="icon">
-                      <ChevronRight className="size-4" />
+                    <Button variant="ghost" shape="square">
+                      <ChevronRight />
                     </Button>
                   </Link>
                 </TableCell>
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx
index fa917252ba..0d0bc50ee7 100644
--- a/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx
+++ b/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx
@@ -3,10 +3,10 @@
 import { format, setHours, setMinutes, setSeconds } from "date-fns";
 import type { DateRange } from "react-day-picker";
 
-import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import { ArrowRight, Calendar as CalendarIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useLogSearchParams } from "../../../query-state";
@@ -147,10 +147,8 @@ export function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivE
             <div className="border-t border-border" />
           </div>
           <div className="flex gap-2 p-2 w-full justify-end bg-background-subtle">
-            <Button size="sm" variant="outline" onClick={() => handleFinalDate(undefined)}>
-              Clear
-            </Button>
-            <Button size="sm" variant="primary" onClick={() => handleFinalDate(interimDate)}>
+            <Button onClick={() => handleFinalDate(undefined)}>Clear</Button>
+            <Button variant="primary" onClick={() => handleFinalDate(interimDate)}>
               Apply
             </Button>
           </div>
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx
index 589e5c6aba..b450dacca9 100644
--- a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx
+++ b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx
@@ -1,7 +1,7 @@
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import { X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { OPTIONS } from "./constants";
@@ -115,7 +115,7 @@ const RemoveButton = ({ item, onRemove }: Pick<BadgeProps, "item" | "onRemove">)
   <Button
     type="button"
     variant="ghost"
-    size="icon"
+    shape="square"
     className="flex-shrink-0 w-4 h-4 min-w-[16px] hover:bg-secondary/80"
     onClick={(e) => {
       e.stopPropagation();
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/search-combobox.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/search-combobox.tsx
index 65e3461cc5..b17af52aa1 100644
--- a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/search-combobox.tsx
+++ b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/search-combobox.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@/components/ui/button";
 import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import { CheckCircle, Search } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 
@@ -89,7 +89,6 @@ export function SearchCombobox() {
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          variant="outline"
           role="combobox"
           aria-expanded={open}
           className="min-w-[330px] justify-start hover:bg-current! hover:text-current! text-content-subtle"
diff --git a/apps/dashboard/app/(app)/logs/components/filters/index.tsx b/apps/dashboard/app/(app)/logs/components/filters/index.tsx
index 0f0424cea8..5b99c217cd 100644
--- a/apps/dashboard/app/(app)/logs/components/filters/index.tsx
+++ b/apps/dashboard/app/(app)/logs/components/filters/index.tsx
@@ -1,6 +1,6 @@
 "use client";
-import { Button } from "@/components/ui/button";
 import { ButtonGroup } from "@/components/ui/group-button";
+import { Button } from "@unkey/ui";
 import { RefreshCcw } from "lucide-react";
 import { ONE_DAY_MS } from "../../constants";
 import { useLogSearchParams } from "../../query-state";
@@ -36,18 +36,18 @@ export const LogsFilters = () => {
         </div>
 
         <ButtonGroup>
-          <Button variant="outline">
+          <Button>
             <Timeline />
           </Button>
-          <Button variant="outline">
+          <Button>
             <DatePickerWithRange />
           </Button>
         </ButtonGroup>
 
-        <Button variant="outline">
+        <Button>
           <ResponseStatus />
         </Button>
-        <Button variant="outline" size="icon" className="w-10" onClick={handleRefresh}>
+        <Button shape="square" className="w-10" onClick={handleRefresh}>
           <RefreshCcw className="h-4 w-4" />
         </Button>
       </div>
diff --git a/apps/dashboard/app/(app)/logs/components/log-details/components/log-header.tsx b/apps/dashboard/app/(app)/logs/components/log-details/components/log-header.tsx
index 3314efba42..0af95a05e1 100644
--- a/apps/dashboard/app/(app)/logs/components/log-details/components/log-header.tsx
+++ b/apps/dashboard/app/(app)/logs/components/log-details/components/log-header.tsx
@@ -1,6 +1,6 @@
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import { X } from "lucide-react";
 import type { Log } from "../../../types";
 
@@ -29,7 +29,7 @@ export const LogHeader = ({ onClose, log }: Props) => {
         </Badge>
 
         <span className="text-content/65">|</span>
-        <Button size="icon" variant="ghost" onClick={onClose}>
+        <Button shape="square" variant="ghost" onClick={onClose}>
           <X size="22" strokeWidth="1.5" className="text-content/65 cursor-pointer" />
         </Button>
       </div>
diff --git a/apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx b/apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx
index bc7cfd9307..4d954cb4dc 100644
--- a/apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx
+++ b/apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
+import { Button } from "@unkey/ui";
 import { Copy } from "lucide-react";
 
 export const LogMetaSection = ({ content }: { content: string }) => {
@@ -23,8 +23,7 @@ export const LogMetaSection = ({ content }: { content: string }) => {
         <CardContent className="text-[12px] w-[300px] flex-2 bg-background-subtle p-3 rounded-[5px] relative group">
           <pre>{content}</pre>
           <Button
-            size="icon"
-            variant="outline"
+            shape="square"
             onClick={handleClick}
             className="absolute bottom-2 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
             aria-label="Copy content"
diff --git a/apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx b/apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx
index 2d956ed263..e15470c225 100644
--- a/apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx
+++ b/apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
+import { Button } from "@unkey/ui";
 import { Copy } from "lucide-react";
 
 export const LogSection = ({
@@ -45,8 +45,7 @@ export const LogSection = ({
               : details}
           </pre>
           <Button
-            size="icon"
-            variant="outline"
+            shape="square"
             onClick={handleClick}
             className="absolute bottom-2 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
             aria-label="Copy content"
diff --git a/apps/dashboard/app/(app)/mobile-sidebar.tsx b/apps/dashboard/app/(app)/mobile-sidebar.tsx
index 4229e1f030..73a52d2c5c 100644
--- a/apps/dashboard/app/(app)/mobile-sidebar.tsx
+++ b/apps/dashboard/app/(app)/mobile-sidebar.tsx
@@ -1,11 +1,11 @@
 "use client";
 import { createWorkspaceNavigation, resourcesNavigation } from "@/app/(app)/workspace-navigations";
 import { Feedback } from "@/components/dashboard/feedback-component";
-import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTrigger } from "@/components/ui/sheet";
 import type { Workspace } from "@/lib/db";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import { Menu } from "lucide-react";
 import Link from "next/link";
 import { useSelectedLayoutSegments } from "next/navigation";
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/filters.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/filters.tsx
index 1dc84658f8..2e1f6a1198 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/filters.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/filters.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { ArrayInput } from "@/components/array-input";
-import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -10,6 +9,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import { RefreshCw } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { parseAsArrayOf, parseAsString, parseAsStringEnum, useQueryState } from "nuqs";
@@ -83,8 +83,7 @@ export const Filters: React.FC<{ identifier?: boolean; interval?: boolean }> = (
       ) : null}
       <div>
         <Button
-          size="icon"
-          variant="secondary"
+          shape="square"
           onClick={() => {
             startTransition(router.refresh);
           }}
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/filter.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/filter.tsx
index b5f1f5dd12..f6f97a215e 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/filter.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/filter.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { ArrayInput } from "@/components/array-input";
-import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import {
   CalendarIcon,
   CalendarRange,
@@ -87,7 +87,7 @@ export const Filters: React.FC = () => {
       <div className="flex items-center justify-end w-full gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="secondary" className="text-xs">
+            <Button className="text-xs">
               Add Filter <ChevronDown className="w-4 h-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -112,8 +112,6 @@ export const Filters: React.FC = () => {
         </DropdownMenu>
         {identifierVisible ? (
           <Button
-            variant="outline"
-            size="sm"
             className="flex items-center h-8 gap-2 bg-background-subtle"
             onClick={() => {
               startTransition(() => {
@@ -132,8 +130,7 @@ export const Filters: React.FC = () => {
           </Button>
         ) : null}
         <Button
-          size="icon"
-          variant="secondary"
+          shape="square"
           onClick={() => {
             startTransition(router.refresh);
           }}
@@ -173,8 +170,7 @@ export const Filters: React.FC = () => {
               </SelectContent>
             </Select>
             <Button
-              size="icon"
-              variant="secondary"
+              shape="square"
               onClick={() => {
                 startTransition(() => {
                   setSuccessVisible(false);
@@ -204,7 +200,7 @@ export const Filters: React.FC = () => {
                 className: "w-[100px]",
               }}
             >
-              <Button variant="outline" className="text-xs font-medium w-full justify-start gap-0">
+              <Button className="text-xs font-medium w-full justify-start gap-0">
                 <span className="mr-1 text-xs font-medium">From:</span>
 
                 {after ? format(after, "PPp") : format(new Date(), "PPp")}
@@ -229,10 +225,7 @@ export const Filters: React.FC = () => {
                   className: "w-[130px]",
                 }}
               >
-                <Button
-                  variant="outline"
-                  className="text-xs font-medium w-full justify-start gap-0"
-                >
+                <Button className="text-xs font-medium w-full justify-start gap-0">
                   <span className="mr-1 text-xs font-medium">Until:</span>
 
                   {before ? format(before, "PPp") : format(new Date(), "PPp")}
@@ -244,8 +237,7 @@ export const Filters: React.FC = () => {
 
             <Button
               className="flex-shrink-0"
-              size="icon"
-              variant="secondary"
+              shape="square"
               onClick={() => {
                 setTimeRangeVisible(false);
                 setAfter(null);
@@ -271,7 +263,7 @@ const FilterRow: React.FC<{
   return (
     <div className="flex items-center w-full gap-2">
       <ArrayInput title={title} selected={selected} setSelected={setSelected} />
-      <Button size="icon" variant="secondary" onClick={removeFilter}>
+      <Button shape="square" onClick={removeFilter}>
         <X className="w-4 h-4" />
       </Button>
     </div>
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx
index 36d8d9428f..6ef955597a 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { Copy, Filter, MoreHorizontal, UserRoundCog } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,6 +8,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { toast } from "@/components/ui/toaster";
+import { Button } from "@unkey/ui";
 import Link from "next/link";
 import { parseAsArrayOf, parseAsString, useQueryState } from "nuqs";
 
@@ -30,7 +30,7 @@ export const Menu: React.FC<Props> = ({ namespace, identifier }) => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" shape="square">
           <MoreHorizontal className="w-4 h-4" />
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/[overrideId]/settings.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/[overrideId]/settings.tsx
index 9336f4730b..3349d6a4f5 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/[overrideId]/settings.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/[overrideId]/settings.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Form,
@@ -22,6 +21,7 @@ import {
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import type React from "react";
 import { useForm } from "react-hook-form";
@@ -162,11 +162,7 @@ export const UpdateCard: React.FC<Props> = ({ overrideId, defaultValues }) => {
           </CardContent>
 
           <CardFooter className="flex justify-end space-x-4">
-            <Button
-              type="button"
-              onClick={() => deleteOverride.mutate({ id: overrideId })}
-              variant="secondary"
-            >
+            <Button type="button" onClick={() => deleteOverride.mutate({ id: overrideId })}>
               Delete
             </Button>
             <Button disabled={update.isLoading || !form.formState.isValid} type="submit">
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/create-new-override.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/create-new-override.tsx
index 9fabd593e6..e5f0d28b86 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/create-new-override.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/create-new-override.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Form,
@@ -22,6 +21,7 @@ import {
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter, useSearchParams } from "next/navigation";
 import type React from "react";
 import { useForm } from "react-hook-form";
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/table.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/table.tsx
index bee67ee5f0..f0b5b8e868 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/table.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/table.tsx
@@ -1,5 +1,4 @@
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
   Table,
   TableBody,
@@ -9,6 +8,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { clickhouse } from "@/lib/clickhouse";
+import { Button } from "@unkey/ui";
 import { ChevronRight, Minus } from "lucide-react";
 import ms from "ms";
 import Link from "next/link";
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
index e2354bfcb1..fc6140a271 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Button } from "@/components/ui/button";
+import { Button } from "@unkey/ui";
 import type React from "react";
 import { useState } from "react";
 
@@ -93,7 +93,7 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
         </CardHeader>
 
         <CardFooter className="z-10 justify-end">
-          <Button type="button" onClick={() => setOpen(!open)} variant="alert">
+          <Button type="button" onClick={() => setOpen(!open)} variant="destructive">
             Delete namespace
           </Button>
         </CardFooter>
@@ -158,13 +158,12 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
                   type="button"
                   disabled={deleteNamespace.isLoading}
                   onClick={() => setOpen(!open)}
-                  variant="secondary"
                 >
                   Cancel
                 </Button>
                 <Button
                   type="submit"
-                  variant={isValid ? "alert" : "disabled"}
+                  variant="destructive"
                   disabled={!isValid || deleteNamespace.isLoading}
                 >
                   {deleteNamespace.isLoading ? <Loading /> : "Delete namespace"}
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/update-namespace-name.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/update-namespace-name.tsx
index 698426039a..5a12d79935 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/update-namespace-name.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/update-namespace-name.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { revalidateTag } from "@/app/actions";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -16,6 +15,7 @@ import { toast } from "@/components/ui/toaster";
 import { tags } from "@/lib/cache";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { validation } from "@unkey/validation";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -85,9 +85,7 @@ export const UpdateNamespaceName: React.FC<Props> = ({ namespace }) => {
         </CardContent>
         <CardFooter className="justify-end">
           <Button
-            variant={
-              form.formState.isValid && !form.formState.isSubmitting ? "primary" : "disabled"
-            }
+            variant="primary"
             disabled={!form.formState.isValid || form.formState.isSubmitting}
             type="submit"
           >
diff --git a/apps/dashboard/app/(app)/ratelimits/create-namespace-button.tsx b/apps/dashboard/app/(app)/ratelimits/create-namespace-button.tsx
index 0f0330d73a..c9c0ca5364 100644
--- a/apps/dashboard/app/(app)/ratelimits/create-namespace-button.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/create-namespace-button.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogTrigger } from "@/components/ui/dialog";
 import {
   Form,
@@ -15,6 +14,7 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
 import type React from "react";
diff --git a/apps/dashboard/app/(app)/ratelimits/page.tsx b/apps/dashboard/app/(app)/ratelimits/page.tsx
index 628730b933..2e55b47e65 100644
--- a/apps/dashboard/app/(app)/ratelimits/page.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/page.tsx
@@ -2,11 +2,11 @@ import { PageHeader } from "@/components/dashboard/page-header";
 
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
-import { Button } from "@/components/ui/button";
 import { Code } from "@/components/ui/code";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
+import { Button } from "@unkey/ui";
 import { BookOpen, Scan } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
@@ -82,7 +82,7 @@ export default async function RatelimitOverviewPage() {
           </Code>
           <div className="flex flex-col items-center justify-center gap-2 md:flex-row">
             <Link href="/docs/ratelimiting/introduction" target="_blank">
-              <Button variant="secondary" className="items-center w-full gap-2 ">
+              <Button className="items-center w-full gap-2 ">
                 <BookOpen className="w-4 h-4 " />
                 Read the docs
               </Button>
diff --git a/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx b/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx
index a0af5cd114..531ad5bdfa 100644
--- a/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx
+++ b/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Button } from "@/components/ui/button";
+import { Button } from "@unkey/ui";
 import type React from "react";
 import { useState } from "react";
 
@@ -97,7 +97,7 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
         </CardHeader>
 
         <CardFooter className="z-10 justify-start sm:justify-end">
-          <Button type="button" onClick={() => setOpen(!open)} variant="alert">
+          <Button type="button" onClick={() => setOpen(!open)} variant="destructive">
             Delete gateway
           </Button>
         </CardFooter>
@@ -160,13 +160,12 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
                   type="button"
                   disabled={deleteGateway.isLoading}
                   onClick={() => setOpen(!open)}
-                  variant="secondary"
                 >
                   Cancel
                 </Button>
                 <Button
                   type="submit"
-                  variant={isValid ? "alert" : "disabled"}
+                  variant="destructive"
                   disabled={!isValid || deleteGateway.isLoading}
                 >
                   {deleteGateway.isLoading ? <Loading /> : "Delete gateway"}
diff --git a/apps/dashboard/app/(app)/settings/billing/page.tsx b/apps/dashboard/app/(app)/settings/billing/page.tsx
index a2c8f4db80..8c55c290ed 100644
--- a/apps/dashboard/app/(app)/settings/billing/page.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/page.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -14,6 +13,7 @@ import { type Workspace, db } from "@/lib/db";
 import { stripeEnv } from "@/lib/env";
 import { cn } from "@/lib/utils";
 import { type BillingTier, QUOTA, calculateTieredPrices } from "@unkey/billing";
+import { Button } from "@unkey/ui";
 import { Check, ExternalLink } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
@@ -157,14 +157,12 @@ const Side: React.FC<{ workspace: Workspace }> = async ({ workspace }) => {
 
           <div className="flex items-center gap-8">
             <Link href="/settings/billing/stripe" className="w-full">
-              <Button variant="secondary" className="whitespace-nowrap">
+              <Button className="whitespace-nowrap">
                 {paymentMethod ? "Update Card" : "Add Credit Card"}
               </Button>
             </Link>
             <Link href="/settings/billing/plans">
-              <Button variant="secondary" className="whitespace-nowrap">
-                Change Plan
-              </Button>
+              <Button className="whitespace-nowrap">Change Plan</Button>
             </Link>
           </div>
         </div>
diff --git a/apps/dashboard/app/(app)/settings/billing/plans/button.tsx b/apps/dashboard/app/(app)/settings/billing/plans/button.tsx
index e173ed1562..b0cf72616b 100644
--- a/apps/dashboard/app/(app)/settings/billing/plans/button.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/plans/button.tsx
@@ -2,7 +2,6 @@
 
 import { Loading } from "@/components/dashboard/loading";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -14,6 +13,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { PostHogEvent } from "@/providers/PostHogProvider";
 import type { Workspace } from "@unkey/db";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import type React from "react";
 import { useState } from "react";
@@ -63,21 +63,12 @@ export const ChangePlanButton: React.FC<Props> = ({ workspace, newPlan, label })
       <DialogTrigger asChild disabled={isSamePlan && !workspace.planDowngradeRequest}>
         <Button
           className="w-full"
+          disabled={isSamePlan}
           variant={
-            workspace.planDowngradeRequest && isSamePlan
-              ? "primary"
-              : isSamePlan
-                ? "disabled"
-                : newPlan === "pro"
-                  ? "primary"
-                  : "secondary"
+            workspace.planDowngradeRequest ? "primary" : newPlan === "pro" ? "primary" : "default"
           }
         >
-          {workspace.planDowngradeRequest && isSamePlan
-            ? "Resubscribe"
-            : isSamePlan
-              ? "Current Plan"
-              : label}
+          {workspace.planDowngradeRequest ? "Resubscribe" : isSamePlan ? "Current Plan" : label}
         </Button>
       </DialogTrigger>
       <DialogContent>
@@ -99,7 +90,7 @@ export const ChangePlanButton: React.FC<Props> = ({ workspace, newPlan, label })
         )}
 
         <DialogFooter className="justify-end">
-          <Button className="col-span-1" variant="outline" onClick={() => setOpen(false)}>
+          <Button className="col-span-1" onClick={() => setOpen(false)}>
             Cancel
           </Button>
           <Button className="col-span-1" variant="primary" onClick={handleClick}>
diff --git a/apps/dashboard/app/(app)/settings/billing/plans/page.tsx b/apps/dashboard/app/(app)/settings/billing/plans/page.tsx
index 3d79c9c6b6..f9f226606d 100644
--- a/apps/dashboard/app/(app)/settings/billing/plans/page.tsx
+++ b/apps/dashboard/app/(app)/settings/billing/plans/page.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@/components/ui/button";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
+import { Button } from "@unkey/ui";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
@@ -149,7 +149,7 @@ export default async function Page() {
                 <Link href="mailto:support@unkey.dev">
                   <Button
                     className="w-full col-span-1"
-                    variant={workspace.plan === "enterprise" ? "disabled" : "primary"}
+                    variant="primary"
                     disabled={workspace.plan === "enterprise"}
                   >
                     Schedule a Call
diff --git a/apps/dashboard/app/(app)/settings/general/update-workspace-name.tsx b/apps/dashboard/app/(app)/settings/general/update-workspace-name.tsx
index 50c47cb5e2..9ceabe7ec7 100644
--- a/apps/dashboard/app/(app)/settings/general/update-workspace-name.tsx
+++ b/apps/dashboard/app/(app)/settings/general/update-workspace-name.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
@@ -8,6 +7,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { useUser } from "@clerk/nextjs";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -86,11 +86,7 @@ export const UpdateWorkspaceName: React.FC<Props> = ({ workspace }) => {
             </div>
           </CardContent>
           <CardFooter className="justify-end">
-            <Button
-              variant={updateName.isLoading ? "disabled" : "primary"}
-              type="submit"
-              disabled={isDisabled}
-            >
+            <Button variant="primary" type="submit" disabled={isDisabled}>
               {updateName.isLoading ? <Loading /> : "Save"}
             </Button>
           </CardFooter>
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx
index acfe0e69c3..bb1de70698 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx
@@ -1,10 +1,10 @@
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { DialogTrigger } from "@/components/ui/dialog";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { type Permission, db, eq, schema } from "@/lib/db";
 import { env } from "@/lib/env";
+import { Button } from "@unkey/ui";
 import { notFound } from "next/navigation";
 import { AccessTable } from "./history/access-table";
 import { DialogAddPermissionsForAPI } from "./permissions/add-permission-for-api";
@@ -144,7 +144,7 @@ export default async function RootKeyPage(props: {
         {apisWithoutActivePermissions.length > 0 && (
           <Card className="flex w-full items-center justify-center h-36 border-dashed">
             <DialogTrigger asChild>
-              <Button variant="outline">
+              <Button>
                 Add permissions for {apisWithActivePermissions.length > 0 ? "another" : "an"} API
               </Button>
             </DialogTrigger>
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx
index 3198381f7d..8843ef9544 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -13,6 +12,7 @@ import {
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { Permission } from "@unkey/db";
+import { Button } from "@unkey/ui";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 
@@ -63,7 +63,7 @@ export const Legacy: React.FC<Props> = ({ keyId, permissions }) => {
 
       <CardFooter className="flex justify-end">
         <Button
-          variant={canSafelyDelete ? "alert" : "disabled"}
+          variant="destructive"
           disabled={!canSafelyDelete}
           onClick={() => {
             if (!canSafelyDelete) {
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx
index c746a64f46..863d0a66e7 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Dialog,
@@ -10,6 +9,7 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import type { Permission } from "@unkey/db";
+import { Button } from "@unkey/ui";
 import { Check } from "lucide-react";
 import { PermissionToggle } from "./permission_toggle";
 import type { UnkeyPermissions } from "./permissions";
@@ -47,9 +47,7 @@ export function PermissionManagerCard(props: PermissionManagerCardProps) {
           <CardTitle className="flex grow shrink-0">{props.permissionManagerTitle}</CardTitle>
           <Dialog>
             <DialogTrigger asChild>
-              <Button className="flex grow-0 shrink-0" variant="outline">
-                Edit
-              </Button>
+              <Button className="flex grow-0 shrink-0">Edit</Button>
             </DialogTrigger>
 
             <DialogContent className="sm:max-w-[640px] max-h-[70vh] overflow-y-scroll">
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx
index 9ad1f0e22e..a9f6938920 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -16,6 +15,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
diff --git a/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx b/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
index 35192bcf9a..7e135bcbf2 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
@@ -3,8 +3,8 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { Loading } from "@/components/dashboard/loading";
 import { VisibleButton } from "@/components/dashboard/visible-button";
-import { Button } from "@/components/ui/button";
 import { Code } from "@/components/ui/code";
+import { Button } from "@unkey/ui";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
diff --git a/apps/dashboard/app/(app)/settings/root-keys/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/page.tsx
index c9792619e8..6dc6d1c548 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/page.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/page.tsx
@@ -1,8 +1,8 @@
 import { PageHeader } from "@/components/dashboard/page-header";
 import { RootKeyTable } from "@/components/dashboard/root-key-table";
-import { Button } from "@/components/ui/button";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
+import { Button } from "@unkey/ui";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
diff --git a/apps/dashboard/app/(app)/settings/team/invite.tsx b/apps/dashboard/app/(app)/settings/team/invite.tsx
index d011e1d32c..a1f53a117c 100644
--- a/apps/dashboard/app/(app)/settings/team/invite.tsx
+++ b/apps/dashboard/app/(app)/settings/team/invite.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -30,6 +29,7 @@ import {
 import { toast } from "@/components/ui/toaster";
 import { useOrganization } from "@clerk/nextjs";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
 import type React from "react";
@@ -143,7 +143,6 @@ export const InviteButton = ({ ...rest }: React.ButtonHTMLAttributes<HTMLButtonE
 
               <DialogFooter className="flex-row items-center justify-end gap-2 pt-4 ">
                 <Button
-                  variant="secondary"
                   onClick={() => {
                     setDialogOpen(false);
                   }}
@@ -151,7 +150,7 @@ export const InviteButton = ({ ...rest }: React.ButtonHTMLAttributes<HTMLButtonE
                   Cancel
                 </Button>
                 <Button
-                  variant={form.formState.isValid && !isLoading ? "primary" : "disabled"}
+                  variant="primary"
                   disabled={!form.formState.isValid || isLoading}
                   type="submit"
                 >
diff --git a/apps/dashboard/app/(app)/settings/team/page.tsx b/apps/dashboard/app/(app)/settings/team/page.tsx
index cb9c6487db..3697973dcb 100644
--- a/apps/dashboard/app/(app)/settings/team/page.tsx
+++ b/apps/dashboard/app/(app)/settings/team/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button } from "@unkey/ui";
 import type React from "react";
 import { useState } from "react";
 import { InviteButton } from "./invite";
@@ -148,7 +148,7 @@ const Members: React.FC = () => {
             <TableCell>
               {membership?.role === "admin" && publicUserData.userId !== user?.id ? (
                 <Confirm
-                  variant="alert"
+                  variant="destructive"
                   title="Remove member"
                   description={`Are you sure you want to remove ${publicUserData.identifier}?`}
                   onConfirm={() => {
@@ -156,11 +156,7 @@ const Members: React.FC = () => {
                       organization?.removeMember(publicUserData.userId);
                     }
                   }}
-                  trigger={
-                    <Button variant="secondary" size="sm">
-                      Remove
-                    </Button>
-                  }
+                  trigger={<Button>Remove</Button>}
                 />
               ) : null}
             </TableCell>
@@ -218,8 +214,7 @@ const Invitations: React.FC = () => {
 
             <TableCell>
               <Button
-                variant="alert"
-                size="sm"
+                variant="destructive"
                 onClick={async () => {
                   await invitation.revoke();
                   toast.success("Invitation revoked");
diff --git a/apps/dashboard/app/(app)/settings/user/update-user-email.tsx b/apps/dashboard/app/(app)/settings/user/update-user-email.tsx
index 038d0f1226..28d6de6ea8 100644
--- a/apps/dashboard/app/(app)/settings/user/update-user-email.tsx
+++ b/apps/dashboard/app/(app)/settings/user/update-user-email.tsx
@@ -2,7 +2,6 @@
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Loading } from "@/components/dashboard/loading";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Dialog,
@@ -35,6 +34,7 @@ import { toast } from "@/components/ui/toaster";
 import type { ClerkError } from "@/lib/clerk";
 import { useClerk, useUser } from "@clerk/nextjs";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { ChevronsUp, MoreHorizontal, ShieldCheck, X } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -161,7 +161,7 @@ export const UpdateUserEmail: React.FC = () => {
                                 <DialogFooter>
                                   <Button
                                     type="submit"
-                                    variant="alert"
+                                    variant="destructive"
                                     onClick={() => {
                                       destroy()
                                         .then(() => {
@@ -274,11 +274,7 @@ export const UpdateUserEmail: React.FC = () => {
                 )}
               />
 
-              <Button
-                type="submit"
-                variant={isDisabled || sendingVerification ? "disabled" : "primary"}
-                disabled={isDisabled || sendingVerification}
-              >
+              <Button type="submit" variant="primary" disabled={isDisabled || sendingVerification}>
                 {emailForm.formState.isLoading || sendingVerification ? <Loading /> : "Save"}
               </Button>
             </form>
@@ -367,11 +363,7 @@ const VerificationForm: React.FC<VerificationFormProps> = ({ email, onSuccess })
               )}
             />
           </div>
-          <Button
-            type="submit"
-            variant={verificationForm.formState.isLoading ? "disabled" : "primary"}
-            disabled={verificationForm.formState.isLoading}
-          >
+          <Button type="submit" variant="primary" disabled={verificationForm.formState.isLoading}>
             {verificationForm.formState.isLoading ? <Loading /> : "Verify"}
           </Button>
         </div>
diff --git a/apps/dashboard/app/(app)/settings/user/update-user-name.tsx b/apps/dashboard/app/(app)/settings/user/update-user-name.tsx
index e7b81d6b41..eb2df513ad 100644
--- a/apps/dashboard/app/(app)/settings/user/update-user-name.tsx
+++ b/apps/dashboard/app/(app)/settings/user/update-user-name.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Form,
@@ -17,6 +16,7 @@ import { toast } from "@/components/ui/toaster";
 import type { ClerkError } from "@/lib/clerk";
 import { useUser } from "@clerk/nextjs";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import type React from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -90,11 +90,7 @@ export const UpdateUserName: React.FC = () => {
             />
           </CardContent>
           <CardFooter className="justify-end">
-            <Button
-              type="submit"
-              variant={isDisabled ? "disabled" : "primary"}
-              disabled={isDisabled}
-            >
+            <Button type="submit" variant="primary" disabled={isDisabled}>
               {form.formState.isLoading ? <Loading /> : "Save"}
             </Button>
           </CardFooter>
diff --git a/apps/dashboard/app/(app)/settings/vercel/client.tsx b/apps/dashboard/app/(app)/settings/vercel/client.tsx
index 29dc4eaa66..d5834086ea 100644
--- a/apps/dashboard/app/(app)/settings/vercel/client.tsx
+++ b/apps/dashboard/app/(app)/settings/vercel/client.tsx
@@ -3,7 +3,6 @@ import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Loading } from "@/components/dashboard/loading";
 import { PageHeader } from "@/components/dashboard/page-header";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -26,6 +25,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import type { Api, Key, VercelBinding } from "@unkey/db";
+import { Button } from "@unkey/ui";
 import { ExternalLink, Link2, MoreHorizontal, Plus, RefreshCw, Trash, Unlink2 } from "lucide-react";
 import ms from "ms";
 import Link from "next/link";
@@ -77,7 +77,7 @@ export const Client: React.FC<Props> = ({ projects, integration, apis, rootKeys
         <EmptyPlaceholder.Title>No connected projects found</EmptyPlaceholder.Title>
         <EmptyPlaceholder.Description>Connect a Vercel project now</EmptyPlaceholder.Description>
         <Link href="https://vercel.com/integrations/unkey" target="_blank">
-          <Button variant="link">Vercel Integration</Button>
+          <Button variant="ghost">Vercel Integration</Button>
         </Link>
       </EmptyPlaceholder>
     );
@@ -100,7 +100,7 @@ export const Client: React.FC<Props> = ({ projects, integration, apis, rootKeys
             href={`https://vercel.com/dashboard/integrations/${integration.id}`}
             target="_blank"
           >
-            <Button variant="secondary">Configure Vercel</Button>
+            <Button>Configure Vercel</Button>
           </Link>,
         ]}
       />
@@ -122,7 +122,7 @@ export const Client: React.FC<Props> = ({ projects, integration, apis, rootKeys
                     <span className="font-semibold">{project.name}</span>
                   </h3>
 
-                  <Button variant="ghost" size="icon">
+                  <Button variant="ghost" shape="square">
                     <MoreHorizontal className="w-4 h-4" />
                   </Button>
                 </div>
@@ -287,7 +287,7 @@ const ConnectedResource: React.FC<{
 
       <DropdownMenu>
         <DropdownMenuTrigger>
-          <Button variant="ghost" size="icon">
+          <Button variant="ghost" shape="square">
             {isLoading ? <Loading className="w-4 h-4" /> : <MoreHorizontal className="w-4 h-4" />}
           </Button>
         </DropdownMenuTrigger>
diff --git a/apps/dashboard/app/(app)/settings/vercel/page.tsx b/apps/dashboard/app/(app)/settings/vercel/page.tsx
index a392afd247..7ab4a902a4 100644
--- a/apps/dashboard/app/(app)/settings/vercel/page.tsx
+++ b/apps/dashboard/app/(app)/settings/vercel/page.tsx
@@ -1,9 +1,9 @@
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
-import { Button } from "@/components/ui/button";
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { type Api, type Key, type VercelBinding, db, eq, schema } from "@/lib/db";
 import { clerkClient } from "@clerk/nextjs";
+import { Button } from "@unkey/ui";
 import { Vercel } from "@unkey/vercel";
 import Link from "next/link";
 import { notFound } from "next/navigation";
diff --git a/apps/dashboard/app/integrations/vercel/callback/client.tsx b/apps/dashboard/app/integrations/vercel/callback/client.tsx
index 0a2840b622..5b82261513 100644
--- a/apps/dashboard/app/integrations/vercel/callback/client.tsx
+++ b/apps/dashboard/app/integrations/vercel/callback/client.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
 import { PageHeader } from "@/components/dashboard/page-header";
-import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -14,6 +13,7 @@ import {
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { Api, VercelBinding } from "@unkey/db";
+import { Button } from "@unkey/ui";
 import { X } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -134,7 +134,7 @@ export const Client: React.FC<Props> = ({
                     </Select>
                     <Button
                       variant="ghost"
-                      size="icon"
+                      shape="square"
                       onClick={() => {
                         setSelectedApis({
                           ...selectedApis,
@@ -154,7 +154,6 @@ export const Client: React.FC<Props> = ({
 
       <footer className="flex items-center justify-end gap-4 mt-8">
         <Button
-          variant="secondary"
           onClick={() => {
             window.close();
           }}
@@ -163,7 +162,7 @@ export const Client: React.FC<Props> = ({
         </Button>
         <Button
           disabled={disabled}
-          variant={disabled ? "disabled" : "primary"}
+          variant="primary"
           onClick={() => {
             create.mutate({
               projectId: projectId!,
diff --git a/apps/dashboard/app/new/create-api.tsx b/apps/dashboard/app/new/create-api.tsx
index 5a8b572a0d..96868f2d03 100644
--- a/apps/dashboard/app/new/create-api.tsx
+++ b/apps/dashboard/app/new/create-api.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -17,6 +16,7 @@ import { trpc } from "@/lib/trpc/client";
 import { PostHogIdentify } from "@/providers/PostHogProvider";
 import { useUser } from "@clerk/nextjs";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { Code2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -104,7 +104,7 @@ export const CreateApi: React.FC<Props> = ({ workspace }) => {
 
               <div className="mt-8">
                 <Button
-                  variant={form.formState.isValid ? "primary" : "disabled"}
+                  variant="primary"
                   disabled={createApi.isLoading || !form.formState.isValid}
                   type="submit"
                   className="w-full"
diff --git a/apps/dashboard/app/new/create-ratelimit.tsx b/apps/dashboard/app/new/create-ratelimit.tsx
index 44f1b57ad8..927894b64f 100644
--- a/apps/dashboard/app/new/create-ratelimit.tsx
+++ b/apps/dashboard/app/new/create-ratelimit.tsx
@@ -1,10 +1,10 @@
 import { CopyButton } from "@/components/dashboard/copy-button";
-import { Button } from "@/components/ui/button";
 import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { router } from "@/lib/trpc/routers";
 import { auth } from "@clerk/nextjs";
 import { createCallerFactory } from "@trpc/server";
+import { Button } from "@unkey/ui";
 import { GlobeLock } from "lucide-react";
 import Link from "next/link";
 
diff --git a/apps/dashboard/app/new/create-workspace.tsx b/apps/dashboard/app/new/create-workspace.tsx
index 0500e22b36..9b3b8b8395 100644
--- a/apps/dashboard/app/new/create-workspace.tsx
+++ b/apps/dashboard/app/new/create-workspace.tsx
@@ -2,7 +2,6 @@
 
 import { Loading } from "@/components/dashboard/loading";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -17,6 +16,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { useOrganizationList } from "@clerk/nextjs";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { Box } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -88,7 +88,7 @@ export const CreateWorkspace: React.FC = () => {
             </div>
             <div className="mt-8">
               <Button
-                variant={form.formState.isValid ? "primary" : "disabled"}
+                variant="primary"
                 disabled={createWorkspace.isLoading || !form.formState.isValid}
                 type="submit"
                 className="w-full"
diff --git a/apps/dashboard/app/new/keys.tsx b/apps/dashboard/app/new/keys.tsx
index 726e8b12c6..c62260258a 100644
--- a/apps/dashboard/app/new/keys.tsx
+++ b/apps/dashboard/app/new/keys.tsx
@@ -5,7 +5,6 @@ import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Loading } from "@/components/dashboard/loading";
 import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -17,6 +16,7 @@ import {
 import { Code } from "@/components/ui/code";
 import { Separator } from "@/components/ui/separator";
 import { trpc } from "@/lib/trpc/client";
+import { Button } from "@unkey/ui";
 import { AlertCircle, KeyRound, Lock } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
@@ -176,8 +176,7 @@ export const Keys: React.FC<Props> = ({ keyAuthId, apiId }) => {
             </CardContent>
             <CardFooter className="justify-between">
               <Button
-                size="sm"
-                variant="link"
+                variant="ghost"
                 disabled={key.isLoading}
                 onClick={() => key.mutate({ keyAuthId })}
               >
@@ -185,7 +184,6 @@ export const Keys: React.FC<Props> = ({ keyAuthId, apiId }) => {
               </Button>
               <Button
                 className="whitespace-nowrap max-sm:text-xs"
-                size="sm"
                 onClick={() => {
                   setStep({ step: "VERIFY_KEY" });
                 }}
@@ -232,12 +230,10 @@ export const Keys: React.FC<Props> = ({ keyAuthId, apiId }) => {
             </CardContent>
             <CardFooter className="justify-between">
               <Link href="https://unkey.dev/docs" target="_blank">
-                <Button size="sm" variant="link">
-                  Read more
-                </Button>
+                <Button variant="ghost">Read more</Button>
               </Link>
               <Link href="/">
-                <Button size="sm">Let's go</Button>
+                <Button>Let's go</Button>
               </Link>
             </CardFooter>
           </Card>
diff --git a/apps/dashboard/app/new/page.tsx b/apps/dashboard/app/new/page.tsx
index 389348ce76..588f74cfc5 100644
--- a/apps/dashboard/app/new/page.tsx
+++ b/apps/dashboard/app/new/page.tsx
@@ -1,10 +1,10 @@
 import { PageHeader } from "@/components/dashboard/page-header";
-import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { insertAuditLogs } from "@/lib/audit";
 import { db, schema } from "@/lib/db";
 import { auth } from "@clerk/nextjs";
 import { newId } from "@unkey/id";
+import { Button } from "@unkey/ui";
 import { ArrowRight, GlobeLock, KeySquare } from "lucide-react";
 import { headers } from "next/headers";
 import Link from "next/link";
diff --git a/apps/dashboard/app/ratelimit/page.tsx b/apps/dashboard/app/ratelimit/page.tsx
index 69eae91a1b..195015b5b0 100644
--- a/apps/dashboard/app/ratelimit/page.tsx
+++ b/apps/dashboard/app/ratelimit/page.tsx
@@ -5,7 +5,6 @@ import { LineChart } from "@/components/dashboard/charts";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Loading } from "@/components/dashboard/loading";
 import { PageHeader } from "@/components/dashboard/page-header";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -16,6 +15,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Button } from "@unkey/ui";
 import Link from "next/link";
 import { parseAsInteger, parseAsStringEnum, useQueryState } from "nuqs";
 import { useLocalStorage } from "usehooks-ts";
diff --git a/apps/dashboard/components/array-input.tsx b/apps/dashboard/components/array-input.tsx
index 6f2282fdcf..42da3b7888 100644
--- a/apps/dashboard/components/array-input.tsx
+++ b/apps/dashboard/components/array-input.tsx
@@ -1,7 +1,7 @@
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@unkey/ui";
 import { CornerDownLeft, X } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 
 type Props = {
@@ -78,8 +78,8 @@ export const ArrayInput: React.FC<Props> = ({ title, placeholder, selected, setS
             className="flex-1 w-full bg-transparent outline-none placeholder:text-content-subtle"
           />
         </div>
-        <Button size="icon" variant="secondary" onClick={handleAdd}>
-          <CornerDownLeft className="w-4 h-4" />
+        <Button shape="square" variant="default" onClick={handleAdd}>
+          <CornerDownLeft />
         </Button>
       </div>
     </div>
diff --git a/apps/dashboard/components/dashboard/api-key-table/index.tsx b/apps/dashboard/components/dashboard/api-key-table/index.tsx
index 27720c5579..ae4f10956f 100644
--- a/apps/dashboard/components/dashboard/api-key-table/index.tsx
+++ b/apps/dashboard/components/dashboard/api-key-table/index.tsx
@@ -2,7 +2,6 @@
 
 import { Alert } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
@@ -23,6 +22,7 @@ import { toast } from "@/components/ui/toaster";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { trpc } from "@/lib/trpc/client";
 import type { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@unkey/ui";
 import {
   ArrowUpDown,
   Check,
@@ -275,7 +275,7 @@ export const ApiKeyTable: React.FC<Props> = ({ data }) => {
 
                   <DialogFooter>
                     <Button
-                      variant="alert"
+                      variant="destructive"
                       disabled={deleteKey.isLoading}
                       onClick={() => deleteKey.mutate({ keyIds: [row.original.id] })}
                     >
diff --git a/apps/dashboard/components/dashboard/api-key-table/table.tsx b/apps/dashboard/components/dashboard/api-key-table/table.tsx
index 2ce199b7b8..f4c76a1d8e 100644
--- a/apps/dashboard/components/dashboard/api-key-table/table.tsx
+++ b/apps/dashboard/components/dashboard/api-key-table/table.tsx
@@ -23,7 +23,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -41,6 +40,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Loading } from "../loading";
@@ -98,9 +98,7 @@ export function DataTable<TData, TValue>({ data, columns }: DataTableProps<TData
           {Object.values(rowSelection).length > 0 ? (
             <Dialog>
               <DialogTrigger asChild>
-                <Button className="min-w-full md:min-w-min " variant="secondary">
-                  Revoke selected keys
-                </Button>
+                <Button className="min-w-full md:min-w-min ">Revoke selected keys</Button>
               </DialogTrigger>
               <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
@@ -136,10 +134,7 @@ export function DataTable<TData, TValue>({ data, columns }: DataTableProps<TData
           />
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button
-                className="min-w-full mt-4 ml-0 md:min-w-min md:mt-0 md:ml-auto"
-                variant="secondary"
-              >
+              <Button className="min-w-full mt-4 ml-0 md:min-w-min md:mt-0 md:ml-auto">
                 Columns
               </Button>
             </DropdownMenuTrigger>
@@ -200,20 +195,10 @@ export function DataTable<TData, TValue>({ data, columns }: DataTableProps<TData
         </TableBody>
       </Table>
       <div className="flex items-center justify-end py-4 space-x-2">
-        <Button
-          variant={table.getCanPreviousPage() ? "secondary" : "disabled"}
-          size="sm"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-        >
+        <Button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
           Previous
         </Button>
-        <Button
-          variant={table.getCanNextPage() ? "secondary" : "disabled"}
-          size="sm"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-        >
+        <Button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
           Next
         </Button>
       </div>
diff --git a/apps/dashboard/components/dashboard/confirm.tsx b/apps/dashboard/components/dashboard/confirm.tsx
index 414c4965fc..84fad996dd 100644
--- a/apps/dashboard/components/dashboard/confirm.tsx
+++ b/apps/dashboard/components/dashboard/confirm.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -10,6 +9,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import type React from "react";
 import { useState } from "react";
 import { Loading } from "./loading";
@@ -19,7 +19,7 @@ export type ConfirmProps = {
   description?: string;
   trigger: React.ReactNode;
   onConfirm: () => void | Promise<void>;
-  variant?: "alert";
+  variant?: "destructive";
   disabled?: boolean;
 };
 
@@ -41,7 +41,7 @@ export const Confirm: React.FC<ConfirmProps> = (props): JSX.Element => {
         {props.trigger}
       </DialogTrigger>
       <DialogContent
-        className={cn("sm:max-w-[425px]", { "border-alert": props.variant === "alert" })}
+        className={cn("sm:max-w-[425px]", { "border-alert": props.variant === "destructive" })}
       >
         <DialogHeader>
           <DialogTitle>{props.title}</DialogTitle>
diff --git a/apps/dashboard/components/dashboard/create-key-button.tsx b/apps/dashboard/components/dashboard/create-key-button.tsx
index 9960ba0a77..8ecbfbe226 100644
--- a/apps/dashboard/components/dashboard/create-key-button.tsx
+++ b/apps/dashboard/components/dashboard/create-key-button.tsx
@@ -1,7 +1,7 @@
 "use client";
+import { Button } from "@unkey/ui";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Button } from "../ui/button";
 
 export const CreateKeyButton = (props: { apiId: string; keyAuthId: string }) => {
   // Add missing import
diff --git a/apps/dashboard/components/dashboard/feedback-component.tsx b/apps/dashboard/components/dashboard/feedback-component.tsx
index 8d1e8da58b..340422cdc8 100644
--- a/apps/dashboard/components/dashboard/feedback-component.tsx
+++ b/apps/dashboard/components/dashboard/feedback-component.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -13,6 +12,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { MessagesSquare } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
diff --git a/apps/dashboard/components/dashboard/root-key-table/index.tsx b/apps/dashboard/components/dashboard/root-key-table/index.tsx
index 6655965e6a..c30a217ad0 100644
--- a/apps/dashboard/components/dashboard/root-key-table/index.tsx
+++ b/apps/dashboard/components/dashboard/root-key-table/index.tsx
@@ -2,7 +2,6 @@
 
 import { Alert } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
@@ -23,6 +22,7 @@ import { toast } from "@/components/ui/toaster";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { trpc } from "@/lib/trpc/client";
 import type { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@unkey/ui";
 import { ArrowUpDown, Minus, MoreHorizontal, MoreVertical, Trash } from "lucide-react";
 import ms from "ms";
 import Link from "next/link";
@@ -195,7 +195,7 @@ export const RootKeyTable: React.FC<Props> = ({ data }) => {
 
                   <DialogFooter>
                     <Button
-                      variant="alert"
+                      variant="destructive"
                       disabled={deleteKey.isLoading}
                       onClick={() => deleteKey.mutate({ keyIds: [row.original.id] })}
                     >
diff --git a/apps/dashboard/components/dashboard/root-key-table/table.tsx b/apps/dashboard/components/dashboard/root-key-table/table.tsx
index 698bccb809..f79189bdaa 100644
--- a/apps/dashboard/components/dashboard/root-key-table/table.tsx
+++ b/apps/dashboard/components/dashboard/root-key-table/table.tsx
@@ -23,7 +23,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -41,6 +40,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Loading } from "../loading";
@@ -98,9 +98,7 @@ export function DataTable<TData, TValue>({ data, columns }: DataTableProps<TData
           {Object.values(rowSelection).length > 0 ? (
             <Dialog>
               <DialogTrigger asChild>
-                <Button className="min-w-full md:min-w-min " variant="secondary">
-                  Revoke selected keys
-                </Button>
+                <Button className="min-w-full md:min-w-min ">Revoke selected keys</Button>
               </DialogTrigger>
               <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
@@ -136,10 +134,7 @@ export function DataTable<TData, TValue>({ data, columns }: DataTableProps<TData
           />
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button
-                className="min-w-full mt-4 ml-0 md:min-w-min md:mt-0 md:ml-auto"
-                variant="secondary"
-              >
+              <Button className="min-w-full mt-4 ml-0 md:min-w-min md:mt-0 md:ml-auto">
                 Columns
               </Button>
             </DropdownMenuTrigger>
@@ -200,20 +195,10 @@ export function DataTable<TData, TValue>({ data, columns }: DataTableProps<TData
         </TableBody>
       </Table>
       <div className="flex items-center justify-end py-4 space-x-2">
-        <Button
-          variant={table.getCanPreviousPage() ? "secondary" : "disabled"}
-          size="sm"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-        >
+        <Button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
           Previous
         </Button>
-        <Button
-          variant={table.getCanNextPage() ? "secondary" : "disabled"}
-          size="sm"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-        >
+        <Button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
           Next
         </Button>
       </div>
diff --git a/apps/dashboard/components/data-table/column-header.tsx b/apps/dashboard/components/data-table/column-header.tsx
index f047945210..5770ef6973 100644
--- a/apps/dashboard/components/data-table/column-header.tsx
+++ b/apps/dashboard/components/data-table/column-header.tsx
@@ -1,6 +1,5 @@
 import type { Column } from "@tanstack/react-table";
 
-import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,6 +7,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
 
 interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
@@ -28,7 +28,7 @@ export function DataTableColumnHeader<TData, TValue>({
     <div className={cn("flex items-center space-x-2", className)}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="h-8 -ml-3">
+          <Button variant="ghost" className="h-8 -ml-3">
             <span>{title}</span>
             {column.getIsSorted() === "desc" ? (
               <ChevronDown className="w-4 h-4 ml-2" />
diff --git a/apps/dashboard/components/data-table/faceted-filter.tsx b/apps/dashboard/components/data-table/faceted-filter.tsx
index 88f069d593..59ede8f92c 100644
--- a/apps/dashboard/components/data-table/faceted-filter.tsx
+++ b/apps/dashboard/components/data-table/faceted-filter.tsx
@@ -1,5 +1,4 @@
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -13,6 +12,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import type { Column } from "@tanstack/react-table";
+import { Button } from "@unkey/ui";
 import { Check, PlusCircle } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type React from "react";
@@ -43,7 +43,7 @@ export function DataTableFacetedFilter<TData, TValue>({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border-dashed">
+        <Button className="h-8 border-dashed">
           <PlusCircle className="w-4 h-4 mr-2" />
           {title}
           {selectedValues?.size > 0 && (
diff --git a/apps/dashboard/components/data-table/pagination.tsx b/apps/dashboard/components/data-table/pagination.tsx
index 27296f9f00..542b2e7f3b 100644
--- a/apps/dashboard/components/data-table/pagination.tsx
+++ b/apps/dashboard/components/data-table/pagination.tsx
@@ -1,6 +1,5 @@
 import type { Table } from "@tanstack/react-table";
 
-import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -8,6 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Button } from "@unkey/ui";
 import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
 
 interface DataTablePaginationProps<TData> {
@@ -43,7 +43,6 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
         </div>
         <div className="flex items-center space-x-2">
           <Button
-            variant="outline"
             className="hidden w-8 h-8 p-0 lg:flex"
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
@@ -52,7 +51,6 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             <ArrowLeft className="w-4 h-4" />
           </Button>
           <Button
-            variant="outline"
             className="w-8 h-8 p-0"
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
@@ -61,7 +59,6 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             <ChevronLeft className="w-4 h-4" />
           </Button>
           <Button
-            variant="outline"
             className="w-8 h-8 p-0"
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
@@ -70,7 +67,6 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             <ChevronRight className="w-4 h-4" />
           </Button>
           <Button
-            variant="outline"
             className="hidden w-8 h-8 p-0 lg:flex"
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
diff --git a/apps/dashboard/components/data-table/view-options.tsx b/apps/dashboard/components/data-table/view-options.tsx
index 4f5490280f..586e0d00ef 100644
--- a/apps/dashboard/components/data-table/view-options.tsx
+++ b/apps/dashboard/components/data-table/view-options.tsx
@@ -3,7 +3,6 @@
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import type { Table } from "@tanstack/react-table";
 
-import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -11,6 +10,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
+import { Button } from "@unkey/ui";
 import { ListFilter } from "lucide-react";
 
 interface DataTableViewOptionsProps<TData> {
@@ -21,7 +21,7 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="hidden h-8 ml-auto lg:flex">
+        <Button className="hidden h-8 ml-auto lg:flex">
           <ListFilter className="w-4 h-4 mr-2" />
           View
         </Button>
diff --git a/apps/dashboard/components/opt-in.tsx b/apps/dashboard/components/opt-in.tsx
index baf088aab9..102a7174cd 100644
--- a/apps/dashboard/components/opt-in.tsx
+++ b/apps/dashboard/components/opt-in.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
 import { trpc } from "@/lib/trpc/client";
 import type { Workspace } from "@unkey/db";
+import { Button } from "@unkey/ui";
 import { Power } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -49,7 +49,7 @@ export const OptIn: React.FC<Props> = ({ title, description, feature }) => {
 
       <div className="flex items-center gap-4">
         <Link href={`mailto:support@unkey.dev?subject=Beta Access: ${feature}`}>
-          <Button variant="secondary">Get in touch</Button>
+          <Button>Get in touch</Button>
         </Link>
 
         <Button variant="primary" onClick={() => optIn.mutate({ feature })}>
diff --git a/apps/dashboard/components/ui/alert-dialog.tsx b/apps/dashboard/components/ui/alert-dialog.tsx
index d3ec82a4d5..7ebefd2273 100644
--- a/apps/dashboard/components/ui/alert-dialog.tsx
+++ b/apps/dashboard/components/ui/alert-dialog.tsx
@@ -3,8 +3,8 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React from "react";
 
-import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { buttonVariants } from "@unkey/ui";
 
 const AlertDialog = AlertDialogPrimitive.Root;
 
@@ -96,7 +96,7 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    className={cn(buttonVariants({ variant: "default" }), "mt-2 sm:mt-0", className)}
     {...props}
   />
 ));
diff --git a/apps/dashboard/components/ui/back-button.tsx b/apps/dashboard/components/ui/back-button.tsx
index 0c10248fcf..11e8d9ed8f 100644
--- a/apps/dashboard/components/ui/back-button.tsx
+++ b/apps/dashboard/components/ui/back-button.tsx
@@ -1,6 +1,6 @@
 "use client";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
-import { Button } from "./button";
 
 function BackButton({
   className,
@@ -10,7 +10,7 @@ function BackButton({
 }>) {
   const router = useRouter();
   return (
-    <Button type="submit" variant="secondary" className={className} onClick={() => router.back()}>
+    <Button type="submit" variant="default" className={className} onClick={() => router.back()}>
       {children}
     </Button>
   );
diff --git a/apps/dashboard/components/ui/button.tsx b/apps/dashboard/components/ui/button.tsx
deleted file mode 100644
index f5524e7cf3..0000000000
--- a/apps/dashboard/components/ui/button.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md font-medium text-sm max-sm:text-xs transition-colors focus-visible:outline-none gap-2 disabled:pointer-events-none disabled:opacity-50 duration-200 whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        primary:
-          "bg-primary text-primary-foreground hover:bg-secondary hover:text-secondary-foreground border border-primary",
-        secondary:
-          " text-secondary-foreground bg-secondary hover:bg-primary hover:text-primary-foreground border border-border",
-        outline: "border border-input bg-background hover:bg-primary hover:text-primary-foreground",
-        alert:
-          "bg-background border border-alert text-content-alert hover:bg-alert hover:text-white",
-        disabled: "text-secondary-foreground bg-secondary border border-border opacity-50",
-
-        ghost: "hover:bg-gray-200 hover:text-gray-900",
-        link: "text-subtle underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-8 px-3 py-1.5",
-        sm: "h-6 px-3 py-2 text-xs",
-        lg: "h-10 px-8",
-        xl: "h-12 px-8",
-        icon: "h-8 w-8",
-        block: "h-8 px-3 py-1.5  w-full",
-      },
-    },
-
-    defaultVariants: {
-      variant: "primary",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
diff --git a/apps/dashboard/components/ui/calendar.tsx b/apps/dashboard/components/ui/calendar.tsx
index 9260b45371..4fd18528ef 100644
--- a/apps/dashboard/components/ui/calendar.tsx
+++ b/apps/dashboard/components/ui/calendar.tsx
@@ -4,8 +4,8 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import type * as React from "react";
 import { DayPicker } from "react-day-picker";
 
-import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { buttonVariants } from "@unkey/ui";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
@@ -21,7 +21,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         caption_label: "text-sm font-medium",
         nav: "space-x-1 flex items-center",
         nav_button: cn(
-          buttonVariants({ variant: "outline" }),
+          buttonVariants({ variant: "default" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
         nav_button_previous: "absolute left-1",
diff --git a/apps/dashboard/components/ui/group-button.tsx b/apps/dashboard/components/ui/group-button.tsx
index 181058324e..a927879ecd 100644
--- a/apps/dashboard/components/ui/group-button.tsx
+++ b/apps/dashboard/components/ui/group-button.tsx
@@ -1,7 +1,7 @@
 import { Children, type ReactElement, cloneElement } from "react";
 
-import type { ButtonProps } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import type { ButtonProps } from "@unkey/ui";
 
 interface ButtonGroupProps {
   className?: string;
diff --git a/apps/dashboard/components/ui/pagination.tsx b/apps/dashboard/components/ui/pagination.tsx
index 97bf2c8e49..c8fb22940e 100644
--- a/apps/dashboard/components/ui/pagination.tsx
+++ b/apps/dashboard/components/ui/pagination.tsx
@@ -1,8 +1,8 @@
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 
-import { type ButtonProps, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { type ButtonProps, buttonVariants } from "@unkey/ui";
 import Link, { type LinkProps } from "next/link";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
@@ -31,16 +31,21 @@ type PaginationLinkProps = React.PropsWithChildren<{
   isActive?: boolean;
   className?: string;
 }> &
-  Pick<ButtonProps, "size"> &
+  Pick<ButtonProps, "shape"> &
   LinkProps;
 
-const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+const PaginationLink = ({
+  className,
+  isActive,
+  shape = "square",
+  ...props
+}: PaginationLinkProps) => (
   <Link
     aria-current={isActive ? "page" : undefined}
     className={cn(
       buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size,
+        variant: isActive ? "default" : "ghost",
+        shape,
       }),
       className,
     )}
@@ -55,7 +60,6 @@ const PaginationPrevious = ({
 }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
     aria-label="Go to previous page"
-    size="default"
     className={cn("gap-1 pl-2.5", className)}
     {...props}
   >
@@ -66,12 +70,7 @@ const PaginationPrevious = ({
 PaginationPrevious.displayName = "PaginationPrevious";
 
 const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
-    {...props}
-  >
+  <PaginationLink aria-label="Go to next page" className={cn("gap-1 pr-2.5", className)} {...props}>
     <span>Next</span>
     <ChevronRight className="w-4 h-4" />
   </PaginationLink>
diff --git a/apps/engineering/content/design/components/button.icons.tsx b/apps/engineering/content/design/components/button.icons.tsx
index be3260a18d..152e10eca0 100644
--- a/apps/engineering/content/design/components/button.icons.tsx
+++ b/apps/engineering/content/design/components/button.icons.tsx
@@ -20,6 +20,9 @@ export const IconsExample: React.FC = () => (
         Update Role
         <Trash />
       </Button>
+      <Button shape="square">
+        <Settings2 />
+      </Button>
     </Row>
   </RenderComponentWithSnippet>
 );
diff --git a/apps/engineering/content/design/components/button.loading.tsx b/apps/engineering/content/design/components/button.loading.tsx
index ffd2316cdd..c2f93f7c94 100644
--- a/apps/engineering/content/design/components/button.loading.tsx
+++ b/apps/engineering/content/design/components/button.loading.tsx
@@ -2,20 +2,33 @@
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { Row } from "@/app/components/row";
 import { Button } from "@unkey/ui";
+import { useEffect, useState } from "react";
 
-export const LoadingExample: React.FC = () => (
-  <RenderComponentWithSnippet>
-    <Row>
-      <Button loading>Update Role</Button>
-      <Button loading variant="primary">
-        Update Role
-      </Button>
-      <Button loading variant="destructive">
-        Update Role
-      </Button>
-      <Button loading variant="ghost">
-        Update Role
-      </Button>
-    </Row>
-  </RenderComponentWithSnippet>
-);
+export const LoadingExample: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (!loading) {
+      return;
+    }
+    const id = setTimeout(() => setLoading(false), 5000);
+    return () => {
+      clearTimeout(id);
+    };
+  }, [loading]);
+  return (
+    <RenderComponentWithSnippet>
+      <Row>
+        <Button loading>Update Role</Button>
+        <Button loading={loading} variant="primary" onClick={() => setLoading(true)}>
+          Click Me
+        </Button>
+        <Button loading variant="destructive">
+          Update Role
+        </Button>
+        <Button loading variant="ghost">
+          Update Role
+        </Button>
+      </Row>
+    </RenderComponentWithSnippet>
+  );
+};
diff --git a/apps/engineering/content/design/components/button.mdx b/apps/engineering/content/design/components/button.mdx
index 3ac83c6202..2ebf8289e9 100644
--- a/apps/engineering/content/design/components/button.mdx
+++ b/apps/engineering/content/design/components/button.mdx
@@ -10,6 +10,7 @@ import { KeyboardExample } from "./button.keyboard"
 import { IconsExample } from "./button.icons"
 import { LoadingExample } from "./button.loading"
 import { DisabledExample } from "./button.disabled"
+import { ShapeExample } from "./button.shape"
 
 ## onClick
 
@@ -33,7 +34,11 @@ Icons can be added anywhere as a child of the button. In most scenarios you shou
 <IconsExample/>
 
 
+## Shape
 
+For single icons without text, you should make the button square via `shape="square"`
+
+<ShapeExample/>
 
 ## Keyboard
 
diff --git a/apps/engineering/content/design/components/button.shape.tsx b/apps/engineering/content/design/components/button.shape.tsx
new file mode 100644
index 0000000000..73f544995b
--- /dev/null
+++ b/apps/engineering/content/design/components/button.shape.tsx
@@ -0,0 +1,15 @@
+"use client";
+import { RenderComponentWithSnippet } from "@/app/components/render";
+import { Row } from "@/app/components/row";
+import { Button } from "@unkey/ui";
+import { Settings2 } from "lucide-react";
+
+export const ShapeExample: React.FC = () => (
+  <RenderComponentWithSnippet>
+    <Row>
+      <Button shape="square">
+        <Settings2 />
+      </Button>
+    </Row>
+  </RenderComponentWithSnippet>
+);
diff --git a/apps/engineering/tailwind.config.js b/apps/engineering/tailwind.config.js
index cea84a09b2..9fa5dd1d5e 100644
--- a/apps/engineering/tailwind.config.js
+++ b/apps/engineering/tailwind.config.js
@@ -8,8 +8,8 @@ export default {
     "./content/**/*.{md,mdx}",
     "./mdx-components.{ts,tsx}",
     "./node_modules/fumadocs-ui/dist/**/*.js",
-    "../../internal/ui/**/*.tsx",
-    "../../internal/icons/**/*.tsx",
+    "../../internal/ui/src/**/*.tsx",
+    "../../internal/icons/src/**/*.tsx",
   ],
 
   theme: unkeyUiTailwindConfig.theme,
diff --git a/internal/ui/src/components/button.tsx b/internal/ui/src/components/button.tsx
index 0b33ba8536..a9057ffcee 100644
--- a/internal/ui/src/components/button.tsx
+++ b/internal/ui/src/components/button.tsx
@@ -6,7 +6,7 @@ import * as React from "react";
 import { cn } from "../lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex group items-center transition duration-150 justify-center gap-3 whitespace-nowrap tracking-normal rounded-lg  font-medium transition-colors disabled:pointer-events-none focus:outline-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex group relative transition duration-150 whitespace-nowrap tracking-normal rounded-lg  font-medium transition-colors disabled:pointer-events-none focus:outline-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -23,8 +23,8 @@ const buttonVariants = cva(
         default: "h-8 px-3 py-1 text-sm",
       },
       shape: {
-        square: "",
-        circle: "",
+        square: "size-8 p-1",
+        // circle: "",
       },
     },
     defaultVariants: {
@@ -54,6 +54,9 @@ const keyboardIconVariants = cva(
 
 export type ButtonProps = VariantProps<typeof buttonVariants> &
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Display a loading spinner instead of the children
+     */
     loading?: boolean;
     disabled?: boolean;
 
@@ -80,7 +83,15 @@ export type ButtonProps = VariantProps<typeof buttonVariants> &
     asChild?: boolean;
   };
 
-const Button: React.FC<ButtonProps> = ({ className, variant, size, asChild = false, ...props }) => {
+const Button: React.FC<ButtonProps> = ({
+  className,
+  variant,
+  size,
+  shape,
+  asChild = false,
+  loading,
+  ...props
+}) => {
   React.useEffect(() => {
     if (!props.keyboard) {
       return;
@@ -101,15 +112,34 @@ const Button: React.FC<ButtonProps> = ({ className, variant, size, asChild = fal
 
   return (
     <Comp
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({ variant, size, shape, className }))}
       onClick={props.onClick}
       {...props}
     >
-      {props.loading ? <Loader className="animate-spin" /> : null}
-      {props.children}
-      {props.keyboard ? (
-        <kbd className={cn(keyboardIconVariants({ variant }))}>{props.keyboard.display}</kbd>
+      {loading ? (
+        <div
+          className={cn("inset-0 absolute flex justify-center items-center w-full h-full", {
+            "opacity-0": !loading,
+            "opacity-100": loading,
+          })}
+        >
+          <Loader className="animate-spin " />
+        </div>
       ) : null}
+      <div
+        className={cn(
+          "duration-200 w-full h-full transition-opacity flex items-center justify-center gap-2",
+          {
+            "opacity-100": !loading,
+            "opacity-0": loading,
+          },
+        )}
+      >
+        {props.children}
+        {props.keyboard ? (
+          <kbd className={cn(keyboardIconVariants({ variant }))}>{props.keyboard.display}</kbd>
+        ) : null}
+      </div>
     </Comp>
   );
 };