diff --git a/src/shared/components/Settings/Profile/Education/index.jsx b/src/shared/components/Settings/Profile/Education/index.jsx
index 5a37110216..326ce05fc5 100644
--- a/src/shared/components/Settings/Profile/Education/index.jsx
+++ b/src/shared/components/Settings/Profile/Education/index.jsx
@@ -9,9 +9,11 @@
 import React from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
+import moment from 'moment';
 import Select from 'components/Select';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
+import DatePicker from 'components/challenge-listing/Filters/DatePicker';
 import dropdowns from './dropdowns.json';
 import EducationList from './List';
 
@@ -30,6 +32,7 @@ export default class Education extends ConsentComponent {
     this.onAddEducation = this.onAddEducation.bind(this);
     this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
     this.updatePredicate = this.updatePredicate.bind(this);
+    this.onUpdateDate = this.onUpdateDate.bind(this);
 
     const { userTraits } = props;
     this.state = {
@@ -138,7 +141,7 @@ export default class Education extends ConsentComponent {
 
 
     if (errorMessage.length > 0) {
-      errorMessage = `${errorMessage}. ${dateError}`;
+      errorMessage = `${errorMessage}. \n${dateError}`;
     } else if (dateError.length > 0) {
       errorMessage = dateError;
       invalid = dateInvalid;
@@ -152,6 +155,15 @@ export default class Education extends ConsentComponent {
     this.showConsent(this.onDeleteEducation.bind(this, indexNo));
   }
 
+  onUpdateDate(date, timePeriod) {
+    if (date) {
+      const { newEducation: oldEducation } = this.state;
+      const newEducation = { ...oldEducation };
+      newEducation[timePeriod] = date;
+      this.setState({ newEducation });
+    }
+  }
+
   /**
    * Delete education by index
    * @param indexNo the education index no
@@ -398,7 +410,15 @@ export default class Education extends ConsentComponent {
                 </div>
                 <div styleName="field col-2">
                   <span styleName="text-required">* Required</span>
-                  <input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodFrom} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newEducation.timePeriodFrom}
+                    id="date-from1"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    placeholder="dd/mm/yyyy"
+                  />
                 </div>
               </div>
               <div styleName="row">
@@ -410,7 +430,15 @@ export default class Education extends ConsentComponent {
                 </div>
                 <div styleName="field col-2">
                   <span styleName="text-required">* Required</span>
-                  <input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodTo} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newEducation.timePeriodTo}
+                    id="date-to1"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    placeholder="dd/mm/yyyy"
+                  />
                 </div>
               </div>
               <div styleName="row">
@@ -493,14 +521,30 @@ export default class Education extends ConsentComponent {
                     From
                     <input type="hidden" />
                   </label>
-                  <input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodFrom} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newEducation.timePeriodFrom}
+                    id="date-from2"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    placeholder="dd/mm/yyyy"
+                  />
                 </div>
                 <div styleName="field col-date">
                   <label htmlFor="timePeriodTo">
                     To
                     <input type="hidden" />
                   </label>
-                  <input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodTo} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newEducation.timePeriodTo}
+                    id="date-to2"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    placeholder="dd/mm/yyyy"
+                  />
                 </div>
                 <div styleName="field col-checkbox">
                   <div styleName="tc-checkbox">
diff --git a/src/shared/components/Settings/Profile/Education/styles.scss b/src/shared/components/Settings/Profile/Education/styles.scss
index 8d8827ffd2..46d598c983 100644
--- a/src/shared/components/Settings/Profile/Education/styles.scss
+++ b/src/shared/components/Settings/Profile/Education/styles.scss
@@ -70,8 +70,10 @@ $checkbox-bg-selected: $tc-dark-blue;
     background-color: $tc-red-10;
     color: $tc-red-110;
     font-size: 15px;
-    padding: 15px;
+    line-height: 21px;
+    padding: 12px 15px;
     margin-bottom: 15px;
+    white-space: pre-line;
   }
 }
 
diff --git a/src/shared/components/Settings/Profile/Work/index.jsx b/src/shared/components/Settings/Profile/Work/index.jsx
index 51f10faaf9..c3ad06f23a 100644
--- a/src/shared/components/Settings/Profile/Work/index.jsx
+++ b/src/shared/components/Settings/Profile/Work/index.jsx
@@ -9,8 +9,10 @@
 import React from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
+import moment from 'moment';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
+import DatePicker from 'components/challenge-listing/Filters/DatePicker';
 import WorkList from './List';
 
 import './styles.scss';
@@ -27,6 +29,8 @@ export default class Work extends ConsentComponent {
     this.onAddWork = this.onAddWork.bind(this);
     this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
     this.updatePredicate = this.updatePredicate.bind(this);
+    this.onUpdateDate = this.onUpdateDate.bind(this);
+
     const { userTraits } = props;
     this.state = {
       formInvalid: false,
@@ -153,7 +157,7 @@ export default class Work extends ConsentComponent {
 
 
     if (errorMessage.length > 0) {
-      errorMessage = `${errorMessage}. ${dateError}`;
+      errorMessage = `${errorMessage}. \n${dateError}`;
     } else if (dateError.length > 0) {
       errorMessage = dateError;
       invalid = dateInvalid;
@@ -167,6 +171,15 @@ export default class Work extends ConsentComponent {
     this.showConsent(this.onDeleteWork.bind(this, indexNo));
   }
 
+  onUpdateDate(date, timePeriod) {
+    if (date) {
+      const { newWork: oldWork } = this.state;
+      const newWork = { ...oldWork };
+      newWork[timePeriod] = date;
+      this.setState({ newWork });
+    }
+  }
+
   /**
    * Delete work by index
    * @param indexNo the work index no
@@ -376,7 +389,15 @@ export default class Work extends ConsentComponent {
                 </div>
                 <div styleName="field col-2">
                   <span styleName="text-required">* Required</span>
-                  <input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodFrom} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newWork.timePeriodFrom}
+                    id="date-from1"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    placeholder="dd/mm/yyyy"
+                  />
                 </div>
               </div>
               <div styleName="row">
@@ -388,7 +409,15 @@ export default class Work extends ConsentComponent {
                 </div>
                 <div styleName="field col-2">
                   <span styleName="text-required">* Required</span>
-                  <input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodTo} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newWork.timePeriodTo}
+                    id="date-to1"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    placeholder="dd/mm/yyyy"
+                  />
                 </div>
               </div>
             </form>
@@ -444,14 +473,30 @@ export default class Work extends ConsentComponent {
                     From
                     <input type="hidden" />
                   </label>
-                  <input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodFrom} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newWork.timePeriodFrom}
+                    id="date-from2"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                    placeholder="dd/mm/yyyy"
+                  />
                 </div>
                 <div styleName="field col-date">
                   <label htmlFor="timePeriodTo">
                     To
                     <input type="hidden" />
                   </label>
-                  <input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodTo} required />
+                  <DatePicker
+                    readOnly
+                    numberOfMonths={1}
+                    isOutsideRange={moment()}
+                    date={newWork.timePeriodTo}
+                    id="date-to2"
+                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                    placeholder="dd/mm/yyyy"
+                  />
                 </div>
               </div>
             </form>
diff --git a/src/shared/components/Settings/Profile/Work/styles.scss b/src/shared/components/Settings/Profile/Work/styles.scss
index cd87cb90dd..2bb6ef2d58 100644
--- a/src/shared/components/Settings/Profile/Work/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/styles.scss
@@ -66,8 +66,10 @@ $checkbox-bg-selected: $tc-dark-blue;
     background-color: $tc-red-10;
     color: $tc-red-110;
     font-size: 15px;
-    padding: 15px;
     margin-bottom: 15px;
+    line-height: 21px;
+    padding: 12px 15px;
+    white-space: pre-line;
   }
 }
 
diff --git a/src/shared/reducers/page/ui/settings.js b/src/shared/reducers/page/ui/settings.js
index b4271aa531..16d69c61f0 100644
--- a/src/shared/reducers/page/ui/settings.js
+++ b/src/shared/reducers/page/ui/settings.js
@@ -9,11 +9,11 @@ import settingsActions from 'actions/page/ui/settings';
 const TABS = {
   PROFILE: {
     BASIC: 'basic info',
-    // LANGUAGE: 'language',
-    SKILL: 'skills',
-    // EDUCATION: 'education',
-    // WORK: 'work',
+    LANGUAGE: 'language',
+    EDUCATION: 'education',
+    WORK: 'work',
     // ORGANIZATION: 'organization',
+    SKILL: 'skills',
     HOBBY: 'hobbies',
     COMMUNITY: 'communities',
   },