diff --git a/mirascope-ui/ui/button.tsx b/mirascope-ui/ui/button.tsx
index e198c31..4da9d10 100644
--- a/mirascope-ui/ui/button.tsx
+++ b/mirascope-ui/ui/button.tsx
@@ -6,21 +6,28 @@ import * as React from "react";
 import { cn } from "@/mirascope-ui/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive font-fun",
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
+    "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+    "font-fun",
+  ].join(" "),
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 ",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 ",
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 ",
         outline:
-          "border bg-background shadow-xs hover:bg-muted hover:cursor-pointer dark:bg-input/30 dark:border-input dark:hover:bg-input/50 ",
+          "border border-primary text-primary bg-background shadow-xs hover:bg-accent hover:text-accent-foreground hover:cursor-pointer",
         outlineDestructive:
           "border border-input bg-background text-destructive hover:cursor-pointer hover:bg-destructive-hover",
         outlineSecondary:
           "border border-input bg-background hover:bg-secondary/20 hover:cursor-pointer ",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/90 ",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 ",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
         ghostDestructive: "hover:bg-destructive hover:text-destructive-foreground ",
         link: "text-primary underline-offset-4 hover:underline ",
       },
@@ -47,12 +54,12 @@ const buttonVariants = cva(
   }
 );
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-  loading?: boolean;
-}
+export type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    loading?: boolean;
+  };
+
 function Button({
   className,
   loading = false,