From 9029fb4f6a7131bea738c3d765131a13a29c5811 Mon Sep 17 00:00:00 2001
From: brooktewabe <brooktewabe00@gmail.com>
Date: Sun, 1 Mar 2026 14:23:23 +0300
Subject: [PATCH] betting and ui components

---
 components/betting/betslip.tsx           | 260 ++++++++++++----------
 components/betting/check-your-bet.tsx    |   6 +-
 components/betting/events-list.tsx       | 100 +++++----
 components/betting/hero-banner.tsx       |   4 +-
 components/betting/in-play-page.tsx      |  10 +-
 components/betting/live-events-list.tsx  |  34 +--
 components/betting/match-detail-view.tsx | 269 +++++++++++++++++++++++
 components/betting/reload-ticket.tsx     |   6 +-
 components/betting/sports-nav.tsx        |   2 +-
 components/betting/top-matches.tsx       | 133 ++++++-----
 components/games/game-card.tsx           |  40 ++++
 components/games/game-row.tsx            |  95 ++++++++
 components/games/gaming-sidebar.tsx      |  86 ++++++++
 components/games/virtual-sidebar.tsx     |  88 ++++++++
 14 files changed, 892 insertions(+), 241 deletions(-)
 create mode 100644 components/betting/match-detail-view.tsx
 create mode 100644 components/games/game-card.tsx
 create mode 100644 components/games/game-row.tsx
 create mode 100644 components/games/gaming-sidebar.tsx
 create mode 100644 components/games/virtual-sidebar.tsx

diff --git a/components/betting/betslip.tsx b/components/betting/betslip.tsx
index a5427f4..0be8f72 100644
--- a/components/betting/betslip.tsx
+++ b/components/betting/betslip.tsx
@@ -2,183 +2,203 @@
 
 import { useState } from "react"
 import { useBetslipStore } from "@/lib/store/betslip-store"
-import { X, ChevronDown, Trash2 } from "lucide-react"
+import { X, Save, Trash2 } from "lucide-react"
 import { cn } from "@/lib/utils"
 
