diff --git a/.circleci/config.yml b/.circleci/config.yml
index bf7374129..fb3293fd1 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -188,7 +188,7 @@ workflows:
             - build-dev
           filters: &filters-dev
             branches:
-              only: ['dev', 'feature/copilot-feedback']
+              only: ['dev', 'feature/new-milestone-concept']
 
       - deployTest01:
           context : org-global
diff --git a/connect-automation/config/config.json b/connect-automation/config/config.json
index 06dd18781..903c05ba8 100644
--- a/connect-automation/config/config.json
+++ b/connect-automation/config/config.json
@@ -24,5 +24,6 @@
   "notificationsUrl": "https://connect.topcoder-dev.com/notifications",
   "allProjectsUrl": "https://connect.topcoder-dev.com/projects",
   "givenProjectUrl": "https://connect.topcoder-dev.com/projects/18013",
-  "expiredProjectUrl": "https://connect.topcoder-dev.com/projects/17236"
+  "expiredProjectUrl": "https://connect.topcoder-dev.com/projects/17236",
+  "platformUrl": "https://platform.topcoder-dev.com/taas/myteams"
 }
diff --git a/connect-automation/page-objects/common-page/common.helper.ts b/connect-automation/page-objects/common-page/common.helper.ts
index b33938637..09842d546 100644
--- a/connect-automation/page-objects/common-page/common.helper.ts
+++ b/connect-automation/page-objects/common-page/common.helper.ts
@@ -367,4 +367,11 @@ export const CommonHelper = {
      }
      return isElementPresent;
   },
+
+  /**
+   * Get Join Project Button
+   */
+  get joinProjectButton() {
+      return ElementHelper.getElementByButtonText('Join project');
+  },
 };
