diff --git a/.circleci/config.yml b/.circleci/config.yml
index 1e58d6ae06..f7a84333d5 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -260,7 +260,7 @@ workflows:
             branches:
               only:
                 - develop
-                - listing-develop-sync
+                - fix_for_job_descriptionn
       # Production builds are exectuted 
       # when PR is merged to the master
       # Don't change anything in this configuration
diff --git a/package.json b/package.json
index eb006f35d7..d67459d508 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
     "tc-accounts": "git+https://github.com/appirio-tech/accounts-app.git#dev",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.0.8",
+    "topcoder-react-lib": "1000.22.14",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",
diff --git a/src/shared/components/Editor/index.jsx b/src/shared/components/Editor/index.jsx
index 40762b3513..58cc02b467 100644
--- a/src/shared/components/Editor/index.jsx
+++ b/src/shared/components/Editor/index.jsx
@@ -46,30 +46,27 @@ export default class EditorWrapper extends React.Component {
     this.customPlugin = createCustomPlugin({
       editor: this,
     });
+
+    this.onBeforeInput = this.onBeforeInput.bind(this);
+    this.onPasteText = this.onPasteText.bind(this);
   }
 
   componentDidMount() {
     const { connector, initialContent } = this.props;
     connector.addEditor(this);
-    if (initialContent) {
-      let editorState = convertFromHTML(initialContent);
-      editorState = ContentState.createFromBlockArray(
-        editorState.contentBlocks,
-        editorState.entityMap,
-      );
-      editorState = EditorState.createWithContent(editorState);
-      this.initialContent = editorState.getCurrentContent();
-      setImmediate(() => this.setState({ editor: editorState }));
-    }
+    this.setInitialContent(initialContent);
   }
 
