diff --git a/backend/src/http/mod.rs b/backend/src/http/mod.rs
index 2c038e84..1d6ce007 100644
--- a/backend/src/http/mod.rs
+++ b/backend/src/http/mod.rs
@@ -1,3 +1,4 @@
+pub mod auth_handler;
 pub mod health;
 pub mod idempotency;
 pub mod idempotency_examples;
diff --git a/frontend/src/app/contact/ContactForm.tsx b/frontend/src/app/contact/ContactForm.tsx
index b760ac8c..c6d0f966 100644
--- a/frontend/src/app/contact/ContactForm.tsx
+++ b/frontend/src/app/contact/ContactForm.tsx
@@ -1,12 +1,19 @@
 "use client";
 
 import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { FormError } from "@/components/ui/FormError";
 import { motion } from "framer-motion";
 import { Send } from "lucide-react";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 export function ContactForm() {
   const [formData, setFormData] = useState({
@@ -17,6 +24,7 @@ export function ContactForm() {
   });
   const [formError, setFormError] = useState("");
   const [submitted, setSubmitted] = useState(false);
+  const prefersReducedMotion = useReducedMotion();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -49,14 +57,20 @@ export function ContactForm() {
           Send us a Message
         </CardTitle>
         <CardDescription>
-          Fill out the form below and we&apos;ll get back to you within 24 hours.
+          Fill out the form below and we&apos;ll get back to you within 24
+          hours.
         </CardDescription>
       </CardHeader>
       <CardContent>
         {submitted ? (
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
+            initial={
+              prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+            }
+            animate={
+              prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+            }
+            transition={prefersReducedMotion ? { duration: 0 } : undefined}
             className="text-center py-8"
           >
             <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-success-muted dark:bg-success-muted mb-4">
@@ -64,7 +78,8 @@ export function ContactForm() {
             </div>
             <h3 className="text-xl font-bold mb-2">Message Sent!</h3>
             <p className="text-muted-foreground">
-              Thank you for reaching out. We&apos;ll respond to your inquiry soon.
+              Thank you for reaching out. We&apos;ll respond to your inquiry
+              soon.
             </p>
           </motion.div>
         ) : (
diff --git a/frontend/src/app/contact/FAQSection.tsx b/frontend/src/app/contact/FAQSection.tsx
index 66d4a203..6337ed76 100644
--- a/frontend/src/app/contact/FAQSection.tsx
+++ b/frontend/src/app/contact/FAQSection.tsx
@@ -1,47 +1,63 @@
 "use client";
 
 import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/Card";
 import { motion, AnimatePresence } from "framer-motion";
 import { ChevronDown, ChevronUp, HelpCircle } from "lucide-react";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 const faqs = [
   {
     question: "How do I create an account?",
-    answer: "Simply click the 'Register' button on our homepage and fill in your email and desired password. You can also sign up using your Google or Discord account for faster registration.",
+    answer:
+      "Simply click the 'Register' button on our homepage and fill in your email and desired password. You can also sign up using your Google or Discord account for faster registration.",
   },
   {
     question: "How do I join a tournament?",
-    answer: "Navigate to the Tournaments page, browse available events, and click 'Join Tournament' on any event with open registration. You'll need to pay the entry fee (if any) to secure your spot.",
+    answer:
+      "Navigate to the Tournaments page, browse available events, and click 'Join Tournament' on any event with open registration. You'll need to pay the entry fee (if any) to secure your spot.",
   },
   {
     question: "How are match results verified?",
-    answer: "We use a combination of AI-powered anti-cheat systems and on-chain verification. All match results are recorded on the Stellar blockchain for complete transparency.",
+    answer:
+      "We use a combination of AI-powered anti-cheat systems and on-chain verification. All match results are recorded on the Stellar blockchain for complete transparency.",
   },
   {
     question: "How do I withdraw my winnings?",
-    answer: "Go to your Wallet page, click 'Withdraw', and enter your Stellar wallet address or select a supported payment method. Withdrawals are processed instantly thanks to Stellar's fast transaction finality.",
+    answer:
+      "Go to your Wallet page, click 'Withdraw', and enter your Stellar wallet address or select a supported payment method. Withdrawals are processed instantly thanks to Stellar's fast transaction finality.",
   },
   {
     question: "What games are supported?",
-    answer: "We currently support major titles including Counter-Strike 2, Valorant, League of Legends, Dota 2, Fortnite, Overwatch 2, and many more. We're constantly adding new games based on community demand.",
+    answer:
+      "We currently support major titles including Counter-Strike 2, Valorant, League of Legends, Dota 2, Fortnite, Overwatch 2, and many more. We're constantly adding new games based on community demand.",
   },
   {
     question: "How do I report a cheater?",
-    answer: "If you suspect another player of cheating, you can report them directly from the match results page or contact our support team with evidence. We take all reports seriously and investigate promptly.",
+    answer:
+      "If you suspect another player of cheating, you can report them directly from the match results page or contact our support team with evidence. We take all reports seriously and investigate promptly.",
   },
   {
     question: "Is ArenaX available in my country?",
-    answer: "ArenaX is available in over 150 countries worldwide. Some features may be restricted based on local regulations. Check our Terms of Service for more information about regional availability.",
+    answer:
+      "ArenaX is available in over 150 countries worldwide. Some features may be restricted based on local regulations. Check our Terms of Service for more information about regional availability.",
   },
   {
     question: "How can I partner with ArenaX?",
-    answer: "We're always looking for brand partnerships, tournament organizers, and content creators. Contact our partnerships team through this form by selecting 'Partnership' as the category.",
+    answer:
+      "We're always looking for brand partnerships, tournament organizers, and content creators. Contact our partnerships team through this form by selecting 'Partnership' as the category.",
   },
 ];
 
 export function FAQSection() {
   const [openFaq, setOpenFaq] = useState<number | null>(null);
+  const prefersReducedMotion = useReducedMotion();
 
   return (
     <Card>
@@ -56,10 +72,7 @@ export function FAQSection() {
       </CardHeader>
       <CardContent className="space-y-2">
         {faqs.map((faq, index) => (
-          <div
-            key={index}
-            className="border rounded-lg overflow-hidden"
-          >
+          <div key={index} className="border rounded-lg overflow-hidden">
             <button
               onClick={() => setOpenFaq(openFaq === index ? null : index)}
               className="flex items-center justify-between w-full p-4 text-left hover:bg-muted/50 transition-colors"
@@ -74,10 +87,24 @@ export function FAQSection() {
             <AnimatePresence>
               {openFaq === index && (
                 <motion.div
-                  initial={{ height: 0, opacity: 0 }}
-                  animate={{ height: "auto", opacity: 1 }}
-                  exit={{ height: 0, opacity: 0 }}
-                  transition={{ duration: 0.2 }}
+                  initial={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: 0, opacity: 0 }
+                  }
+                  animate={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: "auto", opacity: 1 }
+                  }
+                  exit={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: 0, opacity: 0 }
+                  }
+                  transition={
+                    prefersReducedMotion ? { duration: 0 } : { duration: 0.2 }
+                  }
                 >
                   <div className="px-4 pb-4 text-sm text-muted-foreground">
                     {faq.answer}
diff --git a/frontend/src/app/tournaments/create/page.tsx b/frontend/src/app/tournaments/create/page.tsx
index cd12ae6d..6337ed76 100644
--- a/frontend/src/app/tournaments/create/page.tsx
+++ b/frontend/src/app/tournaments/create/page.tsx
@@ -1,795 +1,120 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
-import { Button } from "@/components/ui/Button";
-import { Input } from "@/components/ui/Input";
-import { FormError } from "@/components/ui/FormError";
-import { motion, AnimatePresence } from "framer-motion";
-import { 
-  ChevronRight, 
-  ChevronLeft, 
-  Check, 
-  Save, 
-  Eye, 
-  Share2, 
-  Copy, 
-  Twitter, 
-  Facebook,
-  Trophy,
-  Calendar,
-  Users,
-  DollarSign,
-  Gamepad2
-} from "lucide-react";
+import { useState } from "react";
 import {
-  CreateCreateTournamentFormData,
-  CreateTournamentWizardStep,
-  TournamentType,
-  TournamentVisibility,
-} from "@/types/tournament";
-
-const initialFormData: CreateCreateTournamentFormData = {
-  name: "",
-  gameType: "",
-  description: "",
-  tournamentType: "single_elimination",
-  matchFormat: "bo3",
-  rules: "",
-  entryFee: 0,
-  prizePool: 0,
-  prizeDistribution: "",
-  visibility: "public",
-  maxParticipants: 16,
-  registrationOpenDate: "",
-  registrationCloseDate: "",
-  startDate: "",
-  endDate: "",
-};
-
-const gameTypes = [
-  "League of Legends",
-  "Valorant",
-  "Counter-Strike 2",
-  "Dota 2",
-  "Fortnite",
-  "Rocket League",
-  "Apex Legends",
-  "Overwatch 2",
-  "Street Fighter 6",
-  "Super Smash Bros",
-  "Other",
-];
-
-const matchFormats = [
-  { value: "bo1", label: "Best of 1" },
-  { value: "bo3", label: "Best of 3" },
-  { value: "bo5", label: "Best of 5" },
-  { value: "bo7", label: "Best of 7" },
-];
-
-const tournamentTypes: { value: TournamentType; label: string; description: string }[] = [
-  { value: "single_elimination", label: "Single Elimination", description: "Lose once and you're out" },
-  { value: "double_elimination", label: "Double Elimination", description: "Two chances before elimination" },
-  { value: "round_robin", label: "Round Robin", description: "Everyone plays everyone" },
-  { value: "swiss", label: "Swiss System", description: "Pairings based on performance" },
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/Card";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronDown, ChevronUp, HelpCircle } from "lucide-react";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
+
+const faqs = [
+  {
+    question: "How do I create an account?",
+    answer:
+      "Simply click the 'Register' button on our homepage and fill in your email and desired password. You can also sign up using your Google or Discord account for faster registration.",
+  },
+  {
+    question: "How do I join a tournament?",
+    answer:
+      "Navigate to the Tournaments page, browse available events, and click 'Join Tournament' on any event with open registration. You'll need to pay the entry fee (if any) to secure your spot.",
+  },
+  {
+    question: "How are match results verified?",
+    answer:
+      "We use a combination of AI-powered anti-cheat systems and on-chain verification. All match results are recorded on the Stellar blockchain for complete transparency.",
+  },
+  {
+    question: "How do I withdraw my winnings?",
+    answer:
+      "Go to your Wallet page, click 'Withdraw', and enter your Stellar wallet address or select a supported payment method. Withdrawals are processed instantly thanks to Stellar's fast transaction finality.",
+  },
+  {
+    question: "What games are supported?",
+    answer:
+      "We currently support major titles including Counter-Strike 2, Valorant, League of Legends, Dota 2, Fortnite, Overwatch 2, and many more. We're constantly adding new games based on community demand.",
+  },
+  {
+    question: "How do I report a cheater?",
+    answer:
+      "If you suspect another player of cheating, you can report them directly from the match results page or contact our support team with evidence. We take all reports seriously and investigate promptly.",
+  },
+  {
+    question: "Is ArenaX available in my country?",
+    answer:
+      "ArenaX is available in over 150 countries worldwide. Some features may be restricted based on local regulations. Check our Terms of Service for more information about regional availability.",
+  },
+  {
+    question: "How can I partner with ArenaX?",
+    answer:
+      "We're always looking for brand partnerships, tournament organizers, and content creators. Contact our partnerships team through this form by selecting 'Partnership' as the category.",
+  },
 ];
 
-export default function CreateTournamentPage() {
-  const [currentStep, setCurrentStep] = useState<CreateTournamentWizardStep>(1);
-  const [formData, setFormData] = useState<CreateTournamentFormData>(initialFormData);
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [isSaving, setIsSaving] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [draftSaved, setDraftSaved] = useState(false);
-  const [createdTournamentId, setCreatedTournamentId] = useState<string>("");
-
-  // Load draft from localStorage on mount
-  useEffect(() => {
-    const savedDraft = localStorage.getItem("tournament_draft");
-    if (savedDraft) {
-      try {
-        const parsed = JSON.parse(savedDraft);
-        setFormData(parsed);
-        setDraftSaved(true);
-      } catch (e) {
-        console.error("Failed to load draft:", e);
-      }
-    }
-  }, []);
-
-  // Save draft to localStorage
-  const saveDraft = useCallback(() => {
-    setIsSaving(true);
-    localStorage.setItem("tournament_draft", JSON.stringify(formData));
-    setTimeout(() => {
-      setIsSaving(false);
-      setDraftSaved(true);
-      setTimeout(() => setDraftSaved(false), 2000);
-    }, 500);
-  }, [formData]);
-
-  // Auto-save draft on form changes
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      saveDraft();
-    }, 1000);
-    return () => clearTimeout(timer);
-  }, [formData, saveDraft]);
-
-  const validateStep = (step: CreateTournamentWizardStep): boolean => {
-    const newErrors: Record<string, string> = {};
-
-    if (step === 1) {
-      if (!formData.name.trim()) newErrors.name = "Tournament name is required";
-      if (!formData.gameType) newErrors.gameType = "Game type is required";
-      if (!formData.description.trim()) newErrors.description = "Description is required";
-    }
-
-    if (step === 2) {
-      if (!formData.matchFormat) newErrors.matchFormat = "Match format is required";
-      if (!formData.rules.trim()) newErrors.rules = "Rules are required";
-    }
-
-    if (step === 3) {
-      if (formData.entryFee < 0) newErrors.entryFee = "Entry fee cannot be negative";
-      if (formData.prizePool < 0) newErrors.prizePool = "Prize pool cannot be negative";
-      if (formData.prizePool > 0 && !formData.prizeDistribution.trim()) {
-        newErrors.prizeDistribution = "Prize distribution is required when prize pool is set";
-      }
-    }
-
-    if (step === 4) {
-      if (!formData.registrationOpenDate) newErrors.registrationOpenDate = "Registration open date is required";
-      if (!formData.registrationCloseDate) newErrors.registrationCloseDate = "Registration close date is required";
-      if (!formData.startDate) newErrors.startDate = "Start date is required";
-      if (formData.maxParticipants < 2) newErrors.maxParticipants = "Minimum 2 participants required";
-      
-      if (formData.registrationOpenDate && formData.registrationCloseDate) {
-        if (new Date(formData.registrationOpenDate) >= new Date(formData.registrationCloseDate)) {
-          newErrors.registrationCloseDate = "Registration close date must be after open date";
-        }
-      }
-      
-      if (formData.startDate && formData.registrationCloseDate) {
-        if (new Date(formData.registrationCloseDate) > new Date(formData.startDate)) {
-          newErrors.startDate = "Start date must be after registration close date";
-        }
-      }
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleNext = () => {
-    if (validateStep(currentStep)) {
-      setCurrentStep((prev) => (prev === 4 ? "preview" : (prev as CreateTournamentWizardStep) + 1) as CreateTournamentWizardStep);
-    }
-  };
-
-  const handleBack = () => {
-    setCurrentStep((prev) => (prev === "preview" ? 4 : (prev as CreateTournamentWizardStep) - 1) as CreateTournamentWizardStep);
-  };
-
-  const handleFieldChange = (field: keyof CreateTournamentFormData, value: string | number) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    // Clear error for this field
-    if (errors[field]) {
-      setErrors((prev) => {
-        const newErrors = { ...prev };
-        delete newErrors[field];
-        return newErrors;
-      });
-    }
-  };
-
-  const handleSubmit = async () => {
-    if (!validateStep(4)) return;
-    
-    setIsSubmitting(true);
-    
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-    
-    // Generate mock tournament ID
-    const tournamentId = `t_${Date.now()}`;
-    setCreatedTournamentId(tournamentId);
-    
-    // Clear draft
-    localStorage.removeItem("tournament_draft");
-    
-    setCurrentStep("success");
-    setIsSubmitting(false);
-  };
-
-  const handleCopyLink = () => {
-    const link = `${window.location.origin}/tournaments/${createdTournamentId}`;
-    navigator.clipboard.writeText(link);
-  };
-
-  const steps = [
-    { number: 1, title: "Basic Info", icon: Gamepad2 },
-    { number: 2, title: "Format & Rules", icon: Trophy },
-    { number: 3, title: "Entry & Prizes", icon: DollarSign },
-    { number: 4, title: "Schedule", icon: Calendar },
-  ];
+export function FAQSection() {
+  const [openFaq, setOpenFaq] = useState<number | null>(null);
+  const prefersReducedMotion = useReducedMotion();
 
   return (
-    <div className="min-h-screen px-4 py-8 bg-background">
-      <div className="max-w-4xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-8">
-          <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-2">
-            Create Tournament
-          </h1>
-          <p className="text-muted-foreground">
-            Set up your tournament in a few simple steps
-          </p>
-        </div>
-
-        {/* Progress Indicator */}
-        {currentStep !== "success" && (
-          <div className="mb-8">
-            <div className="flex items-center justify-between mb-4">
-              {steps.map((step, index) => {
-                const Icon = step.icon;
-                const isActive = currentStep === step.number;
-                const isCompleted = (typeof currentStep === "number" && currentStep > step.number) || currentStep === "preview";
-                
-                return (
-                  <div key={step.number} className="flex items-center flex-1">
-                    <div className="flex flex-col items-center flex-1">
-                      <div
-                        className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all ${
-                          isActive
-                            ? "border-blue-600 bg-primary/90 text-white"
-                            : isCompleted
-                            ? "border-green-600 bg-success/90 text-white"
-                            : "border-border bg-background text-muted-foreground"
-                        }`}
-                      >
-                        {isCompleted ? (
-                          <Check className="h-5 w-5" />
-                        ) : (
-                          <Icon className="h-5 w-5" />
-                        )}
-                      </div>
-                      <span
-                        className={`text-xs mt-2 font-medium ${
-                          isActive ? "text-foreground" : "text-muted-foreground"
-                        }`}
-                      >
-                        {step.title}
-                      </span>
-                    </div>
-                    {index < steps.length - 1 && (
-                      <div
-                        className={`flex-1 h-0.5 mx-2 transition-all ${
-                          isCompleted ? "bg-success/90" : "bg-gray-300"
-                        }`}
-                      />
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-            
-            {/* Draft saved indicator */}
-            <div className="flex justify-center">
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <Save className="h-4 w-4" />
-                <span>Draft {draftSaved ? "saved" : "auto-saving..."}</span>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Form Content */}
-        <AnimatePresence mode="wait">
-          {currentStep === 1 && (
-            <motion.div
-              key="step1"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Card>
-                <CardHeader>
-                  <CardTitle>Basic Information</CardTitle>
-                  <CardDescription>
-                    Tell us about your tournament
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <div className="space-y-2">
-                    <label htmlFor="name" className="text-sm font-medium">
-                      Tournament Name <span className="text-destructive">*</span>
-                    </label>
-                    <Input
-                      id="name"
-                      placeholder="e.g., Summer Championship 2024"
-                      value={formData.name}
-                      onChange={(e) => handleFieldChange("name", e.target.value)}
-                      error={!!errors.name}
-                    />
-                    {errors.name && <p className="text-sm text-destructive">{errors.name}</p>}
-                  </div>
-
-                  <div className="space-y-2">
-                    <label htmlFor="gameType" className="text-sm font-medium">
-                      Game <span className="text-destructive">*</span>
-                    </label>
-                    <select
-                      id="gameType"
-                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                      value={formData.gameType}
-                      onChange={(e) => handleFieldChange("gameType", e.target.value)}
-                    >
-                      <option value="">Select a game</option>
-                      {gameTypes.map((game) => (
-                        <option key={game} value={game}>
-                          {game}
-                        </option>
-                      ))}
-                    </select>
-                    {errors.gameType && <p className="text-sm text-destructive">{errors.gameType}</p>}
-                  </div>
-
-                  <div className="space-y-2">
-                    <label htmlFor="description" className="text-sm font-medium">
-                      Description <span className="text-destructive">*</span>
-                    </label>
-                    <textarea
-                      id="description"
-                      className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 placeholder:text-muted-foreground"
-                      placeholder="Describe your tournament, its format, and what makes it special..."
-                      value={formData.description}
-                      onChange={(e) => handleFieldChange("description", e.target.value)}
-                    />
-                    {errors.description && <p className="text-sm text-destructive">{errors.description}</p>}
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          )}
-
-          {currentStep === 2 && (
-            <motion.div
-              key="step2"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Card>
-                <CardHeader>
-                  <CardTitle>Format & Rules</CardTitle>
-                  <CardDescription>
-                    Define how your tournament will be played
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <div className="space-y-2">
-                    <label htmlFor="tournamentType" className="text-sm font-medium">
-                      Bracket Type
-                    </label>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                      {tournamentTypes.map((type) => (
-                        <button
-                          key={type.value}
-                          type="button"
-                          onClick={() => handleFieldChange("tournamentType", type.value)}
-                          className={`p-4 rounded-lg border-2 text-left transition-all ${
-                            formData.tournamentType === type.value
-                              ? "border-blue-600 bg-info-muted dark:bg-info-muted/20"
-                              : "border-border hover:border-gray-400"
-                          }`}
-                        >
-                          <div className="font-medium text-foreground">{type.label}</div>
-                          <div className="text-sm text-muted-foreground">{type.description}</div>
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <label htmlFor="matchFormat" className="text-sm font-medium">
-                      Match Format <span className="text-destructive">*</span>
-                    </label>
-                    <select
-                      id="matchFormat"
-                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                      value={formData.matchFormat}
-                      onChange={(e) => handleFieldChange("matchFormat", e.target.value)}
-                    >
-                      {matchFormats.map((format) => (
-                        <option key={format.value} value={format.value}>
-                          {format.label}
-                        </option>
-                      ))}
-                    </select>
-                    {errors.matchFormat && <p className="text-sm text-destructive">{errors.matchFormat}</p>}
-                  </div>
-
-                  <div className="space-y-2">
-                    <label htmlFor="rules" className="text-sm font-medium">
-                      Tournament Rules <span className="text-destructive">*</span>
-                    </label>
-                    <textarea
-                      id="rules"
-                      className="flex min-h-[150px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 placeholder:text-muted-foreground"
-                      placeholder="List the rules, restrictions, and guidelines for participants..."
-                      value={formData.rules}
-                      onChange={(e) => handleFieldChange("rules", e.target.value)}
-                    />
-                    {errors.rules && <p className="text-sm text-destructive">{errors.rules}</p>}
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          )}
-
-          {currentStep === 3 && (
-            <motion.div
-              key="step3"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <HelpCircle className="h-5 w-5" />
+          Frequently Asked Questions
+        </CardTitle>
+        <CardDescription>
+          Find quick answers to common questions about ArenaX.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {faqs.map((faq, index) => (
+          <div key={index} className="border rounded-lg overflow-hidden">
+            <button
+              onClick={() => setOpenFaq(openFaq === index ? null : index)}
+              className="flex items-center justify-between w-full p-4 text-left hover:bg-muted/50 transition-colors"
             >
-              <Card>
-                <CardHeader>
-                  <CardTitle>Entry & Prizes</CardTitle>
-                  <CardDescription>
-                    Set entry fees and prize distribution
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <div className="space-y-2">
-                    <label htmlFor="entryFee" className="text-sm font-medium">
-                      Entry Fee (USD)
-                    </label>
-                    <div className="relative">
-                      <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                      <Input
-                        id="entryFee"
-                        type="number"
-                        min="0"
-                        step="0.01"
-                        placeholder="0.00"
-                        className="pl-10"
-                        value={formData.entryFee || ""}
-                        onChange={(e) => handleFieldChange("entryFee", parseFloat(e.target.value) || 0)}
-                        error={!!errors.entryFee}
-                      />
-                    </div>
-                    {errors.entryFee && <p className="text-sm text-destructive">{errors.entryFee}</p>}
-                    <p className="text-xs text-muted-foreground">Set to 0 for free tournaments</p>
-                  </div>
-
-                  <div className="space-y-2">
-                    <label htmlFor="prizePool" className="text-sm font-medium">
-                      Total Prize Pool (USD)
-                    </label>
-                    <div className="relative">
-                      <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                      <Input
-                        id="prizePool"
-                        type="number"
-                        min="0"
-                        step="0.01"
-                        placeholder="0.00"
-                        className="pl-10"
-                        value={formData.prizePool || ""}
-                        onChange={(e) => handleFieldChange("prizePool", parseFloat(e.target.value) || 0)}
-                        error={!!errors.prizePool}
-                      />
-                    </div>
-                    {errors.prizePool && <p className="text-sm text-destructive">{errors.prizePool}</p>}
-                  </div>
-
-                  <div className="space-y-2">
-                    <label htmlFor="prizeDistribution" className="text-sm font-medium">
-                      Prize Distribution
-                      {formData.prizePool > 0 && <span className="text-destructive">*</span>}
-                    </label>
-                    <textarea
-                      id="prizeDistribution"
-                      className="flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 placeholder:text-muted-foreground"
-                      placeholder="e.g., 1st Place: 50%, 2nd Place: 30%, 3rd Place: 20%"
-                      value={formData.prizeDistribution}
-                      onChange={(e) => handleFieldChange("prizeDistribution", e.target.value)}
-                    />
-                    {errors.prizeDistribution && <p className="text-sm text-destructive">{errors.prizeDistribution}</p>}
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          )}
-
-          {currentStep === 4 && (
-            <motion.div
-              key="step4"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Card>
-                <CardHeader>
-                  <CardTitle>Schedule & Registration</CardTitle>
-                  <CardDescription>
-                    Set dates and participant limits
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <div className="space-y-2">
-                    <label htmlFor="visibility" className="text-sm font-medium">
-                      Tournament Visibility
-                    </label>
-                    <select
-                      id="visibility"
-                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                      value={formData.visibility}
-                      onChange={(e) => handleFieldChange("visibility", e.target.value as TournamentVisibility)}
-                    >
-                      <option value="public">Public - Anyone can see and join</option>
-                      <option value="private">Private - Invite only</option>
-                      <option value="invite_only">Invite Only - Require approval</option>
-                    </select>
-                  </div>
-
-                  <div className="space-y-2">
-                    <label htmlFor="maxParticipants" className="text-sm font-medium">
-                      Maximum Participants <span className="text-destructive">*</span>
-                    </label>
-                    <div className="relative">
-                      <Users className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                      <Input
-                        id="maxParticipants"
-                        type="number"
-                        min="2"
-                        placeholder="16"
-                        className="pl-10"
-                        value={formData.maxParticipants || ""}
-                        onChange={(e) => handleFieldChange("maxParticipants", parseInt(e.target.value) || 0)}
-                        error={!!errors.maxParticipants}
-                      />
-                    </div>
-                    {errors.maxParticipants && <p className="text-sm text-destructive">{errors.maxParticipants}</p>}
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <label htmlFor="registrationOpenDate" className="text-sm font-medium">
-                        Registration Opens <span className="text-destructive">*</span>
-                      </label>
-                      <Input
-                        id="registrationOpenDate"
-                        type="datetime-local"
-                        value={formData.registrationOpenDate}
-                        onChange={(e) => handleFieldChange("registrationOpenDate", e.target.value)}
-                        error={!!errors.registrationOpenDate}
-                      />
-                      {errors.registrationOpenDate && <p className="text-sm text-destructive">{errors.registrationOpenDate}</p>}
-                    </div>
-
-                    <div className="space-y-2">
-                      <label htmlFor="registrationCloseDate" className="text-sm font-medium">
-                        Registration Closes <span className="text-destructive">*</span>
-                      </label>
-                      <Input
-                        id="registrationCloseDate"
-                        type="datetime-local"
-                        value={formData.registrationCloseDate}
-                        onChange={(e) => handleFieldChange("registrationCloseDate", e.target.value)}
-                        error={!!errors.registrationCloseDate}
-                      />
-                      {errors.registrationCloseDate && <p className="text-sm text-destructive">{errors.registrationCloseDate}</p>}
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <label htmlFor="startDate" className="text-sm font-medium">
-                        Tournament Start <span className="text-destructive">*</span>
-                      </label>
-                      <Input
-                        id="startDate"
-                        type="datetime-local"
-                        value={formData.startDate}
-                        onChange={(e) => handleFieldChange("startDate", e.target.value)}
-                        error={!!errors.startDate}
-                      />
-                      {errors.startDate && <p className="text-sm text-destructive">{errors.startDate}</p>}
-                    </div>
-
-                    <div className="space-y-2">
-                      <label htmlFor="endDate" className="text-sm font-medium">
-                        Tournament End (Optional)
-                      </label>
-                      <Input
-                        id="endDate"
-                        type="datetime-local"
-                        value={formData.endDate}
-                        onChange={(e) => handleFieldChange("endDate", e.target.value)}
-                      />
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          )}
-
-          {currentStep === "preview" && (
-            <motion.div
-              key="preview"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <Eye className="h-5 w-5" />
-                    Preview Tournament
-                  </CardTitle>
-                  <CardDescription>
-                    Review all details before publishing
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <div className="space-y-4">
-                    <div className="flex items-start gap-4 p-4 rounded-lg bg-muted/40">
-                      <Gamepad2 className="h-5 w-5 text-muted-foreground mt-0.5" />
-                      <div className="flex-1">
-                        <h3 className="font-semibold text-foreground">{formData.name}</h3>
-                        <p className="text-sm text-muted-foreground">{formData.gameType}</p>
-                        <p className="text-sm mt-2">{formData.description}</p>
-                      </div>
-                    </div>
-
-                    <div className="flex items-start gap-4 p-4 rounded-lg bg-muted/40">
-                      <Trophy className="h-5 w-5 text-muted-foreground mt-0.5" />
-                      <div className="flex-1">
-                        <h3 className="font-semibold text-foreground">Format</h3>
-                        <p className="text-sm text-muted-foreground">
-                          {tournamentTypes.find((t) => t.value === formData.tournamentType)?.label} •{" "}
-                          {matchFormats.find((f) => f.value === formData.matchFormat)?.label}
-                        </p>
-                        <p className="text-sm mt-2 whitespace-pre-wrap">{formData.rules}</p>
-                      </div>
-                    </div>
-
-                    <div className="flex items-start gap-4 p-4 rounded-lg bg-muted/40">
-                      <DollarSign className="h-5 w-5 text-muted-foreground mt-0.5" />
-                      <div className="flex-1">
-                        <h3 className="font-semibold text-foreground">Entry & Prizes</h3>
-                        <p className="text-sm text-muted-foreground">
-                          Entry: {formData.entryFee === 0 ? "Free" : `$${formData.entryFee.toFixed(2)}`} • Prize Pool: $
-                          {formData.prizePool.toFixed(2)}
-                        </p>
-                        {formData.prizeDistribution && (
-                          <p className="text-sm mt-2 whitespace-pre-wrap">{formData.prizeDistribution}</p>
-                        )}
-                      </div>
-                    </div>
-
-                    <div className="flex items-start gap-4 p-4 rounded-lg bg-muted/40">
-                      <Calendar className="h-5 w-5 text-muted-foreground mt-0.5" />
-                      <div className="flex-1">
-                        <h3 className="font-semibold text-foreground">Schedule</h3>
-                        <p className="text-sm text-muted-foreground">
-                          Max Participants: {formData.maxParticipants} • Visibility: {formData.visibility}
-                        </p>
-                        <div className="text-sm mt-2 space-y-1">
-                          <p>Registration: {new Date(formData.registrationOpenDate).toLocaleString()} - {new Date(formData.registrationCloseDate).toLocaleString()}</p>
-                          <p>Start: {new Date(formData.startDate).toLocaleString()}</p>
-                          {formData.endDate && <p>End: {new Date(formData.endDate).toLocaleString()}</p>}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          )}
-
-          {currentStep === "success" && (
-            <motion.div
-              key="success"
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Card>
-                <CardContent className="pt-12 pb-12 text-center">
-                  <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-success-muted dark:bg-success-muted mb-6">
-                    <Check className="h-10 w-10 text-success dark:text-success/80" />
-                  </div>
-                  <h2 className="text-2xl font-bold text-foreground mb-2">
-                    Tournament Created!
-                  </h2>
-                  <p className="text-muted-foreground mb-8">
-                    Your tournament &quot;{formData.name}&quot; is now live and ready for participants.
-                  </p>
-
-                  <div className="space-y-4 max-w-md mx-auto">
-                    <div className="flex gap-2">
-                      <Input
-                        value={`${window.location.origin}/tournaments/${createdTournamentId}`}
-                        readOnly
-                        className="flex-1"
-                      />
-                      <Button onClick={handleCopyLink} variant="outline" size="md">
-                        <Copy className="h-4 w-4" />
-                      </Button>
-                    </div>
-
-                    <div className="flex gap-3 justify-center">
-                      <Button variant="outline" className="flex-1 gap-2">
-                        <Twitter className="h-4 w-4" />
-                        Share on Twitter
-                      </Button>
-                      <Button variant="outline" className="flex-1 gap-2">
-                        <Facebook className="h-4 w-4" />
-                        Share on Facebook
-                      </Button>
-                    </div>
-
-                    <Button className="w-full gap-2" onClick={() => window.location.href = `/tournaments/${createdTournamentId}`}>
-                      <Eye className="h-4 w-4" />
-                      View Tournament
-                    </Button>
-
-                    <Button variant="ghost" className="w-full" onClick={() => window.location.href = "/tournaments"}>
-                      Back to Tournaments
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        {/* Navigation Buttons */}
-        {currentStep !== "success" && (
-          <div className="flex justify-between mt-8">
-            <Button
-              variant="outline"
-              onClick={currentStep === 1 ? () => window.location.href = "/tournaments" : handleBack}
-              disabled={currentStep === 1}
-            >
-              <ChevronLeft className="h-4 w-4 mr-2" />
-              {currentStep === 1 ? "Cancel" : "Back"}
-            </Button>
-
-            {currentStep === "preview" ? (
-              <Button onClick={handleSubmit} disabled={isSubmitting} className="gap-2">
-                {isSubmitting ? (
-                  <>
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-                    Creating...
-                  </>
-                ) : (
-                  <>
-                    <Check className="h-4 w-4" />
-                    Publish Tournament
-                  </>
-                )}
-              </Button>
-            ) : (
-              <Button onClick={handleNext} className="gap-2">
-                {currentStep === 4 ? "Preview" : "Next"}
-                <ChevronRight className="h-4 w-4" />
-              </Button>
-            )}
+              <span className="font-medium text-sm">{faq.question}</span>
+              {openFaq === index ? (
+                <ChevronUp className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+              )}
+            </button>
+            <AnimatePresence>
+              {openFaq === index && (
+                <motion.div
+                  initial={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: 0, opacity: 0 }
+                  }
+                  animate={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: "auto", opacity: 1 }
+                  }
+                  exit={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: 0, opacity: 0 }
+                  }
+                  transition={
+                    prefersReducedMotion ? { duration: 0 } : { duration: 0.2 }
+                  }
+                >
+                  <div className="px-4 pb-4 text-sm text-muted-foreground">
+                    {faq.answer}
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
           </div>
-        )}
-      </div>
-    </div>
+        ))}
+      </CardContent>
+    </Card>
   );
 }
diff --git a/frontend/src/components/landing/ActiveTournamentsSection.tsx b/frontend/src/components/landing/ActiveTournamentsSection.tsx
index 5872e7f1..6337ed76 100644
--- a/frontend/src/components/landing/ActiveTournamentsSection.tsx
+++ b/frontend/src/components/landing/ActiveTournamentsSection.tsx
@@ -1,82 +1,120 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { motion } from "framer-motion";
-import Link from "next/link";
-import { TournamentCard } from "@/components/tournaments/TournamentCard";
-import { TournamentCardSkeleton } from "@/components/tournaments/TournamentCardSkeleton";
-import { Button } from "@/components/ui/Button";
-import { mockTournaments } from "@/data/mockTournaments";
-import { ArrowRight } from "lucide-react";
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/Card";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronDown, ChevronUp, HelpCircle } from "lucide-react";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
-// Filter for active/upcoming tournaments
-const activeTournaments = mockTournaments
-  .filter((t) => t.status === "registration_open" || t.status === "in_progress")
-  .slice(0, 3);
+const faqs = [
+  {
+    question: "How do I create an account?",
+    answer:
+      "Simply click the 'Register' button on our homepage and fill in your email and desired password. You can also sign up using your Google or Discord account for faster registration.",
+  },
+  {
+    question: "How do I join a tournament?",
+    answer:
+      "Navigate to the Tournaments page, browse available events, and click 'Join Tournament' on any event with open registration. You'll need to pay the entry fee (if any) to secure your spot.",
+  },
+  {
+    question: "How are match results verified?",
+    answer:
+      "We use a combination of AI-powered anti-cheat systems and on-chain verification. All match results are recorded on the Stellar blockchain for complete transparency.",
+  },
+  {
+    question: "How do I withdraw my winnings?",
+    answer:
+      "Go to your Wallet page, click 'Withdraw', and enter your Stellar wallet address or select a supported payment method. Withdrawals are processed instantly thanks to Stellar's fast transaction finality.",
+  },
+  {
+    question: "What games are supported?",
+    answer:
+      "We currently support major titles including Counter-Strike 2, Valorant, League of Legends, Dota 2, Fortnite, Overwatch 2, and many more. We're constantly adding new games based on community demand.",
+  },
+  {
+    question: "How do I report a cheater?",
+    answer:
+      "If you suspect another player of cheating, you can report them directly from the match results page or contact our support team with evidence. We take all reports seriously and investigate promptly.",
+  },
+  {
+    question: "Is ArenaX available in my country?",
+    answer:
+      "ArenaX is available in over 150 countries worldwide. Some features may be restricted based on local regulations. Check our Terms of Service for more information about regional availability.",
+  },
+  {
+    question: "How can I partner with ArenaX?",
+    answer:
+      "We're always looking for brand partnerships, tournament organizers, and content creators. Contact our partnerships team through this form by selecting 'Partnership' as the category.",
+  },
+];
 
-export function ActiveTournamentsSection() {
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    // Simulate data fetching delay
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 1500);
-
-    return () => clearTimeout(timer);
-  }, []);
+export function FAQSection() {
+  const [openFaq, setOpenFaq] = useState<number | null>(null);
+  const prefersReducedMotion = useReducedMotion();
 
   return (
-    <section className="container py-8 md:py-12 lg:py-16">
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5 }}
-        className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center"
-      >
-        <h2 className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
-          Active <span className="text-primary">Tournaments</span>
-        </h2>
-        <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
-          Join live tournaments and compete for real prizes. New events starting daily.
-        </p>
-      </motion.div>
-
-      <div className="mx-auto grid justify-center gap-6 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3 mt-8">
-        {isLoading ? (
-          Array.from({ length: 3 }).map((_, index) => (
-            <TournamentCardSkeleton key={index} />
-          ))
-        ) : (
-          activeTournaments.map((tournament, index) => (
-            <motion.div
-              key={tournament.id}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <HelpCircle className="h-5 w-5" />
+          Frequently Asked Questions
+        </CardTitle>
+        <CardDescription>
+          Find quick answers to common questions about ArenaX.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {faqs.map((faq, index) => (
+          <div key={index} className="border rounded-lg overflow-hidden">
+            <button
+              onClick={() => setOpenFaq(openFaq === index ? null : index)}
+              className="flex items-center justify-between w-full p-4 text-left hover:bg-muted/50 transition-colors"
             >
-              <TournamentCard tournament={tournament} />
-            </motion.div>
-          ))
-        )}
-      </div>
-
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5, delay: 0.3 }}
-        className="flex justify-center mt-8"
-      >
-        <Link href="/tournaments">
-          <Button variant="outline" size="lg" className="gap-2">
-            View All Tournaments
-            <ArrowRight className="h-4 w-4" />
-          </Button>
-        </Link>
-      </motion.div>
-    </section>
+              <span className="font-medium text-sm">{faq.question}</span>
+              {openFaq === index ? (
+                <ChevronUp className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+              )}
+            </button>
+            <AnimatePresence>
+              {openFaq === index && (
+                <motion.div
+                  initial={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: 0, opacity: 0 }
+                  }
+                  animate={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: "auto", opacity: 1 }
+                  }
+                  exit={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: 0, opacity: 0 }
+                  }
+                  transition={
+                    prefersReducedMotion ? { duration: 0 } : { duration: 0.2 }
+                  }
+                >
+                  <div className="px-4 pb-4 text-sm text-muted-foreground">
+                    {faq.answer}
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
   );
 }
diff --git a/frontend/src/components/landing/HeroSection.tsx b/frontend/src/components/landing/HeroSection.tsx
index 07a7f927..efe7199b 100644
--- a/frontend/src/components/landing/HeroSection.tsx
+++ b/frontend/src/components/landing/HeroSection.tsx
@@ -3,32 +3,50 @@
 import { Button } from "@/components/ui/Button";
 import Link from "next/link";
 import { motion } from "framer-motion";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 export function HeroSection() {
+  const prefersReducedMotion = useReducedMotion();
+
+  const motionProps = prefersReducedMotion
+    ? {
+        initial: { opacity: 1 },
+        animate: { opacity: 1 },
+        transition: { duration: 0 },
+      }
+    : {};
+
   return (
     <section className="relative overflow-hidden bg-background pb-16 pt-20 md:pb-32 md:pt-32 lg:pb-40 lg:pt-40">
       <div className="container relative z-10 flex max-w-[64rem] flex-col items-center gap-4 text-center">
         <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          {...motionProps}
+          initial={prefersReducedMotion ? undefined : { opacity: 0, y: 20 }}
+          animate={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
+          transition={prefersReducedMotion ? undefined : { duration: 0.5 }}
           className="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
         >
           🎉 <span className="ml-1">Season 1 is now live</span>
         </motion.div>
         <motion.h1
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.1 }}
+          {...motionProps}
+          initial={prefersReducedMotion ? undefined : { opacity: 0, y: 20 }}
+          animate={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
+          transition={
+            prefersReducedMotion ? undefined : { duration: 0.5, delay: 0.1 }
+          }
           className="font-heading text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl"
         >
           Competitive Gaming <br className="hidden sm:inline" />
           <span className="text-primary">Evolved</span>
         </motion.h1>
         <motion.p
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.2 }}
+          {...motionProps}
+          initial={prefersReducedMotion ? undefined : { opacity: 0, y: 20 }}
+          animate={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
+          transition={
+            prefersReducedMotion ? undefined : { duration: 0.5, delay: 0.2 }
+          }
           className="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8"
         >
           Join the ultimate platform for amateur gamers. Compete in daily
@@ -36,13 +54,19 @@ export function HeroSection() {
           blockchain.
         </motion.p>
         <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.3 }}
+          {...motionProps}
+          initial={prefersReducedMotion ? undefined : { opacity: 0, y: 20 }}
+          animate={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
+          transition={
+            prefersReducedMotion ? undefined : { duration: 0.5, delay: 0.3 }
+          }
           className="flex w-full flex-col gap-4 sm:w-auto sm:flex-row"
         >
           <Link href="/register" className="w-full sm:w-auto">
-            <Button size="lg" className="h-11 w-full px-8 sm:w-auto hover:scale-105 transition-transform">
+            <Button
+              size="lg"
+              className="h-11 w-full px-8 sm:w-auto hover:scale-105 transition-transform"
+            >
               Start Competing
             </Button>
           </Link>
@@ -60,25 +84,32 @@ export function HeroSection() {
 
       {/* Background decoration with parallax effect */}
       <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 0.2 }}
-        transition={{ duration: 1 }}
+        {...motionProps}
+        initial={prefersReducedMotion ? undefined : { opacity: 0 }}
+        animate={prefersReducedMotion ? undefined : { opacity: 0.2 }}
+        transition={prefersReducedMotion ? undefined : { duration: 1 }}
         className="absolute left-1/2 top-1/2 -z-10 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 dark:opacity-10"
       >
         <div className="h-full w-full rounded-full bg-primary blur-[100px]" />
       </motion.div>
-      
+
       {/* Floating decorative elements */}
       <motion.div
-        initial={{ opacity: 0, scale: 0.8 }}
-        animate={{ opacity: 0.1, scale: 1 }}
-        transition={{ duration: 1.5, delay: 0.5 }}
+        {...motionProps}
+        initial={prefersReducedMotion ? undefined : { opacity: 0, scale: 0.8 }}
+        animate={prefersReducedMotion ? undefined : { opacity: 0.1, scale: 1 }}
+        transition={
+          prefersReducedMotion ? undefined : { duration: 1.5, delay: 0.5 }
+        }
         className="absolute -left-32 top-1/4 -z-10 h-64 w-64 rounded-full bg-primary blur-[80px] dark:opacity-5"
       />
       <motion.div
-        initial={{ opacity: 0, scale: 0.8 }}
-        animate={{ opacity: 0.1, scale: 1 }}
-        transition={{ duration: 1.5, delay: 0.7 }}
+        {...motionProps}
+        initial={prefersReducedMotion ? undefined : { opacity: 0, scale: 0.8 }}
+        animate={prefersReducedMotion ? undefined : { opacity: 0.1, scale: 1 }}
+        transition={
+          prefersReducedMotion ? undefined : { duration: 1.5, delay: 0.7 }
+        }
         className="absolute -right-32 bottom-1/4 -z-10 h-64 w-64 rounded-full bg-primary blur-[80px] dark:opacity-5"
       />
     </section>
diff --git a/frontend/src/components/landing/HowItWorksSection.tsx b/frontend/src/components/landing/HowItWorksSection.tsx
index 1df9a1c3..3800c51e 100644
--- a/frontend/src/components/landing/HowItWorksSection.tsx
+++ b/frontend/src/components/landing/HowItWorksSection.tsx
@@ -2,6 +2,7 @@
 
 import { motion } from "framer-motion";
 import { UserPlus, Trophy, Swords, Wallet } from "lucide-react";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 const steps = [
   {
@@ -34,13 +35,17 @@ const steps = [
 ];
 
 export function HowItWorksSection() {
+  const prefersReducedMotion = useReducedMotion();
+
   return (
     <section className="container py-8 md:py-12 lg:py-24">
       <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
+        initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+        whileInView={
+          prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+        }
         viewport={{ once: true }}
-        transition={{ duration: 0.5 }}
+        transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.5 }}
         className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center"
       >
         <h2 className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
@@ -54,10 +59,18 @@ export function HowItWorksSection() {
         {steps.map((step, index) => (
           <motion.div
             key={step.number}
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
+            initial={
+              prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+            }
+            whileInView={
+              prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+            }
             viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: index * 0.1 }}
+            transition={
+              prefersReducedMotion
+                ? { duration: 0 }
+                : { duration: 0.5, delay: index * 0.1 }
+            }
             className="relative flex flex-col items-center text-center gap-2 px-4"
           >
             <span className="text-6xl font-bold text-muted/30 absolute -top-8 select-none">
diff --git a/frontend/src/components/layout/MobileNav.tsx b/frontend/src/components/layout/MobileNav.tsx
index a652ccd8..37753101 100644
--- a/frontend/src/components/layout/MobileNav.tsx
+++ b/frontend/src/components/layout/MobileNav.tsx
@@ -11,47 +11,45 @@ import { ProtectedLink } from "@/components/navigation/ProtectedLink";
 import { useAuth } from "@/hooks/useAuth";
 import { Logo } from "@/components/common/Logo";
 import { motion, AnimatePresence } from "framer-motion";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 const isActiveRoute = (pathname: string, href: string) =>
   pathname === href || (href !== "/" && pathname.startsWith(href));
 
-// Animation variants for drawer slide-in from left
-const drawerVariants = {
-  hidden: {
-    x: "-100%",
-    opacity: 0,
-  },
-  visible: {
-    x: 0,
-    opacity: 1,
-    transition: {
-      type: "spring",
-      damping: 25,
-      stiffness: 300,
-      mass: 0.8,
-    },
-  },
-  exit: {
-    x: "-100%",
-    opacity: 0,
-    transition: {
-      duration: 0.2,
-      ease: "easeIn",
-    },
-  },
-};
-
-// Backdrop animation variants
-const backdropVariants = {
-  hidden: { opacity: 0 },
-  visible: { opacity: 1 },
-  exit: { opacity: 0 },
-};
-
 export function MobileNav() {
   const [isOpen, setIsOpen] = useState(false);
   const pathname = usePathname();
   const { user, loading, logout } = useAuth();
+  const prefersReducedMotion = useReducedMotion();
+
+  const drawerVariants = prefersReducedMotion
+    ? {
+        hidden: { x: 0, opacity: 1 },
+        visible: { x: 0, opacity: 1 },
+        exit: { x: 0, opacity: 1 },
+      }
+    : {
+        hidden: { x: "-100%", opacity: 0 },
+        visible: {
+          x: 0,
+          opacity: 1,
+          transition: {
+            type: "spring",
+            damping: 25,
+            stiffness: 300,
+            mass: 0.8,
+          },
+        },
+        exit: {
+          x: "-100%",
+          opacity: 0,
+          transition: { duration: 0.2, ease: "easeIn" },
+        },
+      };
+
+  const backdropVariants = prefersReducedMotion
+    ? { hidden: { opacity: 1 }, visible: { opacity: 1 }, exit: { opacity: 1 } }
+    : { hidden: { opacity: 0 }, visible: { opacity: 1 }, exit: { opacity: 0 } };
 
   // Close drawer on route change
   useEffect(() => {
@@ -98,11 +96,7 @@ export function MobileNav() {
         aria-expanded={isOpen}
         aria-controls="mobile-navigation-drawer"
       >
-        {isOpen ? (
-          <X className="h-6 w-6" />
-        ) : (
-          <Menu className="h-6 w-6" />
-        )}
+        {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
       </Button>
 
       <AnimatePresence>
@@ -115,7 +109,9 @@ export function MobileNav() {
               animate="visible"
               exit="exit"
               variants={backdropVariants}
-              transition={{ duration: 0.2 }}
+              transition={
+                prefersReducedMotion ? { duration: 0 } : { duration: 0.2 }
+              }
               onClick={() => setIsOpen(false)}
               aria-hidden="true"
             />
@@ -155,7 +151,9 @@ export function MobileNav() {
                     {walletBalance && (
                       <div className="mt-3 flex items-center gap-2 rounded-md bg-muted/50 p-2">
                         <Wallet className="h-4 w-4 text-muted-foreground" />
-                        <span className="text-sm font-medium">{walletBalance}</span>
+                        <span className="text-sm font-medium">
+                          {walletBalance}
+                        </span>
                       </div>
                     )}
                   </div>
@@ -170,7 +168,7 @@ export function MobileNav() {
                         "flex w-full items-center justify-between rounded-md p-3 text-sm font-medium transition-colors",
                         isActive
                           ? "bg-primary/10 text-primary"
-                          : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                          : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
                       );
 
                       if (item.href === "/wallet") {
@@ -228,7 +226,7 @@ export function MobileNav() {
                           "flex w-full items-center justify-between rounded-md p-3 text-sm font-medium transition-colors",
                           isActiveRoute(pathname, "/profile")
                             ? "bg-primary/10 text-primary"
-                            : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                            : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
                         )}
                         onClick={() => setIsOpen(false)}
                       >
@@ -244,7 +242,7 @@ export function MobileNav() {
                           "flex w-full items-center justify-between rounded-md p-3 text-sm font-medium transition-colors",
                           isActiveRoute(pathname, "/wallet")
                             ? "bg-primary/10 text-primary"
-                            : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                            : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
                         )}
                         onClick={() => setIsOpen(false)}
                       >
@@ -286,7 +284,7 @@ export function MobileNav() {
                               variant={isRegister ? "primary" : "outline"}
                               className={cn(
                                 "w-full justify-start",
-                                isActive && "ring-2 ring-primary/30"
+                                isActive && "ring-2 ring-primary/30",
                               )}
                             >
                               {item.label}
diff --git a/frontend/src/components/notifications/Toast.tsx b/frontend/src/components/notifications/Toast.tsx
index 4d41c3a3..83b38e70 100644
--- a/frontend/src/components/notifications/Toast.tsx
+++ b/frontend/src/components/notifications/Toast.tsx
@@ -4,19 +4,44 @@ import { useEffect, useState, useRef } from "react";
 import { motion, useMotionValue, useTransform, PanInfo } from "framer-motion";
 import { X, CheckCircle, Info, AlertTriangle, AlertCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { ToastNotification, NotificationType, ToastPosition } from "@/types/notification";
+import {
+  ToastNotification,
+  NotificationType,
+  ToastPosition,
+} from "@/types/notification";
 import { useNotifications } from "@/contexts/NotificationContext";
 import { Button } from "@/components/ui/Button";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 const typeConfig: Record<
   NotificationType,
   { icon: React.ComponentType<{ className?: string }>; className: string }
 > = {
-  info: { icon: Info, className: "bg-primary/10 text-primary dark:text-primary/80 border-primary/20" },
-  success: { icon: CheckCircle, className: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20" },
-  warning: { icon: AlertTriangle, className: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20" },
-  error: { icon: AlertCircle, className: "bg-destructive/10 text-destructive dark:text-destructive/80 border-red-500/20" },
-  match: { icon: CheckCircle, className: "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20" },
+  info: {
+    icon: Info,
+    className:
+      "bg-primary/10 text-primary dark:text-primary/80 border-primary/20",
+  },
+  success: {
+    icon: CheckCircle,
+    className:
+      "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+  },
+  warning: {
+    icon: AlertTriangle,
+    className:
+      "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+  },
+  error: {
+    icon: AlertCircle,
+    className:
+      "bg-destructive/10 text-destructive dark:text-destructive/80 border-red-500/20",
+  },
+  match: {
+    icon: CheckCircle,
+    className:
+      "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20",
+  },
 };
 
 const positionClasses: Record<ToastPosition, string> = {
@@ -41,6 +66,7 @@ function ToastItem({ toast }: { toast: ToastNotification }) {
   const x = useMotionValue(0);
   const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0]);
   const rotate = useTransform(x, [-200, 0, 200], [-15, 0, 15]);
+  const prefersReducedMotion = useReducedMotion();
 
   progressRef.current = progress;
 
@@ -73,22 +99,42 @@ function ToastItem({ toast }: { toast: ToastNotification }) {
 
   const position = toast.position ?? "bottom-right";
 
+  const motionProps = prefersReducedMotion
+    ? {
+        initial: { opacity: 1 },
+        animate: { opacity: 1 },
+        exit: { opacity: 1 },
+        transition: { duration: 0 },
+      }
+    : {};
+
   return (
     <motion.div
       role="alert"
-      initial={{ opacity: 0, y: position.startsWith("top") ? -50 : 50, scale: 0.9 }}
-      animate={{ opacity: 1, y: 0, scale: 1 }}
-      exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}
-      drag="x"
-      dragConstraints={{ left: 0, right: 0 }}
-      dragElastic={0.7}
-      onDragEnd={handleDragEnd}
+      {...motionProps}
+      initial={
+        prefersReducedMotion
+          ? undefined
+          : { opacity: 0, y: position.startsWith("top") ? -50 : 50, scale: 0.9 }
+      }
+      animate={
+        prefersReducedMotion ? undefined : { opacity: 1, y: 0, scale: 1 }
+      }
+      exit={
+        prefersReducedMotion
+          ? undefined
+          : { opacity: 0, scale: 0.9, transition: { duration: 0.2 } }
+      }
+      drag={prefersReducedMotion ? false : "x"}
+      dragConstraints={prefersReducedMotion ? undefined : { left: 0, right: 0 }}
+      dragElastic={prefersReducedMotion ? 0 : 0.7}
+      onDragEnd={prefersReducedMotion ? undefined : handleDragEnd}
       style={{ x, opacity, rotate }}
       onMouseEnter={() => setIsPaused(true)}
       onMouseLeave={() => setIsPaused(false)}
       className={cn(
         "relative flex items-start gap-3 rounded-lg border p-4 shadow-lg backdrop-blur-sm pointer-events-auto select-none touch-pan-y",
-        config.className
+        config.className,
       )}
     >
       <Icon className="h-5 w-5 shrink-0 mt-0.5" />
@@ -123,7 +169,9 @@ function ToastItem({ toast }: { toast: ToastNotification }) {
             className="h-full bg-current"
             initial={{ width: "100%" }}
             animate={{ width: `${progress}%` }}
-            transition={{ duration: 0.016 }}
+            transition={
+              prefersReducedMotion ? { duration: 0 } : { duration: 0.016 }
+            }
           />
         </div>
       )}
@@ -136,14 +184,17 @@ export function ToastContainer() {
 
   if (toasts.length === 0) return null;
 
-  const groupedToasts = toasts.reduce((acc, toast) => {
-    const position = toast.position ?? "bottom-right";
-    if (!acc[position]) {
-      acc[position] = [];
-    }
-    acc[position].push(toast);
-    return acc;
-  }, {} as Record<ToastPosition, ToastNotification[]>);
+  const groupedToasts = toasts.reduce(
+    (acc, toast) => {
+      const position = toast.position ?? "bottom-right";
+      if (!acc[position]) {
+        acc[position] = [];
+      }
+      acc[position].push(toast);
+      return acc;
+    },
+    {} as Record<ToastPosition, ToastNotification[]>,
+  );
 
   return (
     <>
@@ -152,7 +203,7 @@ export function ToastContainer() {
           key={position}
           className={cn(
             "fixed z-[100] flex flex-col gap-3 max-w-sm w-full pointer-events-none",
-            positionClasses[position as ToastPosition]
+            positionClasses[position as ToastPosition],
           )}
           aria-live="polite"
           aria-label="Notifications"
diff --git a/frontend/src/components/ui/BottomNav.tsx b/frontend/src/components/ui/BottomNav.tsx
index 3f42e8c7..150b40fe 100644
--- a/frontend/src/components/ui/BottomNav.tsx
+++ b/frontend/src/components/ui/BottomNav.tsx
@@ -8,33 +8,44 @@ import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "@/lib/utils";
 import { useDevice } from "@/hooks/useMobile";
 import { Gamepad2, Trophy, User, Home } from "lucide-react";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 // Navigation items with icons
 const NAV_ITEMS = [
   {
     label: "Home",
     href: "/",
-    icon: (active: boolean) => <Home className={cn("w-6 h-6", active && "fill-primary")} />,
+    icon: (active: boolean) => (
+      <Home className={cn("w-6 h-6", active && "fill-primary")} />
+    ),
   },
   {
     label: "Play",
     href: "/play",
-    icon: (active: boolean) => <Gamepad2 className={cn("w-6 h-6", active && "fill-primary")} />,
+    icon: (active: boolean) => (
+      <Gamepad2 className={cn("w-6 h-6", active && "fill-primary")} />
+    ),
   },
   {
     label: "Tournaments",
     href: "/tournaments",
-    icon: (active: boolean) => <Trophy className={cn("w-6 h-6", active && "fill-primary")} />,
+    icon: (active: boolean) => (
+      <Trophy className={cn("w-6 h-6", active && "fill-primary")} />
+    ),
   },
   {
     label: "Leaderboard",
     href: "/leaderboard",
-    icon: (active: boolean) => <Trophy className={cn("w-6 h-6", active && "fill-primary")} />,
+    icon: (active: boolean) => (
+      <Trophy className={cn("w-6 h-6", active && "fill-primary")} />
+    ),
   },
   {
     label: "Profile",
     href: "/profile",
-    icon: (active: boolean) => <User className={cn("w-6 h-6", active && "fill-primary")} />,
+    icon: (active: boolean) => (
+      <User className={cn("w-6 h-6", active && "fill-primary")} />
+    ),
   },
 ];
 
@@ -47,12 +58,13 @@ export function BottomNav({ className }: BottomNavProps) {
   const { isMobile, safeAreaInsets } = useDevice();
   const [isVisible, setIsVisible] = useState(true);
   const lastScrollY = useRef(0);
+  const prefersReducedMotion = useReducedMotion();
 
   // Hide on scroll down, show on scroll up
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollY = window.scrollY;
-      
+
       if (currentScrollY > lastScrollY.current && currentScrollY > 100) {
         // Scrolling down - hide
         setIsVisible(false);
@@ -60,7 +72,7 @@ export function BottomNav({ className }: BottomNavProps) {
         // Scrolling up - show
         setIsVisible(true);
       }
-      
+
       lastScrollY.current = currentScrollY;
     };
 
@@ -81,21 +93,26 @@ export function BottomNav({ className }: BottomNavProps) {
             "fixed bottom-0 left-0 right-0 z-40",
             "bg-background/95 backdrop-blur-lg",
             "border-t border-border",
-            className
+            className,
           )}
-          initial={{ y: "100%" }}
-          animate={{ y: 0 }}
-          exit={{ y: "100%" }}
-          transition={{ type: "spring", damping: 25, stiffness: 300 }}
+          initial={prefersReducedMotion ? { y: 0 } : { y: "100%" }}
+          animate={prefersReducedMotion ? { y: 0 } : { y: 0 }}
+          exit={prefersReducedMotion ? { y: 0 } : { y: "100%" }}
+          transition={
+            prefersReducedMotion
+              ? { duration: 0 }
+              : { type: "spring", damping: 25, stiffness: 300 }
+          }
           style={{
             paddingBottom: `${safeAreaInsets.bottom}px`,
           }}
         >
           <div className="flex items-center justify-around h-16">
             {NAV_ITEMS.map((item) => {
-              const isActive = pathname === item.href || 
+              const isActive =
+                pathname === item.href ||
                 (item.href !== "/" && pathname.startsWith(item.href));
-              
+
               return (
                 <Link
                   key={item.href}
@@ -106,22 +123,20 @@ export function BottomNav({ className }: BottomNavProps) {
                     "transition-colors duration-200",
                     isActive
                       ? "text-primary"
-                      : "text-muted-foreground hover:text-foreground"
+                      : "text-muted-foreground hover:text-foreground",
                   )}
                   aria-current={isActive ? "page" : undefined}
                 >
                   <div className="relative">
                     {item.icon(isActive)}
-                    {isActive && (
+                    {isActive && !prefersReducedMotion && (
                       <motion.div
                         className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary"
                         layoutId="activeIndicator"
                       />
                     )}
                   </div>
-                  <span className="text-xs mt-1 font-medium">
-                    {item.label}
-                  </span>
+                  <span className="text-xs mt-1 font-medium">{item.label}</span>
                 </Link>
               );
             })}
diff --git a/frontend/src/components/ui/BottomSheet.tsx b/frontend/src/components/ui/BottomSheet.tsx
index 1f93cb8a..de0051d0 100644
--- a/frontend/src/components/ui/BottomSheet.tsx
+++ b/frontend/src/components/ui/BottomSheet.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef, useCallback, ReactNode } from "react";
 import { X } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "@/lib/utils";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 interface BottomSheetProps {
   isOpen: boolean;
@@ -26,27 +27,31 @@ export function BottomSheet({
   const sheetRef = useRef<HTMLDivElement>(null);
   const startY = useRef(0);
   const currentSnap = useRef(0);
+  const prefersReducedMotion = useReducedMotion();
 
   // Handle touch gestures for snapping
   const handleTouchStart = useCallback((e: React.TouchEvent) => {
     startY.current = e.touches[0].clientY;
   }, []);
 
-  const handleTouchMove = useCallback((e: React.TouchEvent) => {
-    if (!sheetRef.current) return;
-    
-    const deltaY = e.touches[0].clientY - startY.current;
-    const currentHeight = sheetRef.current.offsetHeight;
-    
-    // Calculate snap point based on drag
-    if (deltaY > 0) {
-      // Dragging down - could close or snap down
-      const progress = deltaY / currentHeight;
-      if (progress > 0.3) {
-        onClose();
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!sheetRef.current) return;
+
+      const deltaY = e.touches[0].clientY - startY.current;
+      const currentHeight = sheetRef.current.offsetHeight;
+
+      // Calculate snap point based on drag
+      if (deltaY > 0) {
+        // Dragging down - could close or snap down
+        const progress = deltaY / currentHeight;
+        if (progress > 0.3) {
+          onClose();
+        }
       }
-    }
-  }, [onClose]);
+    },
+    [onClose],
+  );
 
   // Prevent body scroll when sheet is open
   useEffect(() => {
@@ -78,9 +83,10 @@ export function BottomSheet({
           {/* Backdrop */}
           <motion.div
             className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm md:hidden"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+            animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1 }}
+            exit={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+            transition={prefersReducedMotion ? { duration: 0 } : undefined}
             onClick={onClose}
           />
 
@@ -89,14 +95,18 @@ export function BottomSheet({
             ref={sheetRef}
             className={cn(
               "fixed left-0 right-0 z-50 rounded-t-2xl bg-background border-t border-border shadow-lg md:hidden",
-              className
+              className,
             )}
-            initial={{ y: "100%" }}
-            animate={{ y: 0 }}
-            exit={{ y: "100%" }}
-            transition={{ type: "spring", damping: 25, stiffness: 300 }}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
+            initial={prefersReducedMotion ? { y: 0 } : { y: "100%" }}
+            animate={prefersReducedMotion ? { y: 0 } : { y: 0 }}
+            exit={prefersReducedMotion ? { y: 0 } : { y: "100%" }}
+            transition={
+              prefersReducedMotion
+                ? { duration: 0 }
+                : { type: "spring", damping: 25, stiffness: 300 }
+            }
+            onTouchStart={prefersReducedMotion ? undefined : handleTouchStart}
+            onTouchMove={prefersReducedMotion ? undefined : handleTouchMove}
             role="dialog"
             aria-modal="true"
             aria-label={title}
@@ -129,4 +139,4 @@ export function BottomSheet({
       )}
     </AnimatePresence>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/hooks/useReducedMotion.ts b/frontend/src/hooks/useReducedMotion.ts
new file mode 100644
index 00000000..a5391c52
--- /dev/null
+++ b/frontend/src/hooks/useReducedMotion.ts
@@ -0,0 +1,27 @@
+import { useReducedMotion as useFramerReducedMotion } from "framer-motion";
+
+/**
+ * Hook to detect if the user prefers reduced motion
+ * Returns true if the user has enabled "Reduce Motion" in their OS settings
+ */
+export function useReducedMotion() {
+  return useFramerReducedMotion();
+}
+
+/**
+ * Helper to get animation props that respect reduced motion preferences
+ * When reduced motion is enabled, animations are disabled or made instant
+ */
+export function useMotionProps(isEnabled: boolean = true) {
+  const prefersReducedMotion = useReducedMotion();
+
+  if (prefersReducedMotion || !isEnabled) {
+    return {
+      initial: { opacity: 1 },
+      animate: { opacity: 1 },
+      transition: { duration: 0 },
+    };
+  }
+
+  return {};
+}