diff --git a/src/pages/ConfirmationPage.tsx b/src/pages/ConfirmationPage.tsx
index 3845b4b..7c1adaf 100644
--- a/src/pages/ConfirmationPage.tsx
+++ b/src/pages/ConfirmationPage.tsx
@@ -1,4 +1,3 @@
-
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Button } from "@/components/ui/button";
@@ -17,40 +16,64 @@ type BookingDetails = {
 };
 
 const ConfirmationPage = () => {
-  const navigate = useNavigate();
   const location = useLocation();
-  const [bookingDetails, setBookingDetails] = useState<BookingDetails | null>(null);
-  const [qrCode, setQrCode] = useState<string>('');
-  
-  useEffect(() => {
-    if (location.state) {
-      setBookingDetails(location.state as BookingDetails);
-      // Mock QR code generation
-      setQrCode(`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=SPOTON-${Date.now()}`);
-    } else {
-      navigate('/book');
-    }
-  }, [location, navigate]);
-  
+  const navigate = useNavigate();
+  const [timeLeft, setTimeLeft] = useState({ hours: 0, minutes: 0, seconds: 0 });
+  const [progress, setProgress] = useState(100);
+
+  const bookingDetails = location.state as BookingDetails;
   if (!bookingDetails) {
-    return <div className="p-4">Loading...</div>;
+    navigate('/book');
+    return null;
   }
-  
+
+  // Calculate end time
+  const startTime = new Date(`${bookingDetails.date}T${bookingDetails.startTime}`);
+  const endTime = new Date(startTime.getTime() + bookingDetails.duration * 60 * 60 * 1000);
+  const formattedEndTime = endTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+
+  // Mock QR code for now
+  const qrCode = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=SPOTON-CONFIRMED';
+
+  // Timer effect
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const now = new Date();
+      const end = new Date(endTime);
+      const diff = end.getTime() - now.getTime();
+
+      if (diff <= 0) {
+        clearInterval(timer);
+        setTimeLeft({ hours: 0, minutes: 0, seconds: 0 });
+        setProgress(0);
+        return;
+      }
+
+      const hours = Math.floor(diff / (1000 * 60 * 60));
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+      setTimeLeft({ hours, minutes, seconds });
+
+      // Update progress
+      const totalDuration = bookingDetails.duration * 60 * 60; // duration in seconds
+      const remainingSeconds = hours * 3600 + minutes * 60 + seconds;
+      const newProgress = (remainingSeconds / totalDuration) * 100;
+      setProgress(newProgress);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [endTime, bookingDetails.duration]);
+
   const formatDate = (dateString: string) => {
     const options: Intl.DateTimeFormatOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
     return new Date(dateString).toLocaleDateString('en-US', options);
   };
