diff --git a/app/layout.tsx b/app/layout.tsx
index 602183c..727ca76 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -67,7 +67,10 @@ export default function RootLayout({
         <meta name="msapplication-config" content="/icons/browserconfig.xml" />
         <meta name="msapplication-TileColor" content="#e65e1f" />
         <meta name="msapplication-tap-highlight" content="no" />
-
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1"
+        />
         <link
           rel="apple-touch-startup-image"
           href="splashscreens/apple-splash-2048-2732.jpg"
diff --git a/components/Modals/CreateCalendarEvent.tsx b/components/Modals/CreateCalendarEvent.tsx
index dcb0511..2b5028e 100644
--- a/components/Modals/CreateCalendarEvent.tsx
+++ b/components/Modals/CreateCalendarEvent.tsx
@@ -167,7 +167,7 @@ export default function CreateCalendarEventModal() {
             <div className="shrink-0">
               <SmallCalendarIcon date={startDate ?? new Date()} />
             </div>
-            <div className="max-w-[300px] flex-1 divide-y overflow-hidden rounded-md bg-muted">
+            <div className="flex-1 divide-y overflow-hidden rounded-md bg-muted sm:max-w-[300px]">
               <div className="flex justify-between p-0.5 px-2 pl-3">
                 <div className="flex w-[50px] shrink-0 items-center">Start</div>
                 <div className="flex-1">
@@ -229,7 +229,7 @@ export default function CreateCalendarEventModal() {
                       hideIcon={true}
                     />
                     <TimePicker
-                      //   className="shrink-0"
+                      className="shrink-0"
                       inputClassName="max-w-fit pl-0 pr-1"
                       value={endTime}
                       onChange={(newTime) =>