-  componentWillReceiveProps({ connector, id }) {
-    const { connector: prevConnector } = this.props;
+  componentWillReceiveProps({ connector, id, initialContent }) {
+    const { connector: prevConnector, initialContent: prevInitialContent } = this.props;
     this.id = id;
     if (connector !== prevConnector) {
       if (prevConnector) prevConnector.removeEditor(this);
       if (connector) connector.addEditor(this);
     }
+    if (initialContent !== prevInitialContent) {
+      this.setInitialContent(initialContent);
+    }
   }
 
   componentWillUnmount() {
@@ -77,6 +74,41 @@ export default class EditorWrapper extends React.Component {
     connector.removeEditor(this);
   }
 
+  onBeforeInput() { // eslint-disable-line consistent-return
+    const { maxLength } = this.props;
+    const { editor: editorState } = this.state;
+    if (maxLength !== -1 && maxLength <= editorState.getCurrentContent().getPlainText('').length) {
+      return 'handled';
+    }
+  }
+
+  onPasteText(text) { // eslint-disable-line consistent-return
+    const { maxLength } = this.props;
+    const { editor: editorState } = this.state;
+    if (maxLength !== -1 && maxLength <= text.length + editorState.getCurrentContent().getPlainText('').length) {
+      return 'handled';
+    }
+  }
+
+  setInitialContent(content) {
+    if (content) {
+      let editorState = convertFromHTML(content);
+      if (editorState.contentBlocks) {
+        editorState = ContentState.createFromBlockArray(
+          editorState.contentBlocks,
+          editorState.entityMap,
+        );
+        editorState = EditorState.createWithContent(editorState);
+        this.initialContent = editorState.getCurrentContent();
+        setImmediate(() => this.setState({ editor: editorState }));
+      }
+    } else {
+      let { editor: editorState } = this.state;
+      editorState = EditorState.push(editorState, ContentState.createFromText(''));
+      this.setState({ editor: editorState });
+    }
+  }
+
   getHtml() {
     const { editor } = this.state;
     return editorStateToHTML(editor.getCurrentContent());
@@ -98,10 +130,9 @@ export default class EditorWrapper extends React.Component {
    * @param {String} type The new block style
    */
   applyBlockStyle(type) {
-    const { editor } = this.state;
-    let editorState = editor;
+    let { editor: editorState } = this.state;
     editorState = RichUtils.toggleBlockType(editorState, type);
-    this.setState({ editorState }); // eslint-disable-line
+    this.setState({ editor: editorState }); // eslint-disable-line
   }
 
   /**
@@ -231,13 +262,16 @@ export default class EditorWrapper extends React.Component {
   }
 
   render() {
-    const { connector, theme } = this.props;
+    const { connector, theme, placeholder } = this.props;
 
     const st = this.state;
 
     let containerStyles = style.container;
     if (st.editor.getSelection().getHasFocus()) {
-      containerStyles += ` ${style.focused}`;
+      containerStyles += ` ${style.focused} is-focused`;
+    }
+    if (st.editor.getCurrentContent().hasText() || /<ol>|<ul>/.test(this.getHtml())) {
+      containerStyles += ' has-user-input';
     }
     if (theme.container) {
       containerStyles += ` ${theme.container}`;
@@ -253,6 +287,7 @@ export default class EditorWrapper extends React.Component {
         tabIndex={0}
       >
         <Editor
+          placeholder={placeholder}
           editorState={st.editor}
           handleKeyCommand={(command, state) => {
             const editorState = RichUtils.handleKeyCommand(state, command);
@@ -283,6 +318,8 @@ export default class EditorWrapper extends React.Component {
           ]}
           ref={(node) => { this.node = node; }}
           spellCheck
+          handleBeforeInput={this.onBeforeInput}
+          handlePastedText={this.onPasteText}
         />
       </div>
     );
@@ -292,8 +329,10 @@ export default class EditorWrapper extends React.Component {
 EditorWrapper.defaultProps = {
   connector: new Connector(),
   id: null,
-  initialContent: null,
+  initialContent: '',
   theme: {},
+  placeholder: '',
+  maxLength: -1,
 };
 
 EditorWrapper.propTypes = {
@@ -301,4 +340,6 @@ EditorWrapper.propTypes = {
   id: PT.string,
   initialContent: PT.string,
   theme: PT.shape(),
+  placeholder: PT.string,
+  maxLength: PT.number,
 };
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/_mixin.scss b/src/shared/components/Settings/Profile/Work/List/Item/_mixin.scss
new file mode 100644
index 0000000000..806f6df3b6
--- /dev/null
+++ b/src/shared/components/Settings/Profile/Work/List/Item/_mixin.scss
@@ -0,0 +1,42 @@
+@import "~styles/mixins";
+
+@mixin html-content-style() {
+  @include roboto-regular;
+
+  font-size: 15px;
+  color: #262628;
+
+  em {
+    font-style: italic;
+  }
+
+  p {
+    margin: 7px 0;
+    line-height: 25px;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul,
+  ol {
+    margin: 0 0 0 25px;
+
+    li {
+      min-height: auto;
+      line-height: 20px;
+      padding: 0 0 0 12px;
+
+      &:last-child {
+        border: 0;
+      }
+    }
+  }
+
+  @content;
+}
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/index.jsx b/src/shared/components/Settings/Profile/Work/List/Item/index.jsx
index a745a2fe6d..8438aed3b1 100644
--- a/src/shared/components/Settings/Profile/Work/List/Item/index.jsx
+++ b/src/shared/components/Settings/Profile/Work/List/Item/index.jsx
@@ -7,6 +7,7 @@ import PT from 'prop-types';
 import ReactSVG from 'react-svg';
 import moment from 'moment';
 import { isomorphy } from 'topcoder-react-utils';
+import { isEmpty as isDateEmpty } from 'utils/settings';
 
 import './styles.scss';
 
@@ -23,8 +24,14 @@ export default function Item(props) {
     onEditItem,
   } = props;
 
+  const {
+    jobDescription,
+    technologies,
+    achievements,
+  } = work;
+
   const hasSecondLine = () => {
-    if (_.isEmpty(work.timePeriodFrom) && _.isEmpty(work.timePeriodTo)
+    if (isDateEmpty(work.timePeriodFrom) && isDateEmpty(work.timePeriodTo)
       && _.isEmpty(work.position) && !work.working) {
       return false;
     }
@@ -45,11 +52,11 @@ export default function Item(props) {
             { `${work.company}${_.isEmpty(work.industry) ? '' : ` | ${work.industry}`}${_.isEmpty(work.cityTown) ? '' : ` | ${work.cityTown}`}` }
           </div>
           <div styleName="parameter-second-line">
-            { `${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`} ${!_.isEmpty(work.position) && (!_.isEmpty(work.timePeriodTo) || !_.isEmpty(work.timePeriodFrom)) ? ' | ' : ''}${!_.isEmpty(work.position) ? `${work.position}` : ''}` }
+            { `${!isDateEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!isDateEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`} ${!_.isEmpty(work.position) && (!isDateEmpty(work.timePeriodTo) || !isDateEmpty(work.timePeriodFrom)) ? ' | ' : ''}${!_.isEmpty(work.position) ? `${work.position}` : ''}` }
           </div>
           <div styleName="parameter-second-line-mobile">
             <p>
-              {`${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`}`}
+              {`${!isDateEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!isDateEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`}`}
             </p>
             <p>
               {`${!_.isEmpty(work.position) ? `${work.position}` : ''}`}
@@ -83,6 +90,30 @@ export default function Item(props) {
           </p>
         </a>
       </div>
+      { !_.isEmpty(jobDescription)
+        && (
+          <div styleName="job-description">
+            <h4 styleName="title">Job Description</h4>
+            <div styleName="html-content" dangerouslySetInnerHTML={{ __html: jobDescription /* eslint-disable-line react/no-danger */ }} />
+          </div>
+        )
+      }
+      { !_.isEmpty(technologies)
+        && (
+          <div styleName="technologies">
+            <h4 styleName="title">Technologies</h4>
+            <div>{technologies.map(item => item.name).join(', ')}</div>
+          </div>
+        )
+      }
+      { !_.isEmpty(achievements)
+        && (
+          <div styleName="achievements">
+            <h4 styleName="title">Outputs and Achievements Within the Role</h4>
+            <div styleName="html-content" dangerouslySetInnerHTML={{ __html: achievements /* eslint-disable-line react/no-danger */ }} />
+          </div>
+        )
+      }
     </div>
   );
 }
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss b/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
index d419082362..5b2ac9f208 100644
--- a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
@@ -1,8 +1,10 @@
 @import "../../../../style";
+@import './mixin';
 
 .container {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-items: center;
   justify-content: space-between;
   height: 100%;
@@ -151,3 +153,50 @@
     }
   }
 }
