diff --git a/package.json b/package.json
index d7e139a22..0fed87c4f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "react-addons-css-transition-group": "^0.14.8",
     "react-dom": "^0.14.8",
     "react-dotdotdot": "^1.0.4",
+    "react-forms": "^2.0.0-beta33",
     "react-layout-pane": "^0.1.16",
     "react-redux": "^4.0.6",
     "react-redux-form": "^0.14.3",
diff --git a/src/projects/create/components/AppProjectForm.jsx b/src/projects/create/components/AppProjectForm.jsx
new file mode 100644
index 000000000..e7b614383
--- /dev/null
+++ b/src/projects/create/components/AppProjectForm.jsx
@@ -0,0 +1,158 @@
+
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { clearLoadedProject } from '../../../actions/project'
+import DevicesComponent from './Devices'
+import { Form, SubmitButton, TextInput, RadioGroupInput, TextareaInput, SliderRadioGroupInput, Validations } from 'appirio-tech-react-components'
+
+require('./CreateProject.scss')
+
+const appTypeOptions = [
+  {
+    value: 'ios',
+    label: 'iOS'
+  }, {
+    value: 'android',
+    label: 'Android'
+  }, {
+    value: 'web',
+    label: 'Web'
+  }, {
+    value: 'hybrid',
+    label: 'Hybrid'
+  }
+]
+
+const projectTypes = [
+  {
+    value: 'visual_design',
+    title: 'Visualize an app idea',
+    desc: <p><strong>5-7 days,</strong> from <strong>$3,500</strong></p>,
+    info: 'Wireframes, Visual Design'
+  }, {
+    value: 'visual_prototype',
+    title: 'Prototype an app',
+    desc: <p><strong>14+ days,</strong> from <strong>$15,000</strong></p>,
+    info: 'Visual or HTML prototype'
+  }, {
+    value: 'app_dev',
+    title: 'Fully develop an app',
+    desc: <p>from <strong>$30,000 </strong></p>,
+    info: 'Design, Front End, Back End, <br/>Integration and API'
+  }
+]
+
+
+const initalFormValue = {
+  newProject: {
+    details: {
+      appType: 'ios',
+      devices: ['phone'],
+      utm: { code: ''}
+    },
+    type: 'visual_prototype'
+  }
+}
+
+class AppProjectForm extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  componentWillMount() {
+    this.props.clearLoadedProject()
+  }
+
+  // componentWillUpdate(nextProps) {
+  //   if (!nextProps.isLoading &&
+  //       nextProps.project.id) {
+  //     console.log('project created', nextProps.project)
+  //     this.props.router.push('/projects/' + nextProps.project.id )
+  //   }
+  // }
+
+  render () {
+    return (
+      <Form initialValue={initalFormValue} onSubmit={this.props.submitHandler}>
+        <div className="what-you-like-to-do">
+          <h2>What would you like to do?</h2>
+          <SliderRadioGroupInput
+            name="newProject.type"
+            label="na"
+            min={0}
+            max={2}
+            step={1}
+            options={projectTypes}
+          />
+        </div>
+
+        {/* .pick-target-devices */}
+
+        <DevicesComponent
+          name="newProject.details.devices"
+        />
+
+        <RadioGroupInput
+          name="newProject.details.appType"
+          label="App Type"
+          disabled={false}
+          wrapperClass="app-type1"
+          options={appTypeOptions}
+        />
+
+        <div className="project-info">
+          <h2>Project info</h2>
+
+          <TextInput
+            name="newProject.name"
+            type="text"
+            validations={{
+              required: [Validations.isRequired, 'project name is required']
+            }}
+            label="Project Name"
+            placeholder="enter project name"
+            disabled={false}
+            wrapperClass="row"
+          />
+
+          <TextareaInput
+            name="newProject.description"
+            label="Description"
+            disabled={false}
+            wrapperClass="row"
+          />
+
+          <TextInput
+            name="details.utm.code"
+            label="Invite code (optional)"
+            type="text"
+            disabled={false}
+            wrapperClass="row center"
+          />
+        </div>
+        {/* .project-info */}
+
+        <div className="button-area">
+          <SubmitButton className="tc-btn tc-btn-primary tc-btn-md">
+            Create Project
+          </SubmitButton>
+        </div>
+        {/* .project-info */}
+      </Form>
+    )
+  }
+}
+
+AppProjectForm.propTypes = {
+  submitHandler: PropTypes.func.isRequired
+}
+
+const mapStateToProps = ({ newProject, projectState }) => ({
+  newProject,
+  isLoading: projectState.isLoading,
+  project: projectState.project
+})
+
+const actionCreators = { clearLoadedProject}
+
+export default connect(mapStateToProps, actionCreators)(AppProjectForm)
diff --git a/src/projects/create/CreateProject.scss b/src/projects/create/components/CreateProject.scss
similarity index 95%
rename from src/projects/create/CreateProject.scss
rename to src/projects/create/components/CreateProject.scss
index 0172d906a..3596e2bef 100644
--- a/src/projects/create/CreateProject.scss
+++ b/src/projects/create/components/CreateProject.scss
@@ -76,7 +76,7 @@
             position:absolute;
             right: 20px;
             top: 20px;
-            // background: url('../images/x-mark-big.svg') no-repeat 0 0;
+            background: url('../../images/x-mark-big.svg') no-repeat 0 0;
             width: 14px;
             height: 14px;
             background-size: 14px 14px;
