diff --git a/client/src/components/Patient/PatientAppointments/AppointmentCard.jsx b/client/src/components/Patient/PatientAppointments/AppointmentCard.jsx
index 2495f9f..445148d 100644
--- a/client/src/components/Patient/PatientAppointments/AppointmentCard.jsx
+++ b/client/src/components/Patient/PatientAppointments/AppointmentCard.jsx
@@ -29,130 +29,121 @@ const AppointmentCard = ({ appointment, prescriptionStatus, onAppointmentClick }
   const getStatusBadge = (status) => {
     const statusConfig = {
       pending: {
-        color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-        icon: <Clock3 className="w-3 h-3" />,
-        text: 'Pending',
+        color: 'bg-blue-50 text-blue-700 border-blue-100',
+        icon: <Clock className="w-3 h-3" strokeWidth={2} />,
+        label: 'Pending',
       },
       confirmed: {
-        color: 'bg-blue-100 text-blue-800 border-blue-200',
-        icon: <CheckCircle className="w-3 h-3" />,
-        text: 'Confirmed',
+        color: 'bg-blue-600 text-white border-blue-600',
+        icon: <CheckCircle className="w-3 h-3" strokeWidth={2} />,
+        label: 'Confirmed',
       },
       completed: {
-        color: 'bg-green-100 text-green-800 border-green-200',
-        icon: <CheckCircle className="w-3 h-3" />,
-        text: 'Completed',
+        color: 'bg-gray-100 text-black border-gray-200',
+        icon: <CheckCircle className="w-3 h-3" strokeWidth={2} />,
+        label: 'Completed',
       },
       cancelled: {
-        color: 'bg-red-100 text-red-800 border-red-200',
-        icon: <XCircle className="w-3 h-3" />,
-        text: 'Cancelled',
-      },
-      'no-show': {
-        color: 'bg-gray-100 text-gray-800 border-gray-200',
-        icon: <AlertCircle className="w-3 h-3" />,
-        text: 'No Show',
+        color: 'bg-gray-100 text-gray-600 border-gray-200',
+        icon: <XCircle className="w-3 h-3" strokeWidth={2} />,
+        label: 'Cancelled',
       },
     };
 
     const config = statusConfig[status] || statusConfig.pending;
-
     return (
       <span
-        className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium border ${config.color}`}
+        className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-light border ${config.color}`}
       >
         {config.icon}
-        {config.text}
+        {config.label}
       </span>
     );
   };
 