+
+.operation-container + div {
+  margin-top: 15px;
+  padding-top: 20px;
+  border-top: 1px solid #ededf2;
+}
+
+.job-description,
+.technologies,
+.achievements {
+  @include roboto-regular;
+
+  width: 100%;
+  margin: 0 0 20px;
+  margin-left: 66px;
+  font-size: 15px;
+  color: #262628;
+
+  .title {
+    @include roboto-medium;
+
+    line-height: 25px;
+    margin-bottom: 4px;
+  }
+}
+
+.technologies {
+  .title {
+    margin: 0;
+    line-height: 1;
+  }
+
+  div {
+    line-height: 25px;
+  }
+}
+
+.achievements {
+  margin-bottom: 5px;
+}
+
+.job-description,
+.achievements {
+  .html-content {
+    @include html-content-style;
+  }
+}
diff --git a/src/shared/components/Settings/Profile/Work/Toolbar/index.jsx b/src/shared/components/Settings/Profile/Work/Toolbar/index.jsx
new file mode 100644
index 0000000000..e94232e7d9
--- /dev/null
+++ b/src/shared/components/Settings/Profile/Work/Toolbar/index.jsx
@@ -0,0 +1,156 @@
+import React from 'react';
+import PT from 'prop-types';
+import Connector from 'components/Editor/Connector';
+import { RichUtils } from 'draft-js';
+
+import './style.scss';
+
+export default class Toolbar extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editor: null,
+      bold: false,
+      italic: false,
+      underline: false,
+      unorderedList: false,
+      orderedList: false,
+      hidden: true,
+    };
+
+    this.onClickBoldButton = this.onClickBoldButton.bind(this);
+    this.onClickItalicButton = this.onClickItalicButton.bind(this);
+    this.onClickUnderlineButton = this.onClickUnderlineButton.bind(this);
+    this.onClickUnorderedListButton = this.onClickUnorderedListButton.bind(this);
+    this.onClickOrderedListButton = this.onClickOrderedListButton.bind(this);
+  }
+
+  componentDidMount() {
+    const { connector } = this.props;
+    connector.setToolbar(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { connector: prevConnector } = this.props;
+    const { connector: newConnector } = nextProps;
+
+    if (newConnector !== prevConnector) {
+      if (prevConnector) prevConnector.setToolbar(null);
+      if (newConnector) newConnector.setToolbar(this);
+    }
+  }
+
+  componentWillUnmount() {
+    const { connector } = this.props;
+    connector.setToolbar(null);
+  }
+
+  onClickBoldButton(event) {
+    event.preventDefault();
+    const { editor } = this.state;
+    const newStyle = editor.toggleInlineStyle('BOLD');
+    this.setState({ bold: newStyle.has('BOLD') });
+  }
+
+  onClickItalicButton(event) {
+    event.preventDefault();
+    const { editor } = this.state;
+    const newStyle = editor.toggleInlineStyle('ITALIC');
+    this.setState({ italic: newStyle.has('ITALIC') });
+  }
+
+  onClickUnderlineButton(event) {
+    event.preventDefault();
+    const { editor } = this.state;
+    const newStyle = editor.toggleInlineStyle('UNDERLINE');
+    this.setState({ underline: newStyle.has('UNDERLINE') });
+  }
+
+  onClickUnorderedListButton(event) {
+    event.preventDefault();
+    const { editor, unorderedList: prevUnorderedList } = this.state;
+    this.setState({ unorderedList: !prevUnorderedList, orderedList: false }, () => {
+      const { unorderedList } = this.state;
+      if (unorderedList) {
+        editor.applyBlockStyle('unordered-list-item');
+      } else {
+        editor.applyBlockStyle('unstyled');
+      }
+    });
+  }
+
+  onClickOrderedListButton(event) {
+    event.preventDefault();
+    const { editor, orderedList: prevOrderedList } = this.state;
+    this.setState({ unorderedList: false, orderedList: !prevOrderedList }, () => {
+      const { orderedList } = this.state;
+      if (orderedList) {
+        editor.applyBlockStyle('ordered-list-item');
+      } else {
+        editor.applyBlockStyle('unstyled');
+      }
+    });
+  }
+
+  onFocusedEditorChanged(newState) {
+    const { connector, onEditorChange } = this.props;
+    const editor = connector.focusedEditor;
+    if (editor) {
+      const inlineStyle = newState.getCurrentInlineStyle();
+      const block = RichUtils.getCurrentBlockType(newState);
+      this.setState({
+        editor,
+        bold: inlineStyle.has('BOLD'),
+        italic: inlineStyle.has('ITALIC'),
+        underline: inlineStyle.has('UNDERLINE'),
+        unorderedList: block === 'unordered-list-item',
+        orderedList: block === 'ordered-list-item',
+        hidden: false,
+      }, () => {
+        onEditorChange(editor);
+      });
+    } else {
+      this.setState({
+        bold: false,
+        italic: false,
+        underline: false,
+        unorderedList: false,
+        orderedList: false,
+        hidden: true,
+      });
+    }
+  }
+
+  render() {
+    const {
+      hidden,
+      bold,
+      italic,
+      underline,
+      orderedList,
+      unorderedList,
+    } = this.state;
+
+    return (
+      <div styleName="container" style={{ display: hidden ? 'none' : 'flex' }}>
+        <button type="button" onMouseDown={this.onClickBoldButton} styleName={bold ? 'is-pressed' : ''}>B</button>
+        <button type="button" onMouseDown={this.onClickItalicButton} styleName={italic ? 'is-pressed' : ''}>I</button>
+        <button type="button" onMouseDown={this.onClickUnderlineButton} styleName={underline ? 'is-pressed' : ''}>U</button>
+        <span styleName="separator" />
+        <button type="button" onMouseDown={this.onClickOrderedListButton} styleName={orderedList ? 'is-pressed' : ''}>OL</button>
+        <button type="button" onMouseDown={this.onClickUnorderedListButton} styleName={unorderedList ? 'is-pressed' : ''}>UL</button>
+      </div>
+    );
+  }
+}
+
+Toolbar.defaultProps = {
+  connector: new Connector(),
+  onEditorChange: () => {},
+};
+
+Toolbar.propTypes = {
+  connector: PT.instanceOf(Connector),
+  onEditorChange: PT.func,
+};
diff --git a/src/shared/components/Settings/Profile/Work/Toolbar/style.scss b/src/shared/components/Settings/Profile/Work/Toolbar/style.scss
new file mode 100644
index 0000000000..65f5e6a113
--- /dev/null
+++ b/src/shared/components/Settings/Profile/Work/Toolbar/style.scss
@@ -0,0 +1,37 @@
+@import "~styles/mixins";
+
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  background: $tc-gray-neutral-light;
+  border: 1px solid #c3c3c8;
+  border-radius: 4px 4px 0 0;
+
+  button {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    margin: 0 13px;
+    padding: 0;
+    font-size: 13px;
+    font-weight: bold;
+    color: $tc-gray-80;
+    text-align: center;
+    appearance: none;
+    background: none;
+    border: 0;
+
+    &.is-pressed {
+      box-shadow: 0 0 0 1px #c3c3c8;
+    }
+  }
+
+  .separator {
+    display: block;
+    width: 1px;
+    height: 20px;
+    background: $tc-gray-80;
+  }
+}
diff --git a/src/shared/components/Settings/Profile/Work/index.jsx b/src/shared/components/Settings/Profile/Work/index.jsx
index 0bbfa631bf..4789b4c880 100644
--- a/src/shared/components/Settings/Profile/Work/index.jsx
+++ b/src/shared/components/Settings/Profile/Work/index.jsx
@@ -14,9 +14,13 @@ import ConsentComponent from 'components/Settings/ConsentComponent';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
 import DatePicker from 'components/challenge-listing/Filters/DatePicker';
 import ErrorMessage from 'components/Settings/ErrorMessage';
