diff --git a/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimpleplan.scss b/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimpleplan.scss
deleted file mode 100644
index 62b101e23..000000000
--- a/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimpleplan.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.milestones-container {
-  margin-top: 50px;
-}
-
-.tabs-header {
-  height: 0;
-  float: left;
-
-  nav {
-    justify-content: flex-start;
-    background-color: transparent;
-  }
-
-  ul {
-    > li:first-child {
-      margin-left: 0;
-    }
-
-    > li:last-child {
-      margin-right: 0;
-    }
-  }
-}
-
-.welcome-message {
-  margin: 0 auto;
-  max-width: 760px;
-}
-
-.add-new-milestone {
-  margin-top: 10px;
-  text-align: center;
-}
-
-.twoColsLayout-contentInner {
-  max-width: 947px;
-
-  @media screen and (min-width: 1280px) {
-    margin-left: calc((100% - 947px) * 0.41);
-  }
-}
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index f196d1775..241c378d4 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -30,6 +30,7 @@ class ManageMilestones extends React.Component {
     const index = milestones.findIndex(m => m.id === updatedMilestone.id)
 
     const updatedMilestones = [...milestones]
+    updatedMilestones.forEach(milestone => milestone.editting = false)
     updatedMilestones.splice(index, 1, updatedMilestone)
     onChangeMilestones(updatedMilestones)
   }
