diff --git a/client/components/IsometricRealmSelector.tsx b/client/components/IsometricRealmSelector.tsx
index 799e9be8..1185ddef 100644
--- a/client/components/IsometricRealmSelector.tsx
+++ b/client/components/IsometricRealmSelector.tsx
@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect, useMemo } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useNavigate, Link } from "react-router-dom";
 import IsometricRealmCard, { RealmData } from "./IsometricRealmCard";
+import { Button } from "./ui/button";
 
 function TypeWriter({ text, delay = 0 }: { text: string; delay?: number }) {
   const [displayText, setDisplayText] = useState("");
@@ -200,20 +201,6 @@ export default function IsometricRealmSelector() {
     [navigate]
   );
 
-  const backgroundGradient = `
-    radial-gradient(
-      ellipse 80% 50% at ${mousePosition.x * 100}% ${mousePosition.y * 100}%,
-      rgba(59, 130, 246, 0.08) 0%,
-      transparent 50%
-    ),
-    radial-gradient(
-      ellipse 60% 40% at ${100 - mousePosition.x * 100}% ${100 - mousePosition.y * 100}%,
-      rgba(168, 85, 247, 0.06) 0%,
-      transparent 50%
-    ),
-    linear-gradient(180deg, #030712 0%, #0f172a 50%, #030712 100%)
-  `;
-
   return (
     <div className="realm-selector">
       {/* Scanline overlay */}
@@ -266,8 +253,12 @@ export default function IsometricRealmSelector() {
             learn, and bring ideas to life. Join thousands of developers, designers, and innovators.
           </p>
           <div className="hero-cta">
-            <Link to="/get-started" className="cta-primary">Get Started Free</Link>
-            <Link to="/downloads" className="cta-secondary">Download Desktop App</Link>
+            <Button size="lg" className="cta-primary" asChild>
+              <Link to="/get-started">Get Started Free</Link>
+            </Button>
+            <Button variant="outline" size="lg" className="cta-secondary" asChild>
+              <Link to="/downloads">Download Desktop App</Link>
+            </Button>
           </div>
         </motion.div>
 
@@ -356,13 +347,13 @@ export default function IsometricRealmSelector() {
                         <span key={i} className="featured-feature">{feature}</span>
                       ))}
                     </div>
-                    <button 
+                    <Button 
                       className="featured-cta"
                       onClick={() => handleRealmClick(realms[featuredIndex])}
                     >
                       Enter {realms[featuredIndex].label}
                       <span className="cta-arrow">→</span>
-                    </button>
+                    </Button>
                   </div>
                 </div>
                 <div className="featured-corner tl" />
diff --git a/client/components/ui/button.tsx b/client/components/ui/button.tsx
index 5b88ddd9..9d05633b 100644
--- a/client/components/ui/button.tsx
+++ b/client/components/ui/button.tsx
@@ -44,32 +44,34 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, onClick, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
 
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      // Create ripple effect
-      const button = e.currentTarget;
-      const rect = button.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
+    const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+      const target = e.currentTarget;
+      if (target instanceof HTMLElement) {
+        const rect = target.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
 
-      const ripple = document.createElement("span");
-      ripple.style.position = "absolute";
-      ripple.style.borderRadius = "50%";
-      ripple.style.transform = "scale(0)";
-      ripple.style.animation = "ripple 0.6s linear";
-      ripple.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+        const ripple = document.createElement("span");
+        ripple.style.position = "absolute";
+        ripple.style.borderRadius = "50%";
+        ripple.style.transform = "scale(0)";
+        ripple.style.animation = "ripple 0.6s linear";
+        ripple.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+        ripple.style.pointerEvents = "none";
 
-      const size = Math.max(rect.width, rect.height);
-      ripple.style.width = ripple.style.height = size + "px";
-      ripple.style.left = x - size / 2 + "px";
-      ripple.style.top = y - size / 2 + "px";
+        const rippleSize = Math.max(rect.width, rect.height);
+        ripple.style.width = ripple.style.height = rippleSize + "px";
+        ripple.style.left = x - rippleSize / 2 + "px";
+        ripple.style.top = y - rippleSize / 2 + "px";
 
-      button.appendChild(ripple);
+        target.appendChild(ripple);
 
-      setTimeout(() => {
-        ripple.remove();
-      }, 600);
+        setTimeout(() => {
+          ripple.remove();
+        }, 600);
+      }
 
-      if (onClick) onClick(e);
+      if (onClick) onClick(e as React.MouseEvent<HTMLButtonElement>);
     };
 
     return (
@@ -85,7 +87,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         <Comp
           className={cn(buttonVariants({ variant, size, className }))}
           ref={ref}
-          onClick={asChild ? onClick : handleClick}
+          onClick={handleClick}
           {...props}
         />
       </>