diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/permissions.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/permissions.tsx
index c41003368f..30a91dfe8f 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/permissions.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/permissions.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
 import { trpc } from "@/lib/trpc/client";
+import { Checkbox } from "@unkey/ui";
 import { toast } from "sonner";
 
 export type Role = {
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-bytes.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-bytes.tsx
index b7e515d74c..4ebc6e2262 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-bytes.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-bytes.tsx
@@ -1,13 +1,13 @@
 "use client";
 import { revalidate } from "@/app/actions";
-import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Input, SettingCard } from "@unkey/ui";
+import { Button, FormInput, SettingCard } from "@unkey/ui";
 import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
+
 const formSchema = z.object({
   keyAuthId: z.string(),
   defaultBytes: z
@@ -27,10 +27,13 @@ type Props = {
 
 export const DefaultBytes: React.FC<Props> = ({ keyAuth, apiId }) => {
   const router = useRouter();
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: async (data, context, options) => {
-      return zodResolver(formSchema)(data, context, options);
-    },
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid, isSubmitting, isDirty },
+  } = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
     mode: "all",
     shouldFocusError: true,
     delayError: 100,
@@ -62,58 +65,46 @@ export const DefaultBytes: React.FC<Props> = ({ keyAuth, apiId }) => {
   }
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <SettingCard
-          title={"Default Bytes"}
-          description={
-            <div className="max-w-[380px]">
-              Sets the default byte size for keys under this API. Must be between 8 and 255.
-            </div>
-          }
-          border="top"
-          className="border-b-1"
-          contentWidth="w-full lg:w-[420px]"
-        >
-          <div className="flex flex-row justify-end items-center w-full gap-x-2">
-            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
-            <label htmlFor="defaultBytes" className="hidden sr-only">
-              Default Bytes
-            </label>
-            <FormField
-              control={form.control}
-              name="defaultBytes"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="defaultBytes"
-                      className="w-[16.5rem]"
-                      {...field}
-                      autoComplete="off"
-                      onChange={(e) => field.onChange(Number(e.target.value.replace(/\D/g, "")))}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button
-              size="lg"
-              variant="primary"
-              disabled={
-                !form.formState.isValid ||
-                form.formState.isSubmitting ||
-                keyAuth.defaultBytes === form.watch("defaultBytes")
-              }
-              type="submit"
-              loading={form.formState.isSubmitting}
-            >
-              Save
-            </Button>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <SettingCard
+        title="Default Bytes"
+        description={
+          <div className="max-w-[380px]">
+            Sets the default byte size for keys under this API. Must be between 8 and 255.
           </div>
-        </SettingCard>
-      </form>
-    </Form>
+        }
+        border="top"
+        className="border-b-1"
+        contentWidth="w-full lg:w-[420px]"
+      >
+        <div className="flex flex-row justify-end items-center w-full gap-x-2">
+          <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+
+          <Controller
+            control={control}
+            name="defaultBytes"
+            render={({ field }) => (
+              <FormInput
+                {...field}
+                className="w-[16.5rem]"
+                autoComplete="off"
+                type="text"
+                onChange={(e) => field.onChange(Number(e.target.value.replace(/\D/g, "")))}
+              />
+            )}
+          />
+
+          <Button
+            size="lg"
+            variant="primary"
+            disabled={!isValid || isSubmitting || !isDirty}
+            type="submit"
+            loading={isSubmitting}
+          >
+            Save
+          </Button>
+        </div>
+      </SettingCard>
+    </form>
   );
 };
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-prefix.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-prefix.tsx
index b7f52cc3f3..a750717251 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-prefix.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/components/default-prefix.tsx
@@ -1,12 +1,11 @@
 "use client";
 import { revalidate } from "@/app/actions";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Input, SettingCard } from "@unkey/ui";
+import { Button, FormInput, SettingCard } from "@unkey/ui";
 import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 const formSchema = z.object({
@@ -29,10 +28,13 @@ type Props = {
 
 export const DefaultPrefix: React.FC<Props> = ({ keyAuth, apiId }) => {
   const router = useRouter();
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: async (data, context, options) => {
-      return zodResolver(formSchema)(data, context, options);
-    },
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid, isSubmitting, isDirty },
+  } = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
     mode: "all",
     shouldFocusError: true,
     delayError: 100,
@@ -62,61 +64,50 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth, apiId }) => {
   }
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <SettingCard
-          title={"Default Prefix"}
-          description={
-            <div className="max-w-[380px]">
-              Sets the default prefix for keys under this API. A trailing underscore is added
-              automatically.
-            </div>
-          }
-          border="bottom"
-          contentWidth="w-full lg:w-[420px] h-full"
-        >
-          <div className="flex flex-row justify-end items-center w-full gap-x-2">
-            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
-            <label htmlFor="defaultPrefix" className="hidden sr-only">
-              Default Prefix
-            </label>
-            <FormField
-              control={form.control}
-              name="defaultPrefix"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="defaultPrefix"
-                      className="w-[16.5rem]"
-                      {...field}
-                      autoComplete="off"
-                      onBlur={(e) => {
-                        if (e.target.value === "") {
-                          return;
-                        }
-                      }}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <Button
-              variant="primary"
-              size="lg"
-              disabled={
-                !form.formState.isValid ||
-                form.formState.isSubmitting ||
-                keyAuth.defaultPrefix === form.getValues("defaultPrefix")
-              }
-              type="submit"
-              loading={form.formState.isSubmitting}
-            >
-              Save
-            </Button>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <SettingCard
+        title="Default Prefix"
+        description={
+          <div className="max-w-[380px]">
+            Sets the default prefix for keys under this API. A trailing underscore is added
+            automatically.
           </div>
-        </SettingCard>
-      </form>
-    </Form>
+        }
+        border="bottom"
+        contentWidth="w-full lg:w-[420px] h-full"
+      >
+        <div className="flex flex-row justify-end items-center w-full gap-x-2">
+          <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+
+          <Controller
+            control={control}
+            name="defaultPrefix"
+            render={({ field }) => (
+              <FormInput
+                {...field}
+                className="w-[16.5rem]"
+                autoComplete="off"
+                onBlur={(e) => {
+                  if (e.target.value === "") {
+                    return;
+                  }
+                  field.onBlur();
+                }}
+              />
+            )}
+          />
+
+          <Button
+            variant="primary"
+            size="lg"
+            disabled={!isValid || isSubmitting || !isDirty}
+            type="submit"
+            loading={isSubmitting}
+          >
+            Save
+          </Button>
+        </div>
+      </SettingCard>
+    </form>
   );
 };
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-api-name.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-api-name.tsx
index d74e6a4e5b..ee54102084 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-api-name.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-api-name.tsx
@@ -1,13 +1,14 @@
 "use client";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+
 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, Input, SettingCard } from "@unkey/ui";
-import { useForm } from "react-hook-form";
+import { Button, FormInput, SettingCard } from "@unkey/ui";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 import { revalidateTag } from "../../../../../actions";
+
 export const dynamic = "force-dynamic";
 
 const formSchema = z.object({
@@ -27,10 +28,12 @@ type Props = {
 export const UpdateApiName: React.FC<Props> = ({ api }) => {
   const utils = trpc.useUtils();
 
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: async (data, context, options) => {
-      return zodResolver(formSchema)(data, context, options);
-    },
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid, isSubmitting, isDirty },
+  } = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
     mode: "all",
     shouldFocusError: true,
     delayError: 100,
@@ -59,6 +62,7 @@ export const UpdateApiName: React.FC<Props> = ({ api }) => {
     if (values.apiName === api.name || !values.apiName) {
       return toast.error("Please provide a valid name before saving.");
     }
+
     await updateName.mutateAsync({
       name: values.apiName,
       apiId: values.apiId,
@@ -67,59 +71,47 @@ export const UpdateApiName: React.FC<Props> = ({ api }) => {
   }
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <SettingCard
-          title={"API Name"}
-          description={"Not customer-facing. Choose a name that is easy to recognize."}
-          border="top"
-          className="border-b-1"
-          contentWidth="w-full lg:w-[420px] h-full"
-        >
-          <div className="flex flex-row justify-end items-center w-full gap-x-2">
-            <input type="hidden" name="workspaceId" value={api.workspaceId} />
-            <input type="hidden" name="apiId" value={api.id} />
-            <label htmlFor="apiName" className="hidden sr-only">
-              Name
-            </label>
-            <FormField
-              control={form.control}
-              name="apiName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      type="text"
-                      id="apiName"
-                      className="min-w-[16.5rem]"
-                      {...field}
-                      autoComplete="off"
-                      onBlur={(e) => {
-                        if (e.target.value === "") {
-                          return;
-                        }
-                      }}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <Button
-              size="lg"
-              variant="primary"
-              disabled={
-                !form.formState.isValid ||
-                form.formState.isSubmitting ||
-                api.name === form.watch("apiName")
-              }
-              loading={form.formState.isSubmitting}
-              type="submit"
-            >
-              Save
-            </Button>
-          </div>
-        </SettingCard>
-      </form>
-    </Form>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <SettingCard
+        title="Name"
+        description="Change the name of your API. This is only visible to you and your team."
+        border="top"
+        className="border-b-1"
+        contentWidth="w-full lg:w-[420px]"
+      >
+        <div className="flex flex-row items-center w-full gap-x-2 justify-end">
+          <input type="hidden" name="apiId" value={api.id} />
+          <input type="hidden" name="workspaceId" value={api.workspaceId} />
+
+          <Controller
+            control={control}
+            name="apiName"
+            render={({ field }) => (
+              <FormInput
+                {...field}
+                placeholder="my-api"
+                className="w-[16.5rem]"
+                onChange={(e) => {
+                  if (e.target.value === "") {
+                    return;
+                  }
+                  field.onChange(e);
+                }}
+              />
+            )}
+          />
+
+          <Button
+            size="lg"
+            variant="primary"
+            disabled={!isValid || isSubmitting || updateName.isLoading || !isDirty}
+            type="submit"
+            loading={isSubmitting || updateName.isLoading}
+          >
+            Save
+          </Button>
+        </div>
+      </SettingCard>
+    </form>
   );
 };
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-ip-whitelist.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-ip-whitelist.tsx
index 8df153b548..bd83067e15 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-ip-whitelist.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-ip-whitelist.tsx
@@ -1,13 +1,12 @@
 "use client";
-import { FormField } from "@/components/ui/form";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Workspace } from "@unkey/db";
 import { ArrowUpRight, Lock, Shield } from "@unkey/icons";
-import { Button, InlineLink, SettingCard, Textarea } from "@unkey/ui";
+import { Button, FormTextarea, InlineLink, SettingCard } from "@unkey/ui";
 import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 import { StatusBadge } from "./status-badge";
 
@@ -33,7 +32,11 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
   const router = useRouter();
   const isEnabled = workspace.features.ipWhitelist;
 
-  const form = useForm<z.infer<typeof formSchema>>({
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid, isSubmitting, errors, isDirty },
+  } = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       ipWhitelist: api.ipWhitelist ?? "",
@@ -53,8 +56,6 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
     },
   });
 
