diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a42720b..99bc0b2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,6 +20,7 @@
         "lucide-react": "^0.453.0",
         "next": "15.0.3",
         "next-intl": "^4.8.3",
+        "next-themes": "^0.4.6",
         "react": "^18",
         "react-chartjs-2": "^5.3.1",
         "react-dom": "^18",
@@ -7152,6 +7153,16 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next-tick": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 30b2dc2..9f3074e 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -2,54 +2,98 @@ import React from 'react'
 import { cn } from '@/lib/utils'
 import { ButtonProps } from '@/types/ui'
 
+const Spinner = () => (
+  <svg
+    className="animate-spin h-4 w-4 shrink-0"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    />
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+)
+
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ 
-    className, 
-    variant = 'primary', 
-    size = 'md', 
-    isLoading, 
-    leftIcon, 
-    rightIcon, 
-    children, 
-    ...props 
-  }, ref) => {
-    const baseClasses = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stellar-slate focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none"
-    
-    const variantClasses = {
-      primary: "bg-gold-500 text-stellar-navy hover:bg-gold-600",
-      outline: "border border-stellar-slate bg-transparent hover:bg-stellar-lightNavy hover:text-stellar-white",
-      ghost: "hover:bg-stellar-lightNavy hover:text-stellar-white",
-      danger: "bg-red-500 text-white hover:bg-red-600",
+  (
+    {
+      className,
+      variant = 'primary',
+      size = 'md',
+      isLoading = false,
+      leftIcon,
+      rightIcon,
+      children,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const isDisabled = isLoading || disabled
+
+    const baseClasses =
+      'inline-flex items-center justify-center rounded-md font-medium transition-colors ' +
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold-500 focus-visible:ring-offset-2 focus-visible:ring-offset-stellar-navy ' +
+      'disabled:opacity-50 disabled:pointer-events-none select-none'
+
+    const variantClasses: Record<string, string> = {
+      primary:
+        'bg-gold-500 text-stellar-navy hover:bg-gold-600 active:bg-gold-700',
+      secondary:
+        'bg-stellar-lightNavy text-stellar-white border border-stellar-slate ' +
+        'hover:bg-stellar-navy hover:border-stellar-lightSlate active:bg-stellar-darkNavy',
+      outline:
+        'border border-stellar-slate bg-transparent text-stellar-lightSlate ' +
+        'hover:bg-stellar-lightNavy hover:text-stellar-white active:bg-stellar-navy',
+      ghost:
+        'bg-transparent text-stellar-lightSlate ' +
+        'hover:bg-stellar-lightNavy hover:text-stellar-white active:bg-stellar-navy',
+      danger:
+        'bg-red-500 text-white hover:bg-red-600 active:bg-red-700',
     }
-    
-    const sizeClasses = {
-      sm: "h-9 px-3 rounded-md text-xs",
-      md: "h-10 px-4 py-2",
-      lg: "h-11 px-8 rounded-md text-base",
+
+    const sizeClasses: Record<string, string> = {
+      sm: 'h-8 px-3 text-xs gap-1.5 rounded',
+      md: 'h-10 px-4 text-sm gap-2',
+      lg: 'h-11 px-6 text-base gap-2',
     }
-    
+
     return (
       <button
+        ref={ref}
         className={cn(
           baseClasses,
           variantClasses[variant],
           sizeClasses[size],
           className
         )}
-        ref={ref}
-        disabled={isLoading || props.disabled}
+        disabled={isDisabled}
+        aria-disabled={isDisabled}
+        aria-busy={isLoading}
         {...props}
       >
         {isLoading ? (
           <>
-            <span className="animate-spin mr-2">●</span>
-            Loading...
+            <Spinner />
+            <span className="opacity-80">{children}</span>
           </>
         ) : (
           <>
-            {leftIcon && <span className="mr-2">{leftIcon}</span>}
+            {leftIcon && <span className="shrink-0">{leftIcon}</span>}
             {children}
-            {rightIcon && <span className="ml-2">{rightIcon}</span>}
+            {rightIcon && <span className="shrink-0">{rightIcon}</span>}
           </>
         )}
       </button>
@@ -57,6 +101,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   }
 )
 
-Button.displayName = "Button"
+Button.displayName = 'Button'
 
-export { Button }
\ No newline at end of file
+export { Button }
diff --git a/frontend/src/types/ui.ts b/frontend/src/types/ui.ts
index 69365de..84cb04d 100644
--- a/frontend/src/types/ui.ts
+++ b/frontend/src/types/ui.ts
@@ -1,7 +1,7 @@
 import React from 'react'
 
 // UI Component Types
-export type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger'
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {