diff --git a/packages/raystack/v1/components/calendar/calendar.module.css b/packages/raystack/v1/components/calendar/calendar.module.css
index 9b83ebee..87312ee7 100644
--- a/packages/raystack/v1/components/calendar/calendar.module.css
+++ b/packages/raystack/v1/components/calendar/calendar.module.css
@@ -251,3 +251,7 @@
   border-radius: inherit;
   position: relative;
 }
+
+.datePickerInput {
+  text-align: left;
+}
diff --git a/packages/raystack/v1/components/calendar/date-picker.tsx b/packages/raystack/v1/components/calendar/date-picker.tsx
index 9e65ba1f..165b18e1 100644
--- a/packages/raystack/v1/components/calendar/date-picker.tsx
+++ b/packages/raystack/v1/components/calendar/date-picker.tsx
@@ -154,6 +154,7 @@ export function DatePicker({
       state={inputState}
       placeholder={placeholder}
       onKeyUp={handleKeyUp}
+      className={styles.datePickerInput}
       {...textFieldProps}
     />
   );