-import { validateStartDate, validateEndDate } from 'utils/settings';
+import { validateStartDate, validateEndDate, isEmpty as isDateEmpty } from 'utils/settings';
+import Connector from 'components/Editor/Connector';
+import Select from 'components/Select';
+import Editor from 'components/Editor';
 import ConfirmationModal from '../../CofirmationModal';
 import WorkList from './List';
+import Toolbar from './Toolbar';
 
 import './styles.scss';
 
@@ -34,6 +38,9 @@ export default class Work extends ConsentComponent {
     this.updatePredicate = this.updatePredicate.bind(this);
     this.onUpdateDate = this.onUpdateDate.bind(this);
     this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
+    this.onUpdateJobDescription = this.onUpdateJobDescription.bind(this);
+    this.onUpdateAchievements = this.onUpdateAchievements.bind(this);
+    this.onUpdateTechnologies = this.onUpdateTechnologies.bind(this);
 
     const { userTraits } = props;
     this.state = {
@@ -54,6 +61,14 @@ export default class Work extends ConsentComponent {
         timePeriodTo: '',
         industry: '',
         working: false,
+        jobDescription: '',
+        achievements: '',
+        technologies: [],
+        initialJobDescription: '',
+        initialAchievements: '',
+        numJobDescription: 0,
+        numAchievements: 0,
+        numTechnologies: 0,
       },
       isMobileView: false,
       screenSM: 767,
@@ -61,6 +76,11 @@ export default class Work extends ConsentComponent {
       indexNo: null,
       showConfirmation: false,
     };
+
+    this.connectorJobDescription = new Connector();
+    this.connectorAchievements = new Connector();
+    this.connectorJobDescriptionMobile = new Connector();
+    this.connectorAchievementsMobile = new Connector();
   }
 
   componentDidMount() {
@@ -89,6 +109,14 @@ export default class Work extends ConsentComponent {
         timePeriodTo: '',
         industry: '',
         working: false,
+        jobDescription: '',
+        achievements: '',
+        technologies: [],
+        initialJobDescription: '',
+        initialAchievements: '',
+        numJobDescription: 0,
+        numAchievements: 0,
+        numTechnologies: 0,
       },
     });
   }
@@ -151,7 +179,7 @@ export default class Work extends ConsentComponent {
     if (date) {
       const { newWork: oldWork } = this.state;
       const newWork = { ...oldWork };
-      newWork[timePeriod] = date;
+      newWork[timePeriod] = date.toISOString();
       this.setState({ newWork, isSubmit: false });
     }
   }