@@ -219,35 +219,35 @@
                     }
                     &.phone{
                         span.icon{
-                            // background: url('../images/phone.svg') no-repeat 0 0;
+                            background: url('../../images/phone.svg') no-repeat 0 0;
                             width: 33px;
                             background-size: 33px 50px;
                         }
                     }
                     &.tablet{
                         span.icon{
-                            // background: url('../images/tablet.svg') no-repeat 0 0;
+                            background: url('../../images/tablet.svg') no-repeat 0 0;
                             width: 43px;
                             background-size: 43px 50px;
                         }
                     }
                     &.desktop{
                         span.icon{
-                            // background: url('../images/desktop.svg') no-repeat 0 0;
+                            background: url('../../images/desktop.svg') no-repeat 0 0;
                             width: 55px;
                             background-size: 55px 50px;
                         }
                     }
                     &.apple-watch{
                         span.icon{
-                            // background: url('../images/watch-apple.svg') no-repeat 0 0;
+                            background: url('../../images/watch-apple.svg') no-repeat 0 0;
                             width: 38px;
                             background-size: 38px 50px;
                         }
                     }
                     &.android-watch{
                         span.icon{
-                            // background: url('../images/watch-android.svg') no-repeat 0 0;
+                            background: url('../../images/watch-android.svg') no-repeat 0 0;
                             width: 38px;
                             background-size: 38px 50px;
                         }
@@ -261,7 +261,7 @@
                     color: $tc-gray-40;
                     font-size:12px;
                     line-height: 155px;
-                    // background: url('../images/divider.png') no-repeat 50% 0;
+                    background: url('../../images/divider.png') no-repeat 50% 0;
                 }
             }
         }
@@ -395,7 +395,7 @@
             height: 16px;
             border: none!important;
             box-shadow: none!important;