diff --git a/connect-automation/page-objects/phase-creation-flow/create-new-phase/create-new-phase.helper.ts b/connect-automation/page-objects/phase-creation-flow/create-new-phase/create-new-phase.helper.ts
index 9bde263fb..29717ffd2 100644
--- a/connect-automation/page-objects/phase-creation-flow/create-new-phase/create-new-phase.helper.ts
+++ b/connect-automation/page-objects/phase-creation-flow/create-new-phase/create-new-phase.helper.ts
@@ -19,6 +19,12 @@ export class CreateNewPhaseHelper {
    * @param formData phase creation form data defined in test data
    */
   public static async verifyCreateNewPhase(formData: IPhaseCreationData) {
+    // If user is invited to project, click on "Join Project" to proceed.
+    await BrowserHelper.sleep(4000);
+    if (await CommonHelper.joinProjectButton.isPresent()) {
+      await CommonHelper.joinProjectButton.click();
+    }
+
     await this.clickOnAddNewPhaseButton();
     await this.fillCreatePhaseForm(formData.title, formData.daysBetweenStartAndEndDate);
 
diff --git a/connect-automation/page-objects/project-creation-flow/create-project/create-project.helper.ts b/connect-automation/page-objects/project-creation-flow/create-project/create-project.helper.ts
index 3d0661baa..6b073c476 100644
--- a/connect-automation/page-objects/project-creation-flow/create-project/create-project.helper.ts
+++ b/connect-automation/page-objects/project-creation-flow/create-project/create-project.helper.ts
@@ -1,6 +1,7 @@
 import { BrowserHelper } from 'topcoder-testing-lib';
+import { ConfigHelper } from '../../../utils/config-helper';
 import { CommonHelper } from '../../common-page/common.helper';
-import { IAnswers, IProjectData } from './create-project.model';
+import { IAnswers, IProjectData, ITaasData } from './create-project.model';
 import { CreateProjectPageObject } from './create-project.po';
 
 export class CreateProjectPageHelper {
@@ -29,8 +30,8 @@ export class CreateProjectPageHelper {
 
     await this.clickNewProjectButton();
     await this.navigateToViewSolutions();
-    await this.clickOnDesignDevelopmentDeploymentButton();
-    await this.fillBeforeWeStartForm(projectData.answers);
+    await this.clickOnSelectButton();
+    await this.fillBeforeWeStartForm(projectData.answers, 'Basic Details');
     await this.fillBasicDetailsForm(
       appNameWithDate,
       projectData.appDescription
@@ -40,6 +41,29 @@ export class CreateProjectPageHelper {
     await this.goToYourProject(appNameWithDate);
   }
 
+  /**
+   * verify whether the current user can create a TAAS project
+   */
+   public static async verifyTaasProject(taasData: ITaasData) {
+    await this.clickNewProjectButton();
+    await this.navigateToTopTalent();
+    await this.clickOnSelectButton();
+    await this.fillBeforeWeStartForm(taasData.answers, 'Talent as a Service: Getting Started');
+    await this.fillTaasProjectTitleForm(taasData.title);
+    await this.verifyAddJobItem();
+    await this.verifyDeleteJobItem();
+    await this.fillJobForm(taasData);
+    await this.fillTalentRequirementForm(taasData.answers, 'Your Talent Requirements');
+    await this.fillRequirementForm(taasData.answers, taasData.email);
+
+    await this.createProjectPageObject.submitJobRequest.click();
+    await CommonHelper.verifySuccessAlert(`PROJECT '${taasData.title.toUpperCase()}' CREATED`);
+
+    await this.createProjectPageObject.viewTalentRequestButton.click();
+    await BrowserHelper.sleep(10000);
+    await CommonHelper.verifyPageUrl(ConfigHelper.getPlatformUrl());
+  }
+
   private static createProjectPageObject: CreateProjectPageObject;
 
   /**
@@ -100,10 +124,19 @@ export class CreateProjectPageHelper {
     expect(title).toBe('TOPCODER SOLUTIONS');
   }
 
+  /**
+   * Click on "Tap Into Top Talen" under "TAAS" section
+   */
+  private static async navigateToTopTalent() {
+    await this.createProjectPageObject.tapIntoTopTalent.click();
+    const title = await this.createProjectPageObject.solutionCatalogTitle.getText();
+    expect(title).toBe('ENGAGE TALENT');
+  }
+
   /**
    * Click on "Select" button under Design, Development and Deployment.
    */
-  private static async clickOnDesignDevelopmentDeploymentButton() {
+  private static async clickOnSelectButton() {
     const selectButton = await this.createProjectPageObject.selectButton();
     await selectButton.click();
     await this.verifyFormDisplayed('Before we start');
@@ -112,14 +145,29 @@ export class CreateProjectPageHelper {
   /**
    * Fill Before We Start form
    * @param answers answers object defined by test data
+   * @param formTitle form title to be expected
    */
-  private static async fillBeforeWeStartForm(answers: IAnswers) {
+  private static async fillBeforeWeStartForm(answers: IAnswers, formTitle: string) {
     const { beforeWeStart } = answers;
     await CommonHelper.selectInputByContainingText(beforeWeStart);
 
     await this.createProjectPageObject.nextButton.click();
 
-    await this.verifyFormDisplayed('Basic Details');
+    await this.verifyFormDisplayed(formTitle);
+  }
+
+  /**
+   * Fill Before We Start form
+   * @param answers answers object defined by test data
+   * @param formTitle form title to be expected
+   */
+  private static async fillTalentRequirementForm(answers: IAnswers, formTitle: string) {
+    const { startDate } = answers;
+    await CommonHelper.selectInputByContainingText(startDate);
+
+    await this.createProjectPageObject.nextButton.click();
+
+    await this.verifyFormDisplayed(formTitle);
   }
 
   /**
@@ -138,6 +186,69 @@ export class CreateProjectPageHelper {
     await this.verifyFormDisplayed('App Definition');
   }
 
+  /**
+   * Fill Taas Project title, then click next
+   * @param title taas application title
+   */
+  private static async fillTaasProjectTitleForm(title: string) {
+    const name = this.createProjectPageObject.appNameInput;
+    await CommonHelper.fillInputField(name, title);
+    await this.createProjectPageObject.nextButton.click();
+
+    await this.verifyFormDisplayed('Your Talent Requirements');
+  }
+
+  /**
+   * Fill Requirement Form, then click next
+   * @param title taas application title
+   * @param email
+   */
+  private static async fillRequirementForm(answers: IAnswers, email: string) {
+    const { requirement } = answers;
+    await CommonHelper.selectInputByContainingText(requirement);
+
+    await this.createProjectPageObject.emailInput.click();
+    await this.createProjectPageObject.emailInput.sendKeys(email);
+
+    await this.createProjectPageObject.nextButton.click();
+  }
+
+  /**
+   * Fill Taas Job Form
+   * @param taasData
+   */
+  private static async fillJobForm(taasData: ITaasData) {
+    const { jobTitle, numOfPeople, duration, description } = taasData;
+
+    const titleEl = this.createProjectPageObject.titleInput;
+    await CommonHelper.fillInputField(titleEl, jobTitle);
+
+    const numberInputs = await this.createProjectPageObject.numberInputEls();
+    await CommonHelper.fillInputField(numberInputs[0], numOfPeople + '');
+    await CommonHelper.fillInputField(numberInputs[1], duration + '');
+
+    const dropdownInputs = await this.createProjectPageObject.dropdownEls();
+    await dropdownInputs[0].click();
+    let dropdownOptions = await this.createProjectPageObject.dropdownOptions();
+    await dropdownOptions[1].click();
+
+    await dropdownInputs[1].click();
+    dropdownOptions = await this.createProjectPageObject.dropdownOptions();
+    await BrowserHelper.sleep(200);
+    await dropdownOptions[6].click();
+
+    await this.createProjectPageObject.editorTextarea.click();
+    await this.createProjectPageObject.editorTextareaInput.sendKeys(description);
+
+    await this.createProjectPageObject.skillsInput.click();
+    await BrowserHelper.sleep(2500);
+    await this.createProjectPageObject.multiSelectOption.click();
+
+    await this.createProjectPageObject.nextButton.click();
+
+    await this.verifyFormDisplayed('Your Talent Requirements');
+  }
+
   /**
    * Fill App Definition Form, then click next
    * @param projectData project data from test data
@@ -191,4 +302,22 @@ export class CreateProjectPageHelper {
 
     expect(await CommonHelper.projectTitle().getText()).toBe(appName);
   }
+
+  /**
+   * Add job item and verify Add Job Item
+   */
+  private static async verifyAddJobItem() {
+    await this.createProjectPageObject.plusIcon.click();
+    let jobFormNumber = await this.createProjectPageObject.taasJobForm();
+    expect(jobFormNumber.length).toBe(2);
+  }
+
+  /**
+   * Delete job item and verify Deletion of Job Item
+   */
+  private static async verifyDeleteJobItem() {
+    await this.createProjectPageObject.deleteIcon.click();
+    const jobFormNumber = await this.createProjectPageObject.taasJobForm();
+    expect(jobFormNumber.length).toBe(1);
+  }
 }
diff --git a/connect-automation/page-objects/project-creation-flow/create-project/create-project.model.ts b/connect-automation/page-objects/project-creation-flow/create-project/create-project.model.ts
index 3b548153d..61795672d 100644
--- a/connect-automation/page-objects/project-creation-flow/create-project/create-project.model.ts
+++ b/connect-automation/page-objects/project-creation-flow/create-project/create-project.model.ts
@@ -5,11 +5,23 @@ export interface IProjectData {
   notes: string;
 }
 
+export interface ITaasData {
+  title: string;
+  jobTitle: string;
+  numOfPeople: number;
+  duration: number;
+  description: string;
+  email: string;
+  answers: IAnswers;
+}
+
 export interface IAnswers {
   beforeWeStart: string;
-  whatDoYouNeed: string;
-  willYourAppNeedMoreScreen: string;
-  howManyScreens: string;
-  whereShouldAppWork: string;
-  howShouldAppWorks: string;
+  whatDoYouNeed?: string;
+  willYourAppNeedMoreScreen?: string;
+  howManyScreens?: string;
+  whereShouldAppWork?: string;
+  howShouldAppWorks?: string;
+  startDate?: string;
+  requirement?: string;
 }
diff --git a/connect-automation/page-objects/project-creation-flow/create-project/create-project.po.ts b/connect-automation/page-objects/project-creation-flow/create-project/create-project.po.ts
index d434a4281..3594e252a 100644
--- a/connect-automation/page-objects/project-creation-flow/create-project/create-project.po.ts
+++ b/connect-automation/page-objects/project-creation-flow/create-project/create-project.po.ts
@@ -33,6 +33,13 @@ export class CreateProjectPageObject {
     return ElementHelper.getElementByButtonText('View Solutions');
   }
 
+  /**
+   * Get Tap Into Top Talent button from Create Project Page
+   */
+  public get tapIntoTopTalent() {
+    return ElementHelper.getElementByButtonText('Tap Into Top Talent');
+  }
+
   /**
    * Get Solution Catalog Page's title element
    */
@@ -74,6 +81,20 @@ export class CreateProjectPageObject {
     return ElementHelper.getElementByButtonText('Save my project');
   }
 
+  /**
+   * Get Submit Job Request button
+   */
+  public get submitJobRequest() {
+    return ElementHelper.getElementByButtonText('Submit job request');
+  }
+
+  /**
+   * Get view Talent Request button
+   */
+  public get viewTalentRequestButton() {
+    return ElementHelper.getElementByCss('.go-to-project-dashboard-btn');
+  }
+
   /**
    * Get Current Form Page's title element
    */
@@ -104,6 +125,20 @@ export class CreateProjectPageObject {
     return ElementHelper.getElementByName('description');
   }
 
+  /**
+   * Get job title element
+   */
+  public get titleInput() {
+    return ElementHelper.getElementByName('title');
+  }
+
+  /**
+   * Get email input element
+   */
+  public get emailInput() {
+    return ElementHelper.getElementByName('details.taasDefinition.hiringManager');
+  }
+
   /**
    * Get Draft Project title
    */
@@ -125,6 +160,27 @@ export class CreateProjectPageObject {
     return ElementHelper.getElementByName('details.apiDefinition.notes');
   }
 
+  /**
+   * Get plus icon
+   */
+  public get plusIcon() {
+    return ElementHelper.getElementByClassName('ZALPRV');
+  }
+
+  /**
+   * Get delete icon
+   */
+  public get deleteIcon() {
+    return ElementHelper.getElementByCss('.ZALPRV._1SfKng');
+  }
+
+  /**
+   * Get taas job form
+   */
+  public async taasJobForm() {
+    return ElementHelper.getAllElementsByClassName('_3mAtc-');
+  }
+
   /**
    * Get sub title
    */
@@ -134,6 +190,58 @@ export class CreateProjectPageObject {
     );
   }
 
+  /**
+   * Get number input elements
+   */
+  public async numberInputEls() {
+    const els = await ElementHelper.getAllElementsByCss('.tc-file-field__inputs.trlMaU');
+    return els;
+  }
+
+  /**
+   * Get dropdown elements
+   */
+  public async dropdownEls() {
+    const els = await ElementHelper.getAllElementsByCss('.dropdown-wrap.SelectDropdown.default');
+    return els;
+  }
+
+  /**
+   * Get dropdown options
+   */
+  public async dropdownOptions() {
+    const els = await ElementHelper.getAllElementsByClassName('dropdown-menu-list-item');
+    return els;
+  }
+
+  /**
+   * Get editor textarea
+   */
+  public get editorTextarea() {
+    return ElementHelper.getElementByClassName('te-editor-section');
+  }
+
+  /**
+   * Get editor textarea input
+   */
+  public get editorTextareaInput() {
+    return ElementHelper.getElementByCss('.tui-editor-contents.tui-editor-contents-placeholder');
+  }
+
+  /**
+   * Get skills input
+   */
+  public get skillsInput() {
+    return ElementHelper.getElementByCss('.css-1hwfws3.react-select__value-container.react-select__value-container--is-multi');
+  }
+
+  /**
+   * Get multi select option
+   */
+  public get multiSelectOption() {
+    return ElementHelper.getElementByCss('.css-fk865s-option.react-select__option');
+  }
+
   /**
    * Wait for subtitle to show
    */
diff --git a/connect-automation/page-objects/project-creation-flow/projects/projects.helper.ts b/connect-automation/page-objects/project-creation-flow/projects/projects.helper.ts
index 8fa8b8e62..417fbddb5 100644
--- a/connect-automation/page-objects/project-creation-flow/projects/projects.helper.ts
+++ b/connect-automation/page-objects/project-creation-flow/projects/projects.helper.ts
@@ -30,7 +30,7 @@ export class ProjectsHelper {
     await BrowserHelper.sleep(4000);
 
     // Click on Join Project button
-    await this.projectsPageObject.joinProjectButton.click();
+    await CommonHelper.joinProjectButton.click();
     const alertElement = CommonHelper.alertBox();
     await CommonHelper.waitForSuccessAlert(alertElement);
 
diff --git a/connect-automation/page-objects/project-creation-flow/projects/projects.po.ts b/connect-automation/page-objects/project-creation-flow/projects/projects.po.ts
index 704fc65a8..442e4e4f4 100644
--- a/connect-automation/page-objects/project-creation-flow/projects/projects.po.ts
+++ b/connect-automation/page-objects/project-creation-flow/projects/projects.po.ts
@@ -12,13 +12,6 @@ export class ProjectsPageObject {
     logger.info('User navigated to Home Page');
   }
 
-  /**
-   * Get Join Project Button
-   */
-  public get joinProjectButton() {
-    return ElementHelper.getElementByButtonText('Join project');
-  }
-
   /**
    * Get Search Input
    */
diff --git a/connect-automation/smoketest.sh b/connect-automation/smoketest.sh
index 2a9c56fb8..27ebc24ec 100755
--- a/connect-automation/smoketest.sh
+++ b/connect-automation/smoketest.sh
@@ -3,4 +3,5 @@
 cd connect-automation
 
 docker build -t conn-smoke:latest .
-docker run --shm-size=2g conn-smoke:latest ./testrun.sh -d -p 4444:4444
+docker run --name conn-smoke --shm-size=2g conn-smoke:latest ./testrun.sh -d -p 4444:4444
+docker cp conn-smoke:./connect-automation/test-results .
\ No newline at end of file
diff --git a/connect-automation/test-data/test-data.json b/connect-automation/test-data/test-data.json
index e76380548..9f12d5299 100644
--- a/connect-automation/test-data/test-data.json
+++ b/connect-automation/test-data/test-data.json
@@ -26,6 +26,19 @@
     },
     "notes": "Notes from test"
   },
+  "taas": {
+    "title": "test Taas Project",
+    "jobTitle": "Test Job Title",
+    "email": "mailmemakar@gmail.com",
+    "numOfPeople": 4,
+    "duration": 10,
+    "description": "test description",
+    "answers": {
+      "beforeWeStart": "I need work done",
+      "startDate": "As soon as possible",
+      "requirement": "No additional onboarding processes are required"
+    }
+  },
   "inviteCopilot": {
     "copilotHandle": "TCConnCopilot"
   },
diff --git a/connect-automation/test-suites/project-creation-flow/create-project.spec.ts b/connect-automation/test-suites/project-creation-flow/create-project.spec.ts
index ae7228879..0c0a284d4 100644
--- a/connect-automation/test-suites/project-creation-flow/create-project.spec.ts
+++ b/connect-automation/test-suites/project-creation-flow/create-project.spec.ts
@@ -26,6 +26,10 @@ describe('Connect App - Create Project Tests:', () => {
     await CreateProjectPageHelper.open();
   });
 
+  it('[TC_006] should verify whether the current user can create a TAAS project', async () => {
+    await CreateProjectPageHelper.verifyTaasProject(testData.taas);
+  });
+
   it('[TC_001] should verify whether the current user can create a Design, Development & Deployment project', async () => {
     await CreateProjectPageHelper.verifyProjectCreation(testData.projectData);
   });
diff --git a/connect-automation/utils/config-helper.ts b/connect-automation/utils/config-helper.ts
index 99df6c111..526b55743 100644
--- a/connect-automation/utils/config-helper.ts
+++ b/connect-automation/utils/config-helper.ts
@@ -119,4 +119,11 @@ export const ConfigHelper = {
    getExpiredProjectUrl(): string {
     return this.getConfig().expiredProjectUrl;
   },
+
+  /**
+   * Get platform URL
+   */
+   getPlatformUrl(): string {
+    return this.getConfig().platformUrl;
+  },
 };
diff --git a/src/assets/icons/icon-check-thin.svg b/src/assets/icons/icon-check-thin.svg
new file mode 100644
index 000000000..693c14617
--- /dev/null
+++ b/src/assets/icons/icon-check-thin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 33.037 25.262">
+  <path id="Path_18" d="M-18528.59-2924.255l7.34,7.79,20.043-19.58" transform="translate(18531.416 2938.873)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="4"/>
+</svg>
diff --git a/src/assets/icons/icon-dots.svg b/src/assets/icons/icon-dots.svg
new file mode 100644
index 000000000..89a3cfcf6
--- /dev/null
+++ b/src/assets/icons/icon-dots.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="3" viewBox="0 0 26.705 6.053">
+  <path id="Path_1" d="M19.516,18.008A1.508,1.508,0,1,1,18.008,16.5,1.508,1.508,0,0,1,19.516,18.008Z" transform="translate(-4.869 -15)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Path_2" d="M30.016,18.008A1.508,1.508,0,1,1,28.508,16.5,1.508,1.508,0,0,1,30.016,18.008Z" transform="translate(-4.812 -15)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Path_3" d="M8.591,18.027a1.425,1.425,0,0,1-1.3,1.527A1.425,1.425,0,0,1,6,18.027,1.425,1.425,0,0,1,7.3,16.5,1.425,1.425,0,0,1,8.591,18.027Z" transform="translate(-4.5 -15)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+</svg>
diff --git a/src/assets/icons/icon-gnatt-gray.svg b/src/assets/icons/icon-gnatt-gray.svg
new file mode 100644
index 000000000..593fbd1fe
--- /dev/null
+++ b/src/assets/icons/icon-gnatt-gray.svg
@@ -0,0 +1,6 @@
+<svg id="Gnatt_View" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 33 34">
+  <rect id="Rectangle_43" width="25" height="7" rx="1" fill="#aaa"/>
+  <rect id="Rectangle_44" width="25" height="7" rx="1" transform="translate(5 13)" fill="#aaa"/>
+  <rect id="Rectangle_45" width="24" height="7" rx="1" transform="translate(9 27)" fill="#aaa"/>
+  <rect id="Rectangle_47" width="4" height="13" rx="1" transform="translate(18 18)" fill="#aaa"/>
+</svg>
diff --git a/src/assets/icons/icon-x-mark-thin.svg b/src/assets/icons/icon-x-mark-thin.svg
new file mode 100644
index 000000000..10d836ee8
--- /dev/null
+++ b/src/assets/icons/icon-x-mark-thin.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 28.657 28.657">
+  <g id="Group_51" transform="translate(-2487.672 -868.672)">
+    <line id="Line_37" y1="23" x2="23" transform="translate(2490.5 871.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="4"/>
+    <line id="Line_38" x2="23" y2="23" transform="translate(2490.5 871.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="4"/>
+  </g>
+</svg>
diff --git a/src/assets/icons/x-mark-thin.svg b/src/assets/icons/x-mark-thin.svg
new file mode 100644
index 000000000..055951388
--- /dev/null
+++ b/src/assets/icons/x-mark-thin.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 28.863 28.863">
+  <g id="Close_Icon" transform="translate(0.343 0.343)">
+    <line id="Line_17" x1="28.178" y2="26.52" transform="translate(0 0.829)" fill="none" stroke="#707070" stroke-width="1"/>
+    <line id="Line_18" x1="28.178" y2="26.52" transform="translate(27.349) rotate(90)" fill="none" stroke="#707070" stroke-width="1"/>
+  </g>
+</svg>
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
index a71cfc7ef..b3258fce4 100644
--- a/src/components/Layout/Layout.jsx
+++ b/src/components/Layout/Layout.jsx
@@ -29,6 +29,7 @@ const Layout = (props) => {
         </div>
         <Footer />
         <GatewayDest name="fullscreen-page" className="mobile-page-gateway" />
+        <GatewayDest name="right-sidebar" className="right-sidebar-container" />
       </div>
     )
   }
diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss
index 6922dc988..e43cec8aa 100644
--- a/src/components/Layout/Layout.scss
+++ b/src/components/Layout/Layout.scss
@@ -23,4 +23,35 @@
       background-color: $tc-gray-neutral-light;
     }
   }
+
+  .right-sidebar-container {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 310px;
+    z-index: 9999;
+    transform: translateX(310px);
+    transition: transform 225ms ease;
+
+    &:not(:empty) {
+      transform: translateX(0);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -100vh;
+        left: -100vw;
+        width: 200vw;
+        height: 200vh;
+        z-index: -1;
+      }
+
+      @media screen and (max-width: $screen-md - 1px) {
+        width: 100%;
+        transition: none;
+      }
+    }
+  }
 }
+
diff --git a/src/components/ProjectProgress/ProjectProgress.jsx b/src/components/ProjectProgress/ProjectProgress.jsx
index 824caf8e1..0bf336666 100644
--- a/src/components/ProjectProgress/ProjectProgress.jsx
+++ b/src/components/ProjectProgress/ProjectProgress.jsx
@@ -18,7 +18,7 @@ const Themes = {
 
 const ProjectProgress = ({type, percent, children, viewType=ViewTypes.HBAR }) => (
   <div className="project-progress">
-    { viewType === ViewTypes.HBAR && 
+    { viewType === ViewTypes.HBAR &&
       <div className="progress-bar">
         <div className={cn('progress', type)} style={{width: percent + '%'}} />
       </div>
@@ -35,14 +35,13 @@ ProjectProgress.ViewTypes = ViewTypes
 ProjectProgress.Themes = Themes
 
 ProjectProgress.defaultProps = {
-  type: Themes.BLUE 
+  type: Themes.BLUE
 }
 
 ProjectProgress.propTypes = {
-  title: PropTypes.string.isRequired,
   type: PropTypes.oneOf(_.values(Themes)),
   percent: PropTypes.number.isRequired,
-  children: PropTypes.any.isRequired
+  children: PropTypes.any
 }
 
 export default ProjectProgress
diff --git a/src/components/TwoColsLayout/TwoColsLayout.jsx b/src/components/TwoColsLayout/TwoColsLayout.jsx
index b37f7f8e8..39ff02e57 100644
--- a/src/components/TwoColsLayout/TwoColsLayout.jsx
+++ b/src/components/TwoColsLayout/TwoColsLayout.jsx
@@ -27,7 +27,7 @@ TwoColsLayout.Sidebar = ({ children, wrapperClass }) => (
 
 TwoColsLayout.Content = ({ children }) => (
   <div styleName="content">
-    <div styleName="content-inner">
+    <div styleName="content-inner" className="twoColsLayout-contentInner">
       {children}
     </div>
   </div>
diff --git a/src/components/User/UserTooltip.scss b/src/components/User/UserTooltip.scss
index 770d84f6f..8c909de06 100644
--- a/src/components/User/UserTooltip.scss
+++ b/src/components/User/UserTooltip.scss
@@ -49,6 +49,15 @@
         }
       }
 
+      &.size-50 {
+        .tooltip-target {
+          .Avatar {
+            height: 50px;
+            width: 50px;
+          }
+        }
+      }
+
       .stack-avatar-0 {
         z-index: 3;
       }
diff --git a/src/config/constants.js b/src/config/constants.js
index 0c85a21a6..dcd197114 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -632,6 +632,16 @@ export const PHASE_STATUS = [
   // {color: 'red', name: 'Paused', fullName: 'Phase is paused', value: PHASE_STATUS_PAUSED, order: 7, dropDownOrder: 7 }
 ]
 
+export const PHASE_STATUS_OPTIONS = [
+  { label: 'Draft', value: PHASE_STATUS_DRAFT },
+  { label: 'In Review', value: PHASE_STATUS_IN_REVIEW },
+  { label: 'Reviewed', value: PHASE_STATUS_REVIEWED },
+  { label: 'Active', value: PHASE_STATUS_ACTIVE },
+  { label: 'Completed', value: PHASE_STATUS_COMPLETED },
+  { label: 'Cancelled', value: PHASE_STATUS_CANCELLED },
+  { label: 'Phased', value: PHASE_STATUS_PAUSED },
+]
+
 // this defines default criteria to filter projects for projects list
 export const PROJECT_LIST_DEFAULT_CRITERIA = {
   sort: 'lastActivityAt desc'
@@ -1228,4 +1238,4 @@ export const DEFAULT_NDA_UUID = process.env.DEFAULT_NDA_UUID
 /**
  * The minimal duration of a TaaS Job in weeks
  */
-export const TAAS_MIN_JOB_DURATION = 4
\ No newline at end of file
+export const TAAS_MIN_JOB_DURATION = 4
diff --git a/src/projects/actions/project.js b/src/projects/actions/project.js
index 848e2540d..51278d20c 100644
--- a/src/projects/actions/project.js
+++ b/src/projects/actions/project.js
@@ -286,12 +286,14 @@ function createProductsTimelineAndMilestone(project) {
  *
  * @return {Promise} project
  */
-export function createProjectPhaseAndProduct(project, productTemplate, status = PHASE_STATUS_DRAFT, startDate, endDate, createTimeline = true) {
+export function createProjectPhaseAndProduct(project, productTemplate, status = PHASE_STATUS_DRAFT, startDate, endDate, createTimeline = true, budget, details) {
   const param = {
     status,
     name: productTemplate.name,
     description: productTemplate.description,
-    productTemplateId: productTemplate.id
+    productTemplateId: productTemplate.id,
+    budget,
+    details,
   }
   if (startDate) {
     param['startDate'] = startDate.format('YYYY-MM-DD')
@@ -356,12 +358,12 @@ function createPhaseAndMilestonesRequest(project, productTemplate, status = PHAS
  * @param {*} startDate 
  * @param {*} endDate 
  */
-export function createPhaseWithoutTimeline(project, productTemplate, status, startDate, endDate) {
+export function createPhaseWithoutTimeline(project, productTemplate, status, startDate, endDate, budget, details) {
   return (dispatch) => {
     console.log(CREATE_PROJECT_PHASE)
     return dispatch({
       type: CREATE_PROJECT_PHASE,
-      payload: createProjectPhaseAndProduct(project, productTemplate, status, startDate, endDate, false)
+      payload: createProjectPhaseAndProduct(project, productTemplate, status, startDate, endDate, false, budget, details)
     })
   }
 }
@@ -505,75 +507,78 @@ export function updatePhase(projectId, phaseId, updatedProps, phaseIndex) {
       updatedProps.endDate = moment(updatedProps.endDate).format('YYYY-MM-DD')
     }
 
+    let result
     return dispatch({
       type: UPDATE_PHASE,
       payload: updatePhaseAPI(projectId, phaseId, updatedProps, phaseIndex).then()
-    }).then(() => {
+    })
+      .then(res => result = res)
+      .then(() => {
       // finds active milestone, if exists in timeline
-      const activeMilestone = timeline ? _.find(timeline.milestones, m => m.status === PHASE_STATUS_ACTIVE) : null
-      // this will be done after updating timeline (if timeline update is required)
-      // or immediately if timeline update is not required
-      // update product milestone strictly after updating timeline
-      // otherwise it could happened like this:
-      // - send request to update timeline
-      // - send request to update milestone
-      // - get updated milestone
-      // - get updated timeline (without updated milestone)
-      // so otherwise we can end up with the timeline without updated milestone
-      const optionallyUpdateFirstMilestone = () => {
+        const activeMilestone = timeline ? _.find(timeline.milestones, m => m.status === PHASE_STATUS_ACTIVE) : null
+        // this will be done after updating timeline (if timeline update is required)
+        // or immediately if timeline update is not required
+        // update product milestone strictly after updating timeline
+        // otherwise it could happened like this:
+        // - send request to update timeline
+        // - send request to update milestone
+        // - get updated milestone
+        // - get updated timeline (without updated milestone)
+        // so otherwise we can end up with the timeline without updated milestone
+        const optionallyUpdateFirstMilestone = () => {
         // update first product milestone only if
         // - there is a milestone, obviously
         // - phase's status is changed
         // - phase's status is changed to active
         // - there is not active milestone alreay (this can happen when phase is made active more than once
         // e.g. Active => Paused => Active)
-        if (projectVersion !== 'v4' && timeline && !activeMilestone && phaseActivated ) {
+          if (projectVersion !== 'v4' && timeline && !activeMilestone && phaseActivated ) {
+            dispatch(
+              updateProductMilestone(
+                productId,
+                timeline.id,
+                timeline.milestones[0].id,
+                {status:MILESTONE_STATUS.ACTIVE}
+              )
+            )
+          }
+        }
+
+        if (timeline && (startDateChanged || phaseActivated)) {
           dispatch(
-            updateProductMilestone(
+            updateProductTimeline(
               productId,
               timeline.id,
-              timeline.milestones[0].id,
-              {status:MILESTONE_STATUS.ACTIVE}
+              {
+                name: timeline.name,
+                startDate: updatedProps.startDate,
+                reference: timeline.reference,
+                referenceId: timeline.referenceId,
+              }
             )
-          )
+          ).then(optionallyUpdateFirstMilestone)
+        } else {
+          optionallyUpdateFirstMilestone()
         }
-      }
-
-      if (timeline && (startDateChanged || phaseActivated)) {
-        dispatch(
-          updateProductTimeline(
-            productId,
-            timeline.id,
-            {
-              name: timeline.name,
-              startDate: updatedProps.startDate,
-              reference: timeline.reference,
-              referenceId: timeline.referenceId,
-            }
-          )
-        ).then(optionallyUpdateFirstMilestone)
-      } else {
-        optionallyUpdateFirstMilestone()
-      }
 
-    // update project caused by phase updates
-    }).then(() => {
-      const project = state.projectState.project
+        // update project caused by phase updates
+      }).then(() => {
+        const project = state.projectState.project
 
-      // if one phase moved to ACTIVE status, make project ACTIVE too
-      if (
-        _.includes([PROJECT_STATUS_DRAFT, PROJECT_STATUS_IN_REVIEW, PROJECT_STATUS_REVIEWED], project.status) &&
+        // if one phase moved to ACTIVE status, make project ACTIVE too
+        if (
+          _.includes([PROJECT_STATUS_DRAFT, PROJECT_STATUS_IN_REVIEW, PROJECT_STATUS_REVIEWED], project.status) &&
         phase.status !== PHASE_STATUS_ACTIVE &&
         updatedProps.status === PHASE_STATUS_ACTIVE &&
         hasPermission(PERMISSIONS.EDIT_PROJECT_STATUS)
-      ) {
-        dispatch(
-          updateProject(projectId, {
-            status: PROJECT_STATUS_ACTIVE
-          }, true)
-        )
-      }
-    })
+        ) {
+          dispatch(
+            updateProject(projectId, {
+              status: PROJECT_STATUS_ACTIVE
+            }, true)
+          )
+        }
+      }).then(() => result)
   }
 }
 
diff --git a/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.jsx b/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.jsx
index aec531f1a..d55363da5 100644
--- a/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.jsx
+++ b/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.jsx
@@ -225,7 +225,7 @@ class CreatePhaseForm extends React.Component {
     const {
       milestones
     } = this.state
-    
+
     const ms = _.map(milestones, (m, index) => {
       return (
         <div styleName="milestone-item" key={m.pseudoId}>
diff --git a/src/projects/detail/components/ProjectPlanEmpty/ProjectPlanEmpty.jsx b/src/projects/detail/components/ProjectPlanEmpty/ProjectPlanEmpty.jsx
index 41e8c3755..4fed37e2b 100644
--- a/src/projects/detail/components/ProjectPlanEmpty/ProjectPlanEmpty.jsx
+++ b/src/projects/detail/components/ProjectPlanEmpty/ProjectPlanEmpty.jsx
@@ -7,11 +7,15 @@ import { hasPermission } from '../../../../helpers/permissions'
 
 import './ProjectPlanEmpty.scss'
 
-const ProjectPlanEmpty = () => {
+const ProjectPlanEmpty = ({ version }) => {
   return hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN) ? (
     <div styleName="container">
       <h2>Build Your Project Plan</h2>
-      <p>Build your project plan in Connect to reflect delivery progress to the customer. Begin by clicking the "Add Phase" button, select the template that best matches your need, and modify the phase title and milestone dates prior to publishing to the customer.</p>
+      {version === 'v4' ? (
+        <p>Build your project plan in Connect to reflect delivery progress to the customer. Begin by clicking the "Add Milestone" button, and modify the milestone attributes prior to publishing to the customer.</p>
+      ) : (
+        <p>Build your project plan in Connect to reflect delivery progress to the customer. Begin by clicking the "Add Phase" button, select the template that best matches your need, and modify the phase title and milestone dates prior to publishing to the customer.</p>
+      )}
       <p><b>Important Note:</b> To move the project into <i>'Active'</i> status, you must set at least one phase in Connect's Project Plan to be in 'Planned' status, which signifies to customers that delivery planning and execution has begun.</p>
       <p>If you feel like you have more things to send over, or want to reach out to us, please drop us a line at support@topcoder.com. Thanks!</p>
     </div>
diff --git a/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx b/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx
new file mode 100644
index 000000000..b059b4503
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx
@@ -0,0 +1,110 @@
+/**
+ * Create simple project plan
+ */
+import React from 'react'
+import PT from 'prop-types'
+import _ from 'lodash'
+import GenericMenu from '../../../../../components/GenericMenu'
+// import ProjectDetailsWidget from '../ProjectDetailsWidget'
+import ManageMilestones from '../ManageMilestones'
+import * as milestoneHelper from '../components/helpers/milestone'
+
+import styles from './CreateSimplePlan.scss'
+
+const createTabs = ({ onClick } ) => ([
+  {
+    label: 'MILESTONES',
+    isActive: true,
+    onClick,
+  }
+])
+
+class CreateSimplePlan extends React.Component {
+  componentDidMount() {
+    const { project, milestones, loadMembers } = this.props
+
+    let copilotIds = []
+    milestones.forEach((milestone) => {
+      copilotIds = copilotIds.concat(_.get(milestone, 'details.copilots', []))
+    })
+
+    const projectMemberIds = project.members.map(member => member.userId)
+    const missingMemberIds = _.difference(copilotIds, projectMemberIds)
+    if (missingMemberIds.length) {
+      loadMembers(missingMemberIds)
+    }
+
+    const contentInnerElement = document.querySelector('.twoColsLayout-contentInner')
+    contentInnerElement.classList.add(styles['twoColsLayout-contentInner'])
+  }
+
+  componentWillUnmount() {
+    const contentInnerElement = document.querySelector('.twoColsLayout-contentInner')
+    contentInnerElement.classList.remove(styles['twoColsLayout-contentInner'])
+  }
+
+  render () {
+    const {
+      project,
+      // phases,
+      milestones,
+      onChangeMilestones,
+      onSaveMilestone,
+      onRemoveMilestone,
+      isProjectLive,
+      members,
+      isCustomer,
+    } = this.props
+    const onClickMilestonesTab = () => {}
+
+    if (milestones.length === 0) {
+      return isCustomer ? null : (
+        <div styleName="add-new-milestone">
+          <button
+            className="tc-btn tc-btn-primary tc-btn-sm action-btn"
+            onClick={() => {
+              const newMilestone = milestoneHelper.createEmptyMilestone(new Date())
+              newMilestone.edit = true
+              onChangeMilestones([newMilestone])
+            }}
+          >
+            Add New Milestone
+          </button>
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        {/* <ProjectDetailsWidget project={project} phases={phases} /> */}
+        <div styleName="milestones-container">
+          <div styleName="tabs-header">
+            <GenericMenu navLinks={createTabs(onClickMilestonesTab)} />
+          </div>
+          <ManageMilestones
+            milestones={milestones}
+            onChangeMilestones={onChangeMilestones}
+            onSaveMilestone={onSaveMilestone}
+            onRemoveMilestone={onRemoveMilestone}
+            projectMembers={project.members}
+            isUpdatable={isProjectLive && !isCustomer}
+            members={members}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+CreateSimplePlan.propTypes = {
+  project: PT.shape(),
+  phases: PT.arrayOf(PT.shape()),
+  milestones: PT.arrayOf(PT.shape()),
+  onChangeMilestones: PT.func,
+  onSaveMilestone: PT.func,
+  onRemoveMilestone: PT.func,
+  members: PT.object,
+  isCustomer: PT.bool,
+}
+
+export default CreateSimplePlan
diff --git a/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.scss b/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.scss
new file mode 100644
index 000000000..62b101e23
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.scss
@@ -0,0 +1,41 @@
+.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/CreateSimplePlan/index.js b/src/projects/detail/components/SimplePlan/CreateSimplePlan/index.js
new file mode 100644
index 000000000..9505965d8
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/CreateSimplePlan/index.js
@@ -0,0 +1,2 @@
+import CreateSimplePlan from './CreateSimplePlan'
+export default CreateSimplePlan
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
new file mode 100644
index 000000000..241c378d4
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -0,0 +1,154 @@
+/**
+ * Manage milestones
+ */
+import React from 'react'
+import PT from 'prop-types'
+import FormsyForm from 'appirio-tech-react-components/components/Formsy'
+import MilestoneRow from '../components/MilestoneRow'
+import MilestoneHeaderRow from '../components/MilestoneHeaderRow'
+import * as milestoneHelper from '../components/helpers/milestone'
+// import IconGridView from '../../../../../assets/icons/ui-16px-2_grid-45-gray.svg'
+// import IconGnattView from '../../../../../assets/icons/icon-gnatt-gray.svg'
+
+import './ManageMilestones.scss'
+
+const Formsy = FormsyForm.Formsy
+
+class ManageMilestones extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.onSave = this.onSave.bind(this)
+    this.onChange = this.onChange.bind(this)
+    this.onAdd = this.onAdd.bind(this)
+    this.onRemove = this.onRemove.bind(this)
+    this.onDiscard = this.onDiscard.bind(this)
+  }
+
+  onChange(updatedMilestone) {
+    const { milestones, onChangeMilestones } = this.props
+    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)
+  }
+
+  onDiscard(id) {
+    const { milestones, onChangeMilestones } = this.props
+    const index = milestones.findIndex(m => m.id === id)
+
+    const updatedMilestones = [...milestones]
+    updatedMilestones.splice(index, 1)
+    onChangeMilestones(updatedMilestones)
+  }
+
+  onAdd() {
+    const { milestones, onChangeMilestones } = this.props
+    const newMilestone = milestoneHelper.createEmptyMilestone(_.last(milestones).endDate)
+    newMilestone.edit = true
+
+    const updatedMilestones = [newMilestone, ...milestones]
+    onChangeMilestones(updatedMilestones)
+  }
+
+  onSave(id) {
+    const {onSaveMilestone} = this.props
+    onSaveMilestone(id)
+  }
+
+  onRemove(id) {
+    const {onRemoveMilestone} = this.props
+    onRemoveMilestone(id)
+  }
+
+  render() {
+    const {
+      milestones,
+      projectMembers,
+      onChangeMilestones,
+      isUpdatable,
+      members,
+    } = this.props
+
+    return (
+      <div>
+        <div styleName="toolbar">
+          {/* <button className="tc-btn tc-btn-link" styleName="icon-button view-mode active">
+            <IconGridView />
+          </button>
+          <button className="tc-btn tc-btn-link" styleName="icon-button view-mode">
+            <IconGnattView />
+          </button>
+          <div styleName="separator" /> */}
+          {isUpdatable && (
+            <button className="tc-btn tc-btn-primary tc-btn-sm" styleName="primary-button" onClick={this.onAdd}>
+              ADD
+            </button>
+          )}
+          {/* <button className="tc-btn tc-btn-primary tc-btn-sm" styleName="primary-button">
+            IMPORT MILESTONES
+          </button>
+          <button className="tc-btn tc-btn-primary tc-btn-sm" styleName="primary-button">
+            TEMPLATE
+          </button> */}
+        </div>
+        <div styleName="table-container">
+          <Formsy.Form>
+            <table styleName="milestones-table">
+              <colgroup>
+                <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}
+                  isUpdatable={isUpdatable}
+                />
+              </thead>
+              <tbody>
+                {milestones.map((milestone) => (
+                  <MilestoneRow
+                    milestone={milestone}
+                    key={milestone.id}
+                    rowId={`${milestone.id}`}
+                    onChange={this.onChange}
+                    onSave={this.onSave}
+                    onRemove={this.onRemove}
+                    onDiscard={this.onDiscard}
+                    projectMembers={projectMembers}
+                    allMilestones={milestones}
+                    isCreatingRow={`${milestone.id}`.startsWith('new-milestone')}
+                    isUpdatable={isUpdatable}
+                    members={members}
+                  />
+                ))}
+              </tbody>
+            </table>
+          </Formsy.Form>
+        </div>
+      </div>
+    )
+  }
+}
+
+ManageMilestones.propTypes = {
+  milestones: PT.arrayOf(PT.shape()),
+  onChangeMilestones: PT.func,
+  onSaveMilestone: PT.func,
+  onRemoveMilestone: PT.func,
+  projectMembers: PT.arrayOf(PT.shape()),
+  members: PT.object,
+  isUpdatable: PT.bool,
+}
+
+export default ManageMilestones
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
new file mode 100644
index 000000000..3edd9d897
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
@@ -0,0 +1,141 @@
+@import '~styles/variables';
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 15px 0 20px;
+  min-height: 65px;
+
+  .primary-button {
+    margin-left: 12px;
+  }
+
+  .icon-button {
+    padding: 0 10px;
+    border: 0;
+  }
+
+  .separator {
+    width: 1px;
+    height: 15px;
+    margin-left: 20px;
+    background-color: $tc-gray-50;
+  }
+}
+
+.view-mode {
+  &.active {
+    svg path {
+      fill: $tc-green-110;
+    }
+  }
+}
+
+.table-container {
+  padding-left: 5px;
+  padding-right: 10px;
+  background-color: $tc-white;
+  border-radius: 3 * $corner-radius;
+}
+
+.milestones-table {
+  width: 100%;
+
+  th,
+  td {
+    text-align: left;
+    vertical-align: middle;
+
+    // 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; }
+      }
+    }
+  }
+
+  td {
+    padding: 10px 0;
+    border-top: 1px solid rgba($tc-gray-60, .64);
+  }
+
+  :global {
+    .checkbox-group-item {
+      margin: 0;
+      transform: scale(60%);
+
+      > .tc-checkbox {
+        > label {
+          border-radius: 3 * $corner-radius;
+        }
+      }
+
+      > label {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/index.js b/src/projects/detail/components/SimplePlan/ManageMilestones/index.js
new file mode 100644
index 000000000..15f4886ad
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/index.js
@@ -0,0 +1,2 @@
+import ManageMilestones from './ManageMilestones'
+export default ManageMilestones
diff --git a/src/projects/detail/components/SimplePlan/ProjectDetailsWidget/ProjectDetailsWidget.jsx b/src/projects/detail/components/SimplePlan/ProjectDetailsWidget/ProjectDetailsWidget.jsx
new file mode 100644
index 000000000..9a30589bd
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/ProjectDetailsWidget/ProjectDetailsWidget.jsx
@@ -0,0 +1,90 @@
+/**
+ * Show project details
+ */
+import React from 'react'
+import PT from 'prop-types'
+import moment from 'moment'
+import * as constants from '../../../../../config/constants'
+import ProjectProgress from '../../../../../components/ProjectProgress/ProjectProgress'
+import ProjectMemeberAvatars from '../components/ProjectMemberAvatars'
+
+import './ProjectDetailsWidget.scss'
+
+
+function ProjectDetailsWidget({ project, phases }) {
+  const startDate = moment.min(phases.map(phase => moment(phase.startDate)))
+  const endDate = moment.max(phases.map(phase => moment(phase.endDate)))
+  const budget = phases.reduce((sum, phase) => sum + phase.budget, 0)
+  const spent = phases.reduce((sum, phase) => sum + phase.spentBudget, 0)
+  const numCompleted = phases.filter(phase => phase.status === constants.PHASE_STATUS_COMPLETED).length
+  const numTotal = phases.length
+
+  return (
+    <div styleName="project-details-widget">
+      <h2 styleName="title">
+        {project.name}
+      </h2>
+      <div styleName="body">
+        <p styleName="detail-item description">
+          <span dangerouslySetInnerHTML={{__html: project.description}} />
+        </p>
+        <div styleName="detail-item dates">
+          <div>
+            <span styleName="caption">Start Date</span>
+            <div styleName="text">{startDate.format('YYYY-MM-DD')}</div>
+          </div>
+          <div>
+            <span styleName="caption">End Date</span>
+            <div styleName="text">{endDate.format('YYYY-MM-DD')}</div>
+          </div>
+        </div>
+        <div styleName="detail-item progress">
+          <span styleName="caption">Progress</span>
+          <div styleName="project-progress">
+            <ProjectProgress
+              viewType={ProjectProgress.ViewTypes.CIRCLE}
+              percent={numTotal !== 0 ? numCompleted / numTotal * 100 : 0 }
+            />
+            <span styleName="value">{`${numCompleted}/${numTotal}`}</span>
+          </div>
+        </div>
+        <div styleName="detail-item budget">
+          <span styleName="caption">Budget</span>
+          <div styleName="project-budget">
+            <ProjectProgress
+              viewType={ProjectProgress.ViewTypes.CIRCLE}
+              percent={budget !== 0 ? spent / budget * 100 : 0 }
+            />
+            <span styleName="value">{`$${formatBudget(budget)}`}</span>
+          </div>
+        </div>
+        <div styleName="detail-item team">
+          <span styleName="caption">Team</span>
+          <ProjectMemeberAvatars members={project.members} maxShownNum={5} size={50} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ProjectDetailsWidget.propTypes = {
+  project: PT.shape(),
+  phases: PT.arrayOf(PT.shape())
+}
+
+export default ProjectDetailsWidget
+
+/*
+ * Returns formatted text without rounding
+ * 100.9 -> '$100'
+ * 1100.9 -> '1.1K'
+ * 111900.9 -> '111K'
+ */
+function formatBudget(value) {
+  if (value < 100000) {
+    return value < 1000
+      ? `${Math.floor(value)}`
+      : `${Math.floor(value / 1000 * 10) / 10}K`
+  }
+  return `${Math.floor(value / 1000)}K`
+}
diff --git a/src/projects/detail/components/SimplePlan/ProjectDetailsWidget/ProjectDetailsWidget.scss b/src/projects/detail/components/SimplePlan/ProjectDetailsWidget/ProjectDetailsWidget.scss
new file mode 100644
index 000000000..5aaa52195
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/ProjectDetailsWidget/ProjectDetailsWidget.scss
@@ -0,0 +1,114 @@
+@import '~styles/variables';
+
+.project-details-widget {
+  padding: 20px 25px;
+  font-size: $tc-body-md;
+  background-color: $tc-white;
+  border-radius: 3 * $corner-radius;
+
+  .title {
+    @include roboto-medium;
+
+    padding-bottom: 20px;
+    font-size: $tc-heading-md;
+    border-bottom: 2px solid $tc-gray-05;
+  }
+
+  .body {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 15px;
+
+    @media screen and (max-width: 1024px - 1px) {
+      flex-wrap: wrap;
+    }
+  }
+
+  .detail-item {
+    margin-right: 25px;
+
+    &:last-child {
+      margin-right: 0px;
+    }
+
+    &.description {
+      width: 43%;
+      line-height: 1.5;
+
+      @media screen and (max-width: 1024px - 1px) {
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 15px;
+      }
+    }
+    &.dates {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      min-width: 75px;
+      max-height: 70px;
+
+      .caption {
+        margin-bottom: 2px;
+      }
+    }
+    &.progress,
+    &.budget,
+    &.team {
+      min-width: 50px;
+    }
+
+    &.description,
+    &.dates,
+    &.progress,
+    &.budget {
+      flex: none;
+    }
+    &.team {
+      flex: 1 1 auto;
+    }
+  }
+
+  .caption {
+    @include roboto-bold;
+    font-size: $tc-label-md;
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  .text {
+    font-size: $tc-label-sm;
+  }
+
+  .project-progress,
+  .project-budget {
+    position: relative;
+    width: 54px;
+    height: 54px;
+
+    .value {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      @include roboto-bold;
+      font-size: $tc-label-md;
+    }
+  }
+
+  :global {
+    .CircularProgressbar {
+      width: 100%;
+      height: 100%;
+
+      .CircularProgressbar-trail {
+        stroke-width: 10px;
+      }
+
+      .CircularProgressbar-path {
+        stroke-width: 10px;
+      }
+    }
+  }
+}
diff --git a/src/projects/detail/components/SimplePlan/ProjectDetailsWidget/index.js b/src/projects/detail/components/SimplePlan/ProjectDetailsWidget/index.js
new file mode 100644
index 000000000..3f28a5a86
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/ProjectDetailsWidget/index.js
@@ -0,0 +1,2 @@
+import ProjectDetailsWidget from './ProjectDetailsWidget'
+export default ProjectDetailsWidget
diff --git a/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx
new file mode 100644
index 000000000..5720b20fe
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx
@@ -0,0 +1,111 @@
+import React from 'react'
+import PT from 'prop-types'
+import uncontrollable from 'uncontrollable'
+import { PROJECT_ROLE_COPILOT } from '../../../../../../config/constants'
+import { PERMISSIONS } from '../../../../../../config/permissions'
+import { hasPermission } from '../../../../../../helpers/permissions'
+import Select from '../../../../../../components/Select/Select'
+import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
+import {getAvatarResized, getFullNameWithFallback} from '../../../../../../helpers/tcHelpers'
+import IconXMark from '../../../../../../assets/icons/x-mark-thin.svg'
+
+import './AddCopilotsSidebar.scss'
+
+function AddCopilotsSidebar({
+  memberToAdd,
+  setMemberToAdd,
+  copilots,
+  projectMembers,
+  onClose,
+  onAdd,
+  onRemove
+})  {
+  const canManageCopilots = hasPermission(PERMISSIONS.MANAGE_COPILOTS)
+  const canRemoveCopilots = hasPermission(PERMISSIONS.REMOVE_COPILOTS)
+
+  const projectMemberOptions = projectMembers.map(projectMember => ({
+    label: projectMember.handle,
+    value: projectMember
+  })).filter(option => copilots.indexOf(option.value) === -1 && option.value.role === PROJECT_ROLE_COPILOT)
+
+
+  return (
+    <aside styleName="add-copilots-sidebar">
+      <h2 styleName="title">
+        Copilot
+        <button type="button" className="tc-btn tc-btn-link" styleName="button-close" onClick={onClose}>
+          <IconXMark />
+        </button>
+      </h2>
+      <div styleName="select-copilot">
+        <span styleName="label">Add New Copilot</span>
+        <Select
+          options={projectMemberOptions}
+          onChange={(selectedOption) => {
+            if (!selectedOption) {
+              return
+            }
+
+            setMemberToAdd(selectedOption.value)
+          }}
+          value={projectMemberOptions.find(option => option.value === memberToAdd) || null}
+          placeholder="- Select -"
+          isClearable={false}
+        />
+        <button
+          className="tc-btn tc-btn-primary tc-btn-sm"
+          onClick={() => {
+            onAdd(memberToAdd)
+            setMemberToAdd(null)
+          }}
+          disabled={!memberToAdd}
+          styleName="add-button"
+        >
+          ADD
+        </button>
+      </div>
+      <ul styleName="copilot-list">
+        {copilots.map((member, index) => (
+          <li key={`${member.handle}-${index}`}>
+            <div styleName="member-details">
+              <Avatar
+                userName={getFullNameWithFallback(member)}
+                avatarUrl={getAvatarResized(_.get(member, 'photoURL') || '', 80)}
+                size={40}
+              />
+              <div styleName="name-and-handle">
+                <span styleName="fullname">{getFullNameWithFallback(member)}</span>
+                <span styleName="handle">
+                  @{member.handle || 'ConnectUser'}
+                </span>
+              </div>
+              {(canManageCopilots || canRemoveCopilots) && (
+                <button
+                  className="tc-btn tc-btn-link"
+                  styleName="close-button"
+                  onClick={() => {
+                    onRemove(member)
+                  }}
+                >
+                  &times;
+                </button>
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  )
+}
+
+AddCopilotsSidebar.propTypes = {
+  copilots: PT.arrayOf(PT.shape()),
+  projectMembers: PT.arrayOf(PT.shape()),
+  onClose: PT.func,
+  onAdd: PT.func,
+  onRemove: PT.func,
+}
+
+export default uncontrollable(AddCopilotsSidebar, {
+  memberToAdd: 'setMemberToAdd'
+})
diff --git a/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.scss b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.scss
new file mode 100644
index 000000000..4407feb0b
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.scss
@@ -0,0 +1,99 @@
+@import '~styles/variables';
+
+.button-close {
+  padding: 0 10px;
+  margin-left: auto;
+  margin-right: -10px;
+  border: 0;
+}
+
+.add-copilots-sidebar {
+  width: 100%;
+  height: 100%;
+  color: $tc-gray-90;
+  background-color: $tc-white;
+  box-shadow: 0 3px 12px rgba(#000, .16);
+
+  .title,
+  .select-copilot,
+  .copilot-list {
+    padding: 10px 15px 10px 25px;
+  }
+
+  .title {
+    @include roboto-bold;
+
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  .select-copilot {
+    border-top: 1px solid $tc-gray-05;
+
+
+    .label {
+      display: block;
+      margin-bottom: 7px;
+      font-size: $tc-label-md;
+      line-height: 16px;
+    }
+
+    .add-button {
+      margin-top: 15px;
+    }
+
+    :global {
+      .react-select__control {
+        @include roboto-light;
+        font-size: $tc-body-sm;
+
+        .react-select__indicators,
+        .react-select__indicator-separator,
+        .react-select__dropdown-indicator {
+          display: flex;
+        }
+        .react-select__clear-indicator {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .copilot-list {
+    padding-top: 25px;
+
+    &:not(:empty) {
+      border-top: 1px solid $tc-gray-05;
+    }
+  }
+}
+
+.member-details {
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+  color: $tc-gray-90;
+
+  .name-and-handle {
+    margin-left: 10px;
+    font-size: $tc-body-sm;
+
+    .fullname {
+      font-weight: bold;
+    }
+
+    .handle {
+      &::before {
+        content: ' ';
+      }
+    }
+  }
+
+  .close-button {
+    padding: 0 10px;
+    margin-left: auto;
+    color: inherit;
+  }
+}
diff --git a/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/index.js b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/index.js
new file mode 100644
index 000000000..0dfc593b3
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/index.js
@@ -0,0 +1,2 @@
+import AddCopilotsSidebar from './AddCopilotsSidebar'
+export default AddCopilotsSidebar
diff --git a/src/projects/detail/components/SimplePlan/components/ConfirmDeleteMilestone/ConfirmDeleteMilestone.jsx b/src/projects/detail/components/SimplePlan/components/ConfirmDeleteMilestone/ConfirmDeleteMilestone.jsx
new file mode 100644
index 000000000..4263425bb
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/ConfirmDeleteMilestone/ConfirmDeleteMilestone.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import PT from 'prop-types'
+import IconHelp from '../../../../../../assets/icons/help-me.svg'
+
+import './ConfirmDeleteMilestone.scss'
+
+function ConfirmDeleteMilestone({ onClose }) {
+  return (
+    <div styleName="confirm-delete-milestone">
+      <h3 styleName="title">
+        <IconHelp styleName="icon" />
+        Deletion Confirmation
+      </h3>
+      <p styleName="text">
+        Are you sure you want to delete the selected Milestone (s)?
+      </p>
+      <div styleName="footer">
+        <button type="button" className="tc-btn tc-btn-primary tc-btn-sm" onClick={() => onClose(true)}>YES</button>
+        <button type="button" className="tc-btn tc-btn-warning tc-btn-sm" onClick={() => onClose()}>NO</button>
+      </div>
+    </div>
+  )
+}
+
+ConfirmDeleteMilestone.propTypes = {
+  onClose: PT.func,
+}
+
+export default ConfirmDeleteMilestone
diff --git a/src/projects/detail/components/SimplePlan/components/ConfirmDeleteMilestone/ConfirmDeleteMilestone.scss b/src/projects/detail/components/SimplePlan/components/ConfirmDeleteMilestone/ConfirmDeleteMilestone.scss
new file mode 100644
index 000000000..c7d7beb8c
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/ConfirmDeleteMilestone/ConfirmDeleteMilestone.scss
@@ -0,0 +1,48 @@
+@import '~styles/variables';
+
+.confirm-delete-milestone {
+  width: 204px;
+  padding: 15px 8px 12px 12px;
+  color: $tc-black;
+  background-color: $tc-white;
+  border: 1px solid $tc-gray-50;
+  border-radius: 3 * $corner-radius;
+  box-shadow: 0 3px 6px rbga(#000, .16);
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    color: red;
+    stroke: currentColor;
+
+    * {
+      stroke: inherit;
+    }
+  }
+
+  .title {
+    @include roboto-bold;
+
+    display: flex;
+    margin-bottom: 8px;
+    font-size: $tc-body-xs;
+    line-height: 15px;
+  }
+
+  .text {
+    @include roboto;
+
+    margin-bottom: 12px;
+    font-size: $tc-body-sm;
+    line-height: 16px;
+  }
+
+  .footer {
+    button + button {
+      margin-left: 10px;
+    }
+  }
+}
+
+
diff --git a/src/projects/detail/components/SimplePlan/components/ConfirmDeleteMilestone/index.js b/src/projects/detail/components/SimplePlan/components/ConfirmDeleteMilestone/index.js
new file mode 100644
index 000000000..5d55d86a4
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/ConfirmDeleteMilestone/index.js
@@ -0,0 +1,2 @@
+import ConfirmDeleteMilestone from './ConfirmDeleteMilestone'
+export default ConfirmDeleteMilestone
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.jsx
new file mode 100644
index 000000000..64bea9532
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.jsx
@@ -0,0 +1,25 @@
+/**
+ * Milestone budget
+ */
+import React from 'react'
+import PT from 'prop-types'
+
+import './MilestoneBudget.scss'
+
+function MilestoneBudget({ spent, budget }) {
+  return (
+    <div styleName="progress-bar">
+      <div styleName="text">{budget > 0 ? `$${spent} of $${budget}` : `$${budget}`}</div>
+      <div styleName="background"/>
+      <div styleName="progress" style={{transform: `scaleX(${budget > 0 ? spent/budget : 0})`}}/>
+    </div>
+  )
+}
+
+
+MilestoneBudget.propTypes = {
+  spent: PT.number,
+  budget: PT.number,
+}
+
+export default MilestoneBudget
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss
new file mode 100644
index 000000000..308256d79
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss
@@ -0,0 +1,35 @@
+@import '~styles/variables';
+
+.progress-bar {
+  position: relative;
+  padding-bottom: 6px;
+
+  .text {
+    @include roboto;
+    font-size: 9px;
+    line-height: 12px;
+    color: $tc-gray-20;
+  }
+
+  .background,
+  .progress {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-width: 3px;
+    border-style: solid;
+    border-radius: 6px;
+  }
+
+  .background {
+    background-color: $tc-gray-20;
+    border-color:  $tc-gray-20;
+  }
+
+  .progress {
+    background-color: $tc-green-110;
+    border-color: $tc-green-110;
+    transform-origin: left;
+  }
+}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js
new file mode 100644
index 000000000..d76b13aa7
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js
@@ -0,0 +1,2 @@
+import MilestoneBudget from './MilestoneBudget'
+export default MilestoneBudget
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.jsx
new file mode 100644
index 000000000..30d39b0f4
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.jsx
@@ -0,0 +1,75 @@
+/**
+ * Milestone copilots
+ */
+import React from 'react'
+import PT from 'prop-types'
+import uncontrollable from 'uncontrollable'
+import { Gateway } from 'react-gateway'
+import ProjectManagerAvatars from '../../../../../list/components/Projects/ProjectManagerAvatars'
+import AddCopilotsSidebar from '../AddCopilotsSidebar'
+import IconDots from '../../../../../../assets/icons/icon-dots.svg'
+
+import './MilestoneCopilots.scss'
+
+
+function MilestoneCopilots({
+  open,
+  setOpen,
+  edit,
+  copilots,
+  projectMembers,
+  onAdd,
+  onRemove
+}) {
+  const ScrollLock = React.createClass ({
+    componentDidMount() {
+      const scrollbarWidth = window.innerWidth - document.body.clientWidth
+      document.body.style.setProperty('overflow', 'hidden')
+      document.body.style.setProperty('margin-right', `${scrollbarWidth}px`)
+    },
+
+    componentWillUnmount() {
+      document.body.style.removeProperty('overflow')
+      document.body.style.removeProperty('margin-right')
+    },
+
+    render() {
+      return null
+    }
+  })
+
+  return edit ? (
+    <span styleName="milestone-copilots">
+      <button type="button" className="tc-btn tc-btn-default" styleName="edit-copilots-button" onClick={() => setOpen(!open)}>
+        <IconDots />
+      </button>
+      {open  && (
+        <Gateway into="right-sidebar">
+          <ScrollLock />
+          <AddCopilotsSidebar
+            copilots={copilots}
+            projectMembers={projectMembers}
+            onClose={() => setOpen(false)}
+            onAdd={onAdd}
+            onRemove={onRemove}
+          />
+        </Gateway>
+      )}
+    </span>
+  ) : (
+    <ProjectManagerAvatars managers={copilots} />
+  )
+}
+
+
+MilestoneCopilots.propTypes = {
+  edit: PT.bool,
+  copilots: PT.arrayOf(PT.shape()),
+  projectMembers: PT.arrayOf(PT.shape()),
+  onAdd: PT.func,
+  onRemove: PT.func,
+}
+
+export default uncontrollable(MilestoneCopilots, {
+  open: 'setOpen'
+})
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.scss b/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.scss
new file mode 100644
index 000000000..5a609a145
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.scss
@@ -0,0 +1,9 @@
+@import '~styles/variables';
+
+.milestone-copilots {
+  .edit-copilots-button {
+    height: 25px;
+    padding: 0 8px;
+    border-radius: 2 * $corner-radius;
+  }
+}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/index.js
new file mode 100644
index 000000000..5b916ba07
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/index.js
@@ -0,0 +1,2 @@
+import MilestoneCopilots from './MilestoneCopilots'
+export default MilestoneCopilots
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.jsx
new file mode 100644
index 000000000..42f32ff59
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.jsx
@@ -0,0 +1,89 @@
+import React from 'react'
+import PT from 'prop-types'
+import { Popper, Manager } from 'react-popper'
+import ConfirmDeleteMilestone from '../ConfirmDeleteMilestone'
+import IconTrash from '../../../../../../assets/icons/icon-ui-trash-simple.svg'
+
+import './MilestoneDeleteButton.scss'
+
+class MilestoneDeleteButton extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      open: false
+    }
+
+    this.onClickOutside = this.onClickOutside.bind(this)
+  }
+
+  componentDidUpdate() {
+    const { open } = this.state
+
+    if (open) {
+      document.addEventListener('click', this.onClickOutside)
+    } else {
+      document.removeEventListener('click', this.onClickOutside)
+    }
+  }
+
+  onClickOutside(event) {
+    if (this.confirmRef.contains(event.target)) {
+      return
+    }
+
+    this.setState({ open: false })
+  }
+
+  render() {
+    const { onDelete } = this.props
+    const { open } = this.state
+
+    return (
+      <span>
+        <button
+          type="button"
+          className="tc-btn tc-btn-link"
+          styleName="icon-button"
+          onClick={(event) => {
+            event.stopPropagation()
+
+            this.setState({
+              open: !open
+            })
+          }}
+          ref={ref => this.btnRef = ref}
+        >
+          <IconTrash />
+        </button>
+        {open &&
+          <Manager>
+            <Popper placement="bottom-end" referenceElement={this.btnRef}>
+              {({ ref, style, placement, arrowProps }) => (
+                <div ref={ref} style={style} data-placement={placement} styleName="pane">
+                  <div ref={ref2 => this.confirmRef = ref2}>
+                    <ConfirmDeleteMilestone
+                      onClose={(yes) => {
+                        if (yes) {
+                          onDelete()
+                        }
+                        this.setState({ open: false })
+                      }}
+                    />
+                    <div ref={arrowProps.ref} style={arrowProps.style} styleName="arrow" />
+                  </div>
+                </div>
+              )}
+            </Popper>
+          </Manager>
+        }
+      </span>
+    )
+  }
+}
+
+MilestoneDeleteButton.propTypes = {
+  onDelete: PT.func,
+}
+
+export default MilestoneDeleteButton
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.scss b/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.scss
new file mode 100644
index 000000000..41db3db24
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.scss
@@ -0,0 +1,16 @@
+button.icon-button{
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+}
+
+.pane {
+  margin-top: 10px;
+  z-index: 1;
+}
+
+.arrow {
+  width: 0;
+  height: 0;
+}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/index.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/index.jsx
new file mode 100644
index 000000000..40e3ad63e
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/index.jsx
@@ -0,0 +1,2 @@
+import MilestoneDeleteButton from './MilestoneDeleteButton'
+export default MilestoneDeleteButton
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
new file mode 100644
index 000000000..6822d19b1
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
@@ -0,0 +1,59 @@
+/**
+ * Milestone header row
+ */
+import React from 'react'
+import PT from 'prop-types'
+import FormsyForm from 'appirio-tech-react-components/components/Formsy'
+
+import './MilestoneHeaderRow.scss'
+
+const TCFormFields = FormsyForm.Fields
+
+function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
+  const checked = milestones.reduce(
+    (selected, milestone) => selected = selected && milestone.selected,
+    milestones.length > 0
+  )
+  const selectAll = () => {
+    const milestonesSelected = milestones.map(milestone => ({
+      ...milestone,
+      selected: true
+    }))
+    onChangeMilestones(milestonesSelected)
+  }
+  const unselectAll = () => {
+    const milestonesUnselected = milestones.map(milestone => ({
+      ...milestone,
+      selected: false
+    }))
+    onChangeMilestones(milestonesUnselected)
+  }
+
+  return (
+    <tr styleName="milestone-row">
+      <th>
+        <TCFormFields.Checkbox
+          name="select-all"
+          value={checked}
+          onChange={(_, value) => {
+            value ? selectAll() : unselectAll()
+          }}
+        />
+      </th>
+      <th>MILESTONE</th>
+      <th>DESCRIPTION</th>
+      <th>START DATE</th>
+      <th>END DATE</th>
+      <th>STATUS</th>
+      <th>BUDGET</th>
+      {/* <th>COPILOTS</th> */}
+      {isUpdatable && (<th>ACTION</th>)}
+    </tr>
+  )
+}
+
+MilestoneHeaderRow.propTypes = {
+  onChangeMilestones: PT.func,
+}
+
+export default MilestoneHeaderRow
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.scss
new file mode 100644
index 000000000..3a059d1ae
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.scss
@@ -0,0 +1,14 @@
+@import '~styles/variables';
+
+.milestone-row {
+  @include roboto-bold;
+
+  font-size: $tc-label-sm;
+  color: $tc-gray-60;
+  line-height: 15px;
+
+  th {
+    padding-top: 20px;
+    padding-bottom: 15px;
+  }
+}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/index.js
new file mode 100644
index 000000000..8601aca13
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/index.js
@@ -0,0 +1,2 @@
+import MilestoneHeaderRow from './MilestoneHeaderRow'
+export default MilestoneHeaderRow
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
new file mode 100644
index 000000000..4c7a5bd26
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
@@ -0,0 +1,358 @@
+/**
+ * View / edit milestone record
+ */
+import React from 'react'
+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'
+import MilestoneStatus from '../MilestoneStatus'
+import MilestoneBudget from '../MilestoneBudget'
+import MilestoneDeleteButton from '../MilestoneDeleteButton'
+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'
+
+const TCFormFields = FormsyForm.Fields
+
+function MilestoneRow({
+  milestone,
+  rowId,
+  onChange,
+  onSave,
+  onRemove,
+  onDiscard,
+  projectMembers,
+  allMilestones,
+  isCreatingRow,
+  isUpdatable,
+  members,
+}) {
+  const phaseStatusOptions = PHASE_STATUS_OPTIONS
+  const edit = milestone.edit
+  const copilotIds = _.get(milestone, 'details.copilots', [])
+  let copilots = copilotIds.map(userId => projectMembers.find(member => member.userId === userId)).filter(Boolean)
+
+  if (copilots.length !== copilotIds.length) {
+    const missingCopilotIds = _.difference(copilotIds, projectMembers.map(member => member.userId))
+    const missingCopilots = missingCopilotIds.map(userId => members[userId])
+    copilots = copilots.concat(missingCopilots)
+  }
+
+  let milestoneRef
+  let startDateRef
+  let endDateRef
+  let budgetRef
+
+  return edit ? (
+    <tr styleName="milestone-row" className="edit-milestone-row">
+      <td styleName="checkbox">
+        <TCFormFields.Checkbox
+          name={`select-${rowId}`}
+          value={milestone.selected}
+          onChange={(_, value) => {
+            onChange({ ...milestone, selected: value })
+          }}
+        />
+      </td>
+      <td styleName="milestone">
+        <TCFormFields.TextInput
+          validations={{
+            isRequired: true,
+            checkDuplicatedTitles(values) {
+              if (!milestone.editting) {
+                return true
+              }
+              const existingTitles = allMilestones
+                .filter(i => i.id !== milestone.id)
+                .map(i => i.name.toLowerCase().trim())
+              const inputtingTitle = values[`title-${rowId}`].toLowerCase().trim()
+              return existingTitles.indexOf(inputtingTitle) === -1
+            }
+          }}
+          validationError={'Please, enter name'}
+          validationErrors={{
+            checkDuplicatedTitles: 'Milestone name already exists'
+          }}
+          required
+          type="text"
+          name={`title-${rowId}`}
+          value={milestone.name  || ''}
+          maxLength={48}
+          onChange={(_, value) => {
+            if (!milestone.origin) {
+              milestone.origin = {...milestone }
+            }
+            onChange({...milestone, name: value, editting: true, editted: true })
+          }}
+          wrapperClass={styles.textInput}
+          innerRef={ref => milestoneRef = ref}
+          isPristine={() => !milestone.editted}
+        />
+      </td>
+      <td styleName="description">
+        <TCFormFields.Textarea
+          name={`description-${rowId}`}
+          value={milestone.description || ''}
+          maxLength={255}
+          onChange={(_, value) => {
+            if (!milestone.origin) {
+              milestone.origin = {...milestone}
+            }
+            onChange({...milestone, description: value })
+          }}
+          wrapperClass={styles.textArea}
+          autoResize={false}
+          rows={1}
+        />
+      </td>
+      <td styleName="start-date">
+        <TCFormFields.TextInput
+          validations={{
+            isRequired: true,
+            isValidStartEndDatesForRow(values) {
+              return isValidStartEndDates({
+                startDate: values[`startDate-${rowId}`],
+                endDate: values[`endDate-${rowId}`],
+              })
+            }
+          }}
+          validationError={'Please, enter start date'}
+          validationErrors={{
+            isValidStartEndDatesForRow: 'Start date cannot be after end date'
+          }}
+          required
+          type="date"
+          name={`startDate-${rowId}`}
+          value={moment(milestone.startDate).format('YYYY-MM-DD')}
+          onChange={(_, value) => {
+            if (!milestone.origin) {
+              milestone.origin = {...milestone}
+            }
+            onChange({...milestone, startDate: value })
+          }}
+          wrapperClass={`${styles.textInput} ${styles.dateInput}`}
+          innerRef={ref => startDateRef = ref}
+        />
+      </td>
+      <td styleName="end-date">
+        <TCFormFields.TextInput
+          validations={{
+            isRequired: true,
+            isValidStartEndDatesForRow(values) {
+              return isValidStartEndDates({
+                startDate: values[`startDate-${rowId}`],
+                endDate: values[`endDate-${rowId}`],
+              })
+            }
+          }}
+          validationError={'Please, enter end date'}
+          validationErrors={{
+            isValidStartEndDatesForRow: 'End date cannot be before start date'
+          }}
+          required
+          type="date"
+          name={`endDate-${rowId}`}
+          value={moment(milestone.endDate).format('YYYY-MM-DD')}
+          onChange={(_, value) => {
+            if (!milestone.origin) {
+              milestone.origin = {...milestone}
+            }
+            onChange({...milestone, endDate: value })
+          }}
+          wrapperClass={`${styles.textInput} ${styles.dateInput}`}
+          innerRef={ref => endDateRef = ref}
+        />
+      </td>
+      <td styleName="status">
+        <FormsySelect
+          name={`status-${rowId}`}
+          options={phaseStatusOptions}
+          onChange={(selectedOption) => {
+            if (!milestone.origin) {
+              milestone.origin = {...milestone}
+            }
+            onChange({...milestone, status: selectedOption.value })
+          }}
+          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}`}
+          value={milestone.budget || 0}
+          onChange={(_, value) => {
+            if (!milestone.origin) {
+              milestone.origin = {...milestone}
+            }
+            onChange({...milestone, budget: value })
+          }}
+          wrapperClass={styles.textInput}
+          innerRef={ref => budgetRef = ref}
+        />
+      </td>
+      {/* <td styleName="copilots">
+        <MilestoneCopilots
+          edit
+          copilots={copilots}
+          projectMembers={projectMembers}
+          onAdd={(member) => {
+            if (!milestone.origin) {
+              milestone.origin = {...milestone}
+            }
+            const details = milestone.details
+            const copilotIdsUpdated = copilots.map(copilot => copilot.userId).concat(member.userId)
+            onChange({...milestone, details: { ...details, copilots: copilotIdsUpdated } })
+          }}
+          onRemove={(member) => {
+            if (!milestone.origin) {
+              milestone.origin = {...milestone}
+            }
+            const details = milestone.details
+            const copilotIdsUpdated = copilots.filter(copilot => copilot.userId !== member.userId).map(copilot => copilot.userId)
+            onChange({...milestone, details: { ...details, copilots: copilotIdsUpdated } })
+          }}
+        />
+      </td> */}
+      <td styleName="action">
+        <div styleName="inline-menu">
+          <button
+            type="submit"
+            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()
+                && budgetRef.props.isValid()
+              ) {
+                onSave(milestone.id)
+              }
+            }}
+          >
+            <IconCheck />
+          </button>
+          <button
+            type="button"
+            className="tc-btn tc-btn-link"
+            styleName="icon-button"
+            onClick={() => {
+              if (isCreatingRow) {
+                onDiscard(milestone.id)
+              } else {
+                onChange({ ...(milestone.origin || milestone), edit: false })
+              }
+            }}
+          >
+            <IconXMark />
+          </button>
+        </div>
+      </td>
+    </tr>
+  ) : (
+    <tr styleName="milestone-row">
+      <td styleName="checkbox">
+        <TCFormFields.Checkbox
+          name={`select-${rowId}`}
+          value={milestone.selected}
+          onChange={(_, value) => {
+            onChange({ ...milestone, selected: value })
+          }}
+        />
+      </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> */}
+      {isUpdatable && (
+        <td styleName="action">
+          <div styleName="inline-menu">
+            <button
+              type="button"
+              className="tc-btn tc-btn-link"
+              styleName="icon-button"
+              onClick={() => {
+                onChange({ ...milestone, edit: true })
+              }}
+            >
+              <IconPencil />
+            </button>
+            <MilestoneDeleteButton
+              onDelete={() => {
+                onRemove(milestone.id)
+              }}
+            />
+            <button type="button" className="tc-btn tc-btn-link" styleName="icon-button">
+              <IconDots />
+            </button>
+          </div>
+        </td>
+      )}
+    </tr>
+  )
+}
+
+MilestoneRow.propTypes = {
+  milestone: PT.shape(),
+  rowId: PT.string,
+  onChange: PT.func,
+  onSave: PT.func,
+  onRemove: PT.func,
+  onDiscard: PT.func,
+  projectMembers: PT.arrayOf(PT.shape()),
+  allMilestones: PT.arrayOf(PT.shape()),
+  isCreatingRow: PT.bool,
+  isUpdatable: PT.bool,
+  members: PT.object,
+}
+
+export default MilestoneRow
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
new file mode 100644
index 000000000..ce1e1f152
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
@@ -0,0 +1,170 @@
+@import '~styles/variables';
+
+.milestone-row {
+  @include roboto;
+  font-size: $tc-body-sm;
+  color: $tc-gray-60;
+
+  .icon-button{
+    width: 14px;
+    height: 14px;
+    padding: 0;
+    border: 0;
+  }
+
+  .checkbox {}
+
+  .milestone {}
+
+  .description {}
+
+  .start-date {
+    white-space: nowrap;
+  }
+
+  .end-date {
+    white-space: nowrap;
+  }
+
+  .status {
+    white-space: nowrap;
+  }
+
+  .budget {
+    padding-right: 10px;
+  }
+
+  .copilots {}
+
+  .action {}
+}
+
+.textInput {
+  position: relative;
+
+  :global {
+    .tc-label {
+      display: none;
+    }
+    .tc-file-field__inputs {
+      height: 25px;
+      margin-bottom: 0;
+      font-size: $tc-body-sm;
+      line-height: 16px;
+    }
+    .error-message {
+      position: absolute;
+      top: 100%;
+      width: fit-content;
+      min-width: 145px;
+      z-index: 1;
+    }
+  }
+}
+
+.textArea {
+  :global {
+    .tc-label {
+      display: none;
+    }
+    .tc-textarea {
+      height: 25px;
+      min-height: 25px;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin: 0;
+      overflow: hidden;
+      resize: vertical;
+      font-size: $tc-body-sm;
+      line-height: 25px;
+    }
+  }
+}
+
+.dateInput {
+  :global {
+    .tc-file-field__inputs {
+      padding: 0;
+      max-width: 120px;
+
+      &::-webkit-calendar-picker-indicator {
+        width: 16px;
+        margin: 0;
+      }
+
+      @media screen and (max-width: 1024px) {
+        max-width: 90px;
+      }
+    }
+  }
+}
+
+.status {
+  :global {
+    .react-select-hiddendropdown-container {
+      .react-select__control {
+        height: auto;
+        min-height: 25px;
+        overflow: hidden;
+
+        .react-select__value-container {
+          height: auto;
+          padding-top: 0;
+          padding-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__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;
+    }
+  }
+}
+
+.action {
+  .inline-menu {
+    display: flex;
+
+    > *:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneRow/index.js
new file mode 100644
index 000000000..13cdadc92
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/index.js
@@ -0,0 +1,2 @@
+import MilestoneRow from './MilestoneRow'
+export default MilestoneRow
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneStatus/MilestoneStatus.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneStatus/MilestoneStatus.jsx
new file mode 100644
index 000000000..cceb22325
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneStatus/MilestoneStatus.jsx
@@ -0,0 +1,22 @@
+/**
+ * Milestone status
+ */
+import React from 'react'
+import PT from 'prop-types'
+import { PHASE_STATUS_OPTIONS } from '../../../../../../config/constants'
+import './MilestoneStatus.scss'
+
+function MilestoneStatus({ status }) {
+  const label = PHASE_STATUS_OPTIONS.find(option => option.value === status).label
+  return (
+    <span styleName={`milestone-status ${status}`}>
+      {label}
+    </span>
+  )
+}
+
+MilestoneStatus.propTypes = {
+  status: PT.string,
+}
+
+export default MilestoneStatus
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneStatus/MilestoneStatus.scss b/src/projects/detail/components/SimplePlan/components/MilestoneStatus/MilestoneStatus.scss
new file mode 100644
index 000000000..751538f03
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneStatus/MilestoneStatus.scss
@@ -0,0 +1,20 @@
+@import '~styles/variables';
+
+.milestone-status {
+  @include roboto-bold;
+
+  display: inline-block;
+  padding: 4px 15px;
+  color: $tc-white;
+  font-size: $tc-label-xxs;
+  line-height: 16px;
+  border-radius: 20px;
+
+  &.draft { background-color: $tc-gray-20; }
+  &.in_review { background-color: $tc-gray-20; }
+  &.reviewed { background-color: $tc-gray-20; }
+  &.active { background-color: $tc-green-100; }
+  &.completed { background-color: $tc-black; }
+  &.cancelled { background-color: $tc-black; }
+  &.paused { background-color: $tc-red-100; }
+}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneStatus/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneStatus/index.js
new file mode 100644
index 000000000..882049bc5
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneStatus/index.js
@@ -0,0 +1,3 @@
+import MilestoneStatus from './MilestoneStatus'
+export default MilestoneStatus
+
diff --git a/src/projects/detail/components/SimplePlan/components/ProjectMemberAvatars/ProjectMemberAvatars.jsx b/src/projects/detail/components/SimplePlan/components/ProjectMemberAvatars/ProjectMemberAvatars.jsx
new file mode 100644
index 000000000..95af711af
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/ProjectMemberAvatars/ProjectMemberAvatars.jsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import PT from 'prop-types'
+import ProjectManagerAvatars from '../../../../../list/components/Projects/ProjectManagerAvatars'
+
+import './ProjectMemberAvatars.scss'
+
+class ProjectMemberAvatars extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      shownNum: null
+    }
+  }
+
+  componentDidMount() {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.borderBoxSize) {
+          const borderBoxSize = Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0]: entry.borderBoxSize
+
+          const numAvatarsToShow = Math.floor(borderBoxSize.inlineSize / this.props.size)
+          if (numAvatarsToShow !== this.props.maxShownNum) {
+            this.setState({ shownNum: numAvatarsToShow })
+          }
+        }
+      }
+    })
+    this.resizeObserver.observe(this.ref)
+  }
+
+  componentWillUnmount() {
+    this.resizeObserver.unobserve(this.ref)
+  }
+
+  render() {
+    const { members, maxShownNum, size } = this.props
+    const { shownNum } = this.state
+
+    const numAvatarsToShow = shownNum || maxShownNum
+
+    return (
+      <div
+        ref={ref => this.ref = ref}
+        styleName={`project-member-avatars size-${size}`}
+      >
+        <ProjectManagerAvatars
+          managers={members}
+          maxShownNum={numAvatarsToShow}
+          size={size}
+        />
+      </div>
+    )
+  }
+}
+
+ProjectMemberAvatars.propTypes = {
+  members: PT.arrayOf(PT.shape()),
+  maxShownNum: PT.number,
+  size: PT.number,
+}
+
+export default ProjectMemberAvatars
diff --git a/src/projects/detail/components/SimplePlan/components/ProjectMemberAvatars/ProjectMemberAvatars.scss b/src/projects/detail/components/SimplePlan/components/ProjectMemberAvatars/ProjectMemberAvatars.scss
new file mode 100644
index 000000000..fc8deed85
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/ProjectMemberAvatars/ProjectMemberAvatars.scss
@@ -0,0 +1,69 @@
+@import '~styles/variables';
+
+$avatar-overlap: 5px;
+
+.project-member-avatars {
+  :global {
+    .plus-user {
+      top: 0;
+      left: auto;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+
+      @include roboto-bold;
+      color: $tc-white;
+    }
+    .stack-avatar {
+      &:last-of-type {
+        .sb-avatar {
+          position: relative;
+
+          // mask
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(#000, .62);
+            border-radius: 50%;
+          }
+        }
+      }
+      &:last-child {
+        .sb-avatar {
+          // hide mask
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  &.size-50 {
+    margin-right: -50px;
+
+    :global(.plus-user) {
+      right: 25px;
+      width: 50px;
+      height: 50px;
+      margin-left: -$avatar-overlap;
+      width: 0;
+    }
+  }
+  &.size-35 {
+    margin-right: -35px;
+
+    :global(.plus-user) {
+      right: 35px;
+      width: 35px;
+      height: 35px;
+      margin-left: -$avatar-overlap;
+    }
+  }
+}
diff --git a/src/projects/detail/components/SimplePlan/components/ProjectMemberAvatars/index.js b/src/projects/detail/components/SimplePlan/components/ProjectMemberAvatars/index.js
new file mode 100644
index 000000000..d772198d8
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/ProjectMemberAvatars/index.js
@@ -0,0 +1,2 @@
+import ProjectMemberAvatars from './ProjectMemberAvatars'
+export default ProjectMemberAvatars
diff --git a/src/projects/detail/components/SimplePlan/components/helpers/milestone.js b/src/projects/detail/components/SimplePlan/components/helpers/milestone.js
new file mode 100644
index 000000000..b85b585d4
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/helpers/milestone.js
@@ -0,0 +1,18 @@
+import moment from 'moment'
+import * as constants from '../../../../../../config/constants'
+
+let nextId = 0
+export function createEmptyMilestone(startDate, endDate) {
+  startDate = startDate ? moment(startDate) : moment()
+  endDate = endDate ? moment(endDate) : moment(startDate).add(3, 'days')
+
+  return {
+    id: `new-milestone-${nextId++}`,
+    name: '',
+    description: '',
+    startDate: moment(startDate).format('YYYY-MM-DD'),
+    endDate: moment(endDate).format('YYYY-MM-DD'),
+    status: constants.PHASE_STATUS_DRAFT,
+    budget: 0,
+  }
+}
diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index 329925369..17b7a8c68 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -10,6 +10,7 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import LoadingIndicator from '../../../components/LoadingIndicator/LoadingIndicator'
 import  CreatePhaseForm from '../components/CreatePhaseForm'
+import moment from 'moment'
 
 import './DashboardContainer.scss'
 
@@ -46,9 +47,11 @@ import NotificationsReader from '../../../components/NotificationsReader'
 import { hasPermission } from '../../../helpers/permissions'
 import { getProjectTemplateById } from '../../../helpers/templates'
 import { PERMISSIONS } from '../../../config/permissions'
-import { updateProject, fireProjectDirty, fireProjectDirtyUndo } from '../../actions/project'
+import { updateProject, fireProjectDirty, fireProjectDirtyUndo, updatePhase } from '../../actions/project'
 import { addProjectAttachment, updateProjectAttachment, removeProjectAttachment } from '../../actions/projectAttachment'
+import { loadMembers } from '../../../actions/members'
 import ProjectEstimation from '../../create/components/ProjectEstimation'
+import CreateSimplePlan from '../components/SimplePlan/CreateSimplePlan'
 
 import {
   PHASE_STATUS_ACTIVE,
@@ -79,6 +82,7 @@ class DashboardContainer extends React.Component {
 
     this.state = {
       open: false,
+      createGameplanPhases: null,
     }
     this.onNotificationRead = this.onNotificationRead.bind(this)
     this.toggleDrawer = this.toggleDrawer.bind(this)
@@ -158,6 +162,8 @@ class DashboardContainer extends React.Component {
       removeProjectAttachment,
       location,
       estimationQuestion,
+      loadMembers,
+      members,
     } = this.props
     const projectTemplate = project && project.templateId && projectTemplates ? (getProjectTemplateById(projectTemplates, project.templateId)) : null
 
@@ -275,23 +281,169 @@ class DashboardContainer extends React.Component {
                 productCategories={productCategories}
               />
 
-              {visiblePhases && visiblePhases.length > 0 ? (
-                <ProjectStages
-                  {...{
-                    ...this.props,
-                    phases: visiblePhases,
-                    phasesNonDirty: visiblePhasesNonDirty,
-                  }}
-                />
+              {project.version !== 'v4' ? (
+                <div>
+                  {visiblePhases && visiblePhases.length > 0 ? (
+                    <ProjectStages
+                      {...{
+                        ...this.props,
+                        phases: visiblePhases,
+                        phasesNonDirty: visiblePhasesNonDirty,
+                      }}
+                    />
+                  ) : (
+                    <ProjectPlanEmpty />
+                  )}
+                  {isCreatingPhase? <LoadingIndicator/>: null}
+                  {isProjectLive && !isCreatingPhase && hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN)  && !isLoadingPhases && (
+                    <CreatePhaseForm
+                      projectVersion={parseInt((project.version || 'v2').substring(1))}
+                      onSubmit={this.onFormSubmit}
+                    />
+                  )}
+                </div>
               ) : (
-                <ProjectPlanEmpty />
-              )}
-              {isCreatingPhase? <LoadingIndicator/>: null}
-              {isProjectLive && !isCreatingPhase && hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN)  && !isLoadingPhases && (
-                <CreatePhaseForm
-                  projectVersion={parseInt((project.version || 'v2').substring(1))}
-                  onSubmit={this.onFormSubmit}
-                />
+                <div styleName="simple-plan">
+                  {((!hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN) && (!visiblePhases || visiblePhases.length === 0))
+                    || (hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN) &&
+                      (!phases || phases.length === 0) &&
+                      (!this.state.createGameplanPhases || this.state.createGameplanPhases.length === 0))
+                  ) && (
+                    <div styleName="welcome-message">
+                      <ProjectPlanEmpty version="v4" />
+                    </div>
+                  )}
+                  {(() => {
+                    // is loading
+                    if (isCreatingPhase || isLoadingPhases) {
+                      return null
+                    }
+
+                    // hide milestones form if customer and no visible milestones
+                    if (!hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN) && visiblePhases && visiblePhases.length === 0) {
+                      return null
+                    }
+
+                    return (
+                      <CreateSimplePlan
+                        members={members}
+                        loadMembers={loadMembers}
+                        isProjectLive={isProjectLive}
+                        isCustomer={!hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN)}
+                        project={project}
+                        phases={phases}
+                        milestones={this.state.createGameplanPhases || phases}
+                        onChangeMilestones={(milestones) => {
+                          this.setState({createGameplanPhases: milestones})
+                        }}
+                        onSaveMilestone={(id) => {
+                          const { createGameplanPhases } = this.state
+                          const index = createGameplanPhases.findIndex(phase => phase.id === id)
+                          const phase = createGameplanPhases[index]
+
+                          if (`${phase.id}`.startsWith('new-milestone')) {
+                            const productTemplate = {
+                              name: phase.name,
+                              id: PHASE_PRODUCT_TEMPLATE_ID,
+                            }
+
+                            if (phase.description && phase.description.trim()) {
+                              productTemplate.description = phase.description.trim()
+                            }
+
+                            this.props.createPhaseWithoutTimeline(
+                              project,
+                              productTemplate,
+                              phase.status,
+                              moment.utc(phase.startDate),
+                              moment.utc(phase.endDate),
+                              phase.budget,
+                              phase.details
+                            ).then(({ action }) => {
+                              // reload phase
+                              const updatedCreateGameplanPhases = [...createGameplanPhases]
+                              updatedCreateGameplanPhases.splice(index, 1, {
+                                ...action.payload.phase,
+                                selected: phase.selected
+                              })
+                              this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
+                            })
+                          } else {
+                            const updateParam =  {
+                              name: phase.name,
+                              startDate: moment.utc(phase.startDate),
+                              endDate: moment.utc(phase.endDate),
+                              status: phase.status,
+                              budget: phase.budget,
+                            }
+
+                            if (phase.description && phase.description.trim()) {
+                              updateParam.description = phase.description.trim()
+                            }
+
+                            if (phase.details) {
+                              updateParam.details = phase.details
+                            }
+
+                            this.props.updatePhase(
+                              phase.projectId,
+                              phase.id,
+                              updateParam
+                            ).then(({ action }) => {
+                              const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
+                              const idx = updatedCreateGameplanPhases.findIndex(phase => phase.id === action.payload.id)
+
+                              // reload phase
+                              updatedCreateGameplanPhases.splice(idx, 1, {
+                                ...action.payload,
+                                edit: this.state.createGameplanPhases[idx].edit,
+                                selected: this.state.createGameplanPhases[idx].selected,
+                              })
+                              this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
+                            })
+
+                            // toggle edit
+                            const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
+                            updatedCreateGameplanPhases.splice(index, 1, {
+                              ...phase,
+                              edit: false,
+                              selected: phase.selected
+                            })
+                            this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
+                          }
+                        }}
+                        onRemoveMilestone={(id) => {
+                          const { createGameplanPhases } = this.state
+                          let index
+                          let projectId
+
+                          if (createGameplanPhases) {
+                            index = createGameplanPhases.findIndex(phase => phase.id === id)
+                            projectId = createGameplanPhases[index].projectId
+                          } else {
+                            index = phases.findIndex(phase => phase.id === id)
+                            projectId = phases[index].projectId
+                          }
+
+                          this.props.deleteProjectPhase(
+                            projectId,
+                            id
+                          ).then(() => {
+                            if (!this.state.createGameplanPhases) {
+                              return
+                            }
+
+                            // remove phase
+                            const index = this.state.createGameplanPhases.findIndex(phase => phase.id === id)
+                            const newGameplanPhases = [...this.state.createGameplanPhases]
+                            newGameplanPhases.splice(index, 1)
+                            this.setState({createGameplanPhases: newGameplanPhases})
+                          })
+                        }}
+                      />
+                    )
+                  })()}
+                </div>
               )}
             </div>
           )}
@@ -301,7 +453,7 @@ class DashboardContainer extends React.Component {
   }
 }
 
-const mapStateToProps = ({ notifications, projectState, projectTopics, templates, topics }) => {
+const mapStateToProps = ({ notifications, projectState, projectTopics, templates, topics, members }) => {
   // all feeds includes primary as well as private topics if user has access to private topics
   let allFeed = projectTopics.feeds[PROJECT_FEED_TYPE_PRIMARY].topics
   if (hasPermission(PERMISSIONS.ACCESS_PRIVATE_POST)) {
@@ -322,6 +474,7 @@ const mapStateToProps = ({ notifications, projectState, projectTopics, templates
     isFeedsLoading: projectTopics.isLoading,
     phasesStates: projectState.phasesStates,
     phasesTopics: topics,
+    members: members.members
   }
 }
 
@@ -345,7 +498,9 @@ const mapDispatchToProps = {
   updateProject,
   addProjectAttachment,
   updateProjectAttachment,
-  removeProjectAttachment
+  removeProjectAttachment,
+  updatePhase,
+  loadMembers,
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(withRouter(DashboardContainer))
diff --git a/src/projects/detail/containers/DashboardContainer.scss b/src/projects/detail/containers/DashboardContainer.scss
index e69de29bb..8f844c4e1 100644
--- a/src/projects/detail/containers/DashboardContainer.scss
+++ b/src/projects/detail/containers/DashboardContainer.scss
@@ -0,0 +1,16 @@
+@import '~styles/variables';
+
+.simple-plan {
+  @media screen and (min-width: $screen-md) {
+    margin-top: 30px;
+  }
+
+  @media screen and (max-width: $screen-md - 1px) {
+    padding: 0 20px;
+  }
+}
+
+.welcome-message {
+  margin: 0 auto;
+  max-width: 760px;
+}
diff --git a/src/projects/list/components/Projects/ProjectManagerAvatars.jsx b/src/projects/list/components/Projects/ProjectManagerAvatars.jsx
index 5a1759aa5..4a14b9e69 100644
--- a/src/projects/list/components/Projects/ProjectManagerAvatars.jsx
+++ b/src/projects/list/components/Projects/ProjectManagerAvatars.jsx
@@ -5,7 +5,7 @@ import UserTooltip from '../../../../components/User/UserTooltip'
 
 import styles from './ProjectManagerAvatars.scss'
 
-const ProjectManagerAvatars = ({ managers, maxShownNum = 3 }) => {
+const ProjectManagerAvatars = ({ managers, maxShownNum = 3, size = 35 }) => {
   let extM = false
   if (!managers || !managers.length)
     return <div className="user-block txt-italic">Unclaimed</div>
@@ -19,7 +19,7 @@ const ProjectManagerAvatars = ({ managers, maxShownNum = 3 }) => {
       {uniqManagers.map((user, i) => {
         return (
           <div className={`stack-avatar stack-avatar-${i}`} key={i}>
-            <UserTooltip usr={user} id={i} size={35} previewAvatar />
+            <UserTooltip usr={user} id={i} size={size} previewAvatar />
           </div>
         )
       })}
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: