diff --git a/src/components/IntegerField/index.jsx b/src/components/IntegerField/index.jsx
index 0af814f..e327ccb 100644
--- a/src/components/IntegerField/index.jsx
+++ b/src/components/IntegerField/index.jsx
@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PT from "prop-types";
 import cn from "classnames";
+import IconExclamationMark from "components/Icons/ExclamationMarkCircled";
+import Popover from "components/Popover";
 import styles from "./styles.module.scss";
 
 /**
@@ -9,58 +11,119 @@ import styles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {string} [props.className] class name to be added to root element
  * @param {boolean} [props.isDisabled] if the field is disabled
+ * @param {boolean} [props.readOnly] if the field is readOnly
+ * @param {boolean} [props.displayButtons] whether to display +/- buttons
  * @param {string} props.name field's name
  * @param {number} props.value field's value
  * @param {number} [props.maxValue] maximum allowed value
  * @param {number} [props.minValue] minimum allowed value
- * @param {(v: number) => void} props.onChange
+ * @param {(v: number) => void} [props.onChange]
+ * @param {(v: string) => void} [props.onInputChange]
  * @returns {JSX.Element}
  */
 const IntegerField = ({
   className,
   isDisabled = false,
+  readOnly = true,
+  displayButtons = true,
   name,
+  onInputChange,
   onChange,
   value,
   maxValue = Infinity,
   minValue = -Infinity,
-}) => (
-  <div className={cn(styles.container, className)}>
-    <input
-      disabled={isDisabled}
-      readOnly
-      className={styles.input}
-      name={name}
-      value={value}
-    />
-    <button
-      className={styles.btnMinus}
-      onClick={(event) => {
-        event.stopPropagation();
-        if (!isDisabled) {
-          onChange(Math.max(value - 1, minValue));
-        }
-      }}
-    />
-    <button
-      className={styles.btnPlus}
-      onClick={(event) => {
-        event.stopPropagation();
-        if (!isDisabled) {
-          onChange(Math.min(+value + 1, maxValue));
-        }
-      }}
-    />
-  </div>
-);
+}) => {
+  const isInvalid = useMemo(
+    () =>
+      !!value &&
+      (isNaN(value) ||
+        !Number.isInteger(+value) ||
+        +value > maxValue ||
+        +value < minValue),
+    [value, minValue, maxValue]
+  );
+
+  const errorPopupContent = useMemo(() => {
+    if (value && (isNaN(value) || !Number.isInteger(+value))) {
+      return <>You must enter a valid integer.</>;
+    }
+    if (+value > maxValue) {
+      return (
+        <>
+          You must enter an integer less than or equal to{" "}
+          <strong>{maxValue}</strong>.
+        </>
+      );
+    }
+    if (+value < minValue) {
+      return (
+        <>
+          You must enter an integer greater than or equal to{" "}
+          <strong>{minValue}</strong>.
+        </>
+      );
+    }
+  }, [value, minValue, maxValue]);
+
+  return (
+    <div className={cn(styles.container, className)}>
+      {isInvalid && (
+        <Popover
+          className={styles.popup}
+          stopClickPropagation={true}
+          content={errorPopupContent}
+          strategy="fixed"
+        >
+          <IconExclamationMark className={styles.icon} />
+        </Popover>
+      )}
+      <input
+        type="number"
+        onChange={(event) => onInputChange && onInputChange(event.target.value)}
+        disabled={isDisabled}
+        readOnly={readOnly}
+        className={cn(styles.input, {
+          error: isInvalid,
+        })}
+        name={name}
+        value={value}
+      />
+      {displayButtons && (
+        <>
+          <button
+            className={styles.btnMinus}
+            onClick={(event) => {
+              event.stopPropagation();
+              if (!isDisabled) {
+                onChange(Math.max(value - 1, minValue));
+              }
+            }}
+          />
+          <button
+            className={styles.btnPlus}
+            onClick={(event) => {
+              event.stopPropagation();
+              if (!isDisabled) {
+                onChange(Math.min(+value + 1, maxValue));
+              }
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+};
 
 IntegerField.propTypes = {
   className: PT.string,
   isDisabled: PT.bool,
+  readOnly: PT.bool,
+  displayButtons: PT.bool,
   name: PT.string.isRequired,
   maxValue: PT.number,
   minValue: PT.number,
-  onChange: PT.func.isRequired,
+  onChange: PT.func,
+  onInputChange: PT.func,
   value: PT.number.isRequired,
 };
 
diff --git a/src/components/IntegerField/styles.module.scss b/src/components/IntegerField/styles.module.scss
index 32cd095..0663b6f 100644
--- a/src/components/IntegerField/styles.module.scss
+++ b/src/components/IntegerField/styles.module.scss
@@ -19,6 +19,11 @@ input.input {
   outline: none !important;
   box-shadow: none !important;
   text-align: center;
+  appearance: textfield;
+  &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 
   &:disabled {
     border-color: $control-disabled-border-color;
@@ -94,3 +99,17 @@ input.input {
     height: 9px;
   }
 }
+
+.popup {
+  margin-right: 5px;
+  max-width: 400px;
+  max-height: 200px;
+  line-height: $line-height-px;
+  white-space: normal;
+}
+
+.icon {
+  padding-top: 1px;
+  width: 15px;
+  height: 15px;
+}
diff --git a/src/components/Typeahead/index.jsx b/src/components/Typeahead/index.jsx
index 9d71979..80c243c 100644
--- a/src/components/Typeahead/index.jsx
+++ b/src/components/Typeahead/index.jsx
@@ -74,6 +74,8 @@ const selectComponents = {
  * @param {function} props.onChange function called when value changes
  * @param {function} [props.onInputChange] function called when input value changes
  * @param {function} [props.onBlur] function called on input blur
+ * @param {number} [props.minLengthForSuggestions] the minimum string lenth for displaying suggestions (default 3)
+ * @param {Boolean} [props.enforceListOnlySelection] enforces user to select from the list - manual inputs (if not in the list) won't affect the selection
  * @param {string} props.value input value
  * @param {function} props.getSuggestions the function to get suggestions
  * @param {string} props.targetProp the target property of the returned object from getSuggestions
@@ -87,6 +89,8 @@ const Typeahead = ({
   onChange,
   onInputChange,
   onBlur,
+  minLengthForSuggestions = 3,
+  enforceListOnlySelection = false,
   placeholder,
   value,
   getSuggestions,
@@ -139,7 +143,12 @@ const Typeahead = ({
         setIsMenuFocused(false);
         setIsMenuOpen(false);
         setIsLoading(false);
-        onChange(inputValue);
+        // fire onChange event
+        // - if `enforceListOnlySelection` is not set,
+        // - or if it's set and options list contains the value
+        if (!enforceListOnlySelection || options.includes(inputValue)) {
+          onChange(inputValue);
+        }
       }
     } else if (key === "ArrowDown") {
       if (!isMenuFocused) {
@@ -158,7 +167,12 @@ const Typeahead = ({
   const onSelectBlur = () => {
     setIsMenuFocused(false);
     setIsMenuOpen(false);
-    onChange(inputValue);
+    // fire onChange event
+    // - if `enforceListOnlySelection` is not set,
+    // - or if it's set and options list contains the value
+    if (!enforceListOnlySelection || options.includes(inputValue)) {
+      onChange(inputValue);
+    }
     onBlur && onBlur();
   };
 
@@ -170,11 +184,10 @@ const Typeahead = ({
         }
         setIsLoading(true);
         setIsMenuOpen(true);
-        const options = await loadSuggestions(
-          getSuggestions,
-          value,
-          targetProp
-        );
+        const options =
+          value.length < minLengthForSuggestions
+            ? [] // no suggestions yet if value length is less than `minLengthForSuggestions`
+            : await loadSuggestions(getSuggestions, value, targetProp);
         if (!isChangeAppliedRef.current) {
           setOptions(options);
           setIsLoading(false);
@@ -233,9 +246,6 @@ const Typeahead = ({
 
 const loadSuggestions = async (getSuggestions, inputValue, targetProp) => {
   let options = [];
-  if (inputValue.length < 3) {
-    return options;
-  }
   try {
     const res = await getSuggestions(inputValue);
     const items = res.data.slice(0, 100);
@@ -266,6 +276,8 @@ Typeahead.propTypes = {
   onChange: PT.func.isRequired,
   onInputChange: PT.func,
   onBlur: PT.func,
+  minLengthForSuggestions: PT.number,
+  enforceListOnlySelection: PT.bool,
   placeholder: PT.string,
   value: PT.oneOfType([PT.number, PT.string]),
   getSuggestions: PT.func,
diff --git a/src/routes/Roles/components/RoleForm/index.jsx b/src/routes/Roles/components/RoleForm/index.jsx
index 70605f0..b4375b1 100644
--- a/src/routes/Roles/components/RoleForm/index.jsx
+++ b/src/routes/Roles/components/RoleForm/index.jsx
@@ -8,7 +8,10 @@ import cn from "classnames";
 import { getRolesModalRole, getRolesModalError } from "store/selectors/roles";
 import { setModalRole, setModalError } from "store/actions/roles";
 import { searchSkills } from "services/roles";
+import { humanReadableTimeToHours } from "utils/misc";
 import FallbackIcon from "../../../../assets/images/icon-role-fallback.svg";
+import IconExclamationMark from "components/Icons/ExclamationMarkCircled";
+import Popover from "components/Popover";
 import Typeahead from "components/Typeahead";
 import IntegerField from "components/IntegerField";
 import IconArrowSmall from "components/Icons/ArrowSmall";
@@ -69,18 +72,18 @@ function RoleForm() {
         rates: [
           ...roleState.rates,
           {
-            global: 0,
-            inCountry: 0,
-            offShore: 0,
-            niche: 0,
-            rate30Niche: 0,
-            rate30Global: 0,
-            rate30InCountry: 0,
-            rate30OffShore: 0,
-            rate20Niche: 0,
-            rate20Global: 0,
-            rate20InCountry: 0,
-            rate20OffShore: 0,
+            global: 10,
+            inCountry: 10,
+            offShore: 10,
+            niche: 10,
+            rate30Niche: 10,
+            rate30Global: 10,
+            rate30InCountry: 10,
+            rate30OffShore: 10,
+            rate20Niche: 10,
+            rate20Global: 10,
+            rate20InCountry: 10,
+            rate20OffShore: 10,
           },
         ],
       })
@@ -89,14 +92,6 @@ function RoleForm() {
 
   const editRate = useCallback(
     (index, changes) => {
-      // a num field is `null` but user trying to increase/decrease it
-      // start with 0
-      for (const key in changes) {
-        if (isNaN(changes[key])) {
-          changes[key] = 0;
-        }
-      }
-      // apply changes
       dispatch(
         setModalRole({
           ...roleState,
@@ -194,8 +189,10 @@ function RoleForm() {
           id="skills"
           name="skills"
           placeholder="Search skills..."
+          enforceListOnlySelection={true}
           onChange={(val) => addSkill(val)}
           onInputChange={(val) => setTypeaheadInputValue(val)}
+          minLengthForSuggestions={1} // retrieve suggestions with min. 1 characters. Useful for skills like "C"
           value={typeaheadInputValue}
           getSuggestions={searchSkills}
           targetProp="name"
@@ -223,8 +220,11 @@ function RoleForm() {
           <IntegerField
             className={styles.number}
             name="numberOfMembers"
+            minValue={1}
+            readOnly={false}
+            displayButtons={false}
             value={roleState.numberOfMembers}
-            onChange={(num) => onChange({ numberOfMembers: num })}
+            onInputChange={(val) => onChange({ numberOfMembers: val })}
           />
         </div>
         <div className={styles.cell}>
@@ -232,33 +232,96 @@ function RoleForm() {
           <IntegerField
             className={styles.number}
             name="numberOfMembersAvailable"
+            minValue={1}
+            readOnly={false}
+            displayButtons={false}
             value={roleState.numberOfMembersAvailable}
-            minValue={-32768}
-            maxValue={32767}
-            onChange={(num) => onChange({ numberOfMembersAvailable: num })}
+            onInputChange={(val) => onChange({ numberOfMembersAvailable: val })}
           />
         </div>
         <div className={styles.cell}>
-          <th>Time to Candidate</th>
-          <IntegerField
-            className={styles.number}
-            name="timeToCandidate"
-            value={roleState.timeToCandidate}
-            minValue={-32768}
-            maxValue={32767}
-            onChange={(num) => onChange({ timeToCandidate: num })}
-          />
+          <th>Time to Interview</th>
+          <div className={styles["input-container"]}>
+            {!!roleState.timeToInterview &&
+              humanReadableTimeToHours(roleState.timeToInterview) === 0 && (
+                <Popover
+                  className={styles.popup}
+                  stopClickPropagation={true}
+                  content={
+                    <>
+                      Example values:
+                      <ul>
+                        <li>12 hours</li>
+                        <li>3 days</li>
+                        <li>2 weeks</li>
+                        <li>2 weeks 3 days</li>
+                        <li>1 month</li>
+                        <li>...</li>
+                      </ul>
+                    </>
+                  }
+                  strategy="fixed"
+                >
+                  <IconExclamationMark className={styles.icon} />
+                </Popover>
+              )}
+            <input
+              className={cn(styles["text-input"], {
+                error:
+                  !!roleState.timeToInterview &&
+                  humanReadableTimeToHours(roleState.timeToInterview) === 0,
+              })}
+              name="timeToInterview"
+              value={roleState.timeToInterview}
+              onChange={(event) =>
+                onChange({
+                  timeToInterview: event.target.value,
+                })
+              }
+            />
+          </div>
         </div>
         <div className={styles.cell}>
-          <th>Time to Interview</th>
-          <IntegerField
-            className={styles.number}
-            name="timeToInterview"
-            value={roleState.timeToInterview}
-            minValue={-32768}
-            maxValue={32767}
-            onChange={(num) => onChange({ timeToInterview: num })}
-          />
+          <th>Time to Candidate</th>
+          <div className={styles["input-container"]}>
+            {!!roleState.timeToCandidate &&
+              humanReadableTimeToHours(roleState.timeToCandidate) === 0 && (
+                <Popover
+                  className={styles.popup}
+                  stopClickPropagation={true}
+                  content={
+                    <>
+                      Example values:
+                      <ul>
+                        <li>12 hours</li>
+                        <li>3 days</li>
+                        <li>2 weeks</li>
+                        <li>2 weeks 3 days</li>
+                        <li>1 month</li>
+                        <li>...</li>
+                      </ul>
+                    </>
+                  }
+                  strategy="fixed"
+                >
+                  <IconExclamationMark className={styles.icon} />
+                </Popover>
+              )}
+            <input
+              className={cn(styles["text-input"], {
+                error:
+                  !!roleState.timeToCandidate &&
+                  humanReadableTimeToHours(roleState.timeToCandidate) === 0,
+              })}
+              name="timeToCandidate"
+              value={roleState.timeToCandidate}
+              onChange={(event) =>
+                onChange({
+                  timeToCandidate: event.target.value,
+                })
+              }
+            />
+          </div>
         </div>
       </div>
       <label htmlFor="">
@@ -281,43 +344,67 @@ function RoleForm() {
               {i === expandedRateIdx && (
                 <div className={styles["rate-content"]}>
                   <div className={styles["col-group"]}>
-                    <th>Global</th>
-                    <th>In Country</th>
-                    <th>Offshore</th>
-                    <th>Niche</th>
+                    <th>
+                      <div>Global</div>
+                      <div className={styles["time-unit"]}>/week</div>
+                    </th>
+                    <th>
+                      <div>In Country</div>
+                      <div className={styles["time-unit"]}>/week</div>
+                    </th>
+                    <th>
+                      <div>Offshore</div>
+                      <div className={styles["time-unit"]}>/week</div>
+                    </th>
+                    <th>
+                      <div>Niche</div>
+                      <div className={styles["time-unit"]}>/week</div>
+                    </th>
                   </div>
                   <div className={styles["content-group"]}>
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-global-rate`}
                       value={roleState.rates[i].global}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { global: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { global: num || undefined })
+                      }
                     />
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-inCountry-rate`}
                       value={roleState.rates[i].inCountry}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { inCountry: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { inCountry: num || undefined })
+                      }
                     />
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-offShore-rate`}
                       value={roleState.rates[i].offShore}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { offShore: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { offShore: num || undefined })
+                      }
                     />
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-niche-rate`}
                       value={roleState.rates[i].niche}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { niche: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { niche: num || undefined })
+                      }
                     />
                   </div>
                   <th>Rate 30</th>
@@ -326,33 +413,45 @@ function RoleForm() {
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-rate30-global-rate`}
                       value={roleState.rates[i].rate30Global}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { rate30Global: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { rate30Global: num || undefined })
+                      }
                     />
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-rate30-inCountry-rate`}
                       value={roleState.rates[i].rate30InCountry}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { rate30InCountry: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { rate30InCountry: num || undefined })
+                      }
                     />
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-rate30-offShore-rate`}
                       value={roleState.rates[i].rate30OffShore}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { rate30OffShore: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { rate30OffShore: num || undefined })
+                      }
                     />
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-rate30-niche-rate`}
                       value={roleState.rates[i].rate30Niche}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { rate30Niche: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { rate30Niche: num || undefined })
+                      }
                     />
                   </div>
                   <th>Rate 20</th>
@@ -361,33 +460,45 @@ function RoleForm() {
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-rate20-global-rate`}
                       value={roleState.rates[i].rate20Global}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { rate20Global: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { rate20Global: num || undefined })
+                      }
                     />
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-rate20-inCountry-rate`}
                       value={roleState.rates[i].rate20InCountry}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { rate20InCountry: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { rate20InCountry: num || undefined })
+                      }
                     />
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-rate20-offShore-rate`}
                       value={roleState.rates[i].rate20OffShore}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { rate20OffShore: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { rate20OffShore: num || undefined })
+                      }
                     />
                     <IntegerField
                       className={cn(styles.number, styles.cell)}
                       name={`rate[${i}]-rate20-niche-rate`}
                       value={roleState.rates[i].rate20Niche}
-                      minValue={-32768}
-                      maxValue={32767}
-                      onChange={(num) => editRate(i, { rate20Niche: num })}
+                      minValue={1}
+                      readOnly={false}
+                      displayButtons={false}
+                      onInputChange={(num) =>
+                        editRate(i, { rate20Niche: num || undefined })
+                      }
                     />
                   </div>
                   <button
diff --git a/src/routes/Roles/components/RoleForm/styles.module.scss b/src/routes/Roles/components/RoleForm/styles.module.scss
index aa64184..6af06ea 100644
--- a/src/routes/Roles/components/RoleForm/styles.module.scss
+++ b/src/routes/Roles/components/RoleForm/styles.module.scss
@@ -99,9 +99,35 @@
         border-bottom: 1px;
       }
 
-      .number {
+      .input-container {
+        display: inline-block;
+      }
+
+      .text-input {
+        line-height: 22px;
+        height: 30px;
+        border-radius: 6px;
+        margin: 0;
+      }
+
+      .text-input, .number {
         width: 80px;
       }
+
+      .popup {
+        margin-right: 5px;
+        max-width: 400px;
+        max-height: 200px;
+        line-height: $line-height-px;
+        white-space: normal;
+      }
+      
+      .icon {
+        margin-left: 4px;
+        padding-top: 1px;
+        width: 15px;
+        height: 15px;
+      }
     }
   }
     
@@ -161,13 +187,22 @@
       }
 
       th {
+        display: flex;
+        flex-direction: column;
+        padding: 5px;
         width: 100%;
         text-align: center;
+        align-items: center;
+        justify-content: center;
         background-color: #e9e9e9;
         border: 1px solid $control-border-color;
         &:not(:last-child) {
           border-right: none;
         }
+        .time-unit {
+          font-size: 11px;
+          line-height: 11px;
+        }
       }
 
       .cell {
diff --git a/src/routes/Roles/index.jsx b/src/routes/Roles/index.jsx
index b89c952..e43c024 100644
--- a/src/routes/Roles/index.jsx
+++ b/src/routes/Roles/index.jsx
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import debounce from "lodash/debounce";
 import omit from "lodash/omit";
 import withAuthentication from "hoc/withAuthentication";
+import { humanReadableTimeToHours, hoursToHumanReadableTime } from "utils/misc";
 import {
   setFilter,
   setIsModalOpen,
@@ -59,10 +60,10 @@ const Roles = () => {
       setModalRole({
         listOfSkills: [],
         rates: [],
-        numberOfMembers: 0,
-        numberOfMembersAvailable: 0,
-        timeToCandidate: 0,
-        timeToInterview: 0,
+        numberOfMembers: 1,
+        numberOfMembersAvailable: 1,
+        timeToInterview: "1 week",
+        timeToCandidate: "2 weeks",
       })
     );
     dispatch(setIsModalOpen(true));
@@ -72,7 +73,13 @@ const Roles = () => {
     (role) => {
       setModalOperationType("EDIT");
       dispatch(setModalError(null));
-      dispatch(setModalRole(role));
+      dispatch(
+        setModalRole({
+          ...role,
+          timeToInterview: hoursToHumanReadableTime(role.timeToInterview),
+          timeToCandidate: hoursToHumanReadableTime(role.timeToCandidate),
+        })
+      );
       dispatch(setIsModalOpen(true));
     },
     [dispatch]
@@ -95,17 +102,28 @@ const Roles = () => {
       dispatch(
         updateRole(
           modalRole.id,
-          omit(modalRole, [
-            "id",
-            "createdBy",
-            "updatedBy",
-            "createdAt",
-            "updatedAt",
-          ])
+          omit(
+            {
+              ...modalRole,
+              timeToInterview: humanReadableTimeToHours(
+                modalRole.timeToInterview
+              ),
+              timeToCandidate: humanReadableTimeToHours(
+                modalRole.timeToCandidate
+              ),
+            },
+            ["id", "createdBy", "updatedBy", "createdAt", "updatedAt"]
+          )
         )
       );
     } else {
-      dispatch(createRole(modalRole));
+      dispatch(
+        createRole({
+          ...modalRole,
+          timeToInterview: humanReadableTimeToHours(modalRole.timeToInterview),
+          timeToCandidate: humanReadableTimeToHours(modalRole.timeToCandidate),
+        })
+      );
     }
   }, [dispatch, modalOperationType, modalRole]);
 
diff --git a/src/utils/misc.js b/src/utils/misc.js
index cc5a333..9db3dca 100644
--- a/src/utils/misc.js
+++ b/src/utils/misc.js
@@ -1,4 +1,6 @@
+import keys from "lodash/keys";
 import moment from "moment";
+import { formatPlural } from "./formatters";
 
 /**
  * Returns working periods filtered by start date.
@@ -162,3 +164,61 @@ export const increment = (value) => value + 1;
 export const negate = (value) => !value;
 
 export const noop = () => {};
+
+/**
+ * Converts a human-readable time string to hours.
+ * E.g.
+ * "2 weeks" => 336
+ * "3 days" => 72
+ *
+ * @param {string} timeStr human-readable time (e.g. "1 weeks", "2 hours", "2 weeks 3 days")
+ * @return {Number} the time in hours
+ */
+export const humanReadableTimeToHours = (timeStr) => {
+  // units with corresponding hours
+  const units = {
+    hour: 1,
+    day: 24,
+    week: 7 * 24,
+    month: 30 * 24,
+  };
+
+  let timeHrs = 0;
+  const tokens = timeStr.toLowerCase().split(" ");
+  keys(units).forEach((u) => {
+    const tokenIdx = tokens.findIndex((token) => token.includes(u));
+    if (tokenIdx > 0) {
+      const unitHrs = units[u];
+      const tokenTimeMs = +tokens[tokenIdx - 1] * unitHrs;
+      timeHrs += tokenTimeMs;
+    }
+  });
+  return timeHrs;
+};
+
+/**
+ * Converts a time (in hours) to human-readable string.
+ *
+ * @param {Number} timeHrs the time in hours
+ * @return {string} human-readable time string ("1 week", "2 weeks 3 days", etc.)
+ */
+export const hoursToHumanReadableTime = (timeHrs) => {
+  // to preserve the order of keys, we need to use array in loop/iterations
+  const units = [
+    { key: "month", value: 30 * 24 },
+    { key: "week", value: 7 * 24 },
+    { key: "day", value: 24 },
+    { key: "hour", value: 1 },
+  ];
+
+  let timeStr = "";
+  for (const unit of units) {
+    const division = Math.floor(timeHrs / unit.value);
+    if (division >= 1) {
+      timeStr += timeStr !== "" ? " " : "";
+      timeStr += formatPlural(division, unit.key);
+    }
+    timeHrs -= division * unit.value;
+  }
+  return timeStr;
+};