@@ -205,10 +233,34 @@ export default class Work extends ConsentComponent {
         company: workTrait.traits.data[indexNo].company,
         position: _.isEmpty(workTrait.traits.data[indexNo].position) ? '' : workTrait.traits.data[indexNo].position,
         cityTown: _.isEmpty(workTrait.traits.data[indexNo].cityTown) ? '' : workTrait.traits.data[indexNo].cityTown,
-        timePeriodFrom: _.isEmpty(workTrait.traits.data[indexNo].timePeriodFrom) ? '' : workTrait.traits.data[indexNo].timePeriodFrom,
-        timePeriodTo: _.isEmpty(workTrait.traits.data[indexNo].timePeriodTo) ? '' : workTrait.traits.data[indexNo].timePeriodTo,
+        timePeriodFrom: isDateEmpty(workTrait.traits.data[indexNo].timePeriodFrom) ? '' : workTrait.traits.data[indexNo].timePeriodFrom,
+        timePeriodTo: isDateEmpty(workTrait.traits.data[indexNo].timePeriodTo) ? '' : workTrait.traits.data[indexNo].timePeriodTo,
         industry: _.isEmpty(workTrait.traits.data[indexNo].industry) ? '' : workTrait.traits.data[indexNo].industry,
         working: workTrait.traits.data[indexNo].working,
+        jobDescription: _.isEmpty(workTrait.traits.data[indexNo].jobDescription)
+          ? ''
+          : workTrait.traits.data[indexNo].jobDescription,
+        achievements: _.isEmpty(workTrait.traits.data[indexNo].achievements)
+          ? ''
+          : workTrait.traits.data[indexNo].achievements,
+        technologies: _.isEmpty(workTrait.traits.data[indexNo].technologies)
+          ? []
+          : workTrait.traits.data[indexNo].technologies,
+        initialJobDescription: _.isEmpty(workTrait.traits.data[indexNo].jobDescription)
+          ? ''
+          : workTrait.traits.data[indexNo].jobDescription,
+        initialAchievements: _.isEmpty(workTrait.traits.data[indexNo].achievements)
+          ? ''
+          : workTrait.traits.data[indexNo].achievements,
+        numJobDescription: _.isEmpty(workTrait.traits.data[indexNo].jobDescription)
+          ? 0
+          : workTrait.traits.data[indexNo].jobDescription.length,
+        numAchievements: _.isEmpty(workTrait.traits.data[indexNo].achievements)
+          ? 0
+          : workTrait.traits.data[indexNo].achievements.length,
+        numTechnologies: _.isEmpty(workTrait.traits.data[indexNo].technologies)
+          ? 0
+          : workTrait.traits.data[indexNo].technologies.length,
       },
       isEdit: true,
       indexNo,
