diff --git a/app/(admin)/admin/booking/[id]/page.tsx b/app/(admin)/admin/booking/[id]/page.tsx
index 03c1075..cc4e38d 100644
--- a/app/(admin)/admin/booking/[id]/page.tsx
+++ b/app/(admin)/admin/booking/[id]/page.tsx
@@ -695,11 +695,14 @@ export default function AppointmentDetailPage() {
               <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gradient-to-br from-blue-900/20 to-purple-900/20 border-blue-800/30" : "bg-gradient-to-br from-blue-50 to-purple-50 border-blue-200"}`}>
                 <div className="p-6 space-y-3">
                   {(() => {
-                    const canJoin = appointment.can_join_as_moderator === true || appointment.can_join_as_moderator === "true";
+                    // Check if can join as moderator (handle both boolean and string values)
+                    const canJoinAsModerator = appointment.can_join_as_moderator === true || appointment.can_join_as_moderator === "true";
+                    // Check if meeting has started (handle both field names)
                     const startedAt = appointment.started_at || appointment.meeting_started_at;
                     const hasStarted = startedAt != null && startedAt !== "";
 
-                    if (!canJoin) {
+                    // If can_join_as_moderator != true, display "Meeting Not Available"
+                    if (!canJoinAsModerator) {
                       return (
                         <button
                           disabled
@@ -711,6 +714,7 @@ export default function AppointmentDetailPage() {
                       );
                     }
 
+                    // If can_join_as_moderator == true && started_at != null, show "Join Now" button
                     if (hasStarted) {
                       return (
                         <>
@@ -745,6 +749,7 @@ export default function AppointmentDetailPage() {
                       );
                     }
 
+                    // If can_join_as_moderator == true && started_at == null, show "Start Meeting" button
                     return (
                       <Button
                         onClick={handleStartMeeting}
diff --git a/app/(user)/user/appointments/[id]/page.tsx b/app/(user)/user/appointments/[id]/page.tsx
index 1064e87..49c90d0 100644
--- a/app/(user)/user/appointments/[id]/page.tsx
+++ b/app/(user)/user/appointments/[id]/page.tsx
@@ -578,25 +578,52 @@ export default function UserAppointmentDetailPage() {
             {appointment.status === "scheduled" && appointment.participant_join_url && (
               <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gradient-to-br from-blue-900/20 to-purple-900/20 border-blue-800/30" : "bg-gradient-to-br from-blue-50 to-purple-50 border-blue-200"}`}>
                 <div className="p-6">
-                  {appointment.can_join_as_participant ? (
-                    <a
-                      href={appointment.participant_join_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className={`flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 text-white h-12 rounded-lg text-base font-medium transition-colors`}
-                    >
-                      <Video className="w-5 h-5" />
-                      Join Meeting
-                    </a>
-                  ) : (
-                    <button
-                      disabled
-                      className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
-                    >
-                      <Video className="w-5 h-5" />
-                      Meeting Not Available Yet
-                    </button>
-                  )}
+                  {(() => {
+                    // Check if can join as participant (handle both boolean and string values)
+                    const canJoinAsParticipant = appointment.can_join_as_participant === true || appointment.can_join_as_participant === "true";
+                    // Check if meeting has started (handle both field names)
+                    const startedAt = appointment.started_at || appointment.meeting_started_at;
+                    const hasStarted = startedAt != null && startedAt !== "";
+
+                    // If can_join_as_participant != true, display "Meeting Not Available"
+                    if (!canJoinAsParticipant) {
+                      return (
+                        <button
+                          disabled
+                          className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
+                        >
+                          <Video className="w-5 h-5" />
+                          Meeting Not Available
+                        </button>
+                      );
+                    }
+
+                    // If can_join_as_participant == true && started_at != null, show "Join Now" button
+                    if (hasStarted) {
+                      return (
+                        <a
+                          href={appointment.participant_join_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={`flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 text-white h-12 rounded-lg text-base font-medium transition-colors`}
+                        >
+                          <Video className="w-5 h-5" />
+                          Join Now
+                        </a>
+                      );
+                    }
+
+                    // If can_join_as_participant == true && started_at == null, show "Meeting Not Available"
+                    return (
+                      <button
+                        disabled
+                        className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
+                      >
+                        <Video className="w-5 h-5" />
+                        Meeting Not Available
+                      </button>
+                    );
+                  })()}
                 </div>
               </div>
             )}