-  
-  const calculateEndTime = (startTime: string, durationHours: number) => {
-    const [hours, minutes] = startTime.split(':').map(Number);
-    const endDate = new Date();
-    endDate.setHours(hours, minutes, 0);
-    endDate.setTime(endDate.getTime() + durationHours * 60 * 60 * 1000);
-    return `${endDate.getHours().toString().padStart(2, '0')}:${endDate.getMinutes().toString().padStart(2, '0')}`;
+
+  const formatTime = (time: { hours: number, minutes: number, seconds: number }) => {
+    return `${time.hours.toString().padStart(2, '0')}:${time.minutes.toString().padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}`;
   };
-  
-  const endTime = calculateEndTime(bookingDetails.startTime, bookingDetails.duration);
-  
+
   return (
     <div className="min-h-screen pb-16">
       <Header />
@@ -62,13 +85,16 @@ const ConfirmationPage = () => {
         </div>
         
         <Card className="mb-6 overflow-hidden">
-          <div className="bg-gradient-to-r from-spoton-purple to-spoton-blue p-4 text-white">
-            <h2 className="text-lg font-semibold">Ajman University</h2>
-            <p className="text-sm opacity-90">Parking Reservation</p>
+          <div className="relative h-2 w-full bg-muted">
+            <div 
+              className={`absolute inset-y-0 left-0 transition-all duration-1000 ease-linear ${progress < 20 ? 'bg-red-500' : 'bg-spoton-purple'}`} 
+              style={{ width: `${progress}%` }} 
+            ></div>
           </div>
           
-          <CardHeader>
-            <CardTitle>Booking Details</CardTitle>
+          <CardHeader className="text-center">
+            <div className="text-3xl font-mono font-semibold">{formatTime(timeLeft)}</div>
+            <p className="text-sm text-muted-foreground">Time remaining</p>
           </CardHeader>
           
           <CardContent className="space-y-4">
@@ -85,7 +111,7 @@ const ConfirmationPage = () => {
               <div>
                 <p className="font-medium">Time</p>
                 <p className="text-muted-foreground">
-                  {bookingDetails.startTime} - {endTime} ({bookingDetails.duration} {bookingDetails.duration === 1 ? 'hour' : 'hours'})
+                  {bookingDetails.startTime} - {formattedEndTime} ({bookingDetails.duration} {bookingDetails.duration === 1 ? 'hour' : 'hours'})
                 </p>
               </div>
             </div>
@@ -121,7 +147,7 @@ const ConfirmationPage = () => {
               className="w-full bg-spoton-purple hover:bg-spoton-purple-dark"
               onClick={() => navigate('/active')}
             >
-              View Active Bookings
+              View Active Booking
             </Button>
             
             <Button 
diff --git a/src/pages/UserProfilePage.tsx b/src/pages/UserProfilePage.tsx
index 5e6192a..bdb8740 100644
--- a/src/pages/UserProfilePage.tsx
+++ b/src/pages/UserProfilePage.tsx
@@ -1,5 +1,4 @@
-
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -8,28 +7,104 @@ import Header from '@/components/Header';
 import BottomNavigation from '@/components/BottomNavigation';
 import { Calendar, Car, CreditCard, LogOut, Settings, User } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
+import { supabase } from '@/integrations/supabase/client';
+import { useUserProfile } from '@/integrations/supabase/useUserProfile';
 
 const UserProfilePage = () => {
   const navigate = useNavigate();
+  const [userId, setUserId] = useState<string | undefined>();
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const { profile, loading, error } = useUserProfile(userId);
   
-  // Mock user data
-  const user = {
-    name: 'Ahmed Mohammed',
-    email: 'ahmed.m@ajman.ac.ae',
-    id: 'ST2023501',
-    type: 'Student',
-    vehicle: {
-      make: 'Toyota',
-      model: 'Corolla',
-      plate: 'AJM 45921',
-      color: 'White'
-    },
-    bookings: {
-      total: 24,
-      thisMonth: 8
-    }
+  // Get user ID on mount
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        console.log('Checking authentication...');
+        const { data: { session }, error } = await supabase.auth.getSession();
+        console.log('Session:', session);
+        console.log('Auth Error:', error);
+        
+        if (error) {
+          console.error('Auth Error:', error);
+          setIsAuthenticated(false);
+          navigate('/login');
+          return;
+        }
+
+        if (!session) {
+          console.log('No session found, redirecting to login');
+          setIsAuthenticated(false);
+          navigate('/login');
+          return;
+        }
+
+        setIsAuthenticated(true);
+        console.log('User ID:', session.user.id);
+        setUserId(session.user.id);
+      } catch (err) {
+        console.error('Error checking auth:', err);
+        setIsAuthenticated(false);
+        navigate('/login');
+      }
+    };
+
+    checkAuth();
+  }, [navigate]);
+
+  useEffect(() => {
+    console.log('Profile Data:', profile);
+    console.log('Loading State:', loading);
+    console.log('Error State:', error);
+    console.log('Is Authenticated:', isAuthenticated);
+  }, [profile, loading, error, isAuthenticated]);
+
+  // Mock vehicle data (you can replace this with real data from your database)
+  const vehicle = {
+    make: 'Toyota',
+    model: 'Corolla',
+    plate: 'AJM 45921',
+    color: 'White'
+  };
+
+  // Mock booking stats (you can replace this with real data from your database)
+  const bookingStats = {
+    total: 24,
+    thisMonth: 8
   };
   
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen pb-16">
+        <Header />
+        <main className="p-4 max-w-lg mx-auto">
+          <div className="flex items-center justify-center h-40">
+            <p className="text-muted-foreground">Loading profile...</p>
+          </div>
+        </main>
+        <BottomNavigation />
+      </div>
+    );
+  }
+
+  if (error || !profile) {
+    return (
+      <div className="min-h-screen pb-16">
+        <Header />
+        <main className="p-4 max-w-lg mx-auto">
+          <div className="flex items-center justify-center h-40">
+            <p className="text-destructive">Error loading profile. Please try again.</p>
+          </div>
+        </main>
+        <BottomNavigation />
+      </div>
+    );
+  }
+  
   return (
     <div className="min-h-screen pb-16">
       <Header />
@@ -37,13 +112,13 @@ const UserProfilePage = () => {
       <main className="p-4 max-w-lg mx-auto">
         <div className="flex items-center space-x-4 mb-6">
           <div className="h-16 w-16 rounded-full bg-spoton-purple flex items-center justify-center text-white text-xl font-bold">
-            {user.name.split(' ').map(name => name[0]).join('')}
+            {profile.full_name?.split(' ').map(name => name[0]).join('') || '?'}
           </div>
           <div>
-            <h1 className="text-xl font-bold">{user.name}</h1>
+            <h1 className="text-xl font-bold">{profile.full_name || 'No Name Set'}</h1>
             <div className="flex items-center">
-              <p className="text-muted-foreground text-sm mr-2">{user.email}</p>
-              <Badge variant="outline" className="text-xs">{user.type}</Badge>
+              <p className="text-muted-foreground text-sm mr-2">{profile.student_id || 'No ID'}</p>
+              <Badge variant="outline" className="text-xs">{profile.user_type || 'Unknown'}</Badge>
             </div>
           </div>
         </div>
@@ -58,19 +133,19 @@ const UserProfilePage = () => {
           <CardContent className="space-y-2 text-sm">
             <div className="flex justify-between">
               <span className="text-muted-foreground">ID Number</span>
-              <span>{user.id}</span>
+              <span>{profile.student_id || 'Not set'}</span>
             </div>
             <div className="flex justify-between">
               <span className="text-muted-foreground">Account Type</span>
-              <span>{user.type}</span>
+              <span>{profile.user_type || 'Not set'}</span>
             </div>
             <div className="flex justify-between">
               <span className="text-muted-foreground">Total Bookings</span>
-              <span>{user.bookings.total}</span>
+              <span>{bookingStats.total}</span>
             </div>
             <div className="flex justify-between">
               <span className="text-muted-foreground">Bookings This Month</span>
-              <span>{user.bookings.thisMonth}</span>
+              <span>{bookingStats.thisMonth}</span>
             </div>
           </CardContent>
           <CardFooter>
@@ -88,15 +163,15 @@ const UserProfilePage = () => {
           <CardContent className="space-y-2 text-sm">
             <div className="flex justify-between">
               <span className="text-muted-foreground">Vehicle</span>
-              <span>{user.vehicle.make} {user.vehicle.model}</span>
+              <span>{vehicle.make} {vehicle.model}</span>
             </div>
             <div className="flex justify-between">
               <span className="text-muted-foreground">License Plate</span>
-              <span>{user.vehicle.plate}</span>
+              <span>{vehicle.plate}</span>
             </div>
             <div className="flex justify-between">
               <span className="text-muted-foreground">Color</span>
-              <span>{user.vehicle.color}</span>
+              <span>{vehicle.color}</span>
             </div>
           </CardContent>
           <CardFooter>
@@ -135,7 +210,14 @@ const UserProfilePage = () => {
           
           <Separator className="my-4" />
           
-          <Button variant="outline" className="w-full justify-start text-left text-destructive">
+          <Button 
+            variant="outline" 
+            className="w-full justify-start text-left text-destructive"
+            onClick={async () => {
+              await supabase.auth.signOut();
+              navigate('/login');
+            }}
+          >
             <LogOut className="h-5 w-5 mr-2" />
             Sign Out
           </Button>