diff --git a/btc-UI/src/app/components/navbar/navbar.component.html b/btc-UI/src/app/components/navbar/navbar.component.html
index a9a7fa0..0503fb2 100755
--- a/btc-UI/src/app/components/navbar/navbar.component.html
+++ b/btc-UI/src/app/components/navbar/navbar.component.html
@@ -211,26 +211,7 @@
 <div class="viewlog-modal-overlay" *ngIf="showLogModal" (click)="closeModals()">
   <div class="viewlog-modal-box" (click)="$event.stopPropagation()">
     <h5>VIEW-LOG</h5>
-    <!-- <table class="viewlog-table">
-      <thead>
-        <tr>
-          <th>Description</th>
-          <th>Venue</th>
-          <th>Ticket Number</th>
-          <th>Pool Name</th>
-          <th>Total Amount</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let log of logs">
-          <td>{{ log.description }}</td>
-          <td>{{ log.venue }}</td>
-          <td>{{ log.ticketNumber }}</td>
-          <td>{{ log.poolName }}</td>
-          <td>{{ log.totalAmount }}</td>
-        </tr>
-      </tbody>
-    </table> -->
+
     <button class="cancel-btn" (click)="closeModals()">CANCEL</button>
   </div>
 </div>
@@ -239,25 +220,40 @@
 <div class="modal-overlay" *ngIf="showVenueModal" (click)="closeModals()">
   <div class="modal-box" (click)="$event.stopPropagation()">
     <h5>Select Venue</h5>
-    <div
+    <!-- <div
       class="modal-option"
-      *ngFor="let venue of horseDataAndProgramData"
-      (click)="selectVenue(venue.raceId)"
+      *ngFor="let races of raceCardData?.raceVenueRaces?.races; let i = index"
+      (click)="selectVenue(i)"
     >
-      {{ venue?.raceVenue?.venue }}
-    </div>
+      {{ raceCardData?.Venue }} - Group {{ i + 1 }}
+    </div> -->
+    <div
+  class="modal-option"
+  *ngIf="raceCardData?.raceVenueRaces?.races?.length > 0"
+  (click)="selectVenue(0)"
+>
+  {{ raceCardData?.Venue }}
+</div>
+
   </div>
 </div>
+
 <!-- this.raceData -->
 
 <!-- Race Modal       (click)="selectRace(race)"-->
+<!-- Race Modal -->
 <div class="modal-overlay" *ngIf="showRaceModal" (click)="closeModals()">
   <div class="modal-box" (click)="$event.stopPropagation()">
     <h5>Select Race</h5>
-    <div class="modal-option" *ngFor="let race of raceData">
-      <span> Number of races is {{ race.numberOfRace }} </span>
-      <span> Race id is {{ race.raceId }} </span>
-      <span> Date of race {{ race.sysDataOnly }} </span>
-    </div>
+    <div
+  class="modal-option"
+  *ngFor="let races of raceCardData.raceVenueRaces.races; let i = index"
+  (click)="selectRace(i + 1)"
+  >
+  Race {{ i + 1 }}
+  </div>
+
   </div>
 </div>
+
+
diff --git a/btc-UI/src/app/components/navbar/navbar.component.ts b/btc-UI/src/app/components/navbar/navbar.component.ts
index dd05037..24ccd60 100755
--- a/btc-UI/src/app/components/navbar/navbar.component.ts
+++ b/btc-UI/src/app/components/navbar/navbar.component.ts
@@ -1,11 +1,10 @@
-
 import { Component, OnInit, HostListener, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BtcService } from '../../service/btc.service';
 import { Router } from '@angular/router';
 import { catchError, interval, of, Subscription, switchMap } from 'rxjs';
-import { HorseService } from '../../service/horseData.service';
-import { HorseRaceModel } from '../../model/horseRaceData';
+// import { HorseService } from '../../service/horseData.service';
+// import { HorseRaceModel } from '../../model/horseRaceData';
 import { SharedStateService } from '../../service/shared-state.service';
 
 @Component({
@@ -20,22 +19,28 @@ export class NavbarComponent implements OnInit, OnDestroy {
   isMenuOpen: boolean = false;
   screenWidth: number = window.innerWidth;
   private subscription!: Subscription;
-  public horseDataAndProgramData: HorseRaceModel[] = [];
-  public raceData: HorseRaceModel[] = [];
-  private selectedRaceId: number = 0;
+  // public horseDataAndProgramData: HorseRaceModel[] = [];
+  // public raceData: HorseRaceModel[] = [];
+  //private selectedRaceId: number = 0;
 
   liveStatusOk: boolean = true;
 
   showVenueModal = false;
   showRaceModal = false;
   selectedVenue = 'Select Venue';
-  selectedRace = '1';
+  selectedRace : number =1;
 
   showWalletModal = false;
   showResultModal = false;
   showMessagesModal = false;
   showLogModal = false;
 
+  raceCardData: any = {};
+  raceData: any[] = [];
+  objectKeys = Object.keys;
+
+  selectedRaceId: number = 0;
+
   wallet = {
     withdraw: 0,
     deposit: 0,
@@ -63,7 +68,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
   constructor(
     private btcService: BtcService,
     private router: Router,
-    private horseService: HorseService,
+    // private horseService: HorseService,
     private sharedStateService: SharedStateService
   ) {}
 
@@ -80,27 +85,38 @@ export class NavbarComponent implements OnInit, OnDestroy {
               this.liveStatusOk = false;
               return of(null);
             })
-          )
-        )
-      )
-      .subscribe((response) => {
+          ))
+      ).subscribe((response) => {
         if (response !== null) {
           console.log('[LIVE STATUS] OK');
           this.liveStatusOk = true;
         }
       });
 