@@ -97,18 +98,22 @@ class ManageMilestones extends React.Component {
           <Formsy.Form>
             <table styleName="milestones-table">
               <colgroup>
-                <col style={{width: '20px'}} />{/* CHECKBOX */}
-                <col style={{width: '10%'}} />{/* MILESTONE */}
-                <col style={{minWidth: '140px'}} />{/* DESCRIPTION */}
-                <col style={{width: '10%', minWidth: '80px'}} />{/* START DATE */}
-                <col style={{width: '10%', minWidth: '80px'}} />{/* END DATE */}
-                <col style={{width: '10%'}} />{/* STATUS */}
-                <col style={{width: '15%'}} />{/* BUDGET */}
-                {/* <col style={{width: '10%'}} /> */}{/* COPILOTS */}
-                <col style={{width: '80px'}} />{/* ACTION */}
+                <col style={{ width: '20px' }} />{/* CHECKBOX */}
+                <col style={{ width: '8%' }} />{/* MILESTONE */}
+                <col />{/* DESCRIPTION */}
+                <col style={{ width: '12%' }} />{/* START DATE */}
+                <col style={{ width: '11%' }} />{/* END DATE */}
+                <col style={{ width: '10%' }} />{/* STATUS */}
+                <col style={{ width: '12%' }} />{/* BUDGET */}
+                <col style={{ width: '13%' }} />{/* COPILOTS */}
+                {isUpdatable && (<col style={{ width: '80px' }} />)}{/* ACTION */}
               </colgroup>
               <thead>
-                <MilestoneHeaderRow milestones={milestones} onChangeMilestones={onChangeMilestones} />
+                <MilestoneHeaderRow
+                  milestones={milestones}
+                  onChangeMilestones={onChangeMilestones}
+                  isUpdatable={isUpdatable}
+                />
               </thead>
               <tbody>
                 {milestones.map((milestone) => (
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
index 2fcdec2e6..3edd9d897 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
@@ -47,8 +47,73 @@
     text-align: left;
     vertical-align: middle;
 
-    &:not(:first-child) {
-      padding-left: 5px;
+    // checkbox
+    &:nth-child(1) {}
+    // milestone
+    &:nth-child(2) { padding-left: 5px; }
+    // description
+    &:nth-child(3) { padding-left: 15px; }
+    // start date
+    &:nth-child(4) { padding-left: 25px; }
+    // end date
+    &:nth-child(5) { padding-left: 15px; }
+    // status
+    &:nth-child(6) { padding-left: 20px; }
+    // budget
+    &:nth-child(7) {
+      padding-left: 20px;
+      :global(.milestone-budget-prefix-icon) { left: 25px; }
+    }
+    // copilot
+    &:nth-child(8) { padding-left: 25px; }
+  }
+
+  :global(.edit-milestone-row) {
+    th,
+    td {
+      // description
+      &:nth-child(3) { padding-left: 10px; }
+      // end date
+      &:nth-child(5) {  padding-left: 10px; }
+    }
+  }
+
+  @media screen and (max-width: 1024px - 1px) {
+    th,
+    td {
+      // description
+      &:nth-child(3) { padding-left: 5px; }
+      // start date
+      &:nth-child(4) { padding-left: 10px; }
+      // end date
+      &:nth-child(5) { padding-left: 5px; }
+      // status
+      &:nth-child(6) { padding-left: 10px; }
+      // budget
+      &:nth-child(7) {
+        padding-left: 10px;
+        :global {
+          .milestone-budget-prefix-icon {
+            left: 15px;
+          }
+          .tc-file-field__inputs {
+            min-width: 64px;
+            padding-left: 10px;
+          }
+        }
+      }
+      // copilot
+      &:nth-child(8) { padding-left: 15px; }
+    }
+
+    :global(.edit-milestone-row) {
+      th,
+      td {
+        // description
+        &:nth-child(3) { padding-left: 5px; }
+        // end date
+        &:nth-child(5) {  padding-left: 5px; }
+      }
     }
   }
 
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
index 1d005f56f..6822d19b1 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
@@ -9,7 +9,7 @@ import './MilestoneHeaderRow.scss'
 
 const TCFormFields = FormsyForm.Fields
 
-function MilestoneHeaderRow ({ milestones, onChangeMilestones }) {
+function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
   const checked = milestones.reduce(
     (selected, milestone) => selected = selected && milestone.selected,
     milestones.length > 0
@@ -47,7 +47,7 @@ function MilestoneHeaderRow ({ milestones, onChangeMilestones }) {
       <th>STATUS</th>
       <th>BUDGET</th>
       {/* <th>COPILOTS</th> */}
-      <th>ACTION</th>
+      {isUpdatable && (<th>ACTION</th>)}
     </tr>
   )
 }
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
index 1529e0dcf..4c7a5bd26 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
@@ -6,6 +6,7 @@ import PT from 'prop-types'
 import moment from 'moment'
 import FormsyForm from 'appirio-tech-react-components/components/Formsy'
 import _ from 'lodash'
+import { components } from 'react-select'
 import { isValidStartEndDates } from '../../../../../../helpers/utils'
 import FormsySelect from '../../../../../../components/Select/FormsySelect'
 // import MilestoneCopilots from '../MilestoneCopilots'
@@ -16,8 +17,8 @@ import { PHASE_STATUS_OPTIONS } from '../../../../../../config/constants'
 import IconCheck from '../../../../../../assets/icons/icon-check-thin.svg'
 import IconXMark from '../../../../../../assets/icons/icon-x-mark-thin.svg'
 import IconPencil from '../../../../../../assets/icons/icon-ui-pencil.svg'
-
 import IconDots from '../../../../../../assets/icons/icon-dots.svg'
+import IconArrowDown from '../../../../../../assets/icons/arrow-6px-carret-down-normal.svg'
 
 import styles from './MilestoneRow.scss'
 
@@ -47,14 +48,13 @@ function MilestoneRow({
     copilots = copilots.concat(missingCopilots)
   }
 
-
   let milestoneRef
   let startDateRef
   let endDateRef
   let budgetRef
 
   return edit ? (
-    <tr styleName="milestone-row">
+    <tr styleName="milestone-row" className="edit-milestone-row">
       <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}
@@ -69,10 +69,13 @@ function MilestoneRow({
           validations={{
             isRequired: true,
             checkDuplicatedTitles(values) {
+              if (!milestone.editting) {
+                return true
+              }
               const existingTitles = allMilestones
                 .filter(i => i.id !== milestone.id)
-                .map(i => i.name.toLowerCase())
-              const inputtingTitle = values[`title-${rowId}`].toLowerCase()
+                .map(i => i.name.toLowerCase().trim())
+              const inputtingTitle = values[`title-${rowId}`].toLowerCase().trim()
               return existingTitles.indexOf(inputtingTitle) === -1
             }
           }}
@@ -89,10 +92,11 @@ function MilestoneRow({
             if (!milestone.origin) {
               milestone.origin = {...milestone }
             }
-            onChange({...milestone, name: value })
+            onChange({...milestone, name: value, editting: true, editted: true })
           }}
           wrapperClass={styles.textInput}
           innerRef={ref => milestoneRef = ref}
+          isPristine={() => !milestone.editted}
         />
       </td>
       <td styleName="description">
@@ -181,14 +185,28 @@ function MilestoneRow({
           }}
           value={phaseStatusOptions.find(option => option.value === milestone.status)}
           isSearchable={false}
+          components={{
+            DropdownIndicator: (props) => (
+              <components.DropdownIndicator {...props}>
+                <IconArrowDown />
+              </components.DropdownIndicator>
+            )
+          }}
         />
       </td>
       <td styleName="budget">
+        <span styleName="prefix-icon" className="milestone-budget-prefix-icon">$</span>
         <TCFormFields.TextInput
           validations={{
             isRequired: true,
+            isPositive(values) {
+              return !(values[`budget-${rowId}`] < 0)
+            }
           }}
           validationError={'Please, enter budget'}
+          validationErrors={{
+            isPositive: 'Budget cannot be negative'
+          }}
           required
           type="number"
           name={`budget-${rowId}`}
@@ -233,6 +251,8 @@ function MilestoneRow({
             className="tc-btn tc-btn-link"
             styleName="icon-button"
             onClick={() => {
+              milestone.editted = true
+              milestone.editting = true
               if (milestoneRef.props.isValid()
                 && startDateRef.props.isValid()
                 && endDateRef.props.isValid()
@@ -272,18 +292,30 @@ function MilestoneRow({
           }}
         />
       </td>
-      <td styleName="milestone">{milestone.name}</td>
-      <td styleName="description">{milestone.description}</td>
-      <td styleName="start-date">{moment(milestone.startDate).format('MM-DD-YYYY')}</td>
-      <td styleName="end-date">{moment(milestone.endDate).format('MM-DD-YYYY')}</td>
-      <td styleName="status"><MilestoneStatus status={milestone.status} /></td>
-      <td styleName="budget"><MilestoneBudget spent={milestone.spentBudget} budget={milestone.budget} /></td>
+      <td styleName="milestone">
+        {milestone.name}
+      </td>
+      <td styleName="description">
+        {milestone.description}
+      </td>
+      <td styleName="start-date">
+        {moment(milestone.startDate).format('MM-DD-YYYY')}
+      </td>
+      <td styleName="end-date">
+        {moment(milestone.endDate).format('MM-DD-YYYY')}
+      </td>
+      <td styleName="status">
+        <MilestoneStatus status={milestone.status} />
+      </td>
+      <td styleName="budget">
+        <MilestoneBudget spent={milestone.spentBudget} budget={milestone.budget} />
+      </td>
       {/* <td styleName="copilots">
         <MilestoneCopilots copilots={copilots} />
       </td> */}
-      <td styleName="action">
-        <div styleName="inline-menu">
-          {isUpdatable && (
+      {isUpdatable && (
+        <td styleName="action">
+          <div styleName="inline-menu">
             <button
               type="button"
               className="tc-btn tc-btn-link"
@@ -294,19 +326,17 @@ function MilestoneRow({
             >
               <IconPencil />
             </button>
-          )}
-          {isUpdatable && (
             <MilestoneDeleteButton
               onDelete={() => {
                 onRemove(milestone.id)
               }}
             />
-          )}
-          <button type="button" className="tc-btn tc-btn-link" styleName="icon-button">
-            <IconDots />
-          </button>
-        </div>
-      </td>
+            <button type="button" className="tc-btn tc-btn-link" styleName="icon-button">
+              <IconDots />
+            </button>
+          </div>
+        </td>
+      )}
     </tr>
   )
 }
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
index 03642ab23..ce1e1f152 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
@@ -69,11 +69,10 @@
     }
     .tc-textarea {
       height: 25px;
-      max-width: 140px;
       min-height: 25px;
       padding-top: 0;
       padding-bottom: 0;
-      margin-bottom: 0;
+      margin: 0;
       overflow: hidden;
       resize: vertical;
       font-size: $tc-body-sm;
@@ -86,6 +85,7 @@
   :global {
     .tc-file-field__inputs {
       padding: 0;
+      max-width: 120px;
 
       &::-webkit-calendar-picker-indicator {
         width: 16px;
@@ -101,44 +101,60 @@
 
 .status {
   :global {
-    .react-select__control {
-      height: auto;
-      min-height: 25px;
-      overflow: hidden;
-
-      .react-select__value-container {
+    .react-select-hiddendropdown-container {
+      .react-select__control {
         height: auto;
-        padding-top: 0;
-        padding-bottom: 0;
+        min-height: 25px;
+        overflow: hidden;
+
+        .react-select__value-container {
+          height: auto;
+          padding-top: 0;
+          padding-bottom: 0;
 
-        input {
-          margin-bottom: 0;
+          input {
+            margin-bottom: 0;
+          }
+        }
+        .react-select__single-value {
+          margin-left: 0;
+          margin-right: 0;
+        }
+        .react-select__indicators {
+          display: flex;
+          height: auto;
+        }
+        .react-select__clear-indicator {
+          display: none;
+        }
+        .react-select__indicator-separator {
+          display: none;
+        }
+        .react-select__dropdown-indicator {
+          display: flex;
         }
       }
-      .react-select__single-value {
-        margin-left: 0;
-        margin-right: 0;
-      }
-      .react-select__indicators {
-        display: flex;
-      }
-      .react-select__indicator-separator {
-        display: none;
-      }
-      .react-select__dropdown-indicator {
-        display: flex;
+      .react-select__menu {
+        min-width: 100px;
       }
     }
-    .react-select__menu {
-      min-width: 100px;
-    }
   }
 }
 
 .budget {
+  position: relative;
+
+  .prefix-icon {
+    position: absolute;
+    left: 0;
+    top: calc(50% - 6px);
+    z-index: 1;
+  }
+
   :global {
     .tc-file-field__inputs {
       padding-right: 0;
+      padding-left: 20px;
     }
   }
 }
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index dbbca6a6f..9997dfe23 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -88,12 +88,20 @@ export default function(state = {}, action) {
 
   case CREATE_PROJECT_PHASE_TIMELINE_MILESTONES_SUCCESS:
   case CREATE_PROJECT_PHASE_SUCCESS: {
-    Alert.success('Project phase created.')
+    if (state.project.version === 'v4') {
+      Alert.success('Project milestone created.')
+    } else {
+      Alert.success('Project phase created.')
+    }
     return state
   }
 
   case DELETE_PROJECT_PHASE_SUCCESS: {
-    Alert.success('Project phase deleted.')
+    if (state.project.version === 'v4') {
+      Alert.success('Project milestone deleted.')
+    } else {
+      Alert.success('Project phase deleted.')
+    }
 
     return state
   }
@@ -102,11 +110,11 @@ export default function(state = {}, action) {
     Alert.success('Project deleted.')
     return state
 
-  case CREATE_TIMELINE_MILESTONE_SUCCESS: 
+  case CREATE_TIMELINE_MILESTONE_SUCCESS:
     Alert.success('Milestone created.')
     return state
 
-  case CREATE_TIMELINE_MILESTONE_FAILURE: 
+  case CREATE_TIMELINE_MILESTONE_FAILURE:
     Alert.error('Unable to create milestone')
     return state
   case COMPLETE_PRODUCT_MILESTONE_SUCCESS: