diff --git a/src/components/Events.tsx b/src/components/Events.tsx
index 0acab75..b32a925 100644
--- a/src/components/Events.tsx
+++ b/src/components/Events.tsx
@@ -203,7 +203,7 @@ export function Events() {
               <Button variant="secondary" size="lg" onClick={() => setShowContactForm(true)}>
                 Send Melding
               </Button>
-              <Button variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+              <Button variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary bg-white/10 backdrop-blur-sm">
                 Bli Medlem
               </Button>
             </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index b93cc87..17fbfa7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -25,12 +25,14 @@ export function Header() {
             <Button variant="secondary" size="sm">Join Club</Button>
           </nav>
           
-          <button 
+          <Button 
+            variant="ghost"
+            size="icon"
             className="md:hidden"
             onClick={() => setIsMenuOpen(!isMenuOpen)}
           >
             {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button>
+          </Button>
         </div>
         
         {isMenuOpen && (
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 7bfc5d6..a86debf 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -26,10 +26,10 @@ export function Hero() {
           </p>
           
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-8">
-            <Button size="lg" variant="secondary" className="text-lg px-8 py-4">
+            <Button size="lg" variant="secondary">
               Join the Club
             </Button>
-            <Button size="lg" variant="outline" className="text-lg px-8 py-4 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            <Button size="lg" variant="outline" className="text-lg px-8 py-4 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary bg-white/10 backdrop-blur-sm">
               View Events
             </Button>
           </div>
diff --git a/src/components/MerchShop.tsx b/src/components/MerchShop.tsx
index 6e0cb35..52cb092 100644
--- a/src/components/MerchShop.tsx
+++ b/src/components/MerchShop.tsx
@@ -55,7 +55,7 @@ export function MerchShop() {
                 <p className="text-sm text-muted-foreground mb-3">{item.description}</p>
                 <div className="flex items-center justify-between">
                   <span className="text-lg font-bold">{item.price}</span>
-                  <Button size="sm" className="bg-primary text-primary-foreground hover:bg-primary/90">
+                  <Button size="sm">
                     Add to Cart
                   </Button>
                 </div>
@@ -65,7 +65,7 @@ export function MerchShop() {
         </div>
         
         <div className="text-center mt-12">
-          <Button size="lg" variant="outline" className="border-primary text-primary hover:bg-primary hover:text-primary-foreground">
+          <Button size="lg" variant="outline">
             View All Products
           </Button>
         </div>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 6511c38..d469a27 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -17,7 +17,7 @@ export function Navigation() {
           <a href="#contact" className="hover:text-primary transition-colors">Contact</a>
         </div>
         
-        <Button className="bg-primary text-primary-foreground hover:bg-primary/90">
+        <Button>
           Join Now
         </Button>
       </div>
diff --git a/src/components/Shop.tsx b/src/components/Shop.tsx
index 4b2a450..2d7848a 100644
--- a/src/components/Shop.tsx
+++ b/src/components/Shop.tsx
@@ -272,9 +272,13 @@ export function Shop() {
                     Sale
                   </Badge>
                 )}
-                <button className="absolute top-3 right-3 z-10 p-2 bg-white/80 hover:bg-white rounded-full transition-colors">
+                <Button 
+                  variant="ghost" 
+                  size="icon"
+                  className="absolute top-3 right-3 z-10 bg-white/80 hover:bg-white"
+                >
                   <Heart className="w-4 h-4" />
-                </button>
+                </Button>
                 <ImageWithFallback
                   src={product.image}
                   alt={product.name}
diff --git a/src/components/StravaIntegration.tsx b/src/components/StravaIntegration.tsx
index 6cb836b..b09cdcd 100644
--- a/src/components/StravaIntegration.tsx
+++ b/src/components/StravaIntegration.tsx
@@ -249,7 +249,7 @@ export function StravaIntegration() {
               <Button variant="secondary" size="lg" onClick={handleJoinClub}>
                 Join Strava Club
               </Button>
-              <Button variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+              <Button variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary bg-white/10 backdrop-blur-sm">
                 Learn More About Benefits
               </Button>
             </div>
diff --git a/src/components/UpcomingEvents.tsx b/src/components/UpcomingEvents.tsx
index a64dcfc..035a3d2 100644
--- a/src/components/UpcomingEvents.tsx
+++ b/src/components/UpcomingEvents.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
 import { Calendar, MapPin, Users } from "lucide-react";
 
@@ -70,9 +71,9 @@ export function UpcomingEvents() {
                     <span>{event.location}</span>
                   </div>
                 </div>
-                <button className="w-full mt-4 bg-primary text-primary-foreground py-2 rounded-md hover:bg-primary/90 transition-colors">
+                <Button className="w-full mt-4">
                   Join Event
-                </button>
+                </Button>
               </CardContent>
             </Card>
           ))}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 40ef7aa..7cc8aa6 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "./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",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all !cursor-pointer 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",
   {
     variants: {
       variant: {
@@ -50,6 +50,7 @@ function Button({
     <Comp
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
+      style={{ cursor: 'pointer' }}
       {...props}
     />
   );