diff --git a/src/components/AppointmentModal.vue b/src/components/AppointmentModal.vue
index cad8460..381aef9 100644
--- a/src/components/AppointmentModal.vue
+++ b/src/components/AppointmentModal.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-if="showModal" class="z-10 modal h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50">
-    <div class="py-3 sm:max-w-xl sm:mx-auto">
-        <div class="relative px-4 py-10 bg-white mx-8 md:mx-0 shadow rounded-3xl sm:p-10">
+    <div class="py-3 sm:max-w-xl sm:mx-auto h-screen md:h-auto">
+        <div class="relative px-4 pt-2 pb-4 md:py-10 bg-white mx-8 md:mx-0 shadow rounded-3xl sm:p-10">
           <div class="max-w-md mx-auto">
-            <div class="flex items-center space-x-5">
+            <div class="hidden md:flex items-center 5">
               <div class="h-14 w-14 bg-yellow-200 rounded-full flex flex-shrink-0 justify-center items-center text-yellow-500 text-2xl font-mono">A</div>
               <div class="block pl-2 font-semibold text-xl self-start text-gray-700">
                 <h2 class="leading-relaxed">Create an Appointment</h2>
@@ -12,7 +12,7 @@
             </div>
             <div class="divide-y divide-gray-200">
               <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
-                <div class="flex items-center space-x-4">
+                <div class="flex flex-col md:flex-row items-center md:space-x-4">
                   <div class="flex flex-col">
                     <label class="leading-loose">Start</label>
                     <DatetimePicker @change="(v) => start = v" class="focus-within:text-gray-600 text-gray-400" :init="false" :startFromMonday="false" :autoClose="false" :startDate="start">