Layout mostly complete. Keep working.

frontend/src/components/gamification/Airdrops.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { getMyLootBoxes, openLootBox } from '../../api/gamification'
+import type { LootBox, LootBoxRarity, LootBoxOpenResult } from '../../types/gamification'
+
+const RARITY_CONFIG: Record<LootBoxRarity, { color: string; bg: string; border: string; icon: string }> = {
+  common: {
+    color: 'text-gray-600',
+    bg: 'bg-gray-100',
+    border: 'border-gray-300',
+    icon: '📦',
+  },
+  uncommon: {
+    color: 'text-green-600',
+    bg: 'bg-green-50',
+    border: 'border-green-300',
+    icon: '🎁',
+  },
+  rare: {
+    color: 'text-blue-600',
+    bg: 'bg-blue-50',
+    border: 'border-blue-300',
+    icon: '💎',
+  },
+  epic: {
+    color: 'text-purple-600',
+    bg: 'bg-purple-50',
+    border: 'border-purple-300',
+    icon: '👑',
+  },
+  legendary: {
+    color: 'text-yellow-600',
+    bg: 'bg-yellow-50',
+    border: 'border-yellow-400',
+    icon: '🌟',
+  },
+}
+
+const REWARD_ICONS: Record<string, string> = {
+  bonus_cash: '💰',
+  xp_boost: '⚡',
+  fee_reduction: '📉',
+  free_bet: '🎟️',
+  avatar_frame: '🖼️',
+  badge: '🏅',
+  nothing: '💨',
+}
+
+export default function Airdrops() {
+  const queryClient = useQueryClient()
+  const [openingId, setOpeningId] = useState<number | null>(null)
+  const [result, setResult] = useState<LootBoxOpenResult | null>(null)
+  const [showResult, setShowResult] = useState(false)
+
+  const { data: airdrops = [], isLoading } = useQuery({
+    queryKey: ['my-loot-boxes'],
+    queryFn: getMyLootBoxes,
+    retry: 1,
+  })
+
+  const openMutation = useMutation({
+    mutationFn: openLootBox,
+    onSuccess: (data) => {
+      setResult(data)
+      setShowResult(true)
+      queryClient.invalidateQueries({ queryKey: ['my-loot-boxes'] })
+      queryClient.invalidateQueries({ queryKey: ['my-stats'] })
+    },
+    onSettled: () => {
+      setOpeningId(null)
+    },
+  })
+
+  const unclaimedAirdrops = airdrops.filter((box: LootBox) => !box.opened)
+
+  const handleClaim = (box: LootBox) => {
+    setOpeningId(box.id)
+    setResult(null)
+    setShowResult(false)
+    openMutation.mutate(box.id)
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm p-6">
+      <h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
+        <span className="text-2xl">🪂</span> Airdrops
+        {unclaimedAirdrops.length > 0 && (
+          <span className="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">
+            {unclaimedAirdrops.length}
+          </span>
+        )}
+      </h3>
+
+      {/* Result Modal */}
+      {showResult && result && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl p-6 max-w-sm w-full text-center shadow-xl">
+            <div className="text-6xl mb-4">{REWARD_ICONS[result.reward_type] || '🪂'}</div>
+            <h4 className="text-xl font-bold text-gray-900 mb-2">
+              {result.reward_type === 'nothing' ? 'Better luck next time!' : 'You received:'}
+            </h4>
+            <p className="text-2xl font-bold text-green-600 mb-2">{result.reward_value}</p>
+            <p className="text-gray-600 mb-4">{result.message}</p>
+            <button
+              onClick={() => setShowResult(false)}
+              className="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium transition-colors"
+            >
+              Awesome!
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="grid grid-cols-3 gap-3">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="h-24 bg-gray-100 rounded-lg animate-pulse" />
+          ))}
+        </div>
+      ) : unclaimedAirdrops.length === 0 ? (
+        <div className="text-center py-6">
+          <p className="text-4xl mb-2">🪂</p>
+          <p className="text-gray-500">No airdrops available</p>
+          <p className="text-sm text-gray-400">Earn them through achievements & VIP level ups!</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-3 gap-3">
+          {unclaimedAirdrops.map((box: LootBox) => {
+            const config = RARITY_CONFIG[box.rarity]
+            const isOpening = openingId === box.id
+
+            return (
+              <button
+                key={box.id}
+                onClick={() => handleClaim(box)}
+                disabled={isOpening || openMutation.isPending}
+                className={`${config.bg} ${config.border} border-2 rounded-lg p-3 text-center transition-all hover:scale-105 disabled:opacity-50 disabled:hover:scale-100`}
+              >
+                <div className={`text-3xl mb-1 ${isOpening ? 'animate-spin' : 'animate-bounce'}`}>
+                  {isOpening ? '🎰' : config.icon}
+                </div>
+                <p className={`text-xs font-medium capitalize ${config.color}`}>
+                  {box.rarity}
+                </p>
+                <p className="text-xs text-gray-400 truncate">{box.source}</p>
+              </button>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Claimed History (collapsed) */}
+      {airdrops.filter((b: LootBox) => b.opened).length > 0 && (
+        <details className="mt-4">
+          <summary className="text-sm text-gray-500 cursor-pointer hover:text-gray-700">
+            View claimed airdrops ({airdrops.filter((b: LootBox) => b.opened).length})
+          </summary>
+          <div className="mt-2 space-y-1 max-h-32 overflow-y-auto">
+            {airdrops
+              .filter((b: LootBox) => b.opened)
+              .map((box: LootBox) => (
+                <div key={box.id} className="flex items-center gap-2 text-xs text-gray-500">
+                  <span>{RARITY_CONFIG[box.rarity].icon}</span>
+                  <span className="capitalize">{box.rarity}</span>
+                  <span>→</span>
+                  <span>{box.reward_value || 'Nothing'}</span>
+                </div>
+              ))}
+          </div>
+        </details>
+      )}
+    </div>
+  )
+}

frontend/src/components/gamification/VIPProgress.tsx

@@ -0,0 +1,227 @@
+import { useQuery } from '@tanstack/react-query'
+import { getMyStats, getTierInfo } from '../../api/gamification'
+import type { TierInfo } from '../../types/gamification'
+
+// Map backend tier names to VIP display names
+const VIP_NAMES: Record<string, string> = {
+  'Bronze I': 'VIP Bronze I',
+  'Bronze II': 'VIP Bronze II',
+  'Bronze III': 'VIP Bronze III',
+  'Silver I': 'VIP Silver I',
+  'Silver II': 'VIP Silver II',
+  'Silver III': 'VIP Silver III',
+  'Gold I': 'VIP Gold I',
+  'Gold II': 'VIP Gold II',
+  'Gold III': 'VIP Gold III',
+  'Platinum': 'Institutional Platinum',
+  'Diamond': 'Institutional Diamond',
+}
+
+const VIP_ICONS: Record<string, string> = {
+  'Bronze I': '🥉',
+  'Bronze II': '🥉',
+  'Bronze III': '🥉',
+  'Silver I': '🥈',
+  'Silver II': '🥈',
+  'Silver III': '🥈',
+  'Gold I': '🥇',
+  'Gold II': '🥇',
+  'Gold III': '🥇',
+  'Platinum': '💎',
+  'Diamond': '👑',
+}
+
+const VIP_COLORS: Record<string, { text: string; bg: string; border: string }> = {
+  'Bronze I': { text: 'text-amber-700', bg: 'bg-amber-500', border: 'border-amber-400' },
+  'Bronze II': { text: 'text-amber-700', bg: 'bg-amber-500', border: 'border-amber-400' },
+  'Bronze III': { text: 'text-amber-700', bg: 'bg-amber-500', border: 'border-amber-400' },
+  'Silver I': { text: 'text-gray-600', bg: 'bg-gray-400', border: 'border-gray-400' },
+  'Silver II': { text: 'text-gray-600', bg: 'bg-gray-400', border: 'border-gray-400' },
+  'Silver III': { text: 'text-gray-600', bg: 'bg-gray-400', border: 'border-gray-400' },
+  'Gold I': { text: 'text-yellow-600', bg: 'bg-yellow-400', border: 'border-yellow-400' },
+  'Gold II': { text: 'text-yellow-600', bg: 'bg-yellow-400', border: 'border-yellow-400' },
+  'Gold III': { text: 'text-yellow-600', bg: 'bg-yellow-400', border: 'border-yellow-400' },
+  'Platinum': { text: 'text-cyan-600', bg: 'bg-cyan-400', border: 'border-cyan-400' },
+  'Diamond': { text: 'text-purple-600', bg: 'bg-purple-400', border: 'border-purple-400' },
+}
+
+interface VIPProgressProps {
+  compact?: boolean
+}
+
+export default function VIPProgress({ compact = false }: VIPProgressProps) {
+  const { data: stats, isLoading: loadingStats } = useQuery({
+    queryKey: ['my-stats'],
+    queryFn: getMyStats,
+    retry: 1,
+  })
+
+  const { data: tiers = [], isLoading: loadingTiers } = useQuery({
+    queryKey: ['tier-info'],
+    queryFn: getTierInfo,
+    retry: 1,
+  })
+
+  const isLoading = loadingStats || loadingTiers
+
+  if (isLoading) {
+    return (
+      <div className="bg-white rounded-xl shadow-sm p-6">
+        <div className="h-32 bg-gray-100 rounded-lg animate-pulse" />
+      </div>
+    )
+  }
+
+  if (!stats) {
+    return null
+  }
+
+  const vipColors = VIP_COLORS[stats.tier_name] || VIP_COLORS['Bronze I']
+  const vipIcon = VIP_ICONS[stats.tier_name] || '🏅'
+  const vipName = VIP_NAMES[stats.tier_name] || stats.tier_name
+  const isInstitutional = stats.tier >= 9 // Platinum and Diamond are institutional
+
+  if (compact) {
+    return (
+      <div className="bg-white rounded-xl shadow-sm p-4">
+        <div className="flex items-center gap-3">
+          <div className="text-3xl">{vipIcon}</div>
+          <div className="flex-1">
+            <div className="flex items-center justify-between mb-1">
+              <span className={`font-bold ${vipColors.text}`}>{vipName}</span>
+              <span className="text-xs text-gray-500">{stats.xp.toLocaleString()} XP</span>
+            </div>
+            <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
+              <div
+                className={`h-full ${vipColors.bg} transition-all duration-500`}
+                style={{ width: `${stats.tier_progress_percent}%` }}
+              />
+            </div>
+            <p className="text-xs text-gray-500 mt-1">
+              {stats.tier < 10
+                ? `${stats.xp_to_next_tier.toLocaleString()} XP to next VIP level`
+                : 'Max VIP level reached!'}
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm p-6">
+      <h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
+        <span className="text-2xl">👑</span> Your VIP Level
+      </h3>
+
+      {/* Current VIP Level Display */}
+      <div className={`border-2 ${vipColors.border} rounded-xl p-4 mb-4 bg-gradient-to-br from-gray-50 to-transparent`}>
+        <div className="flex items-center gap-4">
+          <div className="text-5xl">{vipIcon}</div>
+          <div className="flex-1">
+            <p className={`text-2xl font-bold ${vipColors.text}`}>{vipName}</p>
+            <p className="text-gray-500 text-sm">
+              {isInstitutional ? (
+                <span className="text-purple-600 font-medium">Institutional (Whale)</span>
+              ) : (
+                `VIP Level ${stats.tier} of 10`
+              )}
+            </p>
+          </div>
+          <div className="text-right">
+            <p className="text-green-600 font-bold text-lg">{stats.house_fee}%</p>
+            <p className="text-xs text-gray-500">House Fee</p>
+          </div>
+        </div>
+
+        {/* XP Progress */}
+        <div className="mt-4">
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-gray-600">{stats.xp.toLocaleString()} XP</span>
+            {stats.tier < 10 && (
+              <span className="text-gray-600">
+                {(stats.xp + stats.xp_to_next_tier).toLocaleString()} XP
+              </span>
+            )}
+          </div>
+          <div className="h-3 bg-gray-100 rounded-full overflow-hidden">
+            <div
+              className={`h-full ${vipColors.bg} transition-all duration-500`}
+              style={{ width: `${stats.tier_progress_percent}%` }}
+            />
+          </div>
+          <p className="text-center text-sm text-gray-500 mt-2">
+            {stats.tier < 10
+              ? `${stats.xp_to_next_tier.toLocaleString()} XP to next VIP level`
+              : '🎉 Max VIP level reached!'}
+          </p>
+        </div>
+      </div>
+
+      {/* Stats Summary */}
+      <div className="grid grid-cols-2 gap-3 mb-4">
+        <div className="bg-gray-50 rounded-lg p-3 text-center border">
+          <p className={`text-lg font-bold ${stats.net_profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+            ${stats.net_profit >= 0 ? '+' : ''}{stats.net_profit.toLocaleString()}
+          </p>
+          <p className="text-xs text-gray-500">Net Profit</p>
+        </div>
+        <div className="bg-gray-50 rounded-lg p-3 text-center border">
+          <p className="text-lg font-bold text-gray-900">${stats.total_wagered.toLocaleString()}</p>
+          <p className="text-xs text-gray-500">Total Wagered</p>
+        </div>
+      </div>
+
+      {/* VIP Level Roadmap */}
+      <details className="group">
+        <summary className="text-sm text-gray-500 cursor-pointer hover:text-gray-700 flex items-center gap-1">
+          <span className="group-open:rotate-90 transition-transform">▶</span>
+          View all VIP levels & benefits
+        </summary>
+        <div className="mt-3 space-y-1 max-h-48 overflow-y-auto">
+          {tiers.map((tier: TierInfo) => {
+            const isCurrentTier = tier.tier === stats.tier
+            const isUnlocked = tier.tier <= stats.tier
+            const colors = VIP_COLORS[tier.name] || VIP_COLORS['Bronze I']
+            const displayName = VIP_NAMES[tier.name] || tier.name
+            const tierIsInstitutional = tier.tier >= 9
+
+            return (
+              <div
+                key={tier.tier}
+                className={`flex items-center gap-2 p-2 rounded-lg text-sm ${
+                  isCurrentTier
+                    ? `${colors.border} border bg-gray-50`
+                    : isUnlocked
+                    ? 'bg-gray-50'
+                    : 'bg-white opacity-60'
+                }`}
+              >
+                <span className="text-lg">{VIP_ICONS[tier.name] || '🏅'}</span>
+                <div className="flex-1">
+                  <span className={isUnlocked ? colors.text : 'text-gray-400'}>
+                    {displayName}
+                  </span>
+                  {tierIsInstitutional && (
+                    <span className="ml-1 text-xs text-purple-500">(Whale)</span>
+                  )}
+                  <span className="text-gray-400 text-xs ml-2">
+                    {tier.min_xp.toLocaleString()} XP
+                  </span>
+                </div>
+                <span className={`font-medium ${isUnlocked ? 'text-green-600' : 'text-gray-400'}`}>
+                  {tier.house_fee}%
+                </span>
+                {isCurrentTier && (
+                  <span className="text-xs bg-primary text-white px-1.5 py-0.5 rounded">
+                    YOU
+                  </span>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </details>
+    </div>
+  )
+}

frontend/src/components/gamification/index.ts

@@ -1,6 +1,8 @@
 export { default as Leaderboard } from './Leaderboard'
 export { default as WhaleTracker } from './WhaleTracker'
 export { default as Achievements } from './Achievements'
-export { default as LootBoxes } from './LootBoxes'
+export { default as Airdrops } from './Airdrops'
+export { default as LootBoxes } from './LootBoxes' // Keep for backward compatibility
 export { default as ActivityFeed } from './ActivityFeed'
-export { default as TierProgress } from './TierProgress'
+export { default as VIPProgress } from './VIPProgress'
+export { default as TierProgress } from './TierProgress' // Keep for backward compatibility

frontend/src/components/layout/Header.tsx

@@ -1,19 +1,59 @@
 import { useState, useRef, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { useAuthStore } from '@/store'
-import { Wallet, LogOut, User, ChevronDown, Trophy, Medal, Gift, Activity, LayoutDashboard } from 'lucide-react'
+import {
+  Wallet,
+  LogOut,
+  User,
+  ChevronDown,
+  Gift,
+  Crown,
+  Users,
+  Rocket,
+  Zap,
+  Share2,
+  Settings,
+  Receipt
+} from 'lucide-react'
 import { useWeb3Wallet } from '@/blockchain/hooks/useWeb3Wallet'
 import { Button } from '@/components/common/Button'
 
-const REWARDS_DROPDOWN = [
-  { path: '/rewards', label: 'Overview', icon: LayoutDashboard },
-  { path: '/rewards/leaderboard', label: 'Leaderboard', icon: Trophy },
-  { path: '/rewards/achievements', label: 'Achievements', icon: Medal },
-  { path: '/rewards/loot-boxes', label: 'Loot Boxes', icon: Gift },
-  { path: '/rewards/activity', label: 'Activity', icon: Activity },
+// More dropdown menu items
+const MORE_DROPDOWN = [
+  {
+    path: '/vip',
+    label: 'VIP & Institutional',
+    description: 'Your trusted digital betting platform for VIPs and institutions',
+    icon: Crown
+  },
+  {
+    path: '/affiliate',
+    label: 'Affiliate',
+    description: 'Earn up to 50% commission per bet from referrals',
+    icon: Users
+  },
+  {
+    path: '/referral',
+    label: 'Referral',
+    description: 'Invite friends to earn either a commission rebate or a one-time reward',
+    icon: Share2
+  },
+  {
+    path: '/launchpool',
+    label: 'Launchpool',
+    description: 'Discover and gain access to new bets',
+    icon: Rocket
+  },
+  {
+    path: '/megadrop',
+    label: 'Megadrop',
+    description: 'Lock your bets and complete quests for boosted airdrop rewards',
+    icon: Zap
+  },
 ]
 
-function RewardsDropdown() {
+// Reusable dropdown hook
+function useDropdown() {
   const [isOpen, setIsOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
 
@@ -27,29 +67,38 @@ function RewardsDropdown() {
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [])
 
+  return { isOpen, setIsOpen, dropdownRef }
+}
+
+function MoreDropdown() {
+  const { isOpen, setIsOpen, dropdownRef } = useDropdown()
+
   return (
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="flex items-center gap-1 text-gray-700 hover:text-primary transition-colors"
       >
-        Rewards
+        More
         <ChevronDown size={16} className={`transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
       {isOpen && (
-        <div className="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border py-1 z-50">
-          {REWARDS_DROPDOWN.map((item) => {
+        <div className="absolute top-full left-0 mt-2 w-72 bg-white rounded-lg shadow-lg border py-2 z-50">
+          {MORE_DROPDOWN.map((item) => {
             const Icon = item.icon
             return (
               <Link
                 key={item.path}
                 to={item.path}
                 onClick={() => setIsOpen(false)}
-                className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors"
+                className="flex items-start gap-3 px-4 py-3 hover:bg-gray-50 transition-colors"
               >
-                <Icon size={16} />
-                {item.label}
+                <Icon size={20} className="text-primary mt-0.5 flex-shrink-0" />
+                <div>
+                  <p className="font-medium text-gray-900">{item.label}</p>
+                  <p className="text-xs text-gray-500 mt-0.5">{item.description}</p>
+                </div>
               </Link>
             )
           })}
@@ -59,103 +108,167 @@ function RewardsDropdown() {
   )
 }
 
-export const Header = () => {
+function ProfileDropdown() {
   const { user, logout } = useAuthStore()
   const { walletAddress, isConnected, connectWallet, disconnectWallet } = useWeb3Wallet()
+  const { isOpen, setIsOpen, dropdownRef } = useDropdown()
+
+  if (!user) return null
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 text-gray-700 hover:text-primary transition-colors"
+      >
+        <User size={18} />
+        <span className="font-medium">{user.display_name || user.username}</span>
+        <ChevronDown size={16} className={`transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border py-2 z-50">
+          {/* User info header */}
+          <div className="px-4 py-2 border-b">
+            <p className="font-medium text-gray-900">{user.display_name || user.username}</p>
+            <p className="text-sm text-gray-500">{user.email}</p>
+          </div>
+
+          {/* Menu items */}
+          <div className="py-1">
+            <Link
+              to="/profile"
+              onClick={() => setIsOpen(false)}
+              className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors"
+            >
+              <Settings size={16} />
+              Profile Settings
+            </Link>
+            <Link
+              to="/my-bets"
+              onClick={() => setIsOpen(false)}
+              className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors"
+            >
+              <Receipt size={16} />
+              My Bets
+            </Link>
+            <Link
+              to="/wallet"
+              onClick={() => setIsOpen(false)}
+              className="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors"
+            >
+              <Wallet size={16} />
+              Wallet
+            </Link>
+          </div>
+
+          {/* Web3 Wallet section */}
+          <div className="border-t py-1">
+            {isConnected ? (
+              <button
+                onClick={() => {
+                  disconnectWallet()
+                  setIsOpen(false)
+                }}
+                className="w-full flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                <span className="text-green-600">&#x26D3;</span>
+                <div className="text-left">
+                  <p className="text-sm font-medium text-green-700">Wallet Connected</p>
+                  <p className="text-xs text-gray-500">{walletAddress?.substring(0, 6)}...{walletAddress?.substring(38)}</p>
+                </div>
+              </button>
+            ) : (
+              <button
+                onClick={() => {
+                  connectWallet()
+                  setIsOpen(false)
+                }}
+                className="w-full flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                <span>&#x26D3;</span>
+                <span className="text-sm">Connect Web3 Wallet</span>
+              </button>
+            )}
+          </div>
+
+          {/* Logout */}
+          <div className="border-t py-1">
+            <button
+              onClick={() => {
+                logout()
+                setIsOpen(false)
+              }}
+              className="w-full flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-red-50 hover:text-red-600 transition-colors"
+            >
+              <LogOut size={16} />
+              Logout
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const Header = () => {
+  const { user } = useAuthStore()
 
   return (
     <header className="bg-white shadow-sm border-b">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-16">
+        <div className="flex items-center h-16">
+          {/* Logo */}
           <Link to="/" className="flex items-center">
             <h1 className="text-2xl font-bold text-primary">H2H</h1>
           </Link>
 
-          {user ? (
-            // Logged in navigation
-            <nav className="flex items-center gap-6">
-              <Link to="/sports" className="text-gray-700 hover:text-primary transition-colors">
-                Sports
-              </Link>
-              <Link to="/live" className="text-gray-700 hover:text-primary transition-colors">
-                Live
-              </Link>
-              <Link to="/new-bets" className="text-gray-700 hover:text-primary transition-colors">
-                New Bets
-              </Link>
+          {/* Left-justified navigation links */}
+          <nav className="flex items-center gap-6 ml-8">
+            <Link to="/sports" className="text-gray-700 hover:text-primary transition-colors">
+              Markets
+            </Link>
+            <Link to="/live" className="text-gray-700 hover:text-primary transition-colors">
+              Live
+            </Link>
+            <Link to="/new-bets" className="text-gray-700 hover:text-primary transition-colors">
+              New Bets
+            </Link>
+            <Link to="/how-it-works" className="text-gray-700 hover:text-primary transition-colors">
+              How It Works
+            </Link>
+            {/* Watchlist only shows for logged-in users */}
+            {user && (
               <Link to="/watchlist" className="text-gray-700 hover:text-primary transition-colors">
                 Watchlist
               </Link>
-              <RewardsDropdown />
+            )}
+            <MoreDropdown />
+            {/* Rewards Center button - styled like CoinEx */}
+            <Link
+              to="/rewards"
+              className="flex items-center gap-1.5 px-3 py-1.5 border border-orange-400 text-orange-500 rounded-full hover:bg-orange-50 transition-colors text-sm font-medium"
+            >
+              <Gift size={16} />
+              Reward Center
+            </Link>
+          </nav>
 
-              <div className="flex items-center gap-4 pl-4 border-l">
+          {/* Right side - Auth buttons or Profile */}
+          <div className="ml-auto flex items-center gap-4">
+            {user ? (
+              <>
+                {/* Admin link if admin */}
                 {user.is_admin && (
                   <Link to="/admin" className="text-gray-700 hover:text-primary transition-colors">
                     Admin
                   </Link>
                 )}
-                <Link to="/my-bets" className="text-gray-700 hover:text-primary transition-colors">
-                  My Bets
-                </Link>
-                <Link to="/wallet" className="flex items-center gap-2 text-gray-700 hover:text-primary transition-colors">
-                  <Wallet size={18} />
-                  Wallet
-                </Link>
-              </div>
-
-              {/* Web3 Wallet Connection */}
-              {isConnected ? (
-                <button
-                  onClick={disconnectWallet}
-                  className="flex items-center gap-2 px-3 py-1.5 bg-green-100 text-green-800 rounded-lg hover:bg-green-200 transition-colors text-sm font-medium"
-                >
-                  <span>⛓️</span>
-                  <span>{walletAddress?.substring(0, 6)}...{walletAddress?.substring(38)}</span>
-                </button>
-              ) : (
-                <button
-                  onClick={connectWallet}
-                  className="flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition-colors text-sm font-medium"
-                >
-                  <span>⛓️</span>
-                  <span>Connect Wallet</span>
-                </button>
-              )}
-
-              <div className="flex items-center gap-4 pl-4 border-l">
-                <Link to="/profile" className="flex items-center gap-2 text-gray-700 hover:text-primary transition-colors">
-                  <User size={18} />
-                  {user.display_name || user.username}
-                </Link>
-                <button
-                  onClick={logout}
-                  className="flex items-center gap-2 text-gray-700 hover:text-error transition-colors"
-                >
-                  <LogOut size={18} />
-                  Logout
-                </button>
-              </div>
-            </nav>
-          ) : (
-            // Non-logged in navigation
-            <nav className="flex items-center gap-6">
-              <Link to="/sports" className="text-gray-700 hover:text-primary transition-colors">
-                Sports
-              </Link>
-              <Link to="/live" className="text-gray-700 hover:text-primary transition-colors">
-                Live
-              </Link>
-              <Link to="/new-bets" className="text-gray-700 hover:text-primary transition-colors">
-                New Bets
-              </Link>
-              <Link to="/watchlist" className="text-gray-700 hover:text-primary transition-colors">
-                Watchlist
-              </Link>
-              <RewardsDropdown />
-              <Link to="/how-it-works" className="text-gray-700 hover:text-primary transition-colors">
-                How It Works
-              </Link>
-              <div className="flex items-center gap-3 pl-4 border-l">
+                {/* Profile dropdown */}
+                <ProfileDropdown />
+              </>
+            ) : (
+              <div className="flex items-center gap-3">
                 <Link to="/login">
                   <Button variant="secondary" size="sm">
                     Log In
@@ -167,8 +280,8 @@ export const Header = () => {
                   </Button>
                 </Link>
               </div>
-            </nav>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </header>

frontend/src/components/layout/RewardsLayout.tsx

@@ -13,7 +13,7 @@ const NAV_ITEMS = [
   { path: '/rewards', label: 'Overview', icon: LayoutDashboard, exact: true },
   { path: '/rewards/leaderboard', label: 'Leaderboard', icon: Trophy },
   { path: '/rewards/achievements', label: 'Achievements', icon: Medal },
-  { path: '/rewards/loot-boxes', label: 'Loot Boxes', icon: Gift },
+  { path: '/rewards/airdrops', label: 'Airdrops', icon: Gift },
   { path: '/rewards/activity', label: 'Activity', icon: Activity },
 ]