-            // background: url('../images/slider-bg.png') no-repeat 0 0;
+            background: url('../../images/slider-bg.png') no-repeat 0 0;
         }
         &::-webkit-slider-thumb {
             -webkit-appearance: none;
@@ -413,7 +413,7 @@
         &::-moz-range-track {
             width: 600px;
             height: 16px;
-            // background: url('../images/slider-bg.png') no-repeat 0 0;
+            background: url('../../images/slider-bg.png') no-repeat 0 0;
             border: none;
 
         }
diff --git a/src/projects/create/CreateView.jsx b/src/projects/create/components/CreateView.jsx
similarity index 62%
rename from src/projects/create/CreateView.jsx
rename to src/projects/create/components/CreateView.jsx
index 5a05f3d10..5020f68c8 100644
--- a/src/projects/create/CreateView.jsx
+++ b/src/projects/create/components/CreateView.jsx
@@ -1,11 +1,12 @@
 import _ from 'lodash'
 
 import React, { Component, PropTypes } from 'react'
-import { ROLE_TOPCODER_MANAGER, ROLE_ADMINISTRATOR } from '../../config/constants'
-import WorkProjectForm from './WorkProjectForm'
+import { ROLE_TOPCODER_MANAGER, ROLE_ADMINISTRATOR } from '../../../config/constants'
 import AppProjectForm from './AppProjectForm'
+import GenericProjectForm from './GenericProjectForm'
 import { connect } from 'react-redux'
-import { createProject } from '../../actions/project'
+import { withRouter } from 'react-router'
+import { createProject } from '../../../actions/project'
 
 require('./CreateProject.scss')
 
@@ -15,13 +16,21 @@ class CreateView extends Component {
     super(props)
   }
 
+  componentWillUpdate(nextProps) {
+    if (!nextProps.isLoading &&
+        nextProps.project.id) {
+      console.log('project created', nextProps.project)
+      this.props.router.push('/projects/' + nextProps.project.id )
+    }
+  }
+
   handleSelect(index, last) {
     console.log('SelectedTab: ' + index, ', LastTab: ' + last)
   }
 
   createProject(val) {
     console.log('creating project', val)
-    this.props.createProject(val)
+    createProject(val.newProject)
   }
 
   switchTab(val) {
@@ -48,12 +57,14 @@ class CreateView extends Component {
       // Todo select based on Tab
       form = <AppProjectForm submitHandler={this.createProject}/>
     } else {
-      form = <WorkProjectForm submitHandler={this.createProject}/>
+      // form = <WorkProjectForm submitHandler={this.createProject}/>
+      tabs = this.renderTabs()
+      form = <GenericProjectForm onSubmit={this.createProject} />
     }
     return (
       <section className="content">
         <div className="container">
-          <a href="#" className="btn-close">x</a>
+          <a href="#" className="btn-close"></a>
           {tabs}
           {form}
         </div>
@@ -72,5 +83,9 @@ CreateView.defaultProps = {
   currentTab: 0
 }
 
-const mapDispatchToProps = { createProject }
-export default connect(null, mapDispatchToProps)(CreateView)
+const mapStateToProps = ({projectState }) => ({
+  isLoading: projectState.isLoading,
+  project: projectState.project
+})
+const actionCreators = { createProject }
+export default withRouter(connect(mapStateToProps, actionCreators)(CreateView))
diff --git a/src/projects/create/components/Devices.jsx b/src/projects/create/components/Devices.jsx
new file mode 100644
index 000000000..bda056089
--- /dev/null
+++ b/src/projects/create/components/Devices.jsx
@@ -0,0 +1,137 @@
+
+import React, { PropTypes } from 'react'
+import { TiledCheckboxInput, BaseInputField } from 'appirio-tech-react-components'
+
+import _ from 'lodash'
+
+const devicesSet1 = [
+  {
+    title: 'Phone',
+    value: 'phone',
+    desc: 'iOS, Android, Hybrid'
+  }, {
+    title: 'Tablet',
+    value: 'tablet',
+    desc: 'iOS, Android, Hybrid'
+  }, {
+    title: 'Desktop',
+    value: 'desktop',
+    desc: 'All OS'
+  }
+]
+const devicesSet2 = [
+  {
+    title: 'Apple Watch',
+    value: 'apple-watch',
+    desc: 'Watch OS'
+  }, {
+    title: 'Android Watch',
+    value: 'android-watch',
+    desc: 'Android Wear'
+  }
+]
+
+const set1Values = _.map(devicesSet1, 'value')
+const set2Values = _.map(devicesSet2, 'value')
+
+class DevicesComponent extends BaseInputField {
+  constructor(props) {
+    super(props)
+    this.onChange = this.onChange.bind(this)
+  }
+
+  componentWillMount() {
+    const value = this.props.value || []
+    this.setState({
+      dirty: false,
+      valid: false,
+      value,
+      set1: _.intersection(set1Values, value),
+      set2: _.intersection(set2Values, value)
+    })
+  }
+  onChange(fieldName, newValue) {
+    const { onFieldChange, validateField, name, validations} = this.props
+
+    // determine the value that was just added
+    let justUpdated = _.difference(newValue, this.state.value)
+    if (!justUpdated.length) {
+      justUpdated = _.difference(this.state.value, newValue)
+    }
+    justUpdated = justUpdated[0]
+
+    const newDevices = this.updateDeviceList(this.state.value, justUpdated)
+    const results = validateField(newDevices, validations)
+    const isValid = results && !results.hasError || true
+    this.setState({
+      dirty: true,
+      value: newDevices,
+      set1: _.intersection(set1Values, newDevices),
+      set2: _.intersection(set2Values, newDevices),
+      valid: isValid,
+      errorMessage: _.get(results, 'errorMessage', '')
+    })
+    onFieldChange(name, newValue, isValid)
+  }
+
+  /*
+   * This is a wrapper function to update device list state.
+   * It uses model Actions from react-redux-form to dispatch the change
+   * action.
+   */
+  updateDeviceList(devices, val) {
+
+    // if val from set1 is selected values from set2 cannot be selected
+    // and vice-versa...
+    const reset =
+      (_.intersection(set1Values, devices).length
+        && _.indexOf(set2Values, val) > -1)
+      ||  (_.intersection(set2Values, devices).length
+        && _.indexOf(set1Values, val) > -1)
+
+    if (reset) {
+      return [val]
+    } else {
+      return _.xor(devices, [val])
+    }
+  }
+
+  render() {
+    return (
+      <div className="pick-target-devices">
+        <h2>Pick target device(s)</h2>
+        <div className="target-selector">
+          <TiledCheckboxInput
+            key={0}
+            name="devices1"
+            label=""
+            value={this.state.set1}
+            wrapperClass="target-selector"
+            options={devicesSet1}
+            onFieldChange={this.onChange}
+          />
+          <div className="divider">
+              Or
+          </div>
+          <TiledCheckboxInput
+            key={1}
+            name="devices2"
+            label=""
+            value={this.state.set2}
+            wrapperClass="target-selector"
+            options={devicesSet2}
+            onFieldChange={this.onChange}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+DevicesComponent.displayName = 'DevicesInputField'
+DevicesComponent.defaultProps = _.merge({}, DevicesComponent.defaultProps, {value: []})
+
+DevicesComponent.propTypes = _.assign({}, DevicesComponent.propTypes, {
+  value: PropTypes.arrayOf(PropTypes.string.isRequired)
+})
+
+export default DevicesComponent
diff --git a/src/projects/create/components/GenericProjectForm.jsx b/src/projects/create/components/GenericProjectForm.jsx
new file mode 100644
index 000000000..e24217293
--- /dev/null
+++ b/src/projects/create/components/GenericProjectForm.jsx
@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import { Form, TextInput, TextareaInput, SubmitButton, Validations } from 'appirio-tech-react-components'
+
+const initialValue = {
+  newProject: {
+    name: 'initial',
+    description: '',
+    type: 'generic'
+  }
+}
+class GenericProjectForm extends Component {
+
+  componentWillMount() {
+    this.setState(initialValue)
+  }
+
+  onSubmit(formValue) {
+    console.log(formValue)
+  }
+
+  onChange(formValue) {
+    this.setState(formValue)
+    console.log(formValue)
+  }
+
+  render() {
+    return (
+      <Form initialValue={initialValue} onSubmit={this.onSubmit}>
+        <TextInput
+          name="newProject.name"
+          type="text"
+          validations={{
+            required: [Validations.isRequired, 'project name is required']
+          }}
+          label="Project Name"
+          placeholder="enter project name"
+          disabled={false}
+          wrapperClass="row"
+        />
+
+        <TextareaInput
+          name="newProject.description"
+          label="Description"
+          disabled={false}
+          wrapperClass="row"
+        />
+
+        <div className="button-area">
+          <SubmitButton className="tc-btn tc-btn-primary tc-btn-md">
+            Create Project
+          </SubmitButton>
+        </div>
+      </Form>
+    )
+  }
+}
+
+export default GenericProjectForm
diff --git a/src/projects/create/AppProjectForm.jsx b/src/projects/create/components/old/AppProjectForm.jsx
similarity index 100%
rename from src/projects/create/AppProjectForm.jsx
rename to src/projects/create/components/old/AppProjectForm.jsx
diff --git a/src/projects/create/components/old/AppProjectReduxForm.jsx b/src/projects/create/components/old/AppProjectReduxForm.jsx
new file mode 100644
index 000000000..a5e8acb62
--- /dev/null
+++ b/src/projects/create/components/old/AppProjectReduxForm.jsx
@@ -0,0 +1,139 @@
+
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Form } from 'react-redux-form'
+import { withRouter } from 'react-router'
+
+import { createProject, clearLoadedProject } from '../../../actions/project'
+import DevicesComponent from './Devices'
+import ProjectTypeSelector from './ProjectTypeSelector/ProjectType'
+import AppTypeSelector from './AppTypeSelector'
+import { InputFormField, TextareaFormField } from 'appirio-tech-react-components'
+
+require('./CreateProject.scss')
+
+
+class AppProjectForm extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  componentWillMount() {
+    this.props.clearLoadedProject()
+  }
+
+  componentWillUpdate(nextProps) {
+    if (!nextProps.isLoading &&
+        nextProps.project.id) {
+      console.log('project created', nextProps.project)
+      this.props.router.push('/projects/' + nextProps.project.id )
+    }
+  }
+
+  render () {
+
+    return (
+      <Form model="newProject" onSubmit={this.props.submitHandler}>
+        {/* .what-you-like-to-do */}
+
+        <ProjectTypeSelector
+          modelName="newProject.type"
+          type={this.props.newProject.type}
+        />
+
+        {/* .pick-target-devices */}
+        <DevicesComponent
+          modelName="newProject.details.devices"
+          devices={this.props.newProject.details.devices}
+        />
+
+      {/*
+      <div className="app-type1">
+          <h4>App Type:</h4>
+          <Field model="newProject.details.appType">
+          <div className="radio">
+            <input type="radio" name="single-choice" id="radio-option-1" value="ios"/>
+            <label htmlFor="radio-option-1">iOS</label>
+          </div>
+          <div className="radio">
+            <input type="radio" name="single-choice" id="radio-option-2" value="android" />
+            <label htmlFor="radio-option-2">Android</label>
+          </div>
+          <div className="radio">
+            <input type="radio" name="single-choice" id="radio-option-3" value="web" />
+            <label htmlFor="radio-option-3">Web</label>
+          </div>
+          <div className="radio">
+            <input type="radio" name="single-choice" id="radio-option-4" value="hybrid" />
+            <label htmlFor="radio-option-4">Hybrid</label>
+          </div>
+          </Field>
+        </div>
+        */ }
+       <AppTypeSelector modelName="newProject.details.appType" />
+        {/* .pick-target-devices */}
+
+        <div className="project-info">
+          <h2>Project info</h2>
+
+          <div className="row">
+            <InputFormField
+              id="name"
+              validators={{
+                required: (val) => val
+              }}
+              errorMessages={{
+                required: 'Please provide a project name'
+              }}
+              formModelName="newProjectForm"
+              fieldModelName="newProject.name"
+              label="Project Name"
+              placeholder="Enter project name"
+              inputType="text"
+            />
+          </div>
+
+          <div className="row">
+            <TextareaFormField
+              id="description"
+              formModelName="newProjectForm"
+              fieldModelName="newProject.description"
+              label="Description"
+            />
+          </div>
+
+          <div className="row center">
+            <InputFormField
+              id="utm.code"
+              formModelName="newProjectForm"
+              fieldModelName="newProject.utm.code"
+              label="Invite Code (optional):"
+              placeholder=""
+              inputType="text"
+            />
+          </div>
+        </div>
+        {/* .project-info */}
+
+        <div className="button-area">
+          <button className="tc-btn">Create Project</button>
+        </div>
+        {/* .project-info */}
+      </Form>
+    )
+  }
+}
+
+AppProjectForm.propTypes = {
+  submitHandler: PropTypes.func.isRequired
+}
+
+const mapStateToProps = ({ newProject, projectState }) => ({
+  newProject,
+  isLoading: projectState.isLoading,
+  project: projectState.project
+})
+
+const actionCreators = { createProject, clearLoadedProject}
+
+export default withRouter(connect(mapStateToProps, actionCreators)(AppProjectForm))
diff --git a/src/projects/create/components/old/AppTypeSelector.jsx b/src/projects/create/components/old/AppTypeSelector.jsx
new file mode 100644
index 000000000..2c96d7707
--- /dev/null
+++ b/src/projects/create/components/old/AppTypeSelector.jsx
@@ -0,0 +1,57 @@
+
+import React, { Component, PropTypes } from 'react'
+import { Field } from 'react-redux-form'
+
+const typeOptions = [{
+  val: 'ios',
+  label: 'iOS'
+}, {
+  val: 'android',
+  label: 'Android'
+}, {
+  val: 'web',
+  label: 'Web'
+}, {
+  val: 'hybrid',
+  label: 'Hybrid'
+}]
+
+class AppTypeSelector extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    // creating a function to render each radio button
+    const typeFunc = (item, index) => {
+      // adding classes eg. "phone active"
+      const id = 'radio-option-' + index
+      return (
+        <div className="radio" key={index}>
+          <input
+            type="radio"
+            name="app-type-choice"
+            id={id}
+            value={item.val}
+          />
+          <label htmlFor={id}>{item.label}</label>
+        </div>
+      )
+    }
+    return (
+      <div className="app-type">
+        <h4>App Type:</h4>
+        <Field model={this.props.modelName}>
+          { typeOptions.map(typeFunc) }
+        </Field>
+      </div>
+    )
+  }
+}
+
+
+AppTypeSelector.propTypes = {
+  modelName: PropTypes.string.isRequired
+}
+
+export default AppTypeSelector
diff --git a/src/projects/create/components/old/Devices.jsx b/src/projects/create/components/old/Devices.jsx
new file mode 100644
index 000000000..aca5af1db
--- /dev/null
+++ b/src/projects/create/components/old/Devices.jsx
@@ -0,0 +1,122 @@
+
+import React, { Component, PropTypes } from 'react'
+import { actions as modelActions } from 'react-redux-form'
+import { connect } from 'react-redux'
+import _ from 'lodash'
+import classNames from 'classnames'
+
+const devicesSet1 = [
+  {
+    title: 'Phone',
+    val: 'phone',
+    desc: 'iOS, Android, Hybrid'
+  }, {
+    title: 'Tablet',
+    val: 'tablet',
+    desc: 'iOS, Android, Hybrid'
+  }, {
+    title: 'Desktop',
+    val: 'desktop',
+    desc: 'All OS'
+  }
+]
+const devicesSet2 = [
+  {
+    title: 'Apple Watch',
+    val: 'apple-watch',
+    desc: 'Watch OS'
+  }, {
+    title: 'Android Watch',
+    val: 'android-watch',
+    desc: 'Android Wear'
+  }
+]
+
+class DevicesComponent extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const { devices } = this.props
+    // creating a function to render each device item
+    const deviceFunc = (item, index) => {
+      // adding classes eg. "phone active"
+      const itemClassnames = classNames(
+        item.val, {
+          active: _.indexOf(devices, item.val) > -1
+        }
+      )
+      const handleClick = this.props.toggleDevice.bind(item.val)
+      return (
+        <a onClick={ handleClick }
+          className={itemClassnames}
+          key={index}
+        >
+            <span className="icon"></span>
+            <span className="title">{item.title}</span>
+            <small>{item.desc}</small>
+        </a>
+      )
+    }
+    return (
+      <div className="pick-target-devices">
+        <h2>Pick target device(s)</h2>
+        <div className="target-selector">
+          { devicesSet1.map(deviceFunc) }
+          <div className="divider">
+              Or
+          </div>
+          { devicesSet2.map(deviceFunc) }
+        </div>
+      </div>
+    )
+  }
+}
+
+/*
+ * This is a wrapper function to update device list state.
+ * It uses model Actions from react-redux-form to dispatch the change
+ * action.
+ */
+function updateDeviceList(devicesBeforeAction, val) {
+  return (dispatch) => {
+    const modelName = 'newProject.details.devices'
+    const set1 = _.map(devicesSet1, 'val')
+    const set2 = _.map(devicesSet2, 'val')
+
+    // if val from set1 is selected values from set2 cannot be selected
+    // and vice-versa...
+    const reset =
+      (_.intersection(set1, devicesBeforeAction).length
+        && _.indexOf(set2, val) > -1)
+      ||  (_.intersection(set2, devicesBeforeAction).length
+        && _.indexOf(set1, val) > -1)
+
+    if (reset) {
+      dispatch(modelActions.change(modelName, [val]))
+    } else {
+      dispatch(modelActions.xor(modelName, val))
+    }
+  }
+}
+
+DevicesComponent.propTypes = {
+  devices: PropTypes.arrayOf(PropTypes.string).isRequired
+}
+const actionCreators = { updateDeviceList }
+const mapStateToProps = ({newProject}) => ({
+  devices: newProject.details.devices
+})
+
+// Merging props so that we can use determine the current
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const props  = Object.assign({}, ownProps, stateProps, dispatchProps, {
+    toggleDevice: (val) => {
+      props.updateDeviceList(stateProps.devices, val)
+    }
+  })
+  return props
+}
+
+export default connect(mapStateToProps, actionCreators, mergeProps)(DevicesComponent)
diff --git a/src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx b/src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx
new file mode 100644
index 000000000..7b30fed07
--- /dev/null
+++ b/src/projects/create/components/old/ProjectTypeSelector/ProjectType.jsx
@@ -0,0 +1,138 @@
+
+import React, { Component, PropTypes } from 'react'
+import { actions as modelActions } from 'react-redux-form'
+import { connect } from 'react-redux'
+import _ from 'lodash'
+import classNames from 'classnames'
+
+const projectTypes = [{
+  val: 'visual_design',
+  numericVal: 0,
+  title: 'Visualize an app idea',
+  desc: <p><strong>5-7 days,</strong> from <strong>$3,500</strong></p>,
+  info: 'Wireframes, Visual Design'
+}, {
+  val: 'visual_prototype',
+  numericVal: 1,
+  title: 'Prototype an app',
+  desc: <p><strong>14+ days,</strong> from <strong>$15,000</strong></p>,
+  info: 'Visual or HTML prototype'
+}, {
+  val: 'app_dev',
+  numericVal: 2,
+  title: 'Fully develop an app',
+  desc: <p>from <strong>$30,000 </strong></p>,
+  info: 'Design, Front End, Back End, <br/>Integration and API'
+}]
+
+const getTypeIndex = (val) => _.findIndex(projectTypes, (t) => t.val === val)
+
+class ProjectTypeSelector extends Component {
+  constructor(props) {
+    super(props)
+    this.onSliderChange = this.props.onSliderChange.bind(this)
+  }
+
+  render() {
+    const { type } = this.props
+    // creating a function to render each type title + desc
+    const itemFunc = (item, index) => {
+      // handle active class
+      const itemClassnames = classNames( 'selector', {
+        active: type === item.val
+      })
+      const idx = getTypeIndex(item.val)
+      const handleClick = this.props.onSliderChange.bind(this, idx)
+      return (
+        <div
+          className={itemClassnames} key={index}
+          onClick={ handleClick }
+        >
+          <h3>{item.title}</h3>
+          {item.desc}
+        </div>
+      )
+    }
+
+    // function to render item info
+    const itemInfoFunc = (item, index) => {
+      // handle active class
+      const itemClassnames = classNames({active: type === item.val})
+      const idx = getTypeIndex(item.val)
+      const handleClick = this.props.onSliderChange.bind(this, idx)
+      return (
+        <span
+          onClick={ handleClick }
+          className={itemClassnames}
+          key={index}
+          dangerouslySetInnerHTML={{__html: item.info}}
+        >
+        </span>
+      )
+    }
+
+    return (
+      /**
+       * TODO Using onInput trigger instead of onChange.
+       * onChange is showing some funky behavior at least in Chrome.
+       * This functionality should be tested in other browsers
+       */
+      <div className="what-you-like-to-do">
+        <h2>What would you like to do?</h2>
+        <div className="type-selector">
+          {projectTypes.map(itemFunc)}
+        </div>
+
+        <div className="range-slider">
+          <input
+            type="range"
+            classNames="range-slider__range"
+            min={0}
+            max={2}
+            value={getTypeIndex(this.props.type)}
+            onInput={this.onSliderChange}
+          />
+          <p></p>
+        </div>
+
+        <div className="info-selector">
+          {projectTypes.map(itemInfoFunc)}
+        </div>
+      </div>
+    )
+  }
+}
+
+
+ProjectTypeSelector.propTypes = {
+  type: PropTypes.string.isRequired,
+  mappedProjectType: PropTypes.number.isRequired
+}
+const actionCreators = {
+  sliderChangeCreator: (modelName, val) => {
+    return (dispatch) => {
+      // get val from index
+      dispatch(modelActions.change(modelName, projectTypes[val].val))
+    }
+  }
+}
+
+const mapStateToProps = ({newProject}) => ({
+  type: newProject.type,
+  mappedProjectType: _.findIndex(projectTypes, (t) => newProject.type === t.val)
+})
+
+// Merging props so that we can use determine the current
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const props  = Object.assign({}, ownProps, stateProps, dispatchProps, {
+    onSliderChange: (event) => {
+      // handling case where event is fired by clicking on range or div.
+      // the latter provides the index, the former an event
+      const idx = (typeof event !== 'number') ? parseInt(event.target.value) : event
+      props.sliderChangeCreator('newProject.type', idx)
+    }
+  })
+  return props
+}
+
+export default connect(mapStateToProps, actionCreators, mergeProps)(ProjectTypeSelector)
diff --git a/src/projects/create/WorkProjectForm.jsx b/src/projects/create/components/old/WorkProjectForm.jsx
similarity index 86%
rename from src/projects/create/WorkProjectForm.jsx
rename to src/projects/create/components/old/WorkProjectForm.jsx
index 873f5360c..0a72dbb9e 100644
--- a/src/projects/create/WorkProjectForm.jsx
+++ b/src/projects/create/components/old/WorkProjectForm.jsx
@@ -3,9 +3,9 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Form, actions as modelActions} from 'react-redux-form'
-import { clearLoadedProject } from '../../actions/project'
+import { clearLoadedProject } from '../../../actions/project'
 import { withRouter } from 'react-router'
