diff --git a/frontend/src/components/EmployeeModal/EmployeeInfo.tsx b/frontend/src/components/EmployeeModal/EmployeeInfo.tsx
index 03031cf38..ea842f53b 100644
--- a/frontend/src/components/EmployeeModal/EmployeeInfo.tsx
+++ b/frontend/src/components/EmployeeModal/EmployeeInfo.tsx
@@ -74,15 +74,11 @@ const EmployeeInfo = ({
           id="phoneNumber"
           type="tel"
           defaultValue={phone}
-          min={10}
-          max={10}
           aria-required="true"
           className={cn(styles.input)}
           ref={register({
             required: true,
-            pattern: /[0-9]{10}/,
-            maxLength: 10,
-            minLength: 10,
+            pattern: /^(?:\d{3}-\d{3}-\d{4}|\d{10})$/, //123-456-7890 or 1234567890
           })}
         />
         {formState.errors.phoneNumber && (
diff --git a/frontend/src/components/Modal/RiderModalInfo.tsx b/frontend/src/components/Modal/RiderModalInfo.tsx
index 6d149fcab..6854e1149 100644
--- a/frontend/src/components/Modal/RiderModalInfo.tsx
+++ b/frontend/src/components/Modal/RiderModalInfo.tsx
@@ -122,7 +122,10 @@ const RiderModalInfo = ({
             id="phoneNumber"
             name="phoneNumber"
             type="tel"
-            ref={register({ required: true, pattern: /^[0-9]{10}$/ })}
+            ref={register({
+              required: true,
+              pattern: /^(?:\d{3}-\d{3}-\d{4}|\d{10})$/,
+            })}
             className={styles.firstRow}
             aria-required="true"
           />