@@ -247,12 +299,12 @@ export default class Work extends ConsentComponent {
     if (_.isEmpty(work.cityTown)) {
       delete work.cityTown;
     }
-    if (_.isEmpty(work.timePeriodFrom)) {
+    if (isDateEmpty(work.timePeriodFrom)) {
       delete work.timePeriodFrom;
     } else {
       work.timePeriodFrom = new Date(work.timePeriodFrom).getTime();
     }
-    if (_.isEmpty(work.timePeriodTo)) {
+    if (isDateEmpty(work.timePeriodTo)) {
       delete work.timePeriodTo;
     } else {
       work.timePeriodTo = new Date(work.timePeriodTo).getTime();
@@ -260,6 +312,20 @@ export default class Work extends ConsentComponent {
     if (_.isEmpty(work.industry)) {
       delete work.industry;
     }
+    if (_.isEmpty(work.jobDescription)) {
+      delete work.jobDescription;
+    }
+    if (_.isEmpty(work.achievements)) {
+      delete work.achievements;
+    }
+    if (_.isEmpty(work.technologies)) {
+      delete work.technologies;
+    }
+    delete work.initialJobDescription;
+    delete work.initialAchievements;
+    delete work.numJobDescription;
+    delete work.numAchievements;
+    delete work.numTechnologies;
 
     if (workTrait.traits && workTrait.traits.data.length > 0) {
       const newWorkTrait = _.cloneDeep(workTrait);
@@ -353,6 +419,14 @@ export default class Work extends ConsentComponent {
           timePeriodTo: '',
           industry: '',
           working: false,
+          jobDescription: '',
+          achievements: '',
+          technologies: [],
+          initialJobDescription: '',
+          initialAchievements: '',
+          numJobDescription: 0,
+          numAchievements: 0,
+          numTechnologies: 0,
         },
         formInvalid: false,
         startDateInvalid: false,
@@ -364,9 +438,39 @@ export default class Work extends ConsentComponent {
     }
   }
 
+  onUpdateJobDescription(editor) {
+    const html = editor.getHtml();
+    const length = editor.state.editor.getCurrentContent().getPlainText('').length; // eslint-disable-line prefer-destructuring
+    const { newWork: oldWork } = this.state;
+
+    const newWork = { ...oldWork, jobDescription: html, numJobDescription: length };
+    this.setState({ newWork, isSubmit: false, endDateDisabled: newWork.working });
+  }
+
+  onUpdateAchievements(editor) {
+    const { newWork: oldWork } = this.state;
+    const newWork = { ...oldWork, achievements: editor.getHtml(), numAchievements: editor.state.editor.getCurrentContent().getPlainText('').length };
+    this.setState({ newWork, isSubmit: false, endDateDisabled: newWork.working });
+  }
+
+  onUpdateTechnologies(value) {
+    if (value.length > 3) {
+      value.shift();
+    }
+
+    const { newWork: oldWork } = this.state;
+    const newWork = {
+      ...oldWork,
+      technologies: value.map(val => ({ id: val.id, name: val.name })),
+      numTechnologies: value.length,
+    };
+    this.setState({ newWork, isSubmit: false, endDateDisabled: newWork.working });
+  }
+
   render() {
     const {
       settingsUI,
+      lookupData,
     } = this.props;
     const {
       workTrait,
@@ -388,6 +492,16 @@ export default class Work extends ConsentComponent {
     const workItems = workTrait.traits
       ? workTrait.traits.data.slice() : [];
     const { newWork } = this.state;
+    const {
+      initialJobDescription,
+      initialAchievements,
+      technologies,
+      numJobDescription,
+      numTechnologies,
+      numAchievements,
+    } = newWork;
+    const techTags = lookupData.technologies
+      .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
 
     return (
       <div styleName={containerStyle}>
@@ -493,7 +607,11 @@ export default class Work extends ConsentComponent {
                     readOnly
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodFrom}
+                    date={
+                      isDateEmpty(newWork.timePeriodFrom)
+                        ? null
+                        : moment(newWork.timePeriodFrom)
+                    }
                     id="date-from1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
                     placeholder="dd/mm/yyyy"
@@ -521,7 +639,7 @@ export default class Work extends ConsentComponent {
                     disabled={endDateDisabled}
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodTo}
+                    date={isDateEmpty(newWork.timePeriodTo) ? null : moment(newWork.timePeriodTo)}
                     id="date-to1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
                     placeholder="dd/mm/yyyy"
@@ -537,13 +655,12 @@ export default class Work extends ConsentComponent {
                 </div>
               </div>
               <div styleName="row">
-                <div styleName="field col-long-text">
-                  <label htmlFor="working">
+                <div styleName="field col-long-text">&nbsp;</div>
+                <div styleName="field col-2">
+                  <label htmlFor="working" styleName="label-checkbox-working">
                     I am currently working in this role
                     <input type="hidden" />
                   </label>
-                </div>
-                <div styleName="field col-2">
                   <div styleName="tc-checkbox">
                     <input
                       name="working"
@@ -561,6 +678,87 @@ export default class Work extends ConsentComponent {
                   </div>
                 </div>
               </div>
+              <div styleName="row">
+                <div styleName="field col-long-text align-top">
+                  <label htmlFor="jobDescription">
+                    Job Description
+                    <input type="hidden" />
+                  </label>
+                </div>
+                <div styleName="field col-2">
+                  <span styleName="char-num">{numJobDescription} / 400</span>
+                  <div styleName="editor-outer-container">
+                    <div styleName="toolbar-wrapper">
+                      <Toolbar
+                        connector={this.connectorJobDescription}
+                        onEditorChange={this.onUpdateJobDescription}
+                      />
+                    </div>
+                    <Editor
+                      connector={this.connectorJobDescription}
+                      theme={{ container: 'editor-container' }}
+                      placeholder="Job description"
+                      maxLength={400}
+                      initialContent={initialJobDescription}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div styleName="row">
+                <div styleName="field col-long-text align-top">
+                  <label styleName="label-achievements" htmlFor="achievements">
+                    Outputs and Achievements Within the Role
+                    <input type="hidden" />
+                  </label>
+                </div>
+                <div styleName="field col-2">
+                  <span styleName="char-num">{numAchievements} / 400</span>
+                  <div styleName="editor-outer-container">
+                    <div styleName="toolbar-wrapper">
+                      <Toolbar
+                        connector={this.connectorAchievements}
+                        onEditorChange={this.onUpdateAchievements}
+                      />
+                    </div>
+                    <Editor
+                      connector={this.connectorAchievements}
+                      theme={{ container: 'editor-container' }}
+                      placeholder="Outputs and achievements within the role"
+                      maxLength={400}
+                      initialContent={initialAchievements}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div styleName="row">
+                <div styleName="field col-long-text">
+                  <label htmlFor="technologies ">
+                    Technologies
+                    <input type="hidden" />
+                  </label>
+                </div>
+                <div styleName="field col-2">
+                  <span styleName="char-num">{numTechnologies} / 3 technologies</span>
+                  <div styleName="select-technologies-container">
+                    <Select
+                      name="technologies"
+                      multi
+                      options={techTags}
+                      value={technologies}
+                      onChange={this.onUpdateTechnologies}
+                      labelKey="name"
+                      valueKey="id"
+                      className="select-technologies"
+                      clearable={false}
+                      placeholder="Select technologies from list"
+                      joinValues
+                      removeSelected={false}
+                      searchable={false}
+                      valueComponent={valueProps => (<span styleName="selected-value-text">{valueProps.value.name}</span>)}
+                    />
+                  </div>
+                </div>
+              </div>
             </form>
             <div styleName="button-container">
               <div styleName="button-save">
@@ -644,7 +842,11 @@ export default class Work extends ConsentComponent {
                     readOnly
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodFrom}
+                    date={
+                      isDateEmpty(newWork.timePeriodFrom)
+                        ? null
+                        : moment(newWork.timePeriodFrom)
+                    }
                     id="date-from2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
                     placeholder="dd/mm/yyyy"
@@ -668,7 +870,7 @@ export default class Work extends ConsentComponent {
                     disabled={endDateDisabled}
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodTo}
+                    date={isDateEmpty(newWork.timePeriodTo) ? null : moment(newWork.timePeriodTo)}
                     id="date-to2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
                     placeholder="dd/mm/yyyy"
@@ -702,6 +904,81 @@ export default class Work extends ConsentComponent {
                   </div>
                 </div>
               </div>
+              <div styleName="row">
+                <div styleName="field col-long-text col-checkbox-sibling-next">
+                  <label htmlFor="jobDescription">
+                    Job Description
+                    <input type="hidden" />
+                  </label>
+                  <span styleName="char-num">{numJobDescription} / 400</span>
+                  <div styleName="editor-outer-container">
+                    <div styleName="toolbar-wrapper">
+                      <Toolbar
+                        connector={this.connectorJobDescriptionMobile}
+                        onEditorChange={this.onUpdateJobDescription}
+                      />
+                    </div>
+                    <Editor
+                      connector={this.connectorJobDescriptionMobile}
+                      theme={{ container: 'editor-container' }}
+                      placeholder="Job description"
+                      maxLength={400}
+                      initialContent={initialJobDescription}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div styleName="row">
+                <div styleName="field col-long-text">
+                  <label styleName="label-achievements" htmlFor="achievements">
+                    Outputs and Achievements Within the Role
+                    <input type="hidden" />
+                  </label>
+                  <span styleName="char-num">{numAchievements} / 400</span>
+                  <div styleName="editor-outer-container">
+                    <div styleName="toolbar-wrapper">
+                      <Toolbar
+                        connector={this.connectorAchievementsMobile}
+                        onEditorChange={this.onUpdateAchievements}
+                      />
+                    </div>
+                    <Editor
+                      connector={this.connectorAchievementsMobile}
+                      theme={{ container: 'editor-container' }}
+                      placeholder="Outputs and achievements within the role"
+                      maxLength={400}
+                      initialContent={initialAchievements}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div styleName="row">
+                <div styleName="field col-long-text">
+                  <label htmlFor="technologies ">
+                    Technologies
+                    <input type="hidden" />
+                  </label>
+                  <span styleName="char-num">{numTechnologies} / 3 technologies</span>
+                  <div styleName="select-technologies-container">
+                    <Select
+                      name="technologies"
+                      multi
+                      options={techTags}
+                      value={technologies}
+                      onChange={this.onUpdateTechnologies}
+                      labelKey="name"
+                      valueKey="id"
+                      className="select-technologies"
+                      clearable={false}
+                      placeholder="Select technologies from list"
+                      joinValues
+                      removeSelected={false}
+                      searchable={false}
+                      valueComponent={valueProps => (<span styleName="selected-value-text">{valueProps.value.name}</span>)}
+                    />
+                  </div>
+                </div>
+              </div>
             </form>
             <div styleName="button-container">
               <div styleName="button-save">
diff --git a/src/shared/components/Settings/Profile/Work/styles.scss b/src/shared/components/Settings/Profile/Work/styles.scss
index 937adc83e5..a158aedc30 100644
--- a/src/shared/components/Settings/Profile/Work/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/styles.scss
@@ -1,4 +1,5 @@
 @import "../../style";
+@import "./List//Item/mixin";
 
 $checkbox-size: $base-unit * 4;
 $checkbox-bg-empty: $tc-gray-neutral-light;
@@ -140,6 +141,10 @@ label {
     user-select: none;
     cursor: pointer;
   }
+
+  .row .field.align-top {
+    margin-top: 25px;
+  }
 }
 
 .form-container-mobile {
@@ -283,6 +288,14 @@ label {
           top: 25px;
         }
       }
+
+      &.col-checkbox-sibling-next {
+        padding-top: 30px;
+
+        @include upto-sm {
+          padding-top: 55px;
+        }
+      }
     }
   }
 
@@ -390,6 +403,163 @@ label {
   }
 }
 
+.editor-outer-container {
+  position: relative;
+
+  @include upto-sm {
+    margin-top: 5px;
+  }
+
+  .toolbar-wrapper {
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+  }
+
+  :global {
+    .editor-container {
+      height: 254px;
+      margin: 0;
+      padding: 0;
+      background: $tc-white;
+      border: 1px solid #c3c3c8;
+      border-radius: 4px;
+    }
+
+    .DraftEditor-root {
+      margin-top: 0;
+      padding: 10px 10px 0 10px;
+      height: calc(100% - 10px);
+      overflow: auto;
+    }
+
+    .editor-container.is-focused .DraftEditor-root {
+      margin-top: 40px;
+      height: calc(100% - 40px);
+    }
+
+    .editor-container.is-focused .public-DraftEditorPlaceholder-root,
+    .editor-container.has-user-input .public-DraftEditorPlaceholder-root {
+      display: none;
+    }
+
+    .public-DraftEditorPlaceholder-inner {
+      line-height: 20px;
+    }
+
+    .public-DraftEditor-content {
+      @include html-content-style {
+        ol li {
+          list-style-type: decimal;
+        }
+
+        ol li::before {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.char-num {
+  @include roboto-medium;
+
+  margin-bottom: 2px;
+  line-height: 15px;
+  font-size: 11px;
+  color: $tc-dark-blue-100;
+  text-align: right;
+
+  @include upto-sm {
+    position: relative;
+    top: -15px;
+    margin-bottom: -3px;
+    height: 0;
+  }
+}
+
+.label-achievements {
+  width: 134px;
+  white-space: normal;
+
+  @include upto-sm {
+    width: auto;
+  }
+}
+
+.label-checkbox-working {
+  margin-left: 29px;
+}
+
+.select-technologies-container {
+  @include upto-sm {
+    margin-top: 5px;
+  }
+
+  .selected-value-text {
+    @include roboto-regular;
+
+    font-size: 15px;
+    color: #262628;
+
+    &:not(:first-child) {
+      &::before {
+        content: ', ';
+      }
+    }
+  }
+
+  :global {
+    .select-technologies {
+      .Select-control {
+        height: 40px;
+      }
+
+      .Select-placeholder {
+        line-height: 40px;
+        padding: 0 15px;
+      }
+
+      .Select-multi-value-wrapper {
+        padding: 0 15px;
+        line-height: 40px;
+      }
+
+      .Select-option {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 15px;
+
+        &.is-selected {
+          position: relative;
+          background-color: white;
+
+          &::after {
+            content: '';
+            position: absolute;
+            right: 15px;
+            bottom: 22px;
+            display: block;
+            width: 15px;
+            height: 8px;
+            border-left: 2px solid $tc-gray-90;
+            border-bottom: 2px solid $tc-gray-90;
+            transform: rotate(-45deg);
+          }
+        }
+
+        &.is-focused {
+          background-color: $tc-dark-blue-10;
+        }
+      }
+    }
+  }
+}
+
+.work-container .form-container .row .field :global .Select-placeholder {
+  color: $tc-gray-50;
+}
+
 /*
  * React Select component styling
  */
@@ -405,7 +575,3 @@ label {
     margin-top: 5px;
   }
 }
-
-.work-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
-}
diff --git a/src/shared/containers/Settings.jsx b/src/shared/containers/Settings.jsx
index 40009cef92..4d93affb6b 100644
--- a/src/shared/containers/Settings.jsx
+++ b/src/shared/containers/Settings.jsx
@@ -153,6 +153,8 @@ function mapDispatchToProps(dispatch) {
       dispatch(lookupActions.getSkillTagsDone());
       dispatch(lookupActions.getCountriesInit());
       dispatch(lookupActions.getCountriesDone());
+      dispatch(lookupActions.getTechnologiesInit());
+      dispatch(lookupActions.getTechnologiesDone());
     } else if (settingsTab === TABS.PREFERENCES) {
       // Deprecated. Leaving it here as reminder to update topcoder-react-lib as well
       // dispatch(profileActions.getEmailPreferencesDone(profile, tokenV3));
diff --git a/src/shared/utils/settings.js b/src/shared/utils/settings.js
index 87a5969f2b..b175297067 100644
--- a/src/shared/utils/settings.js
+++ b/src/shared/utils/settings.js
@@ -3,6 +3,10 @@
  */
 import _ from 'lodash';
 
+export function isEmpty(value) {
+  return value == null || value === '' || _.isEqual(value, []) || _.isEqual(value, {});
+}
+
 export function validateStartDate(flag, fromDate, toDate) {
   const result = {
     invalid: false,
@@ -11,7 +15,7 @@ export function validateStartDate(flag, fromDate, toDate) {
 
   const currentDate = new Date().setHours(0, 0, 0, 0);
 
-  if (!_.isEmpty(fromDate)) {
+  if (!isEmpty(fromDate)) {
     const startDate = new Date(fromDate).setHours(0, 0, 0, 0);
 
     if (startDate > currentDate) {
@@ -20,17 +24,17 @@ export function validateStartDate(flag, fromDate, toDate) {
     }
   }
 
-  if (!_.isEmpty(toDate)) {
+  if (!isEmpty(toDate)) {
     const endDate = new Date(toDate).setHours(0, 0, 0, 0);
     if (flag) {
-      if (!_.isEmpty(fromDate)) {
+      if (!isEmpty(fromDate)) {
         const startDate = new Date(fromDate).setHours(0, 0, 0, 0);
         if (startDate >= endDate) {
           result.invalid = true;
           result.message = 'Start Date should be before End Date';
         }
       }
-    } else if (!flag && !_.isEmpty(fromDate)) {
+    } else if (!flag && !isEmpty(fromDate)) {
       const startDate = new Date(fromDate).setHours(0, 0, 0, 0);
       if (startDate >= endDate) {
         result.invalid = true;
@@ -50,15 +54,15 @@ export function validateEndDate(flag, fromDate, toDate) {
 
   const currentDate = new Date().setHours(0, 0, 0, 0);
 
-  if (!_.isEmpty(toDate)) {
+  if (!isEmpty(toDate)) {
     const endDate = new Date(toDate).setHours(0, 0, 0, 0);
     if (flag) {
-      if (!_.isEmpty(fromDate)) {
+      if (!isEmpty(fromDate)) {
         if (endDate > currentDate) {
           result.invalid = true;
           result.message = 'End Date should be current or in past';
         }
-      } else if (_.isEmpty(fromDate)) {
+      } else if (isEmpty(fromDate)) {
         if (endDate > currentDate) {
           result.invalid = true;
           result.message = 'End Date should be current or in past';