-const quickStakes = [5, 10, 20, 50, 100, 200]
+const quickStakes = [10, 50, 100, 1000, 2000, 5000]
 
 export function Betslip() {
   const { bets, removeBet, clearBets, updateStake, getPotentialWin, getTotalOdds } = useBetslipStore()
-  const [activeTab, setActiveTab] = useState<"single" | "accumulator">("single")
   const [globalStake, setGlobalStake] = useState("10")
 
-  const potentialWin = getPotentialWin()
   const totalOdds = getTotalOdds()
+  const isMulti = bets.length > 1
+  const potentialWin = isMulti
+    ? Number(globalStake) * totalOdds
+    : getPotentialWin()
 
   return (
-    <div className="bg-card rounded border border-border overflow-hidden">
-      {/* Header */}
-      <div className="bg-primary px-3 py-2 flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <span className="text-[11px] font-bold text-primary-foreground uppercase">Betslip</span>
-          {bets.length > 0 && (
-            <span className="bg-primary-foreground text-primary text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center">
-              {bets.length}
-            </span>
-          )}
-        </div>
-        {bets.length > 0 && (
-          <button
-            onClick={clearBets}
-            className="text-primary-foreground/70 hover:text-primary-foreground transition-colors"
-          >
-            <Trash2 className="size-3.5" />
-          </button>
-        )}
-      </div>
-
-      {/* Tabs */}
-      {bets.length > 1 && (
-        <div className="flex border-b border-border">
-          {(["single", "accumulator"] as const).map((tab) => (
-            <button
-              key={tab}
-              onClick={() => setActiveTab(tab)}
-              className={cn(
-                "flex-1 py-1.5 text-[10px] font-semibold uppercase transition-colors",
-                activeTab === tab
-                  ? "bg-muted text-foreground border-b-2 border-primary"
-                  : "text-muted-foreground hover:text-foreground"
-              )}
-            >
-              {tab}
-            </button>
-          ))}
-        </div>
-      )}
-
-      {/* Content */}
-      <div className="p-2 space-y-2">
+    <div className="overflow-hidden">
+      <div className="space-y-3">
         {bets.length === 0 ? (
-          <div className="py-6 text-center">
-            <div className="text-2xl mb-2">🎯</div>
-            <p className="text-[11px] text-muted-foreground leading-relaxed">
-              No bets selected. Click on odds to add selections.
+          <div className="py-10 px-4 text-center">
+            <p className="text-[11px] text-muted-foreground font-medium leading-relaxed">
+              No bet has been selected. To select a bet, please click on the respective odds
             </p>
           </div>
         ) : (
           <>
-            {/* Bet items */}
+            {/* Bet cards */}
             <div className="space-y-2">
               {bets.map((bet) => (
-                <div key={bet.id} className="bg-secondary/50 rounded border border-border/50 p-2">
-                  <div className="flex items-start justify-between gap-2 mb-2">
+                <div key={bet.id} className="bg-brand-surface-light border border-border/30 p-2.5">
+                  <div className="flex items-start justify-between gap-2">
                     <div className="flex-1 min-w-0">
-                      <div className="text-[11px] font-semibold text-foreground truncate">{bet.event}</div>
-                      <div className="text-[10px] text-muted-foreground truncate">{bet.league}</div>
-                      <div className="text-[10px] text-primary font-medium mt-0.5">
-                        {bet.market}: <span className="text-foreground">{bet.selection}</span>
+                      <div className="text-[11px] font-bold text-white uppercase leading-tight truncate">
+                        {bet.event}
                       </div>
+                      <div className="text-[10px] text-white/50 uppercase mt-0.5 truncate">
+                        {bet.league}
+                      </div>
+                      <div className="flex items-center justify-between gap-2 mt-1.5">
+                        <span className="text-[10px] text-white/80">
+                          {bet.market}: <span className="font-bold text-white">{bet.selection}</span>
+                        </span>
+                        <span className="text-[11px] font-bold text-brand-primary shrink-0">{bet.odds.toFixed(2)}</span>
+                      </div>
+                      {!isMulti && (
+                        <div className="flex justify-between text-[10px] text-white/50 mt-0.5">
+                          <span>Odds</span>
+                          <span className="text-brand-primary font-bold">{bet.odds.toFixed(2)}</span>
+                        </div>
+                      )}
                     </div>
-                    <div className="flex items-center gap-1.5 shrink-0">
-                      <span className="text-sm font-bold text-primary">{bet.odds.toFixed(2)}</span>
-                      <button
-                        onClick={() => removeBet(bet.id)}
-                        className="text-muted-foreground hover:text-destructive transition-colors"
-                      >
-                        <X className="size-3.5" />
-                      </button>
-                    </div>
+                    <button
+                      onClick={() => removeBet(bet.id)}
+                      className="text-white/50 hover:text-white transition-colors shrink-0 p-0.5"
+                      aria-label="Remove bet"
+                    >
+                      <X className="size-3.5" />
+                    </button>
                   </div>
 
-                  {/* Stake input for single */}
-                  {(activeTab === "single" || bets.length === 1) && (
-                    <div>
-                      <div className="text-[10px] text-muted-foreground mb-1">Stake (ETB)</div>
-                      <div className="flex gap-1">
+                  {/* Single bet: stake on card */}
+                  {!isMulti && (
+                    <div className="mt-3 pt-3 border-t border-border/20">
+                      <div className="flex items-center gap-1 mb-2">
+                        <button
+                          type="button"
+                          onClick={() => updateStake(bet.id, Math.max(1, (bet.stake ?? 10) - 1))}
+                          className="w-7 h-7 flex items-center justify-center rounded bg-white/10 text-white text-sm font-bold hover:bg-white/20"
+                        >
+                          −
+                        </button>
                         <input
                           type="number"
                           value={bet.stake ?? 10}
-                          onChange={(e) => updateStake(bet.id, Number(e.target.value))}
-                          className="flex-1 bg-input border border-border rounded px-2 py-1 text-xs text-foreground w-full min-w-0 focus:outline-none focus:border-primary"
+                          onChange={(e) => updateStake(bet.id, Number(e.target.value) || 10)}
+                          className="flex-1 h-7 bg-brand-bg border border-border/40 px-2 text-[11px] text-white text-center font-bold focus:outline-none focus:border-brand-primary"
                           min="1"
                         />
+                        <button
+                          type="button"
+                          onClick={() => updateStake(bet.id, (bet.stake ?? 10) + 1)}
+                          className="w-7 h-7 flex items-center justify-center rounded bg-white/10 text-white text-sm font-bold hover:bg-white/20"
+                        >
+                          +
+                        </button>
                       </div>
-                      <div className="flex gap-1 mt-1 flex-wrap">
+                      <div className="flex flex-wrap gap-1.5">
                         {quickStakes.map((s) => (
                           <button
                             key={s}
                             onClick={() => updateStake(bet.id, s)}
                             className={cn(
-                              "text-[10px] px-1.5 py-0.5 rounded border transition-colors",
+                              "size-7 rounded-full text-[10px] font-bold transition-colors",
                               (bet.stake ?? 10) === s
-                                ? "bg-primary text-primary-foreground border-primary"
-                                : "border-border text-muted-foreground hover:border-primary hover:text-primary"
+                                ? "bg-brand-primary text-black"
+                                : "bg-brand-primary/20 text-brand-primary hover:bg-brand-primary/30"
                             )}
                           >
                             {s}
                           </button>
                         ))}
                       </div>
-                      {/* Potential win */}
-                      <div className="mt-1.5 flex justify-between text-[10px]">
-                        <span className="text-muted-foreground">Potential win:</span>
-                        <span className="text-primary font-semibold">
-                          {((bet.stake ?? 10) * bet.odds).toFixed(2)} ETB
-                        </span>
-                      </div>
                     </div>
                   )}
                 </div>
               ))}
             </div>
 
-            {/* Accumulator stake section */}
-            {activeTab === "accumulator" && bets.length > 1 && (
-              <div className="bg-secondary/50 rounded border border-border/50 p-2 space-y-2">
-                <div className="flex justify-between text-[11px]">
-                  <span className="text-muted-foreground">Total Odds:</span>
-                  <span className="font-bold text-primary">{totalOdds.toFixed(2)}</span>
+            {/* Single bet: potential winning below card */}
+            {!isMulti && (
+              <div className="flex justify-between items-center text-[11px] font-bold text-white">
+                <span className="text-white/70">Potential winning</span>
+                <span>{potentialWin.toFixed(2)} ETB</span>
+              </div>
+            )}
+
+            {/* Multiple bets: combined Odds, one stake, quick buttons, potential winning */}
+            {isMulti && (
+              <div className="bg-brand-surface-light border border-border/30 p-2.5 space-y-2.5">
+                <div className="flex justify-between text-[11px] font-bold text-white">
+                  <span className="text-white/70">Odds</span>
+                  <span className="text-brand-primary">{totalOdds.toFixed(2)}</span>
                 </div>
-                <div>
-                  <div className="text-[10px] text-muted-foreground mb-1">Stake (ETB)</div>
+                <div className="flex items-center gap-1">
+                  <button
+                    type="button"
+                    onClick={() => setGlobalStake(String(Math.max(1, Number(globalStake) - 1)))}
+                    className="w-7 h-7 flex items-center justify-center rounded bg-white/10 text-white text-sm font-bold hover:bg-white/20"
+                  >
+                    −
+                  </button>
                   <input
                     type="number"
                     value={globalStake}
                     onChange={(e) => setGlobalStake(e.target.value)}
-                    className="w-full bg-input border border-border rounded px-2 py-1 text-xs text-foreground focus:outline-none focus:border-primary"
+                    className="flex-1 h-7 bg-brand-bg border border-border/40 px-2 text-[11px] text-white text-center font-bold focus:outline-none focus:border-brand-primary"
                     min="1"
                   />
-                  <div className="flex gap-1 mt-1 flex-wrap">
-                    {quickStakes.map((s) => (
-                      <button
-                        key={s}
-                        onClick={() => setGlobalStake(String(s))}
-                        className={cn(
-                          "text-[10px] px-1.5 py-0.5 rounded border transition-colors",
-                          globalStake === String(s)
-                            ? "bg-primary text-primary-foreground border-primary"
-                            : "border-border text-muted-foreground hover:border-primary hover:text-primary"
-                        )}
-                      >
-                        {s}
-                      </button>
-                    ))}
-                  </div>
-                  <div className="mt-1.5 flex justify-between text-[10px]">
-                    <span className="text-muted-foreground">Potential win:</span>
-                    <span className="text-primary font-semibold">
-                      {(Number(globalStake) * totalOdds).toFixed(2)} ETB
-                    </span>
-                  </div>
+                  <button
+                    type="button"
+                    onClick={() => setGlobalStake(String(Number(globalStake) + 1))}
+                    className="w-7 h-7 flex items-center justify-center rounded bg-white/10 text-white text-sm font-bold hover:bg-white/20"
+                  >
+                    +
+                  </button>
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {quickStakes.map((s) => (
+                    <button
+                      key={s}
+                      onClick={() => setGlobalStake(String(s))}
+                      className={cn(
+                        "size-7 rounded-full text-[10px] font-bold transition-colors",
+                        Number(globalStake) === s
+                          ? "bg-brand-primary text-black"
+                          : "bg-brand-primary/20 text-brand-primary hover:bg-brand-primary/30"
+                      )}
+                    >
+                      {s}
+                    </button>
+                  ))}
+                </div>
+                <div className="flex justify-between text-[11px] font-bold text-white pt-0.5">
+                  <span className="text-white/70">Potential winning</span>
+                  <span className="text-brand-primary">{(Number(globalStake) * totalOdds).toFixed(2)} ETB</span>
                 </div>
               </div>
             )}
 
-            {/* Place bet button */}
-            <button className="w-full bg-primary text-primary-foreground text-[12px] font-bold py-2.5 rounded hover:opacity-90 active:scale-95 transition-all uppercase tracking-wide">
-              Place Bet
-            </button>
+            <div className="flex items-center gap-2 py-2 px-1 text-[10px] text-brand-primary/90">
+              <svg viewBox="0 0 24 24" className="size-4 shrink-0 fill-brand-primary" aria-hidden><path d="M12 2L1 21h22L12 2zm0 3.99L19.53 19H4.47L12 5.99zM11 10v4h2v-2h-2v-2zm0 6v2h2v-2h-2z"/></svg>
+              <span>You need to login to be able to place a bet.</span>
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                type="button"
+                className="flex-1 flex items-center justify-center gap-1.5 py-2 px-3 rounded text-[11px] font-bold text-white bg-white/10 hover:bg-white/15 border border-border/40"
+              >
+                <Save className="size-3.5" />
+                Save
+              </button>
+              <button
+                type="button"
+                onClick={clearBets}
+                className="flex items-center justify-center gap-1.5 py-2 px-3 rounded text-[11px] font-bold text-white bg-red-600/80 hover:bg-red-600 border border-red-500/50"
+              >
+                <Trash2 className="size-3.5" />
+                Clear
+              </button>
+              <button
+                type="button"
+                className="flex-1 py-2 px-3 rounded text-[11px] font-bold text-white bg-green-600 hover:bg-green-500"
+              >
+                Bet
+              </button>
+            </div>
           </>
         )}
       </div>
diff --git a/components/betting/check-your-bet.tsx b/components/betting/check-your-bet.tsx
index 9970b13..7959c75 100644
--- a/components/betting/check-your-bet.tsx
+++ b/components/betting/check-your-bet.tsx
@@ -16,19 +16,19 @@ export function CheckYourBet() {
   return (
     <div className="bg-transparent border-t border-border/20 pt-4 pb-2">
       <div className="px-1 text-center space-y-3">
-        <h3 className="text-[12px] font-bold uppercase text-[#ff9800]">Check Your Bet</h3>
+        <h3 className="text-[12px] font-bold uppercase text-brand-primary">Check Your Bet</h3>
         <p className="text-[11px] text-white">Your bet ID</p>
         <div className="flex gap-1">
           <input
             type="text"
             value={betId}
             onChange={(e) => setBetId(e.target.value)}
-            className="flex-1 bg-[#121212] border border-border/40 px-2 py-2 text-[11px] text-white outline-none focus:border-primary"
+            className="flex-1 bg-brand-bg border border-border/40 px-2 py-2 text-[11px] text-white outline-none focus:border-brand-primary"
             onKeyDown={(e) => e.key === "Enter" && handleCheck()}
           />
           <button
             onClick={handleCheck}
-             className="bg-[#ff9800] text-black px-2 py-1.5 flex items-center justify-center min-w-[32px] hover:bg-[#ffa726] transition-colors"
+             className="bg-brand-primary text-black px-2 py-1.5 flex items-center justify-center min-w-[32px] hover:bg-brand-primary-hover transition-colors"
           >
             <svg viewBox="0 0 24 24" className="size-5 fill-current"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
           </button>
diff --git a/components/betting/events-list.tsx b/components/betting/events-list.tsx
index 9fc1729..c322716 100644
--- a/components/betting/events-list.tsx
+++ b/components/betting/events-list.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
+import Link from "next/link"
 import { useSearchParams } from "next/navigation"
 import { useBetslipStore } from "@/lib/store/betslip-store"
 import { mockEvents, popularLeagues, type Event } from "@/lib/mock-data"
@@ -16,11 +17,11 @@ function OddsButton({ odds, onClick, isSelected }: {
     <button
       onClick={onClick}
       className={cn(
-        "flex items-center justify-center py-2 px-0.5 border-r border-border/10 text-[10px] transition-all min-w-0 bg-[#262626] hover:bg-[#333] h-full",
-        isSelected && "bg-[#ff9800] text-black font-bold border-none"
+        "flex items-center justify-center py-2 px-0.5 border-r border-border/10 text-[10px] transition-all min-w-0 bg-brand-surface hover:bg-white/5 h-full",
+        isSelected && "bg-brand-primary text-black font-bold border-none"
       )}
     >
-      <span className={cn("font-bold tracking-tighter", isSelected ? "text-black" : "text-[#ff9800]")}>{odds.toFixed(2)}</span>
+      <span className={cn("font-bold tracking-tighter", isSelected ? "text-black" : "text-brand-primary")}>{odds.toFixed(2)}</span>
     </button>
   )
 }
@@ -29,12 +30,12 @@ function EventRow({ event }: { event: Event }) {
   const { bets, addBet } = useBetslipStore()
   
   return (
-    <div className="bg-[#1a1a1a] border-b border-border/20 hover:bg-[#222] transition-colors h-[38px] flex items-center">
+    <div className="bg-brand-surface border-b border-border/20 hover:bg-white/5 transition-colors h-[38px] flex items-center">
        {/* Small Icons & ID Column */}
        <div className="flex items-center gap-1.5 px-2 w-[80px] shrink-0 border-r border-border/10 h-full">
          <BarChart2 className="size-3 text-muted-foreground hover:text-primary cursor-pointer shrink-0" />
          <TrendingUp className="size-3 text-muted-foreground hover:text-primary cursor-pointer shrink-0" />
-         <span className="text-[9.5px] text-[#ff9800] font-bold tabular-nums italic ml-0.5">{event.id || "01682"}</span>
+         <span className="text-[9.5px] text-brand-primary font-bold tabular-nums italic ml-0.5">{event.id || "01682"}</span>
        </div>
 
        {/* Time & Team Column */}
@@ -58,10 +59,10 @@ function EventRow({ event }: { event: Event }) {
                 isSelected={isSelected}
                 onClick={() => addBet({
                   id: betId,
-                  event: `${event.homeTeam} vs ${event.awayTeam}`,
-                  league: event.league,
+                  event: `${event.homeTeam} - ${event.awayTeam}`,
+                  league: `${event.sport} - ${event.country} - ${event.league}`,
                   market: "1X2",
-                  selection: `${event.homeTeam} (${market.label})`,
+                  selection: market.label,
                   odds: market.odds,
                 })}
               />
@@ -69,10 +70,14 @@ function EventRow({ event }: { event: Event }) {
           })}
        </div>
 
-       {/* More Markets Button */}
-       <button className="w-10 flex items-center justify-center h-full hover:bg-white/5 transition-colors border-l border-border/10 group">
+       {/* More Markets Button -> match detail page */}
+       <Link
+         href={`/event/${event.id}`}
+         className="w-10 flex items-center justify-center h-full hover:bg-white/5 transition-colors border-l border-border/10 group"
+         aria-label="View all markets"
+       >
           <Plus className="size-3 text-white group-hover:scale-110 transition-transform" />
-       </button>
+       </Link>
     </div>
   )
 }
@@ -112,26 +117,26 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
   const renderTableHeaders = () => (
     <>
       {/* Table Header Categories */}
-      <div className="bg-[#1a1a1a] border-b border-border/40 grid grid-cols-5 text-[11px] font-bold text-white uppercase text-center items-center h-9">
-         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">Main</div>
-         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">Goals</div>
-         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">Handicap</div>
-         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20 text-[9px] leading-tight">Half Time / Full Time</div>
-         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer">Correct Score</div>
+      <div className="bg-brand-surface border-b border-border/40 grid grid-cols-5 text-[11px] font-bold text-white uppercase text-center items-center h-9">
+         <div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">Main</div>
+         <div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">Goals</div>
+         <div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">Handicap</div>
+         <div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20 text-[9px] leading-tight">Half Time / Full Time</div>
+         <div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer">Correct Score</div>
       </div>
       {/* Sub Headers */}
-      <div className="bg-[#1a1a1a] border-b border-border/40 grid grid-cols-5 text-[10px] font-bold text-white uppercase text-center items-center h-8">
-         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">1st Half</div>
-         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">2nd Half</div>
-         <div className="h-full flex items-center justify-center bg-[#ff9800] text-black border-r border-border/10">Combo</div>
-         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer border-r border-border/20">Chance Mix</div>
-         <div className="h-full flex items-center justify-center hover:bg-[#222] transition-colors cursor-pointer">Home</div>
+      <div className="bg-brand-surface border-b border-border/40 grid grid-cols-5 text-[10px] font-bold text-white uppercase text-center items-center h-8">
+         <div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">1st Half</div>
+         <div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">2nd Half</div>
+         <div className="h-full flex items-center justify-center bg-brand-primary text-black border-r border-border/10">Combo</div>
+         <div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer border-r border-border/20">Chance Mix</div>
+         <div className="h-full flex items-center justify-center hover:bg-white/5 transition-colors cursor-pointer">Home</div>
       </div>
     </>
   )
 
   const renderColumnHeaders = () => (
-    <div className="bg-[#222] border-b border-white/5 h-8 flex items-center text-[9px] font-black text-white/40 uppercase">
+    <div className="bg-brand-surface border-b border-white/5 h-8 flex items-center text-[9px] font-black text-white/40 uppercase">
        <div className="w-[180px] px-3 flex items-center gap-1.5 border-r border-border/10 h-full">Main</div>
        <div className="w-[180px] flex items-center justify-center border-r border-border/10 h-full">Over/Under</div>
        <div className="flex-1 grid grid-cols-10 text-center h-full items-center tracking-tighter">
@@ -142,13 +147,13 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
   )
 
   const renderEventItem = (event: Event) => (
-    <div key={event.id} className="h-[34px] group flex items-center border-b border-white/5 bg-[#121212] hover:bg-white/5 transition-colors">
+    <div key={event.id} className="h-[34px] group flex items-center border-b border-white/5 bg-brand-bg hover:bg-white/5 transition-colors">
       {/* Stats & Icons */}
       <div className="w-[35px] flex items-center justify-center gap-1 px-2 border-r border-white/5 h-full opacity-40 group-hover:opacity-100">
         <BarChart2 className="size-3 cursor-pointer hover:text-primary" />
       </div>
       {/* ID */}
-      <div className="w-[45px] text-[10px] font-black text-[#ff9800] italic tabular-nums text-center border-r border-white/5 h-full flex items-center justify-center">
+      <div className="w-[45px] text-[10px] font-black text-brand-primary italic tabular-nums text-center border-r border-white/5 h-full flex items-center justify-center">
         {event.id}
       </div>
       {/* Time */}
@@ -156,10 +161,13 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
         <span>{event.time}</span>
         <span className="text-[7px] text-white/30 uppercase mt-0.5">PM</span>
       </div>
-      {/* Event Name */}
-      <div className="flex-1 px-4 text-[10.5px] font-black text-white truncate max-w-[200px]">
+      {/* Event Name -> same route as + icon (match detail) */}
+      <Link
+        href={`/event/${event.id}`}
+        className="flex-1 px-4 text-[10.5px] font-black text-white truncate max-w-[200px] hover:text-brand-primary transition-colors"
+      >
         {event.homeTeam} - {event.awayTeam}
-      </div>
+      </Link>
       {/* Odds Grid */}
       <div className="flex-1 grid grid-cols-10 h-full">
         {event.markets.slice(0, 10).map((market) => {
@@ -170,15 +178,15 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
               key={market.id}
               onClick={() => addBet({
                 id: betId,
-                event: `${event.homeTeam} vs ${event.awayTeam}`,
-                league: event.league,
+                event: `${event.homeTeam} - ${event.awayTeam}`,
+                league: `${event.sport} - ${event.country} - ${event.league}`,
                 market: "1X2",
-                selection: `${event.homeTeam} (${market.label})`,
+                selection: market.label,
                 odds: market.odds,
               })}
               className={cn(
                 "flex items-center justify-center text-[10.5px] font-black tabular-nums transition-all border-r border-white/5",
-                isSelected ? "bg-[#ff9800] text-black" : "text-[#ff9800] hover:bg-white/5"
+                isSelected ? "bg-brand-primary text-black" : "text-brand-primary hover:bg-white/5"
               )}
             >
               {market.odds.toFixed(2)}
@@ -186,10 +194,14 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
           )
         })}
       </div>
-      {/* More Button */}
-      <button className="w-10 flex items-center justify-center h-full hover:bg-white/5 transition-colors border-l border-white/5 text-white/40">
+      {/* More Button -> match detail page */}
+      <Link
+        href={`/event/${event.id}`}
+        className="w-10 flex items-center justify-center h-full hover:bg-white/5 transition-colors border-l border-white/5 text-white/40 hover:text-white"
+        aria-label="View all markets"
+      >
         <Plus className="size-3" />
-      </button>
+      </Link>
     </div>
   )
 
@@ -202,9 +214,9 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
     }, {} as Record<string, Event[]>)
 
     return (
-      <div className="flex flex-col bg-[#121212] rounded overflow-hidden shadow-2xl">
+      <div className="flex flex-col bg-brand-bg rounded overflow-hidden shadow-2xl">
         {/* League Header / Breadcrumbs */}
-        <div className="bg-[#1a1a1a] px-3 py-2 flex items-center justify-between border-b border-border/20">
+        <div className="bg-brand-surface px-3 py-2 flex items-center justify-between border-b border-border/20">
           <div className="flex items-center gap-2 text-[11px] font-bold text-white/60">
              <Plus className="size-3 cursor-pointer hover:text-white" />
              <div className="flex items-center gap-1.5">
@@ -220,7 +232,7 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
         </div>
 
         {/* Large Market Tab Grid */}
-        <div className="grid grid-cols-5 bg-[#121212] border-b border-border/10">
+        <div className="grid grid-cols-5 bg-brand-bg border-b border-border/10">
            {[
              { label: "Main", active: true }, { label: "Goals" }, { label: "Handicap" }, { label: "Half Time / Full Time" }, { label: "Correct Score" },
              { label: "1st Half" }, { label: "2nd Half" }, { label: "Asian Markets" }, { label: "Corners" }, { label: "Home" }
@@ -229,7 +241,7 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
                key={i} 
                className={cn(
                  "h-8 border-r border-b border-border/10 flex items-center justify-center text-[10px] font-black uppercase transition-all",
-                 m.active ? "bg-[#ff9800] text-black" : "text-white/60 hover:bg-[#222]"
+                 m.active ? "bg-brand-primary text-black" : "text-white/60 hover:bg-brand-surface"
                )}
              >
                {m.label}
@@ -244,7 +256,7 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
         <div className="overflow-y-auto max-h-[700px]">
           {Object.entries(groupedEvents).map(([date, dateEvents]) => (
             <div key={date} className="flex flex-col">
-              <div className="bg-[#1a1a1a] px-2 py-1 text-[10px] font-black text-white border-b border-white/5">
+              <div className="bg-brand-surface px-2 py-1 text-[10px] font-black text-white border-b border-white/5">
                 {date}
               </div>
               {dateEvents.map(event => renderEventItem(event))}
@@ -263,12 +275,12 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
   }, {} as Record<string, Event[]>)
 
   return (
-    <div className="flex flex-col bg-[#121212] rounded overflow-hidden">
+    <div className="flex flex-col bg-brand-bg rounded overflow-hidden">
       <div className="flex flex-col">
         {Object.entries(homeEventsByLeague).map(([leagueName, leagueEvents]) => (
           <div key={leagueName} className="flex flex-col border-b border-white/5 last:border-none">
             {/* League Box Header */}
-            <div className="bg-[#2a2a2a] px-3 py-1.5 text-[10px] font-bold text-[#ff9800] uppercase border-y border-border/20 flex items-center justify-between">
+            <div className="bg-brand-surface-light px-3 py-1.5 text-[10px] font-bold text-brand-primary uppercase border-y border-border/20 flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <span className="text-[14px]">
                   {popularLeagues.find(l => l.name === leagueName)?.icon || 
@@ -285,7 +297,7 @@ export function EventsList({ filter = "All", sport = "all", search = "" }: {
             </div>
 
             {/* Column Headers for each league box */}
-            <div className="bg-[#222] px-3 py-1 flex items-center text-[8px] font-black text-white/40 uppercase border-b border-border/20">
+            <div className="bg-brand-surface px-3 py-1 flex items-center text-[8px] font-black text-white/40 uppercase border-b border-border/20">
                <div className="w-[180px] flex gap-4">
                   <span className="w-5 text-center">Stats</span>
                   <span className="w-6">ID</span>
diff --git a/components/betting/hero-banner.tsx b/components/betting/hero-banner.tsx
index 28cc6e6..30ccfca 100644
--- a/components/betting/hero-banner.tsx
+++ b/components/betting/hero-banner.tsx
@@ -19,7 +19,7 @@ export function HeroBanner() {
   }, [])
 
   return (
-    <div className="w-full h-[240px] md:h-[300px] relative overflow-hidden rounded-none group shadow-lg bg-[#111]">
+    <div className="w-full h-[240px] md:h-[300px] relative overflow-hidden rounded-none group shadow-lg bg-brand-bg">
       {images.map((src, index) => (
         <img
           key={src}
@@ -52,7 +52,7 @@ export function HeroBanner() {
             key={index}
             onClick={() => setCurrentIndex(index)}
             className={`w-1.5 h-1.5 rounded-full transition-all ${
-              index === currentIndex ? "bg-[#ff9800] scale-125" : "bg-white/40"
+              index === currentIndex ? "bg-brand-primary scale-125" : "bg-white/40"
             }`}
           />
         ))}
diff --git a/components/betting/in-play-page.tsx b/components/betting/in-play-page.tsx
index b9c030e..a3b6be3 100644
--- a/components/betting/in-play-page.tsx
+++ b/components/betting/in-play-page.tsx
@@ -1,3 +1,6 @@
+"use client"
+
+import { useState } from "react"
 import { InPlayHeader } from "@/components/betting/in-play-header"
 import { QuickFilterBar } from "@/components/betting/quick-filter-bar"
 import { SearchEvent } from "@/components/betting/search-event"
@@ -5,11 +8,14 @@ import { BetServices } from "@/components/betting/bet-services"
 import { EventsList } from "@/components/betting/events-list"
 
 export function InPlayPage() {
+  const [activeFilter, setActiveFilter] = useState("All")
+  const [searchQuery, setSearchQuery] = useState("")
+
   return (
     <div className="flex flex-col gap-3">
       <InPlayHeader />
-      <QuickFilterBar />
-      <SearchEvent />
+      <QuickFilterBar active={activeFilter} onChange={setActiveFilter} />
+      <SearchEvent value={searchQuery} onChange={setSearchQuery} />
       <BetServices />
       <EventsList />
     </div>
diff --git a/components/betting/live-events-list.tsx b/components/betting/live-events-list.tsx
index 5615e9a..6803c28 100644
--- a/components/betting/live-events-list.tsx
+++ b/components/betting/live-events-list.tsx
@@ -15,16 +15,16 @@ function LiveEventRow({ event, isNoOdds }: { event: Event, isNoOdds?: boolean })
   const period = "H2"
 
   return (
-    <div className="bg-[#121212] border-b border-white/5 hover:bg-white/5 transition-colors h-[50px] flex items-center group">
+    <div className="bg-brand-bg border-b border-white/5 hover:bg-white/5 transition-colors h-[50px] flex items-center group">
        {/* Match Info Column (Time & Score) */}
        <div className="flex items-center gap-3 px-3 w-[360px] shrink-0 h-full border-r border-white/5">
          <div className="flex flex-col text-[10px] font-black leading-tight italic w-[55px] shrink-0 tabular-nums">
-            <span className="text-[#ff9800]">{time}</span>
+            <span className="text-brand-primary">{time}</span>
             <span className="text-white/40">{period}</span>
          </div>
          <div className="flex items-center min-w-0 flex-1 gap-2">
             <span className="text-[11.5px] font-black text-white truncate italic uppercase">
-              {event.homeTeam} <span className="text-[#ff9800] mx-1 tabular-nums">{score}</span> {event.awayTeam}
+              {event.homeTeam} <span className="text-brand-primary mx-1 tabular-nums">{score}</span> {event.awayTeam}
             </span>
          </div>
          <div className="flex items-center gap-2 shrink-0 px-1 opacity-20 group-hover:opacity-100 transition-opacity">
@@ -36,7 +36,7 @@ function LiveEventRow({ event, isNoOdds }: { event: Event, isNoOdds?: boolean })
        {/* Odds Grid or Placeholder */}
        <div className="flex-1 h-full flex items-center">
           {isNoOdds ? (
-             <div className="flex-1 h-full bg-[#161616] flex items-center justify-center text-[10.5px] font-black text-white/20 uppercase italic tracking-tight">
+             <div className="flex-1 h-full bg-brand-surface-light flex items-center justify-center text-[10.5px] font-black text-white/20 uppercase italic tracking-tight">
                 Sorry, no odds for this match
              </div>
           ) : (
@@ -48,16 +48,16 @@ function LiveEventRow({ event, isNoOdds }: { event: Event, isNoOdds?: boolean })
                         key={m.id}
                         onClick={() => addBet({
                           id: `${event.id}-${m.id}`,
-                          event: `${event.homeTeam} vs ${event.awayTeam}`,
-                          league: event.league,
+                          event: `${event.homeTeam} - ${event.awayTeam}`,
+                          league: `${event.sport} - ${event.country} - ${event.league}`,
                           market: "1X2",
-                          selection: `${m.label}`,
+                          selection: m.label,
                           odds: m.odds,
                         })}
-                        className="bg-[#1a1a1a] hover:bg-[#2a2a2a] flex items-center justify-between px-4 h-full border-r border-white/5 transition-colors group/btn"
+                        className="bg-brand-bg hover:bg-white/5 flex items-center justify-between px-4 h-full border-r border-white/5 transition-colors group/btn"
                       >
                          <span className="text-[10px] font-black text-white/40 group-hover/btn:text-white uppercase">{labels[idx]}</span>
-                         <span className="text-[11px] font-black text-[#ff9800] tabular-nums">{m.odds.toFixed(2)}</span>
+                         <span className="text-[11px] font-black text-brand-primary tabular-nums">{m.odds.toFixed(2)}</span>
                       </button>
                    )
                 })}
@@ -66,7 +66,7 @@ function LiveEventRow({ event, isNoOdds }: { event: Event, isNoOdds?: boolean })
        </div>
        
        {/* Right Indicator */}
-       <div className="w-[4px] bg-[#ff9800] h-full" />
+       <div className="w-[4px] bg-brand-primary h-full" />
     </div>
   )
 }
@@ -124,9 +124,9 @@ export function LiveEventsList() {
   ]
 
   return (
-    <div className="flex flex-col min-h-screen bg-[#111]">
+    <div className="flex flex-col min-h-screen bg-brand-bg">
       {/* Sport Navigation Carousel */}
-      <div className="bg-[#1a1a1a] border-b border-border/20 px-2 flex items-center h-[54px] overflow-x-auto scrollbar-hide">
+      <div className="bg-brand-surface border-b border-border/20 px-2 flex items-center h-[54px] overflow-x-auto scrollbar-hide">
          <div className="flex items-center gap-0 h-full">
             {/* Favourites & Prematch */}
             <button className="flex flex-col items-center justify-center px-4 h-full border-r border-white/5 min-w-[70px]">
@@ -144,19 +144,19 @@ export function LiveEventsList() {
                  key={sport.id}
                  className={cn(
                    "flex flex-col items-center justify-center px-3 h-full border-r border-white/5 min-w-[75px] relative transition-colors",
-                   sport.active ? "bg-black/20" : "hover:bg-white/5"
+                   sport.active ? "bg-white/5" : "hover:bg-white/5"
                  )}
                >
                  <span className="absolute top-1 right-2 text-[8.5px] font-black text-white/40">{sport.count}</span>
                  <span className="text-[16px]">{sport.icon}</span>
                  <span className={cn(
                    "text-[9px] font-bold uppercase mt-1 tracking-tighter whitespace-nowrap",
-                   sport.active ? "text-[#ff9800]" : "text-white/40"
+                   sport.active ? "text-brand-primary" : "text-white/40"
                  )}>
                    {sport.label}
                  </span>
                  {sport.active && (
-                   <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-[#ff9800]" />
+                   <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-brand-primary" />
                  )}
                </button>
             ))}
@@ -164,7 +164,7 @@ export function LiveEventsList() {
       </div>
 
       {/* Category Header (Soccer) */}
-      <div className="bg-[#009688] px-3 py-1.5 flex items-center gap-2 border-l-[4px] border-[#ff9800]">
+      <div className="bg-brand-primary px-3 py-1.5 flex items-center gap-2 border-l-[4px] border-brand-primary">
          <span className="text-[16px]">⚽</span>
          <h2 className="text-[14px] font-black text-white uppercase tracking-tight">Soccer</h2>
       </div>
@@ -174,7 +174,7 @@ export function LiveEventsList() {
         {liveMatches.map((group, gIdx) => (
           <div key={gIdx} className="flex flex-col">
             {/* League Header */}
-            <div className="bg-[#1a1a1a] px-3 py-1 border-b border-border/10 flex items-center gap-2">
+            <div className="bg-brand-surface px-3 py-1 border-b border-border/10 flex items-center gap-2">
                <img src={group.flag} width="14" alt={group.league} className="rounded-sm opacity-60" />
                <span className="text-[9.5px] font-black text-white/60 uppercase tracking-widest leading-none">
                   {group.league}
diff --git a/components/betting/match-detail-view.tsx b/components/betting/match-detail-view.tsx
new file mode 100644
index 0000000..d73f1e0
--- /dev/null
+++ b/components/betting/match-detail-view.tsx
@@ -0,0 +1,269 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { useBetslipStore } from "@/lib/store/betslip-store"
+import {
+  getEventDetailMarkets,
+  getCardsBookingsMarkets,
+  type Event,
+  type DetailMarketSection,
+} from "@/lib/mock-data"
+import { cn } from "@/lib/utils"
+import { ChevronDown, ChevronUp } from "lucide-react"
+
+const MARKET_CATEGORIES = [
+  "Betbuilder",
+  "All",
+  "Main",
+  "Goals",
+  "Handicap",
+  "1st Half",
+  "2nd Half",
+  "Combo",
+  "Chance Mix",
+  "Home",
+  "Half Time / Full Time",
+  "Away",
+  "Correct Score",
+  "Asian Markets",
+  "Corners",
+  "Minutes",
+  "Cards/Bookings",
+  "Points Handicap",
+  "Total Points",
+  "Team 1",
+  "Team 2",
+  "Other",
+  "Handicap Goals",
+  "Total Goals",
+  "Combo",
+  "Specials",
+]
+
+function MarketSectionBlock({
+  section,
+  event,
+  marketName,
+  isExpanded,
+  onToggle,
+}: {
+  section: DetailMarketSection
+  event: Event
+  marketName: string
+  isExpanded: boolean
+  onToggle: () => void
+}) {
+  const { bets, addBet } = useBetslipStore()
+  const hasOutcomes = section.outcomes.length > 0
+
+  return (
+    <div className="bg-brand-surface-light border-b border-white/5">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-white/5 transition-colors"
+      >
+        <span className="text-[11px] font-bold text-white uppercase">
+          {section.title}
+        </span>
+        {isExpanded ? (
+          <ChevronUp className="size-4 text-white/60" />
+        ) : (
+          <ChevronDown className="size-4 text-white/60" />
+        )}
+      </button>
+      {isExpanded && hasOutcomes && (
+        <div className="px-3 pb-3 space-y-1.5">
+          {section.outcomes.length > 2 && section.outcomes.length % 2 === 0 ? (
+            <div className="grid grid-cols-2 gap-x-4 gap-y-1.5">
+              {section.outcomes.map((outcome) => {
+                const betId = `${event.id}-${section.id}-${outcome.label.replace(/\s/g, "-").toLowerCase()}`
+                const isSelected = bets.some((b) => b.id === betId)
+                return (
+                  <div key={outcome.label} className="flex items-center justify-between gap-2">
+                    <span className="text-[11px] text-white/90 truncate">{outcome.label}</span>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        addBet({
+                          id: betId,
+                          event: `${event.homeTeam} - ${event.awayTeam}`,
+                          league: `${event.sport} - ${event.country} - ${event.league}`,
+                          market: marketName,
+                          selection: outcome.label,
+                          odds: outcome.odds,
+                        })
+                      }
+                      className={cn(
+                        "min-w-[52px] px-2 py-1 rounded text-[11px] font-bold tabular-nums text-center transition-all shrink-0",
+                        isSelected ? "bg-brand-primary text-black" : "text-brand-primary hover:bg-white/5"
+                      )}
+                    >
+                      {outcome.odds.toFixed(2)}
+                    </button>
+                  </div>
+                )
+              })}
+            </div>
+          ) : (
+            section.outcomes.map((outcome) => {
+              const betId = `${event.id}-${section.id}-${outcome.label.replace(/\s/g, "-").toLowerCase()}`
+              const isSelected = bets.some((b) => b.id === betId)
+              return (
+                <div
+                  key={outcome.label}
+                  className="flex items-center justify-between gap-3 py-1"
+                >
+                  <span className="text-[11px] text-white/90">{outcome.label}</span>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      addBet({
+                        id: betId,
+                        event: `${event.homeTeam} - ${event.awayTeam}`,
+                        league: `${event.sport} - ${event.country} - ${event.league}`,
+                        market: marketName,
+                        selection: outcome.label,
+                        odds: outcome.odds,
+                      })
+                    }
+                    className={cn(
+                      "min-w-[52px] px-2 py-1 rounded text-[11px] font-bold tabular-nums text-center transition-all shrink-0",
+                      isSelected ? "bg-brand-primary text-black" : "text-brand-primary hover:bg-white/5"
+                    )}
+                  >
+                    {outcome.odds.toFixed(2)}
+                  </button>
+                </div>
+              )
+            })
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function MatchDetailView({ event }: { event: Event }) {
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
+    "bookings-1x2": true,
+    "sending-off": true,
+    "1st-booking": true,
+    "1st-half-bookings-1x2": true,
+    "booking-points-ou": true,
+    "1st-half-1st-booking": true,
+  })
+  const [activeCategory, setActiveCategory] = useState("Cards/Bookings")
+
+  const detailMarkets = getEventDetailMarkets(event.id)
+  const cardsBookings = getCardsBookingsMarkets(event.id)
+
+  const toggleSection = (id: string) => {
+    setExpandedSections((prev) => ({ ...prev, [id]: !prev[id] }))
+  }
+
+  const breadcrumbLeague =
+    event.league === "Premier League"
+      ? "England - Premier League"
+      : `${event.country} - ${event.league}`
+
+  const isCardsBookings = activeCategory === "Cards/Bookings"
+  const leftSections = isCardsBookings ? cardsBookings.left : detailMarkets
+  const rightSections = isCardsBookings ? cardsBookings.right : []
+
+  return (
+    <div className="flex flex-col bg-brand-bg rounded overflow-hidden">
+      {/* Breadcrumb: back arrow, ellipsis, path */}
+      <div className="bg-brand-surface px-3 py-2 border-b border-border/20">
+        <Link
+          href="/"
+          className="flex items-center gap-2 text-[11px] font-bold text-white/70 hover:text-brand-primary transition-colors"
+        >
+          <span className="text-white/80">&lt;</span>
+          <span>...</span>
+          <span>Football {breadcrumbLeague} / {event.homeTeam} vs. {event.awayTeam}</span>
+        </Link>
+        <h1 className="text-[15px] font-bold text-white mt-2">
+          {breadcrumbLeague}
+        </h1>
+      </div>
+
+      {/* Match header */}
+      <div className="bg-brand-surface px-4 py-5 border-b border-border/20">
+        <div className="flex items-center justify-center gap-10">
+          <div className="flex flex-col items-center gap-2">
+            <div className="w-16 h-20 rounded-md bg-brand-bg border border-white/10 flex items-center justify-center">
+              <span className="text-[10px] font-black text-white/60 uppercase">
+                {event.homeTeam.slice(0, 2)}
+              </span>
+            </div>
+            <span className="text-[13px] font-bold text-white">{event.homeTeam}</span>
+          </div>
+          <span className="text-[12px] font-black text-white/50 uppercase">VS</span>
+          <div className="flex flex-col items-center gap-2">
+            <div className="w-16 h-20 rounded-md bg-brand-bg border border-white/10 flex items-center justify-center">
+              <span className="text-[10px] font-black text-white/60 uppercase">
+                {event.awayTeam.slice(0, 2)}
+              </span>
+            </div>
+            <span className="text-[13px] font-bold text-white">{event.awayTeam}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Category tabs: horizontal scroll, selected = darker grey */}
+      <div className="flex overflow-x-auto gap-1 p-2 bg-brand-bg border-b border-border/20 scrollbar-hide">
+        {MARKET_CATEGORIES.map((label) => (
+          <button
+            key={label}
+            type="button"
+            onClick={() => setActiveCategory(label)}
+            className={cn(
+              "px-3 py-1.5 text-[10px] font-bold uppercase whitespace-nowrap rounded transition-colors shrink-0",
+              activeCategory === label
+                ? "bg-brand-surface-light text-white border border-white/10"
+                : "text-white/60 hover:text-white hover:bg-white/5"
+            )}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {/* Two-column grid of market sections */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-0 bg-brand-surface-light">
+          {/* Left column */}
+          <div className="border-r border-white/5">
+            {leftSections.map((section) => (
+              <MarketSectionBlock
+                key={section.id}
+                section={section}
+                event={event}
+                marketName={section.title}
+                isExpanded={expandedSections[section.id] ?? false}
+                onToggle={() => toggleSection(section.id)}
+              />
+            ))}
+          </div>
+          {/* Right column (Cards/Bookings only) */}
+          {rightSections.length > 0 && (
+            <div>
+              {rightSections.map((section) => (
+                <MarketSectionBlock
+                  key={section.id}
+                  section={section}
+                  event={event}
+                  marketName={section.title}
+                  isExpanded={expandedSections[section.id] ?? false}
+                  onToggle={() => toggleSection(section.id)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/betting/reload-ticket.tsx b/components/betting/reload-ticket.tsx
index 9ab5e60..f934014 100644
--- a/components/betting/reload-ticket.tsx
+++ b/components/betting/reload-ticket.tsx
@@ -8,16 +8,16 @@ export function ReloadTicket() {
   return (
     <div className="bg-transparent border-t border-border/20 pt-4 pb-2">
       <div className="px-1 text-center space-y-3">
-        <h3 className="text-[12px] font-bold uppercase text-[#ff9800]">Reload Ticket</h3>
+        <h3 className="text-[12px] font-bold uppercase text-brand-primary">Reload Ticket</h3>
         <p className="text-[11px] text-white">Insert the code to load</p>
         <div className="flex gap-1">
           <input
             type="text"
             value={code}
             onChange={(e) => setCode(e.target.value)}
-            className="flex-1 bg-[#121212] border border-border/40 px-2 py-2 text-[11px] text-white outline-none focus:border-primary"
+            className="flex-1 bg-brand-bg border border-border/40 px-2 py-2 text-[11px] text-white outline-none focus:border-brand-primary"
           />
-          <button className="bg-[#ff9800] text-black px-2 py-1.5 flex items-center justify-center min-w-[32px] hover:bg-[#ffa726] transition-colors">
+          <button className="bg-brand-primary text-black px-2 py-1.5 flex items-center justify-center min-w-[32px] hover:bg-brand-primary-hover transition-colors">
             <svg viewBox="0 0 24 24" className="size-5 fill-current"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
           </button>
         </div>
diff --git a/components/betting/sports-nav.tsx b/components/betting/sports-nav.tsx
index 44c3332..ae3f6d8 100644
--- a/components/betting/sports-nav.tsx
+++ b/components/betting/sports-nav.tsx
@@ -16,7 +16,7 @@ const sports = [
 export function SportsNav() {
   return (
     <Tabs defaultValue="football" className="w-full">
-      <TabsList variant="hs-nav" className="h-auto">
+      <TabsList variant="hs-nav" className="min-h-14! h-auto! py-2">
         {sports.map((sport) => (
           <TabsTrigger 
             key={sport.id} 
diff --git a/components/betting/top-matches.tsx b/components/betting/top-matches.tsx
index 824e905..e1fefef 100644
--- a/components/betting/top-matches.tsx
+++ b/components/betting/top-matches.tsx
@@ -1,5 +1,8 @@
+"use client"
+
 import { ChevronRight } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { useBetslipStore } from "@/lib/store/betslip-store"
+import { cn } from "@/lib/utils"
 
 const topMatches = [
   {
@@ -45,58 +48,90 @@ const topMatches = [
 ]
 
 export function TopMatches() {
+  const { bets, addBet } = useBetslipStore()
+
   return (
     <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide -mx-1 px-1">
-      {topMatches.map((match) => (
-        <div 
-          key={match.id} 
-          className="min-w-[280px] bg-[#222] border border-border/20 rounded-sm overflow-hidden flex flex-col relative group"
-        >
-          {/* Top Label Ribbon */}
-          <div className="absolute top-0 right-0 w-12 h-12 overflow-hidden z-10 pointer-events-none">
-            <div className="absolute top-[6px] right-[-14px] bg-[#ff9800] text-black text-[8px] font-black py-0.5 px-6 rotate-45 shadow-sm uppercase tracking-tighter">
-              TOP
+      {topMatches.map((match) => {
+        const eventName = `${match.homeTeam} - ${match.awayTeam}`
+        const leagueForBet = `Football - ${match.league}`
+        const outcomes = [
+          { key: "1", label: "1", odds: match.odds.home },
+          { key: "x", label: "X", odds: match.odds.draw },
+          { key: "2", label: "2", odds: match.odds.away },
+        ] as const
+        return (
+          <div 
+            key={match.id} 
+            className="min-w-[280px] bg-brand-surface border border-border/20 rounded-sm overflow-hidden flex flex-col relative group"
+          >
+            {/* Top Label Ribbon */}
+            <div className="absolute top-0 right-0 w-12 h-12 overflow-hidden z-10 pointer-events-none">
+              <div className="absolute top-[6px] right-[-14px] bg-brand-primary text-black text-[8px] font-black py-0.5 px-6 rotate-45 shadow-sm uppercase tracking-tighter">
+                TOP
+              </div>
+            </div>
+
+            <div className="bg-brand-bg px-3 py-1.5 flex items-center justify-between text-[10px] text-muted-foreground border-b border-border/10">
+              <div className="flex items-center gap-1">
+                <span className="font-bold text-brand-primary">{match.league}</span>
+                <span className="font-black text-white ml-1 italic">{match.time}</span>
+              </div>
+              <ChevronRight className="size-3 text-white/20 mr-4" />
+            </div>
+
+            <div className="p-3 flex flex-col gap-3">
+               <div className="flex items-center justify-between gap-1">
+                  <div className="flex items-center gap-2 flex-1 min-w-0">
+                     <div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
+                     <span className="text-[11px] font-black text-white truncate uppercase italic">{match.homeTeam}</span>
+                  </div>
+                  <span className="text-brand-primary text-[9.5px] font-black italic shrink-0 px-2 opacity-60">VS</span>
+                  <div className="flex items-center gap-2 flex-1 min-w-0 justify-end">
+                     <span className="text-[11px] font-black text-white truncate uppercase italic text-right">{match.awayTeam}</span>
+                     <div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
+                  </div>
+               </div>
+            </div>
+
+            <div className="grid grid-cols-3 gap-[1px] bg-white/5 mx-2 mb-2 rounded-sm overflow-hidden border border-white/5">
+               {outcomes.map(({ key, label, odds }) => {
+                 const betId = `${match.id}-${key}`
+                 const isSelected = bets.some((b) => b.id === betId)
+                 return (
+                   <button
+                     key={key}
+                     type="button"
+                     onClick={() =>
+                       addBet({
+                         id: betId,
+                         event: eventName,
+                         league: leagueForBet,
+                         market: "1X2",
+                         selection: label,
+                         odds,
+                       })
+                     }
+                     className={cn(
+                       "flex items-center justify-between px-2.5 py-1.5 transition-colors group/btn border-x border-white/5 first:border-x-0",
+                       isSelected
+                         ? "bg-brand-primary text-black"
+                         : "bg-brand-bg hover:bg-brand-surface-light"
+                     )}
+                   >
+                     <span className={cn("text-[10px] font-black", isSelected ? "text-black" : "text-white/40 group-hover/btn:text-white")}>
+                       {label}
+                     </span>
+                     <span className={cn("text-[11px] font-black tabular-nums", isSelected ? "text-black" : "text-brand-primary")}>
+                       {odds.toFixed(2)}
+                     </span>
+                   </button>
+                 )
+               })}
             </div>
           </div>
-
-          <div className="bg-[#1a1a1a] px-3 py-1.5 flex items-center justify-between text-[10px] text-muted-foreground border-b border-border/10">
-            <div className="flex items-center gap-1">
-              <span className="font-bold text-[#ff9800]">{match.league}</span>
-              <span className="font-black text-white ml-1 italic">{match.time}</span>
-            </div>
-            <ChevronRight className="size-3 text-white/20 mr-4" />
-          </div>
-
-          <div className="p-3 flex flex-col gap-3">
-             <div className="flex items-center justify-between gap-1">
-                <div className="flex items-center gap-2 flex-1 min-w-0">
-                   <div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
-                   <span className="text-[11px] font-black text-white truncate uppercase italic">{match.homeTeam}</span>
-                </div>
-                <span className="text-[#ff9800] text-[9.5px] font-black italic shrink-0 px-2 opacity-60">VS</span>
-                <div className="flex items-center gap-2 flex-1 min-w-0 justify-end">
-                   <span className="text-[11px] font-black text-white truncate uppercase italic text-right">{match.awayTeam}</span>
-                   <div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
-                </div>
-             </div>
-          </div>
-
-          <div className="grid grid-cols-3 gap-[1px] bg-white/5 mx-2 mb-2 rounded-sm overflow-hidden border border-white/5">
-             <button className="bg-[#1a1a1a] hover:bg-[#333] flex items-center justify-between px-2.5 py-1.5 transition-colors group/btn">
-                <span className="text-[10px] font-black text-white/40 group-hover/btn:text-white">1</span>
-                <span className="text-[11px] font-black text-[#ff9800] tabular-nums">{match.odds.home.toFixed(2)}</span>
-             </button>
-             <button className="bg-[#1a1a1a] hover:bg-[#333] flex items-center justify-between px-2.5 py-1.5 transition-colors border-x border-white/5 group/btn">
-                <span className="text-[10px] font-black text-white/40 group-hover/btn:text-white">X</span>
-                <span className="text-[11px] font-black text-[#ff9800] tabular-nums">{match.odds.draw.toFixed(2)}</span>
-             </button>
-             <button className="bg-[#1a1a1a] hover:bg-[#333] flex items-center justify-between px-2.5 py-1.5 transition-colors group/btn">
-                <span className="text-[10px] font-black text-white/40 group-hover/btn:text-white">2</span>
-                <span className="text-[11px] font-black text-[#ff9800] tabular-nums">{match.odds.away.toFixed(2)}</span>
-             </button>
-          </div>
-        </div>
-      ))}
+        )
+      })}
     </div>
   )
 }
diff --git a/components/games/game-card.tsx b/components/games/game-card.tsx
new file mode 100644
index 0000000..2fb58ca
--- /dev/null
+++ b/components/games/game-card.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import Image from "next/image"
+import { cn } from "@/lib/utils"
+
+interface GameCardProps {
+  id: string
+  title: string
+  image: string
+  provider?: string
+}
+
+export function GameCard({ id, title, image, provider }: GameCardProps) {
+  return (
+    <div className="group cursor-pointer shrink-0 w-[160px] md:w-[180px]">
+      <div className="relative aspect-[4/3] rounded-md overflow-hidden bg-brand-surface border border-white/5 transition-transform duration-300 group-hover:scale-[1.02] group-hover:border-brand-primary/50">
+        <Image
+          src={image}
+          alt={title}
+          fill
+          className="object-cover"
+          unoptimized
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-2">
+          <button className="bg-brand-primary text-black text-[10px] font-black py-1 px-3 rounded uppercase self-center hover:bg-brand-primary-hover transition-colors">
+            Play Now
+          </button>
+        </div>
+      </div>
+      <div className="mt-2 text-center">
+        <h3 className="text-[11px] font-bold text-white/90 truncate group-hover:text-brand-primary transition-colors">
+          {title}
+        </h3>
+        {provider && (
+          <p className="text-[9px] text-white/40 uppercase font-medium mt-0.5">{provider}</p>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/games/game-row.tsx b/components/games/game-row.tsx
new file mode 100644
index 0000000..4e30c4f
--- /dev/null
+++ b/components/games/game-row.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { useRef } from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { GameCard } from "./game-card"
+import { cn } from "@/lib/utils"
+
+interface GameRowProps {
+  title: string
+  games: any[]
+  showSeeMore?: boolean
+  rows?: 1 | 2 | 3
+}
+
+export function GameRow({ title, games, showSeeMore = true, rows = 1 }: GameRowProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  const scroll = (direction: "left" | "right") => {
+    if (scrollRef.current) {
+      const scrollAmount = direction === "left" ? -600 : 600
+      scrollRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" })
+    }
+  }
+
+  // Chunk games into rows if rows > 1
+  const renderGames = () => {
+    if (rows === 1) {
+      return games.map((game, idx) => (
+        <div key={idx} style={{ scrollSnapAlign: "start" }}>
+          <GameCard {...game} />
+        </div>
+      ))
+    }
+
+    // For multi-row, we can use a grid with horizontal scroll on the container
+    // or wrap items. The requirement "3*6 horizontally scrollable" suggests
+    // a grid that moves as a block or multi-row horizontal layout.
+    return (
+      <div className={cn(
+        "grid grid-flow-col gap-4 pb-2",
+        rows === 2 ? "grid-rows-2" : rows === 3 ? "grid-rows-3" : ""
+      )}>
+        {games.map((game, idx) => (
+          <div key={idx} style={{ scrollSnapAlign: "start" }}>
+            <GameCard {...game} />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-3 py-4">
+      <div className="flex items-center justify-between px-4">
+        <h2 className="text-sm font-bold text-white/90 border-l-4 border-brand-primary pl-3 uppercase tracking-tight">
+          {title}
+        </h2>
+        <div className="flex items-center gap-3">
+          {showSeeMore && (
+            <button className="text-[10px] text-white/40 hover:text-white uppercase font-bold transition-colors">
+              See More
+            </button>
+          )}
+          <div className="flex items-center gap-1">
+            <button 
+              onClick={() => scroll("left")}
+              className="size-6 flex items-center justify-center bg-white/5 hover:bg-white/10 text-white/60 hover:text-white transition-colors"
+            >
+              <ChevronLeft className="size-4" />
+            </button>
+            <button 
+              onClick={() => scroll("right")}
+              className="size-6 flex items-center justify-center bg-white/5 hover:bg-white/10 text-white/60 hover:text-white transition-colors"
+            >
+              <ChevronRight className="size-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div 
+        ref={scrollRef}
+        className="flex overflow-x-auto scrollbar-none px-4 pb-2 snap-x snap-mandatory"
+      >
+        {rows === 1 ? (
+          <div className="flex gap-4">
+            {renderGames()}
+          </div>
+        ) : (
+          renderGames()
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/games/gaming-sidebar.tsx b/components/games/gaming-sidebar.tsx
new file mode 100644
index 0000000..fa2d11c
--- /dev/null
+++ b/components/games/gaming-sidebar.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { Search, Heart, Clock, Star } from "lucide-react"
+
+export type GameCategory = string
+
+interface GamingSidebarProps {
+  title: string
+  subtitle?: string
+  activeCategory: GameCategory
+  onCategoryChange: (category: GameCategory) => void
+  categories: {
+    id: string
+    name: string
+    icon: any
+    subtitle?: string
+    hasChevron?: boolean
+  }[]
+}
+
+export function GamingSidebar({ title, subtitle, activeCategory, onCategoryChange, categories }: GamingSidebarProps) {
+  return (
+    <aside className="hidden h-full w-[280px] shrink-0 bg-brand-surface-light lg:block overflow-y-auto border-r border-border/40 scrollbar-hide">
+      {/* Sidebar Header */}
+      <div className="bg-brand-surface px-3 py-2 text-[12px] font-bold text-white uppercase flex items-center justify-between border-b border-white/10 h-12">
+        <div className="flex items-center gap-2">
+           <Star className="size-4 text-brand-primary" />
+           <div className="flex flex-col">
+              <span className="leading-tight">{title}</span>
+              {subtitle && <span className="text-[10px] text-white/40 font-normal lowercase">{subtitle}</span>}
+           </div>
+        </div>
+        <svg viewBox="0 0 24 24" className="size-3.5 fill-white/40"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+      </div>
+
+      <div className="flex flex-col gap-[1px]">
+        {categories.map((cat) => {
+          const Icon = cat.icon
+          const isActive = activeCategory === cat.id
+          
+          return (
+            <button
+              key={cat.id}
+              onClick={() => onCategoryChange(cat.id)}
+              className={cn(
+                "w-full flex flex-col px-3 py-2 text-left transition-colors border-b border-border/5",
+                isActive 
+                  ? "bg-brand-surface border-l-4 border-l-brand-primary" 
+                  : "bg-brand-surface-light hover:bg-brand-surface"
+              )}
+            >
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-3">
+                  {typeof Icon === 'string' ? (
+                    (Icon.startsWith('http') || Icon.startsWith('/')) ? (
+                      <img src={Icon} alt={cat.name} className="w-5 h-5 object-contain opacity-80" />
+                    ) : (
+                      <span className="size-4 flex items-center justify-center text-[14px]">{Icon}</span>
+                    )
+                  ) : (
+                    <Icon className={cn("size-4", isActive ? "text-brand-primary" : "text-white/60")} />
+                  )}
+                  <div className="flex flex-col">
+                    <span className={cn(
+                      "text-[12px] font-bold tracking-tight",
+                      isActive ? "text-white" : "text-white/80"
+                    )}>
+                      {cat.name}
+                    </span>
+                    {cat.subtitle && (
+                      <span className="text-[9px] text-white/40 font-medium">{cat.subtitle}</span>
+                    )}
+                  </div>
+                </div>
+                {cat.hasChevron && (
+                  <svg viewBox="0 0 24 24" className="size-3.5 fill-white/40"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+                )}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </aside>
+  )
+}
diff --git a/components/games/virtual-sidebar.tsx b/components/games/virtual-sidebar.tsx
new file mode 100644
index 0000000..1b2aec3
--- /dev/null
+++ b/components/games/virtual-sidebar.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { Search, Heart, Clock, Star, Zap, LayoutGrid, Gamepad2, Award, Coins, Flame, Trophy } from "lucide-react"
+
+export type GameCategory = 
+  | "all" 
+  | "search" 
+  | "favourite" 
+  | "recently-played" 
+  | "most-popular" 
+  | "harif-special" 
+  | "for-you" 
+  | "slots" 
+  | "crash-games" 
+  | "higher-lower" 
+  | "smartsoft" 
+  | "keno-spin" 
+  | "pragmatic-play" 
+  | "evoplay-bonus"
+
+interface VirtualSidebarProps {
+  activeCategory: GameCategory
+  onCategoryChange: (category: GameCategory) => void
+}
+
+const categories = [
+  { id: "all", name: "Virtual", icon: Star, subtitle: "Check out our games!", hasChevron: true },
+  { id: "search", name: "Search", icon: Search },
+  { id: "favourite", name: "Favourite", icon: Heart },
+  { id: "recently-played", name: "Recently Played", icon: Clock },
+  { id: "most-popular", name: "Most Popular", icon: Star },
+  { id: "harif-special", name: "Harif Special", icon: Zap },
+  { id: "for-you", name: "For You", icon: Star },
+  { id: "slots", name: "Slots", icon: Star },
+  { id: "crash-games", name: "Crash Games", icon: Star },
+  { id: "higher-lower", name: "Higher Lower", icon: Star },
+  { id: "smartsoft", name: "Smartsoft", icon: Star },
+  { id: "keno-spin", name: "Keno & Spin", icon: Star },
+  { id: "pragmatic-play", name: "Pragmatic Play", icon: Star },
+  { id: "evoplay-bonus", name: "EvoPlay BONUS", icon: Star },
+]
+
+export function VirtualSidebar({ activeCategory, onCategoryChange }: VirtualSidebarProps) {
+  return (
+    <aside className="hidden h-full w-[240px] shrink-0 bg-brand-surface-light lg:block overflow-y-auto border-r border-border/40 scrollbar-hide">
+      <div className="flex flex-col gap-[1px]">
+        {categories.map((cat) => {
+          const Icon = cat.icon
+          const isActive = activeCategory === cat.id
+          
+          return (
+            <button
+              key={cat.id}
+              onClick={() => onCategoryChange(cat.id as GameCategory)}
+              className={cn(
+                "w-full flex flex-col px-3 py-2 text-left transition-colors border-b border-border/5",
+                isActive 
+                  ? "bg-brand-surface border-l-4 border-l-brand-primary" 
+                  : "bg-brand-surface-light hover:bg-brand-surface"
+              )}
+            >
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-3">
+                  <Icon className={cn("size-4", isActive ? "text-brand-primary" : "text-white/60")} />
+                  <div className="flex flex-col">
+                    <span className={cn(
+                      "text-[12px] font-bold tracking-tight",
+                      isActive ? "text-white" : "text-white/80"
+                    )}>
+                      {cat.name}
+                    </span>
+                    {cat.subtitle && (
+                      <span className="text-[9px] text-white/40 font-medium">{cat.subtitle}</span>
+                    )}
+                  </div>
+                </div>
+                {cat.hasChevron && (
+                  <svg viewBox="0 0 24 24" className="size-3.5 fill-white/40"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+                )}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </aside>
+  )
+}