diff --git a/client/src/components/Dashboard/FlightCard/FlightCard.tsx b/client/src/components/Dashboard/FlightCard/FlightCard.tsx
index c7ceb5ab5e4b09e3ffb5791dfb3cf644390ff784..af0a2f958e414c5658fc01fd6986db7095504d8a 100644
--- a/client/src/components/Dashboard/FlightCard/FlightCard.tsx
+++ b/client/src/components/Dashboard/FlightCard/FlightCard.tsx
@@ -10,13 +10,12 @@ interface IFlightCard {
 function FlightCard({ flight }: IFlightCard) {
   return (
     <>
-
     <div className='flight-card'>
       <span>Flight Number: {flight.id}</span>
       <span>Departure Time: {new Date(flight.departureTime).toLocaleString()}</span>
       <span>Arrival Time: {new Date(flight.arrivalTime).toLocaleString()}</span>
       <span className='flight-path'>{flight.origin} - {flight.destination}</span>
-      <Link to={'/Flight/' + flight.id}>View Flight</Link>
+      <Link to={'/Flight/' + flight.id}>View Flight Info</Link>
     </div>
     </>
   );
diff --git a/client/src/components/Dashboard/Flights/Flights.tsx b/client/src/components/Dashboard/Flights/Flights.tsx
index 0fcf82d075d0a09f4ab6d948a7ea946938104756..0f043d8bffcf7bb209e1b0bfd7b0eb432b103d19 100644
--- a/client/src/components/Dashboard/Flights/Flights.tsx
+++ b/client/src/components/Dashboard/Flights/Flights.tsx
@@ -31,8 +31,7 @@ function Flights() {
           <div className="flight-list">
             {data.upcomingFlights.length > 0 ? (
               data.upcomingFlights.slice(0, 3).map((item) => {
-                // Only pass the flight data to the FlightCard
-                return <FlightCard key={item.id} flight={item}></FlightCard>;
+                return <FlightCard key={item.flight.id} flight={item.flight}></FlightCard>;
               })
             ) : (
               <div>No Upcoming Flights</div>
@@ -54,8 +53,7 @@ function Flights() {
           <div className="flight-list">
             {data.flightsHistory.length > 0 ? (
               data.flightsHistory.slice(0, 3).map((item) => {
-                // Only pass the flight data to the FlightCard
-                return <FlightCard key={item.id} flight={item}></FlightCard>;
+                return <FlightCard key={item.flight.id} flight={item.flight}></FlightCard>;
               })
             ) : (
               <div>No Flights History</div>
diff --git a/client/src/services/Dashboard/CustomerDashboard.ts b/client/src/services/Dashboard/CustomerDashboard.ts
index f3bd27c8e7195f72796ed63c9cf61d635b468be2..040429f4c3e9bd7317db71d4290093ac7df78aa2 100644
--- a/client/src/services/Dashboard/CustomerDashboard.ts
+++ b/client/src/services/Dashboard/CustomerDashboard.ts
@@ -1,4 +1,5 @@
 import Api from "../../helpers/Api";
+import { IBookingInfo } from "../BookingView/BookingView";
 
 export interface ISeat {
   id: number;
@@ -25,10 +26,15 @@ export interface IFlight {
   seats: ISeats
 }
 
+export interface IFLightBookingData{
+  flight: IFlight;
+  booking: IBookingInfo;
+}
+
 export interface ICustomerDashboardData {
   type: 'customer'
-  upcomingFlights: IFlight[];
-  flightsHistory: IFlight[];
+  upcomingFlights: IFLightBookingData[];
+  flightsHistory: IFLightBookingData[];
 }
 
 export async function GetCustomerDashboardData(): Promise<ICustomerDashboardData> {
@@ -36,7 +42,6 @@ export async function GetCustomerDashboardData(): Promise<ICustomerDashboardData
     const upcomingFlights = Api.get('Booking/upcoming', { withCredentials: true });
     const flightsHistory = Api.get('Booking/history', { withCredentials: true });
     const [uData, hData] = await Promise.all([upcomingFlights, flightsHistory]);
-
     return {
       type: 'customer',
       upcomingFlights: uData.data,