app/(user)/user/appointments/[id]/page.tsx

@@ -14,6 +14,7 @@ import {
   Phone as PhoneIcon,
   MessageSquare,
   CheckCircle2,
+  ExternalLink,
   Copy,
 } from "lucide-react";
 import { useAppTheme } from "@/components/ThemeProvider";
@@ -464,6 +465,45 @@ export default function UserAppointmentDetailPage() {
                   </h2>
                 </div>
                 <div className="p-6 space-y-4">
+                  <div>
+                    <p className={`text-xs font-medium mb-2 uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                      Meeting Link
+                    </p>
+                    <div className="flex items-center gap-2">
+                      {appointment.can_join_as_participant ? (
+                        <>
+                          <a
+                            href={appointment.participant_join_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={`flex-1 text-sm px-3 py-2 rounded-lg truncate ${isDark ? "bg-gray-800 text-blue-400 hover:bg-gray-700" : "bg-white text-blue-600 hover:bg-gray-50 border border-gray-200"}`}
+                          >
+                            {appointment.participant_join_url}
+                          </a>
+                          <a
+                            href={appointment.participant_join_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={`px-4 py-2 rounded-lg font-medium transition-colors ${isDark ? "bg-blue-600 hover:bg-blue-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"}`}
+                          >
+                            <ExternalLink className="w-4 h-4" />
+                          </a>
+                        </>
+                      ) : (
+                        <>
+                          <div className={`flex-1 text-sm px-3 py-2 rounded-lg truncate ${isDark ? "bg-gray-800/50 text-gray-500 border border-gray-700" : "bg-gray-100 text-gray-400 border border-gray-300"}`}>
+                            {appointment.participant_join_url}
+                          </div>
+                          <button
+                            disabled
+                            className={`px-4 py-2 rounded-lg font-medium cursor-not-allowed ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
+                          >
+                            <ExternalLink className="w-4 h-4" />
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  </div>
                   {appointment.can_join_as_participant !== undefined && (
                     <div className={`flex items-center gap-2 px-4 py-3 rounded-lg ${appointment.can_join_as_participant ? (isDark ? "bg-green-500/20 border border-green-500/30" : "bg-green-50 border border-green-200") : (isDark ? "bg-gray-800 border border-gray-700" : "bg-gray-50 border border-gray-200")}`}>
                       <div className={`h-2 w-2 rounded-full ${appointment.can_join_as_participant ? (isDark ? "bg-green-400" : "bg-green-600") : (isDark ? "bg-gray-500" : "bg-gray-400")}`} />
@@ -491,7 +531,7 @@ export default function UserAppointmentDetailPage() {
                             How to Access:
                           </p>
                           <p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
-                            Click the "Join Now" button below when the meeting becomes available. The meeting will be accessible shortly before the scheduled start time.
+                            Click the "Join Now" button below or use the meeting link above when the meeting becomes available. The meeting will be accessible shortly before the scheduled start time.
                           </p>
                         </div>
                       </div>