-  const { date: formattedDate, time: formattedTime } = formatDateTime(
-    appointment.date,
-    appointment.startTime
-  );
+  const { date, time } = formatDateTime(appointment.date, appointment.startTime);
   const hasPrescription = prescriptionStatus[appointment._id];
 
   return (
-    <div
-      onClick={() => onAppointmentClick(appointment._id)}
-      className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-200 cursor-pointer group"
-    >
-      {/* Header */}
-      <div className="flex items-start justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-semibold">
-            {appointment.doctorId?.firstName?.[0]}
-            {appointment.doctorId?.lastName?.[0]}
-          </div>
-          <div>
-            <h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
-              Dr. {appointment.doctorId?.firstName} {appointment.doctorId?.lastName}
-            </h3>
-            <p className="text-sm text-gray-600">{appointment.doctorId?.specialization}</p>
-          </div>
-        </div>
-        {getStatusBadge(appointment.status)}
-      </div>
+    <div className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200">
+      <div className="p-4 sm:p-5">
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4">
+          <div className="flex items-start gap-3 flex-1 min-w-0">
+            <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 overflow-hidden border border-gray-200">
+              {appointment.doctorId?.profilePicture ? (
+                <img
+                  src={appointment.doctorId.profilePicture}
+                  alt={`${appointment.doctorId?.firstName} ${appointment.doctorId?.lastName}`}
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <User className="w-6 h-6 text-gray-400" strokeWidth={1.5} />
+              )}
+            </div>
 
-      {/* Appointment Details */}
-      <div className="space-y-3">
-        {/* Date and Time */}
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2 text-gray-700">
-            <Calendar className="w-4 h-4" />
-            <span className="text-sm">{formattedDate}</span>
-          </div>
-          <div className="flex items-center gap-2 text-gray-700">
-            <Clock className="w-4 h-4" />
-            <span className="text-sm">{formattedTime}</span>
+            <div className="flex-1 min-w-0">
+              <h3 className="text-base font-normal text-black mb-0.5 truncate">
+                Dr. {appointment.doctorId?.firstName} {appointment.doctorId?.lastName}
+              </h3>
+              <p className="text-xs text-gray-500 font-light mb-2">
+                {appointment.doctorId?.specialization}
+              </p>
+              <div className="flex items-center gap-1.5 text-xs text-gray-600">
+                <AlertCircle className="w-3.5 h-3.5 flex-shrink-0" strokeWidth={1.5} />
+                <span className="font-light truncate">{appointment.reason}</span>
+              </div>
+            </div>
           </div>
-        </div>
 
-        {/* Clinic */}
-        <div className="flex items-center gap-2 text-gray-700">
-          <MapPin className="w-4 h-4 flex-shrink-0" />
-          <span className="text-sm truncate">{appointment.clinicId?.name}</span>
+          <div className="flex sm:flex-col items-start gap-2">
+            {getStatusBadge(appointment.status)}
+          </div>
         </div>
 
-        {/* Consultation Type */}
-        <div className="flex items-center gap-2">
-          {appointment.isTeleconsultation ? (
-            <>
-              <Video className="w-4 h-4 text-green-600" />
-              <span className="text-sm text-green-600 font-medium">Video Consultation</span>
-            </>
-          ) : (
-            <>
-              <User className="w-4 h-4 text-blue-600" />
-              <span className="text-sm text-blue-600 font-medium">In-Person Visit</span>
-            </>
-          )}
-        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4 pt-4 border-t border-gray-100">
+          <div className="flex items-center gap-2 text-sm">
+            <Calendar className="w-4 h-4 text-gray-400 flex-shrink-0" strokeWidth={1.5} />
+            <span className="text-gray-600 font-light">{date}</span>
+          </div>
 
-        {/* Reason */}
-        {appointment.reason && (
-          <div className="bg-gray-50 rounded-lg p-3">
-            <p className="text-sm text-gray-700">
-              <span className="font-medium">Reason: </span>
-              {appointment.reason}
-            </p>
+          <div className="flex items-center gap-2 text-sm">
+            <Clock3 className="w-4 h-4 text-gray-400 flex-shrink-0" strokeWidth={1.5} />
+            <span className="text-gray-600 font-light">
+              {time} - {format(new Date(`2000-01-01T${appointment.endTime}`), 'hh:mm a')}
+            </span>
           </div>
-        )}
 
-        {/* Prescription Status */}
-        <div className="flex items-center justify-between pt-3 border-t border-gray-100">
-          <div className="flex items-center gap-2">
-            <FileText className="w-4 h-4" />
-            <span className="text-sm text-gray-600">Prescription:</span>
-            {hasPrescription ? (
-              <span className="text-sm text-green-600 font-medium">Available</span>
+          <div className="flex items-center gap-2 text-sm">
+            {appointment.appointmentType === 'virtual' ? (
+              <>
+                <Video className="w-4 h-4 text-blue-600 flex-shrink-0" strokeWidth={1.5} />
+                <span className="text-gray-600 font-light">Virtual</span>
+              </>
             ) : (
-              <span className="text-sm text-gray-400">Not available</span>
+              <>
+                <MapPin className="w-4 h-4 text-gray-400 flex-shrink-0" strokeWidth={1.5} />
+                <span className="text-gray-600 font-light truncate">
+                  {appointment.clinicId?.name || 'In-Person'}
+                </span>
+              </>
             )}
           </div>
-          <Eye className="w-4 h-4 text-gray-400 group-hover:text-blue-600 transition-colors" />
+
+          {hasPrescription && (
+            <div className="flex items-center gap-2 text-sm">
+              <FileText className="w-4 h-4 text-blue-600 flex-shrink-0" strokeWidth={1.5} />
+              <span className="text-blue-600 font-light">Prescription Available</span>
+            </div>
+          )}
         </div>
+
+        <button
+          onClick={() => onAppointmentClick(appointment._id)}
+          className="w-full py-2.5 px-4 text-sm font-light text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-all flex items-center justify-center gap-2"
+        >
+          <Eye className="w-4 h-4" strokeWidth={1.5} />
+          View Details
+        </button>
       </div>
     </div>
   );
diff --git a/client/src/components/Patient/PatientAppointments/AppointmentHeader.jsx b/client/src/components/Patient/PatientAppointments/AppointmentHeader.jsx
index 069b781..788b796 100644
--- a/client/src/components/Patient/PatientAppointments/AppointmentHeader.jsx
+++ b/client/src/components/Patient/PatientAppointments/AppointmentHeader.jsx
@@ -2,40 +2,41 @@ import { Search, Filter } from 'lucide-react';
 
 const AppointmentHeader = ({ searchTerm, setSearchTerm, filterStatus, setFilterStatus }) => {
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-8">
-      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900 mb-2">My Appointments</h1>
-          <p className="text-gray-600">Manage and view your medical appointments</p>
-        </div>
+    <div className="mb-8">
+      <div className="mb-6">
+        <h1 className="text-2xl sm:text-3xl font-light text-black tracking-tight">
+          My Appointments
+        </h1>
+        <p className="mt-1 text-sm text-gray-500 font-light">
+          Manage and view your medical appointments
+        </p>
+      </div>
 
-        {/* Search and Filter */}
-        <div className="flex flex-col sm:flex-row gap-3 lg:w-96">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-            <input
-              type="text"
-              placeholder="Search by doctor, clinic, or reason..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+          <input
+            type="text"
+            placeholder="Search by doctor, clinic, or reason..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all"
+          />
+        </div>
 
-          <div className="relative">
-            <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-            <select
-              value={filterStatus}
-              onChange={(e) => setFilterStatus(e.target.value)}
-              className="pl-10 pr-8 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent appearance-none bg-white"
-            >
-              <option value="all">All Status</option>
-              <option value="pending">Pending</option>
-              <option value="confirmed">Confirmed</option>
-              <option value="completed">Completed</option>
-              <option value="cancelled">Cancelled</option>
-            </select>
-          </div>
+        <div className="relative sm:w-48">
+          <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4 pointer-events-none" />
+          <select
+            value={filterStatus}
+            onChange={(e) => setFilterStatus(e.target.value)}
+            className="w-full pl-10 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 appearance-none bg-white cursor-pointer transition-all"
+          >
+            <option value="all">All Status</option>
+            <option value="pending">Pending</option>
+            <option value="confirmed">Confirmed</option>
+            <option value="completed">Completed</option>
+            <option value="cancelled">Cancelled</option>
+          </select>
         </div>
       </div>
     </div>
diff --git a/client/src/components/Patient/PatientAppointments/AppointmentStats.jsx b/client/src/components/Patient/PatientAppointments/AppointmentStats.jsx
deleted file mode 100644
index f9de81b..0000000
--- a/client/src/components/Patient/PatientAppointments/AppointmentStats.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Calendar, Clock, CheckCircle, FileText } from 'lucide-react';
-
-const AppointmentStats = ({ appointments, prescriptionStatus }) => {
-  const completedCount = appointments.filter((apt) => apt.status === 'completed').length;
-  const prescriptionCount = Object.values(prescriptionStatus).filter(Boolean).length;
-
-  const stats = [
-    {
-      label: 'Total',
-      value: appointments.length,
-      icon: Calendar,
-      color: 'text-gray-900',
-      iconColor: 'text-gray-400',
-    },
-    {
-      label: 'Upcoming',
-      value: appointments.filter((apt) => apt.status === 'confirmed' || apt.status === 'pending')
-        .length,
-      icon: Clock,
-      color: 'text-blue-600',
-      iconColor: 'text-blue-400',
-    },
-    {
-      label: 'Completed',
-      value: completedCount,
-      icon: CheckCircle,
-      color: 'text-green-600',
-      iconColor: 'text-green-400',
-    },
-    {
-      label: 'With Prescription',
-      value: prescriptionCount,
-      icon: FileText,
-      color: 'text-purple-600',
-      iconColor: 'text-purple-400',
-    },
-  ];
-
-  return (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-      {stats.map((stat, index) => (
-        <div key={index} className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm text-gray-600">{stat.label}</p>
-              <p className={`text-2xl font-bold ${stat.color}`}>{stat.value}</p>
-            </div>
-            <stat.icon className={`w-8 h-8 ${stat.iconColor}`} />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default AppointmentStats;
diff --git a/client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx b/client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx
index ca8f5c9..2397697 100644
--- a/client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx
+++ b/client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx
@@ -10,10 +10,8 @@ const AppointmentTabs = ({
   setActiveTab,
   onAppointmentClick,
 }) => {
-  // Categorize appointments
   const categorizedAppointments = useMemo(() => {
     const today = new Date();
-
     return {
       upcoming: appointments
         .filter((apt) => {
@@ -25,14 +23,12 @@ const AppointmentTabs = ({
           );
         })
         .sort((a, b) => new Date(a.date) - new Date(b.date)),
-
       today: appointments
         .filter((apt) => {
           const aptDate = new Date(apt.date);
           return isToday(aptDate);
         })
         .sort((a, b) => a.startTime.localeCompare(b.startTime)),
-
       past: appointments
         .filter((apt) => {
           const aptDate = new Date(apt.date);
@@ -42,7 +38,6 @@ const AppointmentTabs = ({
     };
   }, [appointments]);
 
-  // Tab Navigation
   const tabs = [
     {
       key: 'upcoming',
@@ -62,54 +57,47 @@ const AppointmentTabs = ({
   ];
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-100 mb-6">
-      <div className="border-b border-gray-200">
-        <nav className="flex space-x-8 px-6" aria-label="Tabs">
-          {tabs.map((tab) => (
-            <button
-              key={tab.key}
-              onClick={() => setActiveTab(tab.key)}
-              className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
-                activeTab === tab.key
-                  ? 'border-blue-500 text-blue-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+    <div>
+      <div className="flex gap-2 mb-6 border-b border-gray-100">
+        {tabs.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => setActiveTab(tab.key)}
+            className={`px-4 sm:px-6 py-3 text-sm font-light transition-all relative ${
+              activeTab === tab.key ? 'text-blue-600' : 'text-gray-500 hover:text-black'
+            }`}
+          >
+            {tab.label}
+            <span
+              className={`ml-2 px-2 py-0.5 rounded-full text-xs ${
+                activeTab === tab.key ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'
               }`}
             >
-              {tab.label}
-              {tab.count > 0 && (
-                <span
-                  className={`ml-2 py-0.5 px-2 rounded-full text-xs ${
-                    activeTab === tab.key
-                      ? 'bg-blue-100 text-blue-600'
-                      : 'bg-gray-100 text-gray-900'
-                  }`}
-                >
-                  {tab.count}
-                </span>
-              )}
-            </button>
-          ))}
-        </nav>
+              {tab.count}
+            </span>
+            {activeTab === tab.key && (
+              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"></div>
+            )}
+          </button>
+        ))}
       </div>
 
-      {/* Appointments Content */}
-      <div className="p-6">
+      <div className="space-y-3">
         {categorizedAppointments[activeTab]?.length > 0 ? (
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {categorizedAppointments[activeTab].map((appointment) => (
-              <AppointmentCard
-                key={appointment._id}
-                appointment={appointment}
-                prescriptionStatus={prescriptionStatus}
-                onAppointmentClick={onAppointmentClick}
-              />
-            ))}
-          </div>
+          categorizedAppointments[activeTab].map((appointment) => (
+            <AppointmentCard
+              key={appointment._id}
+              appointment={appointment}
+              prescriptionStatus={prescriptionStatus}
+              onAppointmentClick={onAppointmentClick}
+            />
+          ))
         ) : (
-          <div className="text-center py-12">
-            <Calendar className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">No {activeTab} appointments</h3>
-            <p className="text-gray-600">
+          <div className="text-center py-16">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-50 mb-4">
+              <Calendar className="w-8 h-8 text-gray-400" strokeWidth={1.5} />
+            </div>
+            <p className="text-gray-500 text-sm font-light">
               {activeTab === 'upcoming'
                 ? 'You have no upcoming appointments.'
                 : activeTab === 'today'
diff --git a/client/src/pages/patient/PatientAppointments.jsx b/client/src/pages/patient/PatientAppointments.jsx
index 1d2b488..e27529e 100644
--- a/client/src/pages/patient/PatientAppointments.jsx
+++ b/client/src/pages/patient/PatientAppointments.jsx
@@ -2,11 +2,11 @@ import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getPatientAppointments } from '../../service/appointmentApiService';
 import { getPatientAppointmentPrescription } from '../../service/prescriptionApiSevice';
-import AppointmentStats from '../../components/Patient/PatientAppointments/AppointmentStats';
 import AppointmentTabs from '../../components/Patient/PatientAppointments/AppointmentTabs';
 import AppointmentHeader from '../../components/Patient/PatientAppointments/AppointmentHeader';
 import ErrorState from '../../components/Patient/PatientAppointments/ErrorState';
 import Loading from '../../components/ui/Loading';
+
 const PatientAppointments = () => {
   const [appointments, setAppointments] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -15,23 +15,18 @@ const PatientAppointments = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [filterStatus, setFilterStatus] = useState('all');
   const [activeTab, setActiveTab] = useState('upcoming');
-
   const navigate = useNavigate();
 
-  // Fetch appointments on component mount
   useEffect(() => {
     fetchAppointments();
   }, []);
 
-  // Fetch appointments function
   const fetchAppointments = async () => {
     try {
       setLoading(true);
       const response = await getPatientAppointments();
-
       if (response && response.appointments) {
         setAppointments(response.appointments);
-        // Check prescription status for each appointment
         await checkPrescriptionStatus(response.appointments);
       }
     } catch (err) {
@@ -42,10 +37,8 @@ const PatientAppointments = () => {
     }
   };
 
-  // Check prescription status for appointments
   const checkPrescriptionStatus = async (appointmentList) => {
     const prescriptionStatusMap = {};
-
     const statusChecks = appointmentList.map(async (appointment) => {
       try {
         await getPatientAppointmentPrescription(appointment._id);
@@ -55,16 +48,13 @@ const PatientAppointments = () => {
         console.log(err);
       }
     });
-
     await Promise.all(statusChecks);
     setPrescriptionStatus(prescriptionStatusMap);
   };
 
-  // Filter and search appointments
   const filteredAppointments = useMemo(() => {
     let filtered = appointments;
 
-    // Search filter
     if (searchTerm.trim()) {
       const term = searchTerm.toLowerCase();
       filtered = filtered.filter(
@@ -77,7 +67,6 @@ const PatientAppointments = () => {
       );
     }
 
-    // Status filter
     if (filterStatus !== 'all') {
       filtered = filtered.filter((appointment) => appointment.status === filterStatus);
     }
@@ -89,10 +78,13 @@ const PatientAppointments = () => {
     return <Loading />;
   }
 
+  if (error) {
+    return <ErrorState message={error} onRetry={fetchAppointments} />;
+  }
+
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Header */}
+    <div className="min-h-screen bg-white">
+      <div className="px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
         <AppointmentHeader
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}
@@ -100,23 +92,12 @@ const PatientAppointments = () => {
           setFilterStatus={setFilterStatus}
         />
 
-        {/* Error State */}
-        {error && <ErrorState error={error} />}
-
-        {/* Main Content */}
         <AppointmentTabs
           appointments={filteredAppointments}
           prescriptionStatus={prescriptionStatus}
           activeTab={activeTab}
           setActiveTab={setActiveTab}
-          onAppointmentClick={(appointmentId) => navigate(`/patient/appointment/${appointmentId}`)}
-        />
-
-        {/* Quick Stats */}
-        <AppointmentStats
-          appointments={appointments}
-          filteredAppointments={filteredAppointments}
-          prescriptionStatus={prescriptionStatus}
+          onAppointmentClick={(id) => navigate(`/patient/appointment/${id}`)}
         />
       </div>
     </div>