-  const isValid = api.ipWhitelist?.toString() !== form.watch("ipWhitelist").toString();
-
   async function onSubmit(values: z.infer<typeof formSchema>) {
     await updateIps.mutateAsync(values);
   }
@@ -67,10 +68,10 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
     );
 
   return (
-    <form onSubmit={form.handleSubmit(onSubmit)}>
+    <form onSubmit={handleSubmit(onSubmit)}>
       <SettingCard
         title={
-          <div className=" flex items-center justify-start gap-2.5">
+          <div className="flex items-center justify-start gap-2.5">
             <span className="text-sm font-medium text-accent-12">IP Whitelist</span>
             <Badge />
           </div>
@@ -83,7 +84,7 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
             <InlineLink
               label="Learn more"
               href="https://www.unkey.com/docs/apis/features/whitelist#ip-whitelisting"
-              target={true}
+              target
               icon={<ArrowUpRight size="sm-thin" />}
             />
           </div>
@@ -92,31 +93,30 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
         contentWidth="w-full"
       >
         {isEnabled ? (
-          <div className="flex flex-row justify-items-start items-center w-full gap-x-2">
+          <div className="flex flex-row justify-end items-start w-full gap-x-2">
             <input type="hidden" name="workspaceId" value={api.workspaceId} />
             <input type="hidden" name="apiId" value={api.id} />
-            <label htmlFor="ipWhitelist" className="hidden sr-only">
-              IP Whitelist
-            </label>
-            <FormField
-              control={form.control}
+
+            <Controller
+              control={control}
               name="ipWhitelist"
               render={({ field }) => (
-                <Textarea
+                <FormTextarea
                   {...field}
                   className="lg:w-[16rem]"
                   autoComplete="off"
-                  placeholder={`127.0.0.1
-1.1.1.1`}
+                  placeholder={"127.0.0.1\n1.1.1.1"}
+                  error={errors.ipWhitelist?.message}
                 />
               )}
             />
+
             <Button
               size="lg"
               variant="primary"
-              disabled={!form.formState.isValid || form.formState.isSubmitting || !isValid}
+              disabled={!isValid || isSubmitting || !isDirty}
               type="submit"
-              loading={form.formState.isSubmitting}
+              loading={isSubmitting}
             >
               Save
             </Button>
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/permission-toggle.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/permission-toggle.tsx
index 7960fd8c87..e920313072 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/permission-toggle.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/permission-toggle.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { Checkbox } from "@/components/ui/checkbox";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { Checkbox } from "@unkey/ui";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx
index 9c94fb59a8..ed46c569e4 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { Switch } from "@/components/ui/switch";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { ChevronRight } from "@unkey/icons";
 import { CopyButton } from "@unkey/ui";
 import type React from "react";
@@ -88,34 +88,27 @@ export const RecursivePermission: React.FC<
 
   if (!hasChildren) {
     return (
-      <Tooltip delayDuration={50}>
-        <TooltipTrigger
-          className={`flex flex-col items-start px-2 first:pt-0  py-1.5 mx-1 rounded transition-colors ${getBgColor(
-            hover,
-          )}`}
-          onMouseEnter={() => setHover(true)}
-          onMouseLeave={() => setHover(false)}
-        >
-          <div className="flex items-center gap-2 w-full">
-            <PermissionToggle permissionId={id} roleId={roleId} checked={checked} />
-            <pre className="text-sm text-accent-12 font-medium">{k}</pre>
-          </div>
-          {description && <p className="text-xs text-accent-11 mt-0.5">{description}</p>}
-        </TooltipTrigger>
-        <TooltipContent
-          side="top"
-          align="start"
-          avoidCollisions={true}
-          className="bg-gray-12 text-gray-1 px-3 py-2 border border-accent-6 shadow-md font-medium text-xs"
-        >
+      <RatelimitOverviewTooltip
+        content={
           <div className="flex items-center justify-start max-w-sm gap-2">
             <pre className="text-ellipsis overflow-hidden hover:overflow-visible">{name}</pre>
             <div>
               <CopyButton value={name} />
             </div>
           </div>
-        </TooltipContent>
-      </Tooltip>
+        }
+        asChild
+        position={{
+          side: "top",
+          align: "start",
+        }}
+      >
+        <div className="flex items-center gap-2 w-full">
+          <PermissionToggle permissionId={id} roleId={roleId} checked={checked} />
+          <pre className="text-sm text-accent-12 font-medium">{k}</pre>
+        </div>
+        {description && <p className="text-xs text-accent-11 mt-0.5">{description}</p>}
+      </RatelimitOverviewTooltip>
     );
   }
 
diff --git a/apps/dashboard/app/(app)/ratelimits/loading.tsx b/apps/dashboard/app/(app)/ratelimits/loading.tsx
deleted file mode 100644
index 08470cff6a..0000000000
--- a/apps/dashboard/app/(app)/ratelimits/loading.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import { Clock, Gauge, Magnifier, ProgressBar, Refresh3 } from "@unkey/icons";
-
-export default function Loading() {
-  return (
-    <div>
-      {/* Navigation Bar */}
-      <nav className="w-full p-4 border-b border-gray-4 bg-background justify-between flex">
-        <nav aria-label="breadcrumb" className="flex">
-          <ol className="flex items-center gap-3">
-            <li className="mr-1">
-              {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-              <button className="inline-flex group relative duration-150 items-center justify-center gap-2 whitespace-nowrap text-sm transition-colors focus-visible:ring-1 focus-visible:ring-ring [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 disabled:cursor-not-allowed text-gray-12 border border-grayA-6 rounded-md focus:border-grayA-12 focus:ring-4 focus:ring-gray-6 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button disabled:border disabled:border-solid disabled:border-grayA-5 disabled:text-grayA-7 active:bg-grayA-3 size-6 p-0 [&>svg]:size-[18px] bg-gray-4 hover:bg-gray-5">
-                <div className="w-full h-full flex items-center justify-center gap-2 transition-opacity duration-200 opacity-100">
-                  <Gauge />
-                </div>
-              </button>
-            </li>
-            <li className="flex items-center gap-3">
-              <a
-                href="/ratelimits"
-                className="text-sm transition-colors text-accent-10 hover:text-accent-11"
-                aria-current="page"
-              >
-                Ratelimits
-              </a>
-            </li>
-          </ol>
-        </nav>
-        <div className="flex items-center gap-3">
-          <div className="flex flex-col gap-1">
-            {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-            <button
-              className="inline-flex group relative duration-150 items-center justify-center gap-2 whitespace-nowrap text-sm transition-colors focus-visible:ring-1 focus-visible:ring-ring [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 disabled:cursor-not-allowed p-2 text-gray-12 border border-grayA-6 rounded-md focus:border-grayA-12 focus:ring-4 focus:ring-gray-6 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button disabled:border disabled:border-solid disabled:border-grayA-5 disabled:text-grayA-7 active:bg-grayA-3 h-8 bg-grayA-2 hover:bg-grayA-3"
-              title="Create New Root Key"
-            >
-              <div className="w-full h-full flex items-center justify-center gap-2 transition-opacity duration-200 opacity-100">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="18"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="lucide lucide-plus w-4 h-4"
-                >
-                  <path d="M5 12h14" />
-                  <path d="M12 5v14" />
-                </svg>
-                Create new namespace
-              </div>
-            </button>
-          </div>
-        </div>
-      </nav>
-      <div className="flex flex-col">
-        {/* Search and Controls Row - Using LogsLLMSearch and RefreshButton structures */}
-        <div className="flex flex-col border-b border-gray-4">
-          <div className="px-3 py-1 w-full justify-between flex items-center">
-            <div className="flex gap-2">
-              <div className="flex gap-2 items-center">
-                {/* LogsLLMSearch - Based on the component structure */}
-                <div className="group relative" data-testid="logs-llm-search">
-                  <div className="px-2 flex items-center w-80 gap-2 border rounded-lg py-1 h-8 border-none hover:bg-gray-3 transition-all duration-200">
-                    <div className="flex items-center gap-2 w-80">
-                      <div className="flex-shrink-0">
-                        <Magnifier />
-                      </div>
-                      <div className="flex-1">
-                        <span className="text-accent-9 text-[13px] font-medium">
-                          Search namespaces
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="flex gap-2 items-center">
-                {/* Date filter */}
-                <div className="flex flex-row items-center">
-                  <div className="group">
-                    {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-                    <button className="inline-flex group relative duration-150 items-center justify-center gap-2 whitespace-nowrap text-sm transition-colors p-2 text-gray-12 bg-transparent h-8 px-2 rounded-lg">
-                      <div className="w-full h-full flex items-center justify-center gap-2">
-                        <Clock />
-                        <span className="text-gray-12 font-medium text-[13px]">Last 12 hours</span>
-                      </div>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex gap-2">
-              {/* RefreshButton - Based on the component structure but disabled */}
-              <div>
-                {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-                <button
-                  disabled
-                  className="group relative duration-150 gap-2 whitespace-nowrap text-sm transition-colors focus-visible:ring-1 focus-visible:ring-ring [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 disabled:cursor-not-allowed p-2 bg-transparent focus:border-grayA-12 focus:ring-4 focus:ring-gray-6 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button disabled:border disabled:border-grayA-4 disabled:text-grayA-7 h-8 flex w-full items-center justify-center rounded-lg border border-gray-4"
-                >
-                  <div className="w-full h-full flex items-center justify-center gap-2 transition-opacity duration-200 opacity-100">
-                    <Refresh3 className="text-grayA-7" />
-                    <span className="font-medium text-grayA-7 text-[13px] relative z-10">
-                      Refresh
-                    </span>
-                    <div className="inline-flex group relative bg-gray-3 text-gray-9 border-gray-8 border text-xs h-5 px-1.5 min-w-[24px] rounded">
-                      <div className="flex items-center justify-center">
-                        <div>
-                          CTRL+<span className="font-mono">R</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Cards Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 md:gap-5 w-full p-5">
-          {Array.from({ length: 8 }).map((_, index) => (
-            <div
-              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-              key={index}
-              className="flex flex-col border border-gray-6 rounded-lg overflow-hidden"
-            >
-              {/* Chart area - 140px height */}
-              <div className="h-[140px] bg-grayA-2" />
-              {/* Bottom section with link, name, and stats */}
-              <div className="p-4 md:p-6 border-t border-gray-6 flex flex-col gap-2">
-                {/* Name and icon row */}
-                <div className="flex justify-between items-center">
-                  <div className="flex flex-col flex-grow min-w-0">
-                    <div className="flex gap-2 md:gap-3 items-center">
-                      <span className="flex-shrink-0">
-                        <ProgressBar className="text-accent-11 w-5 h-5" />
-                      </span>
-                      <Skeleton className="w-48 h-5 rounded-lg" />
-                    </div>
-                  </div>
-                </div>
-                {/* Stats row */}
-                <div className="flex items-center w-full justify-between gap-3 md:gap-4 mt-2">
-                  {/* Left side - metrics inline */}
-                  <div className="flex gap-[14px] items-center">
-                    <div className="flex gap-2 items-center">
-                      <div className="bg-accent-8 rounded h-[10px] w-1" />
-                      <div className="text-accent-12 text-xs font-medium">0</div>
-                      <div className="text-accent-9 text-[11px] leading-4">PASSED</div>
-                    </div>
-                    <div className="flex gap-2 items-center">
-                      <div className="bg-orange-9 rounded h-[10px] w-1" />
-                      <div className="text-accent-12 text-xs font-medium">0</div>
-                      <div className="text-accent-9 text-[11px] leading-4">BLOCKED</div>
-                    </div>
-                  </div>
-                  {/* Right side - clock */}
-                  <div className="flex items-center gap-2 min-w-0 max-w-[40%]">
-                    <Clock className="text-accent-11 flex-shrink-0 w-4 h-4" />
-                    <span className="text-xs text-accent-9 truncate">No data</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/dashboard/app/(app)/settings/loading.tsx b/apps/dashboard/app/(app)/settings/loading.tsx
deleted file mode 100644
index 70879711de..0000000000
--- a/apps/dashboard/app/(app)/settings/loading.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { PageContent } from "@/components/page-content";
-import { Skeleton } from "@/components/ui/skeleton";
-
-export default function Loading() {
-  return (
-    <PageContent>
-      <div className="flex flex-col mt-4 gap-8">
-        <Skeleton className="h-[231px] bg-transparent border border-round border-border">
-          <Skeleton className="w-[180px] h-6 mt-6 mx-6" />
-          <Skeleton className="w-[384px] h-8 mt-8 mx-6 bg-transparent border border-round border-border" />
-          <Skeleton className="w-56 h-3 mt-3 mx-6" />
-          <Skeleton className="w-full h-[1px] mt-9" />
-          <Skeleton className="w-14 h-8 mt-3 ml-auto mr-6" />
-        </Skeleton>
-        <Skeleton className="flex flex-col-2 h-[154px] w-full p-6 bg-transparent border border-round border-border">
-          <div className="">
-            <Skeleton className="w-[180px] h-6" />
-            <Skeleton className="w-[410px] h-3 mt-3" />
-            <Skeleton className="w-[500px] h-3 mt-3" />
-          </div>
-          <div className="ml-auto justify-end items-end">
-            <Skeleton className="w-24 h-24 rounded-full mt-1" />
-          </div>
-        </Skeleton>
-        <Skeleton className="h-40 w-full p-6 bg-transparent border border-round border-border">
-          <Skeleton className="w-[150px] h-6" />
-          <Skeleton className="w-[345px] h-3 mt-4" />
-          <Skeleton className="w-[384px] h-8 mt-[26px] bg-transparent border border-round border-border" />
-        </Skeleton>
-      </div>
-    </PageContent>
-  );
-}
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission_toggle.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission_toggle.tsx
index d7e64585c5..1e137e0a84 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission_toggle.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission_toggle.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { Checkbox } from "@unkey/ui";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
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 a9f6938920..634cfccc9d 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,24 +1,15 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 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 { Button, FormInput } from "@unkey/ui";
 import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
+
 const formSchema = z.object({
   keyId: z.string(),
   name: z
@@ -26,6 +17,7 @@ const formSchema = z.object({
     .transform((e) => (e === "" ? undefined : e))
     .optional(),
 });
+
 type Props = {
   apiKey: {
     id: string;
@@ -36,7 +28,11 @@ type Props = {
 export const UpdateRootKeyName: React.FC<Props> = ({ apiKey }) => {
   const router = useRouter();
 
-  const form = useForm<z.infer<typeof formSchema>>({
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isValid },
+  } = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     mode: "all",
     shouldFocusError: true,
@@ -61,41 +57,44 @@ export const UpdateRootKeyName: React.FC<Props> = ({ apiKey }) => {
   async function onSubmit(values: z.infer<typeof formSchema>) {
     await updateName.mutateAsync(values);
   }
+
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <Card>
-          <CardHeader>
-            <CardTitle>Name</CardTitle>
-            <CardDescription>
-              Give your root key a name. This is optional and not customer facing.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex justify-between item-center">
-            <div className={cn("flex flex-col space-y-2 w-full ")}>
-              <input type="hidden" name="keyId" value={apiKey.id} />
-              <Label htmlFor="remaining">Name</Label>
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <Input {...field} type="string" className="h-8 max-w-sm" autoComplete="off" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-          </CardContent>
-          <CardFooter className="justify-end">
-            <Button disabled={updateName.isLoading || !form.formState.isValid} type="submit">
-              {updateName.isLoading ? <Loading /> : "Save"}
-            </Button>
-          </CardFooter>
-        </Card>
-      </form>
-    </Form>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Name</CardTitle>
+        </CardHeader>
+        <CardContent className="flex justify-between item-center pt-2 mb-10">
+          <div className={cn("flex flex-col space-y-2 w-full")}>
+            <input type="hidden" name="keyId" value={apiKey.id} />
+
+            <Controller
+              control={control}
+              name="name"
+              render={({ field }) => (
+                <FormInput
+                  {...field}
+                  type="string"
+                  className="h-8 max-w-sm"
+                  autoComplete="off"
+                  description="Give your root key a name. This is optional and not customer facing."
+                  wrapperClassName="w-full h-full"
+                  error={errors.name?.message}
+                />
+              )}
+            />
+          </div>
+        </CardContent>
+        <CardFooter className="justify-end">
+          <Button
+            disabled={updateName.isLoading || !isValid}
+            type="submit"
+            loading={updateName.isLoading}
+          >
+            {updateName.isLoading ? <Loading /> : "Save"}
+          </Button>
+        </CardFooter>
+      </Card>
+    </form>
   );
 };
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 067261c894..b681ede155 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
@@ -2,11 +2,8 @@
 
 import { Loading } from "@/components/dashboard/loading";
 import { VisibleButton } from "@/components/dashboard/visible-button";
-import { Code } from "@/components/ui/code";
-import { Button, CopyButton } from "@unkey/ui";
-
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Code } from "@/components/ui/code";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import {
   Dialog,
@@ -16,11 +13,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { type UnkeyPermission, unkeyPermissionValidation } from "@unkey/rbac";
+import { Button, Checkbox, CopyButton, Input } from "@unkey/ui";
 import { ChevronRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { createParser, parseAsArrayOf, useQueryState } from "nuqs";
diff --git a/apps/dashboard/app/(app)/settings/team/invite.tsx b/apps/dashboard/app/(app)/settings/team/invite.tsx
index 8691191bdc..565eeaf26d 100644
--- a/apps/dashboard/app/(app)/settings/team/invite.tsx
+++ b/apps/dashboard/app/(app)/settings/team/invite.tsx
@@ -1,25 +1,22 @@
 "use client";
 import { DialogContainer } from "@/components/dialog-container";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import type { AuthenticatedUser, Organization } from "@/lib/auth/types";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
+import { Plus } from "@unkey/icons";
+import {
+  FormInput,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@unkey/ui";
 import { Button } from "@unkey/ui";
-import { Plus } from "lucide-react";
 import type React from "react";
 import { useState } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 const formSchema = z.object({
@@ -36,13 +33,26 @@ export const InviteButton = ({ user, organization, ...rest }: InviteButtonProps)
   const [dialogOpen, setDialogOpen] = useState(false);
   const utils = trpc.useUtils();
 
+  const {
+    register,
+    handleSubmit,
+    control,
+    getValues,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      role: "basic_member",
+    },
+  });
+
   const createInvitation = trpc.org.invitations.create.useMutation({
     onSuccess: () => {
       // Invalidate the invitations list query to trigger a refetch
       utils.org.invitations.list.invalidate();
 
       toast.success(
-        `We have sent an email to ${form.getValues("email")} with instructions on how to join your workspace.`,
+        `We have sent an email to ${getValues("email")} with instructions on how to join your workspace.`,
       );
       setDialogOpen(false);
     },
@@ -51,13 +61,6 @@ export const InviteButton = ({ user, organization, ...rest }: InviteButtonProps)
     },
   });
 
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      role: "basic_member",
-    },
-  });
-
   // If user or organization isn't available yet, return null or a loading state
   if (!user!.orgId || !organization) {
     return null;
@@ -77,90 +80,68 @@ export const InviteButton = ({ user, organization, ...rest }: InviteButtonProps)
         onClick={() => {
           setDialogOpen(!dialogOpen);
         }}
-        className="flex-row items-center gap-1 font-semibold "
+        className="flex-row items-center gap-1 font-semibold h-[38px]"
         {...rest}
         color="default"
       >
-        <Plus size={18} className="w-4 h-4 " />
+        <Plus size="lg-regular" className="w-4 h-4 " />
         Invite Member
       </Button>
       <DialogContainer
         isOpen={dialogOpen}
         onOpenChange={(o) => setDialogOpen(o)}
         title={`Invite someone to join ${organization.name}`}
+        subTitle="They will receive an email with instructions on how to join your workspace."
         footer={
-          <>
-            <Button
-              onClick={() => {
-                setDialogOpen(false);
-              }}
-            >
-              Cancel
-            </Button>
+          <div className="w-full flex flex-col gap-2 items-center justify-center">
             <Button
               form="invite-form"
               variant="primary"
-              disabled={!form.formState.isValid || form.formState.isSubmitting}
-              loading={form.formState.isSubmitting}
+              size="xlg"
+              disabled={!isValid || isSubmitting || createInvitation.isLoading}
+              loading={isSubmitting || createInvitation.isLoading}
               type="submit"
+              className="w-full rounded-lg"
             >
               Send invitation
             </Button>
-          </>
+            <div className="text-gray-9 text-xs">The invitation will be valid for 24 hours</div>
+          </div>
         }
       >
-        <p className="text-sm text-gray-11">
-          They will receive an email with instructions on how to join your workspace.
-        </p>
-        <Form {...form}>
-          <form
-            id="invite-form"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-col gap-4"
-          >
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="hey@unkey.dev"
-                      {...field}
-                      className=" dark:focus:border-gray-700"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="role"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Role</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a verified email to display" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      <SelectItem value="basic_member">Member</SelectItem>
-                      <SelectItem value="admin">Admin</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <FormDescription>
-                    Admins may invite new members or remove them and change workspace settings.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </form>
-        </Form>
+        <form id="invite-form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-5">
+          <FormInput
+            label="Email"
+            placeholder="hey@unkey.dev"
+            error={errors.email?.message}
+            {...register("email")}
+          />
+
+          <Controller
+            control={control}
+            name="role"
+            render={({ field }) => (
+              <div className="space-y-1.5">
+                <div className="text-gray-11 text-[13px] flex items-center">Role</div>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="Select a role" />
+                  </SelectTrigger>
+                  <SelectContent className="border-none rounded-md">
+                    <SelectItem value="basic_member">Member</SelectItem>
+                    <SelectItem value="admin">Admin</SelectItem>
+                  </SelectContent>
+                </Select>
+                {errors.role && (
+                  <div className="text-error-11 text-xs ml-0.5">{errors.role.message}</div>
+                )}
+                <div className="text-gray-9 text-[13px] ml-0.5">
+                  Admins may invite new members or remove them and change workspace settings.
+                </div>
+              </div>
+            )}
+          />
+        </form>
       </DialogContainer>
     </>
   );
diff --git a/apps/dashboard/app/(app)/settings/vercel/client.tsx b/apps/dashboard/app/(app)/settings/vercel/client.tsx
index 9b1cd32b58..65f74933f1 100644
--- a/apps/dashboard/app/(app)/settings/vercel/client.tsx
+++ b/apps/dashboard/app/(app)/settings/vercel/client.tsx
@@ -15,14 +15,22 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/toaster";
-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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
+import {
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@unkey/ui";
 import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { ExternalLink, Link2, MoreHorizontal, Plus, RefreshCw, Trash, Unlink2 } from "lucide-react";
diff --git a/apps/dashboard/app/auth/sign-in/email-signin.tsx b/apps/dashboard/app/auth/sign-in/email-signin.tsx
index 42263cc398..b27834a1cc 100644
--- a/apps/dashboard/app/auth/sign-in/email-signin.tsx
+++ b/apps/dashboard/app/auth/sign-in/email-signin.tsx
@@ -1,5 +1,5 @@
 import { Loading } from "@/components/dashboard/loading";
-import { Input } from "@/components/ui/input";
+import { FormInput } from "@unkey/ui";
 import { type FormEvent, useEffect, useState } from "react";
 import { useSignIn } from "../hooks";
 import { LastUsed, useLastUsed } from "./last_used";
@@ -29,23 +29,25 @@ export function EmailSignIn() {
   };
 
   return (
-    <form className="grid gap-2" onSubmit={handleSubmit}>
-      <div className="grid gap-1">
-        <Input
-          name="email"
-          placeholder="name@example.com"
-          type="email"
-          defaultValue={email}
-          autoCapitalize="none"
-          autoComplete="email"
-          autoCorrect="off"
-          required
-          className="h-10 text-white duration-500 bg-transparent focus:text-black border-white/20 focus:bg-white focus:border-white hover:bg-white/20 hover:border-white/40 placeholder:white/20"
-        />
+    <form className="grid gap-16" onSubmit={handleSubmit}>
+      <div className="grid gap-6">
+        <div className="flex flex-col items-start gap-2">
+          <FormInput
+            label="Email"
+            name="email"
+            placeholder="name@example.com"
+            type="email"
+            defaultValue={email}
+            autoCapitalize="none"
+            autoComplete="email"
+            autoCorrect="off"
+            className="h-10 dark !bg-black w-full"
+          />
+        </div>
       </div>
       <button
         type="submit"
-        className="relative flex items-center justify-center h-10 gap-2 px-4 text-sm font-semibold text-black duration-200 bg-white border border-white rounded-lg hover:border-white/30 hover:bg-black hover:text-white"
+        className="flex items-center justify-center h-10 gap-2 px-4 text-sm font-semibold text-black duration-200 bg-white border border-white rounded-lg hover:border-white/30 hover:bg-black hover:text-white"
         disabled={isLoading}
       >
         {clientReady && isLoading ? (
diff --git a/apps/dashboard/app/auth/sign-up/email-signup.tsx b/apps/dashboard/app/auth/sign-up/email-signup.tsx
index 82f918788e..d21f4902fb 100644
--- a/apps/dashboard/app/auth/sign-up/email-signup.tsx
+++ b/apps/dashboard/app/auth/sign-up/email-signup.tsx
@@ -3,10 +3,9 @@
 import * as React from "react";
 
 import { Loading } from "@/components/dashboard/loading";
-import { FadeInStagger } from "@/components/landing/fade-in";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { AuthErrorCode, errorMessages } from "@/lib/auth/types";
+import { FormInput } from "@unkey/ui";
 import { useSearchParams } from "next/navigation";
 import { useSignUp } from "../hooks/useSignUp";
 
@@ -56,70 +55,59 @@ export const EmailSignUp: React.FC<Props> = ({ setVerification }) => {
   };
 
   return (
-    <FadeInStagger>
-      <form className="grid gap-2" onSubmit={signUpWithCode}>
-        <div className="grid gap-4">
-          <div className="flex flex-row gap-3 ">
-            <div className="flex flex-col items-start w-1/2 gap-2">
-              <label htmlFor="first" className="text-xs text-white/50">
-                First Name
-              </label>
-              <Input
-                name="first"
-                placeholder="Bruce"
-                type="text"
-                required
-                autoCapitalize="none"
-                autoCorrect="off"
-                className="h-10 text-white duration-500 bg-transparent focus:text-black border-white/20 focus:bg-white focus:border-white hover:bg-white/20 hover:border-white/40 placeholder:white/20 "
-              />
-            </div>
-            <div className="flex flex-col items-start w-1/2 gap-2">
-              <label htmlFor="last" className="text-xs text-white/50">
-                Last Name
-              </label>
-              <Input
-                name="last"
-                placeholder="Banner"
-                type="text"
-                required
-                autoCapitalize="none"
-                autoCorrect="off"
-                className="h-10 text-white duration-500 bg-transparent focus:text-black border-white/20 focus:bg-white focus:border-white hover:bg-white/20 hover:border-white/40 placeholder:white/20 "
-              />
-            </div>
+    <form className="grid gap-16" onSubmit={signUpWithCode}>
+      <div className="grid gap-10">
+        <div className="flex flex-row gap-3">
+          <div className="flex flex-col items-start w-1/2 gap-2">
+            <FormInput
+              label="First Name"
+              name="first"
+              placeholder="Bruce"
+              type="text"
+              autoCapitalize="none"
+              autoCorrect="off"
+              className="h-10 dark !bg-black"
+            />
           </div>
-          <div className="flex flex-col items-start gap-2">
-            <label htmlFor="email" className="text-xs text-white/50">
-              Email
-            </label>
-            <Input
-              name="email"
-              defaultValue={emailFromParams}
-              placeholder="name@example.com"
-              type="email"
+          <div className="flex flex-col items-start w-1/2 gap-2">
+            <FormInput
+              label="Last Name"
+              name="last"
+              placeholder="Banner"
+              type="text"
               autoCapitalize="none"
-              autoComplete="email"
               autoCorrect="off"
-              required
-              className="h-10 text-white duration-500 bg-transparent focus:text-black border-white/20 focus:bg-white focus:border-white hover:bg-white/20 hover:border-white/40 placeholder:white/20 "
+              className="h-10 dark !bg-black"
             />
           </div>
         </div>
-        <button
-          type="submit"
-          className="flex items-center justify-center h-10 gap-2 px-4 mt-8 text-sm font-semibold text-black duration-200 bg-white border border-white rounded-lg hover:border-white/30 hover:bg-black hover:text-white"
-          disabled={isLoading}
-        >
-          {!clientLoaded ? (
-            "Sign Up with Email"
-          ) : isLoading ? (
-            <Loading className="w-4 h-4 animate-spin" />
-          ) : (
-            "Sign Up with Email"
-          )}
-        </button>
-      </form>
-    </FadeInStagger>
+        <div className="flex flex-col items-start gap-2">
+          <FormInput
+            label="Email"
+            name="email"
+            defaultValue={emailFromParams}
+            placeholder="name@example.com"
+            type="email"
+            autoCapitalize="none"
+            autoComplete="email"
+            autoCorrect="off"
+            className="h-10 dark !bg-black w-full"
+          />
+        </div>
+      </div>
+      <button
+        type="submit"
+        className="flex items-center justify-center h-10 gap-2 px-4 text-sm font-semibold text-black duration-200 bg-white border border-white rounded-lg hover:border-white/30 hover:bg-black hover:text-white"
+        disabled={isLoading}
+      >
+        {!clientLoaded ? (
+          "Sign Up with Email"
+        ) : isLoading ? (
+          <Loading className="w-4 h-4 animate-spin" />
+        ) : (
+          "Sign Up with Email"
+        )}
+      </button>
+    </form>
   );
 };
diff --git a/apps/dashboard/app/layout.tsx b/apps/dashboard/app/layout.tsx
index 5b8ae085c3..6b51ee94a7 100644
--- a/apps/dashboard/app/layout.tsx
+++ b/apps/dashboard/app/layout.tsx
@@ -1,6 +1,5 @@
 import { CommandMenu } from "@/components/dashboard/command-menu";
 import { Toaster } from "@/components/ui/toaster";
-import { TooltipProvider } from "@/components/ui/tooltip";
 import { PHProvider, PostHogPageview } from "@/providers/PostHogProvider";
 import "@/styles/tailwind/tailwind.css";
 import "@unkey/ui/css";
@@ -60,13 +59,11 @@ export default function RootLayout({
           <Toaster />
           <ReactQueryProvider>
             <ThemeProvider attribute="class">
-              <TooltipProvider>
-                {children}
-                <CommandMenu />
-                <Suspense>
-                  <Feedback />
-                </Suspense>
-              </TooltipProvider>
+              {children}
+              <CommandMenu />
+              <Suspense>
+                <Feedback />
+              </Suspense>
             </ThemeProvider>
           </ReactQueryProvider>
         </body>
diff --git a/apps/dashboard/app/new/create-api.tsx b/apps/dashboard/app/new/create-api.tsx
index d501af1886..db7a2cb5e2 100644
--- a/apps/dashboard/app/new/create-api.tsx
+++ b/apps/dashboard/app/new/create-api.tsx
@@ -1,25 +1,16 @@
 "use client";
 
 import { Loading } from "@/components/dashboard/loading";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { PostHogIdentify } from "@/providers/PostHogProvider";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "@unkey/ui";
+import { Button, FormInput } from "@unkey/ui";
 import { Code2 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
+
 const formSchema = z.object({
   name: z.string().trim().min(3, "Name is required and should be at least 3 characters").max(50),
 });
@@ -32,22 +23,30 @@ type Props = {
 };
 
 export const CreateApi: React.FC<Props> = ({ workspace }) => {
-  const form = useForm<z.infer<typeof formSchema>>({
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isValid },
+  } = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
+
   const { data: user, isLoading } = trpc.user.getCurrentUser.useQuery();
   const router = useRouter();
 
   if (!isLoading && user) {
     PostHogIdentify({ user });
   }
+
   const createApi = trpc.api.create.useMutation({
     onSuccess: async ({ id: apiId }) => {
       toast.success("Your API has been created");
-      form.reset();
+      reset();
       router.push(`/new?workspaceId=${workspace.id}&apiId=${apiId}`);
     },
   });
+
   function AsideContent() {
     return (
       <div className="space-y-2">
@@ -70,6 +69,7 @@ export const CreateApi: React.FC<Props> = ({ workspace }) => {
       </div>
     );
   }
+
   return (
     <div className="flex items-start justify-between gap-16">
       <main className="max-sm:w-full md:w-3/4">
@@ -78,41 +78,42 @@ export const CreateApi: React.FC<Props> = ({ workspace }) => {
         </aside>
 
         <div>
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit((values) => createApi.mutate({ ...values }))}
-              className="flex flex-col space-y-4"
-            >
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem className="w-full">
-                    <FormLabel>API Name</FormLabel>
-                    <FormMessage className="text-xs" />
-                    <FormControl>
-                      <Input {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      <p>What should your api be called?</p>
-                      <p>This is just for you, and will not be visible to your customers</p>
-                    </FormDescription>
-                  </FormItem>
-                )}
-              />
+          <form
+            onSubmit={handleSubmit((values) => createApi.mutate({ ...values }))}
+            className="flex flex-col space-y-4"
+          >
+            <Controller
+              control={control}
+              name="name"
+              render={({ field }) => (
+                <div className="space-y-1.5 w-full">
+                  <div className="text-gray-11 text-[13px] flex items-center">API Name</div>
+                  <FormInput
+                    {...field}
+                    error={errors.name?.message}
+                    description={
+                      <>
+                        <p>What should your api be called?</p>
+                        <p>This is just for you, and will not be visible to your customers</p>
+                      </>
+                    }
+                  />
+                </div>
+              )}
+            />
 
-              <div className="mt-8">
-                <Button
-                  variant="primary"
-                  disabled={createApi.isLoading || !form.formState.isValid}
-                  type="submit"
-                  className="w-full"
-                >
-                  {createApi.isLoading ? <Loading /> : "Create API"}
-                </Button>
-              </div>
-            </form>
-          </Form>
+            <div className="mt-8">
+              <Button
+                variant="primary"
+                disabled={createApi.isLoading || !isValid}
+                type="submit"
+                loading={createApi.isLoading}
+                className="w-full h-9"
+              >
+                {createApi.isLoading ? <Loading /> : "Create API"}
+              </Button>
+            </div>
+          </form>
         </div>
       </main>
       <aside className="flex-col items-start justify-center w-1/4 space-y-16 md:flex max-md:hidden ">
diff --git a/apps/dashboard/app/new/create-workspace.tsx b/apps/dashboard/app/new/create-workspace.tsx
index f669f0a1d0..29c030bf4d 100644
--- a/apps/dashboard/app/new/create-workspace.tsx
+++ b/apps/dashboard/app/new/create-workspace.tsx
@@ -1,35 +1,31 @@
 "use client";
 
 import { Loading } from "@/components/dashboard/loading";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { setCookie } from "@/lib/auth/cookies";
 import { UNKEY_SESSION_COOKIE } from "@/lib/auth/types";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "@unkey/ui";
+import { Button, FormInput } from "@unkey/ui";
 import { Box } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useRef, useTransition } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
+
 const formSchema = z.object({
   name: z.string().trim().min(3, "Name is required and should be at least 3 characters").max(50),
 });
 
 export const CreateWorkspace: React.FC = () => {
-  const form = useForm<z.infer<typeof formSchema>>({
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isValid },
+  } = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
+
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const workspaceIdRef = useRef<string | null>(null);
@@ -110,41 +106,41 @@ export const CreateWorkspace: React.FC = () => {
       </div>
     );
   }
+
   return (
     <div className="flex flex-col md:flex-row items-start justify-between gap-8 md:gap-16">
       <main className="w-full md:w-3/4">
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit((values) => createWorkspace.mutate({ ...values }))}
-            className="flex flex-col space-y-4"
-          >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Name</FormLabel>
-                  <FormMessage className="text-xs" />
-                  <FormControl>
-                    <Input {...field} />
-                  </FormControl>
-                  <FormDescription>What should your workspace be called?</FormDescription>
-                </FormItem>
-              )}
-            />
+        <form
+          onSubmit={handleSubmit((values) => createWorkspace.mutate({ ...values }))}
+          className="flex flex-col space-y-4"
+        >
+          <Controller
+            control={control}
+            name="name"
+            render={({ field }) => (
+              <div className="space-y-1.5">
+                <div className="text-gray-11 text-[13px] flex items-center">Name</div>
+                <FormInput
+                  {...field}
+                  error={errors.name?.message}
+                  description="What should your workspace be called?"
+                />
+              </div>
+            )}
+          />
 
-            <div className="mt-8">
-              <Button
-                variant="primary"
-                disabled={createWorkspace.isLoading || isPending || !form.formState.isValid}
-                type="submit"
-                className="w-full"
-              >
-                {createWorkspace.isLoading || isPending ? <Loading /> : "Create Workspace"}
-              </Button>
-            </div>
-          </form>
-        </Form>
+          <div className="mt-8">
+            <Button
+              variant="primary"
+              disabled={createWorkspace.isLoading || isPending || !isValid}
+              type="submit"
+              loading={createWorkspace.isLoading || isPending}
+              className="w-full h-9"
+            >
+              {createWorkspace.isLoading || isPending ? <Loading /> : "Create Workspace"}
+            </Button>
+          </div>
+        </form>
       </main>
       <aside className="w-1/4 flex-col items-start justify-center space-y-16 max-md:hidden md:flex ">
         <AsideContent />
diff --git a/apps/dashboard/components/banner.tsx b/apps/dashboard/components/banner.tsx
deleted file mode 100644
index 84ed0e539b..0000000000
--- a/apps/dashboard/components/banner.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import type React from "react";
-import { type PropsWithChildren, useEffect, useRef, useState } from "react";
-import { useLocalStorage, useResizeObserver } from "usehooks-ts";
-
-import { cn } from "@/lib/utils";
-import { X } from "lucide-react";
-
-type Props = {
-  variant?: "alert";
-  /**
-   * Annoying banners will come back after refreshing the page
-   *
-   * set the key in localstorage to use
-   *
-   * @example:
-   * ```ts
-   * <Banner persistChoice="billing-notification">...</Banner>
-   */
-  persistChoice?: string;
-};
-
-export const Banner: React.FC<PropsWithChildren<Props>> = ({
-  children,
-  variant,
-  persistChoice,
-}) => {
-  const bannerHeightRef = useRef<number>(0);
-  const bannerRef = useRef<HTMLDivElement>(null);
-
-  const [visible, setVisible] = !persistChoice
-    ? useState(true)
-    : useLocalStorage(`unkey_banner_${persistChoice}`, true, { initializeWithValue: false });
-
-  useResizeObserver({
-    ref: bannerRef,
-    onResize: ({ height }) => {
-      if (height !== bannerHeightRef.current) {
-        // Update Banners.
-        updateBannersBottomPosition();
-
-        // Set current banner height.
-        bannerHeightRef.current = height ?? 0;
-      }
-    },
-  });
-
-  useEffect(() => {
-    if (visible && bannerRef.current) {
-      updateBannersBottomPosition();
-
-      bannerHeightRef.current = bannerRef.current.getBoundingClientRect().height;
-    }
-  }, [visible]);
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <div
-      ref={bannerRef}
-      style={{ opacity: 0 }}
-      className="Unkey__Banner fixed inset-x-0 bottom-0 z-50 pointer-events-none sm:flex sm:justify-center sm:px-6 sm:mb-5 lg:px-8"
-    >
-      <div
-        className={cn(
-          "pointer-events-auto flex items-center justify-between gap-x-6 px-6 py-2.5 sm:rounded-lg sm:py-3 sm:pl-4 sm:pr-3.5",
-          {
-            "bg-primary text-primary-foreground": variant === undefined,
-            "bg-alert text-alert-foreground": variant === "alert",
-          },
-        )}
-      >
-        {children}
-        <button type="button" className="-m-1.5 flex-none p-1.5" onClick={() => setVisible(false)}>
-          <span className="sr-only">Close</span>
-          <X className="w-5 h-5 " aria-hidden="true" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-/**
- * Retrieves all the <Banner /> elements and re-orders their bottom fixed positions.
- */
-function updateBannersBottomPosition() {
-  const banners = document.getElementsByClassName("Unkey__Banner");
-
-  let yOffset = 0;
-
-  // Must iterate backwards.
-  for (let i = banners.length - 1; i >= 0; i--) {
-    banners[i].setAttribute("style", `bottom:${yOffset}px;`);
-    yOffset += banners[i].getBoundingClientRect().height + 6;
-  }
-}
diff --git a/apps/dashboard/components/dashboard/api-key-table/index.tsx b/apps/dashboard/components/dashboard/api-key-table/index.tsx
deleted file mode 100644
index bf85aab70c..0000000000
--- a/apps/dashboard/components/dashboard/api-key-table/index.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-"use client";
-
-import { Alert } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-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,
-  FileClock,
-  Minus,
-  MoreHorizontal,
-  MoreVertical,
-  Trash,
-  X,
-} from "lucide-react";
-import ms from "ms";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { Loading } from "../loading";
-import { DataTable } from "./table";
-type Column = {
-  id: string;
-  start: string;
-  createdAt: Date;
-  expires: Date | null;
-  enabled: boolean;
-  ownerId: string | null;
-  name: string | null;
-  ratelimitType: string | null;
-  ratelimitLimit: number | null;
-  ratelimitRefillRate: number | null;
-  ratelimitRefillInterval: number | null;
-  remaining: number | null;
-  refillInterval: string | null;
-  refillAmount: number | null;
-};
-
-type Props = {
-  data: Column[];
-};
-
-export const ApiKeyTable: React.FC<Props> = ({ data }) => {
-  const router = useRouter();
-  const deleteKey = trpc.key.delete.useMutation({
-    onSuccess: () => {
-      toast.success("Key was deleted");
-      router.refresh();
-    },
-    onError: (err, variables) => {
-      console.error(err);
-      toast.error(`Could not delete key ${JSON.stringify(variables)}`);
-      router.refresh();
-    },
-  });
-
-  const columns: ColumnDef<Column>[] = [
-    {
-      id: "select",
-
-      header: ({ table }) => (
-        <div className="flex items-center justify-center">
-          <Checkbox
-            checked={table.getIsAllPageRowsSelected()}
-            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-            aria-label="Select all"
-          />
-        </div>
-      ),
-      cell: ({ row }) => (
-        <div className="flex items-center justify-center">
-          <Checkbox
-            checked={row.getIsSelected()}
-            onCheckedChange={(value) => row.toggleSelected(!!value)}
-            aria-label="Select row"
-          />
-        </div>
-      ),
-      enableSorting: false,
-      enableHiding: false,
-    },
-    {
-      accessorKey: "start",
-      header: "Key",
-      cell: ({ row }) => (
-        <Tooltip>
-          <TooltipTrigger>
-            <Badge variant="secondary">{row.getValue("start")}...</Badge>
-          </TooltipTrigger>
-          <TooltipContent>
-            This is the first part of the key to visually match it. We don't store the full key for
-            security reasons.
-          </TooltipContent>
-        </Tooltip>
-      ),
-    },
-    {
-      accessorKey: "createdAt",
-      header: ({ column }) => (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Created At
-          <ArrowUpDown className="w-4 h-4 ml-2" />
-        </Button>
-      ),
-      cell: ({ row }) => row.original.createdAt.toUTCString(),
-    },
-    {
-      accessorKey: "enabled",
-      header: "Enabled",
-      cell: ({ row }) =>
-        row.original.enabled ? (
-          <span>
-            <Check />
-          </span>
-        ) : (
-          <span>
-            <X />
-          </span>
-        ),
-    },
-    {
-      accessorKey: "expires",
-      header: "Expires",
-      cell: ({ row }) =>
-        row.original.expires ? (
-          row.original.expires.getTime() < Date.now() ? (
-            <Tooltip>
-              <TooltipTrigger className="flex items-center text-content-subtle">
-                Expired <FileClock className="w-4 h-4 ml-2" />
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>
-                  This key expired{" "}
-                  {ms(Date.now() - row.original.expires.getTime(), {
-                    long: true,
-                  })}{" "}
-                  ago.
-                  <Link href={`/keys/${row.original.id}/settings`} className="ml-2">
-                    <Button variant="ghost">Update Key</Button>
-                  </Link>
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          ) : (
-            <span>in {ms(row.original.expires.getTime() - Date.now(), { long: true })}</span>
-          )
-        ) : (
-          <Minus className="w-4 h-4 text-gray-300" />
-        ),
-    },
-    {
-      accessorKey: "remaining",
-      header: "Remaining",
-      cell: ({ row }) =>
-        row.original.remaining ? (
-          <span>{row.original.remaining.toLocaleString()}</span>
-        ) : (
-          <Minus className="w-4 h-4 text-gray-300" />
-        ),
-    },
-    {
-      accessorKey: "refillInterval",
-      header: "Refill Rate",
-      cell: ({ row }) =>
-        row.original.refillInterval && row.original.refillAmount && row.original.remaining ? (
-          <div>
-            <span>{row.original.refillInterval}</span>
-          </div>
-        ) : (
-          <Minus className="w-4 h-4 text-gray-300" />
-        ),
-    },
-    {
-      accessorKey: "ownerId",
-      header: "Owner",
-      cell: ({ row }) =>
-        row.original.ownerId ? (
-          <Badge variant="secondary">{row.original.ownerId}</Badge>
-        ) : (
-          <Minus className="w-4 h-4 text-gray-300" />
-        ),
-    },
-    {
-      accessorKey: "name",
-      header: "Name",
-      cell: ({ row }) =>
-        row.original.name ? (
-          <Badge variant="secondary">{row.original.name}</Badge>
-        ) : (
-          <Minus className="w-4 h-4 text-gray-300" />
-        ),
-    },
-    {
-      accessorKey: "ratelimit",
-      header: "Ratelimit",
-      cell: ({ row }) =>
-        row.original.ratelimitType &&
-        row.original.ratelimitLimit &&
-        row.original.ratelimitRefillInterval &&
-        row.original.ratelimitRefillRate ? (
-          <div>
-            <span>{row.original.ratelimitRefillRate}</span> /{" "}
-            <span>{ms(row.original.ratelimitRefillInterval)}</span>
-          </div>
-        ) : (
-          <Minus className="w-4 h-4 text-gray-300" />
-        ),
-    },
-
-    {
-      id: "actions",
-      cell: ({ row }) => (
-        <div>
-          <Dialog>
-            <DropdownMenu>
-              <DropdownMenuTrigger>
-                <Button variant="ghost" className="w-8 h-8 p-0">
-                  <span className="sr-only">Open menu</span>
-                  <MoreHorizontal className="w-4 h-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  onSelect={(e) => {
-                    e.preventDefault();
-                  }}
-                >
-                  <MoreVertical className="w-4 h-4 mr-2" />
-                  <Link href={`/keys/${row.original.id}`}>Details</Link>
-                </DropdownMenuItem>
-                <DialogTrigger asChild>
-                  <DropdownMenuItem
-                    onSelect={(e) => {
-                      e.preventDefault();
-                    }}
-                  >
-                    <Trash className="w-4 h-4 mr-2" />
-                    Revoke Key
-                  </DropdownMenuItem>
-                </DialogTrigger>
-                <DialogContent className="sm:max-w-[425px]">
-                  <DialogHeader>
-                    <DialogTitle>Revoke API Key</DialogTitle>
-                    <DialogDescription>
-                      Delete the key <Badge variant="secondary">{row.original.start}...</Badge>{" "}
-                      permanenty
-                    </DialogDescription>
-                    <Alert variant="alert">
-                      This action can not be undone. Your users will no longer be able to
-                      authenticate using this key.
-                    </Alert>
-                  </DialogHeader>
-
-                  <DialogFooter>
-                    <Button
-                      variant="destructive"
-                      disabled={deleteKey.isLoading}
-                      onClick={() => deleteKey.mutate({ keyIds: [row.original.id] })}
-                    >
-                      {deleteKey.isLoading ? <Loading /> : "Delete permanently"}
-                    </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </Dialog>
-        </div>
-      ),
-    },
-  ];
-
-  return <DataTable columns={columns} data={data} />;
-};
diff --git a/apps/dashboard/components/dashboard/api-key-table/table.tsx b/apps/dashboard/components/dashboard/api-key-table/table.tsx
deleted file mode 100644
index a3f0fbe740..0000000000
--- a/apps/dashboard/components/dashboard/api-key-table/table.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-"use client";
-
-import {
-  type ColumnDef,
-  type ColumnFiltersState,
-  type SortingState,
-  type VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-
-import { Input } from "@/components/ui/input";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} 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";
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-}
-
-export function DataTable<TData, TValue>({ data, columns }: DataTableProps<TData, TValue>) {
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [rowSelection, setRowSelection] = useState({});
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const router = useRouter();
-  const deleteKey = trpc.key.delete.useMutation({
-    onSuccess: (_data, variables) => {
-      setRowSelection({});
-      toast(
-        variables.keyIds.length > 1
-          ? `All ${variables.keyIds.length} keys were deleted`
-          : "Key deleted",
-      );
-      router.refresh();
-    },
-    onError: (err, variables) => {
-      console.error(err);
-      router.refresh();
-      toast.error(`Could not delete key ${JSON.stringify(variables)}`);
-    },
-  });
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onSortingChange: setSorting,
-    onColumnVisibilityChange: setColumnVisibility,
-
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-      sorting,
-      columnFilters,
-      rowSelection,
-      columnVisibility,
-    },
-    onColumnFiltersChange: setColumnFilters,
-    getFilteredRowModel: getFilteredRowModel(),
-    onRowSelectionChange: setRowSelection,
-  });
-
-  return (
-    <div>
-      <div>
-        <div className="flex flex-wrap items-center justify-between space-x-0 space-y-4 md:space-x-4 sm:space-y-0 sm:flex-nowrap">
-          {Object.values(rowSelection).length > 0 ? (
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button className="min-w-full md:min-w-min ">Revoke selected keys</Button>
-              </DialogTrigger>
-              <DialogContent className="sm:max-w-[425px]">
-                <DialogHeader>
-                  <DialogTitle>Revoke {Object.keys(rowSelection).length} keys</DialogTitle>
-                  <DialogDescription className="text-alert">
-                    This action can not be undone. Your root key(s) will no longer be able to create
-                    resources
-                  </DialogDescription>
-                </DialogHeader>
-
-                <DialogFooter>
-                  <Button
-                    disabled={deleteKey.isLoading}
-                    onClick={() => {
-                      const keyIds = table
-                        .getSelectedRowModel()
-                        // @ts-ignore
-                        .rows.map((row) => row.original.id as string);
-                      deleteKey.mutate({ keyIds });
-                    }}
-                  >
-                    {deleteKey.isLoading ? <Loading /> : "Delete permanently"}
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          ) : null}
-          <Input
-            placeholder="Filter keys"
-            value={(table.getColumn("start")?.getFilterValue() as string) ?? ""}
-            onChange={(event) => table.getColumn("start")?.setFilterValue(event.target.value)}
-            className="max-w-sm md:max-w-2xl"
-          />
-          <DropdownMenu>
-            <DropdownMenuTrigger>
-              <Button className="min-w-full mt-4 ml-0 md:min-w-min md:mt-0 md:ml-auto">
-                Columns
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {table
-                .getAllColumns()
-                .filter((column) => column.getCanHide())
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) => column.toggleVisibility(!!value)}
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  );
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </div>
-      <Table className="mt-4">
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(header.column.columnDef.header, header.getContext())}
-                  </TableHead>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <div className="flex items-center justify-end py-4 space-x-2">
-        <Button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
-          Previous
-        </Button>
-        <Button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
-          Next
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/dashboard/components/dashboard/create-key-button.tsx b/apps/dashboard/components/dashboard/create-key-button.tsx
deleted file mode 100644
index 9b1426d19c..0000000000
--- a/apps/dashboard/components/dashboard/create-key-button.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client";
-import { Button } from "@unkey/ui";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-export const CreateKeyButton = (props: {
-  apiId: string;
-  keyAuthId: string;
-}) => {
-  // Add missing import
-
-  const href = `/apis/${props.apiId}/keys/${props.keyAuthId}/new`;
-  const path = usePathname();
-  const setUrl = () => {
-    window.location.href = href;
-  };
-  if (path?.match(href)) {
-    return (
-      <Button onClick={setUrl} variant="primary">
-        Create Key
-      </Button>
-    );
-  }
-  return (
-    <Link key="new" href={href}>
-      <Button variant="primary">Create Key</Button>
-    </Link>
-  );
-};
diff --git a/apps/dashboard/components/dashboard/feedback-component.tsx b/apps/dashboard/components/dashboard/feedback-component.tsx
index 040e544b4b..48aedd163a 100644
--- a/apps/dashboard/components/dashboard/feedback-component.tsx
+++ b/apps/dashboard/components/dashboard/feedback-component.tsx
@@ -1,29 +1,22 @@
 "use client";
-import { Loading } from "@/components/dashboard/loading";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Textarea } from "@/components/ui/textarea";
+
+import { DialogContainer } from "@/components/dialog-container";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "@unkey/ui";
+import { CircleInfo } from "@unkey/icons";
 import {
+  FormTextarea,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@unkey/ui/src/components/select";
+} from "@unkey/ui";
+import { Button } from "@unkey/ui";
 import { parseAsBoolean, useQueryState } from "nuqs";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 
 export const useFeedback = () => {
   return useQueryState("feedback", {
@@ -32,16 +25,23 @@ export const useFeedback = () => {
   });
 };
 
+const feedbackSchema = z.object({
+  severity: z.enum(["p0", "p1", "p2", "p3"]),
+  issueType: z.enum(["bug", "feature", "security", "payment", "question"]),
+  message: z.string().trim().min(20, "Feedback must contain at least 20 characters"),
+});
+
+type FormValues = z.infer<typeof feedbackSchema>;
+
 export const Feedback: React.FC = () => {
   const [open, setOpen] = useFeedback();
-  const schema = z.object({
-    severity: z.enum(["p0", "p1", "p2", "p3"]),
-    issueType: z.enum(["bug", "feature", "security", "payment", "question"]),
-    message: z.string().min(20, "Feedback must contain at least 20 characters"),
-  });
 
-  const form = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({
+    resolver: zodResolver(feedbackSchema),
     defaultValues: {
       severity: "p2",
       issueType: "bug",
@@ -60,101 +60,118 @@ export const Feedback: React.FC = () => {
     },
   });
 
-  return (
-    <Dialog open={!!open} onOpenChange={setOpen}>
-      <Form {...form}>
-        <form>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Report an issue</DialogTitle>
-              <DialogDescription>What went wrong or how can we improve?</DialogDescription>
-            </DialogHeader>
-            <div className="grid grid-cols-2 gap-4">
-              <FormField
-                control={form.control}
-                name="issueType"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Area</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="What area is this" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="bug">Bug</SelectItem>
-                        <SelectItem value="feature">Feature Request</SelectItem>
-                        <SelectItem value="security">Security</SelectItem>
-                        <SelectItem value="payment">Payments</SelectItem>
-                        <SelectItem value="question">General Question</SelectItem>
-                      </SelectContent>
-                    </Select>
+  const onSubmitForm = async (values: FormValues) => {
+    try {
+      await create.mutateAsync(values);
+    } catch (error) {
+      console.error("Form submission error:", error);
+    }
+  };
 
-                    <FormMessage />
-                  </FormItem>
+  return (
+    <DialogContainer
+      isOpen={Boolean(open)}
+      onOpenChange={setOpen}
+      title="Report an issue"
+      subTitle="What went wrong or how can we improve?"
+      footer={
+        <div className="flex flex-col items-center justify-center w-full gap-2">
+          <Button
+            type="submit"
+            form="feedback-form"
+            variant="primary"
+            size="xlg"
+            disabled={isSubmitting || create.isLoading}
+            loading={isSubmitting || create.isLoading}
+            className="w-full rounded-lg"
+          >
+            Send
+          </Button>
+          <div className="text-xs text-gray-9">
+            We'll try to get back to you as soon as possible
+          </div>
+        </div>
+      }
+    >
+      <form
+        id="feedback-form"
+        onSubmit={handleSubmit(onSubmitForm)}
+        className="flex flex-col gap-4"
+      >
+        <div className="grid grid-cols-2 gap-4">
+          <Controller
+            control={control}
+            name="issueType"
+            render={({ field }) => (
+              <div className="space-y-1.5">
+                <div className="text-gray-11 text-[13px] flex items-center">Area</div>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="What area is this" />
+                  </SelectTrigger>
+                  <SelectContent className="border-none rounded-md">
+                    <SelectItem value="bug">Bug</SelectItem>
+                    <SelectItem value="feature">Feature Request</SelectItem>
+                    <SelectItem value="security">Security</SelectItem>
+                    <SelectItem value="payment">Payments</SelectItem>
+                    <SelectItem value="question">General Question</SelectItem>
+                  </SelectContent>
+                </Select>
+                {errors.issueType && (
+                  <div className="text-error-11 text-xs">{errors.issueType.message}</div>
                 )}
-              />
-              <FormField
-                control={form.control}
-                name="severity"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Severity</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select a severity" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="p0">Urgent</SelectItem>
-                        <SelectItem value="p1">High</SelectItem>
-                        <SelectItem value="p2">Normal</SelectItem>
-                        <SelectItem value="p3">Low</SelectItem>
-                      </SelectContent>
-                    </Select>
+                <output className="text-gray-9 flex gap-2 items-center text-[13px]">
+                  <CircleInfo size="md-regular" aria-hidden="true" />
+                  <span>Select the appropriate category</span>
+                </output>
+              </div>
+            )}
+          />
 
-                    <FormMessage />
-                  </FormItem>
+          <Controller
+            control={control}
+            name="severity"
+            render={({ field }) => (
+              <div className="space-y-1.5">
+                <div className="text-gray-11 text-[13px] flex items-center">Severity</div>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="Select a severity" />
+                  </SelectTrigger>
+                  <SelectContent className="border-none rounded-md">
+                    <SelectItem value="p0">Urgent</SelectItem>
+                    <SelectItem value="p1">High</SelectItem>
+                    <SelectItem value="p2">Normal</SelectItem>
+                    <SelectItem value="p3">Low</SelectItem>
+                  </SelectContent>
+                </Select>
+                {errors.severity && (
+                  <div className="text-error-11 text-xs">{errors.severity.message}</div>
                 )}
-              />
-            </div>
-            <FormField
-              control={form.control}
-              name="message"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>What can we do for you?</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      {...field}
-                      placeholder="Please include all information relevant to your issue."
-                    />
-                  </FormControl>
+                <output className="text-gray-9 flex gap-2 items-center text-[13px]">
+                  <CircleInfo size="md-regular" aria-hidden="true" />
+                  <span>How urgent is this issue?</span>
+                </output>
+              </div>
+            )}
+          />
+        </div>
 
-                  <FormMessage />
-                </FormItem>
-              )}
+        <Controller
+          control={control}
+          name="message"
+          render={({ field }) => (
+            <FormTextarea
+              label="What can we do for you?"
+              description="Please include all information relevant to your issue."
+              placeholder="Please describe your issue in detail..."
+              error={errors.message?.message}
+              className="min-h-24 w-full"
+              {...field}
             />
-
-            <DialogFooter>
-              <Button variant="ghost" onClick={() => setOpen(false)}>
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                disabled={create.isLoading}
-                onClick={form.handleSubmit((data) => {
-                  create.mutate(data);
-                })}
-              >
-                {create.isLoading ? <Loading /> : "Send"}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </form>
-      </Form>
-    </Dialog>
+          )}
+        />
+      </form>
+    </DialogContainer>
   );
 };
diff --git a/apps/dashboard/components/dashboard/root-key-table/index.tsx b/apps/dashboard/components/dashboard/root-key-table/index.tsx
index aabf54e2c7..e6a8c6db18 100644
--- a/apps/dashboard/components/dashboard/root-key-table/index.tsx
+++ b/apps/dashboard/components/dashboard/root-key-table/index.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { Alert } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -19,10 +19,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 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 { Button, Checkbox } from "@unkey/ui";
 import { ArrowUpDown, Minus, MoreHorizontal, MoreVertical, Trash } from "lucide-react";
 import ms from "ms";
 import Link from "next/link";
@@ -89,17 +88,17 @@ export const RootKeyTable: React.FC<Props> = ({ data }) => {
       accessorKey: "start",
       header: "Key",
       cell: ({ row }) => (
-        <Tooltip>
-          <TooltipTrigger>
-            <Link href={`/settings/root-keys/${row.original.id}`}>
-              <Badge variant="secondary">{row.getValue("start")}...</Badge>
-            </Link>
-          </TooltipTrigger>
-          <TooltipContent>
-            This is the first part of the key to visually match it. We don't store the full key for
-            security reasons.
-          </TooltipContent>
-        </Tooltip>
+        <RatelimitOverviewTooltip
+          content="This is the first part of the key to visually match it. We don't store the full key for security reasons."
+          position={{
+            side: "right",
+            align: "center",
+          }}
+        >
+          <Link href={`/settings/root-keys/${row.original.id}`}>
+            <Badge variant="secondary">{row.getValue("start")}...</Badge>
+          </Link>
+        </RatelimitOverviewTooltip>
       ),
     },
     {
diff --git a/apps/dashboard/components/dashboard/root-key-table/table.tsx b/apps/dashboard/components/dashboard/root-key-table/table.tsx
index 124e2cfdde..e8ae44f4a2 100644
--- a/apps/dashboard/components/dashboard/root-key-table/table.tsx
+++ b/apps/dashboard/components/dashboard/root-key-table/table.tsx
@@ -13,7 +13,6 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
-import { Input } from "@/components/ui/input";
 import {
   Table,
   TableBody,
@@ -40,7 +39,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 { Button, Input } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Loading } from "../loading";
diff --git a/apps/dashboard/components/logs/checkbox/filter-checkbox.tsx b/apps/dashboard/components/logs/checkbox/filter-checkbox.tsx
index 76db36578f..9c42483622 100644
--- a/apps/dashboard/components/logs/checkbox/filter-checkbox.tsx
+++ b/apps/dashboard/components/logs/checkbox/filter-checkbox.tsx
@@ -1,6 +1,5 @@
-import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
-import { Button } from "@unkey/ui";
+import { Button, Checkbox } from "@unkey/ui";
 import { useCallback, useEffect } from "react";
 import type { FilterOperator, FilterValue } from "../validation/filter.types";
 import { useCheckboxState } from "./hooks";
diff --git a/apps/dashboard/components/logs/details/request-response-details.tsx b/apps/dashboard/components/logs/details/request-response-details.tsx
index e29e039ed4..3664c3db95 100644
--- a/apps/dashboard/components/logs/details/request-response-details.tsx
+++ b/apps/dashboard/components/logs/details/request-response-details.tsx
@@ -1,5 +1,5 @@
+import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { toast } from "@/components/ui/toaster";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import type { ReactNode } from "react";
 
@@ -83,12 +83,17 @@ export const RequestResponseDetails = <T extends unknown[]>({ fields, className
     }
 
     return (
-      <TooltipProvider key={`${field.label}-${index}`}>
-        <Tooltip>
-          <TooltipTrigger asChild>{baseContent}</TooltipTrigger>
-          <TooltipContent side="bottom">{field.tooltipContent}</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <RatelimitOverviewTooltip
+        key={`${field.label}-${index}`}
+        content={field.tooltipContent}
+        position={{
+          side: "bottom",
+          align: "end",
+        }}
+        asChild
+      >
+        {baseContent}
+      </RatelimitOverviewTooltip>
     );
   };
 
diff --git a/apps/dashboard/components/logs/filter-operator-input/index.tsx b/apps/dashboard/components/logs/filter-operator-input/index.tsx
index af1590c7c5..7cf4a9977a 100644
--- a/apps/dashboard/components/logs/filter-operator-input/index.tsx
+++ b/apps/dashboard/components/logs/filter-operator-input/index.tsx
@@ -1,6 +1,5 @@
-import { Textarea } from "@/components/ui/textarea";
 import { Check } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, Textarea } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import { useEffect, useRef, useState } from "react";
 
@@ -139,7 +138,7 @@ export const FilterOperatorInput = <T extends string>({
             onChange={(e) => setText(e.target.value)}
             placeholder="Enter text"
             onKeyDown={handleTextareaKeyDown}
-            className="w-full px-3 py-2 text-sm bg-accent-2 border rounded-lg focus:outline-none focus:ring-4 focus:ring-accent-5 border-accent-12 drop-shadow-sm placeholder:text-gray-8"
+            className="h-20"
           />
         </div>
         <Button variant="primary" className="py-[14px] w-full h-9 rounded-md" onClick={handleApply}>
diff --git a/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx b/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx
index 7ad599b177..c94b7a07b4 100644
--- a/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx
+++ b/apps/dashboard/components/logs/llm-search/components/search-example-tooltip.tsx
@@ -1,5 +1,5 @@
 import { CaretRightOutline, CircleInfoSparkle } from "@unkey/icons";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
 
 type SearchExampleTooltipProps = {
   onSelectExample: (query: string) => void;
diff --git a/apps/dashboard/components/navigation/sidebar/team-switcher.tsx b/apps/dashboard/components/navigation/sidebar/team-switcher.tsx
index 45feb67b6a..f949962ec8 100644
--- a/apps/dashboard/components/navigation/sidebar/team-switcher.tsx
+++ b/apps/dashboard/components/navigation/sidebar/team-switcher.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { Loading } from "@/components/dashboard/loading";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
@@ -13,7 +14,6 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useSidebar } from "@/components/ui/sidebar";
 import { toast } from "@/components/ui/toaster";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { setSessionCookie } from "@/lib/auth/cookies";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
@@ -110,16 +110,13 @@ export const WorkspaceSwitcher: React.FC<Props> = (props): JSX.Element => {
           {isUserMembershipsLoading ? (
             <Loading />
           ) : !isCollapsed ? (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className="overflow-hidden text-sm font-medium text-ellipsis">
-                  {props.workspace.name}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>
-                <span className="text-sm font-medium">{props.workspace.name}</span>
-              </TooltipContent>
-            </Tooltip>
+            <RatelimitOverviewTooltip
+              content={<span className="text-[13px] font-medium">{props.workspace.name}</span>}
+            >
+              <span className="overflow-hidden text-[13px] font-medium text-ellipsis">
+                {props.workspace.name}
+              </span>
+            </RatelimitOverviewTooltip>
           ) : null}
         </div>
         {!isCollapsed && (
diff --git a/apps/dashboard/components/ui/accordion.tsx b/apps/dashboard/components/ui/accordion.tsx
deleted file mode 100644
index 7d8d630b43..0000000000
--- a/apps/dashboard/components/ui/accordion.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="w-4 h-4 transition-transform duration-200 shrink-0" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className,
-    )}
-    {...props}
-  >
-    <div className="pt-0 pb-4">{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/dashboard/components/ui/alert-dialog.tsx b/apps/dashboard/components/ui/alert-dialog.tsx
deleted file mode 100644
index 7ebefd2273..0000000000
--- a/apps/dashboard/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@unkey/ui";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "default" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};
diff --git a/apps/dashboard/components/ui/back-button.tsx b/apps/dashboard/components/ui/back-button.tsx
deleted file mode 100644
index 11e8d9ed8f..0000000000
--- a/apps/dashboard/components/ui/back-button.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client";
-import { Button } from "@unkey/ui";
-import { useRouter } from "next/navigation";
-
-function BackButton({
-  className,
-  children,
-}: React.PropsWithChildren<{
-  className?: string;
-}>) {
-  const router = useRouter();
-  return (
-    <Button type="submit" variant="default" className={className} onClick={() => router.back()}>
-      {children}
-    </Button>
-  );
-}
-
-export default BackButton;
diff --git a/apps/dashboard/components/ui/checkbox.tsx b/apps/dashboard/components/ui/checkbox.tsx
deleted file mode 100644
index 2157f9105d..0000000000
--- a/apps/dashboard/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/apps/dashboard/components/ui/form.tsx b/apps/dashboard/components/ui/form.tsx
deleted file mode 100644
index 7d039dbfb9..0000000000
--- a/apps/dashboard/components/ui/form.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import type * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
-import {
-  Controller,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form";
-
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
-      </FormItemContext.Provider>
-    );
-  },
-);
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-alert", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-xs text-content-subtle mt-1", className)}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-sm font-medium text-alert", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};
diff --git a/apps/dashboard/components/ui/group-button.tsx b/apps/dashboard/components/ui/group-button.tsx
deleted file mode 100644
index a927879ecd..0000000000
--- a/apps/dashboard/components/ui/group-button.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Children, type ReactElement, cloneElement } from "react";
-
-import { cn } from "@/lib/utils";
-import type { ButtonProps } from "@unkey/ui";
-
-interface ButtonGroupProps {
-  className?: string;
-  orientation?: "horizontal" | "vertical";
-  children: ReactElement<ButtonProps>[];
-}
-
-export const ButtonGroup = ({
-  className,
-  orientation = "horizontal",
-  children,
-}: ButtonGroupProps) => {
-  const totalButtons = Children.count(children);
-  const isHorizontal = orientation === "horizontal";
-  const isVertical = orientation === "vertical";
-
-  return (
-    <div
-      className={cn(
-        "flex",
-        {
-          "flex-col": isVertical,
-          "w-fit": isVertical,
-        },
-        className,
-      )}
-      aria-label="Button group"
-    >
-      {Children.map(children, (child, index) => {
-        const isFirst = index === 0;
-        const isLast = index === totalButtons - 1;
-
-        return cloneElement(child, {
-          className: cn(
-            {
-              "rounded-l-none": isHorizontal && !isFirst,
-              "rounded-r-none": isHorizontal && !isLast,
-              "border-l-0": isHorizontal && !isFirst,
-
-              "rounded-t-none": isVertical && !isFirst,
-              "rounded-b-none": isVertical && !isLast,
-              "border-t-0": isVertical && !isFirst,
-            },
-            child.props.className,
-          ),
-        });
-      })}
-    </div>
-  );
-};
diff --git a/apps/dashboard/components/ui/input.tsx b/apps/dashboard/components/ui/input.tsx
deleted file mode 100644
index df5b638e71..0000000000
--- a/apps/dashboard/components/ui/input.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  startIcon?: LucideIcon;
-  endIcon?: LucideIcon;
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, startIcon, endIcon, ...props }, ref) => {
-    const StartIcon = startIcon;
-    const EndIcon = endIcon;
-
-    return (
-      <div className="w-full relative">
-        {StartIcon && (
-          <div className="absolute left-1.5 top-1/2 transform -translate-y-1/2" aria-hidden="true">
-            <StartIcon size={18} className="text-muted-foreground" />
-          </div>
-        )}
-        <input
-          type={type}
-          className={cn(
-            "flex h-8 w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:border-primary placeholder:text-content-subtle focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-            startIcon ? "pl-8" : "",
-            endIcon ? "pr-8" : "",
-            className,
-          )}
-          ref={ref}
-          {...props}
-        />
-        {EndIcon && (
-          <div className="absolute right-3 top-1/2 transform -translate-y-1/2" aria-hidden="true">
-            <EndIcon className="text-muted-foreground" size={18} />
-          </div>
-        )}
-      </div>
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };
diff --git a/apps/dashboard/components/ui/pagination.tsx b/apps/dashboard/components/ui/pagination.tsx
deleted file mode 100644
index dabdd1ccc4..0000000000
--- a/apps/dashboard/components/ui/pagination.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
-import * as React from "react";
-
-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">) => (
-  <nav
-    aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
-);
-Pagination.displayName = "Pagination";
-
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
-  ({ className, ...props }, ref) => (
-    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
-  ),
-);
-PaginationContent.displayName = "PaginationContent";
-
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
-  ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
-);
-PaginationItem.displayName = "PaginationItem";
-
-type PaginationLinkProps = React.PropsWithChildren<{
-  isActive?: boolean;
-  className?: string;
-}> &
-  Pick<ButtonProps, "shape"> &
-  LinkProps;
-
-const PaginationLink = ({
-  className,
-  isActive,
-  shape = "square",
-  ...props
-}: PaginationLinkProps) => (
-  <Link
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "default" : "ghost",
-        shape,
-      }),
-      className,
-    )}
-    {...props}
-  />
-);
-PaginationLink.displayName = "PaginationLink";
-
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    className={cn("gap-1 pl-2.5", className)}
-    {...props}
-  >
-    <ChevronLeft className="w-4 h-4" />
-    <span>Previous</span>
-  </PaginationLink>
-);
-PaginationPrevious.displayName = "PaginationPrevious";
-
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <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>
-);
-PaginationNext.displayName = "PaginationNext";
-
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="w-4 h-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-);
-PaginationEllipsis.displayName = "PaginationEllipsis";
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-};
diff --git a/apps/dashboard/components/ui/progress.tsx b/apps/dashboard/components/ui/progress.tsx
deleted file mode 100644
index 1cc4ece59c..0000000000
--- a/apps/dashboard/components/ui/progress.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };
diff --git a/apps/dashboard/components/ui/sidebar.tsx b/apps/dashboard/components/ui/sidebar.tsx
index fa750da57b..086cd27038 100644
--- a/apps/dashboard/components/ui/sidebar.tsx
+++ b/apps/dashboard/components/ui/sidebar.tsx
@@ -12,9 +12,9 @@ import {
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
diff --git a/apps/dashboard/components/ui/skeleton.tsx b/apps/dashboard/components/ui/skeleton.tsx
deleted file mode 100644
index 6d9a616758..0000000000
--- a/apps/dashboard/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { cn } from "@/lib/utils";
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />;
-}
-
-export { Skeleton };
diff --git a/apps/dashboard/components/ui/textarea.tsx b/apps/dashboard/components/ui/textarea.tsx
deleted file mode 100644
index a9b28fe7a8..0000000000
--- a/apps/dashboard/components/ui/textarea.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-16 w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm focus:border-primary file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-content-subtle focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Textarea.displayName = "Textarea";
-
-export { Textarea };
diff --git a/apps/dashboard/components/ui/tooltip.tsx b/apps/dashboard/components/ui/tooltip.tsx
deleted file mode 100644
index 280d49320a..0000000000
--- a/apps/dashboard/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-secondary px-3 py-1.5 text-sm text-secondary-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };