diff --git a/components/Modals/CreateCalendarEvent.tsx b/components/Modals/CreateCalendarEvent.tsx
index 1e20e9a..dcb0511 100644
--- a/components/Modals/CreateCalendarEvent.tsx
+++ b/components/Modals/CreateCalendarEvent.tsx
@@ -189,7 +189,8 @@ export default function CreateCalendarEventModal() {
                       hideIcon={true}
                     />
                     <TimePicker
-                      className="max-w-fit pl-0 pr-1"
+                      className="shrink-0"
+                      inputClassName="max-w-fit pl-0 pr-1"
                       value={startTime}
                       onChange={(newTime) =>
                         setStartDate(
@@ -228,7 +229,8 @@ export default function CreateCalendarEventModal() {
                       hideIcon={true}
                     />
                     <TimePicker
-                      className="max-w-fit pl-0 pr-1"
+                      //   className="shrink-0"
+                      inputClassName="max-w-fit pl-0 pr-1"
                       value={endTime}
                       onChange={(newTime) =>
                         setEndDate(
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index 6397547..ed72b41 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-[16px] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
         className,
       )}
       {...props}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index a92b8e0..e1fb245 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -11,15 +11,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-[16px] shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index d1258e4..ca48443 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -10,15 +10,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-[16px] shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
+    );
+  },
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };
diff --git a/components/ui/time-picker.tsx b/components/ui/time-picker.tsx
index be6fdd6..ac165af 100644
--- a/components/ui/time-picker.tsx
+++ b/components/ui/time-picker.tsx
@@ -78,12 +78,14 @@ type TimePickerProps = {
   hideIcon?: boolean;
   displayFormat?: string;
   className?: string;
+  inputClassName?: string;
 };
 export function TimePicker({
   value,
   onChange,
   hideIcon = false,
   className,
+  inputClassName,
 }: TimePickerProps) {
   return (
     <Popover>
@@ -93,6 +95,7 @@ export function TimePicker({
           className={cn(
             "justify-start p-0 text-left font-normal",
             !value && "text-muted-foreground",
+            className,
           )}
         >
           {!hideIcon && <CalendarIcon className="mr-2 h-4 w-4" />}
@@ -106,7 +109,7 @@ export function TimePicker({
             }}
             className={cn(
               "border-0 shadow-none outline-none ring-0 focus-visible:ring-0",
-              className,
+              inputClassName,
             )}
           />
         </Button>