-import { InputFormField, TextareaFormField } from 'appirio-tech-react-components'
+import { TextInputField, InputFormField, TextareaFormField } from 'appirio-tech-react-components'
 
 class WorkProjectForm extends Component {
 
@@ -31,6 +31,14 @@ class WorkProjectForm extends Component {
       <Form model="newProject" onSubmit={ this.handleSubmit }>
         <div className="project-info">
             <h2>Project info</h2>
+              <TextInputField
+                id="name"
+                wrapperClass="row"
+                label="Project Name"
+                placeholder="Enter project name"
+                errorMessage="This is a required field"
+              />
+
 
             <div className="row">
               <InputFormField
diff --git a/src/projects/images/desktop.svg b/src/projects/images/desktop.svg
new file mode 100644
index 000000000..50e4bf352
--- /dev/null
+++ b/src/projects/images/desktop.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="58px" height="52px" viewBox="0 0 58 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>desktop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Create-Project" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Slices" transform="translate(-635.000000, -526.000000)" stroke="#444444" stroke-width="1.5">
+            <g id="desktop" transform="translate(636.000000, 527.000000)">
+                <path d="M51.3445589,34.6153846 L51.3445589,3.84615385 C51.3445589,1.72115385 49.6142256,0 47.4778922,0 L8.81122556,0 C6.67489223,0 4.9445589,1.72115385 4.9445589,3.84615385 L4.9445589,34.6153846" id="Stroke-4881" fill="#FFFFFF"></path>
+                <path d="M51.3445589,34.6153846 L4.9445589,34.6153846 L0.124758898,47.4019231 C-0.348907769,48.6596154 0.584892231,50 1.9343589,50 L54.3547589,50 C55.7042256,50 56.6380256,48.6596154 56.1643589,47.4019231 L51.3445589,34.6153846 L51.3445589,34.6153846 Z" id="Stroke-4880" fill="#FFFFFF"></path>
+                <polygon id="Stroke-4882" points="12.6778922 7.69230769 43.6112256 7.69230769 43.6112256 26.9230769 12.6778922 26.9230769"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/projects/images/divider.png b/src/projects/images/divider.png
new file mode 100644
index 000000000..1204e2ab4
Binary files /dev/null and b/src/projects/images/divider.png differ
diff --git a/src/projects/images/logo-cn-web.svg b/src/projects/images/logo-cn-web.svg
new file mode 100644
index 000000000..aa702db3e
--- /dev/null
+++ b/src/projects/images/logo-cn-web.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="141px" height="20px" viewBox="0 0 141 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>logo-cn-web</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Connect---Logged-Out" transform="translate(-20.000000, -20.000000)">
+            <g id="connect-top-bar">
+                <g id="logo-cn-web" transform="translate(20.000000, 17.000000)">
+                    <g id="topcoder-logo-mark" transform="translate(0.000000, 3.000000)">
+                        <path d="M13.8953189,6.45958968 C7.47820872,5.23993619 1.43161516,5.34495494 0.217240541,8.75902697 C-0.638984393,11.1657713 1.11289024,14.7970247 4.12029187,18.3806305 C5.00720715,19.4373395 6.0333737,19.7742422 6.99746177,19.7670355 C7.8889228,15.0683757 11.4449288,10.0473564 13.8953189,6.45958968 Z" id="segment-1" fill="#26ADE9"></path>
+                        <path d="M28.7127501,10.1095695 C32.0075818,8.69518626 36.4895369,7.27757875 40.803347,6.45825391 C41.0240583,6.68431162 41.241063,6.91610137 41.455035,7.15183191 C37.4535902,2.73958674 32.2653591,0.0193709558 27.3450141,0.0193709558 C22.6878379,0.0193709558 17.7904065,2.45620854 13.8866812,6.45825391 C18.2004914,7.27757875 22.6824465,8.69518626 25.9772782,10.1095695 C26.3941024,10.288696 26.853721,10.481078 27.3450141,10.684924 C27.8363073,10.481078 28.2959259,10.288696 28.7127501,10.1095695 Z" id="segment-2" fill="#60C700"></path>
+                        <path d="M13.8936765,6.46411995 C10.5070571,9.9755741 6.99046653,16.8542052 6.99046653,19.7632221 C8.15886961,19.7632216 9.55321505,19.1650128 10.558911,18.6135553 C15.570342,15.8656165 20.7495611,11.4084308 27.3159922,10.6831679 C23.9815764,9.14051667 17.5445678,6.98345111 13.8936765,6.46411995 Z" id="segment-3" fill="#0B71E6"></path>
+                        <path d="M40.8133377,6.45238763 C47.2163136,5.24036337 53.2414668,5.35168941 54.453446,8.75902697 C55.3096709,11.1657713 53.5577963,14.7970247 50.5503947,18.3806305 C49.7398331,19.3463684 48.8129642,19.7109002 47.9234688,19.7610061 C45.1342751,13.5996253 44.5526276,12.4904754 40.8133377,6.45238763 Z" id="segment-4" fill="#FB7D22"></path>
+                        <path d="M40.8076557,6.45627322 C44.1942751,9.96772737 47.9346277,19.7632221 47.9346277,19.7632221 C46.3184818,19.8352842 44.7478465,18.8802582 44.284969,18.5985384 C37.3351507,14.3686905 33.0107396,11.47513 27.3306029,10.6849326 C30.714338,8.97888295 38.1009114,6.81411472 40.8076557,6.45627322 Z" id="segment-5" fill="#FFF100"></path>
+                    </g>
+                    <text id="connect" font-family="ProximaNova-Light, Proxima Nova" font-size="20" font-weight="300" letter-spacing="1" fill="#FFFFFF">
+                        <tspan x="65" y="20">connect</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/projects/images/phone.svg b/src/projects/images/phone.svg
new file mode 100644
index 000000000..8dae2420b
--- /dev/null
+++ b/src/projects/images/phone.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="35px" height="52px" viewBox="0 0 35 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>phone</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Create-Project" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Slices" transform="translate(-337.000000, -526.000000)" stroke="#444444" stroke-width="1.5">
+            <g id="phone" transform="translate(338.000000, 527.000000)">
+                <path d="M29.7,50 L3.3,50 C1.47675,50 0,48.5083333 0,46.6666667 L0,3.33333333 C0,1.49166667 1.47675,0 3.3,0 L29.7,0 C31.52325,0 33,1.49166667 33,3.33333333 L33,46.6666667 C33,48.5083333 31.52325,50 29.7,50 L29.7,50 Z" id="Stroke-4827" fill="#FFFFFF"></path>
+                <path d="M14.85,43.3333333 C14.85,42.4133333 15.5892,41.6666667 16.5,41.6666667 C17.4108,41.6666667 18.15,42.4133333 18.15,43.3333333 C18.15,44.2533333 17.4108,45 16.5,45 C15.5892,45 14.85,44.2533333 14.85,43.3333333 L14.85,43.3333333 Z" id="Stroke-4828"></path>
+                <path d="M0,36 L33,36" id="Stroke-4846"></path>
+                <path d="M0,8 L33,8" id="Stroke-4847"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/projects/images/slider-bg.png b/src/projects/images/slider-bg.png
new file mode 100644
index 000000000..4403507fd
Binary files /dev/null and b/src/projects/images/slider-bg.png differ
diff --git a/src/projects/images/tablet.svg b/src/projects/images/tablet.svg
new file mode 100644
index 000000000..61b8c55e5
--- /dev/null
+++ b/src/projects/images/tablet.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="45px" height="52px" viewBox="0 0 45 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>tablet</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Create-Project" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Slices" transform="translate(-490.000000, -526.000000)" stroke="#444444" stroke-width="1.5">
+            <g id="tablet" transform="translate(491.000000, 527.000000)">
+                <path d="M39.6923077,50 L3.30769231,50 C1.48019231,50 0,48.5083333 0,46.6666667 L0,3.33333333 C0,1.49166667 1.48019231,0 3.30769231,0 L39.6923077,0 C41.5198077,0 43,1.49166667 43,3.33333333 L43,46.6666667 C43,48.5083333 41.5198077,50 39.6923077,50 L39.6923077,50 Z" id="Stroke-4835" fill="#FFFFFF"></path>
+                <polygon id="Stroke-4836" points="36.3846154 36.6666667 6.61538462 36.6666667 6.61538462 8.33333333 36.3846154 8.33333333"></polygon>
+                <path d="M19.8461538,43.3333333 C19.8461538,42.4133333 20.5870769,41.6666667 21.5,41.6666667 C22.4129231,41.6666667 23.1538462,42.4133333 23.1538462,43.3333333 C23.1538462,44.2533333 22.4129231,45 21.5,45 C20.5870769,45 19.8461538,44.2533333 19.8461538,43.3333333 L19.8461538,43.3333333 Z" id="Stroke-4837"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/projects/images/watch-android.svg b/src/projects/images/watch-android.svg
new file mode 100644
index 000000000..15d1bca73
--- /dev/null
+++ b/src/projects/images/watch-android.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="41px" height="52px" viewBox="0 0 41 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>watch-android</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Create-Project" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Slices" transform="translate(-995.000000, -526.000000)" stroke="#444444" stroke-width="1.5">
+            <g id="watch-android" transform="translate(996.000000, 527.000000)">
+                <polyline id="Stroke-5216" fill="#FFFFFF" points="9.76393443 8.40409836 9.76393443 0 26.157377 0 26.157377 8.40409836"></polyline>
+                <polyline id="Stroke-5218" fill="#FFFFFF" points="26.1663934 41.1655738 26.1663934 49.6188525 9.77295082 49.6188525 9.77295082 41.1639344"></polyline>
+                <polygon id="Stroke-5220" fill="#FFFFFF" points="36.0655738 21.3114754 38.6434426 21.3114754 38.6434426 27.8688525 36.0655738 27.8688525"></polygon>
+                <path d="M0,24.5901639 C0,14.6311475 8.07377049,6.55737705 18.0327869,6.55737705 C27.9918033,6.55737705 36.0655738,14.6311475 36.0655738,24.5901639 C36.0655738,34.5491803 27.9918033,42.6229508 18.0327869,42.6229508 C8.07377049,42.6229508 0,34.5491803 0,24.5901639 L0,24.5901639 Z" id="Stroke-5222" fill="#FFFFFF"></path>
+                <polyline id="Stroke-5226" points="18.0327869 16.3934426 18.0327869 24.5901639 26.2295082 24.5901639"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/projects/images/watch-apple.svg b/src/projects/images/watch-apple.svg
new file mode 100644
index 000000000..32bcbe7e0
--- /dev/null
+++ b/src/projects/images/watch-apple.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="40px" height="52px" viewBox="0 0 40 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>watch-apple</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Create-Project" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Slices" transform="translate(-842.000000, -526.000000)" stroke="#444444" stroke-width="1.60000002">
+            <g id="watch-apple" transform="translate(843.000000, 527.000000)">
+                <polyline id="Stroke-4797" fill="#FFFFFF" points="6.72727273 8.33333333 8.40909091 0 25.2272727 0 26.9090909 8.33333333"></polyline>
+                <polyline id="Stroke-4799" fill="#FFFFFF" points="26.9090909 41.6666667 25.2272727 50 8.40909091 50 6.72727273 41.6666667"></polyline>
+                <path d="M30.2727273,41.6666667 L3.36363636,41.6666667 C1.50522727,41.6666667 0,40.175 0,38.3333333 L0,11.6666667 C0,9.825 1.50522727,8.33333333 3.36363636,8.33333333 L30.2727273,8.33333333 C32.1311364,8.33333333 33.6363636,9.825 33.6363636,11.6666667 L33.6363636,38.3333333 C33.6363636,40.175 32.1311364,41.6666667 30.2727273,41.6666667 L30.2727273,41.6666667 Z" id="Stroke-4801" fill="#FFFFFF"></path>
+                <polyline id="Stroke-4803" points="34 15 37.3636364 15 37.3636364 21.6666667 34 21.6666667"></polyline>
+                <polyline id="Stroke-4803" points="34 25 35 25 35 36 34 36"></polyline>
+                <polyline id="Stroke-4821" points="16.8181818 16.6666667 16.8181818 25 25.2272727 25"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/projects/images/x-mark-big.svg b/src/projects/images/x-mark-big.svg
new file mode 100644
index 000000000..9ad2a3fbb
--- /dev/null
+++ b/src/projects/images/x-mark-big.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>x-mark-big</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Create-Project" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Slices" transform="translate(-1129.000000, -100.000000)" fill="#DCDCE0">
+            <polygon id="x-mark-big" points="1140.3 100 1136.1 104.3 1131.9 100 1129 102.9 1133.3 107.1 1129 111.3 1131.9 114.2 1136.1 109.9 1140.3 114.2 1143.2 111.3 1138.9 107.1 1143.2 102.9"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/projects/reducers/project.js b/src/projects/reducers/project.js
index 2b1e6fcce..b58460461 100644
--- a/src/projects/reducers/project.js
+++ b/src/projects/reducers/project.js
@@ -67,11 +67,11 @@ export const newProject = modelReducer('newProject', {
   utm: {
     code: ''
   },
-  type: '',
+  type: 'visual_design',
   details: {
     version: 'v2',
     devices: ['phone'],
-    appType: ''
+    appType: 'ios'
   }
 })
 
diff --git a/src/projects/routes.jsx b/src/projects/routes.jsx
index e61540ec1..66425e68b 100644
--- a/src/projects/routes.jsx
+++ b/src/projects/routes.jsx
@@ -10,7 +10,7 @@ import Dashboard     from './detail/components/Dashboard'
 import Specification from './detail/components/Specification'
 import ProjectsToolBar from './list/components/ProjectsToolBar/ProjectsToolBar'
 import ProjectToolBar from './detail/components/ProjectToolBar/ProjectToolBar'
-import CreateProjectWizard from './create/CreateView'
+import CreateProjectWizard from './create/components/CreateView'
 import { requiresAuthentication } from '../components/AuthenticatedComponent'