diff --git a/src/components/ChallengeEditor/ChallengeSchedule-Field/index.js b/src/components/ChallengeEditor/ChallengeSchedule-Field/index.js
index 328477d2..3abd88b9 100644
--- a/src/components/ChallengeEditor/ChallengeSchedule-Field/index.js
+++ b/src/components/ChallengeEditor/ChallengeSchedule-Field/index.js
@@ -6,7 +6,7 @@ import $ from 'jquery'
 import styles from './ChallengeSchedule-Field.module.scss'
 import cn from 'classnames'
 import jstz from 'jstimezonedetect'
-import PhaseInput from '../../PhaseInput'
+import StartDateInput from '../../StartDateInput'
 import Chart from 'react-google-charts'
 import Select from '../../Select'
 import { parseSVG } from '../../../util/svg'
@@ -183,7 +183,7 @@ class ChallengeScheduleField extends Component {
     return (
       _.map(challenge.phases, (p, index) => (
         <div className={styles.PhaseRow} key={index}>
-          <PhaseInput
+          <StartDateInput
             phase={this.getPhaseTemplate(p)}
             withDuration
             onUpdateSelect={onUpdateSelect}
@@ -345,7 +345,7 @@ class ChallengeScheduleField extends Component {
           </div>
         </div> }
         <div className={styles.PhaseRow}>
-          <PhaseInput
+          <StartDateInput
             withDates
             phase={{
               name: 'Start Date',
diff --git a/src/components/ChallengeEditor/ChallengeView/index.js b/src/components/ChallengeEditor/ChallengeView/index.js
index aa7141b3..2e6ae972 100644
--- a/src/components/ChallengeEditor/ChallengeView/index.js
+++ b/src/components/ChallengeEditor/ChallengeView/index.js
@@ -16,12 +16,13 @@ import ChallengePrizesField from '../ChallengePrizes-Field'
 import CopilotFeeField from '../CopilotFee-Field'
 import ChallengeTotalField from '../ChallengeTotal-Field'
 import Loader from '../../Loader'
-import PhaseInput from '../../PhaseInput'
 import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
 import { isBetaMode } from '../../../util/cookie'
 import { loadGroupDetails } from '../../../actions/challenges'
 import { REVIEW_TYPES, CONNECT_APP_URL, PHASE_PRODUCT_CHALLENGE_ID_FIELD } from '../../../config/constants'
+import PhaseInput from '../../PhaseInput'
+import { v4 as uuidv4 } from 'uuid'
 
 const ChallengeView = ({
   projectDetail,
@@ -90,6 +91,7 @@ const ChallengeView = ({
   if (isLoading || _.isEmpty(metadata.challengePhases) || challenge.id !== challengeId) return <Loader />
   const showTimeline = false // disables the timeline for time being https://github.com/topcoder-platform/challenge-engine-ui/issues/706
   const isTask = _.get(challenge, 'task.isTask', false)
+  const phases = _.get(challenge, 'phases', [])
 
   return (
     <div className={styles.wrapper}>
@@ -188,16 +190,13 @@ const ChallengeView = ({
               </>
             )}
             {
-              <div className={styles.PhaseRow}>
+              phases.map((phase) => (
                 <PhaseInput
-                  withDates
-                  phase={{
-                    name: 'Start Date',
-                    date: challenge.startDate
-                  }}
+                  phase={phase}
+                  phaseIndex={uuidv4()}
                   readOnly
                 />
-              </div>
+              ))
             }
             {showTimeline && (
               <ChallengeScheduleField
diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js
index 405239a8..0b718f50 100644
--- a/src/components/ChallengeEditor/index.js
+++ b/src/components/ChallengeEditor/index.js
@@ -4,11 +4,12 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import cn from 'classnames'
-import moment from 'moment'
+import moment from 'moment-timezone'
 import { pick } from 'lodash/fp'
 import { withRouter } from 'react-router-dom'
 import { toastr } from 'react-redux-toastr'
 import xss from 'xss'
+import { v4 as uuidv4 } from 'uuid'
 
 import {
   VALIDATION_VALUE_TYPE,
@@ -810,6 +811,15 @@ class ChallengeEditor extends Component {
     this.setState({ challenge: newChallenge })
   }
 
+  onUpdatePhaseDate (phase, index) {
+    let newChallenge = _.cloneDeep(this.state.challenge)
+    const hourToSecond = 60 * 60
+    newChallenge.phases[index]['duration'] = phase.duration / hourToSecond
+    newChallenge.phases[index]['scheduledStartDate'] = phase.scheduledStartDate
+    newChallenge.phases[index]['scheduledEndDate'] = phase.scheduledEndDate
+    this.setState({ challenge: newChallenge })
+  }
+
   collectChallengeData (status) {
     const { attachments, metadata } = this.props
     const challenge = pick([
@@ -1280,7 +1290,7 @@ class ChallengeEditor extends Component {
     let closeTaskModal = null
     let draftModal = null
 
-    let { type } = challenge
+    let { type, phases = [] } = challenge
     if (!type) {
       const { typeId } = challenge
       if (typeId && metadata.challengeTypes) {
@@ -1561,20 +1571,24 @@ class ChallengeEditor extends Component {
               </React.Fragment>
             )}
             {!isTask && (
-              <div className={styles.PhaseRow}>
-                <PhaseInput
-                  withDates
-                  phase={{
-                    name: 'Start Date',
-                    date: challenge.startDate
-                  }}
-                  onUpdatePhase={newValue => this.onUpdateOthers({
-                    field: 'startDate',
-                    value: newValue.format()
-                  })}
-                  readOnly={false}
-                />
-              </div>
+                <>
+                  {
+                    phases.map((phase, index) => (
+                      <PhaseInput
+                        phase={phase}
+                        phaseIndex={uuidv4()}
+                        readOnly={false}
+                        onUpdatePhase={(item) => {
+                          if ((item.startDate && !moment(item.startDate).isSame(phase.scheduledStartDate)) ||
+                          (item.endDate && !moment(item.endDate).isSame(phase.scheduledEndDate))
+                          ) {
+                            this.onUpdatePhaseDate(item, index)
+                          }
+                        }}
+                      />
+                    ))
+                  }
+                </>
             )}
             {
               this.state.isDeleteLaunch && !this.state.isConfirm && (
diff --git a/src/components/PhaseInput/PhaseInput.module.scss b/src/components/PhaseInput/PhaseInput.module.scss
index e16fc96b..c1cf43f1 100644
--- a/src/components/PhaseInput/PhaseInput.module.scss
+++ b/src/components/PhaseInput/PhaseInput.module.scss
@@ -8,16 +8,26 @@
 
 .container {
   display: flex;
+  margin-bottom: 10px;
 }
 
 .row {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  margin: 30px 30px 0 30px;
+  margin: 20px 30px 0 30px;
   align-content: space-between;
   justify-content: flex-start;
 
+  .title {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin-right: 10px;
+    font-size: 14px;
+    font-weight: 300;
+  }
+
   .field {
     @include upto-sm {
       display: block;
@@ -47,6 +57,7 @@
     &.phaseName {
       flex-direction: column;
       align-items: flex-start;
+      font-weight: bold;
 
       .previewDates {
         font-size: 13px;
@@ -73,7 +84,7 @@
       }
 
       .dayPicker {
-        width: 180px;
+        width: 200px;
         margin-right: 30px;
 
         :global {
@@ -90,6 +101,15 @@
         }
       }
 
+      .inputField {
+        margin-right: 30px;
+        width: 80px;
+
+        input {
+          padding: 0 0 0 10px;
+        }
+      }
+
       .timePicker {
         width: 90px;
 
diff --git a/src/components/PhaseInput/index.js b/src/components/PhaseInput/index.js
index c70afdbb..2338d5d3 100644
--- a/src/components/PhaseInput/index.js
+++ b/src/components/PhaseInput/index.js
@@ -1,141 +1,146 @@
-import _ from 'lodash'
-import moment from 'moment-timezone'
-import React, { Component } from 'react'
+import moment from 'moment'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './PhaseInput.module.scss'
 import cn from 'classnames'
 import 'react-day-picker/lib/style.css'
 import 'rc-time-picker/assets/index.css'
-import Select from '../Select'
 import DateTime from '@nateradebaugh/react-datetime'
 import isAfter from 'date-fns/isAfter'
 import subDays from 'date-fns/subDays'
 import '@nateradebaugh/react-datetime/scss/styles.scss'
 
 const dateFormat = 'MM/DD/YYYY HH:mm'
-// const tcTimeZone = 'America/New_York'
+const MAX_LENGTH = 5
 
-class PhaseInput extends Component {
-  constructor (props) {
-    super(props)
+const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
+  const [startDate, setStartDate] = useState()
+  const [endDate, setEndDate] = useState()
+  const [duration, setDuration] = useState()
 
-    this.onDateChange = this.onDateChange.bind(this)
+  useEffect(() => {
+    if (phase) {
+      setStartDate(phase.scheduledStartDate)
+      setEndDate(phase.scheduledEndDate)
+      setDuration(moment(phase.scheduledEndDate).diff(phase.scheduledStartDate, 'seconds'))
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!readOnly) {
+      onUpdatePhase({
+        startDate,
+        endDate,
+        duration
+      })
+    }
+  }, [startDate, endDate, duration])
+
+  const onStartDateChange = (e) => {
+    const start = moment(e).format()
+    let end = moment(endDate).format()
+
+    if (moment(end).isBefore(moment(start))) {
+      end = moment(e).add(1, 'day').format(dateFormat)
+      setEndDate(moment(end).format(dateFormat))
+    }
+
+    setStartDate(moment(e).format(dateFormat))
+    setDuration(moment(end).diff(start, 'seconds'))
   }
 
-  onDateChange (e) {
-    const { onUpdatePhase } = this.props
+  const onEndDateChange = (e) => {
+    const end = moment(e).format()
+    const start = moment(startDate).format()
+
+    if (moment(end).isBefore(moment(start))) {
+      return null
+    }
 
-    onUpdatePhase(moment(e, dateFormat))
+    setEndDate(moment(e).format(dateFormat))
+    setDuration(moment(end).diff(start, 'seconds'))
   }
 
-  render () {
-    const { phase, onUpdateSelect, onUpdatePhase, withDates, withDuration, endDate, readOnly } = this.props
-    if (_.isEmpty(phase)) return null
+  const onDurationChange = (e) => {
+    if (e.target.value.length > MAX_LENGTH) return null
 
-    const date = moment(phase.date).format(dateFormat)
+    const dur = parseInt(e.target.value || 0)
+    setDuration(dur)
+    const end = moment(startDate).add(duration, 'seconds')
+    setEndDate(moment(end).format(dateFormat))
+  }
 
-    return (
-      <div className={styles.container}>
-        <div className={styles.row}>
-          <div className={cn(styles.field, styles.col1, styles.phaseName)}>
-            <label htmlFor={`${phase.name}`}>{phase.name} :</label>
+  return (
+    <div className={styles.container} key={phaseIndex}>
+      <div className={styles.row}>
+        <div className={cn(styles.field, styles.col1, styles.phaseName)}>
+          <label htmlFor={`${phase.name}`}>{phase.name} :</label>
+        </div>
+        <div className={cn(styles.field, styles.col2)}>
+          <span className={styles.title}>Start Date:</span>
+          <div className={styles.dayPicker}>
             {
-              withDuration && endDate && (
-                <div className={styles.previewDates}>
-                  <span>Ends:</span>
-                  {moment(endDate).local().format(`${dateFormat}`)}
-                </div>
+              readOnly ? (
+                <span className={styles.readOnlyValue}>{moment(startDate).format(dateFormat)}</span>
               )
-            }
+                : (
+                  <DateTime
+                    value={moment(startDate).format(dateFormat)}
+                    onChange={onStartDateChange}
+                    isValidDate={(current) => {
+                      const yesterday = subDays(new Date(), 1)
+                      return isAfter(current, yesterday)
+                    }}
+                  />)}
           </div>
-          <div className={cn(styles.field, styles.col2)}>
+        </div>
+        <div className={cn(styles.field, styles.col2)}>
+          <span className={styles.title}>End Date:</span>
+          <div className={styles.dayPicker}>
             {
-              withDates && (
-                <div className={styles.dayPicker}>
-                  {
-                    readOnly ? (
-                      <span className={styles.readOnlyValue}>{date}</span>
-                    )
-                      : (
-                        <DateTime
-                          value={date}
-                          onChange={this.onDateChange}
-                          isValidDate={(current) => {
-                            const yesterday = subDays(new Date(), 1)
-                            return isAfter(current, yesterday)
-                          }}
-                        />)}
-                </div>
+              readOnly ? (
+                <span className={styles.readOnlyValue}>{moment(endDate).format(dateFormat)}</span>
               )
-            }
-            {/* {
-              withDates && (
-                <div className={styles.dayPicker}>
-                  {readOnly ? (
-                    <span className={styles.readOnlyValue}>{date}</span>
-                  ) : (<DayPickerInput formatDate={formatDate} inputProps={{ readOnly: true }} dayPickerProps={{ disabledDays: { before: new Date() } }} parseDate={parseDate} placeholder={dateFormat} value={date} onDayChange={(selectedDay) => onUpdatePhase(moment(`${moment(selectedDay).format(dateFormat)} ${time.format(timeFormat)}`, `${dateFormat} ${timeFormat}`))} format={dateFormat} />)}
-                </div>
-              )
-            }
-            {
-              withDates && (
-                <div className={styles.timePicker}>
-                  {readOnly ? (
-                    <span className={styles.readOnlyValue}>{time.format(timeFormat)}</span>
-                  ) : (<TimePicker
-                    showSecond={false}
-                    inputReadOnly
-                    value={time}
-                    format={timeFormat}
-                    onChange={(value) => onUpdatePhase(value)}
+                : (
+                  <DateTime
+                    value={moment(endDate).format(dateFormat)}
+                    onChange={onEndDateChange}
+                    isValidDate={(current) => {
+                      return isAfter(current, new Date(startDate))
+                    }}
                   />)}
-                </div>
-              )
-            } */}
-            {
-              withDuration && (
-                <div className={styles.durationPicker}>
-                  {readOnly ? (
-                    <span className={styles.readOnlyValue}>{phase.duration}</span>
-                  ) : (<input type='number' value={phase.duration} onChange={e => onUpdatePhase(e.target.value)} min={1} placeholder='Duration (hours)' />)}
-                </div>
-              )
-            }
+          </div>
+        </div>
+        <div className={cn(styles.field, styles.col2)}>
+          <span className={styles.title}>Duration:</span>
+          <div className={styles.inputField}>
             {
-              !_.isEmpty(phase.scorecards) && (
-                <div className={styles.scorecards}>
-                  <Select
-                    name='scorecard'
-                    options={phase.scorecards.map(({ name }) => ({ label: name, value: name, name }))}
-                    placeholder='Select Scorecard'
-                    isClearable={false}
-                    value={phase.scorecard}
-                    onChange={(e) => onUpdateSelect(e, true, 'phases')}
-                  />
-                </div>
+              readOnly ? (
+                <span className={styles.readOnlyValue}>{duration}</span>
               )
-            }
+                : (
+                  <input
+                    min={0}
+                    type='number'
+                    value={Number(duration).toString()}
+                    onChange={onDurationChange}
+                  />)}
           </div>
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 PhaseInput.defaultProps = {
-  withDates: false,
-  withDuration: false,
   endDate: null,
   readOnly: false
 }
 
 PhaseInput.propTypes = {
   phase: PropTypes.shape().isRequired,
-  onUpdateSelect: PropTypes.func,
   onUpdatePhase: PropTypes.func.isRequired,
-  withDates: PropTypes.bool,
-  withDuration: PropTypes.bool,
-  endDate: PropTypes.shape(),
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  phaseIndex: PropTypes.string.isRequired
 }
 export default PhaseInput
diff --git a/src/components/StartDateInput/StartDateInput.module.scss b/src/components/StartDateInput/StartDateInput.module.scss
new file mode 100644
index 00000000..e16fc96b
--- /dev/null
+++ b/src/components/StartDateInput/StartDateInput.module.scss
@@ -0,0 +1,129 @@
+@import "../../styles/includes";
+
+:global {
+  div[data-reach-popover] {
+    z-index: 10;
+  }
+}
+
+.container {
+  display: flex;
+}
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  margin: 30px 30px 0 30px;
+  align-content: space-between;
+  justify-content: flex-start;
+
+  .field {
+    @include upto-sm {
+      display: block;
+      padding-bottom: 10px;
+    }
+
+    label {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+    }
+
+    &.col1 {
+      max-width: 185px;
+      min-width: 185px;
+      margin-right: 14px;
+      margin-bottom: auto;
+      margin-top: auto;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+    }
+
+    &.phaseName {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .previewDates {
+        font-size: 13px;
+        display: flex;
+        color: $red;
+        font-weight: 300;
+
+        span {
+          color: $dark-gray;
+          margin-right: 10px;
+        }
+      }
+    }
+
+    &.col2 {
+      align-self: flex-end;
+      margin-bottom: auto;
+      margin-top: auto;
+      display: flex;
+      flex-direction: row;
+
+      input {
+        border-radius: 2px;
+      }
+
+      .dayPicker {
+        width: 180px;
+        margin-right: 30px;
+
+        :global {
+          .DayPickerInput {
+            width: 100%;
+          }
+          .DayPickerInput-OverlayWrapper {
+            z-index: 10;
+          }
+        }
+
+        input {
+          width: 100%;
+        }
+      }
+
+      .timePicker {
+        width: 90px;
+
+        input {
+          width: 100%;
+        }
+
+        :global {
+          .rc-time-picker-clear {
+            top: 9px;
+          }
+        }
+      }
+
+      .durationPicker {
+        width: 180px;
+      }
+
+      .scorecards {
+        width: 190px;
+        margin-left: 30px;
+      }
+
+      :global{
+        .rc-time-picker-clear{
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.readOnlyValue {
+  color: black;
+}
+
+
diff --git a/src/components/StartDateInput/index.js b/src/components/StartDateInput/index.js
new file mode 100644
index 00000000..82c3d6fd
--- /dev/null
+++ b/src/components/StartDateInput/index.js
@@ -0,0 +1,141 @@
+import _ from 'lodash'
+import moment from 'moment-timezone'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import styles from './StartDateInput.module.scss'
+import cn from 'classnames'
+import 'react-day-picker/lib/style.css'
+import 'rc-time-picker/assets/index.css'
+import Select from '../Select'
+import DateTime from '@nateradebaugh/react-datetime'
+import isAfter from 'date-fns/isAfter'
+import subDays from 'date-fns/subDays'
+import '@nateradebaugh/react-datetime/scss/styles.scss'
+
+const dateFormat = 'MM/DD/YYYY HH:mm'
+// const tcTimeZone = 'America/New_York'
+
+class StartDateInput extends Component {
+  constructor (props) {
+    super(props)
+
+    this.onDateChange = this.onDateChange.bind(this)
+  }
+
+  onDateChange (e) {
+    const { onUpdatePhase } = this.props
+
+    onUpdatePhase(moment(e, dateFormat))
+  }
+
+  render () {
+    const { phase, onUpdateSelect, onUpdatePhase, withDates, withDuration, endDate, readOnly } = this.props
+    if (_.isEmpty(phase)) return null
+
+    const date = moment(phase.date).format(dateFormat)
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.row}>
+          <div className={cn(styles.field, styles.col1, styles.phaseName)}>
+            <label htmlFor={`${phase.name}`}>{phase.name} :</label>
+            {
+              withDuration && endDate && (
+                <div className={styles.previewDates}>
+                  <span>Ends:</span>
+                  {moment(endDate).local().format(`${dateFormat}`)}
+                </div>
+              )
+            }
+          </div>
+          <div className={cn(styles.field, styles.col2)}>
+            {
+              withDates && (
+                <div className={styles.dayPicker}>
+                  {
+                    readOnly ? (
+                      <span className={styles.readOnlyValue}>{date}</span>
+                    )
+                      : (
+                        <DateTime
+                          value={date}
+                          onChange={this.onDateChange}
+                          isValidDate={(current) => {
+                            const yesterday = subDays(new Date(), 1)
+                            return isAfter(current, yesterday)
+                          }}
+                        />)}
+                </div>
+              )
+            }
+            {/* {
+              withDates && (
+                <div className={styles.dayPicker}>
+                  {readOnly ? (
+                    <span className={styles.readOnlyValue}>{date}</span>
+                  ) : (<DayPickerInput formatDate={formatDate} inputProps={{ readOnly: true }} dayPickerProps={{ disabledDays: { before: new Date() } }} parseDate={parseDate} placeholder={dateFormat} value={date} onDayChange={(selectedDay) => onUpdatePhase(moment(`${moment(selectedDay).format(dateFormat)} ${time.format(timeFormat)}`, `${dateFormat} ${timeFormat}`))} format={dateFormat} />)}
+                </div>
+              )
+            }
+            {
+              withDates && (
+                <div className={styles.timePicker}>
+                  {readOnly ? (
+                    <span className={styles.readOnlyValue}>{time.format(timeFormat)}</span>
+                  ) : (<TimePicker
+                    showSecond={false}
+                    inputReadOnly
+                    value={time}
+                    format={timeFormat}
+                    onChange={(value) => onUpdatePhase(value)}
+                  />)}
+                </div>
+              )
+            } */}
+            {
+              withDuration && (
+                <div className={styles.durationPicker}>
+                  {readOnly ? (
+                    <span className={styles.readOnlyValue}>{phase.duration}</span>
+                  ) : (<input type='number' value={phase.duration} onChange={e => onUpdatePhase(e.target.value)} min={1} placeholder='Duration (hours)' />)}
+                </div>
+              )
+            }
+            {
+              !_.isEmpty(phase.scorecards) && (
+                <div className={styles.scorecards}>
+                  <Select
+                    name='scorecard'
+                    options={phase.scorecards.map(({ name }) => ({ label: name, value: name, name }))}
+                    placeholder='Select Scorecard'
+                    isClearable={false}
+                    value={phase.scorecard}
+                    onChange={(e) => onUpdateSelect(e, true, 'phases')}
+                  />
+                </div>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+StartDateInput.defaultProps = {
+  withDates: false,
+  withDuration: false,
+  endDate: null,
+  readOnly: false
+}
+
+StartDateInput.propTypes = {
+  phase: PropTypes.shape().isRequired,
+  onUpdateSelect: PropTypes.func,
+  onUpdatePhase: PropTypes.func.isRequired,
+  withDates: PropTypes.bool,
+  withDuration: PropTypes.bool,
+  endDate: PropTypes.shape(),
+  readOnly: PropTypes.bool
+}
+export default StartDateInput
diff --git a/src/util/date.js b/src/util/date.js
index b5017f29..29030d96 100644
--- a/src/util/date.js
+++ b/src/util/date.js
@@ -111,7 +111,9 @@ export const updateChallengePhaseBeforeSendRequest = (challengeDetail) => {
     const challengeDetailTmp = _.cloneDeep(challengeDetail)
     challengeDetailTmp.phases = challengeDetailTmp.phases.map((p) => ({
       duration: p.duration * hourToSecond,
-      phaseId: p.phaseId
+      phaseId: p.phaseId,
+      scheduledStartDate: p.scheduledStartDate,
+      scheduledEndDate: p.scheduledEndDate
     }))
     return challengeDetailTmp
   }