-    this.horseService.HorseData.subscribe({
-      next: (data) => {
-        if (data === null) return;
-        console.log('[HORSE DATA] Received:', data);
-        this.horseDataAndProgramData = data;
-      },
-      error: (err) => {
-        console.error('[HORSE DATA] Error:', err);
-      },
-    });
+  //   this.horseService.HorseData.subscribe({
+  //     next: (data) => {
+  //       if (data === null) return;
+  //       console.log('[HORSE DATA] Received:', data);
+  //       this.horseDataAndProgramData = data;
+  //     },
+  //     error: (err) => {
+  //       console.error('[HORSE DATA] Error:', err);
+  //     },
+  //   });
+  // }
+
+   const cachedData = localStorage.getItem('raceCardData');
+  if (cachedData) {
+    this.raceCardData = JSON.parse(cachedData);
+    console.log('📦 Loaded race card from localStorage:', this.raceCardData);
+
+    // ✅ Pre-fill the venue name directly
+    this.selectedVenue = this.raceCardData?.Venue || 'Select Venue';
+  } else {
+    this.raceCardData = { raceVenueRaces: { races: [] }, pools: {} };
+    console.warn('⚠️ No race card data found in localStorage.');
   }
+}
 
   updateDateTime() {
     const now = new Date();
@@ -124,16 +140,28 @@ export class NavbarComponent implements OnInit, OnDestroy {
     this.showVenueModal = true;
   }
 
+  // openRaceModal() {
+  //   console.log('[MODAL] Opening race modal');
+  //   this.showRaceModal = true;
+
+  //   this.horseDataAndProgramData.map((data) => {
+  //     if (data.raceId === this.selectedRaceId) {
+  //       this.raceData = [data];
+  //     }
+  //     return data;
+  //   });
+  // }
+
   openRaceModal() {
     console.log('[MODAL] Opening race modal');
     this.showRaceModal = true;
 
-    this.horseDataAndProgramData.map((data) => {
-      if (data.raceId === this.selectedRaceId) {
-        this.raceData = [data];
-      }
-      return data;
-    });
+    const venueIndex = Object.keys(this.raceCardData?.raceVenueRaces?.races || [])
+      .findIndex((_, idx) => idx === this.selectedRaceId);
+
+    if (venueIndex !== -1) {
+      this.raceData = this.raceCardData.raceVenueRaces.races[venueIndex] || [];
+    }
   }
 
   closeModals() {
@@ -146,17 +174,29 @@ export class NavbarComponent implements OnInit, OnDestroy {
     this.showLogModal = false;
   }
 
-  selectVenue(venue: number) {
-    console.log('[VENUE] User selected raceId:', venue);
-    this.selectedRaceId = venue;
+  // selectVenue(venue: number) {
+  //   console.log('[VENUE] User selected raceId:', venue);
+  //   this.selectedRaceId = venue;
 
-    this.horseDataAndProgramData.map((data) => {
-      if (data.raceId === venue) {
-        this.selectedVenue = data.raceVenue?.venue || 'Unknown Venue';
-      }
-      return data;
+  //   this.horseDataAndProgramData.map((data) => {
+  //     if (data.raceId === venue) {
+  //       this.selectedVenue = data.raceVenue?.venue || 'Unknown Venue';
+  //     }
+  //     return data;
+  //   });
+
+  selectVenue(index: number) {
+    const venue = this.raceCardData?.Venue || 'Unknown Venue';
+    const venueKeys = Object.keys(this.raceCardData?.raceVenueRaces?.races || {});
+    this.selectedVenue = venue;
+    this.selectedRaceId = index;
+
+    this.sharedStateService.updateSharedData({
+      type: 'selectedVenue',
+      value: this.selectedVenue,
     });
 
+
     console.log('[VENUE] Venue resolved to:', this.selectedVenue);
 
     this.sharedStateService.updateSharedData({
@@ -169,7 +209,19 @@ export class NavbarComponent implements OnInit, OnDestroy {
     this.closeModals();
   }
 
-  selectRace(race: string) {
+  // selectRace(race: string) {
+  //   this.selectedRace = race;
+
+  //   this.sharedStateService.updateSharedData({
+  //     type: 'selectedRace',
+  //     value: this.selectedRace,
+  //   });
+
+  //   console.log('[RACE] Race selected:', this.selectedRace);
+  //   this.closeModals();
+  // }
+  
+  selectRace(race: number) {
     this.selectedRace = race;
 
     this.sharedStateService.updateSharedData({
@@ -181,6 +233,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
     this.closeModals();
   }
 
+
   openWalletModal() {
     console.log('[MODAL] Opening wallet modal');
     this.showWalletModal = true;