diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 793889d..2f1ebd3 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,28 +5,29 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 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:ring-2 focus-visible:ring-ring/50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-300 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:ring-2 focus-visible:ring-[var(--color-tech-blue)]/50 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]",
   {
     variants: {
       variant: {
-        default: "bg-[#C41E3A] text-white hover:bg-[#A01830] hover:shadow-lg hover:shadow-[#C41E3A]/25 hover:-translate-y-0.5",
+        default: "bg-gradient-to-r from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] text-white hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/50 hover:scale-105 active:scale-95",
         destructive:
           "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500/50",
         outline:
-          "border-2 border-[#C41E3A] bg-transparent text-[#C41E3A] hover:bg-[#FEF2F4] hover:text-[#A01830]",
+          "border border-[var(--color-tech-blue)] bg-transparent text-[var(--color-tech-blue)] hover:bg-[var(--color-tech-blue)]/10 hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20",
         secondary:
-          "bg-[#FAF8F8] text-[#1A1A1A] hover:bg-[#F5F0F0]",
+          "bg-[var(--color-bg-tertiary)] text-white border border-gray-700 hover:border-[var(--color-tech-blue)] hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20 hover:scale-105 active:scale-95",
         ghost:
-          "hover:bg-[#F5F0F0] hover:text-[#1A1A1A]",
-        link: "text-[#C41E3A] underline-offset-4 hover:underline hover:text-[#A01830]",
+          "text-gray-300 hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]",
+        link: "text-[var(--color-tech-blue)] underline-offset-4 hover:underline",
       },
       size: {
         default: "h-10 px-6 py-2",
-        xs: "h-7 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-4",
-        lg: "h-12 rounded-md px-8 text-base",
+        xs: "h-7 gap-1 rounded-lg px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-lg gap-1.5 px-4",
+        lg: "h-12 rounded-lg px-8 text-base",
+        xl: "h-14 rounded-lg px-10 text-lg",
         icon: "size-10",
-        "icon-xs": "size-7 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-xs": "size-7 rounded-lg [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",
         "icon-lg": "size-12",
       },