diff --git a/src/pages/Appointments/AppointmentDetail.tsx b/src/pages/Appointments/AppointmentDetail.tsx
index 61567f55cae..e3dbeb3f98d 100644
--- a/src/pages/Appointments/AppointmentDetail.tsx
+++ b/src/pages/Appointments/AppointmentDetail.tsx
@@ -160,7 +160,7 @@ export default function AppointmentDetail(props: Props) {
       <div className="container mx-auto p-6 max-w-7xl">
         <div
           className={cn(
-            "flex flex-col md:flex-row",
+            "flex flex-col md:flex-col lg:flex-row",
             isPending && "opacity-50 pointer-events-none animate-pulse",
           )}
         >
diff --git a/src/pages/Appointments/components/AppointmentTokenCard.tsx b/src/pages/Appointments/components/AppointmentTokenCard.tsx
index aba76026b4b..84df3ef362f 100644
--- a/src/pages/Appointments/components/AppointmentTokenCard.tsx
+++ b/src/pages/Appointments/components/AppointmentTokenCard.tsx
@@ -23,7 +23,7 @@ const AppointmentTokenCard = ({ id, appointment, facility }: Props) => {
   return (
     <Card
       id={id}
-      className="p-6 lg:w-[30rem] border border-gray-300 relative hover:scale-105 hover:rotate-1 hover:shadow-xl transition-all duration-300 ease-in-out"
+      className="p-6 lg:w-[25rem] border border-gray-300 relative hover:scale-105 hover:rotate-1 hover:shadow-xl transition-all duration-300 ease-in-out"
     >
       <div className="absolute inset-0 opacity-[0.1] pointer-events-none bg-[url('/images/care_logo_gray.svg')] bg-center bg-no-repeat bg-[length:40%_auto] lg:bg-[length:60%_auto]" />