From 07d50a7b0c03be2d70ea924bdf594e62acd97a42 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Tue, 19 Jul 2022 09:41:58 +0700
Subject: [PATCH 01/49] improvement(reskin-profile-settings): 1 - tab profile

---
 .../Datepicker/__snapshots__/index.jsx.snap   |    2 +-
 .../Header/__snapshots__/index.jsx.snap       |   75 +-
 .../AboutMe/__snapshots__/index.jsx.snap      | 1134 --------
 .../Settings/Profile/AboutMe/index.jsx        |   25 -
 .../Profile/ExternalLinks/AddWebLink.jsx      |   18 -
 .../Profile/ExternalLinks/ExistingLink.jsx    |   16 -
 .../Profile/ExternalLinks/ExistingLinks.jsx   |   23 -
 .../Profile/ExternalLinks/LinkAccounts.jsx    |   20 -
 .../__snapshots__/AddWebLink.jsx.snap         |   55 -
 .../__snapshots__/ExistingLink.jsx.snap       |   59 -
 .../__snapshots__/ExistingLinks.jsx.snap      |   11 -
 .../__snapshots__/LinkAccounts.jsx.snap       |    7 -
 .../__snapshots__/index.jsx.snap              | 2341 -----------------
 .../Settings/Profile/ExternalLinks/index.jsx  |   24 -
 .../Settings/Profile/Skills/index.jsx         |   23 -
 .../components/Settings/Profile/index.jsx     |   28 -
 .../Settings/__snapshots__/index.jsx.snap     |  160 +-
 src/assets/images/dropdown-arrow.svg          |    3 +
 src/assets/images/icon-banner-selector.svg    |    3 +
 src/assets/images/icon-edit.svg               |    4 +
 src/assets/images/icon-input-calendar.svg     |    3 +
 src/assets/images/icon-upload.svg             |    3 +
 src/assets/images/nav-active-item.svg         |    4 +-
 src/assets/images/settings-add-item.svg       |    3 +
 src/shared/actions/page/settings.js           |    4 +-
 .../components/GUIKit/Datepicker/index.jsx    |   21 +-
 .../index.jsx                                 |    0
 .../styles.scss                               |    5 +
 .../Settings/ErrorMessage/styles.scss         |   10 +-
 .../components/Settings/FormField/index.jsx   |   41 +
 .../components/Settings/FormField/styles.scss |   28 +
 .../Settings/FormInputSelect/index.jsx        |   26 +
 .../Settings/FormInputSelect/styles.scss      |   25 +
 .../Settings/FormInputText/index.jsx          |   27 +
 .../Settings/FormInputText/styles.scss        |   23 +
 .../Settings/FormInputTextArea/index.jsx      |   27 +
 .../Settings/FormInputTextArea/styles.scss    |   29 +
 .../components/Settings/Header/index.jsx      |   88 +-
 .../components/Settings/Header/styles.scss    |  110 +-
 .../components/Settings/PageRow/index.jsx     |   38 +
 .../components/Settings/PageRow/styles.scss   |   39 +
 .../Settings/Profile/AboutMe/index.jsx        |  190 --
 .../Settings/Profile/AboutMe/styles.scss      |   96 -
 .../Profile/BasicInfo/ImageInput/index.jsx    |  184 --
 .../Profile/BasicInfo/ImageInput/styles.scss  |  107 -
 .../Profile/BasicInfo/Track/index.jsx         |   67 -
 .../Profile/BasicInfo/Track/styles.scss       |   82 -
 .../Settings/Profile/BasicInfo/dropdowns.json |   41 -
 .../Settings/Profile/BasicInfo/index.jsx      |  922 -------
 .../Settings/Profile/BasicInfo/styles.scss    |  471 ----
 .../Settings/Profile/BasicInfo/tracks.jsx     |   20 -
 .../Settings/Profile/Community/Item/index.jsx |   86 -
 .../Profile/Community/Item/styles.scss        |  106 -
 .../Settings/Profile/Community/data.jsx       |   21 -
 .../Settings/Profile/Community/index.jsx      |  185 --
 .../Settings/Profile/Community/styles.scss    |   59 -
 .../Profile/Education/List/styles.scss        |   29 -
 .../Settings/Profile/Education/index.jsx      |  811 ------
 .../Profile/ExternalLinks/AddWebLink.jsx      |  132 -
 .../Profile/ExternalLinks/ExistingLink.jsx    |  274 --
 .../Profile/ExternalLinks/ExistingLinks.jsx   |  134 -
 .../Profile/ExternalLinks/LinkAccounts.jsx    |  141 -
 .../Settings/Profile/ExternalLinks/index.jsx  |  188 --
 .../Profile/ExternalLinks/styles.scss         |  724 -----
 .../Settings/Profile/Hobby/List/styles.scss   |   29 -
 .../Settings/Profile/Hobby/index.jsx          |  486 ----
 .../Settings/Profile/ImageInput/index.jsx     |  136 -
 .../Settings/Profile/ImageInput/styles.scss   |   77 -
 .../Profile/Language/List/Item/index.jsx      |  116 -
 .../Profile/Language/List/Item/styles.scss    |  151 --
 .../Settings/Profile/Language/List/index.jsx  |   41 -
 .../Profile/Language/List/styles.scss         |   29 -
 .../Settings/Profile/Language/dropdowns.json  |  782 ------
 .../Settings/Profile/Language/index.jsx       |  634 -----
 .../Settings/Profile/Language/styles.scss     |  268 --
 .../Profile/Organization/List/Item/index.jsx  |   67 -
 .../Organization/List/Item/styles.scss        |  102 -
 .../Profile/Organization/List/index.jsx       |   34 -
 .../Settings/Profile/Organization/index.jsx   |  487 ----
 .../Settings/Profile/Organization/styles.scss |  279 --
 .../Settings/Profile/Skills/index.jsx         |  683 -----
 .../Settings/Profile/Skills/styles.scss       |  441 ----
 .../Settings/Profile/Work/List/Item/index.jsx |   95 -
 .../Profile/Work/List/Item/styles.scss        |  153 --
 .../Settings/Profile/Work/List/index.jsx      |   36 -
 .../Settings/Profile/Work/index.jsx           |  763 ------
 .../Settings/Profile/Work/styles.scss         |  425 ---
 .../components/Settings/Profile/index.jsx     |  168 --
 .../components/Settings/Profile/styles.scss   |   50 -
 .../ProfileSettings/AboutYou/index.jsx        |   90 +
 .../Hobbies}/List/Item/index.jsx              |    0
 .../Hobbies}/List/Item/styles.scss            |    1 +
 .../Hobbies}/List/index.jsx                   |    0
 .../Hobbies}/List/styles.scss                 |    7 +-
 .../ProfileSettings/Hobbies/index.jsx         |  138 +
 .../Hobbies}/styles.scss                      |   23 +-
 .../ProfileSettings/ImageInput/index.jsx      |  154 ++
 .../ProfileSettings/ImageInput/styles.scss    |  134 +
 .../Learning}/List/Item/index.jsx             |    2 +-
 .../Learning}/List/Item/styles.scss           |    1 +
 .../Learning}/List/index.jsx                  |    0
 .../Learning}/List/styles.scss                |    7 +-
 .../ProfileSettings/Learning/index.jsx        |  288 ++
 .../Learning}/styles.scss                     |  237 +-
 .../ProfileSettings/PersonalDetails/index.jsx |  295 +++
 .../Settings/ProfileSettings/index.jsx        | 1150 ++++++++
 .../Settings/ProfileSettings/styles.scss      |  211 ++
 .../Settings/SettingsBanner/index.jsx         |   64 +
 .../Settings/SettingsBanner/styles.scss       |   53 +
 .../components/Settings/TabSelector/index.jsx |   99 +
 .../Settings/TabSelector/styles.scss          |  120 +
 .../Settings/Tools/Devices/index.jsx          |    2 +-
 .../Settings/Tools/ServiceProviders/index.jsx |    2 +-
 .../Settings/Tools/Software/index.jsx         |    2 +-
 .../Settings/Tools/Subscriptions/index.jsx    |    2 +-
 src/shared/components/Settings/constants.js   |   31 +-
 src/shared/components/Settings/index.jsx      |   40 +-
 src/shared/components/Settings/style.scss     |  211 +-
 src/shared/routes/Settings/Router.jsx         |    2 +-
 119 files changed, 3796 insertions(+), 15757 deletions(-)
 delete mode 100644 __tests__/shared/components/Settings/Profile/AboutMe/__snapshots__/index.jsx.snap
 delete mode 100644 __tests__/shared/components/Settings/Profile/AboutMe/index.jsx
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/AddWebLink.jsx
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/ExistingLink.jsx
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/AddWebLink.jsx.snap
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/ExistingLink.jsx.snap
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/ExistingLinks.jsx.snap
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/LinkAccounts.jsx.snap
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/index.jsx.snap
 delete mode 100644 __tests__/shared/components/Settings/Profile/ExternalLinks/index.jsx
 delete mode 100644 __tests__/shared/components/Settings/Profile/Skills/index.jsx
 delete mode 100644 __tests__/shared/components/Settings/Profile/index.jsx
 create mode 100644 src/assets/images/dropdown-arrow.svg
 create mode 100644 src/assets/images/icon-banner-selector.svg
 create mode 100644 src/assets/images/icon-edit.svg
 create mode 100644 src/assets/images/icon-input-calendar.svg
 create mode 100644 src/assets/images/icon-upload.svg
 create mode 100644 src/assets/images/settings-add-item.svg
 rename src/shared/components/Settings/{CofirmationModal => ConfirmationModal}/index.jsx (100%)
 rename src/shared/components/Settings/{CofirmationModal => ConfirmationModal}/styles.scss (96%)
 create mode 100644 src/shared/components/Settings/FormField/index.jsx
 create mode 100644 src/shared/components/Settings/FormField/styles.scss
 create mode 100644 src/shared/components/Settings/FormInputSelect/index.jsx
 create mode 100644 src/shared/components/Settings/FormInputSelect/styles.scss
 create mode 100644 src/shared/components/Settings/FormInputText/index.jsx
 create mode 100644 src/shared/components/Settings/FormInputText/styles.scss
 create mode 100644 src/shared/components/Settings/FormInputTextArea/index.jsx
 create mode 100644 src/shared/components/Settings/FormInputTextArea/styles.scss
 create mode 100644 src/shared/components/Settings/PageRow/index.jsx
 create mode 100644 src/shared/components/Settings/PageRow/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/AboutMe/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/AboutMe/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/BasicInfo/ImageInput/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/BasicInfo/ImageInput/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/BasicInfo/Track/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/BasicInfo/Track/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/BasicInfo/dropdowns.json
 delete mode 100644 src/shared/components/Settings/Profile/BasicInfo/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/BasicInfo/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/BasicInfo/tracks.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Community/Item/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Community/Item/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Community/data.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Community/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Community/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Education/List/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Education/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/ExternalLinks/AddWebLink.jsx
 delete mode 100644 src/shared/components/Settings/Profile/ExternalLinks/ExistingLink.jsx
 delete mode 100644 src/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx
 delete mode 100644 src/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx
 delete mode 100644 src/shared/components/Settings/Profile/ExternalLinks/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/ExternalLinks/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Hobby/List/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Hobby/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/ImageInput/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/ImageInput/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Language/List/Item/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Language/List/Item/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Language/List/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Language/List/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Language/dropdowns.json
 delete mode 100644 src/shared/components/Settings/Profile/Language/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Language/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Organization/List/Item/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Organization/List/Item/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Organization/List/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Organization/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Organization/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Skills/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Skills/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Work/List/Item/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Work/List/Item/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/Work/List/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Work/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/Work/styles.scss
 delete mode 100644 src/shared/components/Settings/Profile/index.jsx
 delete mode 100644 src/shared/components/Settings/Profile/styles.scss
 create mode 100644 src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
 rename src/shared/components/Settings/{Profile/Hobby => ProfileSettings/Hobbies}/List/Item/index.jsx (100%)
 rename src/shared/components/Settings/{Profile/Hobby => ProfileSettings/Hobbies}/List/Item/styles.scss (99%)
 rename src/shared/components/Settings/{Profile/Hobby => ProfileSettings/Hobbies}/List/index.jsx (100%)
 rename src/shared/components/Settings/{Profile/Organization => ProfileSettings/Hobbies}/List/styles.scss (80%)
 create mode 100644 src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
 rename src/shared/components/Settings/{Profile/Hobby => ProfileSettings/Hobbies}/styles.scss (93%)
 create mode 100644 src/shared/components/Settings/ProfileSettings/ImageInput/index.jsx
 create mode 100644 src/shared/components/Settings/ProfileSettings/ImageInput/styles.scss
 rename src/shared/components/Settings/{Profile/Education => ProfileSettings/Learning}/List/Item/index.jsx (98%)
 rename src/shared/components/Settings/{Profile/Education => ProfileSettings/Learning}/List/Item/styles.scss (99%)
 rename src/shared/components/Settings/{Profile/Education => ProfileSettings/Learning}/List/index.jsx (100%)
 rename src/shared/components/Settings/{Profile/Work => ProfileSettings/Learning}/List/styles.scss (80%)
 create mode 100644 src/shared/components/Settings/ProfileSettings/Learning/index.jsx
 rename src/shared/components/Settings/{Profile/Education => ProfileSettings/Learning}/styles.scss (83%)
 create mode 100644 src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
 create mode 100644 src/shared/components/Settings/ProfileSettings/index.jsx
 create mode 100644 src/shared/components/Settings/ProfileSettings/styles.scss
 create mode 100644 src/shared/components/Settings/SettingsBanner/index.jsx
 create mode 100644 src/shared/components/Settings/SettingsBanner/styles.scss
 create mode 100644 src/shared/components/Settings/TabSelector/index.jsx
 create mode 100644 src/shared/components/Settings/TabSelector/styles.scss

diff --git a/__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap
index cbf30591eb..a44d0582cf 100644
--- a/__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap
@@ -102,7 +102,7 @@ exports[`Default render 1`] = `
     regular={false}
     renderCalendarInfo={null}
     renderDayContents={[Function]}
-    renderMonthElement={null}
+    renderMonthElement={[Function]}
     renderMonthText={null}
     reopenPickerOnClearDate={false}
     required={false}
diff --git a/__tests__/shared/components/Settings/Header/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/Header/__snapshots__/index.jsx.snap
index 606d5a7174..3c2f7e69ed 100644
--- a/__tests__/shared/components/Settings/Header/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/Settings/Header/__snapshots__/index.jsx.snap
@@ -8,58 +8,33 @@ exports[`renders setting page header correctly 1`] = `
     className="src-shared-components-Settings-Header-___styles__title___2Pmjv"
   >
     <h1>
-      Settings
+      Profile Settings
     </h1>
   </div>
-  <nav
-    className="src-shared-components-Settings-Header-___styles__tabs___3eOxJ"
+  <ThemedButton
+    active={false}
+    composeAdhocTheme="deeply"
+    composeContextTheme="softly"
+    disabled={false}
+    enforceA={false}
+    mapThemrProps={[Function]}
+    onClick={null}
+    onMouseDown={null}
+    openNewTab={false}
+    replace={false}
+    size={null}
+    theme={
+      Object {
+        "button": "src-shared-components-Settings-Header-styles___saveButton___1u3q7x",
+      }
+    }
+    themePriority="adhoc-context-default"
+    to={null}
+    type="button"
   >
-    <ul>
-      <li>
-        <a
-          className=""
-          onClick={[Function]}
-          onKeyPress={[Function]}
-          role="link"
-          tabIndex={0}
-        >
-          Profile
-        </a>
-      </li>
-      <li>
-        <a
-          className=""
-          onClick={[Function]}
-          onKeyPress={[Function]}
-          role="link"
-          tabIndex={0}
-        >
-          Tools
-        </a>
-      </li>
-      <li>
-        <a
-          className=""
-          onClick={[Function]}
-          onKeyPress={[Function]}
-          role="link"
-          tabIndex={0}
-        >
-          Account
-        </a>
-      </li>
-      <li>
-        <a
-          className=""
-          onClick={[Function]}
-          onKeyPress={[Function]}
-          role="link"
-          tabIndex={0}
-        >
-          Preferences
-        </a>
-      </li>
-    </ul>
-  </nav>
+    <span>
+      SAVE CHANGES
+    </span>
+  </ThemedButton>
 </div>
 `;
diff --git a/__tests__/shared/components/Settings/Profile/AboutMe/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/Profile/AboutMe/__snapshots__/index.jsx.snap
deleted file mode 100644
index d263aed67b..0000000000
--- a/__tests__/shared/components/Settings/Profile/AboutMe/__snapshots__/index.jsx.snap
+++ /dev/null
@@ -1,1134 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders about me section of profile setting page correctly 1`] = `
-<div
-  className="settings-section"
->
-  <div
-    className="section-info"
-  >
-    <h2>
-      About Me
-    </h2>
-    <div
-      className="description"
-    >
-      The most important information that other community members should know about you.
-    </div>
-  </div>
-  <div
-    className="section-fields"
-  >
-    <div
-      className="src-shared-components-Settings-Profile-AboutMe-___styles__image___2Pzzy"
-    >
-      <div
-        className="form-label"
-      >
-        your profile image
-      </div>
-      <div
-        className="src-shared-components-Settings-Profile-AboutMe-___styles__edit-image___3BNKa"
-      >
-        <img
-          alt="User"
-          className="src-shared-components-Settings-Profile-AboutMe-___styles__profile-circle___2aNdR"
-          src="https://topcoder-prod-media.s3.amazonaws.com/member/profile/tcscoder-1525559661069.png"
-        />
-        <div
-          className="src-shared-components-Settings-Profile-AboutMe-___styles__buttons___2PWXt"
-        >
-          <ThemedButton
-            active={false}
-            composeAdhocTheme="deeply"
-            composeContextTheme="softly"
-            disabled={false}
-            enforceA={false}
-            mapThemrProps={[Function]}
-            onClick={[Function]}
-            onMouseDown={null}
-            openNewTab={false}
-            replace={false}
-            size={null}
-            theme={
-              Object {
-                "button": "src-shared-components-Settings-Profile-AboutMe-styles___file-upload___1uQbWx",
-              }
-            }
-            themePriority="adhoc-context-default"
-            to={null}
-            type="button"
-          >
-            Change Image
-          </ThemedButton>
-          <input
-            className="hidden"
-            id="change-image-input"
-            name="image"
-            onChange={[Function]}
-            type="file"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="src-shared-components-Settings-Profile-AboutMe-___styles__country___cWUCk"
-    >
-      <div
-        className="form-label"
-      >
-        Country to represent
-      </div>
-      <Select
-        clearable={false}
-        labelKey="name"
-        matchPos="start"
-        matchProp="name"
-        name="location"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "alpha3": "AFG",
-              "name": "Afghanistan",
-            },
-            Object {
-              "alpha3": "ALB",
-              "name": "Albania",
-            },
-            Object {
-              "alpha3": "DZA",
-              "name": "Algeria",
-            },
-            Object {
-              "alpha3": "ASM",
-              "name": "American Samoa",
-            },
-            Object {
-              "alpha3": "AND",
-              "name": "Andorra",
-            },
-            Object {
-              "alpha3": "AGO",
-              "name": "Angola",
-            },
-            Object {
-              "alpha3": "AIA",
-              "name": "Anguilla",
-            },
-            Object {
-              "alpha3": "ATA",
-              "name": "Antarctica",
-            },
-            Object {
-              "alpha3": "ATG",
-              "name": "Antigua and Barbuda",
-            },
-            Object {
-              "alpha3": "ARG",
-              "name": "Argentina",
-            },
-            Object {
-              "alpha3": "ARM",
-              "name": "Armenia",
-            },
-            Object {
-              "alpha3": "ABW",
-              "name": "Aruba",
-            },
-            Object {
-              "alpha3": "AUS",
-              "name": "Australia",
-            },
-            Object {
-              "alpha3": "AUT",
-              "name": "Austria",
-            },
-            Object {
-              "alpha3": "AZE",
-              "name": "Azerbaijan",
-            },
-            Object {
-              "alpha3": "BHS",
-              "name": "Bahamas",
-            },
-            Object {
-              "alpha3": "BHR",
-              "name": "Bahrain",
-            },
-            Object {
-              "alpha3": "BGD",
-              "name": "Bangladesh",
-            },
-            Object {
-              "alpha3": "BRB",
-              "name": "Barbados",
-            },
-            Object {
-              "alpha3": "BLR",
-              "name": "Belarus",
-            },
-            Object {
-              "alpha3": "BEL",
-              "name": "Belgium",
-            },
-            Object {
-              "alpha3": "BLZ",
-              "name": "Belize",
-            },
-            Object {
-              "alpha3": "BEN",
-              "name": "Benin",
-            },
-            Object {
-              "alpha3": "BMU",
-              "name": "Bermuda",
-            },
-            Object {
-              "alpha3": "BTN",
-              "name": "Bhutan",
-            },
-            Object {
-              "alpha3": "BOL",
-              "name": "Bolivia",
-            },
-            Object {
-              "alpha3": "BIH",
-              "name": "Bosnia and Herzegovina",
-            },
-            Object {
-              "alpha3": "BWA",
-              "name": "Botswana",
-            },
-            Object {
-              "alpha3": "BVT",
-              "name": "Bouvet Island",
-            },
-            Object {
-              "alpha3": "BRA",
-              "name": "Brazil",
-            },
-            Object {
-              "alpha3": "IOT",
-              "name": "British Indian Ocean Territory",
-            },
-            Object {
-              "alpha3": "BRN",
-              "name": "Brunei Darussalam",
-            },
-            Object {
-              "alpha3": "BGR",
-              "name": "Bulgaria",
-            },
-            Object {
-              "alpha3": "BFA",
-              "name": "Burkina Faso",
-            },
-            Object {
-              "alpha3": "BDI",
-              "name": "Burundi",
-            },
-            Object {
-              "alpha3": "KHM",
-              "name": "Cambodia",
-            },
-            Object {
-              "alpha3": "CMR",
-              "name": "Cameroon",
-            },
-            Object {
-              "alpha3": "CAN",
-              "name": "Canada",
-            },
-            Object {
-              "alpha3": "CPV",
-              "name": "Cape Verde",
-            },
-            Object {
-              "alpha3": "CYM",
-              "name": "Cayman Islands",
-            },
-            Object {
-              "alpha3": "CAF",
-              "name": "Central African Republic",
-            },
-            Object {
-              "alpha3": "TCD",
-              "name": "Chad",
-            },
-            Object {
-              "alpha3": "CHL",
-              "name": "Chile",
-            },
-            Object {
-              "alpha3": "CHN",
-              "name": "China",
-            },
-            Object {
-              "alpha3": "CXR",
-              "name": "Christmas Island",
-            },
-            Object {
-              "alpha3": "CCK",
-              "name": "Cocos (Keeling) Islands",
-            },
-            Object {
-              "alpha3": "COL",
-              "name": "Colombia",
-            },
-            Object {
-              "alpha3": "COM",
-              "name": "Comoros",
-            },
-            Object {
-              "alpha3": "COG",
-              "name": "Congo",
-            },
-            Object {
-              "alpha3": "COD",
-              "name": "Congo, the Democratic Republic of the",
-            },
-            Object {
-              "alpha3": "COK",
-              "name": "Cook Islands",
-            },
-            Object {
-              "alpha3": "CRI",
-              "name": "Costa Rica",
-            },
-            Object {
-              "alpha3": "CIV",
-              "name": "Cote D'Ivoire",
-            },
-            Object {
-              "alpha3": "HRV",
-              "name": "Croatia",
-            },
-            Object {
-              "alpha3": "CUB",
-              "name": "Cuba",
-            },
-            Object {
-              "alpha3": "CYP",
-              "name": "Cyprus",
-            },
-            Object {
-              "alpha3": "CZE",
-              "name": "Czech Republic",
-            },
-            Object {
-              "alpha3": "DNK",
-              "name": "Denmark",
-            },
-            Object {
-              "alpha3": "DJI",
-              "name": "Djibouti",
-            },
-            Object {
-              "alpha3": "DMA",
-              "name": "Dominica",
-            },
-            Object {
-              "alpha3": "DOM",
-              "name": "Dominican Republic",
-            },
-            Object {
-              "alpha3": "ECU",
-              "name": "Ecuador",
-            },
-            Object {
-              "alpha3": "EGY",
-              "name": "Egypt",
-            },
-            Object {
-              "alpha3": "SLV",
-              "name": "El Salvador",
-            },
-            Object {
-              "alpha3": "GNQ",
-              "name": "Equatorial Guinea",
-            },
-            Object {
-              "alpha3": "ERI",
-              "name": "Eritrea",
-            },
-            Object {
-              "alpha3": "EST",
-              "name": "Estonia",
-            },
-            Object {
-              "alpha3": "ETH",
-              "name": "Ethiopia",
-            },
-            Object {
-              "alpha3": "FLK",
-              "name": "Falkland Islands (Malvinas)",
-            },
-            Object {
-              "alpha3": "FRO",
-              "name": "Faroe Islands",
-            },
-            Object {
-              "alpha3": "FJI",
-              "name": "Fiji",
-            },
-            Object {
-              "alpha3": "FIN",
-              "name": "Finland",
-            },
-            Object {
-              "alpha3": "FRA",
-              "name": "France",
-            },
-            Object {
-              "alpha3": "GUF",
-              "name": "French Guiana",
-            },
-            Object {
-              "alpha3": "PYF",
-              "name": "French Polynesia",
-            },
-            Object {
-              "alpha3": "ATF",
-              "name": "French Southern Territories",
-            },
-            Object {
-              "alpha3": "GAB",
-              "name": "Gabon",
-            },
-            Object {
-              "alpha3": "GMB",
-              "name": "Gambia",
-            },
-            Object {
-              "alpha3": "GEO",
-              "name": "Georgia",
-            },
-            Object {
-              "alpha3": "DEU",
-              "name": "Germany",
-            },
-            Object {
-              "alpha3": "GHA",
-              "name": "Ghana",
-            },
-            Object {
-              "alpha3": "GIB",
-              "name": "Gibraltar",
-            },
-            Object {
-              "alpha3": "GRC",
-              "name": "Greece",
-            },
-            Object {
-              "alpha3": "GRL",
-              "name": "Greenland",
-            },
-            Object {
-              "alpha3": "GRD",
-              "name": "Grenada",
-            },
-            Object {
-              "alpha3": "GLP",
-              "name": "Guadeloupe",
-            },
-            Object {
-              "alpha3": "GUM",
-              "name": "Guam",
-            },
-            Object {
-              "alpha3": "GTM",
-              "name": "Guatemala",
-            },
-            Object {
-              "alpha3": "GIN",
-              "name": "Guinea",
-            },
-            Object {
-              "alpha3": "GNB",
-              "name": "Guinea-Bissau",
-            },
-            Object {
-              "alpha3": "GUY",
-              "name": "Guyana",
-            },
-            Object {
-              "alpha3": "HTI",
-              "name": "Haiti",
-            },
-            Object {
-              "alpha3": "HMD",
-              "name": "Heard Island and Mcdonald Islands",
-            },
-            Object {
-              "alpha3": "VAT",
-              "name": "Holy See (Vatican City State)",
-            },
-            Object {
-              "alpha3": "HND",
-              "name": "Honduras",
-            },
-            Object {
-              "alpha3": "HKG",
-              "name": "Hong Kong",
-            },
-            Object {
-              "alpha3": "HUN",
-              "name": "Hungary",
-            },
-            Object {
-              "alpha3": "ISL",
-              "name": "Iceland",
-            },
-            Object {
-              "alpha3": "IND",
-              "name": "India",
-            },
-            Object {
-              "alpha3": "IDN",
-              "name": "Indonesia",
-            },
-            Object {
-              "alpha3": "IRN",
-              "name": "Iran, Islamic Republic of",
-            },
-            Object {
-              "alpha3": "IRQ",
-              "name": "Iraq",
-            },
-            Object {
-              "alpha3": "IRL",
-              "name": "Ireland",
-            },
-            Object {
-              "alpha3": "ISR",
-              "name": "Israel",
-            },
-            Object {
-              "alpha3": "ITA",
-              "name": "Italy",
-            },
-            Object {
-              "alpha3": "JAM",
-              "name": "Jamaica",
-            },
-            Object {
-              "alpha3": "JPN",
-              "name": "Japan",
-            },
-            Object {
-              "alpha3": "JOR",
-              "name": "Jordan",
-            },
-            Object {
-              "alpha3": "KAZ",
-              "name": "Kazakhstan",
-            },
-            Object {
-              "alpha3": "KEN",
-              "name": "Kenya",
-            },
-            Object {
-              "alpha3": "KIR",
-              "name": "Kiribati",
-            },
-            Object {
-              "alpha3": "PRK",
-              "name": "North Korea",
-            },
-            Object {
-              "alpha3": "KOR",
-              "name": "South Korea",
-            },
-            Object {
-              "alpha3": "KWT",
-              "name": "Kuwait",
-            },
-            Object {
-              "alpha3": "KGZ",
-              "name": "Kyrgyzstan",
-            },
-            Object {
-              "alpha3": "LAO",
-              "name": "Lao People's Democratic Republic",
-            },
-            Object {
-              "alpha3": "LVA",
-              "name": "Latvia",
-            },
-            Object {
-              "alpha3": "LBN",
-              "name": "Lebanon",
-            },
-            Object {
-              "alpha3": "LSO",
-              "name": "Lesotho",
-            },
-            Object {
-              "alpha3": "LBR",
-              "name": "Liberia",
-            },
-            Object {
-              "alpha3": "LBY",
-              "name": "Libya",
-            },
-            Object {
-              "alpha3": "LIE",
-              "name": "Liechtenstein",
-            },
-            Object {
-              "alpha3": "LTU",
-              "name": "Lithuania",
-            },
-            Object {
-              "alpha3": "LUX",
-              "name": "Luxembourg",
-            },
-            Object {
-              "alpha3": "MAC",
-              "name": "Macao",
-            },
-            Object {
-              "alpha3": "MKD",
-              "name": "Macedonia, the Former Yugoslav Republic of",
-            },
-            Object {
-              "alpha3": "MDG",
-              "name": "Madagascar",
-            },
-            Object {
-              "alpha3": "MWI",
-              "name": "Malawi",
-            },
-            Object {
-              "alpha3": "MYS",
-              "name": "Malaysia",
-            },
-            Object {
-              "alpha3": "MDV",
-              "name": "Maldives",
-            },
-            Object {
-              "alpha3": "MLI",
-              "name": "Mali",
-            },
-            Object {
-              "alpha3": "MLT",
-              "name": "Malta",
-            },
-            Object {
-              "alpha3": "MHL",
-              "name": "Marshall Islands",
-            },
-            Object {
-              "alpha3": "MTQ",
-              "name": "Martinique",
-            },
-            Object {
-              "alpha3": "MRT",
-              "name": "Mauritania",
-            },
-            Object {
-              "alpha3": "MUS",
-              "name": "Mauritius",
-            },
-            Object {
-              "alpha3": "MYT",
-              "name": "Mayotte",
-            },
-            Object {
-              "alpha3": "MEX",
-              "name": "Mexico",
-            },
-            Object {
-              "alpha3": "FSM",
-              "name": "Micronesia, Federated States of",
-            },
-            Object {
-              "alpha3": "MDA",
-              "name": "Moldova, Republic of",
-            },
-            Object {
-              "alpha3": "MCO",
-              "name": "Monaco",
-            },
-            Object {
-              "alpha3": "MNG",
-              "name": "Mongolia",
-            },
-            Object {
-              "alpha3": "MSR",
-              "name": "Montserrat",
-            },
-            Object {
-              "alpha3": "MAR",
-              "name": "Morocco",
-            },
-            Object {
-              "alpha3": "MOZ",
-              "name": "Mozambique",
-            },
-            Object {
-              "alpha3": "MMR",
-              "name": "Myanmar",
-            },
-            Object {
-              "alpha3": "NAM",
-              "name": "Namibia",
-            },
-            Object {
-              "alpha3": "NRU",
-              "name": "Nauru",
-            },
-            Object {
-              "alpha3": "NPL",
-              "name": "Nepal",
-            },
-            Object {
-              "alpha3": "NLD",
-              "name": "Netherlands",
-            },
-            Object {
-              "alpha3": "NCL",
-              "name": "New Caledonia",
-            },
-            Object {
-              "alpha3": "NZL",
-              "name": "New Zealand",
-            },
-            Object {
-              "alpha3": "NIC",
-              "name": "Nicaragua",
-            },
-            Object {
-              "alpha3": "NER",
-              "name": "Niger",
-            },
-            Object {
-              "alpha3": "NGA",
-              "name": "Nigeria",
-            },
-            Object {
-              "alpha3": "NIU",
-              "name": "Niue",
-            },
-            Object {
-              "alpha3": "NFK",
-              "name": "Norfolk Island",
-            },
-            Object {
-              "alpha3": "MNP",
-              "name": "Northern Mariana Islands",
-            },
-            Object {
-              "alpha3": "NOR",
-              "name": "Norway",
-            },
-            Object {
-              "alpha3": "OMN",
-              "name": "Oman",
-            },
-            Object {
-              "alpha3": "PAK",
-              "name": "Pakistan",
-            },
-            Object {
-              "alpha3": "PLW",
-              "name": "Palau",
-            },
-            Object {
-              "alpha3": "PSE",
-              "name": "Palestinian Territory, Occupied",
-            },
-            Object {
-              "alpha3": "PAN",
-              "name": "Panama",
-            },
-            Object {
-              "alpha3": "PNG",
-              "name": "Papua New Guinea",
-            },
-            Object {
-              "alpha3": "PRY",
-              "name": "Paraguay",
-            },
-            Object {
-              "alpha3": "PER",
-              "name": "Peru",
-            },
-            Object {
-              "alpha3": "PHL",
-              "name": "Philippines",
-            },
-            Object {
-              "alpha3": "PCN",
-              "name": "Pitcairn",
-            },
-            Object {
-              "alpha3": "POL",
-              "name": "Poland",
-            },
-            Object {
-              "alpha3": "PRT",
-              "name": "Portugal",
-            },
-            Object {
-              "alpha3": "PRI",
-              "name": "Puerto Rico",
-            },
-            Object {
-              "alpha3": "QAT",
-              "name": "Qatar",
-            },
-            Object {
-              "alpha3": "REU",
-              "name": "Reunion",
-            },
-            Object {
-              "alpha3": "ROU",
-              "name": "Romania",
-            },
-            Object {
-              "alpha3": "RUS",
-              "name": "Russian Federation",
-            },
-            Object {
-              "alpha3": "RWA",
-              "name": "Rwanda",
-            },
-            Object {
-              "alpha3": "SHN",
-              "name": "Saint Helena",
-            },
-            Object {
-              "alpha3": "KNA",
-              "name": "Saint Kitts and Nevis",
-            },
-            Object {
-              "alpha3": "LCA",
-              "name": "Saint Lucia",
-            },
-            Object {
-              "alpha3": "SPM",
-              "name": "Saint Pierre and Miquelon",
-            },
-            Object {
-              "alpha3": "VCT",
-              "name": "Saint Vincent and the Grenadines",
-            },
-            Object {
-              "alpha3": "WSM",
-              "name": "Samoa",
-            },
-            Object {
-              "alpha3": "SMR",
-              "name": "San Marino",
-            },
-            Object {
-              "alpha3": "STP",
-              "name": "Sao Tome and Principe",
-            },
-            Object {
-              "alpha3": "SAU",
-              "name": "Saudi Arabia",
-            },
-            Object {
-              "alpha3": "SEN",
-              "name": "Senegal",
-            },
-            Object {
-              "alpha3": "SYC",
-              "name": "Seychelles",
-            },
-            Object {
-              "alpha3": "SLE",
-              "name": "Sierra Leone",
-            },
-            Object {
-              "alpha3": "SGP",
-              "name": "Singapore",
-            },
-            Object {
-              "alpha3": "SVK",
-              "name": "Slovakia",
-            },
-            Object {
-              "alpha3": "SVN",
-              "name": "Slovenia",
-            },
-            Object {
-              "alpha3": "SLB",
-              "name": "Solomon Islands",
-            },
-            Object {
-              "alpha3": "SOM",
-              "name": "Somalia",
-            },
-            Object {
-              "alpha3": "ZAF",
-              "name": "South Africa",
-            },
-            Object {
-              "alpha3": "SGS",
-              "name": "South Georgia and the South Sandwich Islands",
-            },
-            Object {
-              "alpha3": "ESP",
-              "name": "Spain",
-            },
-            Object {
-              "alpha3": "LKA",
-              "name": "Sri Lanka",
-            },
-            Object {
-              "alpha3": "SDN",
-              "name": "Sudan",
-            },
-            Object {
-              "alpha3": "SUR",
-              "name": "Suriname",
-            },
-            Object {
-              "alpha3": "SJM",
-              "name": "Svalbard and Jan Mayen",
-            },
-            Object {
-              "alpha3": "SWZ",
-              "name": "Swaziland",
-            },
-            Object {
-              "alpha3": "SWE",
-              "name": "Sweden",
-            },
-            Object {
-              "alpha3": "CHE",
-              "name": "Switzerland",
-            },
-            Object {
-              "alpha3": "SYR",
-              "name": "Syrian Arab Republic",
-            },
-            Object {
-              "alpha3": "TWN",
-              "name": "Taiwan",
-            },
-            Object {
-              "alpha3": "TJK",
-              "name": "Tajikistan",
-            },
-            Object {
-              "alpha3": "TZA",
-              "name": "Tanzania, United Republic of",
-            },
-            Object {
-              "alpha3": "THA",
-              "name": "Thailand",
-            },
-            Object {
-              "alpha3": "TLS",
-              "name": "Timor-Leste",
-            },
-            Object {
-              "alpha3": "TGO",
-              "name": "Togo",
-            },
-            Object {
-              "alpha3": "TKL",
-              "name": "Tokelau",
-            },
-            Object {
-              "alpha3": "TON",
-              "name": "Tonga",
-            },
-            Object {
-              "alpha3": "TTO",
-              "name": "Trinidad and Tobago",
-            },
-            Object {
-              "alpha3": "TUN",
-              "name": "Tunisia",
-            },
-            Object {
-              "alpha3": "TUR",
-              "name": "Turkey",
-            },
-            Object {
-              "alpha3": "TKM",
-              "name": "Turkmenistan",
-            },
-            Object {
-              "alpha3": "TCA",
-              "name": "Turks and Caicos Islands",
-            },
-            Object {
-              "alpha3": "TUV",
-              "name": "Tuvalu",
-            },
-            Object {
-              "alpha3": "UGA",
-              "name": "Uganda",
-            },
-            Object {
-              "alpha3": "UKR",
-              "name": "Ukraine",
-            },
-            Object {
-              "alpha3": "ARE",
-              "name": "United Arab Emirates",
-            },
-            Object {
-              "alpha3": "GBR",
-              "name": "United Kingdom",
-            },
-            Object {
-              "alpha3": "USA",
-              "name": "United States of America",
-            },
-            Object {
-              "alpha3": "UMI",
-              "name": "United States Minor Outlying Islands",
-            },
-            Object {
-              "alpha3": "URY",
-              "name": "Uruguay",
-            },
-            Object {
-              "alpha3": "UZB",
-              "name": "Uzbekistan",
-            },
-            Object {
-              "alpha3": "VUT",
-              "name": "Vanuatu",
-            },
-            Object {
-              "alpha3": "VEN",
-              "name": "Venezuela",
-            },
-            Object {
-              "alpha3": "VNM",
-              "name": "Viet Nam",
-            },
-            Object {
-              "alpha3": "VGB",
-              "name": "Virgin Islands, British",
-            },
-            Object {
-              "alpha3": "VIR",
-              "name": "Virgin Islands, U.S.",
-            },
-            Object {
-              "alpha3": "WLF",
-              "name": "Wallis and Futuna",
-            },
-            Object {
-              "alpha3": "ESH",
-              "name": "Western Sahara",
-            },
-            Object {
-              "alpha3": "YEM",
-              "name": "Yemen",
-            },
-            Object {
-              "alpha3": "ZMB",
-              "name": "Zambia",
-            },
-            Object {
-              "alpha3": "ZWE",
-              "name": "Zimbabwe",
-            },
-            Object {
-              "alpha3": "ALA",
-              "name": "Åland Islands",
-            },
-            Object {
-              "alpha3": "BES",
-              "name": "Bonaire, Sint Eustatius and Saba",
-            },
-            Object {
-              "alpha3": "CUW",
-              "name": "Curaçao",
-            },
-            Object {
-              "alpha3": "GGY",
-              "name": "Guernsey",
-            },
-            Object {
-              "alpha3": "IMN",
-              "name": "Isle of Man",
-            },
-            Object {
-              "alpha3": "JEY",
-              "name": "Jersey",
-            },
-            Object {
-              "alpha3": "MNE",
-              "name": "Montenegro",
-            },
-            Object {
-              "alpha3": "BLM",
-              "name": "Saint Barthélemy",
-            },
-            Object {
-              "alpha3": "MAF",
-              "name": "Saint Martin (French part)",
-            },
-            Object {
-              "alpha3": "SRB",
-              "name": "Serbia",
-            },
-            Object {
-              "alpha3": "SXM",
-              "name": "Sint Maarten (Dutch part)",
-            },
-            Object {
-              "alpha3": "SSD",
-              "name": "South Sudan",
-            },
-            Object {
-              "alpha3": "XKX",
-              "name": "Kosovo",
-            },
-          ]
-        }
-        placeholder="Country"
-        selectRef={[Function]}
-        value={
-          Object {
-            "alpha3": "CHN",
-            "name": "China",
-          }
-        }
-        valueKey="name"
-      />
-    </div>
-    <div
-      className="src-shared-components-Settings-Profile-AboutMe-___styles__bio___2xDtf"
-    >
-      <div
-        className="form-label"
-      >
-        short bio
-        <span
-          className="char-count"
-        >
-          5
-          <span
-            className="grey"
-          >
-             / 256
-          </span>
-        </span>
-      </div>
-      <textarea
-        className="topcoder-input"
-        id="profile-bio"
-        maxLength="256"
-        name="bio"
-        onChange={[Function]}
-        placeholder="E.g., I'm a JS architect interested in creating new data interchange formats. I love sci-fi and riding my motorcycle."
-        value="Hello"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/__tests__/shared/components/Settings/Profile/AboutMe/index.jsx b/__tests__/shared/components/Settings/Profile/AboutMe/index.jsx
deleted file mode 100644
index c0b3b7b4b3..0000000000
--- a/__tests__/shared/components/Settings/Profile/AboutMe/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import Renderer from 'react-test-renderer/shallow';
-
-import AboutMe from 'components/Settings/Profile/AboutMe';
-
-import userProfile from '../../__mocks__/user-profile.json';
-import profileState from '../../__mocks__/profile-state.json';
-
-const rnd = new Renderer();
-
-it('renders about me section of profile setting page correctly', () => {
-  rnd.render((<AboutMe
-    handle=""
-    tokenV3=""
-    profile={userProfile}
-    profileState={profileState}
-    bio={userProfile.description}
-    countryCode={userProfile.competitionCountryCode}
-    onUpdateCountry={() => {}}
-    onUpdateBio={() => {}}
-    uploadPhoto={() => {}}
-    deletePhoto={() => {}}
-  />));
-  expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/AddWebLink.jsx b/__tests__/shared/components/Settings/Profile/ExternalLinks/AddWebLink.jsx
deleted file mode 100644
index f6dda2307a..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/AddWebLink.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import Renderer from 'react-test-renderer/shallow';
-
-import AddWebLink from 'components/Settings/Profile/ExternalLinks/AddWebLink';
-
-import profileState from '../../__mocks__/profile-state.json';
-
-const rnd = new Renderer();
-
-it('renders add web link section of profile setting page correctly', () => {
-  rnd.render((<AddWebLink
-    handle=""
-    tokenV3=""
-    profileState={profileState}
-    addWebLink={() => {}}
-  />));
-  expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/ExistingLink.jsx b/__tests__/shared/components/Settings/Profile/ExternalLinks/ExistingLink.jsx
deleted file mode 100644
index 77858be0d0..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/ExistingLink.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import Renderer from 'react-test-renderer/shallow';
-
-import ExistingLink from 'components/Settings/Profile/ExternalLinks/ExistingLink';
-
-const rnd = new Renderer();
-const webLink = { providerType: 'weblink', key: '2222', URL: 'http://www.google.com' };
-
-it('renders existing link of profile setting page correctly', () => {
-  rnd.render((<ExistingLink
-    link={webLink}
-    supportedAccounts={[]}
-    onConfirmDeleteLink={() => {}}
-  />));
-  expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx b/__tests__/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx
deleted file mode 100644
index ca8f5b0160..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Renderer from 'react-test-renderer/shallow';
-
-import ExistingLinks from 'components/Settings/Profile/ExternalLinks/ExistingLinks';
-
-import userProfile from '../../__mocks__/user-profile.json';
-import profileState from '../../__mocks__/profile-state.json';
-
-const rnd = new Renderer();
-
-it('renders existing links section of profile setting page correctly', () => {
-  rnd.render((<ExistingLinks
-    handle=""
-    tokenV3=""
-    profile={userProfile}
-    profileState={profileState}
-    allLinks={[]}
-    supportedAccounts={[]}
-    deleteWebLink={() => {}}
-    unlinkExternalAccount={() => {}}
-  />));
-  expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx b/__tests__/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx
deleted file mode 100644
index 18120ce7c2..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import Renderer from 'react-test-renderer/shallow';
-
-import LinkAccounts from 'components/Settings/Profile/ExternalLinks/LinkAccounts';
-
-import userProfile from '../../__mocks__/user-profile.json';
-
-const rnd = new Renderer();
-
-it('renders link accounts section of profile setting page correctly', () => {
-  rnd.render((<LinkAccounts
-    tokenV3=""
-    profile={userProfile}
-    allLinks={[]}
-    supportedAccounts={[]}
-    linkExternalAccount={() => {}}
-    unlinkExternalAccount={() => {}}
-  />));
-  expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/AddWebLink.jsx.snap b/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/AddWebLink.jsx.snap
deleted file mode 100644
index 9e25fad0bb..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/AddWebLink.jsx.snap
+++ /dev/null
@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders add web link section of profile setting page correctly 1`] = `
-<div
-  className="src-shared-components-Settings-Profile-ExternalLinks-___styles__external-web-link___12AU9"
->
-  <div
-    className="src-shared-components-Settings-Profile-ExternalLinks-___styles__web-link___2XyZP"
-  >
-    <form
-      autoComplete="off"
-      name="addWebLinkFrm"
-      onSubmit={[Function]}
-    >
-      <div
-        className="src-shared-components-Settings-Profile-ExternalLinks-___styles__validation-bar___2YxXd src-shared-components-Settings-Profile-ExternalLinks-___styles__url___3tU32"
-      >
-        <input
-          className="src-shared-components-Settings-Profile-ExternalLinks-___styles__url___3tU32"
-          id="web-link-input"
-          name="url"
-          onChange={[Function]}
-          placeholder="http://www.yourlink.com"
-          required={true}
-          type="text"
-          value=""
-        />
-      </div>
-      <ThemedButton
-        active={false}
-        composeAdhocTheme="deeply"
-        composeContextTheme="softly"
-        disabled={true}
-        enforceA={false}
-        mapThemrProps={[Function]}
-        onClick={[Function]}
-        onMouseDown={null}
-        openNewTab={false}
-        replace={false}
-        size={null}
-        theme={
-          Object {
-            "button": undefined,
-          }
-        }
-        themePriority="adhoc-context-default"
-        to={null}
-        type="button"
-      >
-        Add
-      </ThemedButton>
-    </form>
-  </div>
-</div>
-`;
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/ExistingLink.jsx.snap b/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/ExistingLink.jsx.snap
deleted file mode 100644
index afeb0b7d81..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/ExistingLink.jsx.snap
+++ /dev/null
@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders existing link of profile setting page correctly 1`] = `
-<div
-  className="src-shared-components-Settings-Profile-ExternalLinks-___styles__external-link-tile___1gY4C"
-  onClick={[Function]}
-  role="link"
->
-  <div
-    className="src-shared-components-Settings-Profile-ExternalLinks-___styles__top___2nhjS"
-  >
-    <div
-      className="src-shared-components-Settings-Profile-ExternalLinks-___styles__ext-link-tile_edit-header___2d8cP"
-    >
-      <div
-        className="src-shared-components-Settings-Profile-ExternalLinks-___styles__ext-link-tile_edit-header_delete___1099F"
-        onClick={[Function]}
-        prevent-event-propagation="true"
-        role="button"
-      />
-    </div>
-    <div
-      className="src-shared-components-Settings-Profile-ExternalLinks-___styles__logo___3LsVL"
-    >
-      <i
-        className="fa fa-globe src-shared-components-Settings-Profile-ExternalLinks-___styles__fa-globe___QYxcT"
-      />
-    </div>
-    <h2>
-      weblink
-    </h2>
-  </div>
-  <div
-    className="src-shared-components-Settings-Profile-ExternalLinks-___styles__bottom___7gGxm"
-  >
-    <div>
-      <p
-        className="src-shared-components-Settings-Profile-ExternalLinks-___styles__link-title___2cH7f"
-        data-ellipsis=""
-      />
-      <p
-        className="hidden src-shared-components-Settings-Profile-ExternalLinks-___styles__link-title___2cH7f"
-      >
-        Loading data. This will take a few minutes.
-      </p>
-      <a
-        className="src-shared-components-Settings-Profile-ExternalLinks-___styles__link-url___iTWnA"
-        href="http://www.google.com"
-        id="link-url"
-        prevent-event-propagation="true"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        http://www.google.com
-      </a>
-    </div>
-  </div>
-</div>
-`;
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/ExistingLinks.jsx.snap b/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/ExistingLinks.jsx.snap
deleted file mode 100644
index 58afeae58b..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/ExistingLinks.jsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders existing links section of profile setting page correctly 1`] = `
-<div
-  className="src-shared-components-Settings-Profile-ExternalLinks-___styles__existing-links___2svn-"
->
-  <div
-    className="src-shared-components-Settings-Profile-ExternalLinks-___styles__external-link-list___1xMgi"
-  />
-</div>
-`;
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/LinkAccounts.jsx.snap b/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/LinkAccounts.jsx.snap
deleted file mode 100644
index a9fa4f9969..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/LinkAccounts.jsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders link accounts section of profile setting page correctly 1`] = `
-<div
-  className="src-shared-components-Settings-Profile-ExternalLinks-___styles__external-links___1Yaua"
-/>
-`;
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/index.jsx.snap
deleted file mode 100644
index 781ee3b7b1..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/index.jsx.snap
+++ /dev/null
@@ -1,2341 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders external links section of profile setting page correctly 1`] = `
-<div
-  className="settings-section src-shared-components-Settings-Profile-ExternalLinks-___styles__links___1JKmc"
->
-  <div
-    className="section-info"
-  >
-    <h2>
-      External links
-    </h2>
-    <div
-      className="description"
-    >
-      Show off your work and experience outside of Topcoder. Connect accounts from popular services and networks or add a link to any site.
-    </div>
-  </div>
-  <div
-    className="section-fields"
-  >
-    <div
-      className="form-label"
-    >
-      Add a web link
-    </div>
-    <AddWebLink
-      addWebLink={[Function]}
-      allLinks={
-        Array [
-          Object {
-            "data": Object {
-              "handle": "tcscoder",
-            },
-            "providerType": "github",
-            "status": "pending",
-          },
-          Object {
-            "data": Object {
-              "handle": "1233342",
-            },
-            "providerType": "stackoverflow",
-            "status": "pending",
-          },
-          Object {
-            "URL": "https://www.google.com",
-            "description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
-            "entities": null,
-            "handle": "tcscoder",
-            "images": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
-            "key": "4c7136cdbbf227274e49c475e7541abf",
-            "keywords": null,
-            "providerType": "weblink",
-            "source": "embed.ly",
-            "status": "linked",
-            "synchronizedAt": 1525560141959,
-            "title": "Google",
-            "userId": 22655076,
-          },
-        ]
-      }
-      deleteWebLink={[Function]}
-      handle=""
-      linkExternalAccount={[Function]}
-      profile={
-        Object {
-          "addresses": Array [
-            Object {
-              "city": "Cheng Du",
-              "createdAt": null,
-              "createdBy": "",
-              "stateCode": "Sichuan",
-              "streetAddr1": "Street line 1, #432",
-              "streetAddr2": "",
-              "type": "HOME",
-              "updatedAt": null,
-              "updatedBy": "",
-              "zip": "610101",
-            },
-          ],
-          "competitionCountryCode": "CHN",
-          "createdAt": "2006-10-06T08:49Z",
-          "createdBy": "22655076",
-          "description": "Hello",
-          "email": "tcscoder@gmail.com",
-          "firstName": "Mike",
-          "groups": Array [
-            Object {
-              "createdAt": "2017-09-11T13:54:47.000Z",
-              "createdBy": "8547899",
-              "description": "Blockchain",
-              "id": "20000010",
-              "modifiedAt": null,
-              "modifiedBy": null,
-              "name": "Blockchain",
-              "parentGroup": null,
-              "privateGroup": true,
-              "selfRegister": true,
-              "subGroups": null,
-            },
-            Object {
-              "createdAt": "2017-10-19T10:54:47.000Z",
-              "createdBy": "8547899",
-              "description": "Veterans",
-              "id": "20000013",
-              "modifiedAt": null,
-              "modifiedBy": null,
-              "name": "Veterans",
-              "parentGroup": null,
-              "privateGroup": true,
-              "selfRegister": true,
-              "subGroups": null,
-            },
-            Object {
-              "createdAt": "2017-11-06T15:49:35.000Z",
-              "createdBy": "8547899",
-              "description": "Cognitive Community",
-              "id": "20000015",
-              "modifiedAt": null,
-              "modifiedBy": null,
-              "name": "Cognitive",
-              "parentGroup": null,
-              "privateGroup": true,
-              "selfRegister": true,
-              "subGroups": null,
-            },
-          ],
-          "handle": "tcscoder",
-          "handleLower": "tcscoder",
-          "homeCountryCode": "CHN",
-          "lastName": "Smith",
-          "maxRating": Object {
-            "rating": 2162,
-            "subTrack": "DEVELOPMENT",
-            "track": "DEVELOP",
-          },
-          "otherLangName": "Som",
-          "photoURL": "https://topcoder-prod-media.s3.amazonaws.com/member/profile/tcscoder-1525559661069.png",
-          "status": "ACTIVE",
-          "tracks": Array [
-            "DEVELOP",
-          ],
-          "updatedAt": "2018-05-05T22:34Z",
-          "updatedBy": "22655076",
-          "userId": 22655076,
-        }
-      }
-      profileState={
-        Object {
-          "achievements": Array [
-            Object {
-              "date": "2016-09-02T00:00:00.000-04:00",
-              "description": "iOS Developer Challenger Badge",
-            },
-            Object {
-              "date": "2015-08-05T00:00:00.000-04:00",
-              "description": "Participant Badge",
-            },
-            Object {
-              "date": "2015-08-05T00:00:00.000-04:00",
-              "description": "iOS Participant Badge",
-            },
-            Object {
-              "date": "2014-07-01T00:00:00.000-04:00",
-              "description": "Digital Run Top Five",
-            },
-            Object {
-              "date": "2014-07-01T00:00:00.000-04:00",
-              "description": "Digital Run Winner",
-            },
-            Object {
-              "date": "2014-02-11T00:00:00.000-05:00",
-              "description": "First Milestone Prize",
-            },
-            Object {
-              "date": "2013-03-15T00:00:00.000-04:00",
-              "description": "First Forum Post",
-            },
-            Object {
-              "date": "2013-03-04T00:00:00.000-05:00",
-              "description": "First Passing Submission",
-            },
-            Object {
-              "date": "2013-02-28T00:00:00.000-05:00",
-              "description": "First Placement",
-            },
-            Object {
-              "date": "2013-02-28T00:00:00.000-05:00",
-              "description": "First Win",
-            },
-            Object {
-              "date": "2012-11-09T00:00:00.000-05:00",
-              "description": "One Hundred Forum Posts",
-            },
-            Object {
-              "date": "2010-10-09T00:00:00.000-04:00",
-              "description": "Five Hundred Forum Posts",
-            },
-            Object {
-              "date": "2009-04-04T00:00:00.000-04:00",
-              "description": "Twenty Five Placements",
-            },
-            Object {
-              "date": "2008-07-01T00:00:00.000-04:00",
-              "description": "Twenty Five First Placement Win",
-            },
-            Object {
-              "date": "2008-06-11T00:00:00.000-04:00",
-              "description": "One Thousand Forum Posts",
-            },
-            Object {
-              "date": "2008-05-12T00:00:00.000-04:00",
-              "description": "Fifty Passing Submissions",
-            },
-            Object {
-              "date": "2008-05-03T00:00:00.000-04:00",
-              "description": "Fifty Placements",
-            },
-            Object {
-              "date": "2008-05-01T00:00:00.000-04:00",
-              "description": "TopCoder Development Coder of the Month for May 2008",
-            },
-            Object {
-              "date": "2007-03-30T00:00:00.000-04:00",
-              "description": "Fifty First Placement Win",
-            },
-            Object {
-              "date": "2006-11-03T00:00:00.000-05:00",
-              "description": "One Hundred Passing Submissions",
-            },
-            Object {
-              "date": "2006-10-28T00:00:00.000-04:00",
-              "description": "One Hundred First Placement Win",
-            },
-            Object {
-              "date": "2006-10-28T00:00:00.000-04:00",
-              "description": "One hundred Placements",
-            },
-            Object {
-              "date": "2006-10-28T00:00:00.000-04:00",
-              "description": "SRM Engagement Honor",
-            },
-          ],
-          "copilot": false,
-          "country": "China",
-          "credential": Object {
-            "activationCode": "SDUUH(HFS",
-            "hasPassword": true,
-            "resetToken": null,
-          },
-          "emailPreferences": Object {
-            "TOPCODER_NL_DESIGN": true,
-            "TOPCODER_NL_DEV": true,
-            "TOPCODER_NL_GEN": true,
-          },
-          "externalAccounts": Object {
-            "behance": null,
-            "bitbucket": null,
-            "createdAt": null,
-            "createdBy": null,
-            "dribbble": null,
-            "github": null,
-            "handle": "tcscoder",
-            "linkedin": null,
-            "stackoverflow": null,
-            "twitter": null,
-            "updatedAt": null,
-            "updatedBy": null,
-            "userId": 22655076,
-          },
-          "externalLinks": Array [
-            Object {
-              "URL": "https://www.google.com",
-              "description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
-              "entities": null,
-              "handle": "tcscoder",
-              "images": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
-              "key": "4c7136cdbbf227274e49c475e7541abf",
-              "keywords": null,
-              "source": "embed.ly",
-              "synchronizedAt": 1525560141959,
-              "title": "Google",
-              "userId": 22655076,
-            },
-          ],
-          "info": null,
-          "linkedAccounts": Array [
-            Object {
-              "context": null,
-              "email": "tcscoder@gmail.com",
-              "emailVerified": false,
-              "enterprise": false,
-              "name": "tcscoder",
-              "provider": null,
-              "providerType": "github",
-              "social": true,
-              "userId": "623633",
-            },
-            Object {
-              "context": null,
-              "email": "",
-              "emailVerified": false,
-              "enterprise": false,
-              "name": "1233342",
-              "provider": null,
-              "providerType": "stackoverflow",
-              "social": true,
-              "userId": "1233342",
-            },
-          ],
-          "loadingError": false,
-          "profileForHandle": "tcscoder",
-          "skills": Object {
-            "100": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": ".NET",
-            },
-            "101": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "ActionScript",
-            },
-            "109": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Android",
-            },
-            "110": Object {
-              "hidden": false,
-              "score": 10,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "AngularJS",
-            },
-            "115": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "USER_ENTERED",
-              ],
-              "tagName": "Apache Kafka",
-            },
-            "117": Object {
-              "hidden": false,
-              "score": 4,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "API",
-            },
-            "127": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Blackberry SDK",
-            },
-            "132": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "C#",
-            },
-            "153": Object {
-              "hidden": false,
-              "score": 10,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "CSS",
-            },
-            "154": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "USER_ENTERED",
-              ],
-              "tagName": "CSS3",
-            },
-            "163": Object {
-              "hidden": false,
-              "score": 5,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Docker",
-            },
-            "170": Object {
-              "hidden": false,
-              "score": 18,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "EJB",
-            },
-            "171": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Elasticsearch",
-            },
-            "177": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Express",
-            },
-            "182": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "Flex",
-            },
-            "186": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Force.Com Sites",
-            },
-            "211": Object {
-              "hidden": false,
-              "score": 12,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Hibernate",
-            },
-            "212": Object {
-              "hidden": false,
-              "score": 6,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "HTML",
-            },
-            "213": Object {
-              "hidden": false,
-              "score": 12,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "HTML5",
-            },
-            "214": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "HTTP",
-            },
-            "219": Object {
-              "hidden": false,
-              "score": 5,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "IBM DB2",
-            },
-            "229": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "IBM Websphere Application Server",
-            },
-            "232": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "IBM WebSphere MQ",
-            },
-            "244": Object {
-              "hidden": false,
-              "score": 15,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "J2EE",
-            },
-            "247": Object {
-              "hidden": false,
-              "score": 123,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Java",
-            },
-            "248": Object {
-              "hidden": false,
-              "score": 20,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JavaScript",
-            },
-            "249": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JBoss Seam",
-            },
-            "250": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JDBC",
-            },
-            "254": Object {
-              "hidden": false,
-              "score": 9,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JPA",
-            },
-            "255": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "jQuery",
-            },
-            "258": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "JSF",
-            },
-            "259": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JSON",
-            },
-            "260": Object {
-              "hidden": false,
-              "score": 21,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "JSP",
-            },
-            "276": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Maven",
-            },
-            "281": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "MongoDB",
-            },
-            "284": Object {
-              "hidden": false,
-              "score": 7,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "MySql",
-            },
-            "286": Object {
-              "hidden": false,
-              "score": 18,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "Node.js",
-            },
-            "295": Object {
-              "hidden": false,
-              "score": 14,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Oracle Database",
-            },
-            "303": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "PHP",
-            },
-            "306": Object {
-              "hidden": false,
-              "score": 8,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "PostgreSQL",
-            },
-            "315": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "USER_ENTERED",
-              ],
-              "tagName": "React.js",
-            },
-            "323": Object {
-              "hidden": false,
-              "score": 5,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "REST",
-            },
-            "328": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Salesforce",
-            },
-            "337": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Servlet",
-            },
-            "344": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "Sharepoint 3.0",
-            },
-            "354": Object {
-              "hidden": false,
-              "score": 15,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Spring",
-            },
-            "355": Object {
-              "hidden": false,
-              "score": 4,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "SQL",
-            },
-            "356": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "SQL Server",
-            },
-            "362": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Struts",
-            },
-            "387": Object {
-              "hidden": false,
-              "score": 8,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Web Services",
-            },
-            "401": Object {
-              "hidden": false,
-              "score": 6,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "XML",
-            },
-            "402": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "XSL",
-            },
-          },
-          "stats": null,
-        }
-      }
-      settingsPageState={Object {}}
-      tokenV3=""
-      unlinkExternalAccount={[Function]}
-    />
-    <div
-      className="form-label"
-    >
-      Link Your Accounts
-    </div>
-    <LinkAccounts
-      addWebLink={[Function]}
-      allLinks={
-        Array [
-          Object {
-            "data": Object {
-              "handle": "tcscoder",
-            },
-            "providerType": "github",
-            "status": "pending",
-          },
-          Object {
-            "data": Object {
-              "handle": "1233342",
-            },
-            "providerType": "stackoverflow",
-            "status": "pending",
-          },
-          Object {
-            "URL": "https://www.google.com",
-            "description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
-            "entities": null,
-            "handle": "tcscoder",
-            "images": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
-            "key": "4c7136cdbbf227274e49c475e7541abf",
-            "keywords": null,
-            "providerType": "weblink",
-            "source": "embed.ly",
-            "status": "linked",
-            "synchronizedAt": 1525560141959,
-            "title": "Google",
-            "userId": 22655076,
-          },
-        ]
-      }
-      deleteWebLink={[Function]}
-      handle=""
-      linkExternalAccount={[Function]}
-      profile={
-        Object {
-          "addresses": Array [
-            Object {
-              "city": "Cheng Du",
-              "createdAt": null,
-              "createdBy": "",
-              "stateCode": "Sichuan",
-              "streetAddr1": "Street line 1, #432",
-              "streetAddr2": "",
-              "type": "HOME",
-              "updatedAt": null,
-              "updatedBy": "",
-              "zip": "610101",
-            },
-          ],
-          "competitionCountryCode": "CHN",
-          "createdAt": "2006-10-06T08:49Z",
-          "createdBy": "22655076",
-          "description": "Hello",
-          "email": "tcscoder@gmail.com",
-          "firstName": "Mike",
-          "groups": Array [
-            Object {
-              "createdAt": "2017-09-11T13:54:47.000Z",
-              "createdBy": "8547899",
-              "description": "Blockchain",
-              "id": "20000010",
-              "modifiedAt": null,
-              "modifiedBy": null,
-              "name": "Blockchain",
-              "parentGroup": null,
-              "privateGroup": true,
-              "selfRegister": true,
-              "subGroups": null,
-            },
-            Object {
-              "createdAt": "2017-10-19T10:54:47.000Z",
-              "createdBy": "8547899",
-              "description": "Veterans",
-              "id": "20000013",
-              "modifiedAt": null,
-              "modifiedBy": null,
-              "name": "Veterans",
-              "parentGroup": null,
-              "privateGroup": true,
-              "selfRegister": true,
-              "subGroups": null,
-            },
-            Object {
-              "createdAt": "2017-11-06T15:49:35.000Z",
-              "createdBy": "8547899",
-              "description": "Cognitive Community",
-              "id": "20000015",
-              "modifiedAt": null,
-              "modifiedBy": null,
-              "name": "Cognitive",
-              "parentGroup": null,
-              "privateGroup": true,
-              "selfRegister": true,
-              "subGroups": null,
-            },
-          ],
-          "handle": "tcscoder",
-          "handleLower": "tcscoder",
-          "homeCountryCode": "CHN",
-          "lastName": "Smith",
-          "maxRating": Object {
-            "rating": 2162,
-            "subTrack": "DEVELOPMENT",
-            "track": "DEVELOP",
-          },
-          "otherLangName": "Som",
-          "photoURL": "https://topcoder-prod-media.s3.amazonaws.com/member/profile/tcscoder-1525559661069.png",
-          "status": "ACTIVE",
-          "tracks": Array [
-            "DEVELOP",
-          ],
-          "updatedAt": "2018-05-05T22:34Z",
-          "updatedBy": "22655076",
-          "userId": 22655076,
-        }
-      }
-      profileState={
-        Object {
-          "achievements": Array [
-            Object {
-              "date": "2016-09-02T00:00:00.000-04:00",
-              "description": "iOS Developer Challenger Badge",
-            },
-            Object {
-              "date": "2015-08-05T00:00:00.000-04:00",
-              "description": "Participant Badge",
-            },
-            Object {
-              "date": "2015-08-05T00:00:00.000-04:00",
-              "description": "iOS Participant Badge",
-            },
-            Object {
-              "date": "2014-07-01T00:00:00.000-04:00",
-              "description": "Digital Run Top Five",
-            },
-            Object {
-              "date": "2014-07-01T00:00:00.000-04:00",
-              "description": "Digital Run Winner",
-            },
-            Object {
-              "date": "2014-02-11T00:00:00.000-05:00",
-              "description": "First Milestone Prize",
-            },
-            Object {
-              "date": "2013-03-15T00:00:00.000-04:00",
-              "description": "First Forum Post",
-            },
-            Object {
-              "date": "2013-03-04T00:00:00.000-05:00",
-              "description": "First Passing Submission",
-            },
-            Object {
-              "date": "2013-02-28T00:00:00.000-05:00",
-              "description": "First Placement",
-            },
-            Object {
-              "date": "2013-02-28T00:00:00.000-05:00",
-              "description": "First Win",
-            },
-            Object {
-              "date": "2012-11-09T00:00:00.000-05:00",
-              "description": "One Hundred Forum Posts",
-            },
-            Object {
-              "date": "2010-10-09T00:00:00.000-04:00",
-              "description": "Five Hundred Forum Posts",
-            },
-            Object {
-              "date": "2009-04-04T00:00:00.000-04:00",
-              "description": "Twenty Five Placements",
-            },
-            Object {
-              "date": "2008-07-01T00:00:00.000-04:00",
-              "description": "Twenty Five First Placement Win",
-            },
-            Object {
-              "date": "2008-06-11T00:00:00.000-04:00",
-              "description": "One Thousand Forum Posts",
-            },
-            Object {
-              "date": "2008-05-12T00:00:00.000-04:00",
-              "description": "Fifty Passing Submissions",
-            },
-            Object {
-              "date": "2008-05-03T00:00:00.000-04:00",
-              "description": "Fifty Placements",
-            },
-            Object {
-              "date": "2008-05-01T00:00:00.000-04:00",
-              "description": "TopCoder Development Coder of the Month for May 2008",
-            },
-            Object {
-              "date": "2007-03-30T00:00:00.000-04:00",
-              "description": "Fifty First Placement Win",
-            },
-            Object {
-              "date": "2006-11-03T00:00:00.000-05:00",
-              "description": "One Hundred Passing Submissions",
-            },
-            Object {
-              "date": "2006-10-28T00:00:00.000-04:00",
-              "description": "One Hundred First Placement Win",
-            },
-            Object {
-              "date": "2006-10-28T00:00:00.000-04:00",
-              "description": "One hundred Placements",
-            },
-            Object {
-              "date": "2006-10-28T00:00:00.000-04:00",
-              "description": "SRM Engagement Honor",
-            },
-          ],
-          "copilot": false,
-          "country": "China",
-          "credential": Object {
-            "activationCode": "SDUUH(HFS",
-            "hasPassword": true,
-            "resetToken": null,
-          },
-          "emailPreferences": Object {
-            "TOPCODER_NL_DESIGN": true,
-            "TOPCODER_NL_DEV": true,
-            "TOPCODER_NL_GEN": true,
-          },
-          "externalAccounts": Object {
-            "behance": null,
-            "bitbucket": null,
-            "createdAt": null,
-            "createdBy": null,
-            "dribbble": null,
-            "github": null,
-            "handle": "tcscoder",
-            "linkedin": null,
-            "stackoverflow": null,
-            "twitter": null,
-            "updatedAt": null,
-            "updatedBy": null,
-            "userId": 22655076,
-          },
-          "externalLinks": Array [
-            Object {
-              "URL": "https://www.google.com",
-              "description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
-              "entities": null,
-              "handle": "tcscoder",
-              "images": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
-              "key": "4c7136cdbbf227274e49c475e7541abf",
-              "keywords": null,
-              "source": "embed.ly",
-              "synchronizedAt": 1525560141959,
-              "title": "Google",
-              "userId": 22655076,
-            },
-          ],
-          "info": null,
-          "linkedAccounts": Array [
-            Object {
-              "context": null,
-              "email": "tcscoder@gmail.com",
-              "emailVerified": false,
-              "enterprise": false,
-              "name": "tcscoder",
-              "provider": null,
-              "providerType": "github",
-              "social": true,
-              "userId": "623633",
-            },
-            Object {
-              "context": null,
-              "email": "",
-              "emailVerified": false,
-              "enterprise": false,
-              "name": "1233342",
-              "provider": null,
-              "providerType": "stackoverflow",
-              "social": true,
-              "userId": "1233342",
-            },
-          ],
-          "loadingError": false,
-          "profileForHandle": "tcscoder",
-          "skills": Object {
-            "100": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": ".NET",
-            },
-            "101": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "ActionScript",
-            },
-            "109": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Android",
-            },
-            "110": Object {
-              "hidden": false,
-              "score": 10,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "AngularJS",
-            },
-            "115": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "USER_ENTERED",
-              ],
-              "tagName": "Apache Kafka",
-            },
-            "117": Object {
-              "hidden": false,
-              "score": 4,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "API",
-            },
-            "127": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Blackberry SDK",
-            },
-            "132": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "C#",
-            },
-            "153": Object {
-              "hidden": false,
-              "score": 10,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "CSS",
-            },
-            "154": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "USER_ENTERED",
-              ],
-              "tagName": "CSS3",
-            },
-            "163": Object {
-              "hidden": false,
-              "score": 5,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Docker",
-            },
-            "170": Object {
-              "hidden": false,
-              "score": 18,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "EJB",
-            },
-            "171": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Elasticsearch",
-            },
-            "177": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Express",
-            },
-            "182": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "Flex",
-            },
-            "186": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Force.Com Sites",
-            },
-            "211": Object {
-              "hidden": false,
-              "score": 12,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Hibernate",
-            },
-            "212": Object {
-              "hidden": false,
-              "score": 6,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "HTML",
-            },
-            "213": Object {
-              "hidden": false,
-              "score": 12,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "HTML5",
-            },
-            "214": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "HTTP",
-            },
-            "219": Object {
-              "hidden": false,
-              "score": 5,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "IBM DB2",
-            },
-            "229": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "IBM Websphere Application Server",
-            },
-            "232": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "IBM WebSphere MQ",
-            },
-            "244": Object {
-              "hidden": false,
-              "score": 15,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "J2EE",
-            },
-            "247": Object {
-              "hidden": false,
-              "score": 123,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Java",
-            },
-            "248": Object {
-              "hidden": false,
-              "score": 20,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JavaScript",
-            },
-            "249": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JBoss Seam",
-            },
-            "250": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JDBC",
-            },
-            "254": Object {
-              "hidden": false,
-              "score": 9,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JPA",
-            },
-            "255": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "jQuery",
-            },
-            "258": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "JSF",
-            },
-            "259": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JSON",
-            },
-            "260": Object {
-              "hidden": false,
-              "score": 21,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "JSP",
-            },
-            "276": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Maven",
-            },
-            "281": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "MongoDB",
-            },
-            "284": Object {
-              "hidden": false,
-              "score": 7,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "MySql",
-            },
-            "286": Object {
-              "hidden": false,
-              "score": 18,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "Node.js",
-            },
-            "295": Object {
-              "hidden": false,
-              "score": 14,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Oracle Database",
-            },
-            "303": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "PHP",
-            },
-            "306": Object {
-              "hidden": false,
-              "score": 8,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "PostgreSQL",
-            },
-            "315": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "USER_ENTERED",
-              ],
-              "tagName": "React.js",
-            },
-            "323": Object {
-              "hidden": false,
-              "score": 5,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "REST",
-            },
-            "328": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Salesforce",
-            },
-            "337": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Servlet",
-            },
-            "344": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "Sharepoint 3.0",
-            },
-            "354": Object {
-              "hidden": false,
-              "score": 15,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Spring",
-            },
-            "355": Object {
-              "hidden": false,
-              "score": 4,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "SQL",
-            },
-            "356": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "SQL Server",
-            },
-            "362": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Struts",
-            },
-            "387": Object {
-              "hidden": false,
-              "score": 8,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Web Services",
-            },
-            "401": Object {
-              "hidden": false,
-              "score": 6,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "XML",
-            },
-            "402": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "XSL",
-            },
-          },
-          "stats": null,
-        }
-      }
-      settingsPageState={Object {}}
-      supportedAccounts={
-        Array [
-          Object {
-            "className": "fa-dribbble",
-            "colorClass": "el-dribble",
-            "disabled": false,
-            "displayName": "Dribbble",
-            "featured": true,
-            "order": 6,
-            "providerType": "dribbble",
-          },
-          Object {
-            "className": "fa-linkedin",
-            "colorClass": "el-linkedin",
-            "disabled": true,
-            "displayName": "LinkedIn",
-            "featured": true,
-            "order": 5,
-            "providerType": "linkedin",
-          },
-          Object {
-            "className": "fa-stack-overflow",
-            "colorClass": "el-stackoverflow",
-            "disabled": false,
-            "displayName": "Stack Overflow",
-            "order": 3,
-            "providerType": "stackoverflow",
-          },
-          Object {
-            "className": "fa-behance",
-            "colorClass": "el-behance",
-            "disabled": true,
-            "displayName": "Behance",
-            "order": 2,
-            "providerType": "behance",
-          },
-          Object {
-            "className": "fa-github",
-            "colorClass": "el-github",
-            "disabled": false,
-            "displayName": "Github",
-            "featured": true,
-            "order": 1,
-            "providerType": "github",
-          },
-          Object {
-            "className": "fa-bitbucket",
-            "colorClass": "el-bitbucket",
-            "disabled": false,
-            "displayName": "Bitbucket",
-            "order": 7,
-            "providerType": "bitbucket",
-          },
-          Object {
-            "className": "fa-twitter",
-            "colorClass": "el-twitter",
-            "disabled": true,
-            "displayName": "Twitter",
-            "order": 4,
-            "providerType": "twitter",
-          },
-          Object {
-            "className": "fa-globe",
-            "colorClass": "el-weblinks",
-            "disabled": true,
-            "displayName": "Web Links",
-            "order": -1,
-            "providerType": "weblink",
-          },
-        ]
-      }
-      tokenV3=""
-      unlinkExternalAccount={[Function]}
-    />
-    <div
-      className="form-label"
-    >
-      Linked Accounts
-    </div>
-    <ExistingLinks
-      addWebLink={[Function]}
-      allLinks={
-        Array [
-          Object {
-            "data": Object {
-              "handle": "tcscoder",
-            },
-            "providerType": "github",
-            "status": "pending",
-          },
-          Object {
-            "data": Object {
-              "handle": "1233342",
-            },
-            "providerType": "stackoverflow",
-            "status": "pending",
-          },
-          Object {
-            "URL": "https://www.google.com",
-            "description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
-            "entities": null,
-            "handle": "tcscoder",
-            "images": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
-            "key": "4c7136cdbbf227274e49c475e7541abf",
-            "keywords": null,
-            "providerType": "weblink",
-            "source": "embed.ly",
-            "status": "linked",
-            "synchronizedAt": 1525560141959,
-            "title": "Google",
-            "userId": 22655076,
-          },
-        ]
-      }
-      deleteWebLink={[Function]}
-      handle=""
-      linkExternalAccount={[Function]}
-      profile={
-        Object {
-          "addresses": Array [
-            Object {
-              "city": "Cheng Du",
-              "createdAt": null,
-              "createdBy": "",
-              "stateCode": "Sichuan",
-              "streetAddr1": "Street line 1, #432",
-              "streetAddr2": "",
-              "type": "HOME",
-              "updatedAt": null,
-              "updatedBy": "",
-              "zip": "610101",
-            },
-          ],
-          "competitionCountryCode": "CHN",
-          "createdAt": "2006-10-06T08:49Z",
-          "createdBy": "22655076",
-          "description": "Hello",
-          "email": "tcscoder@gmail.com",
-          "firstName": "Mike",
-          "groups": Array [
-            Object {
-              "createdAt": "2017-09-11T13:54:47.000Z",
-              "createdBy": "8547899",
-              "description": "Blockchain",
-              "id": "20000010",
-              "modifiedAt": null,
-              "modifiedBy": null,
-              "name": "Blockchain",
-              "parentGroup": null,
-              "privateGroup": true,
-              "selfRegister": true,
-              "subGroups": null,
-            },
-            Object {
-              "createdAt": "2017-10-19T10:54:47.000Z",
-              "createdBy": "8547899",
-              "description": "Veterans",
-              "id": "20000013",
-              "modifiedAt": null,
-              "modifiedBy": null,
-              "name": "Veterans",
-              "parentGroup": null,
-              "privateGroup": true,
-              "selfRegister": true,
-              "subGroups": null,
-            },
-            Object {
-              "createdAt": "2017-11-06T15:49:35.000Z",
-              "createdBy": "8547899",
-              "description": "Cognitive Community",
-              "id": "20000015",
-              "modifiedAt": null,
-              "modifiedBy": null,
-              "name": "Cognitive",
-              "parentGroup": null,
-              "privateGroup": true,
-              "selfRegister": true,
-              "subGroups": null,
-            },
-          ],
-          "handle": "tcscoder",
-          "handleLower": "tcscoder",
-          "homeCountryCode": "CHN",
-          "lastName": "Smith",
-          "maxRating": Object {
-            "rating": 2162,
-            "subTrack": "DEVELOPMENT",
-            "track": "DEVELOP",
-          },
-          "otherLangName": "Som",
-          "photoURL": "https://topcoder-prod-media.s3.amazonaws.com/member/profile/tcscoder-1525559661069.png",
-          "status": "ACTIVE",
-          "tracks": Array [
-            "DEVELOP",
-          ],
-          "updatedAt": "2018-05-05T22:34Z",
-          "updatedBy": "22655076",
-          "userId": 22655076,
-        }
-      }
-      profileState={
-        Object {
-          "achievements": Array [
-            Object {
-              "date": "2016-09-02T00:00:00.000-04:00",
-              "description": "iOS Developer Challenger Badge",
-            },
-            Object {
-              "date": "2015-08-05T00:00:00.000-04:00",
-              "description": "Participant Badge",
-            },
-            Object {
-              "date": "2015-08-05T00:00:00.000-04:00",
-              "description": "iOS Participant Badge",
-            },
-            Object {
-              "date": "2014-07-01T00:00:00.000-04:00",
-              "description": "Digital Run Top Five",
-            },
-            Object {
-              "date": "2014-07-01T00:00:00.000-04:00",
-              "description": "Digital Run Winner",
-            },
-            Object {
-              "date": "2014-02-11T00:00:00.000-05:00",
-              "description": "First Milestone Prize",
-            },
-            Object {
-              "date": "2013-03-15T00:00:00.000-04:00",
-              "description": "First Forum Post",
-            },
-            Object {
-              "date": "2013-03-04T00:00:00.000-05:00",
-              "description": "First Passing Submission",
-            },
-            Object {
-              "date": "2013-02-28T00:00:00.000-05:00",
-              "description": "First Placement",
-            },
-            Object {
-              "date": "2013-02-28T00:00:00.000-05:00",
-              "description": "First Win",
-            },
-            Object {
-              "date": "2012-11-09T00:00:00.000-05:00",
-              "description": "One Hundred Forum Posts",
-            },
-            Object {
-              "date": "2010-10-09T00:00:00.000-04:00",
-              "description": "Five Hundred Forum Posts",
-            },
-            Object {
-              "date": "2009-04-04T00:00:00.000-04:00",
-              "description": "Twenty Five Placements",
-            },
-            Object {
-              "date": "2008-07-01T00:00:00.000-04:00",
-              "description": "Twenty Five First Placement Win",
-            },
-            Object {
-              "date": "2008-06-11T00:00:00.000-04:00",
-              "description": "One Thousand Forum Posts",
-            },
-            Object {
-              "date": "2008-05-12T00:00:00.000-04:00",
-              "description": "Fifty Passing Submissions",
-            },
-            Object {
-              "date": "2008-05-03T00:00:00.000-04:00",
-              "description": "Fifty Placements",
-            },
-            Object {
-              "date": "2008-05-01T00:00:00.000-04:00",
-              "description": "TopCoder Development Coder of the Month for May 2008",
-            },
-            Object {
-              "date": "2007-03-30T00:00:00.000-04:00",
-              "description": "Fifty First Placement Win",
-            },
-            Object {
-              "date": "2006-11-03T00:00:00.000-05:00",
-              "description": "One Hundred Passing Submissions",
-            },
-            Object {
-              "date": "2006-10-28T00:00:00.000-04:00",
-              "description": "One Hundred First Placement Win",
-            },
-            Object {
-              "date": "2006-10-28T00:00:00.000-04:00",
-              "description": "One hundred Placements",
-            },
-            Object {
-              "date": "2006-10-28T00:00:00.000-04:00",
-              "description": "SRM Engagement Honor",
-            },
-          ],
-          "copilot": false,
-          "country": "China",
-          "credential": Object {
-            "activationCode": "SDUUH(HFS",
-            "hasPassword": true,
-            "resetToken": null,
-          },
-          "emailPreferences": Object {
-            "TOPCODER_NL_DESIGN": true,
-            "TOPCODER_NL_DEV": true,
-            "TOPCODER_NL_GEN": true,
-          },
-          "externalAccounts": Object {
-            "behance": null,
-            "bitbucket": null,
-            "createdAt": null,
-            "createdBy": null,
-            "dribbble": null,
-            "github": null,
-            "handle": "tcscoder",
-            "linkedin": null,
-            "stackoverflow": null,
-            "twitter": null,
-            "updatedAt": null,
-            "updatedBy": null,
-            "userId": 22655076,
-          },
-          "externalLinks": Array [
-            Object {
-              "URL": "https://www.google.com",
-              "description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
-              "entities": null,
-              "handle": "tcscoder",
-              "images": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
-              "key": "4c7136cdbbf227274e49c475e7541abf",
-              "keywords": null,
-              "source": "embed.ly",
-              "synchronizedAt": 1525560141959,
-              "title": "Google",
-              "userId": 22655076,
-            },
-          ],
-          "info": null,
-          "linkedAccounts": Array [
-            Object {
-              "context": null,
-              "email": "tcscoder@gmail.com",
-              "emailVerified": false,
-              "enterprise": false,
-              "name": "tcscoder",
-              "provider": null,
-              "providerType": "github",
-              "social": true,
-              "userId": "623633",
-            },
-            Object {
-              "context": null,
-              "email": "",
-              "emailVerified": false,
-              "enterprise": false,
-              "name": "1233342",
-              "provider": null,
-              "providerType": "stackoverflow",
-              "social": true,
-              "userId": "1233342",
-            },
-          ],
-          "loadingError": false,
-          "profileForHandle": "tcscoder",
-          "skills": Object {
-            "100": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": ".NET",
-            },
-            "101": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "ActionScript",
-            },
-            "109": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Android",
-            },
-            "110": Object {
-              "hidden": false,
-              "score": 10,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "AngularJS",
-            },
-            "115": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "USER_ENTERED",
-              ],
-              "tagName": "Apache Kafka",
-            },
-            "117": Object {
-              "hidden": false,
-              "score": 4,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "API",
-            },
-            "127": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Blackberry SDK",
-            },
-            "132": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "C#",
-            },
-            "153": Object {
-              "hidden": false,
-              "score": 10,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "CSS",
-            },
-            "154": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "USER_ENTERED",
-              ],
-              "tagName": "CSS3",
-            },
-            "163": Object {
-              "hidden": false,
-              "score": 5,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Docker",
-            },
-            "170": Object {
-              "hidden": false,
-              "score": 18,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "EJB",
-            },
-            "171": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Elasticsearch",
-            },
-            "177": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Express",
-            },
-            "182": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "Flex",
-            },
-            "186": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Force.Com Sites",
-            },
-            "211": Object {
-              "hidden": false,
-              "score": 12,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Hibernate",
-            },
-            "212": Object {
-              "hidden": false,
-              "score": 6,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "HTML",
-            },
-            "213": Object {
-              "hidden": false,
-              "score": 12,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "HTML5",
-            },
-            "214": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "HTTP",
-            },
-            "219": Object {
-              "hidden": false,
-              "score": 5,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "IBM DB2",
-            },
-            "229": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "IBM Websphere Application Server",
-            },
-            "232": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "IBM WebSphere MQ",
-            },
-            "244": Object {
-              "hidden": false,
-              "score": 15,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "J2EE",
-            },
-            "247": Object {
-              "hidden": false,
-              "score": 123,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Java",
-            },
-            "248": Object {
-              "hidden": false,
-              "score": 20,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JavaScript",
-            },
-            "249": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JBoss Seam",
-            },
-            "250": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JDBC",
-            },
-            "254": Object {
-              "hidden": false,
-              "score": 9,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JPA",
-            },
-            "255": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "jQuery",
-            },
-            "258": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "JSF",
-            },
-            "259": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "JSON",
-            },
-            "260": Object {
-              "hidden": false,
-              "score": 21,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "JSP",
-            },
-            "276": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Maven",
-            },
-            "281": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "MongoDB",
-            },
-            "284": Object {
-              "hidden": false,
-              "score": 7,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "MySql",
-            },
-            "286": Object {
-              "hidden": false,
-              "score": 18,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "Node.js",
-            },
-            "295": Object {
-              "hidden": false,
-              "score": 14,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Oracle Database",
-            },
-            "303": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "PHP",
-            },
-            "306": Object {
-              "hidden": false,
-              "score": 8,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "PostgreSQL",
-            },
-            "315": Object {
-              "hidden": false,
-              "score": 1,
-              "sources": Array [
-                "USER_ENTERED",
-              ],
-              "tagName": "React.js",
-            },
-            "323": Object {
-              "hidden": false,
-              "score": 5,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "REST",
-            },
-            "328": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Salesforce",
-            },
-            "337": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Servlet",
-            },
-            "344": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "Sharepoint 3.0",
-            },
-            "354": Object {
-              "hidden": false,
-              "score": 15,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Spring",
-            },
-            "355": Object {
-              "hidden": false,
-              "score": 4,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "SQL",
-            },
-            "356": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "SQL Server",
-            },
-            "362": Object {
-              "hidden": false,
-              "score": 3,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Struts",
-            },
-            "387": Object {
-              "hidden": false,
-              "score": 8,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "Web Services",
-            },
-            "401": Object {
-              "hidden": false,
-              "score": 6,
-              "sources": Array [
-                "CHALLENGE",
-              ],
-              "tagName": "XML",
-            },
-            "402": Object {
-              "hidden": false,
-              "score": 2,
-              "sources": Array [
-                "CHALLENGE",
-                "USER_ENTERED",
-              ],
-              "tagName": "XSL",
-            },
-          },
-          "stats": null,
-        }
-      }
-      settingsPageState={Object {}}
-      supportedAccounts={
-        Array [
-          Object {
-            "className": "fa-dribbble",
-            "colorClass": "el-dribble",
-            "disabled": false,
-            "displayName": "Dribbble",
-            "featured": true,
-            "order": 6,
-            "providerType": "dribbble",
-          },
-          Object {
-            "className": "fa-linkedin",
-            "colorClass": "el-linkedin",
-            "disabled": true,
-            "displayName": "LinkedIn",
-            "featured": true,
-            "order": 5,
-            "providerType": "linkedin",
-          },
-          Object {
-            "className": "fa-stack-overflow",
-            "colorClass": "el-stackoverflow",
-            "disabled": false,
-            "displayName": "Stack Overflow",
-            "order": 3,
-            "providerType": "stackoverflow",
-          },
-          Object {
-            "className": "fa-behance",
-            "colorClass": "el-behance",
-            "disabled": true,
-            "displayName": "Behance",
-            "order": 2,
-            "providerType": "behance",
-          },
-          Object {
-            "className": "fa-github",
-            "colorClass": "el-github",
-            "disabled": false,
-            "displayName": "Github",
-            "featured": true,
-            "order": 1,
-            "providerType": "github",
-          },
-          Object {
-            "className": "fa-bitbucket",
-            "colorClass": "el-bitbucket",
-            "disabled": false,
-            "displayName": "Bitbucket",
-            "order": 7,
-            "providerType": "bitbucket",
-          },
-          Object {
-            "className": "fa-twitter",
-            "colorClass": "el-twitter",
-            "disabled": true,
-            "displayName": "Twitter",
-            "order": 4,
-            "providerType": "twitter",
-          },
-          Object {
-            "className": "fa-globe",
-            "colorClass": "el-weblinks",
-            "disabled": true,
-            "displayName": "Web Links",
-            "order": -1,
-            "providerType": "weblink",
-          },
-        ]
-      }
-      tokenV3=""
-      unlinkExternalAccount={[Function]}
-    />
-  </div>
-</div>
-`;
diff --git a/__tests__/shared/components/Settings/Profile/ExternalLinks/index.jsx b/__tests__/shared/components/Settings/Profile/ExternalLinks/index.jsx
deleted file mode 100644
index fb80f459c3..0000000000
--- a/__tests__/shared/components/Settings/Profile/ExternalLinks/index.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import Renderer from 'react-test-renderer/shallow';
-
-import ExternalLinks from 'components/Settings/Profile/ExternalLinks';
-
-import userProfile from '../../__mocks__/user-profile.json';
-import profileState from '../../__mocks__/profile-state.json';
-
-const rnd = new Renderer();
-
-it('renders external links section of profile setting page correctly', () => {
-  rnd.render((<ExternalLinks
-    handle=""
-    tokenV3=""
-    profile={userProfile}
-    profileState={profileState}
-    settingsPageState={{}}
-    addWebLink={() => {}}
-    deleteWebLink={() => {}}
-    linkExternalAccount={() => {}}
-    unlinkExternalAccount={() => {}}
-  />));
-  expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/Settings/Profile/Skills/index.jsx b/__tests__/shared/components/Settings/Profile/Skills/index.jsx
deleted file mode 100644
index ad9849becf..0000000000
--- a/__tests__/shared/components/Settings/Profile/Skills/index.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// import React from 'react';
-// import Renderer from 'react-test-renderer/shallow';
-//
-// import Skills from 'components/Settings/Profile/Skills';
-//
-// import profileState from '../../__mocks__/profile-state.json';
-//
-// const rnd = new Renderer();
-
-// FIXME: Fix the tests for the settings page
-it('renders skills section of profile setting page correctly', () => {
-  expect(true).toBeTruthy();
-  // rnd.render((<Skills
-  //   handle=""
-  //   tokenV3=""
-  //   profileState={profileState}
-  //   settingsPageState={{ skills: profileState.skills }}
-  //   lookupData={{}}
-  //   addSkill={() => {}}
-  //   hideSkill={() => {}}
-  // />));
-  // expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/Settings/Profile/index.jsx b/__tests__/shared/components/Settings/Profile/index.jsx
deleted file mode 100644
index 80b76628ae..0000000000
--- a/__tests__/shared/components/Settings/Profile/index.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// import React from 'react';
-// import Renderer from 'react-test-renderer/shallow';
-//
-// import Profile from 'components/Settings/Profile';
-//
-// import userProfile from '../__mocks__/user-profile.json';
-// import profileState from '../__mocks__/profile-state.json';
-//
-// const rnd = new Renderer();
-
-// FIXME: Fix the tests for the settings page
-it('renders profile setting page correctly', () => {
-  expect(true).toBeTruthy();
-  // rnd.render((<Profile
-  //   handle=""
-  //   tokenV3=""
-  //   profile={userProfile}
-  //   profileState={profileState}
-  //   settingsPageState={{}}
-  //   lookupData={{}}
-  //   updateProfile={() => {}}
-  //   uploadPhoto={() => {}}
-  //   deletePhoto={() => {}}
-  //   addSkill={() => {}}
-  //   hideSkill={() => {}}
-  // />));
-  // expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
index 1dbbd2ddd2..35b1cb918d 100644
--- a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
@@ -8,19 +8,54 @@ exports[`renders account setting page correctly 1`] = `
 >
   <Connect(MetaTags)
     description="Profile setting page for Topcoder member"
-    title="Edit Profile | TopCoder"
+    title="Profile | TopCoder"
   />
   <div
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
+      isSaving={false}
+      saveSettings={[Function]}
       selectTab={[Function]}
       settingsTab="profile"
     />
-    <Profile
+    <TabSelector
+      activeTab="profile"
+      selectTab={[Function]}
+      tabs={
+        Array [
+          Object {
+            "link": "profile",
+            "title": "Profile",
+          },
+          Object {
+            "link": "skills",
+            "title": "Experience & Skills",
+          },
+          Object {
+            "link": "tracks",
+            "title": "Topcoder & You",
+          },
+          Object {
+            "link": "tools",
+            "title": "Tools",
+          },
+          Object {
+            "link": "accounts",
+            "title": "Account",
+          },
+          Object {
+            "link": "preferences",
+            "title": "Preferences",
+          },
+        ]
+      }
+    />
+    <ProfileSettings
       clearIncorrectPassword={[Function]}
       handle=""
       history={Object {}}
+      isSaving={false}
       match={
         Object {
           "isExact": true,
@@ -710,6 +745,7 @@ exports[`renders account setting page correctly 1`] = `
         }
       }
       selectTab={[Function]}
+      setIsSaving={[Function]}
       settingsPageState={Object {}}
       settingsTab="profile"
       showXlBadge={[Function]}
@@ -729,18 +765,53 @@ exports[`renders preferences setting page correctly 1`] = `
 >
   <Connect(MetaTags)
     description="Profile setting page for Topcoder member"
-    title="Edit Profile | TopCoder"
+    title="Profile | TopCoder"
   />
   <div
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
+      isSaving={false}
+      saveSettings={[Function]}
       selectTab={[Function]}
       settingsTab="profile"
     />
-    <Profile
+    <TabSelector
+      activeTab="profile"
+      selectTab={[Function]}
+      tabs={
+        Array [
+          Object {
+            "link": "profile",
+            "title": "Profile",
+          },
+          Object {
+            "link": "skills",
+            "title": "Experience & Skills",
+          },
+          Object {
+            "link": "tracks",
+            "title": "Topcoder & You",
+          },
+          Object {
+            "link": "tools",
+            "title": "Tools",
+          },
+          Object {
+            "link": "accounts",
+            "title": "Account",
+          },
+          Object {
+            "link": "preferences",
+            "title": "Preferences",
+          },
+        ]
+      }
+    />
+    <ProfileSettings
       handle=""
       history={Object {}}
+      isSaving={false}
       match={
         Object {
           "isExact": true,
@@ -1430,6 +1501,7 @@ exports[`renders preferences setting page correctly 1`] = `
         }
       }
       selectTab={[Function]}
+      setIsSaving={[Function]}
       settingsPageState={Object {}}
       settingsTab="profile"
       showXlBadge={[Function]}
@@ -1447,21 +1519,56 @@ exports[`renders profile setting page correctly 1`] = `
 >
   <Connect(MetaTags)
     description="Profile setting page for Topcoder member"
-    title="Edit Profile | TopCoder"
+    title="Profile | TopCoder"
   />
   <div
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
+      isSaving={false}
+      saveSettings={[Function]}
       selectTab={[Function]}
       settingsTab="profile"
     />
-    <Profile
+    <TabSelector
+      activeTab="profile"
+      selectTab={[Function]}
+      tabs={
+        Array [
+          Object {
+            "link": "profile",
+            "title": "Profile",
+          },
+          Object {
+            "link": "skills",
+            "title": "Experience & Skills",
+          },
+          Object {
+            "link": "tracks",
+            "title": "Topcoder & You",
+          },
+          Object {
+            "link": "tools",
+            "title": "Tools",
+          },
+          Object {
+            "link": "accounts",
+            "title": "Account",
+          },
+          Object {
+            "link": "preferences",
+            "title": "Preferences",
+          },
+        ]
+      }
+    />
+    <ProfileSettings
       addSkill={[Function]}
       deletePhoto={[Function]}
       handle=""
       hideSkill={[Function]}
       history={Object {}}
+      isSaving={false}
       lookupData={Object {}}
       match={
         Object {
@@ -2152,6 +2259,7 @@ exports[`renders profile setting page correctly 1`] = `
         }
       }
       selectTab={[Function]}
+      setIsSaving={[Function]}
       settingsPageState={Object {}}
       settingsTab="profile"
       showXlBadge={[Function]}
@@ -2171,18 +2279,53 @@ exports[`renders tools setting page correctly 1`] = `
 >
   <Connect(MetaTags)
     description="Profile setting page for Topcoder member"
-    title="Edit Profile | TopCoder"
+    title="Profile | TopCoder"
   />
   <div
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
+      isSaving={false}
+      saveSettings={[Function]}
       selectTab={[Function]}
       settingsTab="profile"
     />
-    <Profile
+    <TabSelector
+      activeTab="profile"
+      selectTab={[Function]}
+      tabs={
+        Array [
+          Object {
+            "link": "profile",
+            "title": "Profile",
+          },
+          Object {
+            "link": "skills",
+            "title": "Experience & Skills",
+          },
+          Object {
+            "link": "tracks",
+            "title": "Topcoder & You",
+          },
+          Object {
+            "link": "tools",
+            "title": "Tools",
+          },
+          Object {
+            "link": "accounts",
+            "title": "Account",
+          },
+          Object {
+            "link": "preferences",
+            "title": "Preferences",
+          },
+        ]
+      }
+    />
+    <ProfileSettings
       handle=""
       history={Object {}}
+      isSaving={false}
       match={
         Object {
           "isExact": true,
@@ -2872,6 +3015,7 @@ exports[`renders tools setting page correctly 1`] = `
         }
       }
       selectTab={[Function]}
+      setIsSaving={[Function]}
       settingsPageState={Object {}}
       settingsTab="profile"
       showXlBadge={[Function]}
diff --git a/src/assets/images/dropdown-arrow.svg b/src/assets/images/dropdown-arrow.svg
new file mode 100644
index 0000000000..c1019fe042
--- /dev/null
+++ b/src/assets/images/dropdown-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.56716 4.90041C2.76023 4.70735 3.07325 4.70735 3.26631 4.90041L7.00007 8.63417L10.7338 4.90041C10.9269 4.70735 11.2399 4.70735 11.433 4.90041C11.626 5.09348 11.626 5.4065 11.433 5.59957L7.34965 9.6829C7.15658 9.87597 6.84356 9.87597 6.6505 9.6829L2.56716 5.59957C2.3741 5.4065 2.3741 5.09348 2.56716 4.90041Z" fill="#137D60"/>
+</svg>
diff --git a/src/assets/images/icon-banner-selector.svg b/src/assets/images/icon-banner-selector.svg
new file mode 100644
index 0000000000..de368d13ee
--- /dev/null
+++ b/src/assets/images/icon-banner-selector.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6485 7.24852C11.1799 7.71715 10.4201 7.71715 9.95147 7.24852L6 3.29705L2.04853 7.24852C1.5799 7.71715 0.820101 7.71715 0.351472 7.24852C-0.117157 6.77989 -0.117157 6.02009 0.351472 5.55147L5.15147 0.751466C5.6201 0.282837 6.3799 0.282837 6.84853 0.751466L11.6485 5.55147C12.1172 6.0201 12.1172 6.77989 11.6485 7.24852Z" fill="#137D60"/>
+</svg>
diff --git a/src/assets/images/icon-edit.svg b/src/assets/images/icon-edit.svg
new file mode 100644
index 0000000000..a9ab07b784
--- /dev/null
+++ b/src/assets/images/icon-edit.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.86853 0.868654C9.49337 0.243815 10.5064 0.243815 11.1313 0.868654C11.7561 1.49349 11.7561 2.50656 11.1313 3.1314L10.497 3.76571L8.23422 1.50297L8.86853 0.868654Z" fill="white"/>
+<path d="M7.10285 2.63434L0.399902 9.33728V11.6H2.66264L9.36559 4.89708L7.10285 2.63434Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/icon-input-calendar.svg b/src/assets/images/icon-input-calendar.svg
new file mode 100644
index 0000000000..eebc9730bd
--- /dev/null
+++ b/src/assets/images/icon-input-calendar.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.6669 0.255615C3.93994 0.255615 4.16128 0.476954 4.16128 0.74999V1.42228H7.83919V0.74999C7.83919 0.476954 8.06053 0.255615 8.33357 0.255615C8.6066 0.255615 8.82794 0.476954 8.82794 0.74999V1.42228H10.0836C11.0009 1.42228 11.7446 2.16596 11.7446 3.08332V10.0833C11.7446 11.0007 11.0009 11.7444 10.0836 11.7444H1.9169C0.999533 11.7444 0.255859 11.0007 0.255859 10.0833V3.08332C0.255859 2.16596 0.999533 1.42228 1.9169 1.42228H3.17253V0.74999C3.17253 0.476954 3.39387 0.255615 3.6669 0.255615ZM3.17253 2.41103H1.9169C1.5456 2.41103 1.24461 2.71203 1.24461 3.08332V10.0833C1.24461 10.4546 1.5456 10.7556 1.9169 10.7556H10.0836C10.4549 10.7556 10.7559 10.4546 10.7559 10.0833V3.08332C10.7559 2.71203 10.4549 2.41103 10.0836 2.41103H8.82794V3.08332C8.82794 3.35636 8.6066 3.5777 8.33357 3.5777C8.06053 3.5777 7.83919 3.35636 7.83919 3.08332V2.41103H4.16128V3.08332C4.16128 3.35636 3.93994 3.5777 3.6669 3.5777C3.39387 3.5777 3.17253 3.35636 3.17253 3.08332V2.41103ZM2.58919 5.41666C2.58919 5.14362 2.81053 4.92228 3.08357 4.92228H8.9169C9.18994 4.92228 9.41128 5.14362 9.41128 5.41666C9.41128 5.68969 9.18994 5.91103 8.9169 5.91103H3.08357C2.81053 5.91103 2.58919 5.68969 2.58919 5.41666Z" fill="#137D60"/>
+</svg>
diff --git a/src/assets/images/icon-upload.svg b/src/assets/images/icon-upload.svg
new file mode 100644
index 0000000000..9dd6f009ea
--- /dev/null
+++ b/src/assets/images/icon-upload.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.83325 3.66671V9.50004H6.16658V3.66671H4.15492L6.99992 0.333374L9.84492 3.66671H7.83325ZM10.3333 4.50004H12.8333C13.2941 4.50004 13.6666 4.87254 13.6666 5.33337V12.8334C13.6666 13.2942 13.2941 13.6667 12.8333 13.6667H1.16659C0.705752 13.6667 0.333252 13.2942 0.333252 12.8334V5.33337C0.333252 4.87254 0.705752 4.50004 1.16659 4.50004H3.66659V6.16671H1.99992V12H11.9999V6.16671H10.3333V4.50004Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/nav-active-item.svg b/src/assets/images/nav-active-item.svg
index 36963a4d0a..5ff4ba65b4 100644
--- a/src/assets/images/nav-active-item.svg
+++ b/src/assets/images/nav-active-item.svg
@@ -1,4 +1,4 @@
 <svg width="40" height="10" viewBox="0 0 40 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5614 7.96244C18.942 9.36862 21.1465 9.34246 22.4963 7.90232L24.6352 5.6202C26.2594 3.88726 27.9524 2.47624 29.968 1.50162C31.9869 0.525378 34.3022 -1.45179e-06 37.1546 -1.20242e-06L40 -9.53674e-07L40 0.999999L37.1546 0.999999C34.4318 0.999999 32.2686 1.49994 30.4033 2.40189C28.5347 3.30545 26.938 4.6255 25.3648 6.30404L23.2259 8.58616C21.488 10.4405 18.6275 10.4756 16.8478 8.66303C16.823 8.6377 16.7984 8.61208 16.7741 8.58616L14.6352 6.30404C13.062 4.6255 11.4653 3.30545 9.59671 2.40189C7.73145 1.49993 5.56821 0.999996 2.84535 0.999996L7.86805e-07 0.999996L8.74228e-07 -4.45059e-06L2.84535 -4.20184e-06C5.69776 -3.95247e-06 8.01315 0.525376 10.032 1.50161C12.0476 2.47624 13.7406 3.88725 15.3648 5.6202L17.5037 7.90232C17.5227 7.92259 17.542 7.94263 17.5614 7.96244Z" fill="#D4D4D4"/>
-<path d="M22.4963 7.90232C21.1465 9.34246 18.942 9.36862 17.5614 7.96244C17.5419 7.94263 17.5227 7.92259 17.5037 7.90232L15.3648 5.6202C13.7406 3.88725 12.0476 2.47624 10.032 1.50161C8.01644 0.52697 5.70532 0.00171271 2.85931 0H37.1546C34.3022 0 31.9868 0.525378 29.968 1.50162C27.9524 2.47624 26.2594 3.88726 24.6352 5.6202L22.4963 7.90232Z" fill="#EAF6FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5614 7.96244C18.942 9.36862 21.1465 9.34246 22.4963 7.90232L24.6352 5.6202C26.2594 3.88726 27.9524 2.47624 29.968 1.50162C31.9869 0.525378 34.3022 -1.45179e-06 37.1546 -1.20242e-06L40 -9.53674e-07L40 0.999999L37.1546 0.999999C34.4318 0.999999 32.2686 1.49994 30.4033 2.40189C28.5347 3.30545 26.938 4.6255 25.3648 6.30404L23.2259 8.58616C21.488 10.4405 18.6275 10.4756 16.8478 8.66303C16.823 8.6377 16.7984 8.61208 16.7741 8.58616L14.6352 6.30404C13.062 4.6255 11.4653 3.30545 9.59671 2.40189C7.73145 1.49993 5.56821 0.999996 2.84535 0.999996L7.86805e-07 0.999996L8.74228e-07 -4.45059e-06L2.84535 -4.20184e-06C5.69776 -3.95247e-06 8.01315 0.525376 10.032 1.50161C12.0476 2.47624 13.7406 3.88725 15.3648 5.6202L17.5037 7.90232C17.5227 7.92259 17.542 7.94263 17.5614 7.96244Z" fill="#d4d4d4"/>
+<path d="M22.4963 7.90232C21.1465 9.34246 18.942 9.36862 17.5614 7.96244C17.5419 7.94263 17.5227 7.92259 17.5037 7.90232L15.3648 5.6202C13.7406 3.88725 12.0476 2.47624 10.032 1.50161C8.01644 0.52697 5.70532 0.00171271 2.85931 0H37.1546C34.3022 0 31.9868 0.525378 29.968 1.50162C27.9524 2.47624 26.2594 3.88726 24.6352 5.6202L22.4963 7.90232Z" fill="#bae1f9"/>
 </svg>
diff --git a/src/assets/images/settings-add-item.svg b/src/assets/images/settings-add-item.svg
new file mode 100644
index 0000000000..52496f628d
--- /dev/null
+++ b/src/assets/images/settings-add-item.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00016 1.66665C4.05464 1.66665 1.66683 4.05446 1.66683 6.99998C1.66683 9.9455 4.05464 12.3333 7.00016 12.3333C9.94568 12.3333 12.3335 9.9455 12.3335 6.99998C12.3335 4.05446 9.94568 1.66665 7.00016 1.66665ZM0.333496 6.99998C0.333496 3.31808 3.31826 0.333313 7.00016 0.333313C10.6821 0.333313 13.6668 3.31808 13.6668 6.99998C13.6668 10.6819 10.6821 13.6666 7.00016 13.6666C3.31826 13.6666 0.333496 10.6819 0.333496 6.99998ZM7.00016 4.33331C7.36835 4.33331 7.66683 4.63179 7.66683 4.99998V6.33331H9.00016C9.36835 6.33331 9.66683 6.63179 9.66683 6.99998C9.66683 7.36817 9.36835 7.66665 9.00016 7.66665H7.66683V8.99998C7.66683 9.36817 7.36835 9.66665 7.00016 9.66665C6.63197 9.66665 6.3335 9.36817 6.3335 8.99998V7.66665H5.00016C4.63197 7.66665 4.3335 7.36817 4.3335 6.99998C4.3335 6.63179 4.63197 6.33331 5.00016 6.33331H6.3335V4.99998C6.3335 4.63179 6.63197 4.33331 7.00016 4.33331Z" fill="#137D60"/>
+</svg>
diff --git a/src/shared/actions/page/settings.js b/src/shared/actions/page/settings.js
index 6dc8cc6f5c..e4446f0097 100644
--- a/src/shared/actions/page/settings.js
+++ b/src/shared/actions/page/settings.js
@@ -6,8 +6,10 @@ import { createActions } from 'redux-actions';
 
 export const TABS = {
   PROFILE: 'profile',
+  SKILLS: 'skills',
+  TRACKS: 'tracks',
   TOOLS: 'tools',
-  ACCOUNT: 'account',
+  ACCOUNTS: 'accounts',
   PREFERENCES: 'preferences',
 };
 
diff --git a/src/shared/components/GUIKit/Datepicker/index.jsx b/src/shared/components/GUIKit/Datepicker/index.jsx
index 93ee05bb66..6900fdf0a9 100644
--- a/src/shared/components/GUIKit/Datepicker/index.jsx
+++ b/src/shared/components/GUIKit/Datepicker/index.jsx
@@ -32,6 +32,11 @@ function Datepicker({
   displayFormat,
   minDate,
   maxDate,
+  id,
+  renderMonthElement,
+  readOnly,
+  showClearDate,
+  renderCalendarInfo,
 }) {
   const sizeStyle = size === 'lg' ? 'lgSize' : 'xsSize';
   const [date, setDate] = useState(value ? moment(value) : null);
@@ -57,7 +62,7 @@ function Datepicker({
         focused={focused}
         onFocusChange={({ focused: changedFocused }) => setFocused(changedFocused)
         }
-        id={`${value}-${placeholder}-${label}-${errorMsg}-${required}`}
+        id={id || `${value}-${placeholder}-${label}-${errorMsg}-${required}`}
         placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
         inputIconPosition="after"
         numberOfMonths={1}
@@ -73,6 +78,10 @@ function Datepicker({
         isDayBlocked={isDayBlocked}
         minDate={minDate}
         maxDate={maxDate}
+        renderMonthElement={renderMonthElement}
+        readOnly={readOnly}
+        showClearDate={showClearDate}
+        renderCalendarInfo={renderCalendarInfo}
       />
       {label ? (
         <span styleName="label">
@@ -99,6 +108,11 @@ Datepicker.defaultProps = {
   displayFormat: 'MMM DD, YYYY',
   minDate: null,
   maxDate: null,
+  id: '',
+  renderMonthElement: () => {},
+  readOnly: false,
+  showClearDate: false,
+  renderCalendarInfo: null,
 };
 
 Datepicker.propTypes = {
@@ -115,6 +129,11 @@ Datepicker.propTypes = {
   displayFormat: PT.string,
   minDate: PT.instanceOf(moment),
   maxDate: PT.instanceOf(moment),
+  id: PT.string,
+  renderMonthElement: PT.func,
+  readOnly: PT.bool,
+  showClearDate: PT.bool,
+  renderCalendarInfo: PT.func,
 };
 
 export default Datepicker;
diff --git a/src/shared/components/Settings/CofirmationModal/index.jsx b/src/shared/components/Settings/ConfirmationModal/index.jsx
similarity index 100%
rename from src/shared/components/Settings/CofirmationModal/index.jsx
rename to src/shared/components/Settings/ConfirmationModal/index.jsx
diff --git a/src/shared/components/Settings/CofirmationModal/styles.scss b/src/shared/components/Settings/ConfirmationModal/styles.scss
similarity index 96%
rename from src/shared/components/Settings/CofirmationModal/styles.scss
rename to src/shared/components/Settings/ConfirmationModal/styles.scss
index 518acd432e..7b980ce569 100644
--- a/src/shared/components/Settings/CofirmationModal/styles.scss
+++ b/src/shared/components/Settings/ConfirmationModal/styles.scss
@@ -1,5 +1,10 @@
 @import "~styles/mixins";
 
+.overlay {
+  background-color: #2a2a2a !important;
+  opacity: 0.95;
+}
+
 .container {
   @include roboto-regular;
 
diff --git a/src/shared/components/Settings/ErrorMessage/styles.scss b/src/shared/components/Settings/ErrorMessage/styles.scss
index 1e629638b2..ddcca5ff3b 100644
--- a/src/shared/components/Settings/ErrorMessage/styles.scss
+++ b/src/shared/components/Settings/ErrorMessage/styles.scss
@@ -8,10 +8,9 @@
 
     display: inline;
     border-radius: 5px;
-    background-color: $tc-red-10;
     color: $tc-red-110;
-    font-size: 15px;
-    margin: 0 auto 0 0;
+    font-size: 12px;
+    margin: 0 0 0 10px;
   }
 
   &.active-margin {
@@ -19,9 +18,8 @@
 
     display: inline;
     border-radius: 5px;
-    background-color: $tc-red-10;
     color: $tc-red-110;
-    font-size: 15px;
-    margin: 10px auto 0 0;
+    font-size: 12px;
+    margin: 10px auto 0 10px;
   }
 }
diff --git a/src/shared/components/Settings/FormField/index.jsx b/src/shared/components/Settings/FormField/index.jsx
new file mode 100644
index 0000000000..cfaa5171df
--- /dev/null
+++ b/src/shared/components/Settings/FormField/index.jsx
@@ -0,0 +1,41 @@
+/**
+ * FormField
+ *
+ * A Form Field Is a wrapper for input to add the label to it
+*/
+import React from 'react';
+import PT from 'prop-types';
+import './styles.scss';
+
+const FormField = ({ children, label = '' }) => {
+  const handleClick = (e) => {
+    // focus on input label click
+    const inputElement = e.target.closest('.form-field').querySelector('input');
+    if (inputElement) {
+      inputElement.focus();
+    }
+  };
+
+  return (
+    <div styleName="form-field-wrapper">
+      <div styleName="form-field">
+        <div styleName="label" role="presentation" onClick={handleClick}>
+          {label}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+FormField.defaultProps = {
+  label: '',
+  children: null,
+};
+
+FormField.propTypes = {
+  label: PT.string,
+  children: PT.node,
+};
+
+export default FormField;
diff --git a/src/shared/components/Settings/FormField/styles.scss b/src/shared/components/Settings/FormField/styles.scss
new file mode 100644
index 0000000000..4593446b10
--- /dev/null
+++ b/src/shared/components/Settings/FormField/styles.scss
@@ -0,0 +1,28 @@
+@import "~styles/mixins";
+
+.form-field-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  .form-field {
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    background: white;
+    padding-top: 24px;
+    margin-bottom: 10px;
+
+    .label {
+      @include roboto-regular;
+
+      font-weight: 500 !important;
+      font-size: 11px !important;
+      line-height: 10px;
+      position: absolute;
+      top: 10px;
+      left: 12px;
+      color: $listing-checkbox-green;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/FormInputSelect/index.jsx b/src/shared/components/Settings/FormInputSelect/index.jsx
new file mode 100644
index 0000000000..3547cc7d79
--- /dev/null
+++ b/src/shared/components/Settings/FormInputSelect/index.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import _ from 'lodash';
+import ReactSelect from 'react-select';
+import PT from 'prop-types';
+import './styles.scss';
+
+export default function Select(props) {
+  const { selectRef } = props;
+  return (
+    <div styleName="form-input-select">
+      <ReactSelect
+        ref={selectRef}
+        {...props}
+        autosize={false}
+      />
+    </div>
+  );
+}
+
+Select.defaultProps = {
+  selectRef: _.noop,
+};
+
+Select.propTypes = {
+  selectRef: PT.func,
+};
diff --git a/src/shared/components/Settings/FormInputSelect/styles.scss b/src/shared/components/Settings/FormInputSelect/styles.scss
new file mode 100644
index 0000000000..2441a82ca8
--- /dev/null
+++ b/src/shared/components/Settings/FormInputSelect/styles.scss
@@ -0,0 +1,25 @@
+.form-input-select {
+  :global {
+    @import '~react-select/dist/react-select';
+
+    width: 100%;
+
+    input.Select-input,
+    input.Select-input:focus {
+      background-color: transparent !important;
+      margin-left: 0 !important;
+      padding-right: 6px !important;
+    }
+
+    .Select-control {
+      height: 25px !important;
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+      border: 0 !important;
+    }
+
+    .Select-multi-value-wrapper {
+      width: 100% !important;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/FormInputText/index.jsx b/src/shared/components/Settings/FormInputText/index.jsx
new file mode 100644
index 0000000000..9ac54be7a0
--- /dev/null
+++ b/src/shared/components/Settings/FormInputText/index.jsx
@@ -0,0 +1,27 @@
+/**
+ * FormInputText
+ *
+ * Form Input Type=text
+ */
+import React from 'react';
+import PT from 'prop-types';
+import cn from 'classnames';
+import './styles.scss';
+
+const FormInputText = ({ styleName, ...props }) => (
+  <input
+    type="text"
+    styleName={cn('form-input-text', styleName || '')}
+    {...props}
+  />
+);
+
+FormInputText.defaultProps = {
+  styleName: {},
+};
+
+FormInputText.propTypes = {
+  styleName: PT.shape(),
+};
+
+export default FormInputText;
diff --git a/src/shared/components/Settings/FormInputText/styles.scss b/src/shared/components/Settings/FormInputText/styles.scss
new file mode 100644
index 0000000000..706747ba98
--- /dev/null
+++ b/src/shared/components/Settings/FormInputText/styles.scss
@@ -0,0 +1,23 @@
+@import "~styles/mixins";
+
+.form-input-text {
+  background-color: #fff !important;
+  box-sizing: border-box !important;
+  color: #767676 !important;
+  font-size: 14px !important;
+  height: 24px !important;
+  outline: none !important;
+  border: 0 !important;
+  width: 100% !important;
+  margin-bottom: 0 !important;
+  box-shadow: none !important;
+
+  &::placeholder {
+    color: #aaa !important;
+    text-transform: none !important;
+  }
+
+  &:focus {
+    box-shadow: none !important;
+  }
+}
diff --git a/src/shared/components/Settings/FormInputTextArea/index.jsx b/src/shared/components/Settings/FormInputTextArea/index.jsx
new file mode 100644
index 0000000000..a1e6ad7825
--- /dev/null
+++ b/src/shared/components/Settings/FormInputTextArea/index.jsx
@@ -0,0 +1,27 @@
+/**
+ * FormInputTextArea
+ *
+ * Form Input Type=text
+ */
+import React from 'react';
+import PT from 'prop-types';
+import cn from 'classnames';
+import './styles.scss';
+
+const FormInputTextArea = ({ styleName, ...props }) => (
+  <textarea
+    type="text"
+    styleName={cn('form-input-text-area', styleName || '')}
+    {...props}
+  />
+);
+
+FormInputTextArea.defaultProps = {
+  styleName: {},
+};
+
+FormInputTextArea.propTypes = {
+  styleName: PT.shape(),
+};
+
+export default FormInputTextArea;
diff --git a/src/shared/components/Settings/FormInputTextArea/styles.scss b/src/shared/components/Settings/FormInputTextArea/styles.scss
new file mode 100644
index 0000000000..dbb679a870
--- /dev/null
+++ b/src/shared/components/Settings/FormInputTextArea/styles.scss
@@ -0,0 +1,29 @@
+@import "~styles/mixins";
+
+.form-input-text-area {
+  background-color: #fff !important;
+  box-sizing: border-box !important;
+  color: #767676 !important;
+  font-size: 14px !important;
+  outline: none !important;
+  border: 0 !important;
+  width: 100% !important;
+  min-height: 120px !important;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  resize: vertical;
+  box-shadow: none !important;
+
+  &:hover {
+    box-shadow: none !important;
+  }
+
+  &::placeholder {
+    color: #aaa !important;
+    text-transform: none !important;
+  }
+
+  &:focus {
+    box-shadow: none !important;
+  }
+}
diff --git a/src/shared/components/Settings/Header/index.jsx b/src/shared/components/Settings/Header/index.jsx
index ef7e6b9705..d8bd9e01ad 100644
--- a/src/shared/components/Settings/Header/index.jsx
+++ b/src/shared/components/Settings/Header/index.jsx
@@ -1,85 +1,35 @@
 /**
- * Child component of Settings/Header
+ * Header component for settings page
  */
 import React from 'react';
+import { Button } from 'topcoder-react-ui-kit';
 import PT from 'prop-types';
-import { TABS } from 'actions/page/settings';
 
-import './styles.scss';
-
-export default function Header(props) {
-  const {
-    selectTab,
-    settingsTab,
-  } = props;
-
-  const clickTab = (e, tab) => {
-    e.preventDefault();
-    setImmediate(() => {
-      selectTab(tab);
-    });
-  };
+import style from './styles.scss';
 
+export default function Header({ saveSettings, isSaving }) {
   return (
     <div styleName="Header">
       <div styleName="title">
-        <h1>
-          Settings
-        </h1>
+        <h1>Profile Settings</h1>
       </div>
-      <nav styleName="tabs">
-        <ul>
-          <li>
-            <a
-              role="link"
-              tabIndex={0}
-              onKeyPress={e => clickTab(e, TABS.PROFILE)}
-              onClick={e => clickTab(e, TABS.PROFILE)}
-              styleName={settingsTab === TABS.PROFILE ? 'active-tab' : ''}
-            >
-              Profile
-            </a>
-          </li>
-          <li>
-            <a
-              role="link"
-              tabIndex={0}
-              onKeyPress={e => clickTab(e, TABS.TOOLS)}
-              onClick={e => clickTab(e, TABS.TOOLS)}
-              styleName={settingsTab === TABS.TOOLS ? 'active-tab' : ''}
-            >
-              Tools
-            </a>
-          </li>
-          <li>
-            <a
-              role="link"
-              tabIndex={0}
-              onKeyPress={e => clickTab(e, TABS.ACCOUNT)}
-              onClick={e => clickTab(e, TABS.ACCOUNT)}
-              styleName={settingsTab === TABS.ACCOUNT ? 'active-tab' : ''}
-            >
-              Account
-            </a>
-          </li>
-          <li>
-            <a
-              role="link"
-              tabIndex={0}
-              onKeyPress={e => clickTab(e, TABS.PREFERENCES)}
-              onClick={e => clickTab(e, TABS.PREFERENCES)}
-              styleName={settingsTab === TABS.PREFERENCES ? 'active-tab' : ''}
-            >
-              Preferences
-            </a>
-          </li>
-        </ul>
-      </nav>
+
+      <Button
+        onClick={saveSettings}
+        theme={{ button: style.saveButton }}
+        disabled={isSaving}
+      >
+        <span>SAVE CHANGES</span>
+      </Button>
     </div>
   );
 }
 
+Header.defaultProps = {
+  isSaving: false,
+};
+
 Header.propTypes = {
-  settingsTab: PT.string.isRequired,
-  selectTab: PT.func.isRequired,
+  saveSettings: PT.func.isRequired,
+  isSaving: PT.bool,
 };
diff --git a/src/shared/components/Settings/Header/styles.scss b/src/shared/components/Settings/Header/styles.scss
index 7a35b73864..fd710c69e7 100644
--- a/src/shared/components/Settings/Header/styles.scss
+++ b/src/shared/components/Settings/Header/styles.scss
@@ -5,106 +5,38 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: 120px;
-  padding: 0 50px;
-  background: $tc-gray-neutral-light;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+  padding: 0;
+  background: $tc-white;
   border-bottom: 1px solid $tc-gray-10;
 
-  @include md-to-lg {
-    padding: 0 30px;
-  }
-
-  @include xs-to-sm {
-    height: auto;
-    flex-direction: column;
-    padding: 0;
-  }
-
   .title {
-    @include xs-to-sm {
-      display: flex;
-      align-items: center;
-      padding: 15px 0 10px;
-    }
+    margin: 32px 0 40px 0;
 
     h1 {
-      @include tc-heading-lg;
+      @include barlow-condensed-semi-bold;
 
-      @include xs-to-sm {
-        text-align: center;
-        font-size: 20px;
-        line-height: 35px;
-      }
+      color: $tco-black;
+      font-weight: 600;
+      font-size: 32px;
+      line-height: 32px;
+      text-transform: uppercase;
     }
   }
 
-  nav.tabs {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 60px;
-
-    @include xs-to-sm {
-      min-width: 292px;
-      overflow: hidden;
-    }
-
-    li {
-      display: inline-block;
-      margin-right: 90px;
-
-      @include md-to-lg {
-        margin-right: 60px;
-      }
-
-      @include xs-to-sm {
-        margin-right: 25px;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    a {
-      @include roboto-medium;
-
-      font-size: 16px;
-      line-height: 24px;
-      color: $tc-gray-30;
-      text-decoration: none;
-      cursor: pointer;
-
-      @include md-to-lg {
-        font-size: 15px;
-        line-height: 20px;
-      }
-
-      @include xs-to-sm {
-        font-size: 15px;
-        line-height: 20px;
-      }
-
-      &:hover {
-        color: $tc-gray-90;
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
+  .saveButton {
+    @include roboto-bold;
 
-    .active-tab {
-      padding-bottom: 18px;
-      border-bottom: 2px solid $tc-dark-blue-110;
-      color: $tc-gray-90;
+    border: 0 !important;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 50px !important;
+    background: #137d60 !important;
+    color: #fff !important;
+    height: 48px;
 
-      @include xs-to-sm {
-        padding-bottom: 18px;
-      }
+    @include xs-to-md {
+      display: none;
     }
   }
 }
diff --git a/src/shared/components/Settings/PageRow/index.jsx b/src/shared/components/Settings/PageRow/index.jsx
new file mode 100644
index 0000000000..1b1e555561
--- /dev/null
+++ b/src/shared/components/Settings/PageRow/index.jsx
@@ -0,0 +1,38 @@
+/**
+ * PageUl
+ *
+ * page content row (flex -> row)
+ */
+import React from 'react';
+import PT from 'prop-types';
+import cn from 'classnames';
+import './styles.scss';
+
+const PageRow = ({
+  children, half = false, styleName, ...props
+}) => (
+  <div
+    styleName={cn(
+      'page-row',
+      half ? 'page-row-half' : 'page-row-normal',
+      styleName || '',
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+PageRow.defaultProps = {
+  children: null,
+  half: false,
+  styleName: {},
+};
+
+PageRow.propTypes = {
+  children: PT.node,
+  half: PT.bool,
+  styleName: PT.shape(),
+};
+
+export default PageRow;
diff --git a/src/shared/components/Settings/PageRow/styles.scss b/src/shared/components/Settings/PageRow/styles.scss
new file mode 100644
index 0000000000..1bea3b0988
--- /dev/null
+++ b/src/shared/components/Settings/PageRow/styles.scss
@@ -0,0 +1,39 @@
+@import "~styles/mixins";
+
+.page-row {
+  display: flex;
+
+  @include md-to-xl {
+    &.page-row-half {
+      & > div {
+        width: 50%;
+      }
+
+      & > div:nth-child(1) {
+        margin-right: 0;
+      }
+
+      & > div:nth-child(2) {
+        margin-left: 20px;
+      }
+    }
+
+    &.page-row-normal > div:nth-child(1) {
+      width: 50%;
+      padding-right: 100px;
+      min-width: 500px;
+    }
+
+    &.page-row-normal > div:nth-child(2) {
+      width: 52%;
+    }
+  }
+
+  @include xs-to-md {
+    flex-direction: column;
+
+    & > div {
+      width: 100%;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/Profile/AboutMe/index.jsx b/src/shared/components/Settings/Profile/AboutMe/index.jsx
deleted file mode 100644
index f9829757ad..0000000000
--- a/src/shared/components/Settings/Profile/AboutMe/index.jsx
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * Child component of Settings/Profile/AboutMe renders "About Me" section of profile setting page.
- */
-/* global document */
-import React from 'react';
-import PT from 'prop-types';
-
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-
-import { getAllCountryObjects, getCountryObjFromAlpha3 } from 'utils/countries';
-
-import Select from 'components/Select';
-import DefaultPortrait from 'assets/images/ico-user-default.svg';
-
-import Styles from './styles.scss';
-
-const countries = getAllCountryObjects();
-
-export default class AboutMe extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onChangeImage = this.onChangeImage.bind(this);
-    this.onUploadPhoto = this.onUploadPhoto.bind(this);
-
-    this.onUpdateBio = this.onUpdateBio.bind(this);
-    this.onUpdateCountry = this.onUpdateCountry.bind(this);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { profileState } = this.props;
-    if (profileState.deletingPhoto && !nextProps.profileState.deletingPhoto) {
-      document.querySelector('#change-image-input').value = null;
-    }
-  }
-
-  onChangeImage(e) {
-    e.preventDefault();
-    const { profileState } = this.props;
-    if (profileState.uploadingPhoto) {
-      return;
-    }
-    const fileInput = document.querySelector('#change-image-input');
-    fileInput.click();
-  }
-
-  onUploadPhoto(e) {
-    e.preventDefault();
-    const {
-      handle,
-      profileState,
-      tokenV3,
-      uploadPhoto,
-    } = this.props;
-    if (profileState.uploadingPhoto) {
-      return;
-    }
-    const fileInput = document.querySelector('#change-image-input');
-    const file = fileInput.files[0];
-    uploadPhoto(handle, tokenV3, file);
-  }
-
-  onUpdateBio(e) {
-    const { onUpdateBio } = this.props;
-    e.preventDefault();
-    const bio = document.querySelector('#profile-bio').value;
-    onUpdateBio(bio);
-  }
-
-  onUpdateCountry(country) {
-    const { onUpdateCountry } = this.props;
-    if (country && country.alpha3) {
-      onUpdateCountry(country.alpha3);
-    }
-  }
-
-  render() {
-    const {
-      profile,
-      profileState,
-      bio,
-      countryCode,
-    } = this.props;
-
-    const {
-      uploadingPhoto,
-      deletingPhoto,
-    } = profileState;
-
-    const userCountry = getCountryObjFromAlpha3(countryCode);
-
-    return (
-      <div className="settings-section">
-        <div className="section-info">
-          <h2>
-            About Me
-          </h2>
-          <div className="description">
-            The most important information that other community members should know about you.
-          </div>
-        </div>
-        <div className="section-fields">
-          <div styleName="image">
-            <div className="form-label">
-              your profile image
-            </div>
-            <div styleName="edit-image">
-              {
-                profile.photoURL
-                && <img alt="User" src={profile.photoURL} styleName="profile-circle" />
-              }
-              {
-                !profile.photoURL
-                && <DefaultPortrait styleName="profile-circle" />
-              }
-              <div styleName="buttons">
-                <PrimaryButton onClick={this.onChangeImage} disabled={uploadingPhoto || deletingPhoto} theme={{ button: Styles['file-upload'] }}>
-                  {
-                    uploadingPhoto && <i className="fa fa-spinner fa-spin" />
-                  }
-                  {
-                    !uploadingPhoto && profile.photoURL && 'Change Image'
-                  }
-                  {
-                    !uploadingPhoto && !profile.photoURL && 'Add Image'
-                  }
-                </PrimaryButton>
-                <input type="file" name="image" onChange={this.onUploadPhoto} id="change-image-input" className="hidden" />
-              </div>
-            </div>
-          </div>
-          <div styleName="country">
-            <div className="form-label">
-              Country to represent
-            </div>
-            <Select
-              name="location"
-              options={countries}
-              value={userCountry}
-              onChange={this.onUpdateCountry}
-              placeholder="Country"
-              matchPos="start"
-              matchProp="name"
-              labelKey="name"
-              valueKey="name"
-              clearable={false}
-            />
-          </div>
-          <div styleName="bio">
-            <div className="form-label">
-              short bio
-              <span className="char-count">
-                {(bio && bio.length) || 0}
-                <span className="grey">
-&nbsp;/ 256
-                </span>
-              </span>
-            </div>
-            <textarea
-              name="bio"
-              id="profile-bio"
-              value={bio}
-              onChange={this.onUpdateBio}
-              maxLength="256"
-              className="topcoder-input"
-              placeholder="E.g., I'm a JS architect interested in creating new data interchange formats. I love sci-fi and riding my motorcycle."
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-AboutMe.defaultProps = {
-  bio: '',
-  countryCode: null,
-};
-
-AboutMe.propTypes = {
-  handle: PT.string.isRequired,
-  tokenV3: PT.string.isRequired,
-  profile: PT.shape().isRequired,
-  profileState: PT.shape().isRequired,
-  bio: PT.string,
-  countryCode: PT.string,
-  onUpdateCountry: PT.func.isRequired,
-  onUpdateBio: PT.func.isRequired,
-  uploadPhoto: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/AboutMe/styles.scss b/src/shared/components/Settings/Profile/AboutMe/styles.scss
deleted file mode 100644
index 88841acc69..0000000000
--- a/src/shared/components/Settings/Profile/AboutMe/styles.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-@import "../../style";
-
-.country {
-  margin-top: 30px;
-
-  input {
-    width: 100%;
-  }
-
-  span.error-message {
-    color: #ef3a3a;
-
-    @include roboto-regular;
-
-    font-size: 10px;
-    text-transform: uppercase;
-  }
-}
-
-.image {
-  .edit-image {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .profile-circle {
-      margin-top: 10px;
-      border-radius: 50%;
-      border: 1px solid #d1d3d4;
-      margin-right: 20px;
-      width: 120px;
-      height: 120px;
-      padding: 2px;
-    }
-
-    .upload-image {
-      display: flex;
-      flex-direction: column;
-
-      p {
-        margin-top: 15px;
-        margin-bottom: 10px;
-      }
-
-      input {
-        padding: 0;
-      }
-    }
-
-    .buttons {
-      padding-top: 20px;
-
-      .file-upload {
-        position: relative;
-        overflow: hidden;
-        margin: 10px;
-        margin-left: 0;
-        margin-top: 20px;
-        width: 120px;
-        text-transform: uppercase;
-        font-size: 12px;
-        min-height: 30px;
-        padding: 0;
-      }
-
-      .file-delete {
-        width: 80px;
-        margin-left: 0;
-        text-transform: uppercase;
-        font-size: 12px;
-        min-height: 30px;
-        padding: 0;
-
-        &:hover {
-          background: $tc-dark-blue;
-        }
-      }
-    }
-  }
-}
-
-.bio {
-  margin-top: 30px;
-
-  textarea {
-    background: white;
-    width: 100%;
-    height: 115px;
-
-    @include placeholder {
-      color: $tc-gray-40;
-
-      @include merriweather-sans-light;
-    }
-  }
-}
diff --git a/src/shared/components/Settings/Profile/BasicInfo/ImageInput/index.jsx b/src/shared/components/Settings/Profile/BasicInfo/ImageInput/index.jsx
deleted file mode 100644
index dfeb6cace0..0000000000
--- a/src/shared/components/Settings/Profile/BasicInfo/ImageInput/index.jsx
+++ /dev/null
@@ -1,184 +0,0 @@
-/**
- * render a user icom input component.
- */
-/* global document */
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PT from 'prop-types';
-
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-import loadImage from 'blueimp-load-image';
-
-
-import DefaultPortrait from 'assets/images/ico-user-default.svg';
-
-import Styles from './styles.scss';
-
-
-export default class ImageInput extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onChangeImage = this.onChangeImage.bind(this);
-    this.onUploadPhoto = this.onUploadPhoto.bind(this);
-
-    this.state = {
-      newBasicInfo: {},
-      isImageOversize: false,
-      isImageFile: true,
-    };
-  }
-
-  componentDidMount() {
-    const { userTraits, profile } = this.props;
-    this.loadBasicInfoTraits(userTraits, profile);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.loadBasicInfoTraits(nextProps.userTraits, nextProps.profile);
-    const {
-      profileState,
-    } = this.props;
-    if (profileState.deletingPhoto && !nextProps.profileState.deletingPhoto) {
-      document.querySelector('#change-image-input').value = null;
-    }
-  }
-
-  onChangeImage(e) {
-    e.preventDefault();
-    const {
-      profileState,
-    } = this.props;
-    if (profileState.uploadingPhoto) {
-      return;
-    }
-    const fileInput = document.querySelector('#change-image-input');
-    fileInput.click();
-  }
-
-  onUploadPhoto(e) {
-    e.preventDefault();
-    const {
-      handle,
-      profileState,
-      tokenV3,
-      uploadPhoto,
-      uploadPhotoInit,
-    } = this.props;
-    if (profileState.uploadingPhoto) {
-      return;
-    }
-    const fileInput = document.querySelector('#change-image-input');
-    const file = fileInput.files[0];
-    if (file === undefined) {
-      return;
-    }
-    const allowedTypes = ['image/png', 'image/jpg', 'image/jpeg'];
-    if (!allowedTypes.includes(file.type)) {
-      this.setState({
-        isImageFile: false,
-      });
-      return;
-    }
-    if (file.size > 2 * 1024 * 1024) {
-      // If file size is greater than 2 MB, show error message
-      this.setState({
-        isImageOversize: true,
-      });
-      return;
-    }
-    this.setState({
-      isImageOversize: false,
-      isImageFile: true,
-    });
-    uploadPhotoInit();
-    loadImage.parseMetaData(file, (data) => {
-      let orientation = 0;
-      if (data.exif) {
-        orientation = data.exif.get('Orientation');
-      }
-      loadImage(
-        file,
-        (img) => {
-          img.toBlob(
-            (blobResult) => {
-              uploadPhoto(handle, tokenV3, blobResult);
-            },
-          );
-        }, {
-          canvas: true,
-          orientation,
-        },
-      );
-    });
-  }
-
-  /**
-   * Get basic info trait
-   * @param userTraits the all user traits
-   */
-  loadBasicInfoTraits = (userTraits, profile) => {
-    const trait = userTraits.filter(t => t.traitId === 'basic_info');
-    const basicInfoTrait = trait.length === 0 ? {} : trait[0];
-    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
-    this.setState({ newBasicInfo: { ...basicInfo, photoURL: profile.photoURL } });
-  }
-
-  render() {
-    const {
-      handle,
-      profileState,
-    } = this.props;
-
-    const {
-      uploadingPhoto,
-      deletingPhoto,
-    } = profileState;
-
-    const { newBasicInfo, isImageOversize, isImageFile } = this.state;
-
-    return (
-      <div styleName="image">
-        <div styleName="edit-image">
-          {
-            newBasicInfo.photoURL
-            && <img alt="User" src={newBasicInfo.photoURL} styleName="profile-circle" />
-          }
-          {
-            !newBasicInfo.photoURL
-            && <DefaultPortrait styleName="profile-circle" />
-          }
-          <div styleName="buttons">
-            <p styleName="handle">
-              {handle}
-            </p>
-            <PrimaryButton onClick={this.onChangeImage} disabled={uploadingPhoto || deletingPhoto} theme={{ button: Styles['file-upload'] }}>
-              {
-                uploadingPhoto && <i className="fa fa-spinner fa-spin" styleName="uploading" />
-              }
-              {
-                !uploadingPhoto && newBasicInfo.photoURL && 'Upload a new avatar'
-              }
-              {
-                !uploadingPhoto && !newBasicInfo.photoURL && 'Upload a new avatar'
-              }
-            </PrimaryButton>
-            <input type="file" name="image" accept="image/*" onChange={this.onUploadPhoto} id="change-image-input" className="hidden" />
-          </div>
-        </div>
-        {!isImageFile && <div styleName="error-message">Please select jpg, jpeg or png image files only</div>}
-        {isImageFile && isImageOversize && <div styleName="error-message">Please select an image smaller than 2MB</div>}
-      </div>
-    );
-  }
-}
-
-ImageInput.propTypes = {
-  handle: PT.string.isRequired,
-  tokenV3: PT.string.isRequired,
-  userTraits: PT.array.isRequired,
-  profileState: PT.shape().isRequired,
-  uploadPhoto: PT.func.isRequired,
-  uploadPhotoInit: PT.func.isRequired,
-  profile: PT.shape().isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/BasicInfo/ImageInput/styles.scss b/src/shared/components/Settings/Profile/BasicInfo/ImageInput/styles.scss
deleted file mode 100644
index 3c917975e5..0000000000
--- a/src/shared/components/Settings/Profile/BasicInfo/ImageInput/styles.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-@import "../../../style";
-
-.image {
-  @include upto-sm {
-    display: none;
-  }
-
-  .edit-image {
-    display: flex;
-    align-items: left;
-
-    p.handle {
-      display: none;
-
-      @include upto-sm {
-        @include roboto-regular;
-
-        display: block;
-        font-size: 24px;
-        font-weight: 400;
-        line-height: 35px;
-        color: $tc-black;
-        margin-bottom: 10px;
-      }
-    }
-
-    .profile-circle {
-      border-radius: 50%;
-      border: 1px solid #d1d3d4;
-      width: 120px;
-      height: 120px;
-      padding: 2px;
-      background: #fff;
-      color: #fff;
-
-      @include upto-sm {
-        width: 80px;
-        height: 80px;
-        margin-right: 10px;
-        margin-top: 0;
-      }
-    }
-
-    .uploading {
-      width: 155px;
-    }
-
-    .buttons {
-      margin-top: auto;
-      margin-bottom: auto;
-      margin-left: 50px;
-
-      .file-upload {
-        align-self: center;
-        margin: 0;
-
-        div:first-child {
-          margin: 0;
-        }
-
-        button,
-        a {
-          @include roboto-medium;
-
-          height: 40px;
-          font-size: 15px;
-          font-weight: 500;
-          margin: 0;
-          padding: 0;
-          width: 155px;
-        }
-      }
-
-      .file-delete {
-        width: 140px;
-
-        button,
-        a {
-          @include roboto-medium;
-
-          height: 40px;
-          font-size: 15px;
-          font-weight: bold;
-          line-height: 40px;
-          margin: 0;
-          padding: 0;
-          width: 140px;
-        }
-
-        margin: 0;
-        margin-top: 15px;
-      }
-    }
-  }
-}
-
-.error-message {
-  @include roboto-medium;
-
-  display: block;
-  border-radius: 5px;
-  background-color: $tc-red-10;
-  color: $tc-red-110;
-  font-size: 15px;
-  padding: 15px;
-  margin: 15px 0;
-}
diff --git a/src/shared/components/Settings/Profile/BasicInfo/Track/index.jsx b/src/shared/components/Settings/Profile/BasicInfo/Track/index.jsx
deleted file mode 100644
index 4e1f93ad3b..0000000000
--- a/src/shared/components/Settings/Profile/BasicInfo/Track/index.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Render Track Component
- */
-import React from 'react';
-import PT from 'prop-types';
-import ReactSVG from 'react-svg';
-import { isomorphy } from 'topcoder-react-utils';
-
-import './styles.scss';
-
-let assets;
-if (isomorphy.isClientSide()) {
-  assets = require.context('assets/images/profile/tracks', false, /svg/);
-}
-
-export default function Track({
-  checked,
-  id,
-  onToggle,
-  title,
-  description,
-  value,
-}) {
-  const icon = checked ? `./${id.toLowerCase()}.svg` : `./${id.toLowerCase()}-disabled.svg`;
-  return (
-    <div styleName={`track-container ${checked ? '' : 'disabled'}`}>
-      <div styleName="body">
-        <div styleName="icon">
-          { assets && assets.keys().includes(icon) ? <ReactSVG path={assets(`${icon}`)} /> : '' }
-        </div>
-        <div styleName="info">
-          <div styleName="info-first-line">
-            { title }
-          </div>
-          <div styleName="info-second-line">
-            { description }
-          </div>
-        </div>
-      </div>
-      <div styleName="onoffswitch-no-padding-right">
-        <input
-          type="checkbox"
-          name="eprf-onoffswitch"
-          id={`pre-onoffswitch-${id}`}
-          value={value}
-          checked={checked}
-          onChange={onToggle}
-          className="onoffswitch-checkbox"
-        />
-        <label htmlFor={`pre-onoffswitch-${id}`} className="onoffswitch-label">
-          <span className="onoffswitch-inner" />
-          <span className="onoffswitch-switch" />
-          <input type="hidden" />
-        </label>
-      </div>
-    </div>
-  );
-}
-
-Track.propTypes = {
-  id: PT.string.isRequired,
-  value: PT.string.isRequired,
-  checked: PT.bool.isRequired,
-  title: PT.string.isRequired,
-  description: PT.string.isRequired,
-  onToggle: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/BasicInfo/Track/styles.scss b/src/shared/components/Settings/Profile/BasicInfo/Track/styles.scss
deleted file mode 100644
index e2b4c4dde4..0000000000
--- a/src/shared/components/Settings/Profile/BasicInfo/Track/styles.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-@import "~styles/mixins";
-
-@mixin switch-transition {
-  transition: all 0.15s ease-in-out;
-}
-
-$switch-active-color: $tc-dark-blue-110;
-$switch-inactive-color: $tc-gray-20;
-$switch-width: 34px;
-$switch-height: 20px;
-
-.track-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #f0f0f0;
-  padding: 15px 0;
-  background-color: $tc-white;
-
-  &.disabled {
-    background-color: $tc-gray-neutral-light;
-  }
-}
-
-.body {
-  display: flex;
-  flex-direction: row;
-  margin-left: 10px;
-}
-
-.icon {
-  margin-right: 15px;
-  max-height: 32px;
-  min-height: 32px;
-  max-width: 32px;
-  min-width: 32px;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-}
-
-.info-first-line {
-  @include roboto-medium;
-
-  font-size: 16px;
-  line-height: 28px;
-  font-weight: 500;
-  margin-bottom: 4px;
-  text-transform: uppercase;
-}
-
-.info-second-line {
-  @include merriweather-sans-regular;
-
-  font-size: 13px;
-  font-weight: 400;
-  text-align: left;
-  color: #a3a3ae;
-}
-
-.onoffswitch-no-padding-right {
-  margin-right: 10px;
-  margin-left: 30px;
-
-  @include switch-transition;
-
-  align-self: center;
-  background-color: $switch-inactive-color;
-  border-radius: $switch-height;
-  box-sizing: border-box;
-  height: $switch-height;
-  width: $switch-width;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
diff --git a/src/shared/components/Settings/Profile/BasicInfo/dropdowns.json b/src/shared/components/Settings/Profile/BasicInfo/dropdowns.json
deleted file mode 100644
index 7dd1def77b..0000000000
--- a/src/shared/components/Settings/Profile/BasicInfo/dropdowns.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "gender": [
-    {
-      "key": "gender",
-      "name": "Male"
-    },{
-      "key": "gender",
-      "name": "Female"
-    },{
-      "key": "gender",
-      "name": "Prefer not to answer"
-    }
-  ],
-  "tshirtSize": [
-    {
-      "key": "tshirtSize",
-      "name": "XXS"
-    },{
-      "key": "tshirtSize",
-      "name": "XS"
-    },{
-      "key": "tshirtSize",
-      "name": "S"
-    },{
-      "key": "tshirtSize",
-      "name": "M"
-    },{
-      "key": "tshirtSize",
-      "name": "L"
-    },{
-      "key": "tshirtSize",
-      "name": "XL"
-    },{
-      "key": "tshirtSize",
-      "name": "XXL"
-    },{
-      "key": "tshirtSize",
-      "name": "XXXL"
-    }
-  ]
-}
diff --git a/src/shared/components/Settings/Profile/BasicInfo/index.jsx b/src/shared/components/Settings/Profile/BasicInfo/index.jsx
deleted file mode 100644
index 3933293bb1..0000000000
--- a/src/shared/components/Settings/Profile/BasicInfo/index.jsx
+++ /dev/null
@@ -1,922 +0,0 @@
-/**
- * Child component of Settings/Profile/ renders the
- * 'Basic Info' page.
- */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable jsx-a11y/label-has-for */
-
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-import moment from 'moment';
-import fetch from 'isomorphic-fetch';
-import { config } from 'topcoder-react-utils';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-import ConsentComponent from 'components/Settings/ConsentComponent';
-import Select from 'components/Select';
-import DatePicker from 'components/challenge-listing/Filters/DatePicker';
-import ErrorMessage from 'components/Settings/ErrorMessage';
-import ImageInput from '../ImageInput';
-import Track from './Track';
-import DefaultImageInput from './ImageInput';
-import dropdowns from './dropdowns.json';
-import tracks from './tracks';
-
-
-import './styles.scss';
-
-export default class BasicInfo extends ConsentComponent {
-  constructor(props) {
-    super(props);
-
-    this.shouldDisableSave = this.shouldDisableSave.bind(this);
-    this.onUpdateCountry = this.onUpdateCountry.bind(this);
-    this.onUpdateSelect = this.onUpdateSelect.bind(this);
-    this.onUpdateInput = this.onUpdateInput.bind(this);
-    this.onUpdateDate = this.onUpdateDate.bind(this);
-    this.onHandleSaveBasicInfo = this.onHandleSaveBasicInfo.bind(this);
-    this.onSaveBasicInfo = this.onSaveBasicInfo.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onCheckFormValue = this.onCheckFormValue.bind(this);
-    this.processBasicInfo = this.processBasicInfo.bind(this);
-
-    const { userTraits } = props;
-    this.state = {
-      inputChanged: false,
-      formInvalid: false,
-      basicInfoTrait: this.loadBasicInfoTraits(userTraits),
-      profile: {},
-      personalizationTrait: this.loadPersonalizationTrait(userTraits),
-      newProfileInfo: {
-        firstName: null,
-        lastName: null,
-        tracks: [],
-        status: null,
-        addresses: [],
-        description: '',
-        email: null,
-        homeCountryCode: null,
-        competitionCountryCode: null,
-        photoURL: null,
-      },
-      newBasicInfo: {
-        gender: null,
-        shortBio: '',
-        tshirtSize: null,
-        country: null,
-        primaryInterestInTopcoder: null,
-        currentLocation: null,
-        birthDate: null,
-      },
-    };
-  }
-
-  componentDidMount() {
-    const { basicInfoTrait } = this.state;
-    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
-    this.processBasicInfo(basicInfo, this.props.profile);
-    this.setState({ profile: this.props.profile });
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const basicInfoTrait = this.loadBasicInfoTraits(nextProps.userTraits);
-
-    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
-    const previousBasicInfoTrait = this.loadBasicInfoTraits(this.props.userTraits);
-
-    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
-    if (!_.isEqual(basicInfoTrait, previousBasicInfoTrait)) {
-      this.processBasicInfo(basicInfo, nextProps.profile);
-      this.setState({
-        basicInfoTrait,
-        personalizationTrait,
-        inputChanged: false,
-      });
-    }
-    if (!_.isEqual(this.state.profile, nextProps.profile)) {
-      this.processBasicInfo(basicInfo, nextProps.profile);
-      this.setState({ profile: nextProps.profile });
-    }
-    if (nextProps.lookupData) {
-      const { countries } = nextProps.lookupData;
-      const { newBasicInfo, newProfileInfo } = this.state;
-      if (!newBasicInfo.country) {
-        const code = newProfileInfo.homeCountryCode || newProfileInfo.competitionCountryCode;
-        const { country } = countries.find(c => c.countryCode === code) || {};
-        newBasicInfo.country = country;
-        this.setState({ newBasicInfo });
-      }
-    }
-  }
-
-  onCheckFormValue(newBasicInfo, newProfileInfo) {
-    let invalid = false;
-
-    if (!_.trim(newProfileInfo.firstName).length) {
-      invalid = true;
-    }
-
-    if (!_.trim(newProfileInfo.lastName).length) {
-      invalid = true;
-    }
-
-    if (!_.trim(newBasicInfo.country).length) {
-      invalid = true;
-    }
-
-    if (_.trim(newBasicInfo.birthDate).length > 0) {
-      if (!moment().isAfter(newBasicInfo.birthDate)) {
-        invalid = true;
-      }
-    }
-
-    this.setState({ formInvalid: invalid });
-    return invalid;
-  }
-
-  async onCheckUserTrait(traitId) {
-    const { handle, tokenV3 } = this.props;
-    let isExists = false;
-    await fetch(`${config.API.V5}/members/${handle}/traits?traitIds=${traitId}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${tokenV3}`,
-      },
-    })
-      .then(result => result.json())
-      .then((dataResponse) => {
-        if (dataResponse.length > 0) {
-          const trait = dataResponse[0];
-          if (trait.createdAt) {
-            isExists = true;
-          }
-        }
-      });
-
-    return isExists;
-  }
-
-  /**
-   * Show User Consent Modal
-   * @param {*} e event
-   */
-  onHandleSaveBasicInfo(e) {
-    e.preventDefault();
-    this.setState({ isSaving: true, inputChange: true });
-    const { newBasicInfo, newProfileInfo } = this.state;
-    if (this.onCheckFormValue(newBasicInfo, newProfileInfo)) {
-      this.setState({ isSaving: false });
-      return;
-    }
-    this.showConsent(this.onSaveBasicInfo.bind(this));
-  }
-
-  /**
-   * Save Basic Info
-   * @param answer user consent answer value
-   */
-  async onSaveBasicInfo(answer) {
-    const {
-      newBasicInfo, newProfileInfo, basicInfoTrait, personalizationTrait,
-    } = this.state;
-    const {
-      handle,
-      tokenV3,
-      addUserTrait,
-      updateUserTrait,
-      updateProfileV5,
-    } = this.props;
-    try {
-      const parsedDate = moment(newBasicInfo.birthDate).utc();
-      if (parsedDate.isValid()) {
-        newBasicInfo.birthDate = `${parsedDate.format('YYYY-MM-DD')}T00:00:00.000Z`;
-      } else {
-        newBasicInfo.birthDate = null;
-      }
-    } catch (error) { // eslint-disable-line
-      newBasicInfo.birthDate = null;
-    }
-
-    if (newBasicInfo.gender === '') {
-      newBasicInfo.gender = null;
-    }
-
-    if (newBasicInfo.tshirtSize === '') {
-      newBasicInfo.tshirtSize = null;
-    }
-
-    newProfileInfo.addresses[0] = _.omit(newProfileInfo.addresses[0], ['createdAt', 'updatedBy', 'createdBy', 'updatedAt']);
-    _.forEach(newProfileInfo.addresses[0], (value, key) => {
-      newProfileInfo.addresses[0][key] = _.trim(value);
-    });
-    _.forEach(['currentLocation', 'primaryInterestInTopcoder'], (key) => {
-      newBasicInfo[key] = _.trim(newBasicInfo[key]);
-    });
-    _.forEach(['description'], (key) => {
-      newProfileInfo[key] = _.trim(newProfileInfo[key]);
-    });
-    // This is a hack to check if the user has an existing basic_info trait object
-    const exists = await this.onCheckUserTrait('basic_info');
-    if (exists) {
-      const newBasicInfoTrait = { ...basicInfoTrait };
-      newBasicInfoTrait.traits.data = [];
-      newBasicInfoTrait.traits.data.push(newBasicInfo);
-      await updateUserTrait(handle, 'basic_info', newBasicInfoTrait.traits.data, tokenV3);
-    } else {
-      const data = [];
-      data.push(newBasicInfo);
-      await addUserTrait(handle, 'basic_info', data, tokenV3);
-    }
-
-    // save personalization
-    if (_.isEmpty(personalizationTrait)) {
-      const personalizationData = { userConsent: answer };
-      await addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-    } else {
-      const trait = personalizationTrait.traits.data[0];
-      if (trait.userConsent !== answer) {
-        const personalizationData = { userConsent: answer };
-        await updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-      }
-    }
-
-    if (newProfileInfo.homeCountryCode == null) {
-      delete newProfileInfo.homeCountryCode;
-    }
-
-    const updateProfileData = {
-      ...newProfileInfo,
-    };
-
-    await updateProfileV5(updateProfileData, handle, tokenV3);
-
-    this.setState({ isSaving: false });
-  }
-
-  onUpdateSelect(option) {
-    if (option) {
-      const { newBasicInfo: oldBasicInfo } = this.state;
-      const newBasicInfo = { ...oldBasicInfo };
-      newBasicInfo[option.key] = option.name;
-      this.setState({ newBasicInfo, inputChanged: true });
-    }
-  }
-
-  onUpdateInput(e) {
-    const { newBasicInfo: oldBasicInfo, newProfileInfo: oldProfileInfo } = this.state;
-    const newBasicInfo = { ...oldBasicInfo };
-    const newProfileInfo = { ...oldProfileInfo };
-    const { name, value } = e.target;
-    switch (name) {
-      case 'stateCode':
-      case 'zip':
-      case 'city':
-      case 'streetAddr1':
-      case 'streetAddr2':
-        if (newProfileInfo.addresses.length === 0) {
-          newProfileInfo.addresses.push({
-            stateCode: '',
-            zip: '',
-            city: '',
-            streetAddr1: '',
-            streetAddr2: '',
-          });
-        }
-        newProfileInfo.addresses[0][name] = value;
-        break;
-      case 'firstName':
-      case 'lastName':
-        newProfileInfo[name] = value.replace(/[^a-zA-Z0-9,. -]/g, '');
-        break;
-      default:
-        if (name in newProfileInfo) {
-          newProfileInfo[name] = value;
-        } else if (name in newBasicInfo) {
-          newBasicInfo[name] = value;
-        }
-    }
-
-    this.setState({ newBasicInfo, newProfileInfo, inputChanged: true });
-  }
-
-  onUpdateDate(date) {
-    if (date) {
-      const { newBasicInfo: oldBasicInfo } = this.state;
-      const newBasicInfo = { ...oldBasicInfo };
-      newBasicInfo.birthDate = date;
-      this.setState({ newBasicInfo, inputChanged: true });
-    }
-  }
-
-  onUpdateCountry(country) {
-    if (country) {
-      const { newBasicInfo: oldBasicInfo } = this.state;
-      const newBasicInfo = { ...oldBasicInfo };
-      newBasicInfo.country = country.name;
-      newBasicInfo.competitionCountryCode = country.key;
-      newBasicInfo.homeCountryCode = country.key;
-      this.setState({ newBasicInfo, inputChanged: true });
-    }
-  }
-
-  /**
-   * Change toggle button check value
-   * @param id community id
-   * @param checked check value
-   */
-  onChange(id, checked) {
-    const { newProfileInfo } = this.state;
-    if (checked) {
-      newProfileInfo.tracks.push(id.toUpperCase());
-    } else {
-      _.remove(newProfileInfo.tracks, track => (
-        track.toUpperCase() === id.toUpperCase()
-      ));
-    }
-    this.setState({ newProfileInfo, inputChanged: true });
-  }
-
-  /**
-   * Get basic info trait
-   * @param userTraits the all user traits
-   */
-  loadBasicInfoTraits = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'basic_info');
-    const basicInfo = trait.length === 0 ? {} : trait[trait.length - 1];
-    return _.assign({}, basicInfo);
-  }
-
-  /**
-   * Get personalization trait
-   * @param userTraits the all user traits
-   */
-  loadPersonalizationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'personalization');
-    const personalization = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, personalization);
-  }
-
-  /**
-   * Process basic info state
-   */
-  processBasicInfo = (value, profile) => {
-    const { newBasicInfo, newProfileInfo: profileInfo } = this.state;
-    if (_.has(profile, 'handle')) {
-      const newProfileInfo = Object.keys(profileInfo).reduce((acc, key) => {
-        if (_.has(profileInfo, key)) {
-          acc[key] = profile[key] || profileInfo[key];
-        }
-        return acc;
-      }, {});
-      const basicInfo = Object.keys(newBasicInfo).reduce((acc, key) => {
-        if (_.has(value, key)) {
-          acc[key] = value[key];
-          newBasicInfo[key] = value[key];
-        }
-        return acc;
-      }, {});
-      this.setState({ newBasicInfo: basicInfo, newProfileInfo });
-    }
-    if (_.has(value, 'tshirtSize')) {
-      newBasicInfo.tshirtSize = value.tshirtSize;
-    }
-    if (_.has(value, 'userId')) {
-      newBasicInfo.userId = value.userId;
-    } else {
-      newBasicInfo.userId = profile.userId;
-    }
-    this.setState({ newBasicInfo });
-  }
-
-  /**
-   * Check form validation
-   * @returns {boolean}
-   */
-  shouldDisableSave() {
-    const { newBasicInfo, inputChanged, newProfileInfo } = this.state;
-
-    const { addresses } = newProfileInfo;
-
-    const invalid = !_.trim(newProfileInfo.firstName).length
-      || !_.trim(newProfileInfo.lastName).length
-      || !_.trim(newBasicInfo.gender).length
-      || !_.trim(newBasicInfo.tshirtSize).length
-      || !_.trim(newBasicInfo.country).length
-      || !_.trim(newBasicInfo.primaryInterestInTopcoder).length
-      || !_.trim(newBasicInfo.currentLocation).length
-      || !_.trim(newBasicInfo.birthDate).length
-      || (addresses.length > 0 && !_.trim(addresses[0].city).length)
-      || (addresses.length > 0 && !_.trim(addresses[0].stateCode).length)
-      || (addresses.length > 0 && !_.trim(addresses[0].zip).length)
-      || (addresses.length > 0
-        && !_.trim(addresses[0].streetAddr1).length);
-
-    // Invalid value, can not save
-    if (invalid) {
-      return true;
-    }
-
-    // Value not changed, no need save
-    return inputChanged === false;
-  }
-
-  render() {
-    const {
-      newBasicInfo,
-      newProfileInfo,
-      inputChanged,
-    } = this.state;
-
-    const canModifyTrait = !this.props.traitRequestCount;
-    const { lookupData } = this.props;
-    const countries = _.get(lookupData, 'countries', []).map(country => ({
-      key: country.countryCode,
-      name: country.country,
-    }));
-
-    return (
-      <div styleName="basic-info-container">
-        {
-          this.shouldRenderConsent() && this.renderConsent()
-        }
-        <h1>
-          Basic Info
-        </h1>
-        <div styleName="sub-title first">
-          Avatar
-        </div>
-        <div styleName="user-icon">
-          <DefaultImageInput
-            {...this.props}
-          />
-        </div>
-        <div styleName="sub-title second">
-          Personal details
-        </div>
-        <div styleName="form-container-default">
-          <form name="basic-info-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="firstName">
-                  First name
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <span styleName="text-required">* Required</span>
-                <input disabled={!canModifyTrait} id="firstName" name="firstName" type="text" placeholder="First Name" onChange={this.onUpdateInput} value={newProfileInfo.firstName} maxLength="64" required />
-                <ErrorMessage invalid={_.isEmpty(newProfileInfo.firstName) && !_.isNull(newProfileInfo.firstName) && inputChanged} message="First Name cannot be empty" />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="lastName">
-                  Last name
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <span styleName="text-required">* Required</span>
-                <input disabled={!canModifyTrait} id="lastName" name="lastName" type="text" placeholder="Last Name" onChange={this.onUpdateInput} value={newProfileInfo.lastName} maxLength="64" required />
-                <ErrorMessage invalid={_.isEmpty(newProfileInfo.lastName) && !_.isNull(newProfileInfo.lastName) && inputChanged} message="Last Name cannot be empty" />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="birthDate">
-                  Birth Date
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-
-                <div styleName="date-picker">
-                  <DatePicker
-                    readOnly
-                    numberOfMonths={1}
-                    isOutsideRange={moment()}
-                    date={newBasicInfo.birthDate}
-                    id="date-range-picker1"
-                    onDateChange={this.onUpdateDate}
-                  />
-                </div>
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="address">
-                  Address
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <input disabled={!canModifyTrait} id="address" name="streetAddr1" type="text" placeholder="Your address" onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 && newProfileInfo.addresses[0].streetAddr1 != null ? newProfileInfo.addresses[0].streetAddr1 : ''}`} maxLength="64" required />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="address2">
-                  Address 2
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <input disabled={!canModifyTrait} id="address" name="streetAddr2" type="text" styleName="second-addr" placeholder="Your address continued" onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 && newProfileInfo.addresses[0].streetAddr2 != null ? newProfileInfo.addresses[0].streetAddr2 : ''}`} maxLength="64" />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="city">
-                  City
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <input disabled={!canModifyTrait} id="city" name="city" type="text" placeholder="Which city do you live in?" onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 && newProfileInfo.addresses[0].city != null ? newProfileInfo.addresses[0].city : ''}`} maxLength="64" required />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="state">
-                  State
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <input disabled={!canModifyTrait} id="state" name="stateCode" type="text" placeholder="State" onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 && newProfileInfo.addresses[0].stateCode != null ? newProfileInfo.addresses[0].stateCode : ''}`} maxLength="64" required />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="zipCode">
-                  ZIP
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <input disabled={!canModifyTrait} id="zipCode" name="zip" type="text" placeholder="ZIP/Postal Code" onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 && newProfileInfo.addresses[0].zip != null ? newProfileInfo.addresses[0].zip : ''}`} maxLength="64" required />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="country">
-                  Country
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <span styleName="text-required">* Required</span>
-                <Select
-                  name="country"
-                  options={countries}
-                  value={newBasicInfo.country}
-                  onChange={this.onUpdateCountry}
-                  placeholder="Country"
-                  matchPos="start"
-                  matchProp="name"
-                  labelKey="name"
-                  valueKey="name"
-                  disabled={!canModifyTrait}
-                  clearable={false}
-                />
-                <ErrorMessage invalid={_.isEmpty(newBasicInfo.country) && inputChanged} message="Country cannot be empty" addMargin />
-              </div>
-            </div>
-          </form>
-        </div>
-        <div styleName="sub-title second">
-          About you
-        </div>
-        <div styleName="form-container-default">
-          <form name="basic-info-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="gender">
-                  Gender
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <Select
-                  name="gender"
-                  options={dropdowns.gender}
-                  value={newBasicInfo.gender}
-                  onChange={this.onUpdateSelect}
-                  placeholder="Gender"
-                  labelKey="name"
-                  valueKey="name"
-                  clearable={false}
-                  disabled={!canModifyTrait}
-                />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="tshirtSize">
-                  T-shirt size
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <Select
-                  name="tshirtSize"
-                  options={dropdowns.tshirtSize}
-                  value={newBasicInfo.tshirtSize}
-                  onChange={this.onUpdateSelect}
-                  placeholder="Select your size from the list"
-                  labelKey="name"
-                  valueKey="name"
-                  clearable={false}
-                  disabled={!canModifyTrait}
-                />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="currentLocation">
-                  Current Location
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <input disabled={!canModifyTrait} id="currentLocation" name="currentLocation" type="text" placeholder="Where in the world are you currently?" onChange={this.onUpdateInput} value={newBasicInfo.currentLocation} maxLength="64" required />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="primaryInterestInTopcoder">
-                  Primary interests
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <input disabled={!canModifyTrait} id="primaryInterestInTopcoder" name="primaryInterestInTopcoder" type="text" placeholder="primary Interest In Topcoder" onChange={this.onUpdateInput} value={newBasicInfo.primaryInterestInTopcoder} maxLength="64" required />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="bio">
-                  Short bio
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field description">
-                <div styleName="first-line">
-                  <span styleName="description-counts">
-                    {newProfileInfo.description.length}/240
-                  </span>
-                </div>
-                <textarea disabled={!canModifyTrait} id="description" styleName="bio-text" name="description" placeholder="In 240 characters or less, tell the Topcoder community a bit about yourself" onChange={this.onUpdateInput} value={newProfileInfo.description} maxLength="240" cols="3" rows="10" />
-              </div>
-            </div>
-          </form>
-        </div>
-        <div styleName="about-me-container-mobile">
-          <div styleName="user-icon">
-            <ImageInput
-              {...this.props}
-            />
-          </div>
-          <div styleName="form-container">
-            <p styleName="handle">
-              {newBasicInfo.handle}
-            </p>
-            <div styleName="mb-user-card">
-              <ImageInput
-                {...this.props}
-              />
-            </div>
-            <form name="BasicInfoForm" noValidate autoComplete="off">
-              <div styleName="user-card">
-                <div styleName="img-container">
-                  <ImageInput
-                    {...this.props}
-                  />
-                </div>
-                <div styleName="main">
-                  <p styleName="user-handle">
-                    {newBasicInfo.handle}
-                  </p>
-                  <div styleName="row">
-                    <div styleName="field">
-                      <label htmlFor="firstNameId">
-                        First name
-                        <span styleName="text-required">* Required</span>
-                        <input type="hidden" />
-                      </label>
-
-                      <input disabled={!canModifyTrait} id="firstNameId" name="firstName" type="text" placeholder="First Name" onChange={this.onUpdateInput} value={newProfileInfo.firstName} maxLength="64" required />
-                      <ErrorMessage invalid={_.isEmpty(newProfileInfo.firstName) && inputChanged} addMargin message="First Name cannot be empty" />
-                    </div>
-                    <div styleName="field">
-                      <label htmlFor="lastNameId">
-                        Last name
-                        <span styleName="text-required">* Required</span>
-                        <input type="hidden" />
-                      </label>
-                      <input disabled={!canModifyTrait} id="lastNameId" name="lastName" type="text" placeholder="Last Name" onChange={this.onUpdateInput} value={newProfileInfo.lastName} maxLength="64" required />
-                      <ErrorMessage invalid={_.isEmpty(newProfileInfo.lastName) && inputChanged} addMargin message="Last Name cannot be empty" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field">
-                  <label htmlFor="birthDate">
-                    Birth Date
-                    <input type="hidden" />
-                  </label>
-                  <div styleName="date-picker-sm">
-                    <DatePicker
-                      readOnly
-                      numberOfMonths={1}
-                      isOutsideRange={moment()}
-                      date={newBasicInfo.birthDate}
-                      id="date-range-picker2"
-                      onDateChange={this.onUpdateDate}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field">
-                  <label htmlFor="addressId">
-                    Address
-                    <input type="hidden" />
-                  </label>
-                  <input disabled={!canModifyTrait} id="addressId" name="streetAddr1" type="text" placeholder="Address Line 1" onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 ? newProfileInfo.addresses[0].streetAddr1 : ''}`} maxLength="64" required />
-                  <input disabled={!canModifyTrait} id="addressId" name="streetAddr2" type="text" styleName="second-addr" placeholder="Address Line 2  " onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 ? newProfileInfo.addresses[0].streetAddr2 : ''}`} maxLength="64" />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field">
-                  <label htmlFor="cityId">
-                    City
-                    <input type="hidden" />
-                  </label>
-                  <input disabled={!canModifyTrait} id="cityId" name="city" type="text" placeholder="city" onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 ? newProfileInfo.addresses[0].city : ''}`} maxLength="64" required />
-                </div>
-                <div styleName="field">
-                  <label htmlFor="stateId">
-                    State
-                    <input type="hidden" />
-                  </label>
-                  <input disabled={!canModifyTrait} id="stateId" name="stateCode" type="text" placeholder="state" onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 ? newProfileInfo.addresses[0].stateCode : ''}`} maxLength="64" required />
-                </div>
-                <div styleName="field">
-                  <label htmlFor="zipCodeId">
-                    ZIP Code
-                    <input type="hidden" />
-                  </label>
-                  <input disabled={!canModifyTrait} id="zipCodeId" name="zip" type="text" placeholder="zipCode" onChange={this.onUpdateInput} value={`${newProfileInfo.addresses.length > 0 ? newProfileInfo.addresses[0].zip : ''}`} maxLength="64" required />
-                </div>
-                <div styleName="field">
-                  <label htmlFor="countryId">
-                    Country
-                    <span styleName="text-required">* Required</span>
-                    <input type="hidden" />
-                  </label>
-                  <Select
-                    name="countryId"
-                    options={countries}
-                    value={newBasicInfo.country}
-                    onChange={this.onUpdateCountry}
-                    placeholder="Country"
-                    matchPos="start"
-                    matchProp="name"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={false}
-                    disabled={!canModifyTrait}
-                  />
-                  <ErrorMessage invalid={_.isEmpty(newBasicInfo.country) && inputChanged} message="Country cannot be empty" />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field">
-                  <label htmlFor="gender">
-                    Gender
-                    <input type="hidden" />
-                  </label>
-                  <Select
-                    name="gender"
-                    options={dropdowns.gender}
-                    value={newBasicInfo.gender}
-                    onChange={this.onUpdateSelect}
-                    placeholder="Gender"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={false}
-                    disabled={!canModifyTrait}
-                  />
-                </div>
-                <div styleName="field">
-                  <label htmlFor="tshirtSize">
-                    T-Shirt-Size
-                    <input type="hidden" />
-                  </label>
-                  <Select
-                    name="tshirtSize"
-                    options={dropdowns.tshirtSize}
-                    value={newBasicInfo.tshirtSize}
-                    onChange={this.onUpdateSelect}
-                    placeholder="t-shirt Size"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={false}
-                    disabled={!canModifyTrait}
-                  />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field">
-                  <label htmlFor="currentLocation">
-                    Current Location
-                    <input type="hidden" />
-                  </label>
-                  <input disabled={!canModifyTrait} id="currentLocation" name="currentLocation" type="text" placeholder="current Location" onChange={this.onUpdateInput} value={newBasicInfo.currentLocation} maxLength="64" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field">
-                  <label htmlFor="primaryInterestInTopcoder">
-                    Primary Interest in Topcoder
-                    <input type="hidden" />
-                  </label>
-                  <input disabled={!canModifyTrait} id="primaryInterestInTopcoder" name="primaryInterestInTopcoder" type="text" placeholder="primary Interest In Topcoder" onChange={this.onUpdateInput} value={newBasicInfo.primaryInterestInTopcoder} maxLength="64" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field">
-                  <label styleName="bio-label" htmlFor="description">
-                    <span>
-                      Short Bio
-                    </span>
-                    <span>
-                      {newProfileInfo.description.length}/240
-                    </span>
-                  </label>
-                  <textarea disabled={!canModifyTrait} id="description" styleName="bio-text" name="description" placeholder="short Bio" onChange={this.onUpdateInput} value={newProfileInfo.description} maxLength="240" cols="3" rows="10" required />
-                </div>
-              </div>
-            </form>
-          </div>
-        </div>
-        <div styleName="tracks-container">
-          <div styleName="title-info">
-            <div styleName="title">
-              Tracks
-            </div>
-            <p styleName="description">
-              Topcoder&apos;s three categories of challenges... please pick at
-              least one based on your skills and interests.
-            </p>
-          </div>
-          <div styleName="track-list">
-            {
-              _.map(tracks, (track) => {
-                const result = newProfileInfo.tracks.filter(item => (
-                  item.toUpperCase() === track.id.toUpperCase()
-                ));
-                const checked = result.length !== 0;
-                return (
-                  <Track
-                    icon={track.icon}
-                    key={track.id}
-                    id={track.id}
-                    value={track.id}
-                    checked={checked}
-                    title={track.name}
-                    description={track.description}
-                    onToggle={event => this.onChange(track.id, event.target.checked)}
-                  />
-                );
-              })
-            }
-          </div>
-        </div>
-        <div styleName="button-save">
-          <PrimaryButton
-            styleName="white-label"
-            disabled={!canModifyTrait}
-            onClick={this.onHandleSaveBasicInfo}
-          >
-            Save Changes
-          </PrimaryButton>
-        </div>
-      </div>
-    );
-  }
-}
-
-BasicInfo.propTypes = {
-  tokenV3: PT.string.isRequired,
-  handle: PT.string.isRequired,
-  profile: PT.shape().isRequired,
-  userTraits: PT.array.isRequired,
-  addUserTrait: PT.func.isRequired,
-  updateUserTrait: PT.func.isRequired,
-  updateProfileV5: PT.func.isRequired,
-  traitRequestCount: PT.number.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/BasicInfo/styles.scss b/src/shared/components/Settings/Profile/BasicInfo/styles.scss
deleted file mode 100644
index 5be08bffbe..0000000000
--- a/src/shared/components/Settings/Profile/BasicInfo/styles.scss
+++ /dev/null
@@ -1,471 +0,0 @@
-@import "../../style";
-
-.basic-info-container {
-  display: flex;
-  flex-direction: column;
-
-  @include upto-sm {
-    padding: 20px;
-    border-bottom: 1px solid $tc-gray-10;
-  }
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
-
-    &.second {
-      margin-top: 40px;
-      margin-bottom: 30px;
-    }
-
-    &.first {
-      margin-bottom: 30px;
-      margin-top: 10px;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-}
-
-.form-container-default {
-  @include form-container-default;
-
-  input {
-    @include roboto-regular;
-
-    height: 40px;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-    margin-bottom: 0;
-
-    @include placeholder {
-      text-transform: capitalize;
-    }
-  }
-
-  textarea {
-    @include placeholder {
-      text-transform: capitalize;
-    }
-  }
-
-  .text-required {
-    @include roboto-medium;
-
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-bottom: 5px;
-    text-align: right;
-  }
-
-  .text-optional {
-    @include roboto-medium;
-
-    font-size: 10px;
-    color: #888894;
-    margin-bottom: 5px;
-    text-align: right;
-  }
-
-  .description {
-    display: flex;
-    flex-direction: column;
-    width: 80%;
-
-    .first-line {
-      display: flex;
-      justify-content: flex-end;
-
-      .description-counts {
-        @include roboto-medium;
-
-        font-size: 11px;
-        color: $tc-dark-blue-110;
-        text-align: right;
-      }
-    }
-
-    .bio-text {
-      height: 169px;
-      border-radius: 4px;
-      margin-bottom: 10px;
-      width: 100%;
-      resize: vertical;
-    }
-  }
-
-  .user-icon {
-    width: 100%;
-  }
-
-  .row {
-    .col-1 {
-      display: flex;
-      flex-grow: 1;
-      align-items: center;
-      max-width: 0;
-      min-width: 0;
-      margin-right: 0;
-      width: auto;
-      margin-top: 0 !important;
-      margin-bottom: 0 !important;
-      padding-top: 0 !important;
-    }
-  }
-}
-
-.about-me-container-mobile {
-  display: none;
-
-  @include upto-sm {
-    display: flex;
-    align-items: flex-start;
-  }
-
-  @include roboto-light;
-
-  .user-icon {
-    margin-right: 40px;
-
-    @include from-sm-to-lg {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .form-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    .handle {
-      @include roboto-medium;
-
-      width: 103px;
-      height: 35px;
-      font-size: 28px;
-      line-height: 1.25;
-      color: $tc-black;
-      margin-bottom: 20px;
-
-      @include from-sm-to-lg {
-        display: none;
-      }
-
-      @include upto-sm {
-        display: none;
-      }
-    }
-
-    .row {
-      display: flex;
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        width: 100%;
-        display: block;
-        margin-bottom: 0;
-      }
-
-      .field {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        margin-right: 10px;
-
-        @include upto-sm {
-          display: flex;
-          flex-direction: column;
-          margin-right: 0;
-          padding-bottom: 10px;
-        }
-
-        label {
-          @include roboto-medium;
-
-          font-size: 12px;
-          line-height: 15px;
-          font-weight: 500;
-          color: $tc-gray-80;
-          margin-bottom: 5px;
-
-          .text-required {
-            font-size: 10px;
-            color: $tc-red-110;
-            margin-left: 5px;
-          }
-        }
-      }
-    }
-
-    div.field:last-child {
-      margin-right: 0;
-    }
-
-    div.row:last-child {
-      margin-bottom: 0;
-    }
-
-    input {
-      @include roboto-regular;
-
-      height: 36px;
-      margin: 0;
-      font-size: 15px;
-      line-height: 20px;
-      font-weight: 400;
-      color: $tc-black;
-      border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-
-      @include upto-sm {
-        margin-top: 5px;
-      }
-
-      @include placeholder {
-        text-transform: capitalize;
-      }
-    }
-
-    textarea {
-      @include placeholder {
-        text-transform: capitalize;
-      }
-    }
-
-    .second-addr {
-      margin-top: 10px;
-    }
-
-    .mb-user-card {
-      display: none;
-
-      @include upto-sm {
-        display: block;
-        margin-bottom: 15px;
-      }
-    }
-
-    .user-card {
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 10px;
-
-      @include from-sm-to-lg {
-        margin-bottom: 15px;
-      }
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
-
-      .img-container {
-        display: none;
-
-        @include from-sm-to-lg {
-          display: block;
-        }
-      }
-
-      .main {
-        display: block;
-        width: 100%;
-
-        @include from-sm-to-lg {
-          display: flex;
-          flex-direction: column;
-        }
-      }
-
-      p.user-handle {
-        display: none;
-
-        @include from-sm-to-lg {
-          @include roboto-regular;
-
-          display: block;
-          font-size: 28px;
-          font-weight: 400;
-          line-height: 35px;
-          color: $tc-black;
-          margin-bottom: 20px;
-        }
-      }
-    }
-
-    .bio-label {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .bio-text {
-      height: 70px;
-    }
-
-    .date-input {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .required {
-    color: $tc-red;
-    font-size: 13px;
-  }
-}
-
-.tracks-container {
-  display: flex;
-  flex-direction: column;
-  margin-top: 20px;
-
-  .title-info {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 10px;
-
-    .title {
-      @include roboto-medium;
-
-      font-size: 16px;
-      font-weight: 500;
-      color: $tc-black;
-      text-transform: uppercase;
-      margin-bottom: 5px;
-    }
-
-    .description {
-      @include merriweather-sans-regular;
-
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 20px;
-      color: $tc-gray-40;
-      font-style: italic;
-    }
-  }
-
-  .track-list {
-    border-top: 1px solid $tc-gray-neutral-dark;
-  }
-}
-
-.button-save {
-  align-self: center;
-  margin-top: 20px;
-
-  div:first-child {
-    margin: 0;
-  }
-
-  button,
-  a {
-    @include roboto-medium;
-
-    height: 40px;
-    font-size: 15px;
-    font-weight: 500;
-    margin: 0;
-    padding: 0;
-    width: 170px;
-  }
-
-  .white-label {
-    color: $tc-white;
-    margin: 0;
-  }
-}
-
-/*
- * React Select component styling
- */
-.basic-info-container .form-container .row .field :global .Select,
-.basic-info-container .form-container .row .field :global .Select-value span,
-.basic-info-container .form-container .row .field :global .Select-menu-outer,
-.basic-info-container.form-container .row .field :global .Select-placeholder,
-.basic-info-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    margin-top: 5px;
-  }
-}
-
-.basic-info-container div[class="Select-control"] {
-  height: 40px;
-
-  div[class="Select-input"] {
-    height: 38px;
-
-    @include placeholder {
-      text-transform: capitalize;
-    }
-  }
-
-  div[class="Select-placeholder"] {
-    height: 38px;
-    line-height: 40px !important;
-
-    @include upto-sm {
-      line-height: 38px !important;
-    }
-  }
-
-  div[class="Select-value"] {
-    line-height: 40px !important;
-  }
-}
-
-.basic-info-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
-}
-
-.date-picker {
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-
-.date-picker-sm {
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-
-.col-2,
-.col-percent50,
-.col-percent35 {
-  width: auto;
-}
diff --git a/src/shared/components/Settings/Profile/BasicInfo/tracks.jsx b/src/shared/components/Settings/Profile/BasicInfo/tracks.jsx
deleted file mode 100644
index eb9ab4e430..0000000000
--- a/src/shared/components/Settings/Profile/BasicInfo/tracks.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-
-const tracks = {
-  DESIGN: {
-    id: 'design',
-    name: 'Design',
-    description: 'Website, mobile, and product design; UI and UX',
-  },
-  DEVELOP: {
-    id: 'develop',
-    name: 'Development',
-    description: 'Software architecture, component assembly, application development, and bug hunting',
-  },
-  DATA_SCIENCE: {
-    id: 'data_science',
-    name: 'Data Science',
-    description: 'Algorithms and data structures, statistical analysis',
-  },
-};
-
-export default tracks;
diff --git a/src/shared/components/Settings/Profile/Community/Item/index.jsx b/src/shared/components/Settings/Profile/Community/Item/index.jsx
deleted file mode 100644
index 5edbc07dd3..0000000000
--- a/src/shared/components/Settings/Profile/Community/Item/index.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Render item of community
- */
-import React from 'react';
-import PT from 'prop-types';
-
-import './styles.scss';
-
-export default function Item({
-  checked,
-  id,
-  onToggle,
-  title,
-  description,
-  value,
-  icon,
-}) {
-  return (
-    <div styleName="item-container">
-      <div styleName="body">
-        <img src={icon} alt="community icon" styleName="icon" />
-        <div styleName="info">
-          <div styleName="info-first-line">
-            { title }
-          </div>
-          <div styleName="info-second-line">
-            { description }
-          </div>
-        </div>
-        <div styleName="mobile-view">
-          <div styleName="mobile-first-line">
-            <img src={icon} alt={id} styleName="mobile-icon" />
-            <div styleName="mobile-title">
-              { title }
-            </div>
-            <div className="onoffswitch-mobile" styleName="onoffswitch-no-padding-right">
-              <input
-                type="checkbox"
-                name="eprf-onoffswitch"
-                id={`pre-onoffswitch-${id}`}
-                value={value}
-                checked={checked}
-                onChange={onToggle}
-                className="onoffswitch-checkbox"
-              />
-              <label htmlFor={`pre-onoffswitch-${id}`} className="onoffswitch-label">
-                <span className="onoffswitch-inner" />
-                <span className="onoffswitch-switch" />
-                <input type="hidden" />
-              </label>
-            </div>
-          </div>
-          <div styleName="mobile-second-line">
-            { description }
-          </div>
-        </div>
-      </div>
-      <div className="onoffswitch" styleName="onoffswitch-no-padding-right">
-        <input
-          type="checkbox"
-          name="eprf-onoffswitch"
-          id={`pre-onoffswitch-${id}`}
-          value={value}
-          checked={checked}
-          onChange={onToggle}
-          className="onoffswitch-checkbox"
-        />
-        <label htmlFor={`pre-onoffswitch-${id}`} className="onoffswitch-label">
-          <span className="onoffswitch-inner" />
-          <span className="onoffswitch-switch" />
-          <input type="hidden" />
-        </label>
-      </div>
-    </div>
-  );
-}
-
-Item.propTypes = {
-  id: PT.string.isRequired,
-  icon: PT.string.isRequired,
-  value: PT.string.isRequired,
-  checked: PT.bool.isRequired,
-  title: PT.string.isRequired,
-  description: PT.string.isRequired,
-  onToggle: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Community/Item/styles.scss b/src/shared/components/Settings/Profile/Community/Item/styles.scss
deleted file mode 100644
index e4b5d29296..0000000000
--- a/src/shared/components/Settings/Profile/Community/Item/styles.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-@import "../../../style";
-
-.item-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  border: 1px solid $tc-gray-neutral-dark;
-  border-top: 0;
-  padding: 20px;
-}
-
-.body {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  align-items: center;
-}
-
-.icon {
-  margin-right: 20px;
-  max-height: 80px;
-  min-height: 80px;
-  max-width: 80px;
-  min-width: 80px;
-  margin-top: auto;
-  margin-bottom: auto;
-
-  @include upto-sm {
-    display: none;
-  }
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  @include upto-sm {
-    display: none;
-  }
-}
-
-.info-first-line {
-  @include roboto-medium;
-
-  font-size: 15px;
-  line-height: 20px;
-  margin-bottom: 10px;
-}
-
-.info-second-line {
-  @include roboto-regular;
-
-  font-size: 15px;
-  line-height: 20px;
-  text-align: justify;
-  color: #888894;
-}
-
-.mobile-view {
-  display: none;
-
-  @include upto-sm {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    .mobile-first-line {
-      display: flex;
-      flex-direction: row;
-      justify-content: left;
-      margin-bottom: 10px;
-      height: 40px;
-      width: 100%;
-
-      .mobile-icon {
-        width: 40px;
-        height: 40px;
-      }
-
-      .mobile-title {
-        @include roboto-medium;
-
-        font-size: 15px;
-        color: #262628;
-        width: 68%;
-        margin: auto auto auto 20px;
-      }
-    }
-
-    .mobile-second-line {
-      @include roboto-regular;
-
-      font-size: 15px;
-      line-height: 20px;
-      color: #888894;
-      text-align: justify;
-      width: 100%;
-    }
-  }
-}
-
-.onoffswitch-no-padding-right {
-  margin-right: 0;
-}
diff --git a/src/shared/components/Settings/Profile/Community/data.jsx b/src/shared/components/Settings/Profile/Community/data.jsx
deleted file mode 100644
index fb1fb4df42..0000000000
--- a/src/shared/components/Settings/Profile/Community/data.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import ethereum from 'assets/images/profile/community/ico-ethereum.png';
-import ibmCloud from 'assets/images/profile/community/ico-ibmcloud.png';
-
-const data = [
-  {
-    id: 'blockchain',
-    icon: ethereum,
-    programID: 20000010,
-    name: 'Topcoder Blockchain Community',
-    description: 'Meet like-minded peers from around the world, share tips and insights, and collaborate with customers to build cutting-edge solutions. The Topcoder Blockchain Community provides opportunities to learn from Ethereum experts and work with top companies that are embracing blockchain technology.',
-  },
-  {
-    id: 'cognitive',
-    icon: ibmCloud,
-    programID: 3449,
-    name: 'Topcoder Cognitive Community',
-    description: 'By becoming a member of the Topcoder Community and registering for this specialized community, you can compete in fun cognitive challenges, access educational resources, and win money by solving real-life business problems for companies in need of cognitive expertise. ',
-  },
-];
-
-export default data;
diff --git a/src/shared/components/Settings/Profile/Community/index.jsx b/src/shared/components/Settings/Profile/Community/index.jsx
deleted file mode 100644
index 917a6cb8ef..0000000000
--- a/src/shared/components/Settings/Profile/Community/index.jsx
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * Child component of Settings/Profile/ renders the
- * 'Community' page.
- */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable no-unneeded-ternary */
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-import ConsentComponent from 'components/Settings/ConsentComponent';
-import Item from './Item';
-import data from './data';
-
-import './styles.scss';
-
-class Community extends ConsentComponent {
-  constructor(props) {
-    super(props);
-    const { userTraits } = props;
-    this.state = {
-      communityTrait: this.loadCommunityTrait(userTraits),
-      personalizationTrait: this.loadPersonalizationTrait(userTraits),
-      isAdd: false,
-    };
-
-    this.loadCommunityTrait = this.loadCommunityTrait.bind(this);
-    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    const { userTraits } = this.props;
-    const trait = userTraits.filter(t => t.traitId === 'communities');
-    this.setState({
-      isAdd: trait.length === 0 ? true : false,
-    });
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { userTraits } = nextProps;
-    const trait = userTraits.filter(t => t.traitId === 'communities');
-    this.setState({
-      isAdd: trait.length === 0 ? true : false,
-    });
-    const communityTrait = this.loadCommunityTrait(nextProps.userTraits);
-    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
-    this.setState({ communityTrait, personalizationTrait });
-  }
-
-  /**
-   * Show User Consent Modal
-   * @param e event
-   * @param item the community object
-   * @param checked the check value
-   */
-  onChange(e, item, checked) {
-    e.preventDefault();
-    this.showConsent(this.onUpdateCommunity.bind(this, item, checked));
-  }
-
-  /**
-   * Add or Update CommunityTrait
-   */
-  onProcessCommunities = _.debounce((answer) => {
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      addUserTrait,
-    } = this.props;
-    const { isAdd, communityTrait, personalizationTrait } = this.state;
-    if (isAdd) {
-      const newCommunities = [];
-      newCommunities.push(communityTrait);
-      addUserTrait(handle, 'communities', newCommunities, tokenV3);
-    } else {
-      const newCommunities = [];
-      newCommunities.push(communityTrait);
-      updateUserTrait(handle, 'communities', newCommunities, tokenV3);
-    }
-    // save personalization
-    if (_.isEmpty(personalizationTrait)) {
-      const personalizationData = { userConsent: answer };
-      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-    } else {
-      const trait = personalizationTrait.traits.data[0];
-      if (trait.userConsent !== answer) {
-        const personalizationData = { userConsent: answer };
-        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-      }
-    }
-  });
-
-
-  /**
-   * Change toggle button check value
-   * @param answer user consent answer value
-   */
-  onUpdateCommunity(newCommunity, communityChecked, answer) {
-    const { communityTrait } = this.state;
-    communityTrait[newCommunity.id] = communityChecked;
-    this.setState({
-      communityTrait,
-    }, () => this.onProcessCommunities(answer));
-  }
-
-  /**
-   * Get personalization trait
-   * @param userTraits the all user traits
-   */
-  loadPersonalizationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'personalization');
-    const personalization = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, personalization);
-  }
-
-  /**
-   * Get community trait
-   * @param userTraits the all user traits
-   */
-  loadCommunityTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'communities');
-    const communities = trait.length === 0 ? {
-      cognitive: false,
-      blockchain: false,
-    } : trait[0].traits.data[0];
-    return _.assign({}, communities);
-  }
-
-  render() {
-    const { settingsUI } = this.props;
-    const { communityTrait } = this.state;
-    const tabs = settingsUI.TABS.PROFILE;
-    const currentTab = settingsUI.currentProfileTab;
-    const containerStyle = currentTab === tabs.COMMUNITY ? '' : 'hide';
-    const communityItems = communityTrait;
-
-    return (
-      <div styleName={containerStyle}>
-        {
-          this.shouldRenderConsent() && this.renderConsent()
-        }
-        <div styleName="community-container">
-          <h1>
-            Community
-          </h1>
-          <div styleName="sub-title">
-            Your communities
-          </div>
-          <div styleName="list">
-            {
-              _.map(data, (item) => {
-                const checked = communityItems[item.id] || false;
-                return (
-                  <Item
-                    icon={item.icon}
-                    key={item.id}
-                    id={item.id}
-                    value={item.id}
-                    checked={checked}
-                    title={item.name}
-                    programID={item.programID}
-                    description={item.description}
-                    onToggle={event => this.onChange(event, item, event.target.checked)}
-                  />
-                );
-              })
-            }
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-Community.propTypes = {
-  tokenV3: PT.string.isRequired,
-  handle: PT.string.isRequired,
-  userTraits: PT.array.isRequired,
-  updateUserTrait: PT.func.isRequired,
-  addUserTrait: PT.func.isRequired,
-  settingsUI: PT.shape().isRequired,
-};
-
-export default Community;
diff --git a/src/shared/components/Settings/Profile/Community/styles.scss b/src/shared/components/Settings/Profile/Community/styles.scss
deleted file mode 100644
index f079e4d742..0000000000
--- a/src/shared/components/Settings/Profile/Community/styles.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import "../../style";
-
-.hide {
-  display: none;
-}
-
-.community-container {
-  h1 {
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      line-height: 70px;
-      margin-bottom: 0;
-      font-size: 20px;
-      padding: 0 20px;
-    }
-  }
-
-  margin-bottom: 40px;
-
-  @include from-sm-to-lg {
-    margin-bottom: 0;
-  }
-
-  @include upto-sm {
-    margin-bottom: 0;
-  }
-
-  .title {
-    @include tc-heading-lg;
-
-    margin-bottom: 25px;
-
-    @include upto-sm {
-      font-size: 20px;
-      line-height: 30px;
-      margin: 20px;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 30px;
-    margin-top: 10px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .list {
-    border-top: 1px solid $tc-gray-neutral-dark;
-  }
-}
diff --git a/src/shared/components/Settings/Profile/Education/List/styles.scss b/src/shared/components/Settings/Profile/Education/List/styles.scss
deleted file mode 100644
index f053c408f8..0000000000
--- a/src/shared/components/Settings/Profile/Education/List/styles.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "../../../style";
-
-.container {
-  width: 100%;
-  background-color: $tc-white;
-  padding: 0 0;
-
-  &.active {
-    margin-top: 20px;
-
-    @include upto-sm {
-      margin-top: 0;
-    }
-  }
-
-  ul {
-    display: flex;
-    flex-direction: column;
-    justify-items: center;
-
-    li {
-      min-height: 90px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
-    }
-  }
-}
diff --git a/src/shared/components/Settings/Profile/Education/index.jsx b/src/shared/components/Settings/Profile/Education/index.jsx
deleted file mode 100644
index 7df00f3408..0000000000
--- a/src/shared/components/Settings/Profile/Education/index.jsx
+++ /dev/null
@@ -1,811 +0,0 @@
-/**
- * Child component of Settings/Profile/ renders the
- * 'Education' page.
- */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable no-nested-ternary */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable no-undef */
-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 ErrorMessage from 'components/Settings/ErrorMessage';
-import { validateStartDate, validateEndDate } from 'utils/settings';
-import ConfirmationModal from '../../CofirmationModal';
-import EducationList from './List';
-
-import './styles.scss';
-
-
-export default class Education extends ConsentComponent {
-  constructor(props) {
-    super(props);
-    this.onHandleDeleteEducation = this.onHandleDeleteEducation.bind(this);
-    this.onDeleteEducation = this.onDeleteEducation.bind(this);
-    this.onEditEducation = this.onEditEducation.bind(this);
-    this.onUpdateSelect = this.onUpdateSelect.bind(this);
-    this.loadEducationTrait = this.loadEducationTrait.bind(this);
-    this.onUpdateInput = this.onUpdateInput.bind(this);
-    this.onHandleAddEducation = this.onHandleAddEducation.bind(this);
-    this.onAddEducation = this.onAddEducation.bind(this);
-    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
-    this.onUpdateDate = this.onUpdateDate.bind(this);
-    this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
-
-    const { userTraits } = props;
-    this.state = {
-      formInvalid: false,
-      startDateInvalid: false,
-      startDateInvalidMsg: '',
-      endDateInvalid: false,
-      endDateInvalidMsg: '',
-      educationTrait: this.loadEducationTrait(userTraits),
-      personalizationTrait: this.loadPersonalizationTrait(userTraits),
-      newEducation: {
-        schoolCollegeName: '',
-        major: '',
-        timePeriodFrom: '',
-        timePeriodTo: '',
-        graduated: false,
-      },
-      isSubmit: false,
-      isMobileView: false,
-      screenSM: 767,
-      isEdit: false,
-      indexNo: null,
-      showConfirmation: false,
-    };
-  }
-
-  componentDidMount() {
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const educationTrait = this.loadEducationTrait(nextProps.userTraits);
-    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
-    this.setState({
-      educationTrait,
-      personalizationTrait,
-      formInvalid: false,
-      startDateInvalid: false,
-      startDateInvalidMsg: '',
-      endDateInvalid: false,
-      endDateInvalidMsg: '',
-      isSubmit: false,
-      newEducation: {
-        schoolCollegeName: '',
-        major: '',
-        timePeriodFrom: '',
-        timePeriodTo: '',
-        graduated: false,
-      },
-    });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updatePredicate);
-  }
-
-  /**
-   * Check form fields value,
-   * Invalid value, can not save
-   * @param newEducation object
-   */
-  onCheckFormValue(newEducation) {
-    let invalid = false;
-
-    if (!_.trim(newEducation.schoolCollegeName).length) {
-      invalid = true;
-    }
-
-    const fromDateValidResult = validateStartDate(newEducation.graduated,
-      newEducation.timePeriodFrom, newEducation.timePeriodTo);
-    const endDateValidResult = validateEndDate(newEducation.graduated,
-      newEducation.timePeriodFrom, newEducation.timePeriodTo);
-    const formInvalid = invalid || fromDateValidResult.invalid || endDateValidResult.invalid;
-
-    this.setState({
-      formInvalid,
-      startDateInvalid: fromDateValidResult.invalid,
-      startDateInvalidMsg: fromDateValidResult.message,
-      endDateInvalidMsg: endDateValidResult.message,
-      endDateInvalid: endDateValidResult.invalid,
-    });
-    return formInvalid;
-  }
-
-  onCheckStartDate() {
-    const { newEducation } = this.state;
-    const currentDate = new Date().setHours(0, 0, 0, 0);
-    const result = {
-      invalid: false,
-      message: '',
-    };
-
-    if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) {
-      const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
-
-      if (fromDate > currentDate) {
-        result.invalid = true;
-        result.message = 'Start Date should be in past or current';
-      }
-    } else if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
-      const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
-      const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
-
-      if (fromDate > currentDate) {
-        result.invalid = true;
-        result.message = 'Start Date should be in past or current';
-      }
-
-      if (fromDate >= toDate) {
-        result.invalid = true;
-        result.message = 'Start Date should be before End Date';
-      }
-    }
-
-    return result;
-  }
-
-  onCheckEndDate() {
-    const { newEducation } = this.state;
-    const currentDate = new Date().setHours(0, 0, 0, 0);
-    const result = {
-      invalid: false,
-      message: '',
-    };
-
-    if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
-      const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
-
-      if (newEducation.graduated && (toDate > currentDate)) {
-        result.invalid = true;
-        result.message = 'End Date should be in past or current';
-      }
-    }
-    return formInvalid;
-  }
-
-  onHandleDeleteEducation(indexNo) {
-    this.setState({
-      showConfirmation: true,
-      indexNo,
-    });
-  }
-
-  onUpdateDate(date, timePeriod) {
-    const { newEducation: oldEducation } = this.state;
-    const newEducation = { ...oldEducation };
-    newEducation[timePeriod] = date || '';
-    this.setState({ newEducation, isSubmit: false });
-  }
-
-  /**
-   * Delete education by index
-   * @param indexNo the education index no
-   */
-  onDeleteEducation(indexNo) {
-    const { educationTrait } = this.state;
-    const newEducationTrait = { ...educationTrait };
-    newEducationTrait.traits.data.splice(indexNo, 1);
-    this.setState({
-      educationTrait: newEducationTrait,
-    });
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      deleteUserTrait,
-    } = this.props;
-
-    if (newEducationTrait.traits.data.length > 0) {
-      updateUserTrait(handle, 'education', newEducationTrait.traits.data, tokenV3);
-    } else {
-      deleteUserTrait(handle, 'education', tokenV3);
-    }
-
-    this.setState({
-      showConfirmation: false,
-      indexNo: null,
-      isSubmit: false,
-      isEdit: false,
-      formInvalid: false,
-      startDateInvalid: false,
-      startDateInvalidMsg: '',
-      endDateInvalid: false,
-      endDateInvalidMsg: '',
-    });
-  }
-
-  /**
-   * Edit Education by index
-   * @param indexNo the education index no
-   */
-  onEditEducation(indexNo) {
-    const { educationTrait } = this.state;
-    this.setState({
-      newEducation: {
-        schoolCollegeName: educationTrait.traits.data[indexNo].schoolCollegeName,
-        major: _.isEmpty(educationTrait.traits.data[indexNo].major) ? '' : educationTrait.traits.data[indexNo].major,
-        timePeriodFrom: _.isEmpty(educationTrait.traits.data[indexNo].timePeriodFrom) ? '' : educationTrait.traits.data[indexNo].timePeriodFrom,
-        timePeriodTo: _.isEmpty(educationTrait.traits.data[indexNo].timePeriodTo) ? '' : educationTrait.traits.data[indexNo].timePeriodTo,
-        graduated: educationTrait.traits.data[indexNo].graduated,
-      },
-      isSubmit: false,
-      isEdit: true,
-      indexNo,
-      formInvalid: false,
-      startDateInvalid: false,
-      startDateInvalidMsg: '',
-      endDateInvalid: false,
-      endDateInvalidMsg: '',
-    });
-  }
-
-  /**
-   * Add new education
-   * @param answer user consent answer value
-   */
-  onAddEducation(answer) {
-    const {
-      newEducation, personalizationTrait, isEdit, indexNo,
-    } = this.state;
-
-    if (this.onCheckFormValue(newEducation)) {
-      return;
-    }
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      addUserTrait,
-    } = this.props;
-
-    const { educationTrait } = this.state;
-
-    const education = _.clone(newEducation);
-    if (_.isEmpty(education.major)) {
-      delete education.major;
-    }
-    if (_.isEmpty(education.timePeriodFrom)) {
-      delete education.timePeriodFrom;
-    } else {
-      education.timePeriodFrom = new Date(newEducation.timePeriodFrom).getTime();
-    }
-    if (_.isEmpty(education.timePeriodTo)) {
-      delete education.timePeriodTo;
-    } else {
-      education.timePeriodTo = new Date(newEducation.timePeriodTo).getTime();
-    }
-
-    if (educationTrait.traits && educationTrait.traits.data.length > 0) {
-      const newEducationTrait = _.cloneDeep(educationTrait);
-      if (isEdit) {
-        newEducationTrait.traits.data.splice(indexNo, 1);
-      }
-      newEducationTrait.traits.data.push(education);
-      updateUserTrait(handle, 'education', newEducationTrait.traits.data, tokenV3);
-    } else {
-      const newEducations = [];
-      newEducations.push(education);
-      addUserTrait(handle, 'education', newEducations, tokenV3);
-    }
-    const empty = {
-      schoolCollegeName: '',
-      major: '',
-      timePeriodFrom: '',
-      timePeriodTo: '',
-      graduated: false,
-    };
-    this.setState({
-      newEducation: empty,
-      isEdit: false,
-      indexNo: null,
-      isSubmit: false,
-    });
-    // save personalization
-    if (_.isEmpty(personalizationTrait)) {
-      const personalizationData = { userConsent: answer };
-      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-    } else {
-      const trait = personalizationTrait.traits.data[0];
-      if (trait.userConsent !== answer) {
-        const personalizationData = { userConsent: answer };
-        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-      }
-    }
-  }
-
-  /**
-   * Update input value
-   * @param e event
-   */
-  onUpdateInput(e) {
-    const { newEducation: oldEducation } = this.state;
-    const newEducation = { ...oldEducation };
-    if (e.target.type !== 'checkbox') {
-      newEducation[e.target.name] = e.target.value;
-    } else {
-      newEducation[e.target.name] = e.target.checked;
-      if (e.target.checked) { // if graduated and toDate is in Future, nullify it
-        const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
-        const currentDate = new Date().setHours(0, 0, 0, 0);
-        if (toDate > currentDate) {
-          newEducation.timePeriodTo = '';
-        }
-      }
-    }
-
-    this.setState({ newEducation, isSubmit: false });
-  }
-
-  /**
-   * Update select value
-   * @param option selected value
-   */
-  onUpdateSelect(option) {
-    if (option) {
-      const { newEducation: oldEducation } = this.state;
-      const newEducation = { ...oldEducation };
-      newEducation[option.key] = option.name;
-      this.setState({ newEducation, isSubmit: false });
-    }
-  }
-
-  /**
-   * Show User Consent Modal
-   * @param e event
-   */
-  onHandleAddEducation(e) {
-    e.preventDefault();
-    const { newEducation } = this.state;
-    this.setState({ isSubmit: true });
-    if (this.onCheckFormValue(newEducation)) {
-      return;
-    }
-    this.showConsent(this.onAddEducation.bind(this));
-  }
-
-  /**
-   * Get education trait
-   * @param userTraits the all user traits
-   */
-  loadEducationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'education');
-    const educations = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, educations);
-  }
-
-  /**
-   * Get personalization trait
-   * @param userTraits the all user traits
-   */
-  loadPersonalizationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'personalization');
-    const personalization = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, personalization);
-  }
-
-  updatePredicate() {
-    const { screenSM } = this.state;
-    this.setState({ isMobileView: window.innerWidth <= screenSM });
-  }
-
-  onCancelEditStatus() {
-    const { isEdit } = this.state;
-    if (isEdit) {
-      this.setState({
-        isEdit: false,
-        isSubmit: false,
-        indexNo: null,
-        newEducation: {
-          schoolCollegeName: '',
-          major: '',
-          timePeriodFrom: '',
-          timePeriodTo: '',
-          graduated: false,
-        },
-        formInvalid: false,
-        startDateInvalid: false,
-        startDateInvalidMsg: '',
-        endDateInvalid: false,
-        endDateInvalidMsg: '',
-      });
-    }
-  }
-
-  render() {
-    const {
-      settingsUI,
-    } = this.props;
-    const {
-      educationTrait,
-      isMobileView,
-      isEdit,
-      showConfirmation,
-      indexNo,
-      formInvalid,
-      startDateInvalid,
-      startDateInvalidMsg,
-      endDateInvalid,
-      endDateInvalidMsg,
-      isSubmit,
-    } = this.state;
-    const tabs = settingsUI.TABS.PROFILE;
-    const currentTab = settingsUI.currentProfileTab;
-    const containerStyle = currentTab === tabs.EDUCATION ? '' : 'hide';
-    const educationItems = educationTrait.traits
-      ? educationTrait.traits.data.slice() : [];
-    const { newEducation } = this.state;
-
-
-    return (
-      <div styleName={containerStyle}>
-        {
-          this.shouldRenderConsent() && this.renderConsent()
-        }
-        {
-          showConfirmation && (
-            <ConfirmationModal
-              onConfirm={() => this.showConsent(this.onDeleteEducation.bind(this, indexNo))}
-              onCancel={() => this.setState({
-                showConfirmation: false,
-                indexNo: null,
-              })}
-              name={educationTrait.traits.data[indexNo].schoolCollegeName}
-            />
-          )
-        }
-        <div styleName="education-container">
-          <h1>
-            Education
-          </h1>
-          <div styleName={`sub-title ${educationItems.length > 0 ? '' : 'hidden'}`}>
-            Your education
-          </div>
-          {
-            !isMobileView && educationItems.length > 0
-            && (
-              <EducationList
-                educationList={{ items: educationItems }}
-                onDeleteItem={this.onHandleDeleteEducation}
-                onEditItem={this.onEditEducation}
-              />
-            )
-          }
-          <div styleName={`sub-title ${educationItems.length > 0 ? 'second' : 'first'}`}>
-            {
-              isEdit ? (<React.Fragment>Edit education</React.Fragment>)
-                : (<React.Fragment>Add a new education</React.Fragment>)
-            }
-          </div>
-          <div styleName="form-container-default">
-            <form name="device-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="name">
-                    Name of College or University
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <span styleName="text-required">* Required</span>
-                  <input id="schoolCollegeName" name="schoolCollegeName" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newEducation.schoolCollegeName} maxLength="64" required />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName)} message="Name cannot be empty" />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1-no-padding">
-                  <label htmlFor="major">
-                    Major
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <input id="major" name="major" type="text" placeholder="Major" onChange={this.onUpdateInput} value={newEducation.major} maxLength="64" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName={`field ${_.isEmpty(newEducation.timePeriodTo) ? 'col-1-no-padding' : 'col-1'}`}>
-                  <label htmlFor="timePeriodFrom">
-                    Start Date
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <DatePicker
-                    readOnly
-                    showClearDate
-                    numberOfMonths={1}
-                    isOutsideRange={moment().subtract(1, 'd')}
-                    date={newEducation.timePeriodFrom}
-                    id="date-from1"
-                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
-                    placeholder="dd/mm/yyyy"
-                  />
-                  {
-                    isSubmit && (
-                      <ErrorMessage
-                        invalid={startDateInvalid}
-                        message={startDateInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1-no-padding">
-                  <label htmlFor="timePeriodTo">
-                    End Date (or expected)
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  {
-                    newEducation.graduated ? (
-                      <DatePicker
-                        readOnly
-                        showClearDate
-                        numberOfMonths={1}
-                        isOutsideRange={moment().subtract(1, 'd')}
-                        date={newEducation.timePeriodTo}
-                        id="date-to1"
-                        onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                        placeholder="dd/mm/yyyy"
-                      />
-                    ) : (
-                      <DatePicker
-                        readOnly
-                        showClearDate
-                        numberOfMonths={1}
-                        date={newEducation.timePeriodTo}
-                        id="date-to1"
-                        onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                        placeholder="dd/mm/yyyy"
-                        allowFutureYear
-                      />
-                    )
-                  }
-                  {
-                    isSubmit && (
-                      <ErrorMessage
-                        invalid={endDateInvalid}
-                        message={endDateInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="graduated">
-                    Graduated
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <div styleName="tc-checkbox">
-                    <input
-                      name="graduated"
-                      checked={newEducation.graduated}
-                      id="graduated"
-                      onChange={this.onUpdateInput}
-                      type="checkbox"
-                    />
-                    <label htmlFor="graduated">
-                      <div styleName="tc-checkbox-label">
-                        &nbsp;
-                      </div>
-                      <input type="hidden" />
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </form>
-            <div styleName="button-container">
-              <div styleName="button-save">
-                <PrimaryButton
-                  styleName="complete"
-                  onClick={this.onHandleAddEducation}
-                >
-                  {
-                    isEdit ? (<React.Fragment>Edit education to your list</React.Fragment>)
-                      : (<React.Fragment>Add education to your list</React.Fragment>)
-                  }
-                </PrimaryButton>
-              </div>
-              {
-                isEdit && (
-                  <div styleName="button-cancel">
-                    <PrimaryButton
-                      styleName="complete"
-                      onClick={this.onCancelEditStatus}
-                    >
-                      Cancel
-                    </PrimaryButton>
-                  </div>
-                )
-              }
-            </div>
-          </div>
-          <div styleName="form-container-mobile">
-            <form name="education-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <p>
-                  {
-                    isEdit ? (<React.Fragment>Edit Education</React.Fragment>)
-                      : (<React.Fragment>Add Education</React.Fragment>)
-                  }
-                </p>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-2">
-                  <label htmlFor="schoolCollegeName">
-                    Name of College or University
-                    <span styleName="text-required">* Required</span>
-                    <input type="hidden" />
-                  </label>
-                  <input id="schoolCollegeName" name="schoolCollegeName" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newEducation.schoolCollegeName} maxLength="64" required />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName)} message="Name cannot be empty" />
-                    )
-                  }
-                </div>
-                <div styleName="field col-3">
-                  <label htmlFor="major">
-                    Major
-                    <input type="hidden" />
-                  </label>
-                  <input id="major" name="major" type="text" placeholder="Major" onChange={this.onUpdateInput} value={newEducation.major} maxLength="64" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-date">
-                  <label htmlFor="timePeriodFrom">
-                    Start Date
-                    {
-                      !_.isEmpty(newEducation.timePeriodTo) && (
-                        <span styleName="text-required">* Required</span>
-                      )
-                    }
-                    <input type="hidden" />
-                  </label>
-                  <DatePicker
-                    readOnly
-                    numberOfMonths={1}
-                    isOutsideRange={moment().subtract(1, 'd')}
-                    date={newEducation.timePeriodFrom}
-                    id="date-from2"
-                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
-                    placeholder="dd/mm/yyyy"
-                  />
-                  {
-                    isSubmit && (
-                      <ErrorMessage
-                        invalid={startDateInvalid}
-                        message={startDateInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-                <div styleName="field col-date">
-                  <label htmlFor="timePeriodTo">
-                    End Date (or expected)
-                    <input type="hidden" />
-                  </label>
-                  {
-                    newEducation.graduated ? (
-                      <DatePicker
-                        readOnly
-                        numberOfMonths={1}
-                        isOutsideRange={moment().subtract(1, 'd')}
-                        date={newEducation.timePeriodTo}
-                        id="date-to2"
-                        onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                        placeholder="dd/mm/yyyy"
-                      />
-                    ) : (
-                      <DatePicker
-                        readOnly
-                        numberOfMonths={1}
-                        date={newEducation.timePeriodTo}
-                        id="date-to2"
-                        onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                        placeholder="dd/mm/yyyy"
-                        allowFutureYear
-                      />
-                    )
-                  }
-                  {
-                    isSubmit && (
-                      <ErrorMessage
-                        invalid={endDateInvalid}
-                        message={endDateInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-                <div styleName="field col-checkbox">
-                  <div styleName="tc-checkbox">
-                    <input
-                      name="graduated"
-                      checked={newEducation.graduated}
-                      id="graduated"
-                      onChange={this.onUpdateInput}
-                      type="checkbox"
-                    />
-                    <label htmlFor="graduated">
-                      <div styleName="tc-checkbox-label">
-                        Graduated
-                      </div>
-                      <input type="hidden" />
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </form>
-            <div styleName="button-container">
-              <div styleName="button-save">
-                <PrimaryButton
-                  styleName="complete"
-                  onClick={this.onHandleAddEducation}
-                >
-                  {
-                    isEdit ? (<React.Fragment>Edit Education</React.Fragment>)
-                      : (<React.Fragment>Add Education</React.Fragment>)
-                  }
-                </PrimaryButton>
-              </div>
-              {
-                isEdit && (
-                  <div styleName="button-cancel">
-                    <PrimaryButton
-                      styleName="complete"
-                      onClick={this.onCancelEditStatus}
-                    >
-                      Cancel
-                    </PrimaryButton>
-                  </div>
-                )
-              }
-            </div>
-          </div>
-          {
-            isMobileView && educationItems.length > 0
-            && (
-              <EducationList
-                educationList={{ items: educationItems }}
-                onDeleteItem={this.onHandleDeleteEducation}
-                onEditItem={this.onEditEducation}
-              />
-            )
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-Education.propTypes = {
-  tokenV3: PT.string.isRequired,
-  handle: PT.string.isRequired,
-  userTraits: PT.array.isRequired,
-  addUserTrait: PT.func.isRequired,
-  updateUserTrait: PT.func.isRequired,
-  deleteUserTrait: PT.func.isRequired,
-  settingsUI: PT.shape().isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/AddWebLink.jsx b/src/shared/components/Settings/Profile/ExternalLinks/AddWebLink.jsx
deleted file mode 100644
index 8ec2ae2556..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/AddWebLink.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Renders 'Add a Web Link' section.
- */
-import React from 'react';
-import _ from 'lodash';
-import PT from 'prop-types';
-
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-import Styles from './styles.scss';
-
-export default class AddWebLink extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      webLink: '',
-    };
-
-    this.onUpdateWebLink = this.onUpdateWebLink.bind(this);
-    this.onAddWebLink = this.onAddWebLink.bind(this);
-    this.isWebLinkValid = this.isWebLinkValid.bind(this);
-    this.webLinkExists = this.webLinkExists.bind(this);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { profileState } = this.props;
-    if (profileState.addingWebLink && !nextProps.profileState.addingWebLink) {
-      this.setState({ webLink: '' });
-    }
-  }
-
-  // Set web link
-  onUpdateWebLink(e) {
-    e.preventDefault();
-    this.setState({ webLink: e.target.value });
-  }
-
-  // Add web link
-  onAddWebLink(e) {
-    e.preventDefault();
-    const {
-      addWebLink,
-      handle,
-      tokenV3,
-    } = this.props;
-    const { webLink } = this.state;
-    if (webLink && this.isWebLinkValid() && !this.webLinkExists()) {
-      addWebLink(handle, tokenV3, webLink);
-    }
-  }
-
-  isWebLinkValid() {
-    const { webLink } = this.state;
-    return !webLink
-    || (webLink.includes('www') && /^(http(s?):\/\/)?(www\.)[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,15})+$/.test(webLink)) /* eslint-disable-line no-useless-escape */
-    || (!webLink.includes('www') && /^(http(s?):\/\/)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,15})+$/.test(webLink)); /* eslint-disable-line no-useless-escape */
-  }
-
-  webLinkExists() {
-    const { webLink } = this.state;
-    const {
-      allLinks,
-    } = this.props;
-    return _.some(allLinks, link => link.URL && (link.URL.toLowerCase() === webLink.toLowerCase()));
-  }
-
-  render() {
-    const {
-      profileState,
-    } = this.props;
-
-    const { addingWebLink } = profileState;
-    const { webLink } = this.state;
-
-    const webLinkValid = this.isWebLinkValid();
-    const webLinkExists = this.webLinkExists();
-    return (
-      <div styleName="external-web-link">
-        <div styleName="web-link">
-          <form name="addWebLinkFrm" onSubmit={this.onAddWebLink} autoComplete="off">
-            <div styleName={webLinkValid ? 'validation-bar url' : 'validation-bar url error-bar'}>
-              <input id="web-link-input" name="url" type="text" styleName="url" value={webLink} onChange={this.onUpdateWebLink} placeholder="http://www.yourlink.com" required />
-              {
-                !webLinkValid && !webLinkExists
-                && (
-                  <div styleName="form-input-error">
-                    <p>
-                      Please enter a valid URL
-                    </p>
-                  </div>
-                )
-              }
-              {
-                webLinkExists
-                && (
-                  <div styleName="form-input-error">
-                    <p>
-                      {`The URL ${webLink} already exists`}
-                    </p>
-                  </div>
-                )
-              }
-            </div>
-            <PrimaryButton
-              disabled={!webLink || !webLinkValid || addingWebLink}
-              onClick={this.onAddWebLink}
-              theme={{ button: Styles['add-button'] }}
-            >
-              {
-                !addingWebLink && 'Add'
-              }
-              {
-                addingWebLink && <i className="fa fa-spinner fa-spin" />
-              }
-            </PrimaryButton>
-          </form>
-        </div>
-      </div>
-    );
-  }
-}
-
-AddWebLink.defaultProps = {
-  allLinks: [],
-};
-
-AddWebLink.propTypes = {
-  handle: PT.string.isRequired,
-  tokenV3: PT.string.isRequired,
-  profileState: PT.shape().isRequired,
-  addWebLink: PT.func.isRequired,
-  allLinks: PT.arrayOf(PT.shape),
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/ExistingLink.jsx b/src/shared/components/Settings/Profile/ExternalLinks/ExistingLink.jsx
deleted file mode 100644
index 9922e4ca2f..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/ExistingLink.jsx
+++ /dev/null
@@ -1,274 +0,0 @@
-/**
- * Renders an existing link.
- */
-/* global window */
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import _ from 'lodash';
-
-import React from 'react';
-import PT from 'prop-types';
-
-import './styles.scss';
-
-/**
- * Prepend http protocol to url link if not already exist.
- * @param {String} link The url link
- * @returns {String} url link with http protocol prepend
- */
-function prependProtocol(link) {
-  if (!link) {
-    return link;
-  }
-  const httpProtocol = 'http://';
-  const httpsProtocol = 'https://';
-  if (link.startsWith(httpProtocol) || link.startsWith(httpsProtocol)) {
-    return link;
-  }
-  return httpProtocol + link;
-}
-
-/**
- * Open user's external link (like github profile page) in new tab
- * @param {Event} e The click event
- * @param {Object} user's external link
- */
-function openLink(e, link) {
-  if (!link || link.status === 'pending') {
-    return;
-  }
-
-  if (e.target.id === 'link-url') {
-    return;
-  }
-
-  let url = null;
-  if (link.data && link.data.profileURL) {
-    url = link.data.profileURL;
-  } else if (link.URL) {
-    url = link.URL;
-  }
-
-  if (url) {
-    window.open(prependProtocol(url), '_blank');
-  }
-}
-
-export default function ExistingLink(props) {
-  const { link, supportedAccounts, onConfirmDeleteLink } = props;
-
-  const pending = link.status === 'pending';
-  const logoClass = _.result(_.find(supportedAccounts, a => a.providerType === link.providerType), 'className') || 'fa-globe';
-
-  return (
-    <div role="link" styleName={`external-link-tile ${pending ? 'external-link-tile--pending' : ''}`} onClick={e => openLink(e, link)}>
-      <div styleName="top">
-        <div styleName="ext-link-tile_edit-header">
-          <div role="button" onClick={e => onConfirmDeleteLink(e, link)} styleName={`ext-link-tile_edit-header_delete ${link.deleting ? 'ext-link-tile_edit-header_delete--disabled' : ''}`} prevent-event-propagation="true" />
-        </div>
-        <div styleName="logo">
-          <i styleName={logoClass} className={`fa ${logoClass}`} />
-        </div>
-        <h2>
-          {link.providerType}
-        </h2>
-      </div>
-      <div styleName="bottom">
-        {
-          link.deleting
-          && (
-            <div styleName="section-loading" />
-          )
-        }
-        {
-          !link.deleting && link.providerType === 'weblink'
-          && (
-            <div>
-              <p data-ellipsis="" className={pending ? 'hidden' : ''} styleName="link-title">
-                {link.title}
-              </p>
-              <p className={!pending ? 'hidden' : ''} styleName="link-title">
-                Loading data. This will take a few minutes.
-              </p>
-              <a styleName="link-url" id="link-url" href={prependProtocol(link.URL)} target="_blank" rel="noopener noreferrer" prevent-event-propagation="true">
-                {prependProtocol(link.URL)}
-              </a>
-            </div>
-          )
-        }
-        {
-          !link.deleting && link.providerType === 'linkedin'
-          && (
-            <div>
-              <div styleName="handle">
-                {link.data.handle}
-              </div>
-              <div styleName="title">
-                {link.data.title}
-              </div>
-            </div>
-          )
-        }
-        {
-          !link.deleting && link.providerType !== 'weblink' && link.providerType !== 'linkedin'
-          && (
-            <div>
-              <div styleName="handle">
-                {link.data.handle}
-              </div>
-              <div styleName="pending" className={!pending ? 'hidden' : ''}>
-                <p>
-                  Loading data. This will take a few minutes.
-                </p>
-              </div>
-              {
-                link.providerType === 'github'
-                && (
-                  <ul className={pending ? 'hidden' : ''}>
-                    <li>
-                      <div styleName="value">
-                        {link.data.followers || 0}
-                      </div>
-                      <div styleName="key">
-                        followers
-                      </div>
-                    </li>
-                    <li>
-                      <div styleName="value">
-                        {link.data.publicRepos || 0}
-                      </div>
-                      <div styleName="key">
-                        repositories
-                      </div>
-                    </li>
-                  </ul>
-                )
-              }
-              {
-                link.providerType === 'stackoverflow'
-                && (
-                  <ul className={pending ? 'hidden' : ''}>
-                    <li>
-                      <div styleName="value">
-                        {link.data.reputation || 0}
-                      </div>
-                      <div styleName="key">
-                        reputation
-                      </div>
-                    </li>
-                    <li>
-                      <div styleName="value">
-                        {link.data.answers || 0}
-                      </div>
-                      <div styleName="key">
-                        answers
-                      </div>
-                    </li>
-                  </ul>
-                )
-              }
-              {
-                link.providerType === 'behance'
-                && (
-                  <ul className={pending ? 'hidden' : ''}>
-                    <li>
-                      <div styleName="value">
-                        {link.data.projectViews || 0}
-                      </div>
-                      <div styleName="key">
-                        views
-                      </div>
-                    </li>
-                    <li>
-                      <div styleName="value">
-                        {link.data.projectAppreciations || 0}
-                      </div>
-                      <div styleName="key">
-                        likes
-                      </div>
-                    </li>
-                  </ul>
-                )
-              }
-              {
-                link.providerType === 'dribbble'
-                && (
-                  <ul className={pending ? 'hidden' : ''}>
-                    <li>
-                      <div styleName="value">
-                        {link.data.followers || 0}
-                      </div>
-                      <div styleName="key">
-                        followers
-                      </div>
-                    </li>
-                    <li>
-                      <div styleName="value">
-                        {link.data.likes || 0}
-                      </div>
-                      <div styleName="key">
-                        likes
-                      </div>
-                    </li>
-                  </ul>
-                )
-              }
-              {
-                link.providerType === 'bitbucket'
-                && (
-                  <ul className={pending ? 'hidden' : ''}>
-                    <li>
-                      <div styleName="value">
-                        {link.data.followers || 0}
-                      </div>
-                      <div styleName="key">
-                        followers
-                      </div>
-                    </li>
-                    <li>
-                      <div styleName="value">
-                        {link.data.repos || 0}
-                      </div>
-                      <div styleName="key">
-                        repositories
-                      </div>
-                    </li>
-                  </ul>
-                )
-              }
-              {
-                link.providerType === 'twitter'
-                && (
-                  <ul className={pending ? 'hidden' : ''}>
-                    <li>
-                      <div styleName="value">
-                        {link.data.noOfTweets || 0}
-                      </div>
-                      <div styleName="key">
-                        tweets
-                      </div>
-                    </li>
-                    <li>
-                      <div styleName="value">
-                        TBD
-                      </div>
-                      <div styleName="key">
-                        followers
-                      </div>
-                    </li>
-                  </ul>
-                )
-              }
-            </div>
-          )
-        }
-      </div>
-    </div>
-  );
-}
-
-ExistingLink.propTypes = {
-  link: PT.shape().isRequired,
-  supportedAccounts: PT.arrayOf(PT.shape()).isRequired,
-  onConfirmDeleteLink: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx b/src/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx
deleted file mode 100644
index 15a4e4de28..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/ExistingLinks.jsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Renders 'Linked Accounts' section.
- */
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-
-import { Modal, PrimaryButton, GhostButton } from 'topcoder-react-ui-kit';
-
-import ExistingLink from './ExistingLink';
-
-import Styles from './styles.scss';
-
-export default class ExistingLinks extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      linkToConfirmDelete: null,
-    };
-    this.onConfirmDeleteLink = this.onConfirmDeleteLink.bind(this);
-    this.onDeleteLink = this.onDeleteLink.bind(this);
-  }
-
-  // Confirm delete link function
-  onConfirmDeleteLink(e, link) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!link || link.deleting) {
-      return;
-    }
-    this.setState({ linkToConfirmDelete: link });
-  }
-
-  // Delete link function
-  onDeleteLink(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    const {
-      deleteWebLink,
-      handle,
-      profile,
-      tokenV3,
-      unlinkExternalAccount,
-    } = this.props;
-
-    const { linkToConfirmDelete } = this.state;
-
-    if (!linkToConfirmDelete || linkToConfirmDelete.deleting) {
-      return;
-    }
-    this.setState({ linkToConfirmDelete: null });
-
-    if (linkToConfirmDelete.providerType === 'weblink') {
-      deleteWebLink(handle, tokenV3, linkToConfirmDelete);
-    } else {
-      unlinkExternalAccount(
-        profile,
-        tokenV3,
-        linkToConfirmDelete.providerType,
-      );
-    }
-  }
-
-  render() {
-    const {
-      allLinks,
-      supportedAccounts,
-    } = this.props;
-
-    const { linkToConfirmDelete } = this.state;
-
-    return (
-      <div styleName="existing-links">
-        {
-          linkToConfirmDelete
-          && (
-            <Modal theme={{ container: Styles['deletion-confirmation-modal'] }}>
-              <div styleName="deletion-confirmation-container">
-                <div styleName="deletion-confirmation">
-                  <div styleName="deletion-confirmation-title">
-                    Heads Up!
-                  </div>
-                  <div styleName="deletion-confirmation-message">
-                    Are you sure you want to delete the external link
-                    <span styleName="deletion-confirmation-account-title">
-                      &quot;
-                      {linkToConfirmDelete.providerType === 'weblink' ? linkToConfirmDelete.URL : linkToConfirmDelete.providerType}
-                      &quot;
-                    </span>
-                    ? This action can&apos;t be undone later.
-                  </div>
-                  <div styleName="deletion-confirmation-buttons">
-                    <div styleName="deletion-confirmation-button-yes">
-                      <GhostButton onClick={this.onDeleteLink}>
-                        Yes, Delete Link
-                      </GhostButton>
-                    </div>
-                    <div styleName="deletion-confirmation-button-no">
-                      <PrimaryButton onClick={() => this.setState({ linkToConfirmDelete: null })}>
-                        Cancel
-                      </PrimaryButton>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Modal>
-          )
-        }
-        <div styleName="external-link-list">
-          {
-            _.map(allLinks, link => (
-              <ExistingLink
-                key={`${link.providerType}${link.key}`}
-                link={link}
-                supportedAccounts={supportedAccounts}
-                onConfirmDeleteLink={this.onConfirmDeleteLink}
-              />
-            ))
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-ExistingLinks.propTypes = {
-  handle: PT.string.isRequired,
-  tokenV3: PT.string.isRequired,
-  profile: PT.shape().isRequired,
-  allLinks: PT.arrayOf(PT.shape()).isRequired,
-  supportedAccounts: PT.arrayOf(PT.shape()).isRequired,
-  deleteWebLink: PT.func.isRequired,
-  unlinkExternalAccount: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx b/src/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx
deleted file mode 100644
index 82829f1989..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/LinkAccounts.jsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * Renders 'Link Your Accounts' section.
- */
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-
-import './styles.scss';
-
-function getStyleName(account) {
-  let style = 'ext-tile';
-  if (account.disabled) {
-    style += ' disabled';
-  } else {
-    style += ' enabled';
-  }
-
-  if (account.status === 'linked') {
-    style += ' connected';
-  } else if (account.status === 'pending') {
-    style += ' connecting';
-  } else if (account.status === 'unlinked' && !account.disabled) {
-    style += ' connect';
-  }
-  return style;
-}
-
-export default class LinkAccounts extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick(e, account) {
-    const {
-      linkExternalAccount,
-      profile,
-      tokenV3,
-      unlinkExternalAccount,
-    } = this.props;
-    e.preventDefault();
-    if (account.status === 'linked') {
-      unlinkExternalAccount(
-        profile,
-        tokenV3,
-        account.providerType,
-      );
-    } else if (!account.disabled && account.status === 'unlinked') {
-      linkExternalAccount(
-        profile,
-        tokenV3,
-        account.providerType,
-      );
-    }
-  }
-
-  render() {
-    const {
-      allLinks,
-      supportedAccounts,
-    } = this.props;
-
-    let accounts = _.cloneDeep(supportedAccounts);
-
-    _.remove(accounts, al => al.order < 0);
-
-    _.forEach(accounts, (account) => {
-      const linkedAccount = _.find(allLinks, p => p.providerType === account.providerType);
-
-      if (!linkedAccount) {
-        account.status = 'unlinked'; /* eslint-disable-line no-param-reassign */
-      } else {
-        account.status = linkedAccount.status; /* eslint-disable-line no-param-reassign */
-      }
-    });
-    accounts = _.sortBy(accounts, 'order');
-
-    return (
-      <div styleName="external-links">
-        {
-          _.map(accounts, account => (
-            <div key={account.providerType} role="button" onClick={e => this.handleClick(e, account)} styleName={getStyleName(account)}>
-              <div styleName={`external-account-box ${account.colorClass}`}>
-                <i className={`fa ${account.className}`} />
-                <div styleName="provider">
-                  {account.displayName}
-                </div>
-              </div>
-              {
-                account.status === 'linked'
-                && (
-                <div styleName="status already-connected">
-                  Connected
-                </div>
-                )
-              }
-              {
-                account.status === 'pending'
-                && (
-                <div styleName="status already-connected">
-                  Connecting
-                </div>
-                )
-              }
-              <div styleName="status disconnect">
-                Disconnect
-              </div>
-              {
-                account.status === 'unlinked' && !account.disabled
-                && (
-                <div styleName="status">
-                  Connect
-                </div>
-                )
-              }
-              {
-                account.disabled
-                && (
-                <div styleName="status">
-                  Coming Soon
-                </div>
-                )
-              }
-            </div>
-          ))
-        }
-      </div>
-    );
-  }
-}
-
-LinkAccounts.propTypes = {
-  tokenV3: PT.string.isRequired,
-  profile: PT.shape().isRequired,
-  allLinks: PT.arrayOf(PT.shape()).isRequired,
-  supportedAccounts: PT.arrayOf(PT.shape()).isRequired,
-  linkExternalAccount: PT.func.isRequired,
-  unlinkExternalAccount: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/index.jsx b/src/shared/components/Settings/Profile/ExternalLinks/index.jsx
deleted file mode 100644
index 9f87fcc653..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/index.jsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * Child component of Settings/Profile/ExternalLinks renders
- * "External Links" section of profile setting page.
- */
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-
-import AddWebLink from './AddWebLink';
-import LinkAccounts from './LinkAccounts';
-import ExistingLinks from './ExistingLinks';
-
-import './styles.scss';
-
-const supportedAccounts = [
-  {
-    providerType: 'dribbble',
-    className: 'fa-dribbble',
-    displayName: 'Dribbble',
-    disabled: false,
-    order: 6,
-    colorClass: 'el-dribble',
-    featured: true,
-  },
-  {
-    providerType: 'linkedin',
-    className: 'fa-linkedin',
-    displayName: 'LinkedIn',
-    disabled: true,
-    order: 5,
-    colorClass: 'el-linkedin',
-    featured: true,
-  },
-  {
-    providerType: 'stackoverflow',
-    className: 'fa-stack-overflow',
-    displayName: 'Stack Overflow',
-    disabled: false,
-    order: 3,
-    colorClass: 'el-stackoverflow',
-  },
-  {
-    providerType: 'behance',
-    className: 'fa-behance',
-    displayName: 'Behance',
-    disabled: true,
-    order: 2,
-    colorClass: 'el-behance',
-  },
-  {
-    providerType: 'github',
-    className: 'fa-github',
-    displayName: 'Github',
-    disabled: false,
-    order: 1,
-    colorClass: 'el-github',
-    featured: true,
-  },
-  {
-    providerType: 'bitbucket',
-    className: 'fa-bitbucket',
-    displayName: 'Bitbucket',
-    disabled: false,
-    order: 7,
-    colorClass: 'el-bitbucket',
-  },
-  {
-    providerType: 'twitter',
-    className: 'fa-twitter',
-    displayName: 'Twitter',
-    disabled: true,
-    order: 4,
-    colorClass: 'el-twitter',
-  },
-  {
-    providerType: 'weblink',
-    className: 'fa-globe',
-    displayName: 'Web Links',
-    disabled: true,
-    order: -1,
-    colorClass: 'el-weblinks',
-  },
-];
-
-export default function ExternalLinks(props) {
-  const {
-    profileState,
-    settingsPageState,
-  } = props;
-
-  // Construct all links
-  const allLinks = [];
-  const linkedAccounts = profileState.linkedAccounts || [];
-  const externalAccountsData = profileState.externalAccounts || {};
-
-  if (!linkedAccounts.length) {
-    const providers = _.omit(externalAccountsData, ['userId', 'updatedAt', 'createdAt', 'createdBy', 'updatedBy', 'handle']);
-
-    _.forEach(_.keys(providers), (p) => {
-      if (providers[p]) {
-        linkedAccounts.push({ providerType: p });
-      }
-    });
-  }
-  _.forEach(linkedAccounts, (linkedAccount) => {
-    const providerType = linkedAccount.providerType || linkedAccount.provider;
-
-    let account;
-    if (externalAccountsData[providerType]) {
-      // add external account data
-      account = {
-        providerType,
-        data: externalAccountsData[providerType],
-        status: 'linked',
-      };
-    } else {
-      // account data not available yet, add pending card
-      account = {
-        providerType,
-        data: { handle: linkedAccount.name },
-        status: 'pending',
-      };
-    }
-
-    if (_.find(
-      settingsPageState.deletingLinks,
-      l => l.providerType === account.providerType,
-    )) {
-      account.deleting = true;
-    }
-    allLinks.push(account);
-  });
-
-  // Append web links
-  _.forEach(profileState.externalLinks, (el) => {
-    const link = _.clone(el);
-    link.providerType = 'weblink';
-    link.status = link.synchronizedAt ? 'linked' : 'pending';
-    if (_.find(settingsPageState.deletingLinks, l => l.key === link.key)) {
-      link.deleting = true;
-    }
-    allLinks.push(link);
-  });
-
-  return (
-    <div className="settings-section" styleName="links">
-      <div className="section-info">
-        <h2>
-          External links
-        </h2>
-        <div className="description">
-          Show off your work and experience outside of Topcoder. Connect
-          accounts from popular services and networks or add a link to any site.
-        </div>
-      </div>
-      <div className="section-fields">
-        <div className="form-label">
-          Add a web link
-        </div>
-        <AddWebLink
-          {...props}
-          allLinks={allLinks}
-        />
-        <div className="form-label">
-          Link Your Accounts
-        </div>
-        <LinkAccounts
-          {...props}
-          allLinks={allLinks}
-          supportedAccounts={supportedAccounts}
-        />
-        <div className="form-label">
-          Linked Accounts
-        </div>
-        <ExistingLinks
-          {...props}
-          allLinks={allLinks}
-          supportedAccounts={supportedAccounts}
-        />
-      </div>
-    </div>
-  );
-}
-
-ExternalLinks.propTypes = {
-  profileState: PT.shape().isRequired,
-  settingsPageState: PT.shape().isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ExternalLinks/styles.scss b/src/shared/components/Settings/Profile/ExternalLinks/styles.scss
deleted file mode 100644
index d012d9edb1..0000000000
--- a/src/shared/components/Settings/Profile/ExternalLinks/styles.scss
+++ /dev/null
@@ -1,724 +0,0 @@
-@import "../../style";
-
-.links {
-  border-bottom: none;
-}
-
-// Add web link section
-.external-web-link {
-  .web-link {
-    margin: 6px 0 31px 0;
-
-    form {
-      display: flex;
-      flex-flow: row wrap;
-
-      input.url {
-        width: 100%;
-        margin: 0;
-
-        @include placeholder {
-          color: $tc-gray-40;
-          font-size: 12px;
-
-          @include roboto-regular;
-        }
-
-        &:disabled {
-          color: #b7b7b7;
-        }
-      }
-
-      // Error and success styles
-      .validation-bar {
-        flex: 1;
-        width: auto;
-        position: relative;
-
-        &::before {
-          border-radius: 3px 0 0 3px;
-          content: '';
-          display: none;
-          height: 40px;
-          width: 2px;
-          left: 1px;
-          position: absolute;
-          top: 0;
-        }
-
-        &.error-bar::before {
-          background-color: $tc-red;
-          display: block;
-        }
-      }
-
-      .form-input-error {
-        background-color: $tc-red-10;
-        border: 1px solid $tc-red-30;
-        color: $tc-red;
-        font-size: 12px;
-        line-height: 20px;
-        margin-bottom: 10px;
-        padding: 10px;
-        text-align: left;
-
-        p {
-          @include merriweather-sans-regular;
-        }
-      }
-
-      .add-button {
-        width: auto;
-        height: 40px;
-        margin-top: 0;
-        margin-left: 10px;
-        text-transform: uppercase;
-      }
-    }
-  }
-}
-
-.external-link-list {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  margin-top: 10px;
-
-  .external-link-tile {
-    border: 1px solid $tc-gray-20;
-    width: 280px;
-    height: 90px;
-    display: flex;
-    flex-direction: row;
-    text-align: center;
-    margin-bottom: 10px;
-    border-radius: 4px;
-
-    @include roboto-medium;
-
-    i {
-      color: #7f7f7f;
-    }
-
-    &:hover {
-      cursor: pointer;
-      background-color: #fbfbfb;
-
-      i {
-        color: black;
-      }
-    }
-
-    i.fa-globe {
-      color: #82a0aa;
-    }
-
-    i.fa-weblinks {
-      color: #82a0aa;
-    }
-
-    i.fa-bitbucket {
-      color: #205081;
-    }
-
-    i.fa-dribble {
-      color: #ea4c89;
-    }
-
-    i.fa-linkedin {
-      color: #127cb5;
-    }
-
-    i.fa-twitter {
-      color: #62aadc;
-    }
-
-    i.fa-stack-overflow {
-      color: #e5712a;
-    }
-
-    i.fa-behance {
-      color: #188cfc;
-    }
-
-    i.fa-github {
-      color: #4b3d74;
-    }
-
-    .top {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 90px;
-      height: 88px;
-      background-color: $tc-gray-neutral-light;
-      border-radius: 4px 0 0 4px;
-      position: relative;
-
-      i {
-        font-size: 40px;
-        margin-top: 15px;
-      }
-
-      h2 {
-        margin-top: 5px;
-        flex-basis: 40px;
-        font-weight: normal;
-        text-transform: uppercase;
-        color: #a3a3ae;
-        font-size: 10px;
-      }
-    }
-
-    .bottom {
-      width: 220px;
-      margin-top: 10px;
-
-      .handle {
-        @include roboto-light;
-
-        font-size: 18px;
-        height: 20px;
-      }
-
-      .title {
-        // placeholder
-        margin-top: 10px;
-        color: #9e9e9e;
-        font-size: 12px;
-        line-height: 14px;
-
-        @include roboto-medium;
-      }
-
-      .pending {
-        p {
-          @include roboto-regular;
-
-          font-size: 16px;
-          color: $tc-gray-90;
-          margin-bottom: 15px;
-          padding: 0 10px;
-        }
-      }
-
-      ul {
-        margin-top: 10px;
-        height: 40px;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-
-        li {
-          justify-content: space-between;
-          margin: 10px 0 10px 0;
-          width: 90px;
-          color: #9e9e9e;
-
-          .key {
-            font-size: 11px;
-            text-transform: capitalize;
-          }
-
-          .value {
-            font-size: 14px;
-            // placeholder
-          }
-        }
-      }
-
-      .logo {
-        padding: 10px;
-        font-size: 50px;
-      }
-
-      .link-title {
-        @include roboto-medium;
-
-        font-size: 12px;
-        line-height: 20px;
-        color: $tc-gray-90;
-        margin-top: 10px;
-        height: 40px;
-        overflow: hidden;
-        padding: 0 20px;
-        text-transform: uppercase;
-      }
-
-      .link-url {
-        font-size: 12px;
-        line-height: 14px;
-        word-wrap: break-word;
-        display: block;
-        overflow: hidden;
-        max-height: 14px;
-        padding: 0 20px;
-        text-transform: uppercase;
-        color: $tc-dark-blue-110;
-
-        &:hover {
-          color: $tc-light-blue-110;
-        }
-      }
-    }
-  }
-}
-
-@media (min-width: 768px) {
-  .external-link-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    padding: 0 60px;
-
-    .external-link-tile {
-      border: 1px solid #f0f0f0;
-      background-color: $tc-gray-neutral-light;
-      margin-left: 15px;
-      margin-top: 30px;
-      margin-bottom: 0;
-      // &:nth-child(3n+1) {
-      //   margin-left: 0px;
-      // }
-      width: 218px;
-      height: 240px;
-      display: flex;
-      flex-direction: column;
-      text-align: center;
-      padding: 0;
-
-      @include roboto-medium;
-
-      i {
-        color: #7f7f7f;
-      }
-
-      &:hover {
-        cursor: pointer;
-        background-color: #fbfbfb;
-
-        i {
-          color: black;
-        }
-      }
-
-      .top {
-        padding-top: 15px;
-        background-color: none;
-        width: auto;
-
-        h2 {
-          flex-basis: 40px;
-          font-weight: normal;
-          text-transform: uppercase;
-          color: #a3a3ae;
-          font-size: 12px;
-          line-height: 14px;
-        }
-      }
-
-      .bottom {
-        margin-top: 15px;
-        width: auto;
-
-        .handle {
-          margin-top: 20px;
-          margin-bottom: 20px;
-        }
-
-        .title {
-          // placeholder
-          height: 40px;
-          margin-top: 15px;
-          margin-bottom: 30px;
-        }
-
-        ul {
-          margin-left: 10px;
-          margin-bottom: 10px;
-          height: 40px;
-          display: flex;
-          flex-direction: row;
-
-          li {
-            justify-content: space-between;
-            margin: 10px 0 10px 0;
-            width: 90px;
-
-            @include roboto-medium;
-
-            .value {
-              color: $tc-gray-90;
-              font-size: 18px;
-            }
-
-            .key {
-              text-transform: uppercase;
-              font-size: 12px;
-              margin-top: 4px;
-              color: $tc-gray-40;
-            }
-          }
-        }
-
-        .logo {
-          padding: 10px;
-          font-size: 50px;
-        }
-
-        .link-title {
-          margin-top: 15px;
-          margin-bottom: 20px;
-          height: 60px;
-        }
-
-        .link-url {
-          max-height: 28px;
-        }
-      }
-    }
-
-    .external-link-tile--pending {
-      &:hover {
-        cursor: default;
-      }
-    }
-  }
-}
-
-// Existing links section
-.existing-links {
-  margin-bottom: 30px;
-  display: flex;
-  flex-flow: row wrap;
-  border-bottom: none;
-
-  .ext-link-tile_edit-header {
-    display: flex;
-    justify-content: flex-end;
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    &:hover {
-      .show-on-profile_label {
-        color: $tc-gray-90;
-      }
-    }
-  }
-
-  .ext-link-tile_edit-header_delete {
-    background-image: url(assets/images/ico-delete.svg);
-    background-position: center;
-    background-size: 16px 16px;
-    background-repeat: no-repeat;
-    height: 43px;
-    width: 51px;
-    cursor: pointer;
-    opacity: 0.7;
-
-    &:hover:not(.ext-link-tile_edit-header_delete--disabled) {
-      // border-left: 1px solid $tc-gray-20;
-      // border-bottom: 1px solid $tc-gray-20;
-      opacity: 1;
-    }
-  }
-
-  .ext-link-tile_edit-header_delete--disabled {
-    cursor: default;
-    opacity: 0.4;
-  }
-
-  .deletion-confirmation-modal {
-    padding: 0;
-    position: fixed;
-    overflow: auto;
-    z-index: 10000;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    box-sizing: border-box;
-    width: auto;
-    max-width: none;
-    transform: none;
-    background: transparent;
-
-    .deletion-confirmation-container {
-      background: transparent;
-      opacity: 1;
-      position: relative;
-      padding: 30px;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      border-radius: 0;
-      color: #444;
-      font-family: Helvetica, sans-serif;
-      font-size: 1.1em;
-      line-height: 1.5em;
-      margin: 0 auto;
-      max-width: 100%;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .deletion-confirmation {
-      width: 520px;
-      height: 256px;
-    }
-  }
-
-  .deletion-confirmation {
-    display: flex;
-    flex-flow: column wrap;
-    justify-content: space-around;
-    align-items: center;
-    background-color: $tc-white;
-    opacity: 1;
-    border-radius: 4px;
-    padding: 40px;
-  }
-
-  .deletion-confirmation-title {
-    @include roboto-medium;
-
-    font-size: 20px;
-    line-height: 24px;
-    color: $tc-gray-90;
-    text-transform: uppercase;
-  }
-
-  .deletion-confirmation-message {
-    @include merriweather-sans-light;
-
-    .deletion-confirmation-account-title {
-      font-style: italic;
-    }
-  }
-
-  .deletion-confirmation-buttons {
-    display: flex;
-    flex-flow: row wrap;
-
-    .deletion-confirmation-button-no {
-      margin-left: 10px;
-
-      button {
-        text-transform: uppercase;
-
-        @include roboto-medium;
-
-        font-size: 12px;
-      }
-    }
-
-    .deletion-confirmation-button-yes {
-      button {
-        border: 1px solid $tc-dark-blue;
-        text-transform: uppercase;
-
-        @include roboto-medium;
-
-        font-size: 12px;
-
-        &:hover {
-          color: $tc-white;
-          background-color: $tc-dark-blue;
-        }
-      }
-    }
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  .links {
-    & .external-link-list {
-      padding: 0;
-    }
-
-    .existing-links {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      flex-wrap: wrap;
-    }
-  }
-}
-
-// Link accounts section
-.external-links {
-  margin-bottom: 30px;
-  display: flex;
-  flex-flow: row wrap;
-
-  .ext-tile {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 5px 20px 15px 0;
-    cursor: pointer;
-
-    .external-account-box {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 90px;
-      height: 90px;
-      border: 1px solid $tc-gray-20;
-      margin-top: 12px;
-
-      i {
-        color: #d1d3d4;
-        font-size: 45px;
-      }
-
-      .provider {
-        margin-top: 8px;
-
-        @include roboto-medium;
-
-        font-size: 12px;
-        line-height: 13px;
-        text-align: center;
-        text-transform: uppercase;
-        color: $tc-gray-40;
-        padding: 0 10px;
-      }
-    }
-
-    &.connect {
-      .external-account-box {
-        background-color: #fbfbfb;
-      }
-    }
-
-    .status {
-      font-size: 10px;
-
-      @include roboto-medium;
-
-      margin-top: 10px;
-      text-transform: uppercase;
-      color: $tc-gray-90;
-
-      &.disconnect {
-        display: none;
-        color: #f06;
-      }
-    }
-
-    &.connected {
-      .status {
-        color: $tc-gray-80;
-      }
-
-      &:hover {
-        .external-account-box {
-          border: 1px solid #ff99c2;
-          background-color: #ffcce1;
-        }
-
-        .already-connected {
-          display: none;
-        }
-
-        .disconnect {
-          display: block;
-        }
-      }
-
-      .el-bitbucket i {
-        color: #205081;
-      }
-
-      .el-dribble i {
-        color: #ea4c89;
-      }
-
-      .el-linkedin i {
-        color: #127cb5;
-      }
-
-      .el-twitter i {
-        color: #62aadc;
-      }
-
-      .el-stackoverflow i {
-        color: #e5712a;
-      }
-
-      .el-behance i {
-        color: #188cfc;
-      }
-
-      .el-github i {
-        color: #4b3d74;
-      }
-
-      .el-weblinks i {
-        color: #82a0aa;
-      }
-    }
-
-    &.enabled:hover {
-      .el-bitbucket i {
-        color: #205081;
-      }
-
-      .el-dribble i {
-        color: #ea4c89;
-      }
-
-      .el-linkedin i {
-        color: #127cb5;
-      }
-
-      .el-twitter i {
-        color: #62aadc;
-      }
-
-      .el-stackoverflow i {
-        color: #e5712a;
-      }
-
-      .el-behance i {
-        color: #188cfc;
-      }
-
-      .el-github i {
-        color: #4b3d74;
-      }
-
-      .el-weblinks i {
-        color: #82a0aa;
-      }
-    }
-
-    &.connecting {
-      cursor: default;
-    }
-
-    &.disabled {
-      cursor: default;
-    }
-
-    &.enabled.connect:hover {
-      .external-account-box {
-        background-color: #f2faff;
-        border: 1px solid #85ccff;
-      }
-    }
-  }
-}
-
-.section-loading {
-  background: url(assets/images/ripple.gif) no-repeat center center;
-  width: 100%;
-  min-height: 50px;
-}
diff --git a/src/shared/components/Settings/Profile/Hobby/List/styles.scss b/src/shared/components/Settings/Profile/Hobby/List/styles.scss
deleted file mode 100644
index c7e24fd6ca..0000000000
--- a/src/shared/components/Settings/Profile/Hobby/List/styles.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "../../../style";
-
-.container {
-  width: 100%;
-  background-color: $tc-white;
-  padding: 0;
-
-  &.active {
-    margin-top: 20px;
-
-    @include upto-sm {
-      margin-top: 0;
-    }
-  }
-
-  ul {
-    display: flex;
-    flex-direction: column;
-    justify-items: center;
-
-    li {
-      min-height: 90px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
-    }
-  }
-}
diff --git a/src/shared/components/Settings/Profile/Hobby/index.jsx b/src/shared/components/Settings/Profile/Hobby/index.jsx
deleted file mode 100644
index a3b8ccd2f0..0000000000
--- a/src/shared/components/Settings/Profile/Hobby/index.jsx
+++ /dev/null
@@ -1,486 +0,0 @@
-/**
- * Child component of Settings/Profile/ renders the
- * 'Hobby' page.
- */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable no-nested-ternary */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable no-undef */
-import React from 'react';
-import PT from 'prop-types';
-import _ from 'lodash';
-import ErrorMessage from 'components/Settings/ErrorMessage';
-import ConsentComponent from 'components/Settings/ConsentComponent';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-import ConfirmationModal from '../../CofirmationModal';
-import HobbyList from './List';
-
-import './styles.scss';
-
-
-export default class Hobby extends ConsentComponent {
-  constructor(props) {
-    super(props);
-    this.onHandleDeleteHobby = this.onHandleDeleteHobby.bind(this);
-    this.onDeleteHobby = this.onDeleteHobby.bind(this);
-    this.onEditHobby = this.onEditHobby.bind(this);
-    this.loadHobbyTrait = this.loadHobbyTrait.bind(this);
-    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
-    this.onUpdateInput = this.onUpdateInput.bind(this);
-    this.onHandleAddHobby = this.onHandleAddHobby.bind(this);
-    this.onAddHobby = this.onAddHobby.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
-    this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
-
-    const { userTraits } = props;
-    this.state = {
-      formInvalid: false,
-      isSubmit: false,
-      hobbyTrait: this.loadHobbyTrait(userTraits),
-      personalizationTrait: this.loadPersonalizationTrait(userTraits),
-      newHobby: {
-        hobby: '',
-        description: '',
-      },
-      isMobileView: false,
-      screenSM: 767,
-      showConfirmation: false,
-      indexNo: null,
-      isEdit: false,
-    };
-  }
-
-  componentDidMount() {
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const hobbyTrait = this.loadHobbyTrait(nextProps.userTraits);
-    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
-    this.setState({
-      hobbyTrait,
-      personalizationTrait,
-      formInvalid: false,
-      isSubmit: false,
-      newHobby: {
-        hobby: '',
-        description: '',
-      },
-    });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updatePredicate);
-  }
-
-  /**
-   * Show User Consent Modal
-   * @param e event
-   */
-  onHandleAddHobby(e) {
-    e.preventDefault();
-    const { newHobby } = this.state;
-    this.setState({ isSubmit: true });
-    if (this.onCheckFormValue(newHobby)) {
-      return;
-    }
-    this.showConsent(this.onAddHobby.bind(this));
-  }
-
-  /**
-   * Check form fields value,
-   * Invalid value, can not save
-   * @param newHobby object
-   */
-  onCheckFormValue(newHobby) {
-    let invalid = false;
-
-    if (!_.trim(newHobby.hobby).length) {
-      invalid = true;
-    }
-
-    this.setState({ formInvalid: invalid });
-    return invalid;
-  }
-
-  onHandleDeleteHobby(indexNo) {
-    this.setState({
-      showConfirmation: true,
-      indexNo,
-    });
-  }
-
-  /**
-   * Delete hobby by index
-   * @param indexNo the hobby index no
-   */
-  onDeleteHobby(indexNo) {
-    const { hobbyTrait } = this.state;
-    const newHobbyTrait = { ...hobbyTrait };
-    newHobbyTrait.traits.data.splice(indexNo, 1);
-    this.setState({
-      hobbyTrait: newHobbyTrait,
-    });
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      deleteUserTrait,
-    } = this.props;
-
-    if (newHobbyTrait.traits.data.length > 0) {
-      updateUserTrait(handle, 'hobby', newHobbyTrait.traits.data, tokenV3);
-    } else {
-      deleteUserTrait(handle, 'hobby', tokenV3);
-    }
-    this.setState({
-      showConfirmation: false,
-      isEdit: false,
-      indexNo: null,
-      isSubmit: false,
-    });
-  }
-
-  /**
-   * Add new hobby
-   * @param answer user consent answer value
-   */
-  onAddHobby(answer) {
-    const {
-      newHobby, personalizationTrait, hobbyTrait, isEdit, indexNo,
-    } = this.state;
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      addUserTrait,
-    } = this.props;
-    const hobby = _.clone(newHobby);
-    if (_.isEmpty(hobby.description)) {
-      delete hobby.description;
-    }
-
-    // save hobby
-    if (hobbyTrait.traits && hobbyTrait.traits.data.length > 0) {
-      const newHobbyTrait = _.cloneDeep(hobbyTrait);
-      if (isEdit) {
-        newHobbyTrait.traits.data.splice(indexNo, 1);
-      }
-      newHobbyTrait.traits.data.push(hobby);
-      updateUserTrait(handle, 'hobby', newHobbyTrait.traits.data, tokenV3);
-    } else {
-      const newHobbies = [];
-      newHobbies.push(hobby);
-      addUserTrait(handle, 'hobby', newHobbies, tokenV3);
-    }
-    const empty = {
-      hobby: '',
-      description: '',
-    };
-    this.setState({
-      newHobby: empty,
-      isEdit: false,
-      indexNo: null,
-      inputChanged: false,
-    });
-
-    // save personalization
-    if (_.isEmpty(personalizationTrait)) {
-      const personalizationData = { userConsent: answer };
-      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-    } else {
-      const trait = personalizationTrait.traits.data[0];
-      if (trait.userConsent !== answer) {
-        const personalizationData = { userConsent: answer };
-        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-      }
-    }
-  }
-
-  /**
-   * Update input value
-   * @param e event
-   */
-  onUpdateInput(e) {
-    const { newHobby: oldHobby } = this.state;
-    const newHobby = { ...oldHobby };
-    newHobby[e.target.name] = e.target.value;
-    this.setState({ newHobby, isSubmit: false });
-  }
-
-  /**
-   * Get hobby trait
-   * @param userTraits the all user traits
-   */
-  loadHobbyTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'hobby');
-    const hobbys = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, hobbys);
-  }
-
-  /**
-   * Get personalization trait
-   * @param userTraits the all user traits
-   */
-  loadPersonalizationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'personalization');
-    const personalization = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, personalization);
-  }
-
-  updatePredicate() {
-    const { screenSM } = this.state;
-    this.setState({ isMobileView: window.innerWidth <= screenSM });
-  }
-
-  /**
-   * Edit hobby by index
-   * @param indexNo the hobby index no
-   */
-  onEditHobby(indexNo) {
-    const { hobbyTrait } = this.state;
-    this.setState({
-      newHobby: {
-        hobby: hobbyTrait.traits.data[indexNo].hobby,
-        description: _.isEmpty(hobbyTrait.traits.data[indexNo].description) ? '' : hobbyTrait.traits.data[indexNo].description,
-      },
-      isEdit: true,
-      indexNo,
-      formInvalid: false,
-      isSubmit: false,
-    });
-  }
-
-  onCancelEditStatus() {
-    const { isEdit } = this.state;
-    if (isEdit) {
-      this.setState({
-        isEdit: false,
-        indexNo: null,
-        isSubmit: false,
-        formInvalid: false,
-        newHobby: {
-          hobby: '',
-          description: '',
-        },
-      });
-    }
-  }
-
-  render() {
-    const {
-      settingsUI,
-    } = this.props;
-    const {
-      hobbyTrait,
-      isMobileView,
-      showConfirmation, indexNo, isEdit, isSubmit,
-      formInvalid,
-    } = this.state;
-    const canModifyTrait = !this.props.traitRequestCount;
-    const tabs = settingsUI.TABS.PROFILE;
-    const currentTab = settingsUI.currentProfileTab;
-    const containerStyle = currentTab === tabs.HOBBY ? '' : 'hide';
-    const hobbyItems = hobbyTrait.traits
-      ? hobbyTrait.traits.data.slice() : [];
-    const { newHobby } = this.state;
-
-    return (
-      <div styleName={containerStyle}>
-        {
-          this.shouldRenderConsent() && this.renderConsent()
-        }
-        {showConfirmation
-        && (
-          <ConfirmationModal
-            onConfirm={() => this.showConsent(this.onDeleteHobby.bind(this, indexNo))}
-            onCancel={() => this.setState({ showConfirmation: false, indexNo: null })}
-            name={hobbyTrait.traits.data[indexNo].hobby}
-          />
-        )}
-        <div styleName="hobby-container">
-          <h1>
-            Hobby
-          </h1>
-          <div styleName={`sub-title ${hobbyItems.length > 0 ? '' : 'hidden'}`}>
-            Your hobbies
-          </div>
-          {
-            !isMobileView && hobbyItems.length > 0
-            && (
-              <HobbyList
-                hobbyList={{ items: hobbyItems }}
-                onDeleteItem={this.onHandleDeleteHobby}
-                onEditItem={this.onEditHobby}
-              />
-            )
-          }
-          <div styleName={`sub-title ${hobbyItems.length > 0 ? 'second' : 'first'}`}>
-            {
-              isEdit ? (<React.Fragment>Edit hobby</React.Fragment>)
-                : (<React.Fragment>Add a new hobby</React.Fragment>)
-            }
-          </div>
-          <div styleName="form-container-default">
-            <form name="device-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="hobby">
-                    Hobby
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <span styleName="text-required">* Required</span>
-                  <input disabled={!canModifyTrait} id="hobby" name="hobby" type="text" placeholder="Hobby" onChange={this.onUpdateInput} value={newHobby.hobby} maxLength="128" required />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage invalid={_.isEmpty(newHobby.hobby)} message="Hobby cannot be empty" />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1-no-padding">
-                  <label styleName="description-label" htmlFor="description">
-                    Description
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <div styleName="description">
-                    <div styleName="first-line">
-                      <span styleName="description-counts">
-                        {newHobby.description.length}
-                        /160
-                      </span>
-                    </div>
-                    <textarea disabled={!canModifyTrait} id="description" styleName="description-text" name="description" placeholder="Description" onChange={this.onUpdateInput} value={newHobby.description} maxLength="160" cols="3" rows="10" required />
-                  </div>
-                </div>
-              </div>
-            </form>
-            <div styleName="button-container">
-              <div styleName="button-save">
-                <PrimaryButton
-                  styleName="complete"
-                  disabled={!canModifyTrait}
-                  onClick={this.onHandleAddHobby}
-                >
-                  {
-                    isEdit ? (<React.Fragment>Edit hobby to your list</React.Fragment>)
-                      : (<React.Fragment>Add hobby to your list</React.Fragment>)
-                  }
-                </PrimaryButton>
-              </div>
-              {
-                isEdit && (
-                  <div styleName="button-cancel">
-                    <PrimaryButton
-                      styleName="complete"
-                      onClick={this.onCancelEditStatus}
-                    >
-                      Cancel
-                    </PrimaryButton>
-                  </div>
-                )
-              }
-            </div>
-          </div>
-          <div styleName="form-container-mobile">
-            <form name="hobby-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <p>
-                  {
-                    isEdit ? (<React.Fragment>Edit Hobby</React.Fragment>)
-                      : (<React.Fragment>Add Hobby</React.Fragment>)
-                  }
-                </p>
-              </div>
-              <div styleName="row">
-                <div styleName="field row-1">
-                  <label htmlFor="hobby">
-                    Hobby
-                    <span styleName="text-required">* Required</span>
-                    <input type="hidden" />
-                  </label>
-                  <input disabled={!canModifyTrait} id="hobby" name="hobby" type="text" placeholder="Hobby" onChange={this.onUpdateInput} value={newHobby.hobby} maxLength="128" required />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage invalid={_.isEmpty(newHobby.hobby)} message="Hobby cannot be empty" />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field row-2">
-                  <label styleName="description-label" htmlFor="description">
-                    <span>
-                      Description
-                    </span>
-                    {' '}
-                    <span styleName="description-counts">
-                      {newHobby.description.length}
-                      /160
-                    </span>
-                  </label>
-                  <textarea disabled={!canModifyTrait} id="description" styleName="description-text" name="description" placeholder="Description" onChange={this.onUpdateInput} value={newHobby.description} maxLength="160" cols="3" rows="10" required />
-                </div>
-              </div>
-            </form>
-            <div styleName="button-container">
-              <div styleName="button-save">
-                <PrimaryButton
-                  styleName="complete"
-                  disabled={!canModifyTrait}
-                  onClick={this.onHandleAddHobby}
-                >
-                  {
-                    isEdit ? (<React.Fragment>Edit Hobby</React.Fragment>)
-                      : (<React.Fragment>Add Hobby</React.Fragment>)
-                  }
-                </PrimaryButton>
-              </div>
-              {
-                isEdit && (
-                  <div styleName="button-cancel">
-                    <PrimaryButton
-                      styleName="complete"
-                      onClick={this.onCancelEditStatus}
-                    >
-                      Cancel
-                    </PrimaryButton>
-                  </div>
-                )
-              }
-            </div>
-          </div>
-          {
-            isMobileView && hobbyItems.length > 0
-            && (
-              <HobbyList
-                hobbyList={{ items: hobbyItems }}
-                onDeleteItem={this.onHandleDeleteHobby}
-                onEditItem={this.onEditHobby}
-              />
-            )
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-Hobby.propTypes = {
-  tokenV3: PT.string.isRequired,
-  handle: PT.string.isRequired,
-  userTraits: PT.array.isRequired,
-  addUserTrait: PT.func.isRequired,
-  updateUserTrait: PT.func.isRequired,
-  deleteUserTrait: PT.func.isRequired,
-  settingsUI: PT.shape().isRequired,
-  traitRequestCount: PT.number.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ImageInput/index.jsx b/src/shared/components/Settings/Profile/ImageInput/index.jsx
deleted file mode 100644
index 06ea24e0ff..0000000000
--- a/src/shared/components/Settings/Profile/ImageInput/index.jsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * render a user icom input component.
- */
-/* global document */
-/* eslint-disable react/forbid-prop-types */
-import React from 'react';
-import PT from 'prop-types';
-
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-
-
-import DefaultPortrait from 'assets/images/ico-user-default.svg';
-
-import Styles from './styles.scss';
-
-
-export default class ImageInput extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onChangeImage = this.onChangeImage.bind(this);
-    this.onUploadPhoto = this.onUploadPhoto.bind(this);
-
-    this.state = {
-      newBasicInfo: {},
-    };
-  }
-
-  componentDidMount() {
-    const { userTraits } = this.props;
-    this.loadBasicInfoTraits(userTraits);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.loadBasicInfoTraits(nextProps.userTraits);
-    const {
-      profileState,
-    } = this.props;
-    if (profileState.deletingPhoto && !nextProps.profileState.deletingPhoto) {
-      document.querySelector('#change-image-input').value = null;
-    }
-  }
-
-  onChangeImage(e) {
-    e.preventDefault();
-    const {
-      profileState,
-    } = this.props;
-    if (profileState.uploadingPhoto) {
-      return;
-    }
-    const fileInput = document.querySelector('#change-image-input');
-    fileInput.click();
-  }
-
-  onUploadPhoto(e) {
-    e.preventDefault();
-    const {
-      handle,
-      profileState,
-      tokenV3,
-      uploadPhoto,
-    } = this.props;
-    if (profileState.uploadingPhoto) {
-      return;
-    }
-    const fileInput = document.querySelector('#change-image-input');
-    const file = fileInput.files[0];
-    uploadPhoto(handle, tokenV3, file);
-  }
-
-  /**
-   * Get basic info trait
-   * @param userTraits the all user traits
-   */
-  loadBasicInfoTraits = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'basic_info');
-    const basicInfoTrait = trait.length === 0 ? {} : trait[0];
-    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
-    this.setState({ newBasicInfo: basicInfo });
-  }
-
-  render() {
-    const {
-      handle,
-      profileState,
-    } = this.props;
-
-    const {
-      uploadingPhoto,
-      deletingPhoto,
-    } = profileState;
-
-    const { newBasicInfo } = this.state;
-
-    return (
-      <div styleName="image">
-        <div styleName="edit-image">
-          {
-            newBasicInfo.photoURL
-            && <img alt="User" src={newBasicInfo.photoURL} styleName="profile-circle" />
-          }
-          {
-            !newBasicInfo.photoURL
-            && <DefaultPortrait styleName="profile-circle" />
-          }
-          <div styleName="buttons">
-            <p styleName="handle">
-              {handle}
-            </p>
-            <PrimaryButton onClick={this.onChangeImage} disabled={uploadingPhoto || deletingPhoto} theme={{ button: Styles['file-upload'] }}>
-              {
-                uploadingPhoto && <i className="fa fa-spinner fa-spin" />
-              }
-              {
-                !uploadingPhoto && newBasicInfo.photoURL && 'Upload a new avatar'
-              }
-              {
-                !uploadingPhoto && !newBasicInfo.photoURL && 'Upload a new avatar'
-              }
-            </PrimaryButton>
-            <input type="file" name="image" onChange={this.onUploadPhoto} id="change-image-input" className="hidden" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-ImageInput.propTypes = {
-  handle: PT.string.isRequired,
-  tokenV3: PT.string.isRequired,
-  userTraits: PT.array.isRequired,
-  profileState: PT.shape().isRequired,
-  uploadPhoto: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/ImageInput/styles.scss b/src/shared/components/Settings/Profile/ImageInput/styles.scss
deleted file mode 100644
index 9300e69a6d..0000000000
--- a/src/shared/components/Settings/Profile/ImageInput/styles.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@import "../../style";
-
-.image {
-  @include from-sm-to-lg {
-    margin-right: 20px;
-  }
-
-  .edit-image {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    @include upto-sm {
-      flex-direction: row;
-    }
-
-    p.handle {
-      display: none;
-
-      @include upto-sm {
-        @include roboto-regular;
-
-        display: block;
-        font-size: 24px;
-        font-weight: 400;
-        line-height: 35px;
-        color: $tc-black;
-        margin-bottom: 10px;
-      }
-    }
-
-    .profile-circle {
-      margin-top: 10px;
-      border-radius: 50%;
-      border: 1px solid #d1d3d4;
-      width: 120px;
-      height: 120px;
-      padding: 2px;
-
-      @include upto-sm {
-        width: 80px;
-        height: 80px;
-        margin-right: 10px;
-        margin-top: 0;
-      }
-    }
-
-    .buttons {
-      .file-upload {
-        @include roboto-medium;
-
-        align-self: center;
-        color: $tc-white;
-        margin: 0;
-      }
-
-      .file-delete {
-        display: none;
-        width: 80px;
-        margin-left: 0;
-        text-transform: uppercase;
-        font-size: 12px;
-        min-height: 30px;
-        padding: 0;
-
-        @include upto-sm {
-          display: block;
-          margin-left: 6px;
-        }
-
-        &:hover {
-          background: $tc-dark-blue;
-        }
-      }
-    }
-  }
-}
diff --git a/src/shared/components/Settings/Profile/Language/List/Item/index.jsx b/src/shared/components/Settings/Profile/Language/List/Item/index.jsx
deleted file mode 100644
index d2d2ff99b3..0000000000
--- a/src/shared/components/Settings/Profile/Language/List/Item/index.jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * render language Item
- */
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-import { isomorphy } from 'topcoder-react-utils';
-
-import languageIcon from '../../../../../../../assets/images/profile/language.png';
-
-import './styles.scss';
-
-let assets;
-if (isomorphy.isClientSide()) {
-  assets = require.context('assets/images/profile', false, /svg/);
-}
-
-export default function Item(props) {
-  const {
-    language,
-    index,
-    onDeleteItem,
-    onEditItem,
-  } = props;
-
-  const hasOptions = () => {
-    if (_.isEmpty(language.spokenLevel) && _.isEmpty(language.writtenLevel)) {
-      return false;
-    }
-
-    return true;
-  };
-
-  return (
-    <div styleName="container">
-      <div styleName="language-info">
-        <div styleName="language-icon">
-          <img src={languageIcon} alt="language" />
-        </div>
-        <div styleName={`language-parameters${hasOptions() ? '' : ' single-line'}`}>
-          <div styleName={`parameter-first-line${hasOptions() ? '' : ' single-line'}`}>
-            { language.language }
-          </div>
-          {
-            (!_.isEmpty(language.spokenLevel) || !_.isEmpty(language.writtenLevel)) && (
-              <div styleName="parameter-second-line">
-                {
-                  (!_.isEmpty(language.spokenLevel) && !_.isEmpty(language.writtenLevel)) && (`Spoken: ${language.spokenLevel.toUpperCase()} | Written: ${language.writtenLevel.toUpperCase()}`)
-                }
-                {
-                  (!_.isEmpty(language.spokenLevel) && _.isEmpty(language.writtenLevel)) && (`Spoken: ${language.spokenLevel.toUpperCase()}`)
-                }
-                {
-                  (_.isEmpty(language.spokenLevel) && !_.isEmpty(language.writtenLevel)) && (`Written: ${language.writtenLevel.toUpperCase()}`)
-                }
-              </div>
-            )
-          }
-          {
-            (!_.isEmpty(language.spokenLevel) || !_.isEmpty(language.writtenLevel)) && (
-              <div styleName="parameter-second-line-mobile">
-                {
-                  !_.isEmpty(language.spokenLevel) && (
-                    <p>
-                      {`Spoken: ${language.spokenLevel.toUpperCase()}`}
-                    </p>
-                  )
-                }
-                {
-                  !_.isEmpty(language.writtenLevel) && (
-                    <p>
-                      {`Written: ${language.writtenLevel.toUpperCase()}`}
-                    </p>
-                  )
-                }
-              </div>
-            )
-          }
-        </div>
-      </div>
-      <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
-        >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          styleName="delete"
-          onKeyPress={() => onDeleteItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onDeleteItem(index)}
-        >
-          <img src={assets('./ico-trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
-      </div>
-    </div>
-  );
-}
-
-Item.propTypes = {
-  language: PT.shape().isRequired,
-  index: PT.number.isRequired,
-  onDeleteItem: PT.func.isRequired,
-  onEditItem: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Language/List/Item/styles.scss b/src/shared/components/Settings/Profile/Language/List/Item/styles.scss
deleted file mode 100644
index fd65ffe97f..0000000000
--- a/src/shared/components/Settings/Profile/Language/List/Item/styles.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-@import "../../../../style";
-
-.container {
-  display: flex;
-  flex-direction: row;
-  justify-items: center;
-  justify-content: space-between;
-  height: 100%;
-  width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
-  border-bottom: none;
-  background-color: $tc-white;
-}
-
-.language-info {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.language-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
-}
-
-.language-parameters {
-  @include roboto-medium;
-
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  justify-content: left;
-  font-size: 15px;
-  line-height: 20px;
-  text-transform: capitalize;
-  margin-right: 20px;
-
-  @include upto-sm {
-    margin-right: 0;
-  }
-
-  &.single-line {
-    flex-direction: row;
-    align-items: center;
-  }
-}
-
-.parameter-first-line {
-  font-weight: 500;
-  color: $tc-black;
-  margin-bottom: 10px;
-  word-break: break-all;
-
-  &.single-line {
-    margin-bottom: 0;
-  }
-
-  @include upto-sm {
-    margin-bottom: 0;
-  }
-}
-
-.parameter-second-line {
-  color: $tc-gray-50;
-  font-weight: 400;
-
-  @include upto-sm {
-    display: none;
-  }
-}
-
-.parameter-second-line-mobile {
-  display: none;
-
-  @include upto-sm {
-    display: flex;
-    flex-direction: column;
-    color: $tc-gray-50;
-    font-weight: 400;
-  }
-}
-
-.operation-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .delete {
-    display: flex;
-    flex-direction: column;
-    justify-items: center;
-    justify-content: center;
-    cursor: pointer;
-    outline-style: none;
-    margin-left: 10px;
-
-    img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
-    }
-
-    p {
-      @include roboto-regular;
-
-      font-size: 11px;
-      line-height: 15px;
-      font-weight: 400;
-      color: $tc-gray-50;
-
-      @include upto-sm {
-        display: none;
-      }
-    }
-  }
-
-  .edit {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    outline-style: none;
-    margin-left: 10px;
-
-    img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
-    }
-
-    p {
-      @include roboto-regular;
-
-      font-size: 11px;
-      line-height: 15px;
-      font-weight: 400;
-      color: $tc-gray-50;
-
-      @include upto-sm {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/shared/components/Settings/Profile/Language/List/index.jsx b/src/shared/components/Settings/Profile/Language/List/index.jsx
deleted file mode 100644
index 34f1f594be..0000000000
--- a/src/shared/components/Settings/Profile/Language/List/index.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * render Language list
- */
-import React from 'react';
-import PT from 'prop-types';
-import Item from './Item';
-
-import './styles.scss';
-
-export default function LanguageList(props) {
-  const {
-    languageList,
-    onDeleteItem,
-    onEditItem,
-  } = props;
-
-  return (
-    <div styleName={`container ${languageList.items.length > 0 ? 'active' : ''}`}>
-      <ul>
-        {
-          languageList.items.map((language, index) => (
-            <li key={`${language.language}${index + 1}`}>
-              <Item
-                language={language}
-                index={index}
-                onDeleteItem={onDeleteItem}
-                onEditItem={onEditItem}
-              />
-            </li>
-          ))
-        }
-      </ul>
-    </div>
-  );
-}
-
-LanguageList.propTypes = {
-  languageList: PT.shape().isRequired,
-  onDeleteItem: PT.func.isRequired,
-  onEditItem: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Language/List/styles.scss b/src/shared/components/Settings/Profile/Language/List/styles.scss
deleted file mode 100644
index c7e24fd6ca..0000000000
--- a/src/shared/components/Settings/Profile/Language/List/styles.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "../../../style";
-
-.container {
-  width: 100%;
-  background-color: $tc-white;
-  padding: 0;
-
-  &.active {
-    margin-top: 20px;
-
-    @include upto-sm {
-      margin-top: 0;
-    }
-  }
-
-  ul {
-    display: flex;
-    flex-direction: column;
-    justify-items: center;
-
-    li {
-      min-height: 90px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
-    }
-  }
-}
diff --git a/src/shared/components/Settings/Profile/Language/dropdowns.json b/src/shared/components/Settings/Profile/Language/dropdowns.json
deleted file mode 100644
index 98fbe6c398..0000000000
--- a/src/shared/components/Settings/Profile/Language/dropdowns.json
+++ /dev/null
@@ -1,782 +0,0 @@
-{
-  "language": [
-    {
-      "key": "language",
-      "name": "Afar"
-    },
-    {
-      "key": "language",
-      "name": "Abkhazian"
-    },
-    {
-      "key": "language",
-      "name": "Avestan"
-    },
-    {
-      "key": "language",
-      "name": "Afrikaans"
-    },
-    {
-      "key": "language",
-      "name": "Akan"
-    },
-    {
-      "key": "language",
-      "name": "Amharic"
-    },
-    {
-      "key": "language",
-      "name": "Aragonese"
-    },
-    {
-      "key": "language",
-      "name": "Arabic"
-    },
-    {
-      "key": "language",
-      "name": "Assamese"
-    },
-    {
-      "key": "language",
-      "name": "Avaric"
-    },
-    {
-      "key": "language",
-      "name": "Aymara"
-    },
-    {
-      "key": "language",
-      "name": "Azerbaijani"
-    },
-    {
-      "key": "language",
-      "name": "Bashkir"
-    },
-    {
-      "key": "language",
-      "name": "Belarusian"
-    },
-    {
-      "key": "language",
-      "name": "Bulgarian"
-    },
-    {
-      "key": "language",
-      "name": "Bihari languages"
-    },
-    {
-      "key": "language",
-      "name": "Bislama"
-    },
-    {
-      "key": "language",
-      "name": "Bambara"
-    },
-    {
-      "key": "language",
-      "name": "Bengali"
-    },
-    {
-      "key": "language",
-      "name": "Tibetan"
-    },
-    {
-      "key": "language",
-      "name": "Breton"
-    },
-    {
-      "key": "language",
-      "name": "Bosnian"
-    },
-    {
-      "key": "language",
-      "name": "Catalan; Valencian"
-    },
-    {
-      "key": "language",
-      "name": "Chechen"
-    },
-    {
-      "key": "language",
-      "name": "Chamorro"
-    },
-    {
-      "key": "language",
-      "name": "Corsican"
-    },
-    {
-      "key": "language",
-      "name": "Cree"
-    },
-    {
-      "key": "language",
-      "name": "Czech"
-    },
-    {
-      "key": "language",
-      "name": "Church Slavic; Old Slavonic; Church Slavonic; Old Bulgarian; Old Church Slavonic"
-    },
-    {
-      "key": "language",
-      "name": "Chuvash"
-    },
-    {
-      "key": "language",
-      "name": "Welsh"
-    },
-    {
-      "key": "language",
-      "name": "Danish"
-    },
-    {
-      "key": "language",
-      "name": "German"
-    },
-    {
-      "key": "language",
-      "name": "Divehi; Dhivehi; Maldivian"
-    },
-    {
-      "key": "language",
-      "name": "Dzongkha"
-    },
-    {
-      "key": "language",
-      "name": "Ewe"
-    },
-    {
-      "key": "language",
-      "name": "\"Greek",
-      "field3": "Modern (1453-)\""
-    },
-    {
-      "key": "language",
-      "name": "English"
-    },
-    {
-      "key": "language",
-      "name": "Esperanto"
-    },
-    {
-      "key": "language",
-      "name": "Spanish; Castilian"
-    },
-    {
-      "key": "language",
-      "name": "Estonian"
-    },
-    {
-      "key": "language",
-      "name": "Basque"
-    },
-    {
-      "key": "language",
-      "name": "Persian"
-    },
-    {
-      "key": "language",
-      "name": "Fulah"
-    },
-    {
-      "key": "language",
-      "name": "Finnish"
-    },
-    {
-      "key": "language",
-      "name": "Fijian"
-    },
-    {
-      "key": "language",
-      "name": "Faroese"
-    },
-    {
-      "key": "language",
-      "name": "French"
-    },
-    {
-      "key": "language",
-      "name": "Western Frisian"
-    },
-    {
-      "key": "language",
-      "name": "Irish"
-    },
-    {
-      "key": "language",
-      "name": "Gaelic; Scottish Gaelic"
-    },
-    {
-      "key": "language",
-      "name": "Galician"
-    },
-    {
-      "key": "language",
-      "name": "Guarani"
-    },
-    {
-      "key": "language",
-      "name": "Gujarati"
-    },
-    {
-      "key": "language",
-      "name": "Manx"
-    },
-    {
-      "key": "language",
-      "name": "Hausa"
-    },
-    {
-      "key": "language",
-      "name": "Hebrew"
-    },
-    {
-      "key": "language",
-      "name": "Hindi"
-    },
-    {
-      "key": "language",
-      "name": "Hiri Motu"
-    },
-    {
-      "key": "language",
-      "name": "Croatian"
-    },
-    {
-      "key": "language",
-      "name": "Haitian; Haitian Creole"
-    },
-    {
-      "key": "language",
-      "name": "Hungarian"
-    },
-    {
-      "key": "language",
-      "name": "Armenian"
-    },
-    {
-      "key": "language",
-      "name": "Herero"
-    },
-    {
-      "key": "language",
-      "name": "Interlingua (International Auxiliary Language Association)"
-    },
-    {
-      "key": "language",
-      "name": "Indonesian"
-    },
-    {
-      "key": "language",
-      "name": "Interlingue; Occidental"
-    },
-    {
-      "key": "language",
-      "name": "Igbo"
-    },
-    {
-      "key": "language",
-      "name": "Sichuan Yi; Nuosu"
-    },
-    {
-      "key": "language",
-      "name": "Inupiaq"
-    },
-    {
-      "key": "language",
-      "name": "Ido"
-    },
-    {
-      "key": "language",
-      "name": "Icelandic"
-    },
-    {
-      "key": "language",
-      "name": "Italian"
-    },
-    {
-      "key": "language",
-      "name": "Inuktitut"
-    },
-    {
-      "key": "language",
-      "name": "Japanese"
-    },
-    {
-      "key": "language",
-      "name": "Javanese"
-    },
-    {
-      "key": "language",
-      "name": "Georgian"
-    },
-    {
-      "key": "language",
-      "name": "Kongo"
-    },
-    {
-      "key": "language",
-      "name": "Kikuyu; Gikuyu"
-    },
-    {
-      "key": "language",
-      "name": "Kuanyama; Kwanyama"
-    },
-    {
-      "key": "language",
-      "name": "Kazakh"
-    },
-    {
-      "key": "language",
-      "name": "Kalaallisut; Greenlandic"
-    },
-    {
-      "key": "language",
-      "name": "Central Khmer"
-    },
-    {
-      "key": "language",
-      "name": "Kannada"
-    },
-    {
-      "key": "language",
-      "name": "Korean"
-    },
-    {
-      "key": "language",
-      "name": "Kanuri"
-    },
-    {
-      "key": "language",
-      "name": "Kashmiri"
-    },
-    {
-      "key": "language",
-      "name": "Kurdish"
-    },
-    {
-      "key": "language",
-      "name": "Komi"
-    },
-    {
-      "key": "language",
-      "name": "Cornish"
-    },
-    {
-      "key": "language",
-      "name": "Kirghiz; Kyrgyz"
-    },
-    {
-      "key": "language",
-      "name": "Latin"
-    },
-    {
-      "key": "language",
-      "name": "Luxembourgish; Letzeburgesch"
-    },
-    {
-      "key": "language",
-      "name": "Ganda"
-    },
-    {
-      "key": "language",
-      "name": "Limburgan; Limburger; Limburgish"
-    },
-    {
-      "key": "language",
-      "name": "Lingala"
-    },
-    {
-      "key": "language",
-      "name": "Lao"
-    },
-    {
-      "key": "language",
-      "name": "Lithuanian"
-    },
-    {
-      "key": "language",
-      "name": "Luba-Katanga"
-    },
-    {
-      "key": "language",
-      "name": "Latvian"
-    },
-    {
-      "key": "language",
-      "name": "Malagasy"
-    },
-    {
-      "key": "language",
-      "name": "Marshallese"
-    },
-    {
-      "key": "language",
-      "name": "Maori"
-    },
-    {
-      "key": "language",
-      "name": "Macedonian"
-    },
-    {
-      "key": "language",
-      "name": "Malayalam"
-    },
-    {
-      "key": "language",
-      "name": "Mongolian"
-    },
-    {
-      "key": "language",
-      "name": "Marathi"
-    },
-    {
-      "key": "language",
-      "name": "Malay"
-    },
-    {
-      "key": "language",
-      "name": "Maltese"
-    },
-    {
-      "key": "language",
-      "name": "Burmese"
-    },
-    {
-      "key": "language",
-      "name": "Nauru"
-    },
-    {
-      "key": "language",
-      "name": "\"Bokmål",
-      "field3": "Norwegian; Norwegian Bokmål\""
-    },
-    {
-      "key": "language",
-      "name": "\"Ndebele",
-      "field3": "North; North Ndebele\""
-    },
-    {
-      "key": "language",
-      "name": "Nepali"
-    },
-    {
-      "key": "language",
-      "name": "Ndonga"
-    },
-    {
-      "key": "language",
-      "name": "Dutch; Flemish"
-    },
-    {
-      "key": "language",
-      "name": "\"Norwegian Nynorsk; Nynorsk",
-      "field3": "Norwegian\""
-    },
-    {
-      "key": "language",
-      "name": "Norwegian"
-    },
-    {
-      "key": "language",
-      "name": "\"Ndebele",
-      "field3": "South; South Ndebele\""
-    },
-    {
-      "key": "language",
-      "name": "Navajo; Navaho"
-    },
-    {
-      "key": "language",
-      "name": "Chichewa; Chewa; Nyanja"
-    },
-    {
-      "key": "language",
-      "name": "Occitan (post 1500); Provençal"
-    },
-    {
-      "key": "language",
-      "name": "Ojibwa"
-    },
-    {
-      "key": "language",
-      "name": "Oromo"
-    },
-    {
-      "key": "language",
-      "name": "Oriya"
-    },
-    {
-      "key": "language",
-      "name": "Ossetian; Ossetic"
-    },
-    {
-      "key": "language",
-      "name": "Panjabi; Punjabi"
-    },
-    {
-      "key": "language",
-      "name": "Pali"
-    },
-    {
-      "key": "language",
-      "name": "Polish"
-    },
-    {
-      "key": "language",
-      "name": "Pushto; Pashto"
-    },
-    {
-      "key": "language",
-      "name": "Portuguese"
-    },
-    {
-      "key": "language",
-      "name": "Quechua"
-    },
-    {
-      "key": "language",
-      "name": "Romansh"
-    },
-    {
-      "key": "language",
-      "name": "Rundi"
-    },
-    {
-      "key": "language",
-      "name": "Romanian; Moldavian; Moldovan"
-    },
-    {
-      "key": "language",
-      "name": "Russian"
-    },
-    {
-      "key": "language",
-      "name": "Kinyarwanda"
-    },
-    {
-      "key": "language",
-      "name": "Sanskrit"
-    },
-    {
-      "key": "language",
-      "name": "Sardinian"
-    },
-    {
-      "key": "language",
-      "name": "Sindhi"
-    },
-    {
-      "key": "language",
-      "name": "Northern Sami"
-    },
-    {
-      "key": "language",
-      "name": "Sango"
-    },
-    {
-      "key": "language",
-      "name": "Sinhala; Sinhalese"
-    },
-    {
-      "key": "language",
-      "name": "Slovak"
-    },
-    {
-      "key": "language",
-      "name": "Slovenian"
-    },
-    {
-      "key": "language",
-      "name": "Samoan"
-    },
-    {
-      "key": "language",
-      "name": "Shona"
-    },
-    {
-      "key": "language",
-      "name": "Somali"
-    },
-    {
-      "key": "language",
-      "name": "Albanian"
-    },
-    {
-      "key": "language",
-      "name": "Serbian"
-    },
-    {
-      "key": "language",
-      "name": "Swati"
-    },
-    {
-      "key": "language",
-      "name": "\"Sotho",
-      "field3": "Southern\""
-    },
-    {
-      "key": "language",
-      "name": "Sundanese"
-    },
-    {
-      "key": "language",
-      "name": "Swedish"
-    },
-    {
-      "key": "language",
-      "name": "Swahili"
-    },
-    {
-      "key": "language",
-      "name": "Tamil"
-    },
-    {
-      "key": "language",
-      "name": "Telugu"
-    },
-    {
-      "key": "language",
-      "name": "Tajik"
-    },
-    {
-      "key": "language",
-      "name": "Thai"
-    },
-    {
-      "key": "language",
-      "name": "Tigrinya"
-    },
-    {
-      "key": "language",
-      "name": "Turkmen"
-    },
-    {
-      "key": "language",
-      "name": "Tagalog"
-    },
-    {
-      "key": "language",
-      "name": "Tswana"
-    },
-    {
-      "key": "language",
-      "name": "Tonga (Tonga Islands)"
-    },
-    {
-      "key": "language",
-      "name": "Turkish"
-    },
-    {
-      "key": "language",
-      "name": "Tsonga"
-    },
-    {
-      "key": "language",
-      "name": "Tatar"
-    },
-    {
-      "key": "language",
-      "name": "Twi"
-    },
-    {
-      "key": "language",
-      "name": "Tahitian"
-    },
-    {
-      "key": "language",
-      "name": "Uighur; Uyghur"
-    },
-    {
-      "key": "language",
-      "name": "Ukrainian"
-    },
-    {
-      "key": "language",
-      "name": "Urdu"
-    },
-    {
-      "key": "language",
-      "name": "Uzbek"
-    },
-    {
-      "key": "language",
-      "name": "Venda"
-    },
-    {
-      "key": "language",
-      "name": "Vietnamese"
-    },
-    {
-      "key": "language",
-      "name": "Volapük"
-    },
-    {
-      "key": "language",
-      "name": "Walloon"
-    },
-    {
-      "key": "language",
-      "name": "Wolof"
-    },
-    {
-      "key": "language",
-      "name": "Xhosa"
-    },
-    {
-      "key": "language",
-      "name": "Yiddish"
-    },
-    {
-      "key": "language",
-      "name": "Yoruba"
-    },
-    {
-      "key": "language",
-      "name": "Zhuang; Chuang"
-    },
-    {
-      "key": "language",
-      "name": "Chinese"
-    },
-    {
-      "key": "language",
-      "name": "Zulu"
-    }
-  ],
-  "spokenLevel": [
-    {
-      "key": "spokenLevel",
-      "name": "Basic"
-    },
-    {
-      "key": "spokenLevel",
-      "name": "Intermediate"
-    },
-    {
-      "key": "spokenLevel",
-      "name": "Advanced"
-    },
-    {
-      "key": "spokenLevel",
-      "name": "Native"
-    }
-  ],
-  "writtenLevel": [
-    {
-      "key": "writtenLevel",
-      "name": "Basic"
-    },
-    {
-      "key": "writtenLevel",
-      "name": "Intermediate"
-    },
-    {
-      "key": "writtenLevel",
-      "name": "Advanced"
-    },
-    {
-      "key": "writtenLevel",
-      "name": "Native"
-    }
-  ]
-}
diff --git a/src/shared/components/Settings/Profile/Language/index.jsx b/src/shared/components/Settings/Profile/Language/index.jsx
deleted file mode 100644
index c61fa0b13a..0000000000
--- a/src/shared/components/Settings/Profile/Language/index.jsx
+++ /dev/null
@@ -1,634 +0,0 @@
-/**
- * Child component of Settings/Profile/ renders the
- * 'Language' page.
- */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable no-nested-ternary */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable no-undef */
-/* eslint-disable react/jsx-boolean-value */
-import React from 'react';
-import PT from 'prop-types';
-import _ from 'lodash';
-import Select from 'components/Select';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-import ConsentComponent from 'components/Settings/ConsentComponent';
-import ErrorMessage from 'components/Settings/ErrorMessage';
-import ConfirmationModal from '../../CofirmationModal';
-import dropdowns from './dropdowns.json';
-import LanguageList from './List';
-
-import './styles.scss';
-
-
-export default class Language extends ConsentComponent {
-  constructor(props) {
-    super(props);
-    this.onHandleDeleteLanguage = this.onHandleDeleteLanguage.bind(this);
-    this.onDeleteLanguage = this.onDeleteLanguage.bind(this);
-    this.onEditLanguage = this.onEditLanguage.bind(this);
-    this.onUpdateSelect = this.onUpdateSelect.bind(this);
-    this.loadLanguageTrait = this.loadLanguageTrait.bind(this);
-    this.onHandleAddLanguage = this.onHandleAddLanguage.bind(this);
-    this.onAddLanguage = this.onAddLanguage.bind(this);
-    this.onUpdateInput = this.onUpdateInput.bind(this);
-    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
-    this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
-
-    const { userTraits } = props;
-    this.state = {
-      formInvalid: false,
-      languageNameInvalid: false,
-      languageNameInvalidMsg: '',
-      languageTrait: this.loadLanguageTrait(userTraits),
-      personalizationTrait: this.loadPersonalizationTrait(userTraits),
-      newLanguage: {
-        language: '',
-        spokenLevel: '',
-        writtenLevel: '',
-      },
-      isMobileView: false,
-      screenSM: 767,
-      isEdit: false,
-      indexNo: null,
-      showConfirmation: false,
-      isSubmit: false,
-    };
-  }
-
-  componentDidMount() {
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const languageTrait = this.loadLanguageTrait(nextProps.userTraits);
-    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
-    this.setState({
-      languageTrait,
-      personalizationTrait,
-      formInvalid: false,
-      languageNameInvalid: false,
-      languageNameInvalidMsg: '',
-      newLanguage: {
-        language: '',
-        spokenLevel: '',
-        writtenLevel: '',
-      },
-      isSubmit: false,
-    });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updatePredicate);
-  }
-
-  /**
-   * Update input value
-   * @param e event
-   */
-  onUpdateInput(e) {
-    const { newLanguage: oldLanguage } = this.state;
-    const newLanguage = { ...oldLanguage };
-    newLanguage[e.target.name] = e.target.value.trim();
-    this.setState({ newLanguage, isSubmit: false });
-  }
-
-  onHandleDeleteLanguage(indexNo) {
-    this.setState({
-      showConfirmation: true,
-      indexNo,
-    });
-  }
-
-  /**
-   * Delete language by index
-   * @param indexNo the language index no
-   */
-  onDeleteLanguage(indexNo) {
-    const { languageTrait } = this.state;
-    const newLanguageTrait = { ...languageTrait };
-    newLanguageTrait.traits.data.splice(indexNo, 1);
-    this.setState({
-      languageTrait: newLanguageTrait,
-      isEdit: false,
-      formInvalid: false,
-      languageNameInvalid: false,
-      languageNameInvalidMsg: '',
-    });
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      deleteUserTrait,
-    } = this.props;
-
-    if (newLanguageTrait.traits.data.length > 0) {
-      updateUserTrait(handle, 'languages', newLanguageTrait.traits.data, tokenV3);
-    } else {
-      deleteUserTrait(handle, 'languages', tokenV3);
-    }
-    this.setState({
-      showConfirmation: false,
-      indexNo: null,
-      isSubmit: false,
-    });
-  }
-
-  /**
-   * Edit language by index
-   * @param indexNo the language index no
-   */
-  onEditLanguage(indexNo) {
-    const { languageTrait } = this.state;
-    this.setState({
-      newLanguage: {
-        language: languageTrait.traits.data[indexNo].language,
-        spokenLevel: _.isEmpty(languageTrait.traits.data[indexNo].spokenLevel) ? '' : languageTrait.traits.data[indexNo].spokenLevel,
-        writtenLevel: _.isEmpty(languageTrait.traits.data[indexNo].writtenLevel) ? '' : languageTrait.traits.data[indexNo].writtenLevel,
-      },
-      isEdit: true,
-      indexNo,
-      formInvalid: false,
-      languageNameInvalid: false,
-      languageNameInvalidMsg: '',
-      isSubmit: false,
-    });
-  }
-
-  /**
-   * Check form fields value,
-   * Invalid value, can not save
-   */
-  onCheckFormValue() {
-    const {
-      languageTrait, newLanguage, isEdit, indexNo,
-    } = this.state;
-
-    let invalid = false;
-    let languageNameInvalid = false;
-    let languageNameInvalidMsg = '';
-
-    if (_.isEmpty(newLanguage.language.trim())) {
-      invalid = true;
-      languageNameInvalid = true;
-      languageNameInvalidMsg = 'Language cannot be empty';
-    }
-
-    if (isEdit) {
-      const result = _.filter(languageTrait.traits.data, (item, index) => (
-        item.language.toLowerCase() === newLanguage.language.toLowerCase() && index !== indexNo
-      ));
-
-      if (result && result.length > 0) {
-        invalid = true;
-        languageNameInvalid = true;
-        languageNameInvalidMsg = 'Language already added';
-      }
-    } else if (!_.isEmpty(languageTrait)) {
-      const result = _.filter(languageTrait.traits.data, item => (
-        item.language.toLowerCase() === newLanguage.language.toLowerCase()
-      ));
-
-      if (result && result.length > 0) {
-        invalid = true;
-        languageNameInvalid = true;
-        languageNameInvalidMsg = 'Language already added';
-      }
-    }
-
-    this.setState({
-      formInvalid: invalid,
-      languageNameInvalid,
-      languageNameInvalidMsg,
-    });
-    return invalid;
-  }
-
-  onHandleAddLanguage(e) {
-    e.preventDefault();
-    this.setState({ isSubmit: true });
-    if (this.onCheckFormValue()) {
-      return;
-    }
-    this.showConsent(this.onAddLanguage.bind(this));
-  }
-
-  /**
-   * Add new language
-   * @param e form submit event
-   * @param answer user consent answer value
-   */
-  onAddLanguage(answer) {
-    const {
-      newLanguage, personalizationTrait, isEdit, indexNo,
-    } = this.state;
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      addUserTrait,
-    } = this.props;
-    const { languageTrait } = this.state;
-    const language = _.clone(newLanguage);
-    if (_.isEmpty(language.spokenLevel)) {
-      delete language.spokenLevel;
-    }
-    if (_.isEmpty(language.writtenLevel)) {
-      delete language.writtenLevel;
-    }
-    if (languageTrait.traits && languageTrait.traits.data.length > 0) {
-      const newLanguageTrait = _.cloneDeep(languageTrait);
-
-      if (isEdit) {
-        newLanguageTrait.traits.data.splice(indexNo, 1, language);
-      } else {
-        newLanguageTrait.traits.data.push(language);
-      }
-
-      updateUserTrait(handle, 'languages', newLanguageTrait.traits.data, tokenV3);
-    } else {
-      const newLanguages = [];
-      newLanguages.push(language);
-      addUserTrait(handle, 'languages', newLanguages, tokenV3);
-    }
-    const empty = {
-      language: '',
-      spokenLevel: '',
-      writtenLevel: '',
-    };
-    this.setState({
-      newLanguage: empty,
-      isEdit: false,
-      indexNo: null,
-      isSubmit: false,
-    });
-    // save personalization
-    if (_.isEmpty(personalizationTrait)) {
-      const personalizationData = { userConsent: answer };
-      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-    } else {
-      const trait = personalizationTrait.traits.data[0];
-      if (trait.userConsent !== answer) {
-        const personalizationData = { userConsent: answer };
-        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-      }
-    }
-  }
-
-  /**
-   * Update select value
-   * @param option selected value
-   */
-  onUpdateSelect(option) {
-    if (option) {
-      const { newLanguage: oldLanguage } = this.state;
-      const newLanguage = { ...oldLanguage };
-      newLanguage[option.key] = option.name;
-      this.setState({ newLanguage, isSubmit: false });
-    }
-  }
-
-  onCancelEditStatus() {
-    const { isEdit } = this.state;
-    if (isEdit) {
-      this.setState({
-        isEdit: false,
-        indexNo: null,
-        isSubmit: false,
-        formInvalid: false,
-        languageNameInvalid: false,
-        languageNameInvalidMsg: '',
-        newLanguage: {
-          language: '',
-          spokenLevel: '',
-          writtenLevel: '',
-        },
-      });
-    }
-  }
-
-  /**
-   * Get language trait
-   * @param userTraits the all user traits
-   */
-  loadLanguageTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'languages');
-    const languages = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, languages);
-  }
-
-  /**
-   * Get personalization trait
-   * @param userTraits the all user traits
-   */
-  loadPersonalizationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'personalization');
-    const personalization = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, personalization);
-  };
-
-  updatePredicate() {
-    const { screenSM } = this.state;
-    this.setState({ isMobileView: window.innerWidth <= screenSM });
-  }
-
-  render() {
-    const {
-      settingsUI,
-    } = this.props;
-    const {
-      languageTrait,
-      isMobileView,
-      isEdit,
-      formInvalid,
-      showConfirmation,
-      indexNo,
-      languageNameInvalid,
-      languageNameInvalidMsg,
-      isSubmit,
-    } = this.state;
-    const tabs = settingsUI.TABS.PROFILE;
-    const currentTab = settingsUI.currentProfileTab;
-    const containerStyle = currentTab === tabs.LANGUAGE ? '' : 'hide';
-    const languageItems = languageTrait.traits
-      ? languageTrait.traits.data.slice() : [];
-    const { newLanguage } = this.state;
-
-    return (
-      <div styleName={containerStyle}>
-        {
-          this.shouldRenderConsent() && this.renderConsent()
-        }
-        {
-          showConfirmation && (
-            <ConfirmationModal
-              onConfirm={() => this.showConsent(this.onDeleteLanguage.bind(this, indexNo))}
-              onCancel={() => this.setState({
-                showConfirmation: false,
-                indexNo: null,
-              })}
-              name={languageTrait.traits.data[indexNo].language}
-            />
-          )
-        }
-        <div styleName="language-container">
-          <h1>
-            Language
-          </h1>
-          <div styleName={`sub-title ${languageItems.length > 0 ? '' : 'hidden'}`}>
-            Your language
-          </div>
-          {
-            !isMobileView && languageItems.length > 0
-            && (
-              <LanguageList
-                languageList={{ items: languageItems }}
-                onDeleteItem={this.onHandleDeleteLanguage}
-                onEditItem={this.onEditLanguage}
-              />
-            )
-          }
-          <div styleName={`sub-title ${languageItems.length > 0 ? 'second' : 'first'}`}>
-            {
-              isEdit ? (<React.Fragment>Edit language</React.Fragment>)
-                : (<React.Fragment>Add a new language</React.Fragment>)
-            }
-          </div>
-          <div styleName="form-container-default">
-            <form name="device-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="language">
-                    Language
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <span styleName="text-required">* Required</span>
-                  <Select
-                    name="language"
-                    options={dropdowns.language}
-                    onChange={this.onUpdateSelect}
-                    value={newLanguage.language}
-                    placeholder="Language"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={false}
-                  />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage
-                        invalid={languageNameInvalid}
-                        addMargin
-                        message={languageNameInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1-no-padding">
-                  <label htmlFor="spokenLevel">
-                    Spoken Level
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <Select
-                    name="spokenLevel"
-                    options={dropdowns.spokenLevel}
-                    onChange={(option) => {
-                      if (option) {
-                        this.onUpdateSelect(option);
-                      } else {
-                        this.onUpdateSelect({ key: 'spokenLevel', name: '' });
-                      }
-                    }}
-                    value={newLanguage.spokenLevel}
-                    placeholder="Spoken level"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={true}
-                  />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1-no-padding">
-                  <label htmlFor="writtenLevel">
-                    Written Level
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <Select
-                    name="writtenLevel"
-                    options={dropdowns.writtenLevel}
-                    onChange={(option) => {
-                      if (option) {
-                        this.onUpdateSelect(option);
-                      } else {
-                        this.onUpdateSelect({ key: 'writtenLevel', name: '' });
-                      }
-                    }}
-                    value={newLanguage.writtenLevel}
-                    placeholder="Written level"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={true}
-                  />
-                </div>
-              </div>
-            </form>
-            <div styleName="button-container">
-              <div styleName="button-save">
-                <PrimaryButton
-                  styleName="complete"
-                  onClick={this.onHandleAddLanguage}
-                >
-                  {
-                    isEdit ? (<React.Fragment>Edit language to your list</React.Fragment>)
-                      : (<React.Fragment>Add language to your list</React.Fragment>)
-                  }
-                </PrimaryButton>
-              </div>
-              {
-                isEdit && (
-                  <div styleName="button-cancel">
-                    <PrimaryButton
-                      styleName="complete"
-                      onClick={this.onCancelEditStatus}
-                    >
-                      Cancel
-                    </PrimaryButton>
-                  </div>
-                )
-              }
-            </div>
-
-          </div>
-          <div styleName="form-container-mobile">
-            <form name="language-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <p>
-                  {
-                    isEdit ? (<React.Fragment>Edit Language</React.Fragment>)
-                      : (<React.Fragment>Add Language</React.Fragment>)
-                  }
-                </p>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="language">
-                    Language
-                    <span styleName="text-required">* Required</span>
-                    <input type="hidden" />
-                  </label>
-                  <Select
-                    name="language"
-                    options={dropdowns.language}
-                    onChange={this.onUpdateSelect}
-                    value={newLanguage.language}
-                    placeholder="Language"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={false}
-                  />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage
-                        invalid={languageNameInvalid}
-                        addMargin
-                        message={languageNameInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-                <div styleName="field col-2">
-                  <label htmlFor="spokenLevel">
-                    Spoken Level
-                    <input type="hidden" />
-                  </label>
-                  <Select
-                    name="spokenLevel"
-                    options={dropdowns.spokenLevel}
-                    onChange={this.onUpdateSelect}
-                    value={newLanguage.spokenLevel}
-                    placeholder="Spoken level"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={true}
-                  />
-                </div>
-                <div styleName="field col-2">
-                  <label htmlFor="writtenLevel">
-                    Written Level
-                    <input type="hidden" />
-                  </label>
-                  <Select
-                    name="writtenLevel"
-                    options={dropdowns.writtenLevel}
-                    onChange={this.onUpdateSelect}
-                    value={newLanguage.writtenLevel}
-                    placeholder="Written level"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={true}
-                  />
-                </div>
-              </div>
-            </form>
-            <div styleName="button-container">
-              <div styleName="button-save">
-                <PrimaryButton
-                  styleName="complete"
-                  onClick={this.onHandleAddLanguage}
-                >
-                  {
-                    isEdit ? (<React.Fragment>Edit Language</React.Fragment>)
-                      : (<React.Fragment>Add language</React.Fragment>)
-                  }
-                </PrimaryButton>
-              </div>
-              {
-                isEdit && (
-                  <div styleName="button-cancel">
-                    <PrimaryButton
-                      styleName="complete"
-                      onClick={this.onCancelEditStatus}
-                    >
-                      Cancel
-                    </PrimaryButton>
-                  </div>
-                )
-              }
-            </div>
-          </div>
-          {
-            isMobileView && languageItems.length > 0
-            && (
-              <LanguageList
-                languageList={{ items: languageItems }}
-                onDeleteItem={this.onHandleDeleteLanguage}
-                onEditItem={this.onEditLanguage}
-              />
-            )
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-Language.propTypes = {
-  tokenV3: PT.string.isRequired,
-  handle: PT.string.isRequired,
-  userTraits: PT.array.isRequired,
-  addUserTrait: PT.func.isRequired,
-  updateUserTrait: PT.func.isRequired,
-  deleteUserTrait: PT.func.isRequired,
-  settingsUI: PT.shape().isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Language/styles.scss b/src/shared/components/Settings/Profile/Language/styles.scss
deleted file mode 100644
index fb6805df8a..0000000000
--- a/src/shared/components/Settings/Profile/Language/styles.scss
+++ /dev/null
@@ -1,268 +0,0 @@
-@import "../../style";
-
-.hide {
-  display: none;
-}
-
-.language-container {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-
-  @include upto-sm {
-    padding-bottom: 0;
-  }
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
-
-    &.second {
-      margin-top: 50px;
-      margin-bottom: 30px;
-    }
-
-    &.first {
-      margin-bottom: 30px;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-}
-
-.form-container-default {
-  @include form-container-default;
-
-  input {
-    @include roboto-regular;
-
-    height: 40px;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-    margin-bottom: 0;
-  }
-
-  .text-required {
-    @include roboto-medium;
-
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-bottom: 5px;
-    text-align: right;
-  }
-}
-
-.form-container-mobile {
-  display: none;
-
-  @include upto-sm {
-    border: 0;
-    border-radius: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 20px 20px 20px;
-    background-color: $tc-gray-neutral-light;
-  }
-
-  p {
-    @include roboto-regular;
-
-    font-size: 20px;
-    line-height: 30px;
-    font-weight: 400;
-    color: $tc-black;
-
-    @include upto-sm {
-      margin-bottom: 20px;
-    }
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    align-content: space-between;
-    width: 100%;
-
-    @include upto-sm {
-      display: block;
-      margin-bottom: 0;
-    }
-
-    .field {
-      display: flex;
-      flex-direction: column;
-      align-content: space-between;
-
-      @include upto-sm {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-      }
-
-      label {
-        @include roboto-medium;
-
-        display: block;
-        font-size: 12px;
-        line-height: 15px;
-        font-weight: 500;
-        color: $tc-gray-80;
-        margin-bottom: 5px;
-
-        .text-required {
-          font-size: 10px;
-          color: $tc-red-110;
-          margin-left: 5px;
-        }
-      }
-
-      &.col-1,
-      &.col-1-no-padding {
-        width: 48%;
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-
-      &.col-2 {
-        width: 26%;
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-    }
-
-    div.field:last-child {
-      margin-right: 0;
-    }
-  }
-
-  input {
-    @include roboto-regular;
-
-    height: 36px;
-    margin: 0;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-
-    @include upto-sm {
-      margin-top: 5px;
-    }
-  }
-}
-
-.button-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .button-save,
-  .button-cancel {
-    align-self: center;
-
-    @include upto-sm {
-      margin-top: 10px;
-    }
-
-    button,
-    a {
-      @include roboto-medium;
-
-      height: 40px;
-      font-size: 15px;
-      font-weight: 500;
-      margin: 0;
-      padding: 0;
-      width: 250px;
-
-      @include upto-sm {
-        width: 156px;
-      }
-    }
-
-    .complete {
-      color: $tc-white;
-    }
-  }
-
-  .button-cancel {
-    margin-left: 10px;
-  }
-}
-
-/*
- * React Select component styling
- */
-.language-container .form-container .row .field :global .Select,
-.language-container .form-container .row .field :global .Select-value span,
-.language-container .form-container .row .field :global .Select-menu-outer,
-.language-container .form-container .row .field :global .Select-placeholder,
-.language-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    margin-top: 5px;
-  }
-}
-
-.language-container div[class="Select-control"] {
-  height: 40px;
-
-  div[class="Select-input"] {
-    height: 38px;
-  }
-
-  div[class="Select-placeholder"] {
-    height: 38px;
-    line-height: 40px !important;
-
-    @include upto-sm {
-      line-height: 38px !important;
-    }
-  }
-
-  div[class="Select-value"] {
-    line-height: 40px !important;
-  }
-}
-
-.language-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
-}
diff --git a/src/shared/components/Settings/Profile/Organization/List/Item/index.jsx b/src/shared/components/Settings/Profile/Organization/List/Item/index.jsx
deleted file mode 100644
index 7c0302f0d5..0000000000
--- a/src/shared/components/Settings/Profile/Organization/List/Item/index.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * render organization Item
- */
-import React from 'react';
-import PT from 'prop-types';
-import ReactSVG from 'react-svg';
-import moment from 'moment';
-import { isomorphy } from 'topcoder-react-utils';
-
-import './styles.scss';
-
-let assets;
-if (isomorphy.isClientSide()) {
-  assets = require.context('assets/images/profile', false, /svg/);
-}
-
-export default function Item(props) {
-  const {
-    organization,
-    index,
-    onDeleteItem,
-  } = props;
-
-  return (
-    <div styleName="container">
-      <div styleName="organization-info">
-        <div styleName="organization-icon">
-          <ReactSVG path={assets('./ico-organization.svg')} />
-        </div>
-        <div styleName="organization-parameters">
-          <div styleName="parameter-first-line">
-            { organization.name }
-          </div>
-          <div styleName="parameter-second-line">
-            { `${moment(organization.timePeriodFrom).format('YYYY')} - ${moment(organization.timePeriodTo).format('YYYY')} | ${organization.sector} | ${organization.city}` }
-          </div>
-          <div styleName="parameter-second-line-mobile">
-            <p>
-              { `${moment(organization.timePeriodFrom).format('YYYY')} - ${moment(organization.timePeriodTo).format('YYYY')}` }
-            </p>
-            <p>
-              { `${organization.sector} | ${organization.city}` }
-            </p>
-          </div>
-        </div>
-      </div>
-      <a
-        styleName="delete"
-        onKeyPress={() => onDeleteItem(index)}
-        tabIndex={0}
-        role="button"
-        onClick={() => onDeleteItem(index)}
-      >
-        <img src={assets('./ico-trash.svg')} alt="delete-icon" />
-        <p>
-          Delete
-        </p>
-      </a>
-    </div>
-  );
-}
-
-Item.propTypes = {
-  organization: PT.shape().isRequired,
-  index: PT.number.isRequired,
-  onDeleteItem: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss b/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss
deleted file mode 100644
index 620ab220fa..0000000000
--- a/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@import "../../../../style";
-
-.container {
-  display: flex;
-  flex-direction: row;
-  justify-items: center;
-  justify-content: space-between;
-  height: 100%;
-  width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
-  border-bottom: none;
-  background-color: $tc-white;
-}
-
-.organization-info {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.organization-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
-}
-
-.organization-parameters {
-  @include roboto-medium;
-
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  justify-content: left;
-  font-size: 15px;
-  line-height: 20px;
-  text-transform: capitalize;
-  margin-right: 20px;
-  word-break: break-all;
-}
-
-.parameter-first-line {
-  font-weight: 500;
-  color: $tc-black;
-  margin-bottom: 10px;
-
-  @include upto-sm {
-    margin-bottom: 0;
-  }
-}
-
-.parameter-second-line {
-  color: $tc-gray-50;
-  font-weight: 400;
-  word-break: break-all;
-
-  @include upto-sm {
-    display: none;
-  }
-}
-
-.parameter-second-line-mobile {
-  display: none;
-
-  @include upto-sm {
-    display: flex;
-    flex-direction: column;
-    color: $tc-gray-50;
-    font-weight: 400;
-
-    p {
-      word-break: break-all;
-    }
-  }
-}
-
-.delete {
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  justify-content: center;
-  cursor: pointer;
-  outline-style: none;
-  margin-left: 10px;
-
-  img {
-    margin-bottom: 10px;
-  }
-
-  p {
-    @include roboto-regular;
-
-    font-size: 11px;
-    line-height: 15px;
-    font-weight: 400;
-    color: $tc-gray-50;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-}
diff --git a/src/shared/components/Settings/Profile/Organization/List/index.jsx b/src/shared/components/Settings/Profile/Organization/List/index.jsx
deleted file mode 100644
index fb313c2d29..0000000000
--- a/src/shared/components/Settings/Profile/Organization/List/index.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * render Organization list
- */
-import React from 'react';
-import PT from 'prop-types';
-import Item from './Item';
-
-import './styles.scss';
-
-export default function OrganizationList(props) {
-  const {
-    organizationList,
-    onDeleteItem,
-  } = props;
-
-  return (
-    <div styleName={`container ${organizationList.items.length > 0 ? 'active' : ''}`}>
-      <ul>
-        {
-          organizationList.items.map((organization, index) => (
-            <li key={`${organization.name}${index + 1}`}>
-              <Item organization={organization} index={index} onDeleteItem={onDeleteItem} />
-            </li>
-          ))
-        }
-      </ul>
-    </div>
-  );
-}
-
-OrganizationList.propTypes = {
-  organizationList: PT.shape().isRequired,
-  onDeleteItem: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Organization/index.jsx b/src/shared/components/Settings/Profile/Organization/index.jsx
deleted file mode 100644
index 209b004a60..0000000000
--- a/src/shared/components/Settings/Profile/Organization/index.jsx
+++ /dev/null
@@ -1,487 +0,0 @@
-/**
- * Child component of Settings/Profile/ renders the
- * 'Organization' page.
- */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable no-nested-ternary */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable no-undef */
-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 OrganizationList from './List';
-
-import './styles.scss';
-
-export default class Organization extends ConsentComponent {
-  constructor(props) {
-    super(props);
-    this.onHandleDeleteOrganization = this.onHandleDeleteOrganization.bind(this);
-    this.onDeleteOrganization = this.onDeleteOrganization.bind(this);
-    this.loadOrganizationTrait = this.loadOrganizationTrait.bind(this);
-    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
-    this.onUpdateInput = this.onUpdateInput.bind(this);
-    this.onHandleAddOrganization = this.onHandleAddOrganization.bind(this);
-    this.onAddOrganization = this.onAddOrganization.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
-
-    const { userTraits } = props;
-    this.state = {
-      formInvalid: false,
-      errorMessage: '',
-      organizationTrait: this.loadOrganizationTrait(userTraits),
-      personalizationTrait: this.loadPersonalizationTrait(userTraits),
-      newOrganization: {
-        name: '',
-        sector: '',
-        city: '',
-        timePeriodFrom: '',
-        timePeriodTo: '',
-      },
-      isMobileView: false,
-      screenSM: 767,
-    };
-  }
-
-  componentDidMount() {
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const organizationTrait = this.loadOrganizationTrait(nextProps.userTraits);
-    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
-    this.setState({
-      organizationTrait,
-      personalizationTrait,
-      formInvalid: false,
-      errorMessage: '',
-      newOrganization: {
-        name: '',
-        sector: '',
-        city: '',
-        timePeriodFrom: '',
-        timePeriodTo: '',
-      },
-    });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updatePredicate);
-  }
-
-  /**
-   * Show User Consent Modal
-   * @param e event
-   */
-  onHandleAddOrganization(e) {
-    e.preventDefault();
-    const { newOrganization } = this.state;
-    if (this.onCheckFormValue(newOrganization)) {
-      return;
-    }
-    this.showConsent(this.onAddOrganization.bind(this));
-  }
-
-  /**
-   * Check form fields value,
-   * Invalid value, can not save
-   * @param newOrganization object
-   */
-  onCheckFormValue(newOrganization) {
-    let invalid = false;
-    let dateInvalid = false;
-    let errorMessage = '';
-    let dateCount = 0;
-    let dateError = '';
-    let haveFromDate = false;
-    let haveToDate = false;
-
-    if (!_.trim(newOrganization.name).length) {
-      errorMessage += 'Organization Name, ';
-      invalid = true;
-    }
-
-    if (!_.trim(newOrganization.sector).length) {
-      errorMessage += 'Sector, ';
-      invalid = true;
-    }
-
-    if (!_.trim(newOrganization.city).length) {
-      errorMessage += 'City, ';
-      invalid = true;
-    }
-
-    if (errorMessage.length > 0) {
-      errorMessage += ' cannot be empty';
-    }
-
-    const fromDate = new Date(newOrganization.timePeriodFrom).getTime();
-    const toDate = new Date(newOrganization.timePeriodTo).getTime();
-    const nowDate = new Date(moment().format('YYYY-MM-DD')).getTime();
-
-    if (_.trim(newOrganization.timePeriodFrom).length > 0) {
-      haveFromDate = true;
-    }
-
-    if (_.trim(newOrganization.timePeriodTo).length > 0) {
-      haveToDate = true;
-    }
-
-    if (fromDate >= nowDate) {
-      dateError += 'From Date value should be smaller than current date. ';
-      dateInvalid = true;
-    }
-
-    if (fromDate >= toDate) {
-      dateError += 'From Date value should be smaller than To Date value. ';
-      dateInvalid = true;
-    }
-
-    if (!haveFromDate || !haveToDate) {
-      if (!_.trim(newOrganization.timePeriodFrom).length) {
-        dateError += 'From Date, ';
-        dateInvalid = true;
-        dateCount += 1;
-      }
-
-      if (!_.trim(newOrganization.timePeriodTo).length) {
-        dateError += 'To Date, ';
-        dateInvalid = true;
-        dateCount += 1;
-      }
-      if (dateError.length > 0) {
-        dateError = `The ${dateError} ${dateCount > 1 ? 'are' : 'is'} incomplete or ${dateCount > 1 ? 'have' : 'has'} an invalid date.`;
-      }
-    }
-
-    if (errorMessage.length > 0) {
-      errorMessage = `${errorMessage}. ${dateError}`;
-    } else if (dateError.length > 0) {
-      errorMessage = dateError;
-      invalid = dateInvalid;
-    }
-
-    this.setState({ errorMessage, formInvalid: invalid });
-    return invalid;
-  }
-
-  onHandleDeleteOrganization(indexNo) {
-    this.showConsent(this.onDeleteOrganization.bind(this, indexNo));
-  }
-
-  /**
-   * Delete organization by index
-   * @param indexNo the organization index no
-   */
-  onDeleteOrganization(indexNo) {
-    const { organizationTrait } = this.state;
-    const newOrganizationTrait = { ...organizationTrait };
-    newOrganizationTrait.traits.data.splice(indexNo, 1);
-    this.setState({
-      organizationTrait: newOrganizationTrait,
-    });
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      deleteUserTrait,
-    } = this.props;
-
-    if (newOrganizationTrait.traits.data.length > 0) {
-      updateUserTrait(handle, 'organization', newOrganizationTrait.traits.data, tokenV3);
-    } else {
-      deleteUserTrait(handle, 'organization', tokenV3);
-    }
-  }
-
-  /**
-   * Add new organization
-   * @param e from submit event
-   * @param answer user consent answer value
-   */
-  onAddOrganization(answer) {
-    const { newOrganization, organizationTrait, personalizationTrait } = this.state;
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      addUserTrait,
-    } = this.props;
-
-    newOrganization.timePeriodFrom = new Date(newOrganization.timePeriodFrom).getTime();
-    newOrganization.timePeriodTo = new Date(newOrganization.timePeriodTo).getTime();
-
-    // save organiazation
-    if (organizationTrait.traits && organizationTrait.traits.data.length > 0) {
-      const newOrganizationTrait = { ...organizationTrait };
-      newOrganizationTrait.traits.data.push(newOrganization);
-      this.setState({ organizationTrait: newOrganizationTrait });
-      updateUserTrait(handle, 'organization', newOrganizationTrait.traits.data, tokenV3);
-    } else {
-      const newOrganizations = [];
-      newOrganizations.push(newOrganization);
-      const traits = {
-        data: newOrganizations,
-      };
-      this.setState({ organizationTrait: { traits } });
-      addUserTrait(handle, 'organization', newOrganizations, tokenV3);
-    }
-    const empty = {
-      name: '',
-      sector: '',
-      city: '',
-      timePeriodFrom: '',
-      timePeriodTo: '',
-    };
-    this.setState({ newOrganization: empty });
-
-    // save personalization
-    if (_.isEmpty(personalizationTrait)) {
-      const personalizationData = { userConsent: answer };
-      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-    } else {
-      const trait = personalizationTrait.traits.data[0];
-      if (trait.userConsent !== answer) {
-        const personalizationData = { userConsent: answer };
-        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-      }
-    }
-  }
-
-  /**
-   * Update input value
-   * @param e event
-   */
-  onUpdateInput(e) {
-    const { newOrganization: oldOrganization } = this.state;
-    const newOrganization = { ...oldOrganization };
-    newOrganization[e.target.name] = e.target.value;
-    this.setState({ newOrganization });
-  }
-
-  /**
-   * Get organization trait
-   * @param userTraits the all user traits
-   */
-  loadOrganizationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'organization');
-    const organizations = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, organizations);
-  }
-
-  /**
-   * Get personalization trait
-   * @param userTraits the all user traits
-   */
-  loadPersonalizationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'personalization');
-    const personalization = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, personalization);
-  }
-
-  updatePredicate() {
-    const { screenSM } = this.state;
-    this.setState({ isMobileView: window.innerWidth <= screenSM });
-  }
-
-  render() {
-    const {
-      settingsUI,
-    } = this.props;
-    const {
-      organizationTrait,
-      isMobileView,
-    } = this.state;
-    const tabs = settingsUI.TABS.PROFILE;
-    const currentTab = settingsUI.currentProfileTab;
-    const containerStyle = currentTab === tabs.ORGANIZATION ? '' : 'hide';
-    const organizationItems = organizationTrait.traits
-      ? organizationTrait.traits.data.slice() : [];
-    const { newOrganization, formInvalid, errorMessage } = this.state;
-
-    return (
-      <div styleName={containerStyle}>
-        {
-          this.shouldRenderConsent() && this.renderConsent()
-        }
-        <div styleName="organization-container">
-          <div styleName={`error-message ${formInvalid ? 'active' : ''}`}>
-            { errorMessage }
-          </div>
-          <h1>
-            Organization
-          </h1>
-          <div styleName={`sub-title ${organizationItems.length > 0 ? '' : 'hidden'}`}>
-            Your organizations
-          </div>
-          {
-            !isMobileView && organizationItems.length > 0
-            && (
-              <OrganizationList
-                organizationList={{ items: organizationItems }}
-                onDeleteItem={this.onDeleteOrganization}
-              />
-            )
-          }
-          <div styleName={`sub-title ${organizationItems.length > 0 ? 'second' : 'first'}`}>
-            Add a new organization
-          </div>
-          <div styleName="form-container-default">
-            <form name="device-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="name">
-                    Organization Name
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <span styleName="text-required">* Required</span>
-                  <input id="name" name="name" type="text" placeholder="Organization" onChange={this.onUpdateInput} value={newOrganization.name} maxLength="128" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="sector">
-                    Sector
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <span styleName="text-required">* Required</span>
-                  <input id="sector" name="sector" type="text" placeholder="Sector" onChange={this.onUpdateInput} value={newOrganization.sector} maxLength="128" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="city">
-                    City
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <span styleName="text-required">* Required</span>
-                  <input id="city" name="city" type="text" placeholder="City" onChange={this.onUpdateInput} value={newOrganization.city} maxLength="64" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="timePeriodFrom">
-                    From
-                    <input type="hidden" />
-                  </label>
-                </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={newOrganization.timePeriodFrom} required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="timePeriodTo">
-                    To
-                    <input type="hidden" />
-                  </label>
-                </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={newOrganization.timePeriodTo} required />
-                </div>
-              </div>
-            </form>
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddOrganization}
-              >
-                Add organizations to your list
-              </PrimaryButton>
-            </div>
-          </div>
-          <div styleName="form-container-mobile">
-            <form name="organization-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <p>
-                  Add Organization
-                </p>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="name">
-                    Organization Name
-                    <input type="hidden" />
-                  </label>
-                  <input id="name" name="name" type="text" placeholder="Organization" onChange={this.onUpdateInput} value={newOrganization.name} maxLength="128" required />
-                </div>
-                <div styleName="field col-2">
-                  <label htmlFor="sector">
-                    Sector
-                    <input type="hidden" />
-                  </label>
-                  <input id="sector" name="sector" type="text" placeholder="Sector" onChange={this.onUpdateInput} value={newOrganization.sector} maxLength="128" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field city">
-                  <label htmlFor="city">
-                    City
-                    <input type="hidden" />
-                  </label>
-                  <input id="city" name="city" type="text" placeholder="City" onChange={this.onUpdateInput} value={newOrganization.city} maxLength="64" required />
-                </div>
-                <div styleName="field date">
-                  <label htmlFor="timePeriodFrom">
-                    From
-                    <input type="hidden" />
-                  </label>
-                  <input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newOrganization.timePeriodFrom} required />
-                </div>
-                <div styleName="field date">
-                  <label htmlFor="timePeriodTo">
-                    To
-                    <input type="hidden" />
-                  </label>
-                  <input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newOrganization.timePeriodTo} required />
-                </div>
-              </div>
-            </form>
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddOrganization}
-              >
-                Add Organization
-              </PrimaryButton>
-            </div>
-          </div>
-          {
-            isMobileView && organizationItems.length > 0
-            && (
-              <OrganizationList
-                organizationList={{ items: organizationItems }}
-                onDeleteItem={this.onHandleDeleteOrganization}
-              />
-            )
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-Organization.propTypes = {
-  tokenV3: PT.string.isRequired,
-  handle: PT.string.isRequired,
-  userTraits: PT.array.isRequired,
-  addUserTrait: PT.func.isRequired,
-  updateUserTrait: PT.func.isRequired,
-  deleteUserTrait: PT.func.isRequired,
-  settingsUI: PT.shape().isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Organization/styles.scss b/src/shared/components/Settings/Profile/Organization/styles.scss
deleted file mode 100644
index dac07d0c69..0000000000
--- a/src/shared/components/Settings/Profile/Organization/styles.scss
+++ /dev/null
@@ -1,279 +0,0 @@
-@import "../../style";
-
-.hide {
-  display: none;
-}
-
-.organization-container {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
-
-    &.second {
-      margin-top: 50px;
-      margin-bottom: 30px;
-    }
-
-    &.first {
-      margin-bottom: 30px;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-}
-
-.error-message {
-  display: none;
-
-  &.active {
-    @include roboto-medium;
-
-    display: block;
-    border-radius: 5px;
-    background-color: $tc-red-10;
-    color: $tc-red-110;
-    font-size: 15px;
-    padding: 15px;
-    margin-bottom: 15px;
-  }
-}
-
-.form-container-default {
-  @include form-container-default;
-
-  input {
-    @include roboto-regular;
-
-    height: 40px;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-    margin-bottom: 0;
-  }
-
-  .text-required {
-    @include roboto-medium;
-
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-bottom: 5px;
-    text-align: right;
-  }
-}
-
-.form-container-mobile {
-  display: none;
-
-  @include upto-sm {
-    border: 0;
-    border-radius: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 20px 20px 20px;
-    background-color: $tc-gray-neutral-light;
-  }
-
-  p {
-    @include roboto-regular;
-
-    font-size: 20px;
-    line-height: 30px;
-    font-weight: 400;
-    color: $tc-black;
-
-    @include upto-sm {
-      margin-bottom: 20px;
-    }
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    align-content: space-between;
-
-    @include upto-sm {
-      width: 100%;
-      display: block;
-      margin-bottom: 0;
-    }
-
-    div:last-child {
-      margin-right: 0;
-    }
-
-    .field {
-      display: flex;
-      flex-direction: column;
-      margin-right: 10px;
-
-      @include upto-sm {
-        display: block;
-        padding-bottom: 10px;
-      }
-
-      label {
-        @include roboto-medium;
-
-        font-size: 12px;
-        line-height: 15px;
-        font-weight: 500;
-        color: $tc-gray-80;
-        margin-bottom: 5px;
-      }
-
-      .date-input {
-        display: flex;
-        align-items: center;
-      }
-
-      &.col-1 {
-        width: 60%;
-
-        @include xs-to-lg {
-          width: 73%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-
-      &.col-2 {
-        width: 40%;
-
-        @include xs-to-lg {
-          width: 27%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-
-      &.city {
-        width: 131px;
-
-        @include xs-to-lg {
-          width: 44%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-
-      &.date {
-        width: 160px;
-
-        @include xs-to-lg {
-          width: 27%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  input {
-    @include roboto-regular;
-
-    height: 36px;
-    margin: 0;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-
-    @include upto-sm {
-      margin-top: 5px;
-    }
-  }
-
-  div.field:last-child {
-    margin-right: 0;
-  }
-}
-
-.button-save {
-  align-self: center;
-
-  @include upto-sm {
-    margin-top: 10px;
-  }
-
-  .complete {
-    color: $tc-white;
-
-    button {
-      @include roboto-medium;
-
-      height: 40px;
-      font-size: 15px;
-      font-weight: 500;
-      margin: 0;
-      padding: 0 0;
-      width: 250px;
-
-      @include upto-sm {
-        width: 156px;
-      }
-    }
-  }
-}
-
-/*
- * React Select component styling
- */
-.organization-container .form-container .row .field :global .Select,
-.organization-container .form-container .row .field :global .Select-value span,
-.organization-container .form-container .row .field :global .Select-menu-outer,
-.organization-container .form-container .row .field :global .Select-placeholder,
-.organization-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    margin-top: 5px;
-  }
-}
-
-.organization-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
-}
diff --git a/src/shared/components/Settings/Profile/Skills/index.jsx b/src/shared/components/Settings/Profile/Skills/index.jsx
deleted file mode 100644
index d5fe137373..0000000000
--- a/src/shared/components/Settings/Profile/Skills/index.jsx
+++ /dev/null
@@ -1,683 +0,0 @@
-/**
- * Child component of Settings/Profile renders "Skills" section of profile setting page.
- */
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable prefer-destructuring */
-/* eslint-disable no-undef */
-import _ from 'lodash';
-import path from 'path';
-import React from 'react';
-import PT from 'prop-types';
-import ReactTouchEvents from 'react-touch-events';
-import requireContext from 'require-context';
-
-import Select from 'components/Select';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
-import ConsentComponent from 'components/Settings/ConsentComponent';
-import ErrorMessage from 'components/Settings/ErrorMessage';
-import DevFallbackIcon from 'assets/images/profile/skills/id-develop.svg';
-import DesignFallbackIcon from 'assets/images/profile/skills/id-design.svg';
-import DataFallbackIcon from 'assets/images/profile/skills/id-data.svg';
-import VerifiedBadgeIcon from 'assets/images/verified-skill-badge.svg';
-import { isomorphy } from 'topcoder-react-utils';
-import ConfirmationModal from '../../CofirmationModal';
-
-import './styles.scss';
-
-let assets;
-if (isomorphy.isClientSide()) {
-  // require.context is only available in webpack bundled client code
-  assets = require.context('assets/images/profile/skills', false, /svg/);
-} else {
-  assets = requireContext(path.dirname(require.resolve('assets/images/profile/skills/id-data.svg')), false, /svg/);
-}
-
-
-/**
- * Get image.
- * @param {String} imageFile The image file name
- * @returns {Element} React element
- */
-function getImage(imageFile) {
-  if (isomorphy.isClientSide()) {
-    return <img src={assets(`./${imageFile}`)} alt="Skill Icon" />;
-  }
-  const Image = assets(imageFile);
-  return <Image />;
-}
-
-/**
- * Check image exists.
- * @param {String} imageFile The image file name
- * @returns {Boolean} True if image exists; false otherwise
- */
-function imageExist(imageFile) {
-  if (!assets) {
-    return false;
-  }
-  return (isomorphy.isClientSide() && assets.keys().includes(`./${imageFile}`)) || assets.keys().includes(imageFile);
-}
-
-export default class Skills extends ConsentComponent {
-  constructor(props) {
-    super(props);
-    this.onHandleAddSkill = this.onHandleAddSkill.bind(this);
-    this.onHandleDeleteSkill = this.onHandleDeleteSkill.bind(this);
-    this.onAddSkill = this.onAddSkill.bind(this);
-    this.onUpdateSelect = this.onUpdateSelect.bind(this);
-    this.toggleSkill = this.toggleSkill.bind(this);
-    this.setPage = this.setPage.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
-    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
-    this.handleSwipe = this.handleSwipe.bind(this);
-    this.lastValidInputPosition = 0;
-    this.handleScroll = this.handleScroll.bind(this);
-    this.handleInputRef = this.handleInputRef.bind(this);
-
-    const { userTraits } = props;
-    this.state = {
-      formInvalid: false,
-      personalizationTrait: this.loadPersonalizationTrait(userTraits),
-      userSkills: [],
-      selectedSkill: {},
-      newSkill: {
-        design: [],
-        development: [],
-        dataScience: [],
-      },
-      indexList: [],
-      currentIndex: 0,
-      pageSize: 6,
-      totalPage: 0,
-      isMobileView: false,
-      screenSM: 767,
-      deleteSkill: null,
-      deleteSelector: null,
-      showConfirmation: false,
-      inputChanged: false,
-    };
-  }
-
-  componentWillMount() {
-    this.processUserSkills(this.props);
-  }
-
-  componentDidMount() {
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
-    if (this.isIos()) {
-      window.addEventListener('scroll', this.handleScroll);
-    }
-  }
-
-  componentDidUpdate() {
-    this.removeHover();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
-    this.setState({
-      personalizationTrait,
-      formInvalid: false,
-      userSkills: [],
-      selectedSkill: {},
-      newSkill: {
-        design: [],
-        development: [],
-        dataScience: [],
-      },
-      indexList: [],
-      totalPage: 0,
-    });
-
-    this.processUserSkills(nextProps);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updatePredicate);
-    if (this.isIos()) {
-      window.removeEventListener('scroll', this.handleScroll);
-    }
-  }
-
-  /**
-   * Show User Consent Modal
-   * @param e event
-   */
-  onHandleAddSkill(e) {
-    e.preventDefault();
-    this.setState({ inputChanged: true });
-    const { selectedSkill } = this.state;
-    if (!selectedSkill.name) {
-      this.setState({
-        formInvalid: true,
-      });
-      return;
-    }
-
-    this.setState({
-      formInvalid: false,
-    });
-    this.showConsent(this.onAddSkill.bind(this));
-  }
-
-  /**
-   * Update select value
-   * @param option selected value
-   */
-  onUpdateSelect(option) {
-    if (option) {
-      this.setState({
-        selectedSkill: option,
-        inputChanged: true,
-      });
-    }
-  }
-
-  /**
-   * Add new skill
-   * @param answer user consent answer value
-   */
-  onAddSkill(answer) {
-    const { newSkill, selectedSkill, personalizationTrait } = this.state;
-    const {
-      handle,
-      tokenV3,
-      addUserSkill,
-    } = this.props;
-
-    if (!selectedSkill.name) {
-      this.setState({
-        formInvalid: true,
-      });
-      return;
-    }
-
-    this.setState({
-      formInvalid: false,
-      inputChanged: false,
-    });
-
-    let category = '';
-    switch (selectedSkill.categories[0]) {
-      case 'develop':
-        category = 'development';
-        break;
-      case 'data_science':
-        category = 'dataScience';
-        break;
-      default:
-        category = 'design';
-        break;
-    }
-
-    const index = _.findIndex(newSkill[category], skill => (
-      skill.toLowerCase() === selectedSkill.name.toLowerCase()
-    ));
-
-    if (index > -1) {
-      return;
-    }
-
-    newSkill[category].push(selectedSkill.name);
-    addUserSkill(handle, selectedSkill, tokenV3);
-    // save personalization
-    if (_.isEmpty(personalizationTrait)) {
-      const personalizationData = { userConsent: answer };
-      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-    } else {
-      const trait = personalizationTrait.traits.data[0];
-      if (trait.userConsent !== answer) {
-        const personalizationData = { userConsent: answer };
-        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-      }
-    }
-  }
-
-  /**
-   * Update items to display
-   */
-  setPage(index) {
-    const { userSkills, pageSize } = this.state;
-    this.setState({
-      indexList: userSkills.slice(index * pageSize, index * pageSize + pageSize),
-      currentIndex: index,
-    });
-  }
-
-  /*
-    handle swipe in the skills section on mobile
-   */
-  handleSwipe(direction) {
-    const { isMobileView, totalPage, currentIndex } = this.state;
-
-    if (isMobileView) {
-      switch (direction) {
-        case 'right':
-          if (currentIndex > 0) {
-            this.setPage(currentIndex - 1);
-          }
-          break;
-
-        case 'left':
-          if (currentIndex < totalPage - 1) {
-            this.setPage(currentIndex + 1);
-          }
-          break;
-
-        default:
-          break;
-      }
-    }
-  }
-
-  onHandleDeleteSkill(skill, selector) {
-    this.setState({
-      showConfirmation: true,
-      deleteSkill: skill,
-      deleteSelector: selector,
-    });
-  }
-
-  /**
-   * Get personalization trait
-   * @param userTraits the all user traits
-   */
-  loadPersonalizationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'personalization');
-    const personalization = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, personalization);
-  }
-
-  /**
-   * Process user skills
-   */
-  processUserSkills = (props) => {
-    const { lookupData, skills } = props;
-    const { pageSize, currentIndex } = this.state;
-
-    // All lookup skills
-    const lookupSkills = lookupData.skillTags || [];
-
-    // Construct user skills
-    const filterUserSkills = [];
-
-    const arraySkill = _.map(skills, (skill, tagId) => ({ tagId: Number(tagId), ...skill }));
-    const design = [];
-    const development = [];
-    const dataScience = [];
-    if (arraySkill.length > 0) {
-      for (let i = 0; i < arraySkill.length; i += 1) {
-        const result = _.filter(lookupSkills, skill => (
-          skill.id === arraySkill[i].tagId
-        ));
-        if (result && result.length > 0) {
-          result[0].sources = arraySkill[i].sources;
-          filterUserSkills.push(result[0]);
-          if (_.some(result[0].categories, category => category.toLowerCase() === 'design')) {
-            design.push(result[0].name);
-          }
-          if (_.some(result[0].categories, category => category.toLowerCase() === 'develop')) {
-            development.push(result[0].name);
-          }
-          if (_.some(result[0].categories, category => category.toLowerCase() === 'data_science')) {
-            dataScience.push(result[0].name);
-          }
-        }
-      }
-
-      const { newSkill } = this.state;
-      newSkill.design = design.length > 0 ? design.slice() : [];
-      newSkill.development = development.length > 0 ? development.slice() : [];
-      newSkill.dataScience = dataScience.length > 0 ? dataScience.slice() : [];
-      const totalPage = Math.ceil(filterUserSkills.length / pageSize);
-      this.setState({ newSkill, userSkills: filterUserSkills, totalPage });
-      if (currentIndex < totalPage) {
-        this.setState({
-          indexList:
-            filterUserSkills.slice(currentIndex * pageSize, currentIndex * pageSize + pageSize),
-        });
-      } else {
-        this.setState({
-          indexList: filterUserSkills.slice(0, pageSize),
-          currentIndex: 0,
-        });
-      }
-    }
-  }
-
-  isIos = () => (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream);
-
-
-  removeHover = () => {
-    setTimeout(() => {
-      const btn = document.querySelector('a:hover');
-      if (btn && this.selectedElement !== btn) {
-        const par = btn.parentNode;
-        const next = btn.nextSibling;
-        par.removeChild(btn);
-        setTimeout(() => { par.insertBefore(btn, next); }, 0);
-      }
-      if (!btn) {
-        this.selectedElement = null;
-      }
-    }, 100);
-  }
-
-  /**
-   * Toggle Skill to delete selected skill
-   */
-  toggleSkill = (e, skill, selector) => {
-    const skillElement = document.querySelector(selector);
-    if (this.selectedElement !== skillElement && this.isIos()) {
-      this.selectedElement = skillElement;
-      return;
-    }
-    this.selectedElement = skillElement;
-
-    e.preventDefault();
-    const { newSkill } = this.state;
-    const {
-      handle,
-      tokenV3,
-      deleteUserSkill,
-    } = this.props;
-    let category = '';
-    switch (skill.categories[0]) {
-      case 'develop':
-        category = 'development';
-        break;
-      case 'data_science':
-        category = 'dataScience';
-        break;
-      default:
-        category = 'design';
-        break;
-    }
-    const result = _.remove(newSkill[category], item => (
-      item.toLowerCase() !== skill.name.toLowerCase()
-    ));
-    newSkill[category] = result.length > 0 ? result.slice() : [];
-    deleteUserSkill(handle, skill, tokenV3);
-    this.setState({
-      deleteSkill: null,
-      deleteSelector: null,
-      showConfirmation: false,
-      inputChanged: false,
-    });
-  };
-
-  updatePredicate() {
-    const { screenSM } = this.state;
-    this.setState({ isMobileView: window.innerWidth <= screenSM });
-  }
-
-  handleScroll() {
-    if (this.lastValidInputPosition === 0) {
-      this.lastValidInputPosition = window.scrollY;
-    }
-  }
-
-  handleInputRef(ref) {
-    if (!this.isIos()) {
-      return;
-    }
-    this.inputRef = ref;
-    const keyPress = () => {
-      window.scroll(0, this.lastValidInputPosition);
-    };
-    this.inputRef.control.onkeydown = keyPress;
-    const input = this.inputRef.control.getElementsByTagName('input');
-    input[0].onfocus = () => {
-      this.lastValidInputPosition = 0;
-    };
-  }
-
-  render() {
-    const {
-      lookupData,
-      settingsUI,
-    } = this.props;
-
-    const {
-      userSkills,
-      selectedSkill,
-      currentIndex,
-      isMobileView,
-      totalPage,
-      indexList,
-      showConfirmation,
-      deleteSkill,
-      deleteSelector,
-      inputChanged,
-      formInvalid,
-    } = this.state;
-
-    const canModifyTrait = !this.props.traitRequestCount;
-    const tabs = settingsUI.TABS.PROFILE;
-    const currentTab = settingsUI.currentProfileTab;
-    const containerStyle = currentTab === tabs.SKILL ? '' : 'hide';
-    // All lookup skills
-    const allSkills = lookupData.skillTags ? lookupData.skillTags : [];
-    const buttons = userSkills.slice(0, totalPage);
-    let list = isMobileView ? indexList : userSkills;
-    list = _.orderBy(list, [skill => skill.name.toLowerCase()], ['asc']); // Use Lodash to sort array by 'name'
-
-    // filter out already added skills
-    const lookupSkills = _.sortBy(
-      _.filter(allSkills, skill => _.findIndex(userSkills, l => l.id === skill.id) === -1),
-      s => s.name,
-    );
-
-    return (
-      <div styleName={containerStyle}>
-        {
-          this.shouldRenderConsent() && this.renderConsent()
-        }
-        {
-          showConfirmation && (
-            <ConfirmationModal
-              onConfirm={() => this.showConsent(this.toggleSkill
-                .bind(this, deleteSkill, deleteSelector))}
-              onCancel={() => this.setState({
-                showConfirmation: false,
-                deleteSkill: null,
-                deleteSelector: null,
-              })}
-              name={deleteSelector.name}
-            />
-          )
-        }
-        <div styleName={`skill-container ${list.length > 0 ? '' : 'no-skills'}`}>
-          <h1>
-            Skill
-          </h1>
-          <div styleName={`sub-title ${list.length > 0 ? '' : 'hidden'}`}>
-            Your skills
-          </div>
-          <div styleName={`skill-list ${list.length > 0 ? '' : 'hide'}`}>
-            <ReactTouchEvents
-              onSwipe={this.handleSwipe}
-            >
-              <ul>
-                {
-                  _.map(list, (skill) => {
-                    let linkStyle = '';
-                    if (skill.hidden) {
-                      linkStyle = 'skill-hidden';
-                    }
-                    if (skill.isNew) {
-                      linkStyle += ' new';
-                    }
-
-                    let FallbackIcon;
-                    const category = skill.categories.length > 0 ? skill.categories[0].toUpperCase() : '';
-                    switch (category) {
-                      case 'DATA_SCIENCE':
-                        FallbackIcon = DataFallbackIcon;
-                        break;
-                      case 'DESIGN':
-                        FallbackIcon = DesignFallbackIcon;
-                        break;
-                      default:
-                        FallbackIcon = DevFallbackIcon;
-                        break;
-                    }
-
-                    return (
-                      <li key={skill.id}>
-                        <div styleName="skill-tile">
-                          <a
-                            id={`skill-a-${skill.id}`}
-                            role="link"
-                            onClick={e => this.onHandleDeleteSkill(e, skill, `#skill-a-${skill.id}`)}
-                            styleName={linkStyle}
-                          >
-                            <div styleName="skill-icon">
-                              <div styleName="remove-indicator" />
-                              <div styleName="hidden-indicator" />
-                              { imageExist(`id-${skill.id}.svg`) ? getImage(`id-${skill.id}.svg`) : <FallbackIcon /> }
-                            </div>
-                          </a>
-                          <div styleName="name-wrapper">
-                            <div styleName="name">
-                              {_.truncate(skill.name, { length: 18, separator: ' ' })}
-                            </div>
-                            {_.includes(skill.sources, 'CHALLENGE') && <div styleName="verified-badge"><VerifiedBadgeIcon /></div> }
-                          </div>
-                        </div>
-                      </li>
-                    );
-                  })
-                }
-              </ul>
-            </ReactTouchEvents>
-            {
-              isMobileView && (
-                <div styleName={`mobile-buttons ${list.length > 0 ? '' : 'hide'}`}>
-                  {
-                    buttons.map((item, index) => (
-                      <span
-                        tabIndex="0"
-                        key={item.id}
-                        onClick={() => this.setPage(index)}
-                        onKeyPress={() => this.setPage(index)}
-                        role="button"
-                        styleName={`mobile-button ${currentIndex === index ? 'mobile-active' : ''}`}
-                      />
-                    ))
-                  }
-                </div>
-              )
-            }
-          </div>
-          <div styleName={`sub-title ${list.length > 0 ? 'second' : 'first'}`}>
-            Add a new skill
-          </div>
-          <div styleName="form-container-default">
-            <form name="device-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="skill">
-                    Skill
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <span styleName="text-required">* Required</span>
-                  <Select
-                    selectRef={this.handleInputRef}
-                    name="skills"
-                    options={lookupSkills}
-                    onChange={this.onUpdateSelect}
-                    placeholder="Start typing a skill then select from the list"
-                    matchPos="any"
-                    matchProp="name"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={false}
-                    value={selectedSkill.name}
-                    disabled={!canModifyTrait}
-                  />
-                  <ErrorMessage invalid={_.isEmpty(selectedSkill.name) && formInvalid} addMargin message="Skill cannot be empty" />
-                </div>
-              </div>
-            </form>
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddSkill}
-                disabled={!canModifyTrait}
-              >
-                Add skill to your list
-              </PrimaryButton>
-            </div>
-          </div>
-          <div styleName={`form-container-mobile ${list.length > 0 ? '' : 'no-skills'}`}>
-            <form name="skill-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <p>
-                  Add Skill
-                </p>
-              </div>
-              <div styleName="row">
-                <div styleName="field">
-                  <label htmlFor="skills">
-                    Skill
-                    <span styleName="text-required">* Required</span>
-                    <input type="hidden" />
-                  </label>
-                  <Select
-                    selectRef={this.handleInputRef}
-                    name="skills"
-                    options={lookupSkills}
-                    onChange={this.onUpdateSelect}
-                    placeholder="Start typing a skill then select from the list"
-                    matchPos="any"
-                    matchProp="name"
-                    labelKey="name"
-                    valueKey="name"
-                    clearable={false}
-                    value={selectedSkill.name}
-                    disabled={!canModifyTrait}
-                  />
-                  <ErrorMessage invalid={_.isEmpty(selectedSkill.name) && inputChanged} addMargin message="Skill cannot be empty" />
-                </div>
-              </div>
-            </form>
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddSkill}
-                disabled={!canModifyTrait}
-              >
-                Add Skill
-              </PrimaryButton>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-Skills.defaultProps = {
-  skills: {},
-};
-
-Skills.propTypes = {
-  handle: PT.string.isRequired,
-  tokenV3: PT.string.isRequired,
-  lookupData: PT.shape().isRequired,
-  addUserSkill: PT.func.isRequired,
-  deleteUserSkill: PT.func.isRequired,
-  /* eslint-disable react/no-unused-prop-types */
-  skills: PT.shape(),
-  /* eslint-disable react/no-unused-prop-types */
-  settingsUI: PT.shape().isRequired,
-  userTraits: PT.array.isRequired,
-  traitRequestCount: PT.number.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Skills/styles.scss b/src/shared/components/Settings/Profile/Skills/styles.scss
deleted file mode 100644
index 58270a1157..0000000000
--- a/src/shared/components/Settings/Profile/Skills/styles.scss
+++ /dev/null
@@ -1,441 +0,0 @@
-@import "../../style";
-
-.hide {
-  display: none;
-}
-
-.skill-container {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-
-  @include upto-sm {
-    padding-bottom: 0;
-    border-bottom: 1px solid #c3c3c8;
-
-    &.no-skills {
-      border-bottom: none;
-    }
-  }
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
-
-    &.second {
-      margin-top: 50px;
-      margin-bottom: 30px;
-    }
-
-    &.first {
-      margin-top: 10px;
-      margin-bottom: 30px;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-}
-
-.form-container-default {
-  @include form-container-default;
-
-  input {
-    @include roboto-regular;
-
-    height: 40px;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-    margin-bottom: 0;
-  }
-
-  .text-required {
-    @include roboto-medium;
-
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-bottom: 5px;
-    text-align: right;
-  }
-}
-
-.form-container-mobile {
-  display: none;
-
-  @include upto-sm {
-    border: 0;
-    border-radius: 0;
-    border-bottom: 1px solid #c3c3c8;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 20px 20px 20px;
-    background-color: $tc-gray-neutral-light;
-
-    &.no-skills {
-      margin-bottom: 0;
-      border-bottom: none;
-    }
-  }
-
-  p {
-    @include roboto-regular;
-
-    font-size: 20px;
-    line-height: 30px;
-    color: $tc-black;
-
-    @include upto-sm {
-      margin-bottom: 20px;
-    }
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    align-content: space-between;
-    width: 100%;
-
-    @include upto-sm {
-      display: block;
-      margin-bottom: 0;
-    }
-
-    .field {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      margin-right: 10px;
-      align-content: space-between;
-      width: 100%;
-
-      @include upto-sm {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-      }
-
-      label {
-        @include roboto-medium;
-
-        font-size: 12px;
-        line-height: 15px;
-        color: $tc-gray-80;
-        margin-bottom: 6px;
-
-        .text-required {
-          font-size: 10px;
-          color: $tc-red-110;
-          margin-left: 5px;
-        }
-      }
-
-      .col-1,
-      .col-2 {
-        // width: auto;
-      }
-    }
-
-    div.field:last-child {
-      margin-right: 0;
-    }
-  }
-}
-
-.button-save {
-  align-self: center;
-
-  @include upto-sm {
-    margin-top: 10px;
-  }
-
-  button,
-  a {
-    @include roboto-medium;
-
-    height: 40px;
-    font-size: 15px;
-    margin: 0;
-    padding: 0;
-    width: 200px;
-
-    @include upto-sm {
-      width: 156px;
-    }
-  }
-
-  .complete {
-    color: $tc-white;
-  }
-}
-
-.skill-list {
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    list-style: none;
-    overflow: hidden;
-    padding-left: 0;
-    margin: 0 -10px;
-
-    @include xs-to-lg {
-      margin: 0 -15px;
-    }
-
-    @include upto-sm {
-      padding: 30px 22px 0;
-      margin: 0 -8px;
-      justify-content: center;
-    }
-  }
-
-  li {
-    margin: 0 10px 10px;
-    border-radius: 6px;
-
-    @include xs-to-lg {
-      margin: 0 15px 75px;
-    }
-
-    @include upto-sm {
-      margin: 0 8px 75px;
-    }
-  }
-
-  @include upto-sm {
-    &.hide {
-      display: none;
-    }
-  }
-}
-
-.skill-tile {
-  a {
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 75px;
-    width: 75px;
-  }
-
-  a:hover {
-    text-decoration: none;
-  }
-
-  .name-wrapper {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 75px;
-    padding-top: 5px;
-    padding-bottom: 10px;
-    flex-shrink: 0;
-
-    .name {
-      @include roboto-regular;
-
-      font-size: 12px;
-      line-height: 15px;
-      color: #262628;
-      text-align: center;
-    }
-
-    .verified-badge {
-      padding-left: 5px;
-      font-size: 0;
-    }
-  }
-
-  .skill-icon {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: #fbfbfb;
-    padding: 10px;
-    border: 1px solid $tc-gray-20;
-    border-radius: 6px;
-    height: 75px;
-    width: 75px;
-    flex-shrink: 0;
-
-    .remove-indicator {
-      position: absolute;
-      display: none;
-      top: 20px;
-      left: 17px;
-
-      @include background-image-size(40px, 50px);
-
-      background: url(assets/images/profile/x-mark-red.svg);
-      z-index: 100;
-    }
-
-    .hidden-indicator {
-      position: absolute;
-      display: none;
-      top: 32px;
-      left: 31px;
-
-      @include background-image-size(36px, 36px);
-
-      background: url(assets/images/profile/x-mark-gray.svg);
-    }
-
-    img {
-      width: 48px;
-      height: 48px;
-
-      @media only screen and (min-width: 768px) {
-        width: 60px;
-        height: 60px;
-      }
-    }
-  }
-
-  .new {
-    .skill-icon {
-      background-color: #f2faff;
-      border: 1px solid #85ccff;
-      box-shadow: 0 0 3px #0096ff;
-    }
-  }
-
-  a.skill-hidden {
-    img {
-      opacity: 0.3;
-    }
-
-    .hidden-indicator {
-      display: block;
-    }
-
-    .name {
-      text-decoration: line-through;
-      color: $tc-gray-40;
-    }
-  }
-
-  a:not(.skill-hidden):hover {
-    div.skill-icon {
-      background-color: #fee8ec;
-      border: 1px solid #fcbbc5;
-      box-shadow: none;
-
-      .remove-indicator {
-        display: block;
-      }
-    }
-
-    img {
-      opacity: 0.3;
-    }
-  }
-}
-
-.mobile-buttons {
-  display: none;
-  margin-top: 10px;
-
-  @include upto-sm {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 20px;
-
-    &.hide {
-      display: none;
-    }
-  }
-}
-
-.mobile-button {
-  background-color: #b3bac5;
-  border-radius: 50%;
-  cursor: pointer;
-  height: 10px;
-  margin: 0 6px;
-  outline: none;
-  width: 10px;
-
-  &.mobile-active {
-    background-color: #0681ff;
-  }
-}
-
-/*
- * React Select component styling
- */
-.skill-container .form-container .row .field :global .Select,
-.skill-container .form-container .row .field :global .Select-value span,
-.skill-container.form-container .row .field :global .Select-menu-outer,
-.skill-container.form-container .row .field :global .Select-placeholder,
-.skill-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    margin-top: 5px;
-  }
-}
-
-.skill-container div[class="Select-control"] {
-  height: 40px;
-
-  div[class="Select-input"] {
-    height: 38px;
-  }
-
-  div[class="Select-placeholder"] {
-    height: 38px;
-    line-height: 40px !important;
-
-    @include upto-sm {
-      line-height: 38px !important;
-    }
-  }
-
-  div[class="Select-value"] {
-    line-height: 40px !important;
-  }
-}
-
-.skill-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
-
-  @include upto-sm {
-    margin-top: 5px;
-  }
-}
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/index.jsx b/src/shared/components/Settings/Profile/Work/List/Item/index.jsx
deleted file mode 100644
index a745a2fe6d..0000000000
--- a/src/shared/components/Settings/Profile/Work/List/Item/index.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * render work Item
- */
-import _ from 'lodash';
-import React from 'react';
-import PT from 'prop-types';
-import ReactSVG from 'react-svg';
-import moment from 'moment';
-import { isomorphy } from 'topcoder-react-utils';
-
-import './styles.scss';
-
-let assets;
-if (isomorphy.isClientSide()) {
-  assets = require.context('assets/images/profile', false, /svg/);
-}
-
-export default function Item(props) {
-  const {
-    work,
-    index,
-    onDeleteItem,
-    onEditItem,
-  } = props;
-
-  const hasSecondLine = () => {
-    if (_.isEmpty(work.timePeriodFrom) && _.isEmpty(work.timePeriodTo)
-      && _.isEmpty(work.position) && !work.working) {
-      return false;
-    }
-
-    return true;
-  };
-
-  const current = work.working ? '- Current' : '';
-
-  return (
-    <div styleName="container">
-      <div styleName="work-info">
-        <div styleName="work-icon">
-          <ReactSVG path={assets('./ico-work.svg')} />
-        </div>
-        <div styleName={`work-parameters${hasSecondLine() ? '' : ' single-line'}`}>
-          <div styleName={`parameter-first-line${hasSecondLine() ? '' : ' single-line'}`}>
-            { `${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}` : ''}` }
-          </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}`}`}
-            </p>
-            <p>
-              {`${!_.isEmpty(work.position) ? `${work.position}` : ''}`}
-            </p>
-          </div>
-        </div>
-      </div>
-      <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
-        >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          styleName="delete"
-          onKeyPress={() => onDeleteItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onDeleteItem(index)}
-        >
-          <img src={assets('./ico-trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
-      </div>
-    </div>
-  );
-}
-
-Item.propTypes = {
-  work: PT.shape().isRequired,
-  index: PT.number.isRequired,
-  onDeleteItem: PT.func.isRequired,
-  onEditItem: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss b/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
deleted file mode 100644
index d419082362..0000000000
--- a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
+++ /dev/null
@@ -1,153 +0,0 @@
-@import "../../../../style";
-
-.container {
-  display: flex;
-  flex-direction: row;
-  justify-items: center;
-  justify-content: space-between;
-  height: 100%;
-  width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
-  border-bottom: none;
-  background-color: $tc-white;
-}
-
-.work-info {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.work-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
-}
-
-.work-parameters {
-  @include roboto-medium;
-
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  justify-content: left;
-  font-size: 15px;
-  line-height: 20px;
-  text-transform: capitalize;
-  padding-right: 20px;
-
-  &.single-line {
-    flex-direction: row;
-    align-items: center;
-  }
-}
-
-.parameter-first-line {
-  font-weight: 500;
-  color: $tc-black;
-  margin-bottom: 10px;
-  word-break: break-all;
-
-  &.single-line {
-    margin-bottom: 0;
-  }
-
-  @include upto-sm {
-    margin-bottom: 0;
-  }
-}
-
-.parameter-second-line,
-.parameter-third-line {
-  color: $tc-gray-50;
-  font-weight: 400;
-  word-break: break-all;
-
-  @include upto-sm {
-    display: none;
-  }
-}
-
-.parameter-second-line-mobile {
-  display: none;
-
-  @include upto-sm {
-    display: flex;
-    flex-direction: column;
-    color: $tc-gray-50;
-    font-weight: 400;
-
-    p {
-      word-break: break-all;
-    }
-  }
-}
-
-.operation-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .delete {
-    display: flex;
-    flex-direction: column;
-    justify-items: center;
-    justify-content: center;
-    cursor: pointer;
-    outline-style: none;
-    margin-left: 10px;
-
-    img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
-    }
-
-    p {
-      @include roboto-regular;
-
-      font-size: 11px;
-      line-height: 15px;
-      font-weight: 400;
-      color: $tc-gray-50;
-
-      @include upto-sm {
-        display: none;
-      }
-    }
-  }
-
-  .edit {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    outline-style: none;
-    margin-left: 10px;
-
-    img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
-    }
-
-    p {
-      @include roboto-regular;
-
-      font-size: 11px;
-      line-height: 15px;
-      font-weight: 400;
-      color: $tc-gray-50;
-
-      @include upto-sm {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/shared/components/Settings/Profile/Work/List/index.jsx b/src/shared/components/Settings/Profile/Work/List/index.jsx
deleted file mode 100644
index 293d27f97d..0000000000
--- a/src/shared/components/Settings/Profile/Work/List/index.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * render Work list
- */
-import React from 'react';
-import PT from 'prop-types';
-import Item from './Item';
-
-import './styles.scss';
-
-export default function WorkList(props) {
-  const {
-    workList,
-    onDeleteItem,
-    onEditItem,
-  } = props;
-
-  return (
-    <div styleName={`container ${workList.items.length > 0 ? 'active' : ''}`}>
-      <ul>
-        {
-          workList.items.map((work, index) => (
-            <li key={`${work.company}${index + 1}`}>
-              <Item work={work} index={index} onDeleteItem={onDeleteItem} onEditItem={onEditItem} />
-            </li>
-          ))
-        }
-      </ul>
-    </div>
-  );
-}
-
-WorkList.propTypes = {
-  workList: PT.shape().isRequired,
-  onDeleteItem: PT.func.isRequired,
-  onEditItem: PT.func.isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Work/index.jsx b/src/shared/components/Settings/Profile/Work/index.jsx
deleted file mode 100644
index 5ec1e52cc7..0000000000
--- a/src/shared/components/Settings/Profile/Work/index.jsx
+++ /dev/null
@@ -1,763 +0,0 @@
-/**
- * Child component of Settings/Profile/ renders the
- * 'Work' page.
- */
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable no-nested-ternary */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable no-undef */
-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 ErrorMessage from 'components/Settings/ErrorMessage';
-import { validateStartDate, validateEndDate } from 'utils/settings';
-import ConfirmationModal from '../../CofirmationModal';
-import WorkList from './List';
-
-import './styles.scss';
-
-export default class Work extends ConsentComponent {
-  constructor(props) {
-    super(props);
-    this.onHandleDeleteWork = this.onHandleDeleteWork.bind(this);
-    this.onDeleteWork = this.onDeleteWork.bind(this);
-    this.onEditWork = this.onEditWork.bind(this);
-    this.loadWorkTrait = this.loadWorkTrait.bind(this);
-    this.onUpdateInput = this.onUpdateInput.bind(this);
-    this.onHandleAddWork = this.onHandleAddWork.bind(this);
-    this.onAddWork = this.onAddWork.bind(this);
-    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
-    this.onUpdateDate = this.onUpdateDate.bind(this);
-    this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
-
-    const { userTraits } = props;
-    this.state = {
-      formInvalid: false,
-      startDateInvalid: false,
-      startDateInvalidMsg: '',
-      endDateInvalid: false,
-      endDateDisabled: false,
-      endDateInvalidMsg: '',
-      isSumbit: false,
-      workTrait: this.loadWorkTrait(userTraits),
-      personalizationTrait: this.loadPersonalizationTrait(userTraits),
-      newWork: {
-        company: '',
-        position: '',
-        cityTown: '',
-        timePeriodFrom: '',
-        timePeriodTo: '',
-        industry: '',
-        working: false,
-      },
-      isMobileView: false,
-      screenSM: 767,
-      isEdit: false,
-      indexNo: null,
-      showConfirmation: false,
-    };
-  }
-
-  componentDidMount() {
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const workTrait = this.loadWorkTrait(nextProps.userTraits);
-    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
-    this.setState({
-      workTrait,
-      personalizationTrait,
-      isSubmit: false,
-      formInvalid: false,
-      startDateInvalid: false,
-      startDateInvalidMsg: '',
-      endDateInvalid: false,
-      endDateDisabled: false,
-      endDateInvalidMsg: '',
-    });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updatePredicate);
-  }
-
-  /**
-   * Show User Consent Modal
-   * @param e event
-   */
-  onHandleAddWork(e) {
-    e.preventDefault();
-    const { newWork } = this.state;
-    this.setState({ isSubmit: true });
-    if (this.onCheckFormValue(newWork)) {
-      return;
-    }
-    this.showConsent(this.onAddWork.bind(this));
-  }
-
-  /**
-   * Check form fields value,
-   * Invalid value, can not save
-   * @param newWork object
-   */
-  onCheckFormValue(newWork) {
-    let invalid = false;
-
-    if (!_.trim(newWork.company).length) {
-      invalid = true;
-    }
-
-    const fromDateValidResult = validateStartDate(newWork.working,
-      newWork.timePeriodFrom, newWork.timePeriodTo);
-    const endDateValidResult = validateEndDate(newWork.working,
-      newWork.timePeriodFrom, newWork.timePeriodTo);
-    const formInvalid = invalid || fromDateValidResult.invalid || endDateValidResult.invalid;
-
-    this.setState({
-      formInvalid,
-      startDateInvalid: fromDateValidResult.invalid,
-      startDateInvalidMsg: fromDateValidResult.message,
-      endDateInvalid: endDateValidResult.invalid,
-      endDateInvalidMsg: endDateValidResult.message,
-    });
-
-    return formInvalid;
-  }
-
-  onHandleDeleteWork(indexNo) {
-    this.setState({
-      showConfirmation: true,
-      indexNo,
-    });
-  }
-
-  onUpdateDate(date, timePeriod) {
-    const { newWork: oldWork } = this.state;
-    const newWork = { ...oldWork };
-    newWork[timePeriod] = date;
-    this.setState({ newWork, isSubmit: false });
-  }
-
-  /**
-   * Delete work by index
-   * @param indexNo the work index no
-   */
-  onDeleteWork(indexNo) {
-    const { workTrait } = this.state;
-    const newWorkTrait = { ...workTrait };
-    newWorkTrait.traits.data.splice(indexNo, 1);
-    this.setState({
-      workTrait: newWorkTrait,
-    });
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      deleteUserTrait,
-    } = this.props;
-
-    if (newWorkTrait.traits.data.length > 0) {
-      updateUserTrait(handle, 'work', newWorkTrait.traits.data, tokenV3);
-    } else {
-      deleteUserTrait(handle, 'work', tokenV3);
-    }
-
-    this.setState({
-      showConfirmation: false,
-      newWork: {
-        company: '',
-        position: '',
-        cityTown: '',
-        timePeriodFrom: '',
-        timePeriodTo: '',
-        industry: '',
-        working: false,
-      },
-      isEdit: false,
-      indexNo: null,
-      isSubmit: false,
-      formInvalid: false,
-      startDateInvalid: false,
-      startDateInvalidMsg: '',
-      endDateInvalid: false,
-      endDateDisabled: false,
-      endDateInvalidMsg: '',
-    });
-  }
-
-  /**
-   * Edit work by index
-   * @param indexNo the work index no
-   */
-  onEditWork(indexNo) {
-    const { workTrait } = this.state;
-    this.setState({
-      newWork: {
-        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,
-        industry: _.isEmpty(workTrait.traits.data[indexNo].industry) ? '' : workTrait.traits.data[indexNo].industry,
-        working: workTrait.traits.data[indexNo].working,
-      },
-      isEdit: true,
-      indexNo,
-      formInvalid: false,
-      startDateInvalid: false,
-      startDateInvalidMsg: '',
-      endDateInvalid: false,
-      endDateDisabled: workTrait.traits.data[indexNo].working,
-      endDateInvalidMsg: '',
-      isSubmit: false,
-    });
-  }
-
-  /**
-   * Add new work
-   * @param answer user consent answer value
-   */
-  onAddWork(answer) {
-    const {
-      newWork, personalizationTrait, isEdit, indexNo,
-    } = this.state;
-
-    const {
-      handle,
-      tokenV3,
-      updateUserTrait,
-      addUserTrait,
-    } = this.props;
-
-    const { workTrait } = this.state;
-
-    const work = _.clone(newWork);
-    if (_.isEmpty(work.position)) {
-      delete work.position;
-    }
-    if (_.isEmpty(work.cityTown)) {
-      delete work.cityTown;
-    }
-    if (_.isEmpty(work.timePeriodFrom)) {
-      delete work.timePeriodFrom;
-    } else {
-      work.timePeriodFrom = new Date(work.timePeriodFrom).getTime();
-    }
-    if (_.isEmpty(work.timePeriodTo)) {
-      delete work.timePeriodTo;
-    } else {
-      work.timePeriodTo = new Date(work.timePeriodTo).getTime();
-    }
-    if (_.isEmpty(work.industry)) {
-      delete work.industry;
-    }
-
-    if (workTrait.traits && workTrait.traits.data.length > 0) {
-      const newWorkTrait = _.cloneDeep(workTrait);
-      if (isEdit) {
-        newWorkTrait.traits.data.splice(indexNo, 1);
-      }
-      newWorkTrait.traits.data.push(work);
-      updateUserTrait(handle, 'work', newWorkTrait.traits.data, tokenV3);
-    } else {
-      const newWorks = [];
-      newWorks.push(work);
-      addUserTrait(handle, 'work', newWorks, tokenV3);
-    }
-    this.setState({
-      isEdit: false,
-      indexNo: null,
-      isSubmit: false,
-    });
-    // save personalization
-    if (_.isEmpty(personalizationTrait)) {
-      const personalizationData = { userConsent: answer };
-      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-    } else {
-      const trait = personalizationTrait.traits.data[0];
-      if (trait.userConsent !== answer) {
-        const personalizationData = { userConsent: answer };
-        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
-      }
-    }
-  }
-
-  /**
-   * Update input value
-   * @param e event
-   */
-  onUpdateInput(e) {
-    const { newWork: oldWork } = this.state;
-    const newWork = { ...oldWork };
-    let endDateDisabled = newWork.working;
-    if (e.target.type !== 'checkbox') {
-      newWork[e.target.name] = e.target.value;
-    } else {
-      newWork[e.target.name] = e.target.checked;
-      if (e.target.checked) { // if working nullify toDate
-        newWork.timePeriodTo = '';
-        endDateDisabled = true;
-      } else {
-        endDateDisabled = false;
-      }
-    }
-    this.setState({ newWork, isSubmit: false, endDateDisabled });
-  }
-
-  /**
-   * Get work trait
-   * @param userTraits the all user traits
-   */
-  loadWorkTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'work');
-    const works = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, works);
-  }
-
-  /**
-   * Get personalization trait
-   * @param userTraits the all user traits
-   */
-  loadPersonalizationTrait = (userTraits) => {
-    const trait = userTraits.filter(t => t.traitId === 'personalization');
-    const personalization = trait.length === 0 ? {} : trait[0];
-    return _.assign({}, personalization);
-  }
-
-  updatePredicate() {
-    const { screenSM } = this.state;
-    this.setState({ isMobileView: window.innerWidth <= screenSM });
-  }
-
-  onCancelEditStatus() {
-    const { isEdit } = this.state;
-    if (isEdit) {
-      this.setState({
-        isEdit: false,
-        isSubmit: false,
-        indexNo: null,
-        newWork: {
-          company: '',
-          position: '',
-          cityTown: '',
-          timePeriodFrom: '',
-          timePeriodTo: '',
-          industry: '',
-          working: false,
-        },
-        formInvalid: false,
-        startDateInvalid: false,
-        startDateInvalidMsg: '',
-        endDateInvalid: false,
-        endDateDisabled: false,
-        endDateInvalidMsg: '',
-      });
-    }
-  }
-
-  render() {
-    const {
-      settingsUI,
-    } = this.props;
-    const {
-      workTrait,
-      isMobileView,
-      isEdit,
-      showConfirmation,
-      indexNo,
-      formInvalid,
-      startDateInvalid,
-      startDateInvalidMsg,
-      endDateInvalid,
-      endDateDisabled,
-      endDateInvalidMsg,
-      isSubmit,
-    } = this.state;
-    const tabs = settingsUI.TABS.PROFILE;
-    const currentTab = settingsUI.currentProfileTab;
-    const containerStyle = currentTab === tabs.WORK ? '' : 'hide';
-    const workItems = workTrait.traits
-      ? workTrait.traits.data.slice() : [];
-    const { newWork } = this.state;
-
-    return (
-      <div styleName={containerStyle}>
-        {
-          this.shouldRenderConsent() && this.renderConsent()
-        }
-        {
-          showConfirmation && (
-            <ConfirmationModal
-              onConfirm={() => this.showConsent(this.onDeleteWork.bind(this, indexNo))}
-              onCancel={() => this.setState({
-                showConfirmation: false,
-                indexNo: null,
-              })}
-              name={workTrait.traits.data[indexNo].company}
-            />
-          )
-        }
-        <div styleName="work-container">
-          <h1>
-            Work
-          </h1>
-          <div styleName={`sub-title ${workItems.length > 0 ? '' : 'hidden'}`}>
-            Your workplaces
-          </div>
-          {
-            !isMobileView && workItems.length > 0
-            && (
-              <WorkList
-                workList={{ items: workItems }}
-                onDeleteItem={this.onHandleDeleteWork}
-                onEditItem={this.onEditWork}
-              />
-            )
-          }
-          <div styleName={`sub-title ${workItems.length > 0 ? 'second' : 'first'}`}>
-            {
-              isEdit ? (<React.Fragment>Edit workplace</React.Fragment>)
-                : (<React.Fragment>Add a new workplace</React.Fragment>)
-            }
-          </div>
-          <div styleName="form-container-default">
-            <form name="device-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <div styleName="field col-1-long-text">
-                  <label htmlFor="company">
-                    Company
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <span styleName="text-required">* Required</span>
-                  <input id="company" name="company" type="text" placeholder="Company" onChange={this.onUpdateInput} value={newWork.company} maxLength="64" required />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage invalid={_.isEmpty(newWork.company)} message="Company cannot be empty" />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-long-text">
-                  <label htmlFor="position">
-                    Position
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <input id="position" name="position" type="text" placeholder="Position" onChange={this.onUpdateInput} value={newWork.position} maxLength="64" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-long-text">
-                  <label htmlFor="industry">
-                    Industry
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <input id="industry" name="industry" type="text" placeholder="Industry" onChange={this.onUpdateInput} value={newWork.industry} maxLength="64" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-long-text">
-                  <label htmlFor="cityTown">
-                    City
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <input id="cityTown" name="cityTown" type="text" placeholder="City" onChange={this.onUpdateInput} value={newWork.cityTown} maxLength="64" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-long-text">
-                  <label htmlFor="timePeriodFrom">
-                    Start Date
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <DatePicker
-                    readOnly
-                    showClearDate
-                    numberOfMonths={1}
-                    isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodFrom}
-                    id="date-from1"
-                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
-                    onClearDate={date => this.onUpdateDate('', 'timePeriodFrom')} // eslint-disable-line no-unused-vars
-                    placeholder="dd/mm/yyyy"
-                  />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage
-                        invalid={startDateInvalid}
-                        message={startDateInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-long-text">
-                  <label htmlFor="timePeriodTo">
-                    End Date
-                    <input type="hidden" />
-                  </label>
-                </div>
-                <div styleName="field col-2">
-                  <DatePicker
-                    readOnly
-                    showClearDate
-                    disabled={endDateDisabled}
-                    numberOfMonths={1}
-                    isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodTo}
-                    id="date-to1"
-                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                    onClearDate={date => this.onUpdateDate('', 'timePeriodTo')} // eslint-disable-line no-unused-vars
-                    placeholder="dd/mm/yyyy"
-                  />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage
-                        invalid={endDateInvalid}
-                        message={endDateInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-long-text">
-                  <label htmlFor="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"
-                      checked={newWork.working}
-                      id="working"
-                      onChange={this.onUpdateInput}
-                      type="checkbox"
-                    />
-                    <label htmlFor="working">
-                      <div styleName="tc-checkbox-label">
-                        &nbsp;
-                      </div>
-                      <input type="hidden" />
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </form>
-            <div styleName="button-container">
-              <div styleName="button-save">
-                <PrimaryButton
-                  styleName="complete"
-                  onClick={this.onHandleAddWork}
-                >
-                  {
-                    isEdit ? (<React.Fragment>Edit workplace to your list</React.Fragment>)
-                      : (<React.Fragment>Add workplace to your list</React.Fragment>)
-                  }
-                </PrimaryButton>
-              </div>
-              {
-                isEdit && (
-                  <div styleName="button-cancel">
-                    <PrimaryButton
-                      styleName="complete"
-                      onClick={this.onCancelEditStatus}
-                    >
-                      Cancel
-                    </PrimaryButton>
-                  </div>
-                )
-              }
-            </div>
-          </div>
-          <div styleName="form-container-mobile">
-            <form name="work-form" noValidate autoComplete="off">
-              <div styleName="row">
-                <p>
-                  {
-                    isEdit ? (<React.Fragment>Edit Workplace</React.Fragment>)
-                      : (<React.Fragment>Add Workplace</React.Fragment>)
-                  }
-                </p>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-1">
-                  <label htmlFor="company">
-                    Company
-                    <span styleName="text-required">* Required</span>
-                    <input type="hidden" />
-                  </label>
-                  <input id="company" name="company" type="text" placeholder="Company" onChange={this.onUpdateInput} value={newWork.company} maxLength="64" required />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage invalid={_.isEmpty(newWork.company)} message="Company cannot be empty" />
-                    )
-                  }
-                </div>
-                <div styleName="field col-2">
-                  <label htmlFor="position">
-                    Position
-                    <input type="hidden" />
-                  </label>
-                  <input id="position" name="position" type="text" placeholder="Position" onChange={this.onUpdateInput} value={newWork.position} maxLength="64" required />
-                </div>
-                <div styleName="field col-3">
-                  <label htmlFor="industry">
-                    Industry
-                    <input type="hidden" />
-                  </label>
-                  <input id="industry" name="industry" type="text" placeholder="Industry" onChange={this.onUpdateInput} value={newWork.industry} maxLength="64" required />
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-city">
-                  <label htmlFor="cityTown">
-                    City
-                    <input type="hidden" />
-                  </label>
-                  <input id="cityTown" name="cityTown" type="text" placeholder="City" onChange={this.onUpdateInput} value={newWork.cityTown} maxLength="64" required />
-                </div>
-                <div styleName="field col-date">
-                  <label htmlFor="timePeriodFrom">
-                    Start Date
-                    <input type="hidden" />
-                  </label>
-                  <DatePicker
-                    readOnly
-                    showClearDate
-                    numberOfMonths={1}
-                    isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodFrom}
-                    id="date-from2"
-                    onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
-                    onClearDate={date => this.onUpdateDate('', 'timePeriodFrom')} // eslint-disable-line no-unused-vars
-                    placeholder="dd/mm/yyyy"
-                  />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage
-                        invalid={startDateInvalid}
-                        message={startDateInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-                <div styleName="field col-date">
-                  <label htmlFor="timePeriodTo">
-                    End Date
-                    <input type="hidden" />
-                  </label>
-                  <DatePicker
-                    readOnly
-                    showClearDate
-                    disabled={endDateDisabled}
-                    numberOfMonths={1}
-                    isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodTo}
-                    id="date-to2"
-                    onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
-                    onClearDate={date => this.onUpdateDate('', 'timePeriodTo')} // eslint-disable-line no-unused-vars
-                    placeholder="dd/mm/yyyy"
-                  />
-                  {
-                    isSubmit && formInvalid && (
-                      <ErrorMessage
-                        invalid={endDateInvalid}
-                        message={endDateInvalidMsg}
-                      />
-                    )
-                  }
-                </div>
-              </div>
-              <div styleName="row">
-                <div styleName="field col-checkbox">
-                  <div styleName="tc-checkbox">
-                    <input
-                      name="working"
-                      checked={newWork.working}
-                      id="working"
-                      onChange={this.onUpdateInput}
-                      type="checkbox"
-                    />
-                    <label htmlFor="working">
-                      <div styleName="tc-checkbox-label">
-                        I am currently working in this role
-                      </div>
-                      <input type="hidden" />
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </form>
-            <div styleName="button-container">
-              <div styleName="button-save">
-                <PrimaryButton
-                  styleName="complete"
-                  onClick={this.onHandleAddWork}
-                >
-                  {
-                    isEdit ? (<React.Fragment>Edit Workplace</React.Fragment>)
-                      : (<React.Fragment>Add Workplace</React.Fragment>)
-                  }
-                </PrimaryButton>
-              </div>
-              {
-                isEdit && (
-                  <div styleName="button-cancel">
-                    <PrimaryButton
-                      styleName="complete"
-                      onClick={this.onCancelEditStatus}
-                    >
-                      Cancel
-                    </PrimaryButton>
-                  </div>
-                )
-              }
-            </div>
-          </div>
-          {
-            isMobileView && workItems.length > 0
-            && (
-              <WorkList
-                workList={{ items: workItems }}
-                onDeleteItem={this.onHandleDeleteWork}
-                onEditItem={this.onEditWork}
-              />
-            )
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-Work.propTypes = {
-  tokenV3: PT.string.isRequired,
-  handle: PT.string.isRequired,
-  userTraits: PT.array.isRequired,
-  addUserTrait: PT.func.isRequired,
-  updateUserTrait: PT.func.isRequired,
-  deleteUserTrait: PT.func.isRequired,
-  settingsUI: PT.shape().isRequired,
-};
diff --git a/src/shared/components/Settings/Profile/Work/styles.scss b/src/shared/components/Settings/Profile/Work/styles.scss
deleted file mode 100644
index a8e9a790f5..0000000000
--- a/src/shared/components/Settings/Profile/Work/styles.scss
+++ /dev/null
@@ -1,425 +0,0 @@
-@import "../../style";
-
-$checkbox-size: $base-unit * 4;
-$checkbox-bg-empty: $tc-gray-neutral-light;
-$checkbox-bg-selected: $tc-dark-blue;
-
-.hide {
-  display: none;
-}
-
-.error-message {
-  display: none;
-
-  &.active {
-    @include roboto-medium;
-
-    display: block;
-    border-radius: 5px;
-    background-color: $tc-red-10;
-    color: $tc-red-110;
-    font-size: 15px;
-    margin-bottom: 15px;
-    line-height: 21px;
-    padding: 12px 15px;
-    white-space: pre-line;
-  }
-}
-
-label {
-  @include roboto-medium;
-
-  display: block;
-  font-size: 12px;
-  line-height: 15px;
-  font-weight: 500;
-  color: $tc-gray-80;
-  margin-bottom: 5px;
-
-  .text-required {
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-left: 5px;
-  }
-}
-
-.tc-checkbox {
-  height: $checkbox-size;
-  width: $checkbox-size;
-  margin-bottom: 125px;
-  position: absolute;
-  display: inline-block;
-  bottom: auto;
-
-  @include upto-sm {
-    margin-bottom: 10px;
-  }
-
-  input[type=checkbox] {
-    display: none;
-  }
-
-  label {
-    cursor: pointer;
-    position: absolute;
-    display: inline-block;
-    width: $checkbox-size;
-    height: $checkbox-size;
-    top: 0;
-    left: 0;
-    border-radius: $corner-radius;
-    box-shadow: none;
-    border: 1px solid $tc-gray-50;
-    background: $tc-gray-neutral-light;
-
-    &::after {
-      opacity: 0;
-      content: '';
-      position: absolute;
-      width: 13px;
-      height: 7px;
-      background: transparent;
-      top: 4px;
-      left: 3px;
-      border: 3px solid $tc-dark-blue;
-      border-top: none;
-      border-right: none;
-      transform: rotate(-45deg);
-    }
-
-    &:hover::after {
-      opacity: 0.3;
-    }
-  }
-
-  input[type=checkbox]:checked ~ label {
-    background: $checkbox-bg-selected;
-    border-color: $checkbox-bg-selected;
-  }
-
-  input[type=checkbox]:checked + label::after {
-    opacity: 1;
-    border-color: $tc-white;
-  }
-}
-
-.form-container-default {
-  @include form-container-default;
-
-  input {
-    @include roboto-regular;
-
-    height: 40px;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-    margin-bottom: 0;
-  }
-
-  .text-required {
-    @include roboto-medium;
-
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-bottom: 5px;
-    text-align: right;
-  }
-
-  .tc-checkbox-label {
-    display: inline-block;
-
-    @include roboto-regular;
-
-    font-size: 13px;
-    line-height: $checkbox-size;
-    vertical-align: middle;
-    margin-left: $base-unit * 6;
-    user-select: none;
-    cursor: pointer;
-  }
-}
-
-.form-container-mobile {
-  display: none;
-
-  @include upto-sm {
-    border: 0;
-    border-radius: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 20px 20px 20px 20px;
-    background-color: $tc-gray-neutral-light;
-  }
-
-  p {
-    @include roboto-regular;
-
-    font-size: 20px;
-    line-height: 30px;
-    font-weight: 400;
-    color: $tc-black;
-
-    @include upto-sm {
-      margin-bottom: 20px;
-    }
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    align-content: space-between;
-
-    div:last-child {
-      margin-right: 0;
-    }
-
-    @include upto-sm {
-      display: block;
-      margin-bottom: 0;
-    }
-
-    .field {
-      display: flex;
-      flex-direction: column;
-      margin-right: 10px;
-      align-content: space-between;
-
-      @include upto-sm {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-      }
-
-      .date-input {
-        display: flex;
-        align-items: center;
-      }
-
-      &.col-1,
-      &.col-long-text,
-      &.col-1-long-text,
-      &.col-1-no-padding {
-        width: 42%;
-
-        @include from-sm-to-lg {
-          width: 46%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-
-      &.col-2 {
-        width: 32%;
-
-        @include from-sm-to-lg {
-          width: 27%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-
-      &.col-3 {
-        width: 26%;
-
-        @include from-sm-to-lg {
-          width: 27%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-
-      &.col-city {
-        width: 150px;
-
-        @include from-sm-to-lg {
-          width: 46%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-
-      &.col-date {
-        width: 160px;
-
-        @include from-sm-to-lg {
-          width: 27%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-
-      .tc-checkbox-label {
-        display: block;
-
-        @include roboto-regular;
-
-        font-size: 13px;
-        line-height: $checkbox-size;
-        vertical-align: middle;
-        margin-left: $base-unit * 6;
-        user-select: none;
-        cursor: pointer;
-        width: 500px;
-      }
-
-      &.col-checkbox {
-        position: relative;
-
-        @include upto-sm {
-          top: 25px;
-        }
-      }
-    }
-  }
-
-  input {
-    @include roboto-regular;
-
-    height: 36px;
-    margin: 0;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-
-    @include upto-sm {
-      margin-top: 5px;
-    }
-  }
-}
-
-.work-container {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
-
-    &.second {
-      margin-top: 50px;
-      margin-bottom: 30px;
-    }
-
-    &.first {
-      margin-bottom: 30px;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  :global {
-    .SingleDatePickerInput_clearDate {
-      height: 35px;
-      width: 35px;
-      display: flex;
-      align-items: center;
-      top: calc(50% - 5px);
-    }
-
-    .SingleDatePickerInput__showClearDate {
-      padding-right: 0;
-    }
-  }
-}
-
-.button-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .button-save,
-  .button-cancel {
-    align-self: center;
-
-    @include upto-sm {
-      margin-top: 30px;
-    }
-
-    button,
-    a {
-      @include roboto-medium;
-
-      height: 40px;
-      font-size: 15px;
-      font-weight: 500;
-      margin: 0;
-      padding: 0;
-      width: 250px;
-
-      @include upto-sm {
-        width: 156px;
-      }
-    }
-
-    .complete {
-      color: $tc-white;
-    }
-  }
-
-  .button-cancel {
-    margin-left: 10px;
-  }
-}
-
-/*
- * React Select component styling
- */
-.work-container .form-container .row .field :global .Select,
-.devices-container .form-container .row .field :global .Select-value span,
-.work-container .form-container .row .field :global .Select-menu-outer,
-.work-container .form-container .row .field :global .Select-placeholder,
-.work-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    margin-top: 5px;
-  }
-}
-
-.work-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
-}
diff --git a/src/shared/components/Settings/Profile/index.jsx b/src/shared/components/Settings/Profile/index.jsx
deleted file mode 100644
index 63a7aad2a1..0000000000
--- a/src/shared/components/Settings/Profile/index.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Child component of Settings/Profile renders setting page for profile.
- */
-
-import React from 'react';
-import PT from 'prop-types';
-import _ from 'lodash';
-
-import Accordion from 'components/Settings/Accordion';
-import SideBar from 'components/Settings/SideBar';
-import InfoIcon from 'assets/images/profile/sideicons/basicinfo.svg';
-import LanguageIcon from 'assets/images/profile/sideicons/language.svg';
-import EducationIcon from 'assets/images/profile/sideicons/education.svg';
-import WorkIcon from 'assets/images/profile/sideicons/work.svg';
-import OrganizationIcon from 'assets/images/profile/sideicons/organization.svg';
-import SkillIcon from 'assets/images/profile/sideicons/skill.svg';
-import HobbyIcon from 'assets/images/profile/sideicons/hobby.svg';
-import CommunityIcon from 'assets/images/profile/sideicons/community.svg';
-import ErrorWrapper from 'components/Settings/ErrorWrapper';
-import BasicInfo from './BasicInfo';
-import Language from './Language';
-import Education from './Education';
-import Work from './Work';
-import Skills from './Skills';
-import Community from './Community';
-import Organization from './Organization';
-import Hobby from './Hobby';
-import ComingSoon from '../ComingSoon';
-import { SCREEN_SIZE } from '../constants';
-
-
-import './styles.scss';
-
-class Profile extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const hash = decodeURIComponent(_.get(props, 'location.hash', '').substring(1));
-    this.tablink = hash.replace('-', ' ');
-    const { toggleProfileSideTab } = this.props;
-    if (this.tablink) {
-      toggleProfileSideTab(this.tablink);
-    }
-    this.state = {
-      isMobileView: false,
-    };
-    this.clearNotifiation = this.clearNotifiation.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
-  }
-
-  componentDidMount() {
-    this.clearNotifiation();
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { settingsUI: { currentProfileTab } } = this.props;
-    if (prevProps.settingsUI.currentProfileTab !== currentProfileTab) {
-      window.location.hash = currentProfileTab.replace(' ', '-');
-      this.clearNotifiation();
-    }
-  }
-
-  componentWillUnmount() {
-    this.clearNotifiation();
-    window.removeEventListener('resize', this.updatePredicate);
-  }
-
-  clearNotifiation() {
-    const { clearToastrNotification } = this.props;
-    if (clearToastrNotification) {
-      clearToastrNotification();
-    }
-  }
-
-  updatePredicate() {
-    this.setState({ isMobileView: window.innerWidth <= SCREEN_SIZE.SM });
-  }
-
-  render() {
-    const { isMobileView } = this.state;
-    const {
-      settingsUI: { currentProfileTab, TABS },
-      toggleProfileSideTab,
-    } = this.props;
-    const tabs = TABS.PROFILE;
-    const names = Object.keys(tabs).map(key => tabs[key]);
-    const currentTab = this.tablink || currentProfileTab;
-
-    const icons = {
-      'basic info': <InfoIcon />,
-      language: <LanguageIcon />,
-      education: <EducationIcon />,
-      work: <WorkIcon />,
-      organization: <OrganizationIcon />,
-      skills: <SkillIcon />,
-      hobbies: <HobbyIcon />,
-      communities: <CommunityIcon />,
-    };
-
-    const renderTabContent = (tab) => {
-      switch (tab) {
-        case 'basic info':
-          return <BasicInfo {...this.props} />;
-        case 'language':
-          return <Language {...this.props} />;
-        case 'education':
-          return <Education {...this.props} />;
-        case 'work':
-          return <Work {...this.props} />;
-        case 'skills':
-          return <Skills {...this.props} />;
-        case 'communities':
-          return <Community {...this.props} />;
-        case 'organization':
-          return <Organization {...this.props} />;
-        case 'hobbies':
-          return <Hobby {...this.props} />;
-        default:
-          return <ComingSoon />;
-      }
-    };
-    return (
-      <div styleName="profile-container">
-        {
-          isMobileView && (
-            <Accordion
-              icons={icons}
-              names={names}
-              currentSidebarTab={currentTab}
-              renderTabContent={renderTabContent}
-              toggleSidebarTab={toggleProfileSideTab}
-            />
-          )
-        }
-        <div styleName="col-bar">
-          <ErrorWrapper>
-            <SideBar
-              icons={icons}
-              names={names}
-              currentTab={currentTab}
-              toggle={toggleProfileSideTab}
-            />
-          </ErrorWrapper>
-        </div>
-        {
-          !isMobileView && (
-            <div styleName="col-content">
-              <ErrorWrapper>
-                { renderTabContent(currentTab) }
-              </ErrorWrapper>
-            </div>
-          )
-        }
-      </div>
-    );
-  }
-}
-
-Profile.propTypes = {
-  settingsUI: PT.shape().isRequired,
-  toggleProfileSideTab: PT.func.isRequired,
-  clearToastrNotification: PT.func.isRequired,
-  location: PT.shape().isRequired,
-};
-
-export default Profile;
diff --git a/src/shared/components/Settings/Profile/styles.scss b/src/shared/components/Settings/Profile/styles.scss
deleted file mode 100644
index a5895a1eaf..0000000000
--- a/src/shared/components/Settings/Profile/styles.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "../style";
-
-.profile-container {
-  display: flex;
-  flex-direction: row;
-  box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06);
-
-  @include upto-sm {
-    padding: 0;
-  }
-
-  .mobile-view {
-    display: none;
-
-    @include from-sm-to-lg {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: block;
-      width: 100%;
-    }
-  }
-
-  .col-bar {
-    width: 250px;
-    background-color: #fafafb;
-    padding: 30px;
-    border-bottom-left-radius: 6px;
-
-    @include from-sm-to-lg {
-      width: 90px;
-      padding-right: 30px;
-      margin-right: 0;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .col-content {
-    flex: 1;
-    padding: 30px 80px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-}
diff --git a/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
new file mode 100644
index 0000000000..0f1cb73788
--- /dev/null
+++ b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
@@ -0,0 +1,90 @@
+/**
+ * About You Form
+ * Profile Settings Page
+ */
+import React from 'react';
+import PT from 'prop-types';
+import FormField from 'components/Settings/FormField';
+import FormInputText from 'components/Settings/FormInputText';
+import FormInputTextArea from 'components/Settings/FormInputTextArea';
+
+import '../styles.scss';
+
+const AboutYou = (props) => {
+  const {
+    canModifyTrait,
+    newProfileInfo,
+    newBasicInfo,
+    onUpdateInput,
+  } = props;
+
+  return (
+    <div styleName="basic-info-container">
+      <div styleName="form-container-default">
+        <form name="basic-info-form" noValidate autoComplete="off">
+          {/* Current Location */}
+          <FormField label="Current Location">
+            <FormInputText
+              disabled={!canModifyTrait}
+              id="currentLocation"
+              name="currentLocation"
+              type="text"
+              placeholder="Where in the world are you currently?"
+              onChange={onUpdateInput}
+              value={newBasicInfo.currentLocation}
+              maxLength="64"
+              required
+            />
+          </FormField>
+
+          {/* Primary interests */}
+          <FormField label="Primary interests">
+            <FormInputText
+              disabled={!canModifyTrait}
+              id="primaryInterestInTopcoder"
+              name="primaryInterestInTopcoder"
+              type="text"
+              placeholder="Primary Interest In Topcoder"
+              onChange={onUpdateInput}
+              value={newBasicInfo.primaryInterestInTopcoder}
+              maxLength="64"
+              required
+            />
+          </FormField>
+
+          {/* Primary interests */}
+          <FormField label="Short bio">
+            <FormInputTextArea
+              disabled={!canModifyTrait}
+              id="description"
+              name="description"
+              type="text"
+              placeholder="In 240 characters or less, tell the Topcoder community a bit about yourself"
+              onChange={onUpdateInput}
+              value={newProfileInfo.description}
+              maxLength="240"
+              cols="3"
+              rows="10"
+              required
+            />
+          </FormField>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+AboutYou.defaultProps = {
+  canModifyTrait: false,
+  newProfileInfo: {},
+  newBasicInfo: {},
+};
+
+AboutYou.propTypes = {
+  canModifyTrait: PT.bool,
+  newProfileInfo: PT.shape(),
+  newBasicInfo: PT.shape(),
+  onUpdateInput: PT.func.isRequired,
+};
+
+export default AboutYou;
diff --git a/src/shared/components/Settings/Profile/Hobby/List/Item/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx
similarity index 100%
rename from src/shared/components/Settings/Profile/Hobby/List/Item/index.jsx
rename to src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx
diff --git a/src/shared/components/Settings/Profile/Hobby/List/Item/styles.scss b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss
similarity index 99%
rename from src/shared/components/Settings/Profile/Hobby/List/Item/styles.scss
rename to src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss
index 547acc2b0f..95c86601ca 100644
--- a/src/shared/components/Settings/Profile/Hobby/List/Item/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss
@@ -81,6 +81,7 @@
 
     img {
       margin-bottom: 10px;
+      height: 10px;
 
       @include upto-sm {
         margin-bottom: 0;
diff --git a/src/shared/components/Settings/Profile/Hobby/List/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/List/index.jsx
similarity index 100%
rename from src/shared/components/Settings/Profile/Hobby/List/index.jsx
rename to src/shared/components/Settings/ProfileSettings/Hobbies/List/index.jsx
diff --git a/src/shared/components/Settings/Profile/Organization/List/styles.scss b/src/shared/components/Settings/ProfileSettings/Hobbies/List/styles.scss
similarity index 80%
rename from src/shared/components/Settings/Profile/Organization/List/styles.scss
rename to src/shared/components/Settings/ProfileSettings/Hobbies/List/styles.scss
index c7e24fd6ca..13cbb9cd6e 100644
--- a/src/shared/components/Settings/Profile/Organization/List/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/List/styles.scss
@@ -4,9 +4,14 @@
   width: 100%;
   background-color: $tc-white;
   padding: 0;
+  margin-bottom: 20px;
+
+  @include upto-sm {
+    margin-top: 32px;
+  }
 
   &.active {
-    margin-top: 20px;
+    margin-top: 0;
 
     @include upto-sm {
       margin-top: 0;
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
new file mode 100644
index 0000000000..cd91c95a5a
--- /dev/null
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
@@ -0,0 +1,138 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Hobbies Form
+ * Profile Settings Page
+ */
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+
+import ErrorMessage from 'components/Settings/ErrorMessage';
+import FormInputText from 'components/Settings/FormInputText';
+import FormInputTextArea from 'components/Settings/FormInputTextArea';
+import FormField from 'components/Settings/FormField';
+import AddItemIcon from 'assets/images/settings-add-item.svg';
+import HobbyList from './List';
+
+import './styles.scss';
+
+const Hobbies = (props) => {
+  const {
+    hobbyItems,
+    isEdit,
+    onHandleDeleteHobby,
+    onEditHobby,
+    canModifyTrait,
+    isSubmit,
+    formInvalid,
+    newHobby,
+    onUpdateInput,
+    onHandleAddHobby,
+    onCancelEditStatus,
+  } = props;
+
+  return (
+    <div styleName="hobby-container">
+      {
+      hobbyItems.length > 0
+      && (
+        <HobbyList
+          hobbyList={{ items: hobbyItems }}
+          onDeleteItem={onHandleDeleteHobby}
+          onEditItem={onEditHobby}
+        />
+      )
+    }
+      <div styleName="form-container-default">
+        <form name="device-form" noValidate autoComplete="off">
+          {/* Hobby */}
+          <FormField label="Hobby">
+            <FormInputText
+              id="hobby"
+              name="hobby"
+              type="text"
+              placeholder="Hobby"
+              onChange={onUpdateInput}
+              value={newHobby.hobby}
+              maxLength="128"
+              required
+            />
+            {
+              isSubmit && formInvalid && (
+                <ErrorMessage invalid={_.isEmpty(newHobby.hobby)} message="Hobby cannot be empty" />
+              )
+            }
+          </FormField>
+
+          {/* Description */}
+          <FormField label="Description">
+            <FormInputTextArea
+              disabled={!canModifyTrait}
+              id="description"
+              name="description"
+              type="text"
+              placeholder="Description"
+              onChange={onUpdateInput}
+              value={newHobby.description}
+              maxLength="160"
+              cols="3"
+              rows="10"
+              required
+            />
+          </FormField>
+        </form>
+        <div styleName="edit-text-wrapper">
+          <AddItemIcon />
+          <span
+            styleName="edit-text"
+            role="presentation"
+            disabled={!canModifyTrait}
+            onClick={onHandleAddHobby}
+          >
+            {
+              isEdit ? (<React.Fragment>Edit hobby to your list</React.Fragment>)
+                : (<React.Fragment>Add hobby to your list</React.Fragment>)
+            }
+          </span>
+          {
+          isEdit && (
+            <div styleName="button-cancel">
+              <span
+                role="presentation"
+                styleName="edit-text"
+                onClick={onCancelEditStatus}
+              >
+                Cancel
+              </span>
+            </div>
+          )
+        }
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Hobbies.defaultProps = {
+  hobbyItems: [],
+  isEdit: false,
+  formInvalid: false,
+  isSubmit: false,
+  newHobby: {},
+};
+
+Hobbies.propTypes = {
+  hobbyItems: PT.arrayOf(PT.shape()),
+  isEdit: PT.bool,
+  onHandleDeleteHobby: PT.func.isRequired,
+  onEditHobby: PT.func.isRequired,
+  canModifyTrait: PT.bool.isRequired,
+  formInvalid: PT.bool,
+  isSubmit: PT.bool,
+  newHobby: PT.shape(),
+  onUpdateInput: PT.func.isRequired,
+  onHandleAddHobby: PT.func.isRequired,
+  onCancelEditStatus: PT.func.isRequired,
+};
+
+export default Hobbies;
diff --git a/src/shared/components/Settings/Profile/Hobby/styles.scss b/src/shared/components/Settings/ProfileSettings/Hobbies/styles.scss
similarity index 93%
rename from src/shared/components/Settings/Profile/Hobby/styles.scss
rename to src/shared/components/Settings/ProfileSettings/Hobbies/styles.scss
index 076edab90f..adee659dc0 100644
--- a/src/shared/components/Settings/Profile/Hobby/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/styles.scss
@@ -1,4 +1,21 @@
-@import "../../style";
+@import "~styles/mixins";
+@import "../../style.scss";
+
+.edit-text-wrapper {
+  cursor: pointer;
+}
+
+.edit-text {
+  @include roboto-bold;
+
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: center;
+  color: $listing-checkbox-green;
+  margin-left: 4px;
+  cursor: pointer;
+}
 
 .hide {
   display: none;
@@ -55,6 +72,10 @@ textarea {
       display: none;
     }
   }
+
+  @include upto-sm {
+    margin-top: 32px;
+  }
 }
 
 .error-message {
diff --git a/src/shared/components/Settings/ProfileSettings/ImageInput/index.jsx b/src/shared/components/Settings/ProfileSettings/ImageInput/index.jsx
new file mode 100644
index 0000000000..4a691e7fde
--- /dev/null
+++ b/src/shared/components/Settings/ProfileSettings/ImageInput/index.jsx
@@ -0,0 +1,154 @@
+/**
+ * render a user icom input component.
+ */
+/* global document */
+/* eslint-disable react/forbid-prop-types */
+import React, { useState } from 'react';
+import PT from 'prop-types';
+
+import { Button } from 'topcoder-react-ui-kit';
+import IconEdit from 'assets/images/icon-edit.svg';
+import IconUpload from 'assets/images/icon-upload.svg';
+import loadImage from 'blueimp-load-image';
+
+import _ from 'lodash';
+import style from './styles.scss';
+import PageRow from '../../PageRow';
+
+
+const ImageInput = ({
+  handle, tokenV3,
+  uploadPhoto, uploadPhotoInit, profileState, profile,
+}) => {
+  const { photoURL } = profile;
+  const [isImageOversize, setIsImageOversize] = useState(false);
+  const [isImageFile, setIsImageFile] = useState(true);
+
+  const onChangeImage = (e) => {
+    e.preventDefault();
+    if (!_.isEmpty(profileState) && profileState.uploadingPhoto) {
+      return;
+    }
+    const fileInput = document.querySelector('#change-image-input');
+    fileInput.click();
+  };
+
+  const onUploadPhoto = (e) => {
+    e.preventDefault();
+    if (profileState.uploadingPhoto) {
+      return;
+    }
+    const fileInput = document.querySelector('#change-image-input');
+    const file = fileInput.files[0];
+    if (file === undefined) {
+      return;
+    }
+    const allowedTypes = ['image/png', 'image/jpg', 'image/jpeg'];
+    if (!allowedTypes.includes(file.type)) {
+      setIsImageFile(false);
+      return;
+    }
+    if (file.size > 2 * 1024 * 1024) {
+      // If file size is greater than 2 MB, show error message
+      setIsImageOversize(true);
+      return;
+    }
+    setIsImageOversize(false);
+    setIsImageFile(true);
+    uploadPhotoInit();
+    loadImage.parseMetaData(file, (data) => {
+      let orientation = 0;
+      if (data.exif) {
+        orientation = data.exif.get('Orientation');
+      }
+      loadImage(
+        file,
+        (img) => {
+          img.toBlob(
+            (blobResult) => {
+              uploadPhoto(handle, tokenV3, blobResult);
+            },
+          );
+        }, {
+          canvas: true,
+          orientation,
+        },
+      );
+    });
+  };
+
+  const { uploadingPhoto } = profileState;
+
+  return (
+    <div styleName="image-input">
+      <PageRow>
+        <div>
+          <h3 styleName="title">ADD YOUR IMAGE</h3>
+          <div styleName="sub-title">
+            <p>Show the community who you are. Don&apos;t worry, you look great.</p>
+            <strong>Requirements:</strong>
+            <ul>
+              <li>PNG or JPG format.</li>
+              <li>Maximum size: 2MB.</li>
+            </ul>
+          </div>
+        </div>
+        {!photoURL && (
+        <div styleName="upload-profile-photo">
+          <div styleName="profile-photo-void" />
+          <Button
+            onClick={onChangeImage}
+            theme={{ button: style.uploadButton }}
+          >
+            <IconUpload styleName="icon-upload" />
+            {
+              uploadingPhoto ? <i className="fa fa-spinner fa-spin" styleName="uploading" /> : (
+                <span>UPLOAD</span>
+              )
+            }
+          </Button>
+        </div>
+        )}
+        {photoURL && (
+        <div styleName="upload-profile-photo">
+          <div
+            style={{ backgroundImage: `url(${photoURL})` }}
+            styleName="profile-photo"
+          />
+          <Button
+            onClick={onChangeImage}
+            theme={{ button: style.uploadButton }}
+          >
+            <IconEdit styleName="icon-edit" />
+            {
+              uploadingPhoto ? <i className="fa fa-spinner fa-spin" styleName="uploading" />
+                : (
+                  <span>UPLOAD NEW PHOTO</span>
+                )
+            }
+          </Button>
+        </div>
+        )}
+        <input type="file" name="image" accept="image/*" onChange={onUploadPhoto} id="change-image-input" className="hidden" />
+      </PageRow>
+      {!isImageFile && <div styleName="error-message">Please select jpg, jpeg or png image files only</div>}
+      {isImageFile && isImageOversize && <div styleName="error-message">Please select an image smaller than 2MB</div>}
+    </div>
+  );
+};
+
+ImageInput.defaultProps = {
+  profile: {},
+  profileState: {},
+};
+
+ImageInput.propTypes = {
+  handle: PT.string.isRequired,
+  tokenV3: PT.string.isRequired,
+  profile: PT.shape(),
+  profileState: PT.shape(),
+  uploadPhoto: PT.func.isRequired,
+  uploadPhotoInit: PT.func.isRequired,
+};
+
+export default ImageInput;
diff --git a/src/shared/components/Settings/ProfileSettings/ImageInput/styles.scss b/src/shared/components/Settings/ProfileSettings/ImageInput/styles.scss
new file mode 100644
index 0000000000..df73030983
--- /dev/null
+++ b/src/shared/components/Settings/ProfileSettings/ImageInput/styles.scss
@@ -0,0 +1,134 @@
+@import "~styles/mixins";
+
+.image-input {
+  border-top: 1px solid $listing-light-gray;
+  margin-top: 42px;
+  margin-bottom: 40px;
+  padding-top: 32px;
+
+  @include xs-to-md {
+    margin-top: 22px;
+  }
+
+  .title {
+    @include barlow-bold;
+
+    font-weight: 600;
+    line-height: 26px;
+    font-size: 22px;
+    color: $tco-black;
+
+    @include xs-to-md {
+      @include barlow-condensed-semi-bold;
+
+      line-height: 24px;
+    }
+  }
+
+  .sub-title {
+    @include roboto-regular;
+
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: $tco-black;
+    margin-top: 24px;
+
+    @include xs-to-md {
+      margin-top: 22px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    p {
+      margin-bottom: 8px;
+    }
+
+    ul {
+      list-style: unset;
+      margin-left: 24px;
+    }
+  }
+}
+
+.upload-profile-photo {
+  display: flex;
+  align-items: center;
+  margin-top: 50px;
+
+  @include xs-to-md {
+    margin: 35px 16px;
+  }
+
+  & > button {
+    margin-left: 15px !important;
+  }
+
+  .profile-photo {
+    width: 104px;
+    height: 104px;
+    border-radius: 50%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-right: -30px;
+  }
+
+  .profile-photo-void {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: #fafafa;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-right: -30px;
+    border: 2px dashed #ddd;
+  }
+
+  .icon-edit {
+    width: 20px;
+  }
+
+  .icon-upload {
+    width: 20px;
+    margin: 0 5px 0 0;
+  }
+
+  .uploadButton {
+    background-color: $listing-checkbox-green;
+    padding: 8px 24px 8px 20px;
+    border-radius: 24px;
+    border: 0 !important;
+    height: 40px;
+    color: $tc-white;
+
+    &:hover {
+      background: darken($listing-checkbox-green, 5%);
+    }
+
+    span {
+      @include roboto-bold;
+
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+}
+
+.error-message {
+  @include roboto-medium;
+
+  display: block;
+  border-radius: 5px;
+  background-color: $tc-red-10;
+  color: $tc-red-110;
+  font-size: 15px;
+  padding: 15px;
+  margin: 15px 0;
+}
+
+.uploading {
+  width: 155px;
+}
diff --git a/src/shared/components/Settings/Profile/Education/List/Item/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx
similarity index 98%
rename from src/shared/components/Settings/Profile/Education/List/Item/index.jsx
rename to src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx
index fc8415e89d..d7ef8ca436 100644
--- a/src/shared/components/Settings/Profile/Education/List/Item/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx
@@ -85,7 +85,7 @@ export default function Item(props) {
         </div>
         <div styleName={`education-parameters${hasSecondLine() ? '' : ' single-line'}`}>
           <div styleName={`parameter-first-line${hasSecondLine() ? '' : ' single-line'}`}>
-            { `${education.schoolCollegeName}` }
+            { `${education.schoolCollegeName} | ${education.major}`}
           </div>
           {
             hasSecondLine() && (
diff --git a/src/shared/components/Settings/Profile/Education/List/Item/styles.scss b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss
similarity index 99%
rename from src/shared/components/Settings/Profile/Education/List/Item/styles.scss
rename to src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss
index 2f9a2117a3..5f9eca6b10 100644
--- a/src/shared/components/Settings/Profile/Education/List/Item/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss
@@ -99,6 +99,7 @@
 
     img {
       margin-bottom: 10px;
+      height: 10px;
 
       @include upto-sm {
         margin-bottom: 0;
diff --git a/src/shared/components/Settings/Profile/Education/List/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/List/index.jsx
similarity index 100%
rename from src/shared/components/Settings/Profile/Education/List/index.jsx
rename to src/shared/components/Settings/ProfileSettings/Learning/List/index.jsx
diff --git a/src/shared/components/Settings/Profile/Work/List/styles.scss b/src/shared/components/Settings/ProfileSettings/Learning/List/styles.scss
similarity index 80%
rename from src/shared/components/Settings/Profile/Work/List/styles.scss
rename to src/shared/components/Settings/ProfileSettings/Learning/List/styles.scss
index f053c408f8..c26ee03bf1 100644
--- a/src/shared/components/Settings/Profile/Work/List/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Learning/List/styles.scss
@@ -4,9 +4,14 @@
   width: 100%;
   background-color: $tc-white;
   padding: 0 0;
+  margin-bottom: 20px;
+
+  @include upto-sm {
+    margin-top: 32px;
+  }
 
   &.active {
-    margin-top: 20px;
+    margin-top: 0;
 
     @include upto-sm {
       margin-top: 0;
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
new file mode 100644
index 0000000000..88145ab1fb
--- /dev/null
+++ b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
@@ -0,0 +1,288 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-no-bind */
+/**
+ * Learning And Education Form
+ * Profile Settings Page
+ */
+import _ from 'lodash';
+import React from 'react';
+import ReactSelect from 'react-select';
+import PT from 'prop-types';
+import moment from 'moment';
+
+import ErrorMessage from 'components/Settings/ErrorMessage';
+import FormInputText from 'components/Settings/FormInputText';
+import FormField from 'components/Settings/FormField';
+import AddItemIcon from 'assets/images/settings-add-item.svg';
+import DatePickerGUIKit from '../../../GUIKit/Datepicker';
+
+import EducationList from './List';
+
+import './styles.scss';
+
+const Learning = (props) => {
+  const {
+    formInvalid,
+    isSubmit,
+    isEdit,
+    educationItems,
+    onHandleDeleteEducation,
+    onEditEducation,
+    startDateInvalid,
+    startDateInvalidMsg,
+    endDateInvalid,
+    endDateInvalidMsg,
+    newEducation,
+    onUpdateInput,
+    onUpdateDate,
+    onHandleAddEducation,
+    onCancelEditStatus,
+  } = props;
+
+  const renderResetButton = () => (
+    <div style={{ display: 'flex' }} className="reset-btn-container">
+      <button type="button" onClick={() => {}}>RESET</button>
+    </div>
+  );
+
+  const renderDatePickerMonthElement = ({ month, onMonthSelect, onYearSelect }) => {
+    const monthOptions = moment.months().map((label, value) => ({
+      value, label,
+    }));
+
+    const yearOptions = [];
+    for (let year = moment().year(), i = year; i > year - 99; i -= 1) {
+      yearOptions.push({ value: i, label: `${i}` });
+    }
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <div>
+          <ReactSelect
+            value={month.month()}
+            options={monthOptions}
+            onChange={(option) => {
+              onMonthSelect(month, option.value);
+            }}
+            placeholder="Month"
+            clearable={false}
+            autosize={false}
+            searchable={false}
+            autoBlur={false}
+          />
+        </div>
+        <div>
+          <ReactSelect
+            value={month.year()}
+            options={yearOptions}
+            onChange={(option) => {
+              onYearSelect(month, option.value);
+            }}
+            placeholder="Year"
+            clearable={false}
+            autosize={false}
+            searchable={false}
+            autoBlur={false}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div styleName="education-container">
+      {
+        educationItems.length > 0
+        && (
+          <EducationList
+            educationList={{ items: educationItems }}
+            onDeleteItem={onHandleDeleteEducation}
+            onEditItem={onEditEducation}
+          />
+        )
+      }
+      <div styleName="form-container-default">
+        <form name="device-form" noValidate autoComplete="off">
+          {/* Name of College or University */}
+          <FormField label="Name of College or University">
+            <FormInputText
+              id="schoolCollegeName"
+              name="schoolCollegeName"
+              type="text"
+              placeholder="Enter Name of school"
+              onChange={onUpdateInput}
+              value={newEducation.schoolCollegeName}
+              maxLength="64"
+              required
+            />
+            {
+              isSubmit && formInvalid && (
+                <ErrorMessage invalid={_.isEmpty(newEducation.schoolCollegeName)} message="Name cannot be empty" />
+              )
+            }
+          </FormField>
+
+          {/* Degree */}
+          <FormField label="Degree">
+            <FormInputText
+              id="major"
+              name="major"
+              type="text"
+              placeholder="Enter Degree"
+              onChange={onUpdateInput}
+              value={newEducation.major}
+              maxLength="64"
+              required
+            />
+          </FormField>
+
+          <div styleName="date-wrapper">
+            {/* Start Date */}
+            <FormField label="Degree">
+              <div styleName="datePicker">
+                <DatePickerGUIKit
+                  readOnly
+                  displayFormat="MM/DD/YYYY"
+                  placeholder="MM/DD/YYYY"
+                  isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
+                  value={newEducation.timePeriodFrom}
+                  id="date-from1"
+                  onChange={date => onUpdateDate(date, 'timePeriodFrom')}
+                  renderMonthElement={renderDatePickerMonthElement}
+                />
+              </div>
+              {isSubmit && (
+                <ErrorMessage
+                  invalid={startDateInvalid}
+                  message={startDateInvalidMsg}
+                />
+              )}
+            </FormField>
+
+            {/* End Date */}
+            <FormField label="End Date (or expected)">
+              <div styleName="datePicker">
+                {
+                  newEducation.graduated ? (
+                    <DatePickerGUIKit
+                      readOnly
+                      displayFormat="MM/DD/YYYY"
+                      placeholder="MM/DD/YYYY"
+                      isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
+                      value={newEducation.timePeriodTo}
+                      id="date-to1"
+                      onChange={date => onUpdateDate(date, 'timePeriodTo')}
+                      renderCalendarInfo={() => renderResetButton}
+                      renderMonthElement={renderDatePickerMonthElement}
+                    />
+                  ) : (
+                    <DatePickerGUIKit
+                      readOnly
+                      displayFormat="MM/DD/YYYY"
+                      placeholder="MM/DD/YYYY"
+                      value={newEducation.timePeriodTo}
+                      isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
+                      id="date-to1"
+                      onChange={date => onUpdateDate(date, 'timePeriodTo')}
+                      allowFutureYear
+                      renderCalendarInfo={() => renderResetButton}
+                      renderMonthElement={renderDatePickerMonthElement}
+                    />
+                  )
+                }
+              </div>
+              {
+                isSubmit && (
+                  <ErrorMessage
+                    invalid={endDateInvalid}
+                    message={endDateInvalidMsg}
+                  />
+                )
+              }
+            </FormField>
+          </div>
+
+          <div styleName="checkbox-wrapper">
+            <div styleName="checkbox-input-wrapper">
+              <input
+                name="graduated"
+                checked={newEducation.graduated}
+                id="graduated"
+                onChange={onUpdateInput}
+                type="checkbox"
+              />
+              <label htmlFor="graduated">
+                <div styleName="checkbox-input-label">
+                      &nbsp;
+                </div>
+                <input type="hidden" />
+              </label>
+            </div>
+            <label htmlFor="graduated" styleName="graduated">
+              Graduated
+              <input type="hidden" />
+            </label>
+          </div>
+        </form>
+        <div styleName="edit-text-wrapper">
+          <AddItemIcon />
+          <span
+            role="presentation"
+            styleName="edit-text"
+            onClick={onHandleAddEducation}
+          >
+            {
+              isEdit ? (<React.Fragment>Edit Another School / Degree</React.Fragment>)
+                : (<React.Fragment>Add Another School / Degree</React.Fragment>)
+            }
+          </span>
+        </div>
+        {
+          isEdit && (
+            <div styleName="button-cancel">
+              <span
+                role="presentation"
+                styleName="edit-text"
+                onClick={onCancelEditStatus}
+              >
+                Cancel
+              </span>
+            </div>
+          )
+        }
+      </div>
+    </div>
+  );
+};
+
+Learning.defaultProps = {
+  formInvalid: false,
+  isSubmit: false,
+  isEdit: false,
+  educationItems: [],
+  newEducation: {},
+  startDateInvalid: false,
+  startDateInvalidMsg: '',
+  endDateInvalid: false,
+  endDateInvalidMsg: '',
+};
+
+Learning.propTypes = {
+  formInvalid: PT.bool,
+  isSubmit: PT.bool,
+  isEdit: PT.bool,
+  educationItems: PT.arrayOf(PT.shape()),
+  onHandleDeleteEducation: PT.func.isRequired,
+  onEditEducation: PT.func.isRequired,
+  startDateInvalid: PT.bool,
+  startDateInvalidMsg: PT.string,
+  endDateInvalid: PT.bool,
+  endDateInvalidMsg: PT.string,
+  newEducation: PT.shape(),
+  onUpdateInput: PT.func.isRequired,
+  onUpdateDate: PT.func.isRequired,
+  onHandleAddEducation: PT.func.isRequired,
+  onCancelEditStatus: PT.func.isRequired,
+};
+
+export default Learning;
diff --git a/src/shared/components/Settings/Profile/Education/styles.scss b/src/shared/components/Settings/ProfileSettings/Learning/styles.scss
similarity index 83%
rename from src/shared/components/Settings/Profile/Education/styles.scss
rename to src/shared/components/Settings/ProfileSettings/Learning/styles.scss
index ca6fcec2ea..1d5d77c3bf 100644
--- a/src/shared/components/Settings/Profile/Education/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Learning/styles.scss
@@ -1,110 +1,29 @@
-@import "../../style";
+/* stylelint-disable property-no-unknown */
+/* stylelint-disable no-descending-specificity */
+@import "~styles/mixins";
+@import "../../style.scss";
 
 $checkbox-size: $base-unit * 4;
 $checkbox-bg-empty: $tc-gray-neutral-light;
 $checkbox-bg-selected: $tc-dark-blue;
 
-.hide {
-  display: none;
-}
-
-.education-container {
+.date-wrapper {
   display: flex;
-  flex-direction: column;
-  align-items: left;
-
-  :global {
-    .SingleDatePickerInput {
-      &__showClearDate {
-        padding-right: 0;
-      }
-
-      &_clearDate {
-        padding: 8px 10px;
-        top: 20px;
-        background: transparent;
-      }
-    }
-  }
-
-  @include upto-sm {
-    padding-bottom: 0;
-  }
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
-
-    &.second {
-      margin-top: 50px;
-      margin-bottom: 30px;
-    }
-
-    &.first {
-      margin-bottom: 30px;
-    }
-
-    &.hidden {
-      display: none;
-    }
+  width: 100%;
+  justify-content: space-between;
+  gap: 10px;
 
-    @include upto-sm {
-      display: none;
-    }
-  }
-}
-
-.error-message {
-  display: none;
-
-  &.active {
-    @include roboto-medium;
-
-    display: block;
-    border-radius: 5px;
-    background-color: $tc-red-10;
-    color: $tc-red-110;
-    font-size: 15px;
-    line-height: 21px;
-    padding: 12px 15px;
-    margin-bottom: 15px;
-    white-space: pre-line;
+  & > div {
+    width: 100%;
   }
 }
 
-label {
-  @include roboto-medium;
-
-  display: block;
-  font-size: 12px;
-  line-height: 15px;
-  font-weight: 500;
-  color: $tc-gray-80;
-  margin-bottom: 5px;
-
-  .text-required {
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-left: 5px;
+.datePicker {
+  input {
+    border: 0 !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    height: 25px !important;
   }
 }
 
@@ -168,6 +87,126 @@ label {
   }
 }
 
+.checkbox-wrapper {
+  display: flex;
+  margin-left: -4px;
+
+  .checkbox-input-wrapper {
+    input[type=checkbox] {
+      accent-color: #137d60 !important;
+      box-sizing: border-box;
+      visibility: visible;
+      border: 1.5px solid #7f7f7f;
+      border-radius: 3px;
+      height: $checkbox-size;
+      width: $checkbox-size;
+    }
+  }
+
+  .graduated {
+    @include roboto-regular;
+
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: $tco-black;
+    margin: 0;
+  }
+
+  .checkbox-input-label {
+    display: inline-block;
+
+    @include roboto-regular;
+
+    font-size: 13px;
+    line-height: $checkbox-size;
+    vertical-align: middle;
+    margin-left: $base-unit * 6;
+    user-select: none;
+    cursor: pointer;
+  }
+}
+
+.edit-text-wrapper {
+  cursor: pointer;
+}
+
+.edit-text {
+  @include roboto-bold;
+
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: center;
+  color: $listing-checkbox-green;
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+.hide {
+  display: none;
+}
+
+.education-container {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+
+  :global {
+    .SingleDatePickerInput {
+      &__showClearDate {
+        padding-right: 0;
+      }
+
+      &_clearDate {
+        padding: 8px 10px;
+        top: 20px;
+        background: transparent;
+      }
+    }
+  }
+
+  @include upto-sm {
+    padding-bottom: 0;
+    margin-top: 32px;
+  }
+}
+
+.error-message {
+  display: none;
+
+  &.active {
+    @include roboto-medium;
+
+    display: block;
+    border-radius: 5px;
+    background-color: $tc-red-10;
+    color: $tc-red-110;
+    font-size: 15px;
+    line-height: 21px;
+    padding: 12px 15px;
+    margin-bottom: 15px;
+    white-space: pre-line;
+  }
+}
+
+label {
+  @include roboto-medium;
+
+  display: block;
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  color: $tc-gray-80;
+  margin-bottom: 5px;
+
+  .text-required {
+    font-size: 10px;
+    color: $tc-red-110;
+    margin-left: 5px;
+  }
+}
+
 .form-container-default {
   @include form-container-default;
 
@@ -376,10 +415,6 @@ label {
         width: 156px;
       }
     }
-
-    .complete {
-      color: $tc-white;
-    }
   }
 
   .button-cancel {
diff --git a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
new file mode 100644
index 0000000000..974875aae1
--- /dev/null
+++ b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
@@ -0,0 +1,295 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-no-bind */
+/**
+ * Personal Details Form
+ * Profile Settings Page
+ */
+import _ from 'lodash';
+import React from 'react';
+import ReactSelect from 'react-select';
+import PT from 'prop-types';
+import moment from 'moment';
+import ErrorMessage from 'components/Settings/ErrorMessage';
+import FormInputText from 'components/Settings/FormInputText';
+import Select from 'components/Settings/FormInputSelect';
+import FormField from 'components/Settings/FormField';
+import DatePickerGUIKit from '../../../GUIKit/Datepicker';
+
+import '../styles.scss';
+
+const PersonalDetails = (props) => {
+  const {
+    canModifyTrait,
+    countries,
+    newProfileInfo,
+    newBasicInfo,
+    onUpdateDate,
+    onUpdateInput,
+    inputChanged,
+    onUpdateCountry,
+  } = props;
+
+  const renderResetButton = () => (
+    <div style={{ display: 'flex' }} className="reset-btn-container">
+      <button type="button" onClick={() => {}}>RESET</button>
+    </div>
+  );
+
+  const renderDatePickerMonthElement = ({ month, onMonthSelect, onYearSelect }) => {
+    const monthOptions = moment.months().map((label, value) => ({
+      value, label,
+    }));
+
+    const yearOptions = [];
+    for (let year = moment().year(), i = year; i > year - 99; i -= 1) {
+      yearOptions.push({ value: i, label: `${i}` });
+    }
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <div>
+          <ReactSelect
+            value={month.month()}
+            options={monthOptions}
+            onChange={(option) => {
+              onMonthSelect(month, option.value);
+            }}
+            placeholder="Month"
+            clearable={false}
+            autosize={false}
+            searchable={false}
+            autoBlur={false}
+          />
+        </div>
+        <div>
+          <ReactSelect
+            value={month.year()}
+            options={yearOptions}
+            onChange={(option) => {
+              onYearSelect(month, option.value);
+            }}
+            placeholder="Year"
+            clearable={false}
+            autosize={false}
+            searchable={false}
+            autoBlur={false}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div styleName="basic-info-container">
+      <div styleName="form-container-default">
+        <form name="basic-info-form" noValidate autoComplete="off">
+
+          {/* First Name */}
+          <FormField label="First Name">
+            <FormInputText
+              disabled={!canModifyTrait}
+              id="firstName"
+              name="firstName"
+              type="text"
+              placeholder="Enter First Name"
+              onChange={onUpdateInput}
+              value={newProfileInfo.firstName}
+              maxLength="64"
+              required
+            />
+            <ErrorMessage
+              invalid={
+                _.isEmpty(newProfileInfo.firstName)
+                && !_.isNull(newProfileInfo.firstName)
+                && inputChanged
+              }
+              message="First Name cannot be empty"
+            />
+          </FormField>
+
+          {/* Last Name */}
+          <FormField label="Last Name">
+            <FormInputText
+              disabled={!canModifyTrait}
+              id="lastName"
+              name="lastName"
+              type="text"
+              placeholder="Enter Last Name"
+              onChange={onUpdateInput}
+              value={newProfileInfo.lastName}
+              maxLength="64"
+              required
+            />
+            <ErrorMessage
+              invalid={
+                _.isEmpty(newProfileInfo.lastName)
+                && !_.isNull(newProfileInfo.lastName)
+                && inputChanged
+              }
+              message="Last Name cannot be empty"
+            />
+          </FormField>
+
+          {/* Birth Date */}
+          <FormField label="Birth Date">
+            <div styleName="datePicker">
+              <DatePickerGUIKit
+                readOnly
+                displayFormat="MM/DD/YYYY"
+                placeholder="MM/DD/YYYY"
+                isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
+                value={newBasicInfo.birthDate ? moment(newBasicInfo.birthDate).toDate() : null}
+                id="date-range-picker1"
+                renderMonthElement={renderDatePickerMonthElement}
+                onChange={date => onUpdateDate(date ? moment(date).format('MM/DD/YYYY') : null)}
+                renderCalendarInfo={() => renderResetButton}
+              />
+            </div>
+          </FormField>
+
+          {/* Address */}
+          <FormField label="Address">
+            <FormInputText
+              disabled={!canModifyTrait}
+              id="address"
+              name="streetAddr1"
+              type="text"
+              placeholder="Your address"
+              onChange={onUpdateInput}
+              value={`${
+                newProfileInfo.addresses.length > 0
+                && newProfileInfo.addresses[0].streetAddr1 != null
+                  ? newProfileInfo.addresses[0].streetAddr1
+                  : ''
+              }`}
+              maxLength="64"
+              required
+            />
+          </FormField>
+
+          {/* Address 2 */}
+          <FormField label="Address 2">
+            <FormInputText
+              disabled={!canModifyTrait}
+              id="address2"
+              name="streetAddr2"
+              type="text"
+              placeholder="Your address continued"
+              onChange={onUpdateInput}
+              value={`${
+                newProfileInfo.addresses.length > 0
+                && newProfileInfo.addresses[0].streetAddr2 != null
+                  ? newProfileInfo.addresses[0].streetAddr2
+                  : ''
+              }`}
+              maxLength="64"
+            />
+          </FormField>
+
+          {/* City */}
+          <FormField label="City">
+            <FormInputText
+              disabled={!canModifyTrait}
+              id="city"
+              name="city"
+              type="text"
+              placeholder="Which city do you live in?"
+              onChange={onUpdateInput}
+              value={`${
+                newProfileInfo.addresses.length > 0
+                && newProfileInfo.addresses[0].city != null
+                  ? newProfileInfo.addresses[0].city
+                  : ''
+              }`}
+              maxLength="64"
+              required
+            />
+          </FormField>
+
+          {/* State */}
+          <FormField label="State">
+            <FormInputText
+              disabled={!canModifyTrait}
+              id="state"
+              name="stateCode"
+              type="text"
+              placeholder="State"
+              onChange={onUpdateInput}
+              value={`${
+                newProfileInfo.addresses.length > 0
+                && newProfileInfo.addresses[0].stateCode != null
+                  ? newProfileInfo.addresses[0].stateCode
+                  : ''
+              }`}
+              maxLength="64"
+              required
+            />
+          </FormField>
+
+          {/* Zip */}
+          <FormField label="ZIP">
+            <FormInputText
+              disabled={!canModifyTrait}
+              id="zipCode"
+              name="zip"
+              type="text"
+              placeholder="Your ZIP or Postal Code"
+              onChange={onUpdateInput}
+              value={`${
+                newProfileInfo.addresses.length > 0
+                && newProfileInfo.addresses[0].zip != null
+                  ? newProfileInfo.addresses[0].zip
+                  : ''
+              }`}
+              maxLength="64"
+              required
+            />
+          </FormField>
+
+          {/* Country */}
+          <FormField label="Country">
+            <Select
+              name="country"
+              options={countries}
+              value={newBasicInfo.country}
+              onChange={onUpdateCountry}
+              placeholder="Country"
+              matchPos="start"
+              matchProp="name"
+              labelKey="name"
+              valueKey="name"
+              disabled={!canModifyTrait}
+              clearable={false}
+            />
+            <ErrorMessage
+              invalid={_.isEmpty(newBasicInfo.country) && inputChanged}
+              message="Country cannot be empty"
+              addMargin
+            />
+          </FormField>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+PersonalDetails.defaultProps = {
+  countries: [],
+  canModifyTrait: false,
+  newProfileInfo: {},
+  newBasicInfo: {},
+  inputChanged: false,
+};
+
+PersonalDetails.propTypes = {
+  countries: PT.arrayOf(PT.shape()),
+  canModifyTrait: PT.bool,
+  newProfileInfo: PT.shape(),
+  newBasicInfo: PT.shape(),
+  onUpdateDate: PT.func.isRequired,
+  onUpdateInput: PT.func.isRequired,
+  onUpdateCountry: PT.func.isRequired,
+  inputChanged: PT.bool,
+};
+
+export default PersonalDetails;
diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
new file mode 100644
index 0000000000..611366f5c0
--- /dev/null
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -0,0 +1,1150 @@
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import moment from 'moment';
+
+import ConsentComponent from 'components/Settings/ConsentComponent';
+
+import fetch from 'isomorphic-fetch';
+import { config } from 'topcoder-react-utils';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
+
+import { validateStartDate, validateEndDate } from 'utils/settings';
+import ImageInput from './ImageInput';
+import SettingsBanner from '../SettingsBanner';
+import PersonalDetails from './PersonalDetails';
+
+import style from './styles.scss';
+
+import { PROFILE_SETTINGS } from '../constants';
+import AboutYou from './AboutYou';
+import Learning from './Learning';
+import Hobbies from './Hobbies';
+import ConfirmationModal from '../ConfirmationModal';
+
+class ProfileSettings extends ConsentComponent {
+  constructor(props) {
+    super(props);
+
+    this.shouldDisableSave = this.shouldDisableSave.bind(this);
+    this.onUpdateCountry = this.onUpdateCountry.bind(this);
+    this.onUpdateInput = this.onUpdateInput.bind(this);
+    this.onUpdateDate = this.onUpdateDate.bind(this);
+    this.onHandleSaveBasicInfo = this.onHandleSaveBasicInfo.bind(this);
+    this.onSaveBasicInfo = this.onSaveBasicInfo.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onCheckFormValue = this.onCheckFormValue.bind(this);
+    this.processBasicInfo = this.processBasicInfo.bind(this);
+
+    this.onHandleDeleteEducation = this.onHandleDeleteEducation.bind(this);
+    this.onDeleteEducation = this.onDeleteEducation.bind(this);
+    this.onEditEducation = this.onEditEducation.bind(this);
+    this.loadEducationTrait = this.loadEducationTrait.bind(this);
+    this.onUpdateEducationInput = this.onUpdateEducationInput.bind(this);
+    this.onHandleAddEducation = this.onHandleAddEducation.bind(this);
+    this.onAddEducation = this.onAddEducation.bind(this);
+    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
+    this.updatePredicate = this.updatePredicate.bind(this);
+    this.onUpdateEducationDate = this.onUpdateEducationDate.bind(this);
+    this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
+    this.onCheckEducationFormValue = this.onCheckEducationFormValue.bind(this);
+
+    this.onHandleDeleteHobby = this.onHandleDeleteHobby.bind(this);
+    this.onDeleteHobby = this.onDeleteHobby.bind(this);
+    this.onEditHobby = this.onEditHobby.bind(this);
+    this.loadHobbyTrait = this.loadHobbyTrait.bind(this);
+    this.onUpdateHobbyInput = this.onUpdateHobbyInput.bind(this);
+    this.onHandleAddHobby = this.onHandleAddHobby.bind(this);
+    this.onAddHobby = this.onAddHobby.bind(this);
+    this.onCancelEditStatusHobby = this.onCancelEditStatusHobby.bind(this);
+
+
+    const { userTraits } = props;
+    this.state = {
+      inputChanged: false,
+      formInvalid: false,
+      startDateInvalid: false,
+      startDateInvalidMsg: '',
+      endDateInvalid: false,
+      endDateInvalidMsg: '',
+      basicInfoTrait: this.loadBasicInfoTraits(userTraits),
+      profile: {},
+      educationTrait: this.loadEducationTrait(userTraits),
+      newEducation: {
+        schoolCollegeName: '',
+        major: '',
+        timePeriodFrom: '',
+        timePeriodTo: '',
+        graduated: false,
+      },
+      isSubmit: false,
+      isMobileView: false,
+      screenSM: 767,
+      isEdit: false,
+      indexNo: null,
+      showConfirmation: false,
+      showConfirmationHobby: false,
+      personalizationTrait: this.loadPersonalizationTrait(userTraits),
+      newProfileInfo: {
+        firstName: null,
+        lastName: null,
+        tracks: [],
+        status: null,
+        addresses: [],
+        description: '',
+        email: null,
+        homeCountryCode: null,
+        competitionCountryCode: null,
+        photoURL: null,
+      },
+      newBasicInfo: {
+        gender: null,
+        shortBio: '',
+        tshirtSize: null,
+        country: null,
+        primaryInterestInTopcoder: null,
+        currentLocation: null,
+        birthDate: null,
+      },
+      hobbyTrait: this.loadHobbyTrait(userTraits),
+      formInvalidHobby: false,
+      isSubmitHobby: false,
+      indexNoHobby: null,
+      isHobbyEdit: false,
+      newHobby: {
+        hobby: '',
+        description: '',
+      },
+    };
+  }
+
+  componentDidMount() {
+    const { basicInfoTrait } = this.state;
+    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
+    this.processBasicInfo(basicInfo, this.props.profile);
+    this.setState({ profile: this.props.profile });
+    this.updatePredicate();
+    window.addEventListener('resize', this.updatePredicate);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const basicInfoTrait = this.loadBasicInfoTraits(nextProps.userTraits);
+
+    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
+    const previousBasicInfoTrait = this.loadBasicInfoTraits(this.props.userTraits);
+
+    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
+    const educationTrait = this.loadEducationTrait(nextProps.userTraits);
+    const hobbyTrait = this.loadHobbyTrait(nextProps.userTraits);
+
+    if (!_.isEqual(basicInfoTrait, previousBasicInfoTrait)) {
+      this.processBasicInfo(basicInfo, nextProps.profile);
+      this.setState({
+        basicInfoTrait,
+        personalizationTrait,
+        inputChanged: false,
+      });
+    }
+    if (!_.isEqual(this.state.profile, nextProps.profile)) {
+      this.processBasicInfo(basicInfo, nextProps.profile);
+      this.setState({ profile: nextProps.profile });
+    }
+    if (nextProps.lookupData) {
+      const { countries } = nextProps.lookupData;
+      const { newBasicInfo, newProfileInfo } = this.state;
+      if (!newBasicInfo.country) {
+        const code = newProfileInfo.homeCountryCode || newProfileInfo.competitionCountryCode;
+        const { country } = countries.find(c => c.countryCode === code) || {};
+        newBasicInfo.country = country;
+        this.setState({ newBasicInfo });
+      }
+    }
+
+    this.setState({
+      educationTrait,
+      personalizationTrait,
+      formInvalid: false,
+      startDateInvalid: false,
+      startDateInvalidMsg: '',
+      endDateInvalid: false,
+      endDateInvalidMsg: '',
+      isSubmit: false,
+      newEducation: {
+        schoolCollegeName: '',
+        major: '',
+        timePeriodFrom: '',
+        timePeriodTo: '',
+        graduated: false,
+      },
+    });
+
+    this.setState({
+      hobbyTrait,
+      personalizationTrait,
+      formInvalidHobby: false,
+      isSubmitHobby: false,
+      newHobby: {
+        hobby: '',
+        description: '',
+      },
+    });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updatePredicate);
+  }
+
+  onCheckFormValue(newBasicInfo, newProfileInfo) {
+    let invalid = false;
+
+    if (!_.trim(newProfileInfo.firstName).length) {
+      invalid = true;
+    }
+
+    if (!_.trim(newProfileInfo.lastName).length) {
+      invalid = true;
+    }
+
+    if (!_.trim(newBasicInfo.country).length) {
+      invalid = true;
+    }
+
+    if (_.trim(newBasicInfo.birthDate).length > 0) {
+      if (!moment().isAfter(newBasicInfo.birthDate)) {
+        invalid = true;
+      }
+    }
+
+    this.setState({ formInvalid: invalid });
+    return invalid;
+  }
+
+  async onCheckUserTrait(traitId) {
+    const { handle, tokenV3 } = this.props;
+    let isExists = false;
+    await fetch(`${config.API.V5}/members/${handle}/traits?traitIds=${traitId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${tokenV3}`,
+      },
+    })
+      .then(result => result.json())
+      .then((dataResponse) => {
+        if (dataResponse.length > 0) {
+          const trait = dataResponse[0];
+          if (trait.createdAt) {
+            isExists = true;
+          }
+        }
+      });
+
+    return isExists;
+  }
+
+  /**
+   * Save Personal Details
+   * @param {*} e event
+   */
+  onHandleSaveBasicInfo(e) {
+    e.preventDefault();
+    const { setIsSaving } = this.props;
+    this.setState({ inputChange: true });
+    setIsSaving(true);
+    const { newBasicInfo, newProfileInfo } = this.state;
+    if (this.onCheckFormValue(newBasicInfo, newProfileInfo)) {
+      setIsSaving(false);
+      return;
+    }
+    this.showConsent(this.onSaveBasicInfo.bind(this));
+  }
+
+  /**
+   * Save Basic Info
+   * @param answer user consent answer value
+   */
+  async onSaveBasicInfo(answer) {
+    const {
+      newBasicInfo, newProfileInfo, basicInfoTrait, personalizationTrait,
+    } = this.state;
+    const {
+      handle,
+      tokenV3,
+      addUserTrait,
+      updateUserTrait,
+      updateProfileV5,
+    } = this.props;
+    try {
+      const parsedDate = moment(newBasicInfo.birthDate).utc();
+      if (parsedDate.isValid()) {
+        newBasicInfo.birthDate = `${parsedDate.format('YYYY-MM-DD')}T00:00:00.000Z`;
+      } else {
+        newBasicInfo.birthDate = null;
+      }
+    } catch (error) { // eslint-disable-line
+      newBasicInfo.birthDate = null;
+    }
+
+    if (newBasicInfo.gender === '') {
+      newBasicInfo.gender = null;
+    }
+
+    if (newBasicInfo.tshirtSize === '') {
+      newBasicInfo.tshirtSize = null;
+    }
+
+    newProfileInfo.addresses[0] = _.omit(newProfileInfo.addresses[0], ['createdAt', 'updatedBy', 'createdBy', 'updatedAt']);
+    _.forEach(newProfileInfo.addresses[0], (value, key) => {
+      newProfileInfo.addresses[0][key] = _.trim(value);
+    });
+    _.forEach(['currentLocation', 'primaryInterestInTopcoder'], (key) => {
+      newBasicInfo[key] = _.trim(newBasicInfo[key]);
+    });
+    _.forEach(['description'], (key) => {
+      newProfileInfo[key] = _.trim(newProfileInfo[key]);
+    });
+    // This is a hack to check if the user has an existing basic_info trait object
+    const exists = await this.onCheckUserTrait('basic_info');
+    if (exists) {
+      const newBasicInfoTrait = { ...basicInfoTrait };
+      newBasicInfoTrait.traits.data = [];
+      newBasicInfoTrait.traits.data.push(newBasicInfo);
+      await updateUserTrait(handle, 'basic_info', newBasicInfoTrait.traits.data, tokenV3);
+    } else {
+      const data = [];
+      data.push(newBasicInfo);
+      await addUserTrait(handle, 'basic_info', data, tokenV3);
+    }
+
+    // save personalization
+    if (_.isEmpty(personalizationTrait)) {
+      const personalizationData = { userConsent: answer };
+      await addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+    } else {
+      const trait = personalizationTrait.traits.data[0];
+      if (trait.userConsent !== answer) {
+        const personalizationData = { userConsent: answer };
+        await updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+      }
+    }
+
+    if (newProfileInfo.homeCountryCode == null) {
+      delete newProfileInfo.homeCountryCode;
+    }
+
+    const updateProfileData = {
+      ...newProfileInfo,
+    };
+
+    await updateProfileV5(updateProfileData, handle, tokenV3);
+
+    this.props.setIsSaving(false);
+  }
+
+  onUpdateInput(e) {
+    const { newBasicInfo: oldBasicInfo, newProfileInfo: oldProfileInfo } = this.state;
+    const newBasicInfo = { ...oldBasicInfo };
+    const newProfileInfo = { ...oldProfileInfo };
+    const { name, value } = e.target;
+    switch (name) {
+      case 'stateCode':
+      case 'zip':
+      case 'city':
+      case 'streetAddr1':
+      case 'streetAddr2':
+        if (newProfileInfo.addresses.length === 0) {
+          newProfileInfo.addresses.push({
+            stateCode: '',
+            zip: '',
+            city: '',
+            streetAddr1: '',
+            streetAddr2: '',
+          });
+        }
+        newProfileInfo.addresses[0][name] = value;
+        break;
+      case 'firstName':
+      case 'lastName':
+        newProfileInfo[name] = value.replace(/[^a-zA-Z0-9,. -]/g, '');
+        break;
+      default:
+        if (name in newProfileInfo) {
+          newProfileInfo[name] = value;
+        } else if (name in newBasicInfo) {
+          newBasicInfo[name] = value;
+        }
+    }
+
+    this.setState({ newBasicInfo, newProfileInfo, inputChanged: true });
+  }
+
+  onUpdateDate(date) {
+    if (date) {
+      const { newBasicInfo: oldBasicInfo } = this.state;
+      const newBasicInfo = { ...oldBasicInfo };
+      newBasicInfo.birthDate = date;
+      this.setState({ newBasicInfo, inputChanged: true });
+    }
+  }
+
+  onUpdateCountry(country) {
+    if (country) {
+      const { newBasicInfo: oldBasicInfo } = this.state;
+      const newBasicInfo = { ...oldBasicInfo };
+      newBasicInfo.country = country.name;
+      newBasicInfo.competitionCountryCode = country.key;
+      newBasicInfo.homeCountryCode = country.key;
+      this.setState({ newBasicInfo, inputChanged: true });
+    }
+  }
+
+  /**
+   * Change toggle button check value
+   * @param id community id
+   * @param checked check value
+   */
+  onChange(id, checked) {
+    const { newProfileInfo } = this.state;
+    if (checked) {
+      newProfileInfo.tracks.push(id.toUpperCase());
+    } else {
+      _.remove(newProfileInfo.tracks, track => (
+        track.toUpperCase() === id.toUpperCase()
+      ));
+    }
+    this.setState({ newProfileInfo, inputChanged: true });
+  }
+
+  /**
+   * Get basic info trait
+   * @param userTraits the all user traits
+   */
+  loadBasicInfoTraits = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'basic_info');
+    const basicInfo = trait.length === 0 ? {} : trait[trait.length - 1];
+    return _.assign({}, basicInfo);
+  }
+
+  /**
+   * Get personalization trait
+   * @param userTraits the all user traits
+   */
+  loadPersonalizationTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'personalization');
+    const personalization = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, personalization);
+  }
+
+  /**
+   * Process basic info state
+   */
+  processBasicInfo = (value, profile) => {
+    const { newBasicInfo, newProfileInfo: profileInfo } = this.state;
+    if (_.has(profile, 'handle')) {
+      const newProfileInfo = Object.keys(profileInfo).reduce((acc, key) => {
+        if (_.has(profileInfo, key)) {
+          acc[key] = profile[key] || profileInfo[key];
+        }
+        return acc;
+      }, {});
+      const basicInfo = Object.keys(newBasicInfo).reduce((acc, key) => {
+        if (_.has(value, key)) {
+          acc[key] = value[key];
+          newBasicInfo[key] = value[key];
+        }
+        return acc;
+      }, {});
+      this.setState({ newBasicInfo: basicInfo, newProfileInfo });
+    }
+    if (_.has(value, 'tshirtSize')) {
+      newBasicInfo.tshirtSize = value.tshirtSize;
+    }
+    if (_.has(value, 'userId')) {
+      newBasicInfo.userId = value.userId;
+    } else {
+      newBasicInfo.userId = profile.userId;
+    }
+    this.setState({ newBasicInfo });
+  }
+
+  /**
+   * Check form validation
+   * @returns {boolean}
+   */
+  shouldDisableSave() {
+    const { newBasicInfo, inputChanged, newProfileInfo } = this.state;
+
+    const { addresses } = newProfileInfo;
+
+    const invalid = !_.trim(newProfileInfo.firstName).length
+      || !_.trim(newProfileInfo.lastName).length
+      || !_.trim(newBasicInfo.gender).length
+      || !_.trim(newBasicInfo.tshirtSize).length
+      || !_.trim(newBasicInfo.country).length
+      || !_.trim(newBasicInfo.primaryInterestInTopcoder).length
+      || !_.trim(newBasicInfo.currentLocation).length
+      || !_.trim(newBasicInfo.birthDate).length
+      || (addresses.length > 0 && !_.trim(addresses[0].city).length)
+      || (addresses.length > 0 && !_.trim(addresses[0].stateCode).length)
+      || (addresses.length > 0 && !_.trim(addresses[0].zip).length)
+      || (addresses.length > 0
+        && !_.trim(addresses[0].streetAddr1).length);
+
+    // Invalid value, can not save
+    if (invalid) {
+      return true;
+    }
+
+    // Value not changed, no need save
+    return inputChanged === false;
+  }
+
+  /**
+   * Check form fields value,
+   * Invalid value, can not save
+   * @param newEducation object
+   */
+  onCheckEducationFormValue(newEducation) {
+    let invalid = false;
+
+    if (!_.trim(newEducation.schoolCollegeName).length) {
+      invalid = true;
+    }
+
+    const fromDateValidResult = validateStartDate(newEducation.graduated,
+      newEducation.timePeriodFrom, newEducation.timePeriodTo);
+    const endDateValidResult = validateEndDate(newEducation.graduated,
+      newEducation.timePeriodFrom, newEducation.timePeriodTo);
+    const formInvalid = invalid || fromDateValidResult.invalid || endDateValidResult.invalid;
+
+    this.setState({
+      formInvalid,
+      startDateInvalid: fromDateValidResult.invalid,
+      startDateInvalidMsg: fromDateValidResult.message,
+      endDateInvalidMsg: endDateValidResult.message,
+      endDateInvalid: endDateValidResult.invalid,
+    });
+    return formInvalid;
+  }
+
+  onCheckStartDate() {
+    const { newEducation } = this.state;
+    const currentDate = new Date().setHours(0, 0, 0, 0);
+    const result = {
+      invalid: false,
+      message: '',
+    };
+
+    if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) {
+      const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
+
+      if (fromDate > currentDate) {
+        result.invalid = true;
+        result.message = 'Start Date should be in past or current';
+      }
+    } else if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
+      const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
+      const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
+
+      if (fromDate > currentDate) {
+        result.invalid = true;
+        result.message = 'Start Date should be in past or current';
+      }
+
+      if (fromDate >= toDate) {
+        result.invalid = true;
+        result.message = 'Start Date should be before End Date';
+      }
+    }
+
+    return result;
+  }
+
+  onHandleDeleteEducation(indexNo) {
+    this.setState({
+      showConfirmation: true,
+      indexNo,
+    });
+  }
+
+  onUpdateEducationDate(date, timePeriod) {
+    const { newEducation: oldEducation } = this.state;
+    const newEducation = { ...oldEducation };
+    newEducation[timePeriod] = date || '';
+    this.setState({ newEducation, isSubmit: false });
+  }
+
+  /**
+   * Delete education by index
+   * @param indexNo the education index no
+   */
+  onDeleteEducation(indexNo) {
+    const { educationTrait } = this.state;
+    const newEducationTrait = { ...educationTrait };
+    newEducationTrait.traits.data.splice(indexNo, 1);
+    this.setState({
+      educationTrait: newEducationTrait,
+    });
+
+    const {
+      handle,
+      tokenV3,
+      updateUserTrait,
+      deleteUserTrait,
+    } = this.props;
+
+    if (newEducationTrait.traits.data.length > 0) {
+      updateUserTrait(handle, 'education', newEducationTrait.traits.data, tokenV3);
+    } else {
+      deleteUserTrait(handle, 'education', tokenV3);
+    }
+
+    this.setState({
+      showConfirmation: false,
+      indexNo: null,
+      isSubmit: false,
+      isEdit: false,
+      formInvalid: false,
+      startDateInvalid: false,
+      startDateInvalidMsg: '',
+      endDateInvalid: false,
+      endDateInvalidMsg: '',
+    });
+  }
+
+  /**
+   * Edit Education by index
+   * @param indexNo the education index no
+   */
+  onEditEducation(indexNo) {
+    const { educationTrait } = this.state;
+    this.setState({
+      newEducation: {
+        schoolCollegeName: educationTrait.traits.data[indexNo].schoolCollegeName,
+        major: _.isEmpty(educationTrait.traits.data[indexNo].major) ? '' : educationTrait.traits.data[indexNo].major,
+        timePeriodFrom: _.isEmpty(educationTrait.traits.data[indexNo].timePeriodFrom) ? '' : educationTrait.traits.data[indexNo].timePeriodFrom,
+        timePeriodTo: _.isEmpty(educationTrait.traits.data[indexNo].timePeriodTo) ? '' : educationTrait.traits.data[indexNo].timePeriodTo,
+        graduated: educationTrait.traits.data[indexNo].graduated,
+      },
+      isSubmit: false,
+      isEdit: true,
+      indexNo,
+      formInvalid: false,
+      startDateInvalid: false,
+      startDateInvalidMsg: '',
+      endDateInvalid: false,
+      endDateInvalidMsg: '',
+    });
+  }
+
+  /**
+   * Add new education
+   * @param answer user consent answer value
+   */
+  onAddEducation(answer) {
+    const {
+      newEducation, personalizationTrait, isEdit, indexNo,
+    } = this.state;
+
+    if (this.onCheckEducationFormValue(newEducation)) {
+      return;
+    }
+
+    const {
+      handle,
+      tokenV3,
+      updateUserTrait,
+      addUserTrait,
+    } = this.props;
+
+    const { educationTrait } = this.state;
+
+    const education = _.clone(newEducation);
+    if (_.isEmpty(education.major)) {
+      delete education.major;
+    }
+    if (_.isEmpty(education.timePeriodFrom)) {
+      delete education.timePeriodFrom;
+    } else {
+      education.timePeriodFrom = new Date(newEducation.timePeriodFrom).getTime();
+    }
+    if (_.isEmpty(education.timePeriodTo)) {
+      delete education.timePeriodTo;
+    } else {
+      education.timePeriodTo = new Date(newEducation.timePeriodTo).getTime();
+    }
+
+    if (educationTrait.traits && educationTrait.traits.data.length > 0) {
+      const newEducationTrait = _.cloneDeep(educationTrait);
+      if (isEdit) {
+        newEducationTrait.traits.data.splice(indexNo, 1);
+      }
+      newEducationTrait.traits.data.push(education);
+      updateUserTrait(handle, 'education', newEducationTrait.traits.data, tokenV3);
+    } else {
+      const newEducations = [];
+      newEducations.push(education);
+      addUserTrait(handle, 'education', newEducations, tokenV3);
+    }
+    const empty = {
+      schoolCollegeName: '',
+      major: '',
+      timePeriodFrom: '',
+      timePeriodTo: '',
+      graduated: false,
+    };
+    this.setState({
+      newEducation: empty,
+      isEdit: false,
+      indexNo: null,
+      isSubmit: false,
+    });
+    // save personalization
+    if (_.isEmpty(personalizationTrait)) {
+      const personalizationData = { userConsent: answer };
+      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+    } else {
+      const trait = personalizationTrait.traits.data[0];
+      if (trait.userConsent !== answer) {
+        const personalizationData = { userConsent: answer };
+        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+      }
+    }
+  }
+
+  /**
+   * Update education input value
+   * @param e event
+   */
+  onUpdateEducationInput(e) {
+    const { newEducation: oldEducation } = this.state;
+    const newEducation = { ...oldEducation };
+    if (e.target.type !== 'checkbox') {
+      newEducation[e.target.name] = e.target.value;
+    } else {
+      newEducation[e.target.name] = e.target.checked;
+      if (e.target.checked) { // if graduated and toDate is in Future, nullify it
+        const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
+        const currentDate = new Date().setHours(0, 0, 0, 0);
+        if (toDate > currentDate) {
+          newEducation.timePeriodTo = '';
+        }
+      }
+    }
+
+    this.setState({ newEducation, isSubmit: false });
+  }
+
+  /**
+   * Show User Consent Modal
+   * @param e event
+   */
+  onHandleAddEducation(e) {
+    e.preventDefault();
+    const { newEducation } = this.state;
+    this.setState({ isSubmit: true });
+    if (this.onCheckEducationFormValue(newEducation)) {
+      return;
+    }
+    this.showConsent(this.onAddEducation.bind(this));
+  }
+
+  /**
+   * Get education trait
+   * @param userTraits the all user traits
+   */
+  loadEducationTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'education');
+    const educations = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, educations);
+  }
+
+  updatePredicate() {
+    const { screenSM } = this.state;
+    this.setState({ isMobileView: window.innerWidth <= screenSM });
+  }
+
+  onCancelEditStatus() {
+    const { isEdit } = this.state;
+    if (isEdit) {
+      this.setState({
+        isEdit: false,
+        isSubmit: false,
+        indexNo: null,
+        newEducation: {
+          schoolCollegeName: '',
+          major: '',
+          timePeriodFrom: '',
+          timePeriodTo: '',
+          graduated: false,
+        },
+        formInvalid: false,
+        startDateInvalid: false,
+        startDateInvalidMsg: '',
+        endDateInvalid: false,
+        endDateInvalidMsg: '',
+      });
+    }
+  }
+
+  /**
+   * Show User Consent Modal
+   * @param e event
+   */
+  onHandleAddHobby(e) {
+    e.preventDefault();
+    const { newHobby } = this.state;
+    this.setState({ isSubmitHobby: true });
+    if (this.onCheckFormValueHobby(newHobby)) {
+      return;
+    }
+    this.showConsent(this.onAddHobby.bind(this));
+  }
+
+  /**
+     * Check form fields value,
+     * Invalid value, can not save
+     * @param newHobby object
+     */
+  onCheckFormValueHobby(newHobby) {
+    let invalid = false;
+
+    if (!_.trim(newHobby.hobby).length) {
+      invalid = true;
+    }
+
+    this.setState({ formInvalidHobby: invalid });
+    return invalid;
+  }
+
+  onHandleDeleteHobby(indexNoHobby) {
+    this.setState({
+      showConfirmationHobby: true,
+      indexNoHobby,
+    });
+  }
+
+  /**
+     * Delete hobby by index
+     * @param indexNoHobby the hobby index no
+     */
+  onDeleteHobby(indexNoHobby) {
+    const { hobbyTrait } = this.state;
+    const newHobbyTrait = { ...hobbyTrait };
+    newHobbyTrait.traits.data.splice(indexNoHobby, 1);
+    this.setState({
+      hobbyTrait: newHobbyTrait,
+    });
+
+    const {
+      handle,
+      tokenV3,
+      updateUserTrait,
+      deleteUserTrait,
+    } = this.props;
+
+    if (newHobbyTrait.traits.data.length > 0) {
+      updateUserTrait(handle, 'hobby', newHobbyTrait.traits.data, tokenV3);
+    } else {
+      deleteUserTrait(handle, 'hobby', tokenV3);
+    }
+    this.setState({
+      showConfirmationHobby: false,
+      isHobbyEdit: false,
+      indexNoHobby: null,
+      isSubmitHobby: false,
+    });
+  }
+
+  /**
+     * Add new hobby
+     * @param answer user consent answer value
+     */
+  onAddHobby(answer) {
+    const {
+      newHobby, personalizationTrait, hobbyTrait, isHobbyEdit, indexNoHobby,
+    } = this.state;
+
+    const {
+      handle,
+      tokenV3,
+      updateUserTrait,
+      addUserTrait,
+    } = this.props;
+    const hobby = _.clone(newHobby);
+    if (_.isEmpty(hobby.description)) {
+      delete hobby.description;
+    }
+
+    // save hobby
+    if (hobbyTrait.traits && hobbyTrait.traits.data.length > 0) {
+      const newHobbyTrait = _.cloneDeep(hobbyTrait);
+      if (isHobbyEdit) {
+        newHobbyTrait.traits.data.splice(indexNoHobby, 1);
+      }
+      newHobbyTrait.traits.data.push(hobby);
+      updateUserTrait(handle, 'hobby', newHobbyTrait.traits.data, tokenV3);
+    } else {
+      const newHobbies = [];
+      newHobbies.push(hobby);
+      addUserTrait(handle, 'hobby', newHobbies, tokenV3);
+    }
+    const empty = {
+      hobby: '',
+      description: '',
+    };
+    this.setState({
+      newHobby: empty,
+      isHobbyEdit: false,
+      indexNoHobby: null,
+      inputChanged: false,
+    });
+
+    // save personalization
+    if (_.isEmpty(personalizationTrait)) {
+      const personalizationData = { userConsent: answer };
+      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+    } else {
+      const trait = personalizationTrait.traits.data[0];
+      if (trait.userConsent !== answer) {
+        const personalizationData = { userConsent: answer };
+        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+      }
+    }
+  }
+
+  /**
+     * Update input value
+     * @param e event
+     */
+  onUpdateHobbyInput(e) {
+    const { newHobby: oldHobby } = this.state;
+    const newHobby = { ...oldHobby };
+    newHobby[e.target.name] = e.target.value;
+    this.setState({ newHobby, isSubmitHobby: false });
+  }
+
+    /**
+     * Get hobby trait
+     * @param userTraits the all user traits
+     */
+    loadHobbyTrait = (userTraits) => {
+      const trait = userTraits.filter(t => t.traitId === 'hobby');
+      const hobbys = trait.length === 0 ? {} : trait[0];
+      return _.assign({}, hobbys);
+    }
+
+    /**
+     * Edit hobby by index
+     * @param indexNoHobby the hobby index no
+     */
+    onEditHobby(indexNoHobby) {
+      const { hobbyTrait } = this.state;
+      this.setState({
+        newHobby: {
+          hobby: hobbyTrait.traits.data[indexNoHobby].hobby,
+          description: _.isEmpty(hobbyTrait.traits.data[indexNoHobby].description) ? '' : hobbyTrait.traits.data[indexNoHobby].description,
+        },
+        isHobbyEdit: true,
+        indexNoHobby,
+        formInvalidHobby: false,
+        isSubmitHobby: false,
+      });
+    }
+
+    onCancelEditStatusHobby() {
+      const { isHobbyEdit } = this.state;
+      if (isHobbyEdit) {
+        this.setState({
+          isHobbyEdit: false,
+          indexNoHobby: null,
+          isSubmitHobby: false,
+          formInvalidHobby: false,
+          newHobby: {
+            hobby: '',
+            description: '',
+          },
+        });
+      }
+    }
+
+    render() {
+      const {
+        personalDetails, aboutYou, learningAndEducations, hobbies,
+      } = PROFILE_SETTINGS;
+
+      const canModifyTrait = !this.props.traitRequestCount;
+      if (!canModifyTrait) {
+        this.props.setIsSaving(true);
+      } else {
+        this.props.setIsSaving(false);
+      }
+      const { lookupData } = this.props;
+      const countries = _.get(lookupData, 'countries', []).map(country => ({
+        key: country.countryCode,
+        name: country.country,
+      }));
+
+      const {
+        newBasicInfo,
+        newProfileInfo,
+        inputChanged,
+        showConfirmation,
+        showConfirmationHobby,
+        educationTrait,
+        indexNo,
+        formInvalid,
+        isSubmit,
+        isEdit,
+        isMobileView,
+        startDateInvalid,
+        startDateInvalidMsg,
+        endDateInvalid,
+        endDateInvalidMsg,
+        newEducation,
+        hobbyTrait,
+        isHobbyEdit,
+        formInvalidHobby,
+        isSubmitHobby,
+        newHobby,
+        indexNoHobby,
+      } = this.state;
+
+      const educationItems = educationTrait.traits
+        ? educationTrait.traits.data.slice() : [];
+
+      const hobbyItems = hobbyTrait.traits
+        ? hobbyTrait.traits.data.slice() : [];
+
+      return (
+        <React.Fragment>
+          <div styleName="profile-settings-container">
+            <div styleName="header">
+              <h3>BASIC INFO</h3>
+            </div>
+            {
+            this.shouldRenderConsent() && this.renderConsent()
+          }
+
+            {
+          showConfirmation && (
+            <ConfirmationModal
+              onConfirm={() => this.showConsent(this.onDeleteEducation.bind(this, indexNo))}
+              onCancel={() => this.setState({
+                showConfirmation: false,
+                indexNo: null,
+              })}
+              name={educationTrait.traits.data[indexNo].schoolCollegeName}
+            />
+          )
+        }
+            {
+          showConfirmationHobby && (
+            <ConfirmationModal
+              onConfirm={() => this.showConsent(this.onDeleteHobby.bind(this, indexNoHobby))}
+              onCancel={() => this.setState({ showConfirmation: false, indexNoHobby: null })}
+              name={hobbyTrait.traits.data[indexNoHobby].hobby}
+            />
+          )
+        }
+
+            <ImageInput {...this.props} />
+
+            <SettingsBanner title={personalDetails.title} description={personalDetails.description}>
+              <PersonalDetails
+                countries={countries}
+                canModifyTrait={canModifyTrait}
+                newProfileInfo={newProfileInfo}
+                newBasicInfo={newBasicInfo}
+                onUpdateDate={this.onUpdateDate}
+                onUpdateInput={this.onUpdateInput}
+                inputChanged={inputChanged}
+                onUpdateCountry={this.onUpdateCountry}
+              />
+            </SettingsBanner>
+            <SettingsBanner title={aboutYou.title} description={aboutYou.description}>
+              <AboutYou
+                canModifyTrait={canModifyTrait}
+                newProfileInfo={newProfileInfo}
+                newBasicInfo={newBasicInfo}
+                onUpdateInput={this.onUpdateInput}
+              />
+            </SettingsBanner>
+            <SettingsBanner
+              title={learningAndEducations.title}
+              description={learningAndEducations.description}
+            >
+              <Learning
+                formInvalid={formInvalid}
+                isSubmit={isSubmit}
+                isEdit={isEdit}
+                isMobileView={isMobileView}
+                educationItems={educationItems}
+                onHandleDeleteEducation={this.onHandleDeleteEducation}
+                onEditEducation={this.onEditEducation}
+                startDateInvalid={startDateInvalid}
+                startDateInvalidMsg={startDateInvalidMsg}
+                endDateInvalid={endDateInvalid}
+                endDateInvalidMsg={endDateInvalidMsg}
+                newEducation={newEducation}
+                onUpdateInput={this.onUpdateEducationInput}
+                onUpdateDate={this.onUpdateEducationDate}
+                onHandleAddEducation={this.onHandleAddEducation}
+                onCancelEditStatus={this.onCancelEditStatus}
+              />
+            </SettingsBanner>
+            <SettingsBanner
+              title={hobbies.title}
+              description={hobbies.description}
+            >
+              <Hobbies
+                isMobileView={isMobileView}
+                hobbyItems={hobbyItems}
+                isEdit={isHobbyEdit}
+                onHandleDeleteHobby={this.onHandleDeleteHobby}
+                onEditHobby={this.onEditHobby}
+                canModifyTrait={canModifyTrait}
+                formInvalid={formInvalidHobby}
+                isSubmit={isSubmitHobby}
+                newHobby={newHobby}
+                onUpdateInput={this.onUpdateHobbyInput}
+                onHandleAddHobby={this.onHandleAddHobby}
+                onCancelEditStatus={this.onCancelEditStatusHobby}
+              />
+            </SettingsBanner>
+          </div>
+          <div styleName="button-save">
+            <PrimaryButton
+              disabled={!canModifyTrait}
+              onClick={this.onHandleSaveBasicInfo}
+              theme={{
+                button: style['save-changes-btn'],
+              }}
+            >
+              Save Changes
+            </PrimaryButton>
+          </div>
+        </React.Fragment>
+      );
+    }
+}
+
+ProfileSettings.defaultProps = {
+  profile: {},
+  isSaving: false,
+};
+
+ProfileSettings.propTypes = {
+  tokenV3: PT.string.isRequired,
+  handle: PT.string.isRequired,
+  profile: PT.shape(),
+  userTraits: PT.array.isRequired,
+  addUserTrait: PT.func.isRequired,
+  updateUserTrait: PT.func.isRequired,
+  updateProfileV5: PT.func.isRequired,
+  traitRequestCount: PT.number.isRequired,
+  isSaving: PT.bool,
+  setIsSaving: PT.func.isRequired,
+};
+
+export default ProfileSettings;
diff --git a/src/shared/components/Settings/ProfileSettings/styles.scss b/src/shared/components/Settings/ProfileSettings/styles.scss
new file mode 100644
index 0000000000..3592ede427
--- /dev/null
+++ b/src/shared/components/Settings/ProfileSettings/styles.scss
@@ -0,0 +1,211 @@
+@import "~styles/mixins";
+@import "../style.scss";
+
+.datePicker {
+  input {
+    border: 0 !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    height: 25px !important;
+  }
+}
+
+.save-changes-btn {
+  @include roboto-bold;
+
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  border-radius: 50px !important;
+  background: #137d60 !important;
+  color: #fff !important;
+  text-transform: uppercase;
+
+  @include xs-to-md {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.profile-settings-container {
+  background-color: $listing-filter-bg;
+  padding: 32px;
+  border-radius: 8px;
+  margin: 40px 0 32px;
+
+  .header {
+    h3 {
+      @include barlow-bold;
+
+      font-size: 20px;
+      line-height: 22px;
+      color: $tco-black;
+      text-transform: uppercase;
+
+      @include xs-to-md {
+        @include barlow-condensed-semi-bold;
+
+        font-size: 27px;
+        line-height: 28px;
+      }
+    }
+  }
+
+  @include xs-to-md {
+    padding: 10px 16px;
+  }
+}
+
+.button-save {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  margin-bottom: 32px;
+}
+
+.basic-info-container {
+  display: flex;
+  flex-direction: column;
+
+  @include upto-sm {
+    padding: 0;
+    margin-top: 24px;
+  }
+
+  h1 {
+    @include roboto-regular;
+
+    font-size: 28px;
+    line-height: 35px;
+    font-weight: 400;
+    color: $tc-black;
+    margin-bottom: 20px;
+  }
+}
+
+.form-container-default {
+  @include form-container-default;
+
+  input {
+    @include roboto-regular;
+
+    height: 40px;
+    font-size: 15px;
+    line-height: 20px;
+    font-weight: 400;
+    color: $tc-black;
+    border: 1px solid $tc-gray-20;
+    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
+    margin-bottom: 0;
+
+    @include placeholder {
+      text-transform: capitalize;
+    }
+  }
+
+  textarea {
+    @include placeholder {
+      text-transform: capitalize;
+    }
+  }
+
+  .text-required {
+    @include roboto-medium;
+
+    font-size: 10px;
+    color: $tc-red-110;
+    margin-bottom: 5px;
+    text-align: right;
+  }
+
+  .text-optional {
+    @include roboto-medium;
+
+    font-size: 10px;
+    color: #888894;
+    margin-bottom: 5px;
+    text-align: right;
+  }
+
+  .row {
+    .col-1 {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      max-width: 0;
+      min-width: 0;
+      margin-right: 0;
+      width: auto;
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      padding-top: 0 !important;
+    }
+  }
+}
+
+/*
+ * React Select component styling
+ */
+.basic-info-container .form-container .row .field :global .Select,
+.basic-info-container .form-container .row .field :global .Select-value span,
+.basic-info-container .form-container .row .field :global .Select-menu-outer,
+.basic-info-container.form-container .row .field :global .Select-placeholder,
+.basic-info-container .form-container .row .field :global .Select-input input {
+  color: $tc-gray-80;
+  font-size: 15px;
+
+  @include upto-sm {
+    margin-top: 5px;
+  }
+}
+
+.basic-info-container div[class="Select-control"] {
+  height: 40px;
+
+  div[class="Select-input"] {
+    height: 38px;
+
+    @include placeholder {
+      text-transform: capitalize;
+    }
+  }
+
+  div[class="Select-placeholder"] {
+    height: 38px;
+    line-height: 40px !important;
+
+    @include upto-sm {
+      line-height: 38px !important;
+    }
+  }
+
+  div[class="Select-value"] {
+    line-height: 40px !important;
+  }
+}
+
+.basic-info-container .form-container .row .field :global .Select-placeholder {
+  color: $tc-gray-50;
+}
+
+.date-picker {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.date-picker-sm {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.col-2,
+.col-percent50,
+.col-percent35 {
+  width: auto;
+}
+
+.second-addr {
+  margin-top: 10px;
+}
diff --git a/src/shared/components/Settings/SettingsBanner/index.jsx b/src/shared/components/Settings/SettingsBanner/index.jsx
new file mode 100644
index 0000000000..8820d19208
--- /dev/null
+++ b/src/shared/components/Settings/SettingsBanner/index.jsx
@@ -0,0 +1,64 @@
+/**
+ * Help Banner component
+ */
+import React, { useState } from 'react';
+import cn from 'classnames';
+import PT from 'prop-types';
+import ArrowIcon from 'assets/images/icon-banner-selector.svg';
+import './styles.scss';
+import PageRow from '../PageRow';
+
+const SettingsBanner = ({
+  title,
+  description,
+  children,
+  defaultOpen,
+}) => {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div styleName="settings-banner">
+      <div styleName="header">
+        <div styleName="title">
+          <span>{title}</span>
+        </div>
+        <div
+          onClick={() => setOpen(!open)}
+          role="presentation"
+          styleName={cn('arrowIcon', open ? null : 'down')}
+        >
+          <ArrowIcon />
+        </div>
+      </div>
+
+      {
+        open ? (
+          <div styleName="page-row">
+            <PageRow>
+              <div>
+                <p styleName="description">{description}</p>
+              </div>
+              {children}
+            </PageRow>
+          </div>
+        ) : null
+      }
+    </div>
+  );
+};
+
+SettingsBanner.defaultProps = {
+  title: '',
+  description: '',
+  children: null,
+  defaultOpen: true,
+};
+
+SettingsBanner.propTypes = {
+  title: PT.string,
+  description: PT.string,
+  children: PT.node,
+  defaultOpen: PT.bool,
+};
+
+export default SettingsBanner;
diff --git a/src/shared/components/Settings/SettingsBanner/styles.scss b/src/shared/components/Settings/SettingsBanner/styles.scss
new file mode 100644
index 0000000000..d2444dbec4
--- /dev/null
+++ b/src/shared/components/Settings/SettingsBanner/styles.scss
@@ -0,0 +1,53 @@
+@import "~styles/mixins";
+
+.settings-banner {
+  background-color: $tc-white;
+  border-radius: 4px;
+  width: 100%;
+  margin-top: 8px;
+  padding: 32px 38px 32px 32px;
+
+  @include xs-to-sm {
+    padding: 12px 16px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .title {
+    span {
+      @include barlow-bold;
+
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 22px;
+      color: $tco-black;
+      text-transform: uppercase;
+    }
+  }
+
+  .arrowIcon {
+    cursor: pointer;
+    margin-top: 4px;
+
+    &.down {
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .description {
+    @include roboto-regular;
+
+    font-size: 16px;
+    line-height: 24px;
+    color: $tco-black;
+  }
+
+  .page-row {
+    margin-top: 32px;
+  }
+}
diff --git a/src/shared/components/Settings/TabSelector/index.jsx b/src/shared/components/Settings/TabSelector/index.jsx
new file mode 100644
index 0000000000..f16792f551
--- /dev/null
+++ b/src/shared/components/Settings/TabSelector/index.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import cn from 'classnames';
+import { useMediaQuery } from 'react-responsive';
+import ArrowIcon from 'assets/images/ico-arrow-down.svg';
+import PT from 'prop-types';
+
+import './styles.scss';
+import _ from 'lodash';
+
+const TabSelector = ({
+  activeTab,
+  tabs,
+  selectTab,
+}) => {
+  const desktop = useMediaQuery({ minWidth: 1024 });
+  const [currentSelected, setCurrentSelected] = useState(activeTab);
+  const [isTabClosed, setIsTabClosed] = useState(true);
+
+  const onActiveClick = (tab) => {
+    setCurrentSelected(tab.link);
+    setIsTabClosed(true);
+    selectTab(tab.link);
+  };
+
+  const desktopTab = (
+    <ul styleName="tab">
+      {
+        tabs.map(tab => (
+          <li
+            key={tab.title}
+            styleName={cn('item', { active: tab.link === currentSelected })}
+            onClick={() => onActiveClick(tab)}
+            onKeyDown={(e) => {
+              if (e.key !== 'Enter') {
+                return;
+              }
+              onActiveClick(tab);
+            }}
+            role="presentation"
+          >
+            {tab.title}
+          </li>
+        ))
+      }
+    </ul>
+  );
+
+  const mobileTab = (
+    <React.Fragment>
+      <div
+        styleName="mobile-tab-container"
+        role="presentation"
+        onClick={() => setIsTabClosed(!isTabClosed)}
+      >
+        <p styleName="title">{_.find(tabs, { link: currentSelected }).title}</p>
+        <div
+          role="presentation"
+          styleName={cn('icon', { down: !isTabClosed })}
+          onClick={() => setIsTabClosed(!isTabClosed)}
+        >
+          <ArrowIcon />
+        </div>
+      </div>
+      {
+        !isTabClosed && (
+          <div styleName="mobile-tab-expanded">
+            {
+              tabs.map(tab => (
+                <div
+                  key={tab.title}
+                  role="presentation"
+                  onClick={() => onActiveClick(tab)}
+                  styleName={cn('item', { active: tab.link === currentSelected })}
+                >
+                  <p>{tab.title}</p>
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+    </React.Fragment>
+  );
+
+  return desktop ? desktopTab : mobileTab;
+};
+
+TabSelector.defaultProps = {
+  activeTab: 0,
+  tabs: [],
+};
+
+TabSelector.propTypes = {
+  activeTab: PT.number,
+  tabs: PT.arrayOf(PT.string),
+  selectTab: PT.func.isRequired,
+};
+
+export default TabSelector;
diff --git a/src/shared/components/Settings/TabSelector/styles.scss b/src/shared/components/Settings/TabSelector/styles.scss
new file mode 100644
index 0000000000..52a3622c94
--- /dev/null
+++ b/src/shared/components/Settings/TabSelector/styles.scss
@@ -0,0 +1,120 @@
+@import "~styles/mixins";
+
+.mobile-tab-expanded {
+  background-color: $listing-light-blue;
+
+  .item {
+    height: 40px;
+    margin: 0;
+
+    p {
+      @include barlow-bold;
+
+      font-weight: 600;
+      color: #555;
+      font-size: 14px;
+      line-height: 20px;
+      text-transform: uppercase;
+      padding-left: 16px;
+      padding-top: 10px;
+    }
+  }
+
+  .active {
+    background-color: #bae1f9;
+
+    p {
+      color: $tco-black;
+      font-weight: 700;
+    }
+  }
+}
+
+.tab {
+  display: flex;
+  height: 42px;
+  margin-top: 24px;
+  background-color: $listing-light-blue;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid $listing-light-gray;
+
+  .item {
+    @include barlow;
+
+    font-weight: 600;
+    font-size: 14px;
+    color: $member-gray;
+    line-height: 20px;
+    padding: 12px 16px 10px 16px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    text-transform: uppercase;
+
+    &:not(.active):hover {
+      background-color: #bae1f9;
+    }
+  }
+
+  .active {
+    color: $tc-black;
+    font-weight: 700;
+    background-color: #bae1f9;
+
+    &::after {
+      content: "";
+      background-image: url(assets/images/nav-active-item.svg);
+      height: 10px;
+      width: 40px;
+      margin-top: 10px;
+      justify-content: center;
+      z-index: 100;
+      display: block;
+      position: absolute;
+      top: 160px;
+    }
+  }
+}
+
+.mobile-tab-container {
+  background-color: $listing-light-blue;
+  height: 40px;
+  margin-top: 32px;
+  display: flex;
+  justify-content: space-between;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid #d4d4d4;
+
+  .title {
+    @include barlow-bold;
+
+    font-weight: 700;
+    color: $tco-black;
+    font-size: 14px;
+    line-height: 20px;
+    text-transform: uppercase;
+    padding-left: 16px;
+    padding-top: 10px;
+  }
+
+  .icon {
+    width: 16px;
+    height: 9px;
+    margin-right: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-self: center;
+    cursor: pointer;
+    transform: scale(1.5);
+  }
+
+  .down {
+    transform: scale(1.5) rotate(180deg);
+    margin-right: 20px !important;
+  }
+
+  @include xs-to-md {
+    margin: 0;
+  }
+}
diff --git a/src/shared/components/Settings/Tools/Devices/index.jsx b/src/shared/components/Settings/Tools/Devices/index.jsx
index d941f5bbb4..3df24ea2d5 100644
--- a/src/shared/components/Settings/Tools/Devices/index.jsx
+++ b/src/shared/components/Settings/Tools/Devices/index.jsx
@@ -14,7 +14,7 @@ import ErrorMessage from 'components/Settings/ErrorMessage';
 import InputSelect from 'components/InputSelect';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
 import { toastr } from 'react-redux-toastr';
-import ConfirmationModal from '../../CofirmationModal';
+import ConfirmationModal from '../../ConfirmationModal';
 import DeviceList from './List';
 
 import './styles.scss';
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
index 84352a6129..c03aee990d 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
+++ b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
@@ -13,7 +13,7 @@ import ConsentComponent from 'components/Settings/ConsentComponent';
 import ErrorMessage from 'components/Settings/ErrorMessage';
 import Select from 'components/Select';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
-import ConfirmationModal from '../../CofirmationModal';
+import ConfirmationModal from '../../ConfirmationModal';
 import dropdowns from './dropdowns.json';
 import ServiceProviderList from './List';
 
diff --git a/src/shared/components/Settings/Tools/Software/index.jsx b/src/shared/components/Settings/Tools/Software/index.jsx
index 1433ab74d3..0ef890848d 100644
--- a/src/shared/components/Settings/Tools/Software/index.jsx
+++ b/src/shared/components/Settings/Tools/Software/index.jsx
@@ -13,7 +13,7 @@ import ConsentComponent from 'components/Settings/ConsentComponent';
 import ErrorMessage from 'components/Settings/ErrorMessage';
 import Select from 'components/Select';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
-import ConfirmationModal from '../../CofirmationModal';
+import ConfirmationModal from '../../ConfirmationModal';
 import dropdowns from './dropdowns.json';
 import SoftwareList from './List';
 
diff --git a/src/shared/components/Settings/Tools/Subscriptions/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
index 8cdd86eaad..f9d349491e 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/index.jsx
+++ b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
@@ -12,7 +12,7 @@ import _ from 'lodash';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import ErrorMessage from 'components/Settings/ErrorMessage';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
-import ConfirmationModal from '../../CofirmationModal';
+import ConfirmationModal from '../../ConfirmationModal';
 import SubscriptionList from './List';
 
 import styles from './styles.scss';
diff --git a/src/shared/components/Settings/constants.js b/src/shared/components/Settings/constants.js
index ec0d6c2a44..2d8a901b08 100644
--- a/src/shared/components/Settings/constants.js
+++ b/src/shared/components/Settings/constants.js
@@ -1,4 +1,33 @@
-// eslint-disable-next-line
 export const SCREEN_SIZE = {
   SM: 767,
 };
+
+export const SETTINGS_TABS = [
+  { title: 'Profile', link: 'profile' },
+  { title: 'Experience & Skills', link: 'skills' },
+  { title: 'Topcoder & You', link: 'tracks' },
+  { title: 'Tools', link: 'tools' },
+  { title: 'Account', link: 'accounts' },
+  { title: 'Preferences', link: 'preferences' },
+];
+
+export const PROFILE_SETTINGS = {
+  personalDetails: {
+    title: 'Personal Details',
+    description:
+      'By keeping this information up to date we may contact you about relevant freelance opportunites at Topcoder, or even surprise you with a cool T-shirt. Sharing your contact details will never result in robocalls about health insurance plans or junk mail.',
+  },
+  aboutYou: {
+    title: 'About You',
+    description:
+      'Let customers know the langagues you speak. Multilingual? Magnifique.',
+  },
+  learningAndEducations: {
+    title: 'Learning & Education',
+    description: 'Enter information about your schooling and degrees.',
+  },
+  hobbies: {
+    title: 'Hobbies',
+    description: 'Tell us about what you love to do in your free time.',
+  },
+};
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index 9585bb8a31..93d3b99a9f 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -1,19 +1,23 @@
 /**
  * Settings page component.
  */
-import React from 'react';
+import React, { createRef, useState } from 'react';
 import PT from 'prop-types';
 import MetaTags from 'components/MetaTags';
 
 import { TABS } from 'actions/page/settings';
 
+import _ from 'lodash';
 import Header from './Header';
 import Tools from './Tools';
 
 import './style.scss';
-import Profile from './Profile';
 import Account from './Account';
 import Preferences from './Preferences';
+import TabSelector from './TabSelector';
+import { SETTINGS_TABS } from './constants';
+
+import ProfileSettings from './ProfileSettings';
 
 export default function Settings(props) {
   const newProps = { ...props };
@@ -24,25 +28,13 @@ export default function Settings(props) {
   }
 
   const selectTab = (tab) => {
-    newProps.selectTab(tab);
     newProps.history.push(`/settings/${tab}`);
   };
 
-  let title;
-  switch (newProps.settingsTab) {
-    case TABS.TOOLS:
-      title = 'Tools';
-      break;
-    case TABS.ACCOUNT:
-      title = 'Account Info';
-      break;
-    case TABS.PREFERENCES:
-      title = 'Preferences';
-      break;
-    default:
-      title = 'Edit Profile';
-      break;
-  }
+  const currentTab = _.find(SETTINGS_TABS, { link: newProps.settingsTab });
+  const title = currentTab ? currentTab.title : 'Settings';
+  const childRef = createRef();
+  const [isSaving, setIsSaving] = useState(false);
 
   return (
     <div styleName="container" className="profile-settings" role="presentation" onClick={() => {}}>
@@ -54,12 +46,20 @@ export default function Settings(props) {
         <Header
           settingsTab={newProps.settingsTab}
           selectTab={selectTab}
+          saveSettings={() => {
+            childRef.current.onSaveBasicInfo();
+          }}
+          isSaving={isSaving}
         />
+        <TabSelector activeTab={newProps.settingsTab} tabs={SETTINGS_TABS} selectTab={selectTab} />
         {
           newProps.settingsTab === TABS.PROFILE
           && (
-            <Profile
+            <ProfileSettings
               {...newProps}
+              ref={childRef}
+              isSaving={isSaving}
+              setIsSaving={setIsSaving}
             />
           )
         }
@@ -72,7 +72,7 @@ export default function Settings(props) {
           )
         }
         {
-          newProps.settingsTab === TABS.ACCOUNT
+          newProps.settingsTab === TABS.ACCOUNTS
           && (
             <Account
               {...newProps}
diff --git a/src/shared/components/Settings/style.scss b/src/shared/components/Settings/style.scss
index 4064188c61..6985a0c4ce 100644
--- a/src/shared/components/Settings/style.scss
+++ b/src/shared/components/Settings/style.scss
@@ -1,4 +1,5 @@
-@import '~styles/mixins';
+/* stylelint-disable no-descending-specificity */
+@import "~styles/mixins";
 
 $screen-sm: 768px !default;
 $screen-md: 1024px !default;
@@ -39,9 +40,10 @@ $checkbox-bg-selected: $tc-dark-blue;
 }
 
 .container {
-  background: $tc-gray-neutral-dark;
-  padding: 30px 60px;
+  background: $tc-white;
   width: 100%;
+  max-width: $screen-max;
+  margin: 0 auto;
   box-shadow: 0 1px 0 0 #f0f0f0;
 
   @include from-sm-to-lg {
@@ -55,19 +57,12 @@ $checkbox-bg-selected: $tc-dark-blue;
 
 .page {
   background: $tc-white;
-  border-radius: 6px;
-  margin: 0 auto;
-  max-width: 1246px;
 }
 
 @mixin form-container-default {
   display: flex;
   flex-direction: column;
 
-  @include upto-sm {
-    display: none;
-  }
-
   .row {
     width: 100%;
     display: flex;
@@ -191,6 +186,8 @@ $checkbox-bg-selected: $tc-dark-blue;
     .Select-value-label,
     .Select-menu-outer {
       @include roboto-sans-regular;
+
+      padding-top: 0;
     }
 
     input {
@@ -465,8 +462,8 @@ $checkbox-bg-selected: $tc-dark-blue;
   // Switch is on
   .onoffswitch-inner::before {
     background-color: transparent; //$switch-active-color;
-    color: transparent;// $switch-active-color;
-    content: '';
+    color: transparent; // $switch-active-color;
+    content: "";
     padding-left: 10px;
   }
 
@@ -474,8 +471,196 @@ $checkbox-bg-selected: $tc-dark-blue;
   .onoffswitch-inner::after {
     background-color: transparent; // $switch-inactive-color;
     color: transparent; // $switch-inactive-color;
-    content: '';
+    content: "";
     padding-right: 10px;
     text-align: right;
   }
+
+  .DateInput {
+    position: relative;
+
+    &::before {
+      content: url("assets/images/icon-input-calendar.svg");
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      margin: 0 0 4px 10px;
+    }
+  }
+
+  .DateInput_input {
+    height: auto;
+    padding: 22px 0 2px;
+    padding-left: 28px !important;
+    padding-right: 0 !important;
+    margin: 0 !important;
+    line-height: 22px;
+    cursor: pointer;
+    font-size: 14px !important;
+  }
+
+  .SingleDatePickerInput_calendarIcon {
+    width: 32px;
+    padding-top: 10px;
+    top: 5px !important;
+
+    &::before {
+      content: url("assets/images/dropdown-arrow.svg");
+    }
+
+    svg {
+      display: none;
+    }
+  }
+
+  .DayPicker_weekHeaders {
+    z-index: 0;
+  }
+
+  .CalendarMonth_caption {
+    padding-bottom: 0 !important;
+
+    .Select-control {
+      @include roboto-bold;
+
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: $tc-gray-90;
+      height: 24px;
+      min-width: 120px;
+      border: none;
+      box-shadow: none !important;
+      cursor: pointer;
+    }
+
+    .Select-menu-outer {
+      max-height: 240px;
+    }
+
+    .Select-menu {
+      background-color: $tc-white;
+    }
+
+    .Select-option {
+      font-size: 16px;
+      line-height: 30px;
+      color: $tc-gray-90;
+      padding: 0 15px;
+
+      &.is-selected {
+        font-weight: bold;
+        background-color: #229173;
+      }
+
+      &:hover,
+      &.is-focused {
+        background-color: #229173;
+        color: $tc-white;
+      }
+    }
+  }
+
+  .CalendarMonthGrid {
+    background: transparent !important;
+  }
+
+  .CalendarMonth {
+    background: transparent !important;
+  }
+
+  .reset-btn-container {
+    padding: 16px 0 15px;
+    margin: 0 15px;
+    border-top: 2px solid $listing-filter-bg;
+
+    button {
+      @include roboto-bold;
+
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 22px;
+      color: $listing-checkbox-green;
+      padding: 0 15px;
+      background: none;
+      border: 1.5px solid currentColor;
+      border-radius: 24px;
+    }
+  }
+
+  .Select-control {
+    box-shadow: none !important;
+    cursor: pointer;
+  }
+
+  .Select-value-label {
+    @include roboto-regular;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    color: $listing-placeholder-gray;
+    display: block;
+    padding: 22px 0 2px;
+  }
+
+  .Select-input {
+    height: 46px;
+
+    > input {
+      @include roboto-regular;
+
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: $listing-placeholder-gray;
+      padding: 22px 0 2px;
+    }
+  }
+
+  .Select-arrow-zone {
+    vertical-align: bottom;
+  }
+
+  .Select-arrow {
+    width: auto;
+    height: auto;
+    border: none;
+
+    &::before {
+      content: url("assets/images/dropdown-arrow.svg");
+      top: 15px;
+      position: absolute;
+      margin-left: 38px;
+    }
+  }
+
+  .Select-menu-outer {
+    max-height: 240px;
+    z-index: 10;
+  }
+
+  .Select-menu {
+    background-color: $tc-white;
+  }
+
+  .Select-option {
+    font-size: 16px;
+    line-height: 30px;
+    color: $tc-gray-90;
+    padding: 0 15px;
+
+    &:hover,
+    &.is-focused {
+      background-color: #229173;
+      color: $tc-white;
+    }
+
+    &.is-selected {
+      font-weight: bold;
+      color: $tc-gray-90;
+      background-color: #229173;
+    }
+  }
 }
diff --git a/src/shared/routes/Settings/Router.jsx b/src/shared/routes/Settings/Router.jsx
index 09fbbc419e..a1766e5a92 100644
--- a/src/shared/routes/Settings/Router.jsx
+++ b/src/shared/routes/Settings/Router.jsx
@@ -16,7 +16,7 @@ import Error404 from 'components/Error404';
 export default function Router({ base }) {
   return (
     <Switch>
-      <Route component={Settings} exact path={`${base}/:settingsTab(profile|tools|account|preferences)`} />
+      <Route component={Settings} exact path={`${base}/:settingsTab(profile|skills|tracks|tools|accounts|preferences)`} />
       <Route component={EmailVerification} exact path={`${base}/account/changeEmail`} />
       <Route component={Success} exact path={`${base}/account/email-verification/success`} />
       <Route component={Failed} exact path={`${base}/account/email-verification/failure`} />

From 42991aceceef26c16cd9356d149d1745e8dec85d Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Thu, 21 Jul 2022 11:34:30 +0700
Subject: [PATCH 02/49] improvement(reskin-profile-settings): 3 - topcoder &
 you tab

---
 .../images/profile/community/ico-veteran.png  | Bin 0 -> 16329 bytes
 .../profile/tracks/data_science-disabled.svg  |  22 -
 .../images/profile/tracks/data_science.svg    |  33 +-
 .../images/profile/tracks/design-disabled.svg |  19 -
 src/assets/images/profile/tracks/design.svg   | 112 +---
 .../profile/tracks/develop-disabled.svg       |  16 -
 src/assets/images/profile/tracks/develop.svg  |  29 +-
 .../components/Settings/PageRow/index.jsx     |   8 +-
 .../components/Settings/PageRow/styles.scss   |   8 +
 .../Settings/SettingsBanner/index.jsx         |   5 +-
 .../TopcoderAndYou/Community/Item/index.jsx   |  90 ++++
 .../TopcoderAndYou/Community/Item/styles.scss | 177 +++++++
 .../TopcoderAndYou/Community/data.jsx         |  32 ++
 .../TopcoderAndYou/Community/index.jsx        |  56 ++
 .../TopcoderAndYou/Community/styles.scss      |  60 +++
 .../TopcoderAndYou/Tracks/Track/index.jsx     |  67 +++
 .../TopcoderAndYou/Tracks/Track/styles.scss   |  90 ++++
 .../Settings/TopcoderAndYou/Tracks/index.jsx  |  57 ++
 .../Settings/TopcoderAndYou/Tracks/tracks.jsx |  20 +
 .../Settings/TopcoderAndYou/index.jsx         | 489 ++++++++++++++++++
 .../Settings/TopcoderAndYou/styles.scss       |  84 +++
 src/shared/components/Settings/constants.js   |  11 +
 src/shared/components/Settings/index.jsx      |  24 +-
 src/shared/components/Settings/style.scss     |  12 +-
 24 files changed, 1315 insertions(+), 206 deletions(-)
 create mode 100644 src/assets/images/profile/community/ico-veteran.png
 delete mode 100644 src/assets/images/profile/tracks/data_science-disabled.svg
 delete mode 100644 src/assets/images/profile/tracks/design-disabled.svg
 delete mode 100644 src/assets/images/profile/tracks/develop-disabled.svg
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/Item/index.jsx
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/Item/styles.scss
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/data.jsx
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/index.jsx
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/Community/styles.scss
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/Tracks/Track/index.jsx
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/Tracks/Track/styles.scss
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/Tracks/index.jsx
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/Tracks/tracks.jsx
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/index.jsx
 create mode 100644 src/shared/components/Settings/TopcoderAndYou/styles.scss

diff --git a/src/assets/images/profile/community/ico-veteran.png b/src/assets/images/profile/community/ico-veteran.png
new file mode 100644
index 0000000000000000000000000000000000000000..9814198b1bc9dcd223bd04f9429cc083dab0fdf6
GIT binary patch
literal 16329
zcmV;)KQ_RLP)<h;3K|Lk000e1NJLTq002+`002-31^@s6juG;$00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsHKVC^hK~#7FO?(HK
zT<3M&dDHvM&i2081s1>(9Uusj04P#o7b#K2j%C#-iDlVoijz3`>@P~<R41{mBz6?r
zagk)nDwZsXqS#4LAW=vFMBj#8Z0|d}JH5P@bMOBK6s7%ku{-nT{rA7+oOAF0EMIt=
z0~>(X561y~J{x=P>cT($2OraauPkKnU;gL!vAVGdi~ob=g~e~sp8*g5;qiuGc^o|P
z^kMw7zxNa@yN1nN4k5n}UU*Qcmaw_Gh1sQLlq(gqrjvZXjaW3o>u#Y`EF%($z~;5v
z8dLCw;`siL-p04ScLt?0Z_be~hyS->^Sg)duGtmbHPnNH`?uqJKRko3t~6$+*HPfL
zYPA~dYEkbs6pW*{y9NK|pML~>1Ksd>Jn;Iw@Oph*hs8_RP_0zuf~b{>*!uHtqxcs;
zK%VzkvutA%$3lQ>4e@$j{%pzbTU!zOz2B01k&BezaFJf8f}{KU@pqnl5UE5GjSVSW
zy*`EY%}v-gKg8oPhLiVjF%~aatrQRrRq@3yK8Y{>@*@cPe5mq6<KZwGB4KQ7WN>S8
z22%@5e7g_DQWZ;^Sxn6?qAe9gJmAA3jk~bEj(o8Iz7<`~4fwTBzYo9tFF%TCB*@=*
zxEy|_<>B8gRC%u+uLo`IY5c-7@55LB;MefX`;VYfu5m*>bb<f^G@Q>DLZwpFdzAaF
zRjb@+*>Jz?JlE~$8vOnMU(3zr7cGw}%qDpp5B&Ve%O(5x-MaI83&D7tPRGx(<PW|e
z|K!sTIrGjWu8z#(-~X#$#u~kE&+cw?zLm!G!Up6rbT8<8cmrZoKW}tvGmjw3NX4Tl
za5v+@Af}gAFtWUY)yyi26$f#8TP~l6k9QLd1Q1FlF+4tnpS=7Q=2tfHxlervyZg6c
zX?;UCtby11r6-PHac&*|^G}}FZF6j!o4}io#PPAGkK&OJ97dQMWz&0Jee*gO4ihCX
z5#sd*;PLz63&!9Nh>`rfZ!hn=rbe*5j3!5&TMa5+>7~(P+=Lo`S934rmDk7>^@S2U
z4yv?VfDT22)+8W!V_sf_ALtEo*D84X%m{w(|Na>N;VXZGOeU}HE}`V%Yvgj4go1~L
z=Z(aY4Y=>nP9(xXbTK?<me;Vjuz;D_S%f1|M8YA&A|Z6OG|@9d*ve*6sMavY*HwAl
z?SnlS9=)aen@%N>q_LyXIEuL}9y_t~&LYJFEq-39RKj0<=VkoC|Nb797nbqP`RjQ2
zefyX)OnULC8Qo~{NT~YsH<m^Y)Jw$_wNe@7auH>QZmnEKm0y;vt^|37hcEWZRqCmV
zpDo5K(}`-_7>NeHwx+JBd4?~qmJ4)s8{c{EJgUqkPMIl^`Nopn;f~t1G7ZPeJCaNM
zy0TKKhHrfDE&RjJ#Zk^>nEy&@z_yk~BvTEzYezqgOT%q#;lj-kl=+_ah9vSq3(q|H
z0OGMYy>1H`=FNsg0-0hJzGwh`E`EG$)?^LMeaxq&4TfZvD+*$5qkyk}<9R&y>N{vo
zH}bwKy7}^2zdx#}T{d2vLn21j<M9~}lz&UeidWYh25r?+?-b*f`M!$l#Xbjm9h*j@
z)A45;0j@p32=WE!-C;UZu_Aj`)uiiTK9CzIGZc-B+ccP$H^-#xr+ddE@bE+PMU&XY
z_~I2mdf{yx*_lM=_C9Ru>gG*48j>rSEr|{k3OUTNh)B4l=wX}LJi{Gm_lHrW!J^R=
zHnIhzlWD%*i!zN7jyB@k&t2fcx$kzF#>+uBoKX-6B{4md!Nlzq=0qFw3v+NJI{0@<
zMZ5tnFsk<^o2|K#Ym-g)ivz%fqa|J~#l+%u#npW#-+K6Sk=H3ot>jw#;=g=t$nm<H
z!uLrIeE*64DDi!lF5bq<Mp50}k?`aq^dl^Z@{-=Pcwb{v3qJVZL457Irw~st=jAHM
zX3Lsnn>stu*4c}dtsHuLdeK0yu(<%qCne^=06ndRDIyUG=uI)xU}GzbDi`bZ2U(25
z`g+N8QmsogOhZc=oo&mwJvGb15YyDbq^%KCEaf#+J=}yUBgJ7(mZBi{T&?6-SZPFh
zn_Wwr>TOwWDS)|-ZEHxHqR98x9Q_`F+_MGadzKp3tLeiOlbVYL#4~)4zyBB$^%_o{
zx?yq#|L9|=I&ven?4+X^LGpmlA3{1E#{(x0V%P3o)aXM0{eS%sSvq}%i!IdxNX26G
zo*I(z1Y*Gu%F!tD<r113(u6G~7NaFr%L+p_t3@bZs?eZ8Y;9~HUnn3+BL_nvHK=^(
z&cSXRyLS)1{ryweHPC^dJbNBn`KlT^5QykPEQY$z<L5mTH9RFpi`N++^D)m6lrVg2
z{5+p#I7>s<auEfSn?@V04KMFUa$VJO^t%=#v6YM50QdJbTTz8C5C}4d(SzuY6*ZQ_
zztx!Uyau+&JH>^4lCO^7=|}HlqE8?Zi{elI^v77tY^rNZm~UliD0*cnn_+m(5IfoQ
zE+9ffhKUI`HkrTV+Pq}IZ=skiBCxfFrO7qS%`9VTZh^*&ptZLXhYue_WM~g|4{bwh
za~gYg_2I9-{sOWzo`j`Wt|DvaJ=zko%+VoloCXx{Ahs(r*C`6sI;zH$f~TG+MmJzq
zy-VPXq$9h=T*$oUXdyD@FY{XBeGFXq<u!bLg;(~+!ut8Xnb{@0ePtNCwl(9z@PcA4
z$ss03cud8Wq{^N7{twUM=Exj=>o-1$wUrF+y=NERICl+M77cmj+{^-2r^Zp;SVMDj
zHxjI*%i?L={Q@^BOAP4eLW}Dwn7{Ha$}{t@1oSdDg>nUWR#$Ox<Pyf#7=He*;nBxW
z;vaqKAEPK9L$6-S<nZ2qZYXNLa<M7gf+1-`Qjgl8%KXg;k(@67mZHHw$cDRIK=Zs^
zt(hW12v%QxK(Ff2Ko-B1?=>xE3|*oNd9Uw<moMS$yVu3mytd?%l;Ryh=yEfT<rZk&
zX%AM`w(!omoA`g<dJT=~2zRE&@TuaLPVR?yX%@Aa5c=BMu)+5&&>%J!(wrbx%x4iM
z23(!Ig^|}!!B2xW(vy=NZSWBORGEL8S()1y>WM2iadBo9r(QmT<NF5DI&>00eeoRj
z@9e~zZ{5_eS3F|f2}0vx@+HQUg2C|iXf=+hVa3VHgehJY2}x1)P#42Vfsuls3_uXE
zBWAZ;TxqtZ0P}i3uODC`aeQ9=EZ>={6EqIpRy?7Wr?-b#>LY4EN1~WFQPVeDx&y1r
zTlnhNU*;mJ$PkwJ7^a^-wjEzOx)bRg9Vi5=>gGLR3)yf3CYKhF=fBrhmT~j^IV@kj
zgcd@8Fquw_`B4grRQ^<32a823w)J*kpsyX>=ifz<1;<NUedoKc;JMeYlcH5L-$_VX
zR?ST}RV{c{oh7N)d35uA;$>tdJ{nOx&Z`i{Kw(W!w5r$dz2kxE&$bC~k6jN}7C=n~
zP*xJ;S3qpxaf^yrR{*NV8|J2R@#S?SxWMLAob)TFRmp_0SCeLyAC@cC%+ARBc=27N
zNWpY7{DkfSLXVui&KvZikt`w9+=!*cMR-@1kSb)6>g+&*SZ|e#V`6$vF<4V7g=jp+
zqLhKBlE=Wd4h-!Zf|YE>AAIv1&R<_JRZl*Rc}l=OT|hahaN>G?y91uJV%9WbJTQ<$
za=edu-RC!uM$?mJy9KA77HlmJS_v$dV(`0PaG!Xdeu4>a+v9Ny3O`6cQ1SweD0zUW
z4WIbf1K8fzi2Zx}$ctm#4VTU+gfJnlp~0_JzF&(1D{OIT4dDQ<Lt{a(9N&~Cca0Wv
z<h_0@I$?b8>I^&$?YMY(1as>}1cMPoNVSG9593>B$B<8S5lT4dB%U0d&0v|iPjIEM
z3gyFYj_&JiA}WZwxy%$mxi2VBH@}gM_SPx9yXk5G7os@sTJ-NyMClCjg0fWy(}DqE
z0JV??TfEX-R|=L-c22_7HlPo&L?aIE>&K4%cKo~F{AFCeIEMdmZH&9-Hx_j7Mqz+u
z(EGcD?#}8m&V1|p*!lNAfzIwUukOMi=C*2~#1L&qV^1F%#%`m7o>?VL3xt9g=;=VJ
zp#imA9%<&nM-T48uKs?c=(%97k_v9Q*}f(sg2!(n!V&|v;8VZ!5MDif4Xq7P{LSB<
zC5H8BQBioK1)`?WT4%@t<V{35N*pAQdQ?P^O3n}`O)SHNuHQ0Bj7N=WiipR(jw9C;
z94MjY$SVkv9mjCMG^=NUi;i%iH%Dg_*C~eb3DP(4#*#!_Ei1-4b8`aKUp$Er4H02d
zPzK-$@lz!q`rv22bF%9wZL9#fMfi$q%%K)O{n<}o$Ie}-6-$I*HjX^;1d4?`LR5Ex
zEI4*3hA54yUL=e4K(U^mh2X@AeR$;2qd2r@0EhPv;CKGxH#L`QbkxI<o~TMpC8Uy-
z6cG(Wi6V_C+Y}J-N{=a&TqHu8=Ol#re!ecJ=BBsRlY}A13iW)lLz+*h$kfVN%1=f7
z%}-9Fp^1ym+h}WzqO&=P+lw0{-8sIAxQMTnB<&6GqijD4ys>l3c|7>5pT@?OOK_OK
zl=w@&q9Fs(1}=i1lP{pTsf{V2fv~8G#y$HfM5It&TZhAf6zaMQp{*r_HefpOkamg0
zR%P+f>+v%K{s_N}HW##vLL(r)?9}raH@j9=PHbdLiIS9ow2})0KBaR%4~&iUVw>>I
z74_F1*9%LIhzn4|i>zg<H`18Jil!Bx$8}A~gI*GFp>2|5u3R3c+_bC`lw}j65u|#B
zGS#HeP?n+*Eh}iS5qI<}KRJt&k3E2vG>s)NgMXKsLN(9#($Q(`8pTnYo?T^b+*n#g
zQglXowKq<xMFVQy3WiOf2>+(ROJzqz45`3UFr<i7Nef?i?UM4=3fa)<GuLo%s0;60
z7&ZckgrlTPvYB8gfe2YqAQ&)Q*zZ#<Q7f%{j&Ntmh~k3uDvL@{*{!}cm;U)&X-l_A
zsh&qS#xc3kF)nNfB7YVdSH*=Zll;z|@)O;cMU2eDPp%p!ovTTS=U179K@|<&(7RMk
zzVn^u@Ua8^+{rBBd-f?qu(vi9Q`Klpk&a4aA9-TJ>FEWedsk6i%W{_q6E;`S92RAp
zsUjF9(odqqO1-qUX@pESuX)Abib<<jU){v-l1i=;n+ki9)ZrDSMcyICumTz_5^Bn<
z1ontpBk4}A$0{s%P{jxFdfOy7v4udGk~*lP>WtShXj8O8`Pn8D)2QD|s-)%Em2ynw
zGQd+Sl>AE|4nL?yh!Kwm(B7I-jX^>|D=}YOVxIihfBb#CGBJx_XODV{O;58cB~-Rn
zQD*+LY3MRNyu@8^Y->VhY7!$C-ofyhx3N_!>HYiT4N3(a=E7UICP)>xG%S^odkhE`
z!N6iJzHnt4Ynh_?n`ODI#G`-rs0QfNr2@C`FbtU|<vN=8C6$SBW$j*%hPjt<N(`as
zA;Q<k_(e!dC$JGzFz3o!f+<BFd-}0^aqp2qa@>RHY)ZI)Hn~INz;P*#D7m#F6_^md
z@R>)^)YO0@M|Po$hLFlw6O2YfFOjQ;8`G+cI3;NnF!ZRJfL>iG=dj7}D%m2!Hc};~
zGDG~=%U(tM;BEw2ylT`0WygzKD|r3VE%fxapr^aZ$WC?Gp#@ZWI8sFod@%qU%6wF=
zcV#U_f|j9oO6A-VV{)Te<9kkH8^gMV!s~jVyhQ-CRAtL?`Lo-n@$~ex;-CD=N6}93
zJiof3HzGQ$z#D^X{JMu8UzE%tjG<j!*t4e(fAqV54<CQ*Zq|j0?xdG;mq=bSYy${9
zP@&SUnw#QIN!ZCvWmeZP!EpC8VyYQp#q}&=(tB9n#O94rRM-Y6ZLBga`0&z&DJ0pK
z`Hg@2aeVCKC-AGEf0&z9)lF7^a~JDzL5gm)gsS(BrtEsIt;yeo$mX?<D<ZfyRl>kx
zV%3bmRde3EZq0pf-Taay1UbkWeVPlnz_L=glG#;PzB2I34Ik#7eRuWXk>jkKk+6!K
zXWt$r$1Q5On2wnTmuMU@oWOzVMxLrjk)Bu9#rjFqn^KL4)*{HxZLs$;fk--r3?;J2
z(mIk<nRh>OKZ0Qo#%7kV{pejddf$Ew^tPj`qY?l8e|(Rh<8$$+tj1D4s+;cAqsIJR
zU*pun*U&C8m>SBwxUQ8L&sCsKgHvj&z*OFv3yD-Z)9-R=$9S^Or%~a%O*Q5M4bj%#
zgr3$0j8D(7Ql-@GZO3SV4y&JB{M^M`q<8E1kH7tS4Bwo>`%dn~`FBS#Grz`g4C@Ep
z=HDIaf0lq{=FN(Pu>#bxUMD~qC?1Zof8j@GZyRHkRgJ|dGSGr>Zx`En0>I1o<8PnF
z#iarg4GHx3v}uq<<6#X=1E$qZlHScmyRyHL7tE%sl`Yp9jGNVcRk?FLH#({*x?agI
z<+^pRa|FUTc<<HPS~Ctq9PInik51#=;aOFARmkA?8hZ|2f5OPtmQiMvy77+7+@bG&
z`!&3H`l@!iM3=LeP-`^-xIuIzNx}-7{M3LNy+p_(EXE2*HVPq_U^r6(uSyR#zlBYq
zevuf`-YojIH4<B<@zV3>@Xb@wW%D7-)~9swzVn0A=;@@~?-Y0sC0;(}hOLp@wdy(s
z9BYnrTyX%VeQDcnZiitIhKaZwTGq+GJ9VkPp8McBsap>$$M9JZTOleAS(5MKjoa#N
zx?=(-{7Eiu*${0m+@?23Xp4bGOjyqp@WSaEdP5Gq${5}yIIO%Kl(;N5rfh;z>1`B?
zRD%h0gHra1!9rAEY(GPUUYO$VQr(?Mw6-JG(WPxgX*~V6Z@r<ixx;&ypIO9LzB<Jo
zOci4j?5S80h(02?Q0~XJjUHGR1RSR>(Zk4bg7L(Fj`MST&e67owkh2__?|FUC;jy(
zcWb$0USZc0p+YLvw~g{3I7vx~NH>8v^G=!tp{OVyE`)I08`LJd>-s{CYp!;fARm3?
zgitd=i*i{PQDJ{1li5Hp8Ap^VjGv0Lmw?vchlisCy2N{)KtLf+jRyRS@4b%e(<|Cy
z6^wR!dd-Ba+v|`t;L{3BaaQuIBz?zr^*y(Fsa-gqzQ(EgjMB{4h^Q)?BnuWmT^CqQ
z6UsD|R3Z_|=n@pKRqu>AZUfkax7@RMt^v}nB2$-l#PbFQx^Q@3Ql|)t8=E+Lae^Nt
z0E40FwKeHTfsj_BR6g;RBZnw{?!OCjb`eedoBAcwXOZ-1iA5sFj$UJXD~m)#b-oI{
zvz5)KGSz5rkVc9%;~OttFy8Gkf@!T*RS)rcO`oHlW`uSfKG4f<+$JWcmSHNhJFejv
zHd1Del2(LJLFFB)bUE6zQUzMW-BIHSQm`sD-Sko&+SDa20nU~I)J0xf<gHLRVAL3O
zQrSJbsvuO9iIey5!TTRLh~ADCtgdX~-~HFG={ST?Y`aQw&YykKgb#Yn-e|Wjfu}xr
zlqz)^UYU8Bxs9ZJ7%Oi;#wK{}#pxw1&M%{-y+u+8X<`9Ogf9W|(<Tb49X*5i%;%rN
zfBn7hu<cpqLJ3{{L0zbH*p!0Vf=4Ubbc)fVfAf=%;hoD9<m4s%pFe$`G_URqtoqaq
z{h=tYA2KEpTUBM|rKY1Cj_pxR(ek;1GG9}6sv6o=H`>I2MHu`i;T+P9ASb6<B#n5V
z?3h*?ReSvk9`joTwkwM|q?4t0l(^g4Xb}`I-l{poF&%%pafIRd$xl9nZQU(wOx4sd
z72f#9^aNtk?4fLxV5kLHY^2{@-puO)1sa5C;MR_IboA}ee#EOUzl|I}(-P4XaQhu1
zQB_@8iy)lf`@<i;2ah~>7#*FB6g<-SH^1|B=A@87K)xp6CaOA4aa;flmF~S>18WS9
z^r-QinkkeXuGMdu8dA0laHp=M!i8K-4698kMusTdK1KAEvYQ@BqN(4Udv}WA7Dizs
zhpVGg=<i74(&)0wF}*Gbt!SQ#P?G<Z&pw2~t|Tv7!5WR1p||A7ft%t{jNQ0~-jJX9
zj!=c3DS69BkB}yl+<v-+qG)rA!kX3PMI71PidWxwhY+Zw0;)flFdHRd>q0$gi=KV!
zI*U*UPqm)l%RJb*qZ8L|%%~n{@LpBHJ=_T_DI}G0mEIUI<icZ0g5+LDrn4-gXj{dy
zZk+hNAI9po^Ila}lq}O(6ijq-%kmheAvDdal~(@k$I8M6zJBEm%#-Xpl}%M}C8Xr0
zY)6_pRT?jZU;Dyic>Lr+%3zxe_hp8MrAkeRU^_sgtu-`ZYitxl>~loe{|&PAN2HMO
zOOm_D?0)eIE^={t8o~S`o_g#!CABx*!csPU3(GMbGDbk2;_Jv*0qMphn%Ic??hoF;
zj)8W{T<rLjT~8IGNl~CO?jWTV)lVI)uEe<AZi67iZ6yLla%2kdX`{lx9w{UhIBv7R
zWh1fyC6g(A+E*31sJy94i0rgj_y*gTI>jV9p-rQeGK3!`epW<#63M6s|Kc}3f%{lE
zl5D0+yD}P!V1D{GHVb8hn$ifz<LKW#ggGv3ZhZ-ZjVbtPSU){58i}Z6CHLeH1~j>k
z&&^@-_5_~%*e9t+HsUY8`K&Z0P0v<(z15<&C=EUZmKRp>M}PbrR@S$0V|0PP^SjED
ztw~FK%pVNHa#d{HA#w(m$VH?oO97N}tJ7cletN3~o#C;ykeE~ublwYNDL5k6`Ht@G
z$Jt9a`AJN))crJ}>J4}d43JVz&#Ut1DjQDerW6Ku^y61P_c(gnQ_Occ^{5QLXVwWh
z$VfJpX4p>jAWCmb(-6H~4`OV57#SyzFgdr!ZFp;YQTny+qN6RX*kI^Oq56f7AII*2
zX8haV{Td1)HEAXG>z72I3_MNFuDkk(>mPNd;WCsuvePid&;M6%gt~nb4ReDhB`?Zf
z{7MI*l~<XyD@4@X_bB$1X#4v##P(C|2-1tc@$H{bYA17`N0^BwkK1IDVICHU(kceG
zx8V2x^A}V#zCAOo;}{$Hg39HRD>_@6wcmSlauT=ZXU&k&wr!|TNp_+sZ2HS6GT-G$
z^`bPkFc~!nxpwK+B(|tAR*PBW`M#s~?Zuz{?=Rs;FJ8fSe|VmZCB*P8n!%^Ko!r2(
z-0q?IgJ8U>qPB`oo5c-&wngGMO0`c#2d>ffxaO?s-*v>pOnVq*+BICA$JCo^D%S~^
zZ*6VFGfyAK+${SPR2WoHsF{gQ(|`5oq>@yxr$6=#e*ZsxNx@~FIIp?21>3jvDGXYt
z_}SjlqKdT)Z>%gXQN4+wfi25h^Ybi>VXRk(7sIVcrdzlnF`cn1(^E@A1qo%cl(1s4
zkb>MYmGGJ`%usT0<X|(t^4~s-fBTysM=)R}tYq9y)f5ZwO(xi79nW*P1~FWzu&IDL
z7&f%8S~X&;FbH|S4jcJQd9~`}9{ii%HI{m`Wd@LJ$AE0xEhe>UO^1<u1+s>Gwt&u#
zR_3NSKXjF!RB(qaO}L0Jf96w9;MYI@QC80a+Xkd&OzbkQySTQhZOOK_faW$rLREUV
zwYOtxoFYYUpZP#r29DwwCk_mUdeBA{MgXnhr5+8*R&EGmUyYyc=pz=~M00y5#fKo%
zM3CND!*Bn~XYkV(FXPmk*ENqB!NXSJ)^QhC;pRGZSf+H(jCBaxs!L#&JBDc(tSdg~
zkf~)juUmoTn;5VrK-%)$8T$yj+}m^R%`5n=fB&brGBQSVEi@~p?L$WzLaxI5iBCO_
zFMR&P>@NiM&DrdRcFA%yX4O?P&YV4iGjG4GB59WSuy6NnTsnIm@lXi&>_3P!J9GJb
zNq2dkDszbx%NvX#5J@u8Q;KI{+IiQ09bCFPK8Z5JslfCQXMyVP>!&euSXf>lm$tc?
z$MN)&`|lV-4I)&t-V3%3ua~Bj{OFfqcb^ya`k{2sG9|@`49<IL(P(&v=D9Rij7H>&
zO&KZ>wNx09-^^KihbM|(UR+tj?EI>#U^*`?T`+n?h$_kF{_bP=%r8EKwe@u@FD+wa
zVv27L>wJp1aXX8IHeMK7Z=X9$PbeeZ+NLeg`GsZt#W%l;k39XPj<-pJs>&oH?NaeR
z={b27Mffz)7npy?uV10iki-fbPF1e{z|bCo?J%2FNg6lBrhNd{M@O({s2d$^X<WTA
zs}r@B>oIl12zrn~b7@F5H%4&Z-P`pfKp+&*Q8*1P*JBkoO8%p#R-S(y9!h+&8RD1H
zfm7qbbx7N&Grs!{A<)?h&jxo^0FbCIMilVVixOOvg)e^LDg44y_v7a92nAQVZ8U*a
zhNe&O7DGQtHKo0|Sw}MlxAo%b#~;C!OP6r*@>N~L@slSpF*<>3!^7-ttP-SGG^dD8
zC_|O<+4F=TVsy!!nN@QPLi(0XEp4jS<O(@$z)M$eg;+CAHK&vJu*fhU=uhC$2ZtC9
zbuj@d?#f`1d>N6Ud}mb6<9e*)YJ>If#wQ(>w(b~J!<KZD#-eTxY3~aMR&|=d-9wBk
z>XOHCM|h=&VcR7ItUkhz&wcI}@S%tA#qh`odi(m&-PVdW_Bv#tZRr$xC<?^5uoZ&m
zAQN(h;VdjgbilKxPT|(XBwAWq@qv@a@P~i+M_Aj~Qp3wE^coA!>c$4frfw_kTgx%&
z(}?3EH!waqt^JOH-fk-25sZ#f=C9UtyeE}xK$;T2@Yu%2MpC{US<oZsXidO~s8AT@
z@tO%%aT$S1l2)ucQr3F~;=TWDomh~xWvfJI_-}@<DY!2y!i;o?A>%T^OLip%$0JqB
z)~0np&x+6;aPYtm{OadEjMdDVs?046Kbee|oO57s2U@uZF`gvwt*s5*BKVaG*GRQ_
zXlM{uFJ8e2y)I8LeenGcVC?EO%#vj^rW?r|QkvTw9mB2a!I#m=Ddd<FGi(9mN;bN?
zd$6>!!hG!4u(~-uj&<sUsbtEq9Ol(PB%*&8TRro^d(ht2!d&M!3XAKFt}?1>llC%1
zFmTM5`WQo31c5T|Q`(&ZaisdQ4~Sy@IEQO^>B^a!W1%F-#P2s9y<nvC%L*W+qtEKw
z)6<OK{hfcruyE9Poo#JeNH%%lgoacelf-{BOAF++l;sIsLJaqtH*T=HhS1m5h0|}I
zWe=l+J(MBcrMdY<T)K1_dk!7eK_#JXA|l9PoN`6f<scSU*U{O(OOHSd4Gj^l1i1+}
z@XE`tpu#-a)zz&FS)#VsKrx}csTuuU9f&fg_4Kt;=*=?K%o#7N%k|8+6)NJ*4PhL+
zdj}y>Ooapy4wT)9NFuY^+7y#hNGx36eU3fqtZAwV{c{Ze^|>?B@?TU$gcC>Ez7^Z3
zq9V=eu*yHXws)hiqZ#wd%WAxIGC>2(D^Q-L(bgDxWrmwjAZccnXwXO`irqVR;M&zI
zs4xtU-F*;mu>#8kf|qyq$YYOSd~^(xlM|Hq4V<ZxlBKBPOixc~_^y)0<mj36D;egw
zm?}W~_aDIV2j7P&dhf{CFjfeeHgnV`b>5kcFnZ_g>I!5OG9rB0)s<!Oa+;}J+|UNR
zsNgDJNf=ftrt(Uqm0U*r>6fA=EeL56@x3AWlDy{_k8@zgdqp1-j93*o<1x)RpJC7*
z)z^H!IG%at5h~G(T8XcZ-qagPGKAyKH6%waAs26D5~bc(2w<Vqf)Pqn1PkmFH{<^M
zPco!4c;-V-;<*=J$7P0bZ$}#<jScwHZ~ikHn>~=tRrqMY3i}!}+?cJ+4ZL>iHlkc)
zu~<+L-9Sn=(7zowZ;f+f2HA^F;NsQGsPR7Y%$b9|y|}<iT#<8eOgT@SybmqSF;^UQ
zRQRn`ipog*EGB0D**0lW8t7hwStK3E#Hxy^Vi2DhU{Vh4G7dS?QTDjJ7-l|3#|cD3
z5H9R-8^?moAAkP|?A_H*^`(M2Djw5ZVDG>H3jFtu(h^e9N8wB_VEghCFEs-+zKwSq
z8nI08U0<EW@=6nThfqN{FhTK|Gw0Cup{H@}$|Zc@k;l=>#4jG3VhFBe*7dANiYXw^
z8yUWO9k0Fm8XA}*C+B9d5sM?sgq~;fsg?AwVK!xWEf+gVPqt)=D#5LzwDs1NtH@Pk
z7?e4TP)JW0&{_fFOVu#lx>}{DYs3XjVG$WjQ=86HJBF9nY-Q2)^Kx)uk>FQ3_vm#~
zgir7<t?3)+O6f^WnRof%qsJJ=Ud$~n5TdX-)Z0U@OWC~vh-}dM84~?OTuu_g%C{j?
zqX0VD3WvU)_TOf6ehE#@^SHdwf%euWwmwIYd$@q@o!!`4UqK%eeM_<(3k*9sQzto7
zCr8;M*~yI>AHRja{IhT1l~-TKGfzFGVHymFh(DJ|=ME|F7RVIh>$kYU63)GSEv)Km
zcwyoK%Jgt;;uANT6H8(ca&#GSs~JT*5DaQKTX%4v+qL_-!cuYt*!q87Rb?zasdT6F
z;xos`e82X|<IDjO^}vJs`Z2$_jJ2&SR(R6~4jjM+D^#R9M(v1|Y;lp~ISre}b$C-#
zvovUPCwVT}NAM8FSj5xWKS5XDVH`ZT9~b`YTja>AIC0-`2v}cQUc*Fw3Q^`9X*_MP
zDK8TXF&a|Zic%C3tnN21yn~Y`j%(f(Lu_sm3r6|HG$U<QVKw53?afU(fGKRFH4#Nq
zX~TfzQq|<A!kUhDv;^AB?28r)cc9$m(MBt<jRxT=EMC0Vdw1*joyi2vwC-4k_C(_J
zrZAP`P$G>@0@aoE40)bc^T`6CM1Ue_0~hW0_QBc3J^($^nV8ko*|nz|_pqqkM59Vh
zRxQg)=fyI!#L)h|*wKF)(-XHay{%sr6!ElZJf*^Chy*_oD<MN%7-7)}^KTvOGaS3;
z82<b(zlQ0VS%z*CdfVDjNjIQ@#cY+FT@XWoVO^2xZN=Df$P$oe@$jAjgexoB1b5t_
zaI0iyo70sZEeg_7Fl}z)KCj!zv<+3$nQFV<d9!uk(ufD{D2K~*R4bHFmZP&?w<{;f
zFcK1^pV1JO!69J{-ON4LSU4`Py^V(Tm(c7@BH?dlb!vpa+=4ji-7)5sqnN`MIrLm`
zjTkDa_%OlBeEh_{`1W_dkKOzBv0t){Ubu{gbQ7y>Q5)+%R?$?m863)TW7anP_{c|}
z#*cpVEHaFM-8;4uDiJ`36H3Dh#G+fIkW~t{K|-jj4EaHVd^y0=%?4PX<X@5UQO{du
zY$#4E1ifxg1a21&^@h1IsD`oNL^&(x@?ZN-7@MOHWtfo<9TOHc#)dhqS*0~s*H$$4
zCAmhJCoZ3P1LxiXCgv82&1703fm)6Rt_-6)QNz6r7T&*a5DlBXe9tx{dZP5At9YZf
zPtOI3K?Zm3VxMCJIeKY$ho9H=Q;68q+&4QjgE6w4&wl393SUBUER6Tj)YOE}e(qCv
z_QjX*@WT&l0c#*_k`wR?Od-)k19nkgyhRoxXNBiiS9S9@xsh^)LxfPDJ7n(Fo`s_j
zMCB^Shy)tFwyRpZ^i3N}t}3H51(rL#Ac~7+DzHbV5{v@m7yd2kmo{5ixoRSyauKIr
zdlesi>``oHG8ou@2nQc{h_Y2t`?I3Lj9eeaPoI4WKf0Pn)45SRI5dujcKUGFl_;F!
zJ=mx<po2+VXx5bAJ}&HSsx;dN2bF!av4^p=mciYJ4xod^k|SYheqUyh5yMJ_JNeK9
zc=p+6vCL}UOIDI&pJR;xdSQ75jdYKVR8j{v7nb;MhIe;MBW4MOsx?aiug5YYx?Z?V
zAlP?~_e*=!E5d=OH?})$t`lUoIWlJOw^m_sK%sAC&5zC<OsJZo+gs80e1)LaDf%!*
zIPlW*FEDov;QIJ&>^yYD%oJBWIy@wGeedA|h!X&x`PrLTm|Md0BPG0Wqk^8667DKn
z7&uCg%T{z?==E1l=~0JucH7oidD}X=bf;UGBC>@Ny0`V=l~-OtTTc(g*ErV6mt|Tk
zOqlWHlaJyQIrTFi`3PCYhK`7AQ6>|wyEQeXVBE*>7EiBKQ`)pI`UKpX!Vp%m-yPdf
z8@Ww%X%BeZqY^sl3UkQD9V`;|RnvZm3FDH$7cCt1Llf>0Qq6=t1%;5#m<UNvld8#V
zN{mM9YHuc8TT;d#rC&l_a)i*X9lLkov8Nx$-S@KjzI_`~geNPN0A4;bj_-W!+qn47
z1$rJaSw%>?gDclY@#eYnI)R@g3~5d^Q1(w^Vrm9S0`Rv^pH<ovWy47XTTyG$9i4dR
z{3Yh#5q$(ejFrEW0tS<bwk9_j_Cf>2IM>G~aQ)U4A`J=Ga0YHjUze|7r>>@4SHG%;
z^NK(rgYOlB_bNfXoLE<G>@gTnj3<JE7*9@s$>_Np3)a3c%!Y`t;t`xBvnIj<uH3wV
z9ev#zN?WXW66+zV%|+4i1Ymj%ev*Oh4szZ@ci)WzhxcP}_fB;5bkoDywbvjc8||#1
zhmIUXmas$eO^$G8lSS&?o1+-MJw+vEO4|Z*v^B0r865Sl5IuK&eG?f<U0w9dzy7Ol
zAxVfLYOxdynFvc!w8+yNTL|Js6$;7o5JX~Yi0h&~%3p2uz^Y^Y+-Xc(oj?G!C@*3F
zxYPgo@B`-HGS`>md$xE-c^6PuRame!pNe4%@&Joc*)-O5K*(!)5K>5N{=C8*wJ1G~
zd_gZNAhLdjOx#^uTtYP6*rekXU8GiXvvcIRWh{)0QUe?#Gg(7CoiN_Zn~KutQ*-l3
zr<+x#O4D0fRGRW5&DUI|Vsr4wVTBs4gfmmjjm<R9HRjx9R&N<D-z0mH_pb5UX?|{q
zMJYkX66+6<7KX4yLknDymSjO2<F@H<$k|`!EK#P-85gfBzPi&3t}LkiAKniexjGo{
zGQK;Z3+2M**&U*1R&wtAPk_b{UN|>B$DPlUP9=!=30VlRbwrH2CdEJnQIFeAaG$>t
z;({c%?IGyiN4U~OFA;jR#QyLgHN6I^FLJ{3#@KB={3nZUXVQ<yW7_BzOxH-Qag#zp
zhB+`OGcSZdM}~HjRu1smt(YMuTw}HU;j=GdiLZHu6mgu2kO;EU(-E&1l_$~Ns^J^s
z{l(O7?zEP43@bGaU0I7dg*5G1oT{ag3J>x-8JT0cSM}NB7LSrb7)QrY48?;UzHzu2
z!d`qrtVNn%U0>#cJ8+#`cXWob5O+c}Kyh=^>9^I0UTKJXp^QN34Lw%ECq%&Qr$==X
zdSu8tuH78Q(5@lgd{v)OAmV`#cY!R!Y+p+CEGi(j^_XjtV(B{d#{@xrG8)oR+8W>U
zz|n)Ge(M+@7~i>LK+{PB`z8x)PW4kVTV`sIhf|2ISEC~1a|wiWZ$g%N0*4;sayxf-
z4qU^WK9aB&)kscf>Y!%LR<S@TanNzk2)pw`!fHycQtjpXOF0=Hl_LRMV1Z#PLS>XU
zk)`3Hq*Su#e0EFojm)D+nJ;n2>qjDja&Sd*p6n)ZQGg<2cXt<#o;bmLm&Jt}Hz_4W
zH1DjftYUa{oMLKTj}yoSXyeC>!sF1<!`PyirK#CTUP@E_PBT2)TbnV$>xjqS&DRVO
zT+8zqLM(JLyBKDah)yZf{s9`^43nB(aTVr>?wtmaU4IIaoNlU`oG6OC*BoAuO%UN!
zS+QN8VlawA&6Olnsuk^!DM=o_qX|H6ZeZ7L3Zs7Q4U6aHxWLiTTP!Ad^G4f@eaVMr
zH|23nc`6^&+?Y&7S(f2NN&ez3ee{+ztLr8K^dT0RoK!*HP@dRO!l*zdl2=2@1Z#<4
zcnt+9HeAREsh=!xo?hHc5#lAn9O*4jOVOeC38Yye1IiLDgjswV6LB?wgmTbhrt@Vc
zrt0P`j|)32$G&rNLmP2A_G>21WKE(42sLwDBMD`!a3hLt7+V_Bj?T)M$EoOxT*XF{
ztc5)X52Ky^4oUEFT30HwFbBm@H3LZmGm6WL5#(75;$1FHBzVs2DRrS-jqHa^PEDh4
zpil8tzEIM<5)OE2^n#Llff6Faw-ZQ90cvAqKYQ*Sy~g;|9L3UA?A>!0T9YxvlJY33
zCRJLbVJ}kwa^6^sFD=h7NkFkVrP!|Gm~qPr+@lThT&zmfJvdaKDyW)?tx8#&O$uRn
z-vYGtH86dVf@3&wPGOA+?SKTc*BtxxnB6fa4_iAs(Z6Gt?n+ZSZ4kXa;;E*)ubw8J
z;xPk^l6b{iiwt!!hOmz<_Iy_;FZBqlp^&<7&u+^8P5Pj*O?u7r%)Hxed+&KxB5AeJ
zV+-`g7&q>nE7vq%%A{3eS1*=m$fcPDH1cmj8eDqCVdmnoTelQ3j8n0`J->hgMb(<-
zPq^(}d5Dfj&(GaylDqj(pNXS`2tET}ct1KGVwq<o<lSoSbq`w06B6W%Tu>^t2oQoB
znL<1@+odp&$B6iG<lcL^(`h8gHnvft6Ur21l~!6)DeJC@F}0fUtD@eRSFaSTnAzIY
z{8o}O&ksCJP~F+pO0qA?N~<=MuCTyJ5>GPx;xuNQTsKLBM45xz+dJ^uORwl;ewcaq
zE-KQ3568#H4C~;vH@9+{{{%Ya3q`%hF=ET+o-WvgPDVYk+;Fo@E_BCu4dbvCRNJn~
zEPWfVv`z`96kTY!@IWSNqA&-py>4EWTqsR{Z4F5Asf%8Ydt5ZccHMRgshu+S(%r%4
zwE@Qhc;OxcC`<U3%Vs=GpFLoy6edlXgY1n+{t%DbIk;V`Vl#1FjQL8MNu5m;M45nP
zthbrDt)E^WB#@T^bb!Vh+TMpJ*k3NuTaU0QC7-uz-vM}-I)3`%D=M)i$V%=xu%Gvl
zXC*Ib-uC&-1H)`yKgVSi9Mg*Qz&x@<r6{k*&^Vn5^lSUnqu9`^9;wZAuXv!x$X^Ow
zJnpE6qy$S(4+z+nM@Y$7p3kTb?;Q`Q<csQIvkOb?MVL?#cp<#AQZbTGk;V(jQ7(Zs
zY<LT`lASHlyOt<I^il?EX2U(RnZeo`MNM|_mlx&<A8e|}8HNUTm-<qZjC&BuNOx|7
zx}Jnm4{2dD;ZTs#AYRwm*@a`r?m>QKi9P5gboX_!<++R%m?QWCmL+GeFptZ#w`v3J
zD4!qJuA&%9T9iIoHpILe*jj}hO`__~Osn>yPwg;|bJAzd_yaBwGDkmz(Fk12>$7U=
z%>nalg;+y_^h``B)`vrq6fR{1qmMMIsi{$`PeBgEkcO4YCCw)_J#^z9d99f9zb(Xa
z?X7J(aJ0ZmIZh@aGl;vlZ^xkn`*eiE?>94hOq@9N;tR}QOPXV@jEyR+kPhDUTVt3Y
zNS3~aNcV4@KTn--3wIyCp9US*Cn8D9bA$X?Qo#7_Y0ZlQ{I%gT)Q5^dF)E^4;wjs>
zA$ND9skVk#ei^NH9xatDQspf~OIbw9RJw~KZn;hE_1e64MIPqjc=WidaA`51&I7`D
zx#b=uYhaZ6>WS5Ifu>aCb;?FQcFFwQ!8{9svz5n-KYocc&x;NUm#K784U%MK46vaj
zG)X0N-uOB_Od3Z*b)sDC{e&?w{{4j)UZe-DW7l1~DN`-uh39{UCVJ{Ul=~;=<|r<t
zSox!9r}xRtzxuON=<nTzeS<sk&b6yZOY^B%p(wkAMt-iahrWIa8S=C@Zg{a!(%R|a
zW(G;=Vm(PTAL~P`If0ls0->Hime!OI^vG!`X{H+$TJt(LWSvEeoRbBFmE1B18fAlh
z%#T$$7b4GZh_jPNCo6@02=lXjI$|b{>NZ`(i1H*!X*zE)ulY#5(!Ak&j~&6qGiNb;
z@tWqKD^?9{%xz)reD97O$kPL*{n$c6e}!Ij;nEdT?YO%i{@{~HHMQz9v~G+~VrF_q
zAKLiiA3u-PtpfJ!+e;d^p^xAc)^clh7E^>kd2-)}Kkz7uOd&rc9(??Rj~OV%&FX0H
zLMqj${I<j#D12V}BURGChF^aaUCj{{RE1rHl4&-9!h+t_2#z<P1MD@`2rGI`8FBDb
z+2g)v0Dc-NNW}<EN%&hD;E-iiSsO}JDavab`phskZxE$jynp9IkAGQlkj&b-M%02K
zhoUJKtkR=0Y%=9&)Pqdi!T?I_bd_Z`P?|)y*z~@76Q^E#6E{Z2*<fPJkT~tY;e&YO
zfs?p(b4-QUEQN`6;=}^IC{0h3rq%qssNGvCV+{^$BTdVxL1bKHk-h0fwl~`-sGgxW
z{_M<oP2htRW=p)*CSRL09-wW~4TiZCfd)p0MF`eJyeSW^kSrEXHmVNj(cZUThnWg2
zQma(Bmnd+ouzkD6PNZN#IpdO}{t>!+2;sYSz-nYwX91MCpIou5bwEP6lWb`F-o5aC
z?1>M2S)cUdH5FDVOij+E-D3CMoa+#<D~w^41){CH8+$1lNW<G7rm^UugFCkAF@`Jw
z?VJGM*%{1EOb~8laQyha+Rtcd@5DCdLz%`ub^0yLk;`UfT$k4^<g+?;FiV52%j58v
z*yZOq<@*!IAHYxk_6O`1u8{vODrDNXXGmpwd32sAH@2IPg|kVK60NYEl9#V0k0^~O
z=v6o)BW9I~d0?4vUY|KN;G<!$T)2qI;bE2D<k_if6fn|UqvOsK3eL?kRctW7PtVWb
z$UXO<wXFlbVlk`DX91Mb50Pp65H&)Z`C#P6RqWY+&>X%YRT3F#a7PL!?mtFMRz!e1
z-_|*&c_KwN5uIC5g=O!~o#^RoV@EHhNm)jJrCA=J2gPahj+R!eEUx3O{rm7szxYx1
zk8k4U@D0tqdk-JNebgB<G{obNeNe@Ms_oTj)1{RRZd|$yo7G+P$L{V<#P{sdC-;WK
zA#)ytsb`*^wb9N5pUbP(sZ;t=Nw*gDfr_DMLNTj3CtXE=_jK&xNANOX(iwWX%y~x`
z!i(3hBTepIAVMg};UVVC%U7==LaVm(vx{VDK2f7pqL#;JicB3eJ=&heMqGXOZ3Oo3
z*YJ=qmj}qsPK;rBa2q1AB(=aK8c65TsW=xg!u~~vX&^;HNK*IPNyxF4ljB_LI-+~}
z)mJe`BR}!@2hdB5xMOgDT`)g;AP=!Pwc&*yKTFMTLzVDdd-fs15S5cpfA@>OqAJXb
z&;CTK^}$2?@%vx-s#34E&OYqgHK=(oB9jOV+C{$KAC98DPAI~K`zyBgHgZ*}KXilu
z!+(oKL*65Dn*1m8h!4K+KD-g~VT9E_O~CFQ8$*tXRMxuAHPkFWw#a-2h6a&Hw;;zh
zh4&L5`Oug3@QHTltBTfTG^0Wperk0NOAJd9MTPeka$6|V>bD3x5^PV#lPRTDqVsLg
zE95Ho96hQHbD1J&p;wBCARRSXn9Le>QzY$WFGLzi#j24i*V&d7DmOJYtV)VJTkGJ#
zgM?Du3Y#X`8Qf$JUf~S~nYd4!I7uqFrS~Ih&M|&wmY*TTMHCguqe2%ghFy{OrE(PW
zUYV~ck;TY$&fgrtC_VmmW)pKXW|sHBW)70Xc11F;B7u1iQ$?b=#XO%uo`1toZ>49q
zaP0@l*p`VNeDahEIUXes)6xgDy1fI;uc33HfNQlWo%#%fB6>VannMLvXTe{;`s@G1
zZNNAzIL+*%bfAUaI68S-Dc(xP+`K%|qp-22-cylk$x69>pbf84I1uB?YiB0LwG!{y
zJ*462W8Rf^t4uKrlA;YyPSPXe=<V%8Go`K$;?y@@JI(&fC9Hg8MIXT|vQ>#iEJx2;
zX1WQ>Q$tv!d^C(;#A)91g~>S<vz(r{lXgawX+|*KGIQ(Z(jq#U*ABh!0ewufJQPTn
z%Mv|0P&H53kzuC614oqpW(B3#E-=({A#!R%a)u;QhE8|ciwUY9tHf>1WCU^ua9dwL
z3&jj3=!Gx;^vBqJ@DQ=tx;AE731Nmu7qlR>G9+aFCBhrr*qB8VJ>vMi_pr+sWTkAt
z8sSR|b76`Q;q3W$Fns+6t0eoo46)X*N&Ld8ukmxF=h4Yx5f2~IF52?yA{v_-jbbG2
zO%@lKu1GR$^#S2BE-a~oMaIW`xUjg2Ym>8BWkbHTjj4sXS3FHvmJ~RNq$DFkHa3<r
zg8?G%%NU<bgM}h-=63TCjjg3B`uetMC>OaAK0VImK2qf8M%DGqSa`EQpxTA&V-wmp
z7OIxZW*LUfxXp#h*v5;`zpi6pd-qa;Cy&*$!(3$~8rFv@%Gkv!Lq%XjcZUo_hOtJm
zRjRFMf=)TF)KHY5PIls?FDVR2p7eWd__|irNvbUkTx45&n+{Yikjh=SaDly&Rea#F
z4^aIcLC-)xGTtrq=7FwG&AmnDuAiQIldveyE?+P9^Zxd+(G_Qbkn<+;h-Qz^oH6zX
z%(GR+>vKXYW!O@5QEsT5WlpvvnClx*nIA`l>iPWT>&(GrdB|<mD6C#{_E(>+CwN*8
z?QJmGULHj-=EE|fNrY~_w8#bz4cOF}<c(!X@3<>#n|S-p^OzaANkeqQ$JZqo%6;@!
zIl3jY%^RBxBOk+`o+>-K%5eGd-#&--o=)6Lr8ynXD}|HAw2%_6vieFM%`pwkh?v?)
zWxSZf-Fx<6grPVyahspjh7`m3^5ttdcK>~txP6;YDvPeRHhOmpZcWePp=UnK@J=xt
z6G##42PL0#!$jwtrzgvNVj(Z5pJd#ms<c)g`Q$Yty!zxK^5_<F`v{F49bduRsh?ry
zrPBzVWJF2mX_rcl5_`;vNEIOELX7!+{y3aRj$?{9eQkVHPyNVaKqP!h-0gHSLUlOL
z9rbb1S<Ek8)2CZryLc7LODovVW|L@q5#}5bW<zvxx#^c)c!}J00!^)r2r)r*v9Qd{
zFR2bFGM2y&X&H1f|IN_j;;ig<Q=O4&e*M}NQb-HCckRI0GjB7U+{PE2s^-oho9lB7
z+btFyeb^%V-kIzQme%G_88HtsleKyDWU9w~_;&rd2+#=(@xn44L!LNN<#qi09$Q$)
z!s*M%|HV%+`qdx6I(`U|2k(=fP(Up#Z<Hz{&+HRY?_vItZf)a21{13rXdo*IvDsAP
z?=y`5DDy>u1;tNF*WH@Ha>hviB^gqr2WLom-gx0vOpo2t;<SBxze1FSrB#)mL{ICc
zPAFR7^6D}Mdb_ZrryZ;GRC#o~3?S)P1>uWGV_|yE61{eFWf5x>PkZ_LtbqH)IkYr}
z@vU!uT{l(ILW1EgJrWr}lA$0kQH9q%Cv2;3Sv5^4Y5wyXMS88!NTGUj3o9sZ%JW`<
zAtHwOxjDpE`8uYh4B1)8s+ot_avfEX(Jb>UWU9?2o$jn!Wo<1=2VYK!`Pg7@E!8km
z+R~kilLz~0;H`prGOjR`#q}bJ%$W&(YIBOhC|N+U=4g+##2u8yU%GG^Gqa1T+yq%!
zWpphZk7>@mabpyn#GO$ZGeKAsA{bw1^6q8MlOtS{<jylR+T7$g5`-xC9NL3<(nzaT
zz<u}Z)w6R^In2!hm81|Hkmsh#qw8f{jbC%)xAcs0j`S_JL8*YnKn$_8oWbbA2D&0_
zhPA{ov~xQf{}YIl26hkhqV-*V#tQK<4HvddZ>1;?-F4+GnP&L^`S)D)#1?#>00000
LNkvXXu0mjfJk8&7

literal 0
HcmV?d00001

diff --git a/src/assets/images/profile/tracks/data_science-disabled.svg b/src/assets/images/profile/tracks/data_science-disabled.svg
deleted file mode 100644
index 5d6f36b2c3..0000000000
--- a/src/assets/images/profile/tracks/data_science-disabled.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
-    <title>ico-track-data-grey</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="ico-track-data-grey" sketch:type="MSArtboardGroup" stroke="#A3A3AE" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M9.4878,3.857143 C9.4878,2.279286 10.754605,1 12.317068,1 C13.879532,1 15.146337,2.279286 15.146337,3.857143 C15.146337,5.435 13.879532,6.714286 12.317068,6.714286 C10.754605,6.714286 9.4878,5.435 9.4878,3.857143 L9.4878,3.857143 L9.4878,3.857143 Z" id="Stroke-43" sketch:type="MSShapeGroup"></path>
-            <path d="M24.3415,9.571443 C24.3415,7.993586 25.608305,6.7143 27.170768,6.7143 C28.733232,6.7143 30.000037,7.993586 30.000037,9.571443 C30.000037,11.1493 28.733232,12.428586 27.170768,12.428586 C25.608305,12.428586 24.3415,11.1493 24.3415,9.571443 L24.3415,9.571443 L24.3415,9.571443 Z" id="Stroke-45" sketch:type="MSShapeGroup"></path>
-            <path d="M1,19.214843 C1,17.636986 2.266805,16.3577 3.829268,16.3577 C5.391732,16.3577 6.658537,17.636986 6.658537,19.214843 C6.658537,20.7927 5.391732,22.071986 3.829268,22.071986 C2.266805,22.071986 1,20.7927 1,19.214843 L1,19.214843 L1,19.214843 Z" id="Stroke-47" sketch:type="MSShapeGroup"></path>
-            <path d="M13.024,27.786243 C13.024,26.208386 14.290805,24.9291 15.853268,24.9291 C17.415732,24.9291 18.682537,26.208386 18.682537,27.786243 C18.682537,29.3641 17.415732,30.643386 15.853268,30.643386 C14.290805,30.643386 13.024,29.3641 13.024,27.786243 L13.024,27.786243 L13.024,27.786243 Z" id="Stroke-49" sketch:type="MSShapeGroup"></path>
-            <path d="M24.3415,22.072043 C24.3415,20.494186 25.608305,19.2149 27.170768,19.2149 C28.733232,19.2149 30.000037,20.494186 30.000037,22.072043 C30.000037,23.6499 28.733232,24.929186 27.170768,24.929186 C25.608305,24.929186 24.3415,23.6499 24.3415,22.072043 L24.3415,22.072043 L24.3415,22.072043 Z" id="Stroke-51" sketch:type="MSShapeGroup"></path>
-            <path d="M5.5976,16.267557 L11.079307,6.6247" id="Stroke-53" sketch:type="MSShapeGroup"></path>
-            <path d="M27.0823171,19.124671 L27.0823171,12.6961" id="Stroke-55" sketch:type="MSShapeGroup"></path>
-            <path d="M15.676868,24.83896 L12.8476,7.0711" id="Stroke-57" sketch:type="MSShapeGroup"></path>
-            <path d="M25.04877,20.0175 L14.3506,6.2675" id="Stroke-59" sketch:type="MSShapeGroup"></path>
-            <path d="M18.7713,26.803271 L24.606666,23.4997" id="Stroke-61" sketch:type="MSShapeGroup"></path>
-            <path d="M6.9238,18.231843 L24.60673,10.9997" id="Stroke-63" sketch:type="MSShapeGroup"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/tracks/data_science.svg b/src/assets/images/profile/tracks/data_science.svg
index d8bda563f4..4a5565e0e7 100644
--- a/src/assets/images/profile/tracks/data_science.svg
+++ b/src/assets/images/profile/tracks/data_science.svg
@@ -1,22 +1,11 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
-    <title>ico-track-data</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="ico-track-data" sketch:type="MSArtboardGroup" stroke="#FC9A00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M9.4878,3.857143 C9.4878,2.279286 10.754605,1 12.317068,1 C13.879532,1 15.146337,2.279286 15.146337,3.857143 C15.146337,5.435 13.879532,6.714286 12.317068,6.714286 C10.754605,6.714286 9.4878,5.435 9.4878,3.857143 L9.4878,3.857143 L9.4878,3.857143 Z" id="Stroke-43" sketch:type="MSShapeGroup"></path>
-            <path d="M24.3415,9.571443 C24.3415,7.993586 25.608305,6.7143 27.170768,6.7143 C28.733232,6.7143 30.000037,7.993586 30.000037,9.571443 C30.000037,11.1493 28.733232,12.428586 27.170768,12.428586 C25.608305,12.428586 24.3415,11.1493 24.3415,9.571443 L24.3415,9.571443 L24.3415,9.571443 Z" id="Stroke-45" sketch:type="MSShapeGroup"></path>
-            <path d="M1,19.214843 C1,17.636986 2.266805,16.3577 3.829268,16.3577 C5.391732,16.3577 6.658537,17.636986 6.658537,19.214843 C6.658537,20.7927 5.391732,22.071986 3.829268,22.071986 C2.266805,22.071986 1,20.7927 1,19.214843 L1,19.214843 L1,19.214843 Z" id="Stroke-47" sketch:type="MSShapeGroup"></path>
-            <path d="M13.024,27.786243 C13.024,26.208386 14.290805,24.9291 15.853268,24.9291 C17.415732,24.9291 18.682537,26.208386 18.682537,27.786243 C18.682537,29.3641 17.415732,30.643386 15.853268,30.643386 C14.290805,30.643386 13.024,29.3641 13.024,27.786243 L13.024,27.786243 L13.024,27.786243 Z" id="Stroke-49" sketch:type="MSShapeGroup"></path>
-            <path d="M24.3415,22.072043 C24.3415,20.494186 25.608305,19.2149 27.170768,19.2149 C28.733232,19.2149 30.000037,20.494186 30.000037,22.072043 C30.000037,23.6499 28.733232,24.929186 27.170768,24.929186 C25.608305,24.929186 24.3415,23.6499 24.3415,22.072043 L24.3415,22.072043 L24.3415,22.072043 Z" id="Stroke-51" sketch:type="MSShapeGroup"></path>
-            <path d="M5.5976,16.267557 L11.079307,6.6247" id="Stroke-53" sketch:type="MSShapeGroup"></path>
-            <path d="M27.0823171,19.124671 L27.0823171,12.6961" id="Stroke-55" sketch:type="MSShapeGroup"></path>
-            <path d="M15.676868,24.83896 L12.8476,7.0711" id="Stroke-57" sketch:type="MSShapeGroup"></path>
-            <path d="M25.04877,20.0175 L14.3506,6.2675" id="Stroke-59" sketch:type="MSShapeGroup"></path>
-            <path d="M18.7713,26.803271 L24.606666,23.4997" id="Stroke-61" sketch:type="MSShapeGroup"></path>
-            <path d="M6.9238,18.231843 L24.60673,10.9997" id="Stroke-63" sketch:type="MSShapeGroup"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20.863 3.44312C22.5463 1.59557 25.4537 1.59557 27.137 3.44312C28.2537 4.66874 29.9818 5.1318 31.5617 4.62871C33.9433 3.87033 36.4612 5.32405 36.9952 7.76573C37.3494 9.38547 38.6145 10.6506 40.2343 11.0048C42.6759 11.5388 44.1297 14.0567 43.3713 16.4383C42.8682 18.0182 43.3313 19.7463 44.5569 20.863C46.4044 22.5463 46.4044 25.4537 44.5569 27.137C43.3313 28.2537 42.8682 29.9818 43.3713 31.5617C44.1297 33.9433 42.6759 36.4612 40.2343 36.9952C38.6145 37.3494 37.3494 38.6145 36.9952 40.2343C36.4612 42.6759 33.9433 44.1297 31.5617 43.3713C29.9818 42.8682 28.2537 43.3313 27.137 44.5569C25.4537 46.4044 22.5463 46.4044 20.863 44.5569C19.7463 43.3313 18.0182 42.8682 16.4383 43.3713C14.0567 44.1297 11.5388 42.6759 11.0048 40.2343C10.6506 38.6145 9.38547 37.3494 7.76573 36.9952C5.32405 36.4612 3.87033 33.9433 4.62871 31.5617C5.1318 29.9818 4.66874 28.2537 3.44312 27.137C1.59557 25.4537 1.59557 22.5463 3.44312 20.863C4.66874 19.7463 5.1318 18.0182 4.62871 16.4383C3.87033 14.0567 5.32405 11.5388 7.76573 11.0048C9.38547 10.6506 10.6506 9.38547 11.0048 7.76573C11.5388 5.32405 14.0567 3.87033 16.4383 4.62871C18.0182 5.1318 19.7463 4.66874 20.863 3.44312Z" fill="url(#paint0_linear_5048_15486)"/>
+    <circle opacity="0.2" cx="24" cy="24" r="16.9263" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.5859 14.8346C23.8467 14.7042 24.1537 14.7042 24.4144 14.8346L26.2671 15.761C26.7246 15.9897 26.9101 16.5462 26.6813 17.0037C26.4525 17.4613 25.8961 17.6468 25.4385 17.418L24.0002 16.6988L22.5618 17.418C22.1042 17.6468 21.5478 17.4613 21.319 17.0037C21.0902 16.5462 21.2757 15.9897 21.7333 15.761L23.5859 14.8346ZM19.2708 18.0278C19.4996 18.4854 19.3141 19.0418 18.8565 19.2706L18.661 19.3684L18.8565 19.4662C19.3141 19.695 19.4996 20.2514 19.2708 20.709C19.042 21.1666 18.4856 21.3521 18.028 21.1233L17.516 20.8672V21.6842C17.516 22.1958 17.1012 22.6105 16.5896 22.6105C16.0781 22.6105 15.6633 22.1958 15.6633 21.6842V19.3684C15.6633 19.0176 15.8616 18.6968 16.1754 18.5399L18.028 17.6136C18.4856 17.3848 19.042 17.5703 19.2708 18.0278ZM28.7295 18.0278C28.9583 17.5703 29.5147 17.3848 29.9723 17.6136L31.825 18.5399C32.1388 18.6968 32.337 19.0176 32.337 19.3684V21.6842C32.337 22.1958 31.9223 22.6105 31.4107 22.6105C30.8991 22.6105 30.4844 22.1958 30.4844 21.6842V20.8672L29.9723 21.1233C29.5147 21.3521 28.9583 21.1666 28.7295 20.709C28.5008 20.2514 28.6862 19.695 29.1438 19.4662L29.3394 19.3684L29.1438 19.2706C28.6862 19.0418 28.5008 18.4854 28.7295 18.0278ZM21.319 21.7331C21.5478 21.2755 22.1042 21.0901 22.5618 21.3189L24.0002 22.038L25.4385 21.3189C25.8961 21.0901 26.4525 21.2755 26.6813 21.7331C26.9101 22.1907 26.7246 22.7471 26.2671 22.9759L24.9265 23.6462V25.3895C24.9265 25.9011 24.5118 26.3158 24.0002 26.3158C23.4886 26.3158 23.0739 25.9011 23.0739 25.3895V23.6462L21.7333 22.9759C21.2757 22.7471 21.0902 22.1907 21.319 21.7331ZM16.5896 25.3895C17.1012 25.3895 17.516 25.8042 17.516 26.3158V28.0591L18.8565 28.7294C19.3141 28.9582 19.4996 29.5146 19.2708 29.9722C19.042 30.4297 18.4856 30.6152 18.028 30.3864L16.1754 29.4601C15.8616 29.3032 15.6633 28.9824 15.6633 28.6316V26.3158C15.6633 25.8042 16.0781 25.3895 16.5896 25.3895ZM31.4107 25.3895C31.9223 25.3895 32.337 25.8042 32.337 26.3158V28.6316C32.337 28.9824 32.1388 29.3032 31.825 29.4601L29.9723 30.3864C29.5147 30.6152 28.9583 30.4297 28.7295 29.9722C28.5008 29.5146 28.6862 28.9582 29.1438 28.7294L30.4844 28.0591V26.3158C30.4844 25.8042 30.8991 25.3895 31.4107 25.3895ZM24.0002 29.0947C24.5118 29.0947 24.9265 29.5095 24.9265 30.0211V30.838L25.4385 30.582C25.8961 30.3532 26.4525 30.5387 26.6813 30.9963C26.9101 31.4538 26.7246 32.0103 26.2671 32.2391L24.4144 33.1654C24.1537 33.2958 23.8467 33.2958 23.5859 33.1654L21.7333 32.2391C21.2757 32.0103 21.0902 31.4538 21.319 30.9963C21.5478 30.5387 22.1042 30.3532 22.5618 30.582L23.0739 30.838V30.0211C23.0739 29.5095 23.4886 29.0947 24.0002 29.0947Z" fill="white"/>
+    <defs>
+       <linearGradient id="paint0_linear_5048_15486" x1="-1.49435e-07" y1="35.76" x2="49.4435" y2="31.3673" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#723390"/>
+          <stop offset="1" stop-color="#8C384F"/>
+       </linearGradient>
+    </defs>
+ </svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/tracks/design-disabled.svg b/src/assets/images/profile/tracks/design-disabled.svg
deleted file mode 100644
index 5a9cd272ff..0000000000
--- a/src/assets/images/profile/tracks/design-disabled.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4 (15588) - http://www.bohemiancoding.com/sketch -->
-    <title>ico-track-design-grey</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="ico-track-design-grey" sketch:type="MSArtboardGroup" stroke="#A3A3AE" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
-            <g id="Group" sketch:type="MSLayerGroup" transform="translate(1.000000, 2.000000)">
-                <path d="M10.0446574,15.3274409 L23.823359,1.60214262 C25.2984335,0.12707385 27.6888722,0.12707385 29.1639466,1.60214262 C30.6390114,3.07721226 30.6390114,5.4676567 29.1639466,6.94272634 L15.3852411,20.6680285 L10.0446574,15.3274409 Z" id="Stroke-79" sketch:type="MSShapeGroup"></path>
-                <path d="M9.68626171,21.1954687 C8.0648603,19.5740683 5.44904271,19.5623191 3.84366337,21.1676975 C2.81827106,22.1930898 2.68048433,23.4662845 2.6922334,24.531197 C2.70398247,25.5832924 1.95202856,26.5445974 0.1138,26.5755726 C2.69543839,29.156142 7.19114077,29.5609581 9.71403285,27.038067 C11.4144785,25.3376252 11.1634626,22.6726743 9.68626171,21.1954687 L9.68626171,21.1954687 L9.68626171,21.1954687 Z" id="Stroke-81" sketch:type="MSShapeGroup"></path>
-                <path d="M11.6082011,3.20431793 L8.40385145,6.40866759" id="Stroke-83" sketch:type="MSShapeGroup"></path>
-                <path d="M26.5617809,18.1579939 L23.3574313,21.3623435" id="Stroke-85" sketch:type="MSShapeGroup"></path>
-                <path d="M18.1350458,24.684776 C18.541571,25.0913004 19.0674368,25.6171659 19.6075429,26.1572723 C20.9072388,27.4569662 22.2893791,28.8391113 22.2893791,28.8391113 L29.7661921,21.3622887 C29.7661921,21.3622887 25.2221476,16.4999401 25.0148557,16.2843143" id="Stroke-87" sketch:type="MSShapeGroup"></path>
-                <path d="M13.5505919,5.1335119 L8.40382934,0 L0.927013477,7.47681682 C0.927013477,7.47681682 2.5876467,9.13745101 4.96118948,11.5109928" id="Stroke-89" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/tracks/design.svg b/src/assets/images/profile/tracks/design.svg
index ece814a447..2e344e11b0 100644
--- a/src/assets/images/profile/tracks/design.svg
+++ b/src/assets/images/profile/tracks/design.svg
@@ -1,98 +1,14 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="32px"
-   height="32px"
-   viewBox="0 0 32 32"
-   version="1.1"
-   id="svg82"
-   sodipodi:docname="ico-track-design.svg"
-   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
-  <metadata
-     id="metadata86">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2051"
-     inkscape:window-height="1101"
-     id="namedview84"
-     showgrid="false"
-     inkscape:zoom="35.5625"
-     inkscape:cx="16"
-     inkscape:cy="14.87522"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="ico-track-design" />
-  <!-- Generator: Sketch 3.4 (15588) - http://www.bohemiancoding.com/sketch -->
-  <title
-     id="title68">ico-track-design</title>
-  <desc
-     id="desc70">Created with Sketch.</desc>
-  <defs
-     id="defs72" />
-  <g
-     id="Page-1"
-     stroke="none"
-     stroke-width="1"
-     fill="none"
-     fill-rule="evenodd"
-     sketch:type="MSPage">
-    <g
-       id="ico-track-design"
-       sketch:type="MSArtboardGroup"
-       stroke="#21B2F1"
-       stroke-width="1.2"
-       stroke-linecap="round"
-       stroke-linejoin="round">
-      <path
-         d="M11.0446574,17.3274409 L24.823359,3.60214262 C26.2984335,2.12707385 28.6888722,2.12707385 30.1639466,3.60214262 C31.6390114,5.07721226 31.6390114,7.4676567 30.1639466,8.94272634 L16.3852411,22.6680285 L11.0446574,17.3274409 Z"
-         id="Stroke-79"
-         sketch:type="MSShapeGroup" />
-      <path
-         d="M10.6862617,23.1954687 C9.0648603,21.5740683 6.44904271,21.5623191 4.84366337,23.1676975 C3.81827106,24.1930898 3.68048433,25.4662845 3.6922334,26.531197 C3.70398247,27.5832924 2.95202856,28.5445974 1.1138,28.5755726 C3.69543839,31.156142 8.19114077,31.5609581 10.7140328,29.038067 C12.4144785,27.3376252 12.1634626,24.6726743 10.6862617,23.1954687 L10.6862617,23.1954687 L10.6862617,23.1954687 Z"
-         id="Stroke-81"
-         sketch:type="MSShapeGroup" />
-      <path
-         d="M12.6082011,5.20431793 L9.40385145,8.40866759"
-         id="Stroke-83"
-         sketch:type="MSShapeGroup" />
-      <path
-         d="M27.5617809,20.1579939 L24.3574313,23.3623435"
-         id="Stroke-85"
-         sketch:type="MSShapeGroup" />
-      <path
-         d="m 19.135046,26.684776 1.472497,1.472496 c 1.299695,1.299695 2.681836,2.681839 2.681836,2.681839 l 7.476813,-7.476822 c 0,0 -4.544044,-4.862349 -4.751336,-5.077975"
-         id="Stroke-87"
-         sketch:type="MSShapeGroup"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="csccc" />
-      <path
-         d="M14.5505919,7.1335119 L9.40382934,2 L1.92701348,9.47681682 C1.92701348,9.47681682 3.5876467,11.137451 5.96118948,13.5109928"
-         id="Stroke-89"
-         sketch:type="MSShapeGroup" />
-    </g>
-  </g>
-</svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M20.863 3.44312C22.5463 1.59557 25.4537 1.59557 27.137 3.44312C28.2537 4.66874 29.9818 5.1318 31.5617 4.62871C33.9433 3.87033 36.4612 5.32405 36.9952 7.76573C37.3494 9.38547 38.6145 10.6506 40.2343 11.0048C42.6759 11.5388 44.1297 14.0567 43.3713 16.4383C42.8682 18.0182 43.3313 19.7463 44.5569 20.863C46.4044 22.5463 46.4044 25.4537 44.5569 27.137C43.3313 28.2537 42.8682 29.9818 43.3713 31.5617C44.1297 33.9433 42.6759 36.4612 40.2343 36.9952C38.6145 37.3494 37.3494 38.6145 36.9952 40.2343C36.4612 42.6759 33.9433 44.1297 31.5617 43.3713C29.9818 42.8682 28.2537 43.3313 27.137 44.5569C25.4537 46.4044 22.5463 46.4044 20.863 44.5569C19.7463 43.3313 18.0182 42.8682 16.4383 43.3713C14.0567 44.1297 11.5388 42.6759 11.0048 40.2343C10.6506 38.6145 9.38547 37.3494 7.76573 36.9952C5.32405 36.4612 3.87033 33.9433 4.62871 31.5617C5.1318 29.9818 4.66874 28.2537 3.44312 27.137C1.59557 25.4537 1.59557 22.5463 3.44312 20.863C4.66874 19.7463 5.1318 18.0182 4.62871 16.4383C3.87033 14.0567 5.32405 11.5388 7.76573 11.0048C9.38547 10.6506 10.6506 9.38547 11.0048 7.76573C11.5388 5.32405 14.0567 3.87033 16.4383 4.62871C18.0182 5.1318 19.7463 4.66874 20.863 3.44312Z" fill="url(#paint0_linear_5048_15454)"/>
+   <circle opacity="0.2" cx="24" cy="24" r="16.9263" fill="white"/>
+   <path fill-rule="evenodd" clip-rule="evenodd" d="M17.3306 15.1074C16.1028 15.1074 15.1074 16.1027 15.1074 17.3305V29.5579C15.1074 31.3996 16.6004 32.8926 18.4422 32.8926C20.2839 32.8926 21.7769 31.3996 21.7769 29.5579V17.3305C21.7769 16.1027 20.7816 15.1074 19.5537 15.1074H17.3306ZM18.4422 30.6695C19.0561 30.6695 19.5537 30.1718 19.5537 29.5579C19.5537 28.944 19.0561 28.4463 18.4422 28.4463C17.8283 28.4463 17.3306 28.944 17.3306 29.5579C17.3306 30.1718 17.8283 30.6695 18.4422 30.6695Z" fill="white"/>
+   <path d="M24.0001 28.7159L29.4462 23.2698C30.3144 22.4016 30.3144 20.9939 29.4462 20.1257L27.8742 18.5537C27.006 17.6855 25.5984 17.6855 24.7302 18.5537L24.0001 19.2839V28.7159Z" fill="white"/>
+   <path d="M30.6696 32.8926H22.9674L29.6369 26.2232H30.6696C31.8974 26.2232 32.8927 27.2185 32.8927 28.4463V30.6695C32.8927 31.8973 31.8974 32.8926 30.6696 32.8926Z" fill="white"/>
+   <defs>
+      <linearGradient id="paint0_linear_5048_15454" x1="-1.49435e-07" y1="35.76" x2="49.4435" y2="31.3673" gradientUnits="userSpaceOnUse">
+         <stop stop-color="#065D6E"/>
+         <stop offset="0.0001" stop-color="#06596E"/>
+         <stop offset="1" stop-color="#3E3B91"/>
+      </linearGradient>
+   </defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/tracks/develop-disabled.svg b/src/assets/images/profile/tracks/develop-disabled.svg
deleted file mode 100644
index 963011706b..0000000000
--- a/src/assets/images/profile/tracks/develop-disabled.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4 (15588) - http://www.bohemiancoding.com/sketch -->
-    <title>ico-track-develop-grey</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="ico-track-develop-grey" sketch:type="MSArtboardGroup" stroke="#A3A3AE" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M13.5,30.5 L2.5,30.5 L2.5,22.5 L13.5,22.5 L13.5,30.5 L13.5,30.5 Z" id="Stroke-91" sketch:type="MSShapeGroup"></path>
-            <path d="M13.141,6.0649 L23.49551,6.0649 L23.49551,9.334749" id="Stroke-93" sketch:type="MSShapeGroup"></path>
-            <path d="M14.3507,26.893209 L23.558602,26.893209 L23.558602,22.6618" id="Stroke-95" sketch:type="MSShapeGroup"></path>
-            <path d="M12.71429,6.357143 C12.71429,9.316071 10.316071,11.71429 7.357143,11.71429 C4.398215,11.71429 2,9.316071 2,6.357143 C2,3.398215 4.398215,1 7.357143,1 C10.316071,1 12.71429,3.398215 12.71429,6.357143 L12.71429,6.357143 L12.71429,6.357143 Z" id="Stroke-97" sketch:type="MSShapeGroup"></path>
-            <path d="M23.525983,9.1232 L16.6591,15.990083 L23.525983,22.85697 L30.39287,15.990083 L23.525983,9.1232 L23.525983,9.1232 Z" id="Stroke-99" sketch:type="MSShapeGroup"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/tracks/develop.svg b/src/assets/images/profile/tracks/develop.svg
index f525d75697..fe60ce4445 100644
--- a/src/assets/images/profile/tracks/develop.svg
+++ b/src/assets/images/profile/tracks/develop.svg
@@ -1,18 +1,11 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4 (15588) - http://www.bohemiancoding.com/sketch -->
-    <title>ico-track-develop</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="ico-track-develop" sketch:type="MSArtboardGroup" stroke="#05C14F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
-            <g id="Group" sketch:type="MSLayerGroup" transform="translate(2.000000, 1.000000)">
-                <path d="M11.5,29.5 L0.5,29.5 L0.5,21.5 L11.5,21.5 L11.5,29.5 L11.5,29.5 Z" id="Stroke-91" sketch:type="MSShapeGroup"></path>
-                <path d="M11.141,5.0649 L21.49551,5.0649 L21.49551,8.334749" id="Stroke-93" sketch:type="MSShapeGroup"></path>
-                <path d="M12.3507,25.893209 L21.558602,25.893209 L21.558602,21.6618" id="Stroke-95" sketch:type="MSShapeGroup"></path>
-                <path d="M10.71429,5.357143 C10.71429,8.316071 8.316071,10.71429 5.357143,10.71429 C2.398215,10.71429 0,8.316071 0,5.357143 C0,2.398215 2.398215,0 5.357143,0 C8.316071,0 10.71429,2.398215 10.71429,5.357143 L10.71429,5.357143 L10.71429,5.357143 Z" id="Stroke-97" sketch:type="MSShapeGroup"></path>
-                <path d="M21.525983,8.1232 L14.6591,14.990083 L21.525983,21.85697 L28.39287,14.990083 L21.525983,8.1232 L21.525983,8.1232 Z" id="Stroke-99" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20.863 3.44312C22.5463 1.59557 25.4537 1.59557 27.137 3.44312C28.2537 4.66874 29.9818 5.1318 31.5617 4.62871C33.9433 3.87033 36.4612 5.32405 36.9952 7.76573C37.3494 9.38547 38.6145 10.6506 40.2343 11.0048C42.6759 11.5388 44.1297 14.0567 43.3713 16.4383C42.8682 18.0182 43.3313 19.7463 44.5569 20.863C46.4044 22.5463 46.4044 25.4537 44.5569 27.137C43.3313 28.2537 42.8682 29.9818 43.3713 31.5617C44.1297 33.9433 42.6759 36.4612 40.2343 36.9952C38.6145 37.3494 37.3494 38.6145 36.9952 40.2343C36.4612 42.6759 33.9433 44.1297 31.5617 43.3713C29.9818 42.8682 28.2537 43.3313 27.137 44.5569C25.4537 46.4044 22.5463 46.4044 20.863 44.5569C19.7463 43.3313 18.0182 42.8682 16.4383 43.3713C14.0567 44.1297 11.5388 42.6759 11.0048 40.2343C10.6506 38.6145 9.38547 37.3494 7.76573 36.9952C5.32405 36.4612 3.87033 33.9433 4.62871 31.5617C5.1318 29.9818 4.66874 28.2537 3.44312 27.137C1.59557 25.4537 1.59557 22.5463 3.44312 20.863C4.66874 19.7463 5.1318 18.0182 4.62871 16.4383C3.87033 14.0567 5.32405 11.5388 7.76573 11.0048C9.38547 10.6506 10.6506 9.38547 11.0048 7.76573C11.5388 5.32405 14.0567 3.87033 16.4383 4.62871C18.0182 5.1318 19.7463 4.66874 20.863 3.44312Z" fill="url(#paint0_linear_5048_15470)"/>
+    <circle opacity="0.2" cx="24" cy="24" r="16.9263" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26.0773 15.6908C26.5736 15.8149 26.8754 16.3178 26.7513 16.8141L23.046 31.6352C22.922 32.1315 22.419 32.4333 21.9227 32.3092C21.4264 32.1851 21.1247 31.6822 21.2487 31.1859L24.954 16.3648C25.0781 15.8685 25.581 15.5667 26.0773 15.6908ZM19.0971 19.6397C19.4589 20.0015 19.4589 20.588 19.0971 20.9497L16.0469 24L19.0971 27.0503C19.4589 27.412 19.4589 27.9985 19.0971 28.3603C18.7354 28.722 18.1489 28.722 17.7871 28.3603L14.0819 24.655C13.7201 24.2933 13.7201 23.7067 14.0819 23.345L17.7871 19.6397C18.1489 19.278 18.7354 19.278 19.0971 19.6397ZM28.9029 19.6397C29.2647 19.278 29.8512 19.278 30.2129 19.6397L33.9182 23.345C34.2799 23.7067 34.2799 24.2933 33.9182 24.655L30.2129 28.3603C29.8512 28.722 29.2647 28.722 28.9029 28.3603C28.5412 27.9985 28.5412 27.412 28.9029 27.0503L31.9532 24L28.9029 20.9497C28.5412 20.588 28.5412 20.0015 28.9029 19.6397Z" fill="white"/>
+    <defs>
+       <linearGradient id="paint0_linear_5048_15470" x1="-1.49435e-07" y1="35.76" x2="49.4435" y2="31.3673" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#048467"/>
+          <stop offset="1" stop-color="#064871"/>
+       </linearGradient>
+    </defs>
+ </svg>
\ No newline at end of file
diff --git a/src/shared/components/Settings/PageRow/index.jsx b/src/shared/components/Settings/PageRow/index.jsx
index 1b1e555561..a6e4a884f6 100644
--- a/src/shared/components/Settings/PageRow/index.jsx
+++ b/src/shared/components/Settings/PageRow/index.jsx
@@ -9,12 +9,14 @@ import cn from 'classnames';
 import './styles.scss';
 
 const PageRow = ({
-  children, half = false, styleName, ...props
+  children, half = false, row, styleName, ...props
 }) => (
   <div
     styleName={cn(
       'page-row',
-      half ? 'page-row-half' : 'page-row-normal',
+      (row && half) && 'page-row-half',
+      row && 'page-row-normal',
+      !row && 'page-col',
       styleName || '',
     )}
     {...props}
@@ -26,12 +28,14 @@ const PageRow = ({
 PageRow.defaultProps = {
   children: null,
   half: false,
+  row: true,
   styleName: {},
 };
 
 PageRow.propTypes = {
   children: PT.node,
   half: PT.bool,
+  row: PT.bool,
   styleName: PT.shape(),
 };
 
diff --git a/src/shared/components/Settings/PageRow/styles.scss b/src/shared/components/Settings/PageRow/styles.scss
index 1bea3b0988..43caf313a9 100644
--- a/src/shared/components/Settings/PageRow/styles.scss
+++ b/src/shared/components/Settings/PageRow/styles.scss
@@ -4,6 +4,14 @@
   display: flex;
 
   @include md-to-xl {
+    &.page-col {
+      flex-direction: column;
+
+      & > div {
+        width: 100%;
+      }
+    }
+
     &.page-row-half {
       & > div {
         width: 50%;
diff --git a/src/shared/components/Settings/SettingsBanner/index.jsx b/src/shared/components/Settings/SettingsBanner/index.jsx
index 8820d19208..7ee254c39c 100644
--- a/src/shared/components/Settings/SettingsBanner/index.jsx
+++ b/src/shared/components/Settings/SettingsBanner/index.jsx
@@ -13,6 +13,7 @@ const SettingsBanner = ({
   description,
   children,
   defaultOpen,
+  row,
 }) => {
   const [open, setOpen] = useState(defaultOpen);
 
@@ -34,7 +35,7 @@ const SettingsBanner = ({
       {
         open ? (
           <div styleName="page-row">
-            <PageRow>
+            <PageRow row={row}>
               <div>
                 <p styleName="description">{description}</p>
               </div>
@@ -52,6 +53,7 @@ SettingsBanner.defaultProps = {
   description: '',
   children: null,
   defaultOpen: true,
+  row: true,
 };
 
 SettingsBanner.propTypes = {
@@ -59,6 +61,7 @@ SettingsBanner.propTypes = {
   description: PT.string,
   children: PT.node,
   defaultOpen: PT.bool,
+  row: PT.bool,
 };
 
 export default SettingsBanner;
diff --git a/src/shared/components/Settings/TopcoderAndYou/Community/Item/index.jsx b/src/shared/components/Settings/TopcoderAndYou/Community/Item/index.jsx
new file mode 100644
index 0000000000..8e9f44d0b1
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/Community/Item/index.jsx
@@ -0,0 +1,90 @@
+/**
+ * Render item of community
+ */
+import React from 'react';
+import PT from 'prop-types';
+
+import './styles.scss';
+
+export default function Item({
+  checked,
+  id,
+  onToggle,
+  title,
+  description,
+  link,
+  value,
+  icon,
+}) {
+  return (
+    <div styleName="item-container">
+      <div styleName="body">
+        <img src={icon} alt="community icon" styleName="icon" />
+        <div styleName="info">
+          <div styleName="info-first-line">
+            { title }
+          </div>
+          <div styleName="info-second-line">
+            { description }
+          </div>
+          <a href={link} styleName="learn-more-btn"><span>LEARN MORE</span></a>
+        </div>
+        <div styleName="mobile-view">
+          <div styleName="mobile-first-line">
+            <img src={icon} alt={id} styleName="mobile-icon" />
+            <div styleName="mobile-title">
+              { title }
+            </div>
+            <div className="onoffswitch-mobile" styleName="onoffswitch-no-padding-right">
+              <input
+                type="checkbox"
+                name="eprf-onoffswitch"
+                id={`pre-onoffswitch-${id}`}
+                value={value}
+                checked={checked}
+                onChange={onToggle}
+                className="onoffswitch-checkbox"
+              />
+              <label htmlFor={`pre-onoffswitch-${id}`} className="onoffswitch-label">
+                <span className="onoffswitch-inner" />
+                <span className="onoffswitch-switch" />
+                <input type="hidden" />
+              </label>
+            </div>
+          </div>
+          <div styleName="mobile-second-line">
+            { description }
+          </div>
+          <a href={link} styleName="learn-more-btn">LEARN MORE</a>
+        </div>
+      </div>
+      <div styleName="onoffswitch-no-padding-right">
+        <input
+          type="checkbox"
+          name="eprf-onoffswitch"
+          id={`pre-onoffswitch-${id}`}
+          value={value}
+          checked={checked}
+          onChange={onToggle}
+          className="onoffswitch-checkbox"
+        />
+        <label htmlFor={`pre-onoffswitch-${id}`} className="onoffswitch-label">
+          <span className="onoffswitch-inner" />
+          <span className="onoffswitch-switch" />
+          <input type="hidden" />
+        </label>
+      </div>
+    </div>
+  );
+}
+
+Item.propTypes = {
+  id: PT.string.isRequired,
+  icon: PT.string.isRequired,
+  value: PT.string.isRequired,
+  checked: PT.bool.isRequired,
+  title: PT.string.isRequired,
+  description: PT.string.isRequired,
+  link: PT.string.isRequired,
+  onToggle: PT.func.isRequired,
+};
diff --git a/src/shared/components/Settings/TopcoderAndYou/Community/Item/styles.scss b/src/shared/components/Settings/TopcoderAndYou/Community/Item/styles.scss
new file mode 100644
index 0000000000..d589c579fb
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/Community/Item/styles.scss
@@ -0,0 +1,177 @@
+@import "../../../style";
+@import "~styles/mixins";
+
+@mixin switch-transition {
+  transition: all 0.15s ease-in-out;
+}
+
+$switch-active-color: $listing-checkbox-green;
+$switch-inactive-color: #aaa;
+$switch-width: 37px;
+$switch-height: 20px;
+$switch-border-radius: 12px;
+
+.item-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 0;
+  padding: 16px;
+  background: $tc-white;
+  border: 1px solid $listing-light-gray;
+  border-radius: 8px;
+}
+
+.item-container:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.body {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 16px;
+  max-height: 80px;
+  min-height: 80px;
+  max-width: 80px;
+  min-width: 80px;
+  margin-bottom: auto;
+
+  @include upto-sm {
+    display: none;
+  }
+}
+
+.learn-more-btn {
+  @include roboto-bold;
+
+  font-weight: 700;
+  text-align: center;
+  margin: 0;
+  font-size: 12px;
+  line-height: 24px;
+  letter-spacing: 0.008em;
+  text-transform: uppercase;
+  color: #137d60 !important;
+  width: 107px;
+  background: $tc-white;
+  border: 1.5px solid #137d60;
+  border-radius: 24px;
+  cursor: pointer;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  @include upto-sm {
+    display: none;
+  }
+}
+
+.info-first-line {
+  @include roboto-regular;
+
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
+}
+
+.info-second-line {
+  @include roboto-regular;
+
+  font-size: 16px;
+  line-height: 24px;
+  text-align: justify;
+  padding-right: 74px;
+  margin-bottom: 12px;
+  color: #767676;
+}
+
+.mobile-view {
+  display: none;
+
+  @include upto-sm {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .mobile-first-line {
+      @include roboto-regular;
+
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      width: 100%;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+      letter-spacing: 0.5px;
+      text-transform: capitalize;
+
+      .mobile-icon {
+        width: 80px;
+        height: 80px;
+
+        @media screen and (max-width: 320px) {
+          width: 42px;
+          height: 42px;
+        }
+      }
+
+      .mobile-title {
+        @include roboto-medium;
+
+        font-size: 15px;
+        color: #262628;
+        width: 68%;
+        margin-left: 16px;
+      }
+    }
+
+    .mobile-second-line {
+      @include roboto-regular;
+
+      line-height: 20px;
+      text-align: justify;
+      font-weight: 400;
+      margin-top: 10px;
+      margin-bottom: 12px;
+      font-size: 14px;
+      color: #767676;
+      width: 100%;
+    }
+  }
+}
+
+.onoffswitch-no-padding-right {
+  margin-right: 10px;
+  margin-left: 30px;
+  margin-top: 10px;
+
+  @include switch-transition;
+
+  align-self: flex-start;
+  background-color: $switch-inactive-color;
+  border-radius: $switch-border-radius;
+  box-sizing: border-box;
+  height: $switch-height;
+  width: $switch-width;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  @include upto-sm {
+    display: none;
+  }
+}
diff --git a/src/shared/components/Settings/TopcoderAndYou/Community/data.jsx b/src/shared/components/Settings/TopcoderAndYou/Community/data.jsx
new file mode 100644
index 0000000000..0cd19c4cd6
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/Community/data.jsx
@@ -0,0 +1,32 @@
+import ethereum from 'assets/images/profile/community/ico-ethereum.png';
+import ibmCloud from 'assets/images/profile/community/ico-ibmcloud.png';
+import veteran from 'assets/images/profile/community/ico-veteran.png';
+
+const data = [
+  {
+    id: 'blockchain',
+    icon: ethereum,
+    programID: 20000010,
+    name: 'Topcoder Blockchain Community',
+    description: 'Meet like-minded peers from around the world, share tips and insights, and collaborate with customers to build cutting-edge solutions. The Topcoder Blockchain Community provides opportunities to learn from Ethereum experts and work with top companies that are embracing blockchain technology.',
+    link: 'https://blockchain.topcoder.com/',
+  },
+  {
+    id: 'cognitive',
+    icon: ibmCloud,
+    programID: 3449,
+    name: 'Topcoder Cognitive Community',
+    description: 'By becoming a member of the Topcoder Community and registering for this specialized community, you can compete in fun cognitive challenges, access educational resources, and win money by solving real-life business problems for companies in need of cognitive expertise. ',
+    link: 'https://cognitive.topcoder.com/',
+  },
+  {
+    id: 'veteran',
+    icon: veteran,
+    programID: 3450,
+    name: 'Topcoder Veterans Community',
+    description: 'We help military service members and veterans transition to a career in technology with the world\'s premier crowdsourcing platform.',
+    link: 'https://veterans.topcoder.com/',
+  },
+];
+
+export default data;
diff --git a/src/shared/components/Settings/TopcoderAndYou/Community/index.jsx b/src/shared/components/Settings/TopcoderAndYou/Community/index.jsx
new file mode 100644
index 0000000000..ccdf0ca430
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/Community/index.jsx
@@ -0,0 +1,56 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Communities
+ * Topcoder And You Settings Page
+ */
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import Item from './Item';
+import data from './data';
+
+import './styles.scss';
+
+const Community = (props) => {
+  const {
+    communityItems,
+    onCommunityChange,
+  } = props;
+
+  return (
+    <div styleName="community-container">
+      <div styleName="community-list">
+        {
+          _.map(data, (item) => {
+            const checked = communityItems[item.id] || false;
+            return (
+              <Item
+                icon={item.icon}
+                key={item.id}
+                id={item.id}
+                value={item.id}
+                checked={checked}
+                title={item.name}
+                programID={item.programID}
+                description={item.description}
+                link={item.link}
+                onToggle={event => onCommunityChange(event, item, event.target.checked)}
+              />
+            );
+          })
+        }
+      </div>
+    </div>
+  );
+};
+
+Community.defaultProps = {
+  communityItems: [],
+};
+
+Community.propTypes = {
+  communityItems: PT.arrayOf(PT.shape()),
+  onCommunityChange: PT.func.isRequired,
+};
+
+export default Community;
diff --git a/src/shared/components/Settings/TopcoderAndYou/Community/styles.scss b/src/shared/components/Settings/TopcoderAndYou/Community/styles.scss
new file mode 100644
index 0000000000..8a1dc96fc2
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/Community/styles.scss
@@ -0,0 +1,60 @@
+@import "~styles/mixins";
+@import "../../style.scss";
+
+.hide {
+  display: none;
+}
+
+.community-container {
+  h1 {
+    margin-bottom: 20px;
+
+    @include upto-sm {
+      line-height: 70px;
+      margin-bottom: 0;
+      font-size: 20px;
+      padding: 0 20px;
+    }
+  }
+
+  // margin-bottom: 40px;
+
+  @include from-sm-to-lg {
+    margin-bottom: 0;
+  }
+
+  @include upto-sm {
+    margin-bottom: 0;
+  }
+
+  .title {
+    @include tc-heading-lg;
+
+    margin-bottom: 25px;
+
+    @include upto-sm {
+      font-size: 20px;
+      line-height: 30px;
+      margin: 20px;
+    }
+  }
+
+  .sub-title {
+    @include roboto-light;
+
+    color: #888894;
+    line-height: 35px;
+    font-weight: 300;
+    font-size: 28px;
+    margin-bottom: 30px;
+    margin-top: 10px;
+
+    @include upto-sm {
+      display: none;
+    }
+  }
+
+  .community-list {
+    // border-top: 1px solid $tc-gray-neutral-dark;
+  }
+}
diff --git a/src/shared/components/Settings/TopcoderAndYou/Tracks/Track/index.jsx b/src/shared/components/Settings/TopcoderAndYou/Tracks/Track/index.jsx
new file mode 100644
index 0000000000..404376aade
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/Tracks/Track/index.jsx
@@ -0,0 +1,67 @@
+/**
+ * Render Track Component
+ */
+import React from 'react';
+import PT from 'prop-types';
+import ReactSVG from 'react-svg';
+import { isomorphy } from 'topcoder-react-utils';
+
+import './styles.scss';
+
+let assets;
+if (isomorphy.isClientSide()) {
+  assets = require.context('assets/images/profile/tracks', false, /svg/);
+}
+
+export default function Track({
+  checked,
+  id,
+  onToggle,
+  title,
+  description,
+  value,
+}) {
+  const icon = `./${id.toLowerCase()}.svg`;
+  return (
+    <div styleName="track-container">
+      <div styleName="body">
+        <div styleName="icon">
+          { assets && assets.keys().includes(icon) ? <ReactSVG path={assets(`${icon}`)} /> : '' }
+        </div>
+        <div styleName="info">
+          <div styleName="info-first-line">
+            { title }
+          </div>
+          <div styleName="info-second-line">
+            { description }
+          </div>
+        </div>
+      </div>
+      <div styleName="onoffswitch-no-padding-right">
+        <input
+          type="checkbox"
+          name="eprf-onoffswitch"
+          id={`pre-onoffswitch-${id}`}
+          value={value}
+          checked={checked}
+          onChange={onToggle}
+          className="onoffswitch-checkbox"
+        />
+        <label htmlFor={`pre-onoffswitch-${id}`} className="onoffswitch-label">
+          <span className="onoffswitch-inner" />
+          <span className="onoffswitch-switch" />
+          <input type="hidden" />
+        </label>
+      </div>
+    </div>
+  );
+}
+
+Track.propTypes = {
+  id: PT.string.isRequired,
+  value: PT.string.isRequired,
+  checked: PT.bool.isRequired,
+  title: PT.string.isRequired,
+  description: PT.string.isRequired,
+  onToggle: PT.func.isRequired,
+};
diff --git a/src/shared/components/Settings/TopcoderAndYou/Tracks/Track/styles.scss b/src/shared/components/Settings/TopcoderAndYou/Tracks/Track/styles.scss
new file mode 100644
index 0000000000..f4c9302ecc
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/Tracks/Track/styles.scss
@@ -0,0 +1,90 @@
+@import "~styles/mixins";
+
+@mixin switch-transition {
+  transition: all 0.15s ease-in-out;
+}
+
+$switch-active-color: $listing-checkbox-green;
+$switch-inactive-color: #aaa;
+$switch-width: 37px;
+$switch-height: 20px;
+$switch-border-radius: 12px;
+
+.track-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #e9e9e9;
+  border-radius: 8px;
+  justify-content: space-between;
+  background-color: $tc-white;
+}
+
+.track-container:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.body {
+  display: flex;
+  flex-direction: row;
+}
+
+.icon {
+  margin-right: 16px;
+  max-height: 48px;
+  min-height: 48px;
+  max-width: 48px;
+  min-width: 48px;
+  margin-bottom: auto;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-first-line {
+  @include roboto-medium;
+
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+  text-transform: capitalize;
+}
+
+.info-second-line {
+  @include roboto-medium;
+
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: $listing-placeholder-gray;
+}
+
+.onoffswitch-no-padding-right {
+  margin-right: 10px;
+  margin-left: 30px;
+  margin-top: 10px;
+
+  @include switch-transition;
+
+  align-self: flex-start;
+  background-color: $switch-inactive-color;
+  border-radius: $switch-border-radius;
+  box-sizing: border-box;
+  height: $switch-height;
+  width: $switch-width;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  @media screen and (max-width: 320px) {
+    margin-top: 28px;
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
diff --git a/src/shared/components/Settings/TopcoderAndYou/Tracks/index.jsx b/src/shared/components/Settings/TopcoderAndYou/Tracks/index.jsx
new file mode 100644
index 0000000000..e38fb6004e
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/Tracks/index.jsx
@@ -0,0 +1,57 @@
+/**
+ * Tracks
+ * Topcoder & You Settings Page
+ */
+
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import tracks from './tracks';
+import Track from './Track';
+
+import '../styles.scss';
+
+const Tracks = (props) => {
+  const {
+    newProfileInfo,
+    onChange,
+  } = props;
+
+  return (
+    <div styleName="you-and-topcoder-container">
+      <div styleName="track-list">
+        {
+          _.map(tracks, (track) => {
+            const result = newProfileInfo.tracks.filter(item => (
+              item.toUpperCase() === track.id.toUpperCase()
+            ));
+            const checked = result.length !== 0;
+            return (
+              <Track
+                icon={track.icon}
+                key={track.id}
+                id={track.id}
+                value={track.id}
+                checked={checked}
+                title={track.name}
+                description={track.description}
+                onToggle={event => onChange(track.id, event.target.checked)}
+              />
+            );
+          })
+        }
+      </div>
+    </div>
+  );
+};
+
+Tracks.defaultProps = {
+  newProfileInfo: {},
+};
+
+Tracks.propTypes = {
+  newProfileInfo: PT.shape(),
+  onChange: PT.func.isRequired,
+};
+
+export default Tracks;
diff --git a/src/shared/components/Settings/TopcoderAndYou/Tracks/tracks.jsx b/src/shared/components/Settings/TopcoderAndYou/Tracks/tracks.jsx
new file mode 100644
index 0000000000..eb9ab4e430
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/Tracks/tracks.jsx
@@ -0,0 +1,20 @@
+
+const tracks = {
+  DESIGN: {
+    id: 'design',
+    name: 'Design',
+    description: 'Website, mobile, and product design; UI and UX',
+  },
+  DEVELOP: {
+    id: 'develop',
+    name: 'Development',
+    description: 'Software architecture, component assembly, application development, and bug hunting',
+  },
+  DATA_SCIENCE: {
+    id: 'data_science',
+    name: 'Data Science',
+    description: 'Algorithms and data structures, statistical analysis',
+  },
+};
+
+export default tracks;
diff --git a/src/shared/components/Settings/TopcoderAndYou/index.jsx b/src/shared/components/Settings/TopcoderAndYou/index.jsx
new file mode 100644
index 0000000000..4123e538b5
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/index.jsx
@@ -0,0 +1,489 @@
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import moment from 'moment';
+
+import ConsentComponent from 'components/Settings/ConsentComponent';
+
+import fetch from 'isomorphic-fetch';
+import { config } from 'topcoder-react-utils';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
+
+import SettingsBanner from '../SettingsBanner';
+import Community from './Community';
+
+import style from './styles.scss';
+
+import { TOPCODER_AND_YOU } from '../constants';
+import Tracks from './Tracks';
+
+class TopcoderAndYou extends ConsentComponent {
+  constructor(props) {
+    super(props);
+
+    this.onHandleSaveTopcoderAndYou = this.onHandleSaveTopcoderAndYou.bind(this);
+    this.onSaveTopcoderAndYou = this.onSaveTopcoderAndYou.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.processBasicInfo = this.processBasicInfo.bind(this);
+
+    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
+
+    this.loadCommunityTrait = this.loadCommunityTrait.bind(this);
+    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
+    this.onCommunityChange = this.onCommunityChange.bind(this);
+
+    const { userTraits } = props;
+    this.state = {
+      inputChanged: false,
+      formInvalid: false,
+      basicInfoTrait: this.loadBasicInfoTraits(userTraits),
+      profile: {},
+      isSubmit: false,
+      isMobileView: false,
+      screenSM: 767,
+      isEdit: false,
+      indexNo: null,
+      showConfirmation: false,
+      personalizationTrait: this.loadPersonalizationTrait(userTraits),
+      newProfileInfo: {
+        firstName: null,
+        lastName: null,
+        tracks: [],
+        status: null,
+        addresses: [],
+        description: '',
+        email: null,
+        homeCountryCode: null,
+        competitionCountryCode: null,
+        photoURL: null,
+      },
+      newBasicInfo: {
+        gender: null,
+        shortBio: '',
+        tshirtSize: null,
+        country: null,
+        primaryInterestInTopcoder: null,
+        currentLocation: null,
+        birthDate: null,
+      },
+      communityTrait: this.loadCommunityTrait(userTraits),
+      isAdd: false,
+    };
+  }
+
+  componentDidMount() {
+    const { basicInfoTrait } = this.state;
+    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
+    this.processBasicInfo(basicInfo, this.props.profile);
+    this.setState({ profile: this.props.profile });
+
+    const { userTraits } = this.props;
+    const trait = userTraits.filter(t => t.traitId === 'communities');
+    this.setState({
+      isAdd: trait.length === 0,
+    });
+    this.updatePredicate();
+    window.addEventListener('resize', this.updatePredicate);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const basicInfoTrait = this.loadBasicInfoTraits(nextProps.userTraits);
+
+    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
+    const previousBasicInfoTrait = this.loadBasicInfoTraits(this.props.userTraits);
+
+
+    const { userTraits } = nextProps;
+    const trait = userTraits.filter(t => t.traitId === 'communities');
+    this.setState({
+      isAdd: trait.length === 0,
+    });
+    const communityTrait = this.loadCommunityTrait(nextProps.userTraits);
+    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
+    this.setState({ communityTrait, personalizationTrait });
+
+    if (!_.isEqual(basicInfoTrait, previousBasicInfoTrait)) {
+      this.processBasicInfo(basicInfo, nextProps.profile);
+      this.setState({
+        basicInfoTrait,
+        personalizationTrait,
+        inputChanged: false,
+      });
+    }
+    if (!_.isEqual(this.state.profile, nextProps.profile)) {
+      this.processBasicInfo(basicInfo, nextProps.profile);
+      this.setState({ profile: nextProps.profile });
+    }
+    if (nextProps.lookupData) {
+      const { countries } = nextProps.lookupData;
+      const { newBasicInfo, newProfileInfo } = this.state;
+      if (!newBasicInfo.country) {
+        const code = newProfileInfo.homeCountryCode || newProfileInfo.competitionCountryCode;
+        const { country } = countries.find(c => c.countryCode === code) || {};
+        newBasicInfo.country = country;
+        this.setState({ newBasicInfo });
+      }
+    }
+
+    this.setState({
+      personalizationTrait,
+      formInvalid: false,
+    });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updatePredicate);
+  }
+
+  // onCheckFormValue(newBasicInfo, newProfileInfo) {
+  //   let invalid = false;
+
+  //   if (!_.trim(newProfileInfo.firstName).length) {
+  //     invalid = true;
+  //   }
+
+  //   if (!_.trim(newProfileInfo.lastName).length) {
+  //     invalid = true;
+  //   }
+
+  //   if (!_.trim(newBasicInfo.country).length) {
+  //     invalid = true;
+  //   }
+
+  //   if (_.trim(newBasicInfo.birthDate).length > 0) {
+  //     if (!moment().isAfter(newBasicInfo.birthDate)) {
+  //       invalid = true;
+  //     }
+  //   }
+
+  //   this.setState({ formInvalid: invalid });
+  //   return invalid;
+  // }
+
+  async onCheckUserTrait(traitId) {
+    const { handle, tokenV3 } = this.props;
+    let isExists = false;
+    await fetch(`${config.API.V5}/members/${handle}/traits?traitIds=${traitId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${tokenV3}`,
+      },
+    })
+      .then(result => result.json())
+      .then((dataResponse) => {
+        if (dataResponse.length > 0) {
+          const trait = dataResponse[0];
+          if (trait.createdAt) {
+            isExists = true;
+          }
+        }
+      });
+
+    return isExists;
+  }
+
+  /**
+   * Save Personal Details
+   * @param {*} e event
+   */
+  onHandleSaveTopcoderAndYou(e) {
+    e.preventDefault();
+    const { setIsSaving } = this.props;
+    this.setState({ inputChange: true });
+    setIsSaving(true);
+    this.showConsent(this.onSaveTopcoderAndYou.bind(this));
+  }
+
+  /**
+   * Save Basic Info
+   * @param answer user consent answer value
+   */
+  async onSaveTopcoderAndYou(answer) {
+    const {
+      newBasicInfo, newProfileInfo, basicInfoTrait, personalizationTrait,
+    } = this.state;
+    const {
+      handle,
+      tokenV3,
+      addUserTrait,
+      updateUserTrait,
+      updateProfileV5,
+    } = this.props;
+    try {
+      const parsedDate = moment(newBasicInfo.birthDate).utc();
+      if (parsedDate.isValid()) {
+        newBasicInfo.birthDate = `${parsedDate.format('YYYY-MM-DD')}T00:00:00.000Z`;
+      } else {
+        newBasicInfo.birthDate = null;
+      }
+    } catch (error) { // eslint-disable-line
+      newBasicInfo.birthDate = null;
+    }
+
+    if (newBasicInfo.gender === '') {
+      newBasicInfo.gender = null;
+    }
+
+    if (newBasicInfo.tshirtSize === '') {
+      newBasicInfo.tshirtSize = null;
+    }
+
+    newProfileInfo.addresses[0] = _.omit(newProfileInfo.addresses[0], ['createdAt', 'updatedBy', 'createdBy', 'updatedAt']);
+    _.forEach(newProfileInfo.addresses[0], (value, key) => {
+      newProfileInfo.addresses[0][key] = _.trim(value);
+    });
+    _.forEach(['currentLocation', 'primaryInterestInTopcoder'], (key) => {
+      newBasicInfo[key] = _.trim(newBasicInfo[key]);
+    });
+    _.forEach(['description'], (key) => {
+      newProfileInfo[key] = _.trim(newProfileInfo[key]);
+    });
+    // This is a hack to check if the user has an existing basic_info trait object
+    const exists = await this.onCheckUserTrait('basic_info');
+    if (exists) {
+      const newBasicInfoTrait = { ...basicInfoTrait };
+      newBasicInfoTrait.traits.data = [];
+      newBasicInfoTrait.traits.data.push(newBasicInfo);
+      await updateUserTrait(handle, 'basic_info', newBasicInfoTrait.traits.data, tokenV3);
+    } else {
+      const data = [];
+      data.push(newBasicInfo);
+      await addUserTrait(handle, 'basic_info', data, tokenV3);
+    }
+
+    // save personalization
+    if (_.isEmpty(personalizationTrait)) {
+      const personalizationData = { userConsent: answer };
+      await addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+    } else {
+      const trait = personalizationTrait.traits.data[0];
+      if (trait.userConsent !== answer) {
+        const personalizationData = { userConsent: answer };
+        await updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+      }
+    }
+
+    if (newProfileInfo.homeCountryCode == null) {
+      delete newProfileInfo.homeCountryCode;
+    }
+
+    const updateProfileData = {
+      ...newProfileInfo,
+    };
+
+    await updateProfileV5(updateProfileData, handle, tokenV3);
+
+    this.props.setIsSaving(false);
+  }
+
+  /**
+   * Change toggle button check value
+   * @param id community id
+   * @param checked check value
+   */
+  onChange(id, checked) {
+    const { newProfileInfo } = this.state;
+    if (checked) {
+      newProfileInfo.tracks.push(id.toUpperCase());
+    } else {
+      _.remove(newProfileInfo.tracks, track => (
+        track.toUpperCase() === id.toUpperCase()
+      ));
+    }
+    this.setState({ newProfileInfo, inputChanged: true });
+  }
+
+  /**
+   * Show User Consent Modal
+   * @param e event
+   * @param item the community object
+   * @param checked the check value
+   */
+  onCommunityChange(e, item, checked) {
+    e.preventDefault();
+    this.showConsent(this.onUpdateCommunity.bind(this, item, checked));
+  }
+
+  /**
+   * Add or Update CommunityTrait
+   */
+  onProcessCommunities = _.debounce((answer) => {
+    const {
+      handle,
+      tokenV3,
+      updateUserTrait,
+      addUserTrait,
+    } = this.props;
+    const { isAdd, communityTrait, personalizationTrait } = this.state;
+    if (isAdd) {
+      const newCommunities = [];
+      newCommunities.push(communityTrait);
+      addUserTrait(handle, 'communities', newCommunities, tokenV3);
+    } else {
+      const newCommunities = [];
+      newCommunities.push(communityTrait);
+      updateUserTrait(handle, 'communities', newCommunities, tokenV3);
+    }
+    // save personalization
+    if (_.isEmpty(personalizationTrait)) {
+      const personalizationData = { userConsent: answer };
+      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+    } else {
+      const trait = personalizationTrait.traits.data[0];
+      if (trait.userConsent !== answer) {
+        const personalizationData = { userConsent: answer };
+        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+      }
+    }
+  });
+
+  /**
+   * Get personalization trait
+   * @param userTraits the all user traits
+   */
+  loadPersonalizationTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'personalization');
+    const personalization = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, personalization);
+  }
+
+  /**
+   * Change toggle button check value
+   * @param answer user consent answer value
+   */
+  onUpdateCommunity(newCommunity, communityChecked, answer) {
+    const { communityTrait } = this.state;
+    communityTrait[newCommunity.id] = communityChecked;
+    this.setState({
+      communityTrait,
+    }, () => this.onProcessCommunities(answer));
+  }
+
+  /**
+   * Get community trait
+   * @param userTraits the all user traits
+   */
+  loadCommunityTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'communities');
+    const communities = trait.length === 0 ? {
+      cognitive: false,
+      blockchain: false,
+      veteran: false,
+    } : trait[0].traits.data[0];
+    return _.assign({}, communities);
+  }
+
+  /**
+   * Get basic info trait
+   * @param userTraits the all user traits
+   */
+  loadBasicInfoTraits = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'basic_info');
+    const basicInfo = trait.length === 0 ? {} : trait[trait.length - 1];
+    return _.assign({}, basicInfo);
+  }
+
+  /**
+   * Process basic info state
+   */
+  processBasicInfo = (value, profile) => {
+    const { newBasicInfo, newProfileInfo: profileInfo } = this.state;
+    if (_.has(profile, 'handle')) {
+      const newProfileInfo = Object.keys(profileInfo).reduce((acc, key) => {
+        if (_.has(profileInfo, key)) {
+          acc[key] = profile[key] || profileInfo[key];
+        }
+        return acc;
+      }, {});
+      const basicInfo = Object.keys(newBasicInfo).reduce((acc, key) => {
+        if (_.has(value, key)) {
+          acc[key] = value[key];
+          newBasicInfo[key] = value[key];
+        }
+        return acc;
+      }, {});
+      this.setState({ newBasicInfo: basicInfo, newProfileInfo });
+    }
+    if (_.has(value, 'tshirtSize')) {
+      newBasicInfo.tshirtSize = value.tshirtSize;
+    }
+    if (_.has(value, 'userId')) {
+      newBasicInfo.userId = value.userId;
+    } else {
+      newBasicInfo.userId = profile.userId;
+    }
+    this.setState({ newBasicInfo });
+  }
+
+  updatePredicate() {
+    const { screenSM } = this.state;
+    this.setState({ isMobileView: window.innerWidth <= screenSM });
+  }
+
+  render() {
+    const {
+      tracks, community,
+    } = TOPCODER_AND_YOU;
+
+    const { communityTrait } = this.state;
+    const communityItems = communityTrait;
+
+    const {
+      newProfileInfo,
+    } = this.state;
+
+    return (
+      <React.Fragment>
+        <div styleName="profile-settings-container">
+          <div styleName="header" style={{ marginBottom: '40px' }}>
+            <h3>YOU AND TOPCODER</h3>
+          </div>
+          { this.shouldRenderConsent() && this.renderConsent() }
+          <SettingsBanner title={tracks.title} description={tracks.description} row={false}>
+            <Tracks
+              newProfileInfo={newProfileInfo}
+              onChange={this.onChange}
+            />
+          </SettingsBanner>
+          <SettingsBanner title={community.title} row={false}>
+            <Community
+              communityItems={communityItems}
+              onCommunityChange={this.onCommunityChange}
+            />
+          </SettingsBanner>
+        </div>
+        <div styleName="button-save">
+          <PrimaryButton
+            onClick={this.onHandleSaveTopcoderAndYou}
+            theme={{
+              button: style['save-changes-btn'],
+            }}
+          >
+            Save Changes
+          </PrimaryButton>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+TopcoderAndYou.defaultProps = {
+  profile: {},
+  isSaving: false,
+};
+
+TopcoderAndYou.propTypes = {
+  tokenV3: PT.string.isRequired,
+  handle: PT.string.isRequired,
+  profile: PT.shape(),
+  userTraits: PT.array.isRequired,
+  addUserTrait: PT.func.isRequired,
+  updateUserTrait: PT.func.isRequired,
+  updateProfileV5: PT.func.isRequired,
+  traitRequestCount: PT.number.isRequired,
+  isSaving: PT.bool,
+  setIsSaving: PT.func.isRequired,
+};
+
+export default TopcoderAndYou;
diff --git a/src/shared/components/Settings/TopcoderAndYou/styles.scss b/src/shared/components/Settings/TopcoderAndYou/styles.scss
new file mode 100644
index 0000000000..83fcc8a168
--- /dev/null
+++ b/src/shared/components/Settings/TopcoderAndYou/styles.scss
@@ -0,0 +1,84 @@
+@import "~styles/mixins";
+@import "../style.scss";
+
+.save-changes-btn {
+  @include roboto-bold;
+
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  border-radius: 50px !important;
+  background: #137d60 !important;
+  color: #fff !important;
+  text-transform: uppercase;
+
+  @include xs-to-md {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.profile-settings-container {
+  background-color: $listing-filter-bg;
+  padding: 32px;
+  border-radius: 8px;
+  margin: 40px 0 32px;
+
+  .header {
+    h3 {
+      @include barlow-bold;
+
+      font-size: 20px;
+      line-height: 22px;
+      color: $tco-black;
+      text-transform: uppercase;
+
+      @include xs-to-md {
+        @include barlow-condensed-semi-bold;
+
+        font-size: 27px;
+        line-height: 28px;
+      }
+    }
+  }
+
+  @include xs-to-md {
+    padding: 10px 16px;
+  }
+}
+
+.button-save {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  margin-bottom: 32px;
+}
+
+.you-and-topcoder-container {
+  display: flex;
+  flex-direction: column;
+
+  @include upto-sm {
+    padding: 0;
+    margin-top: 24px;
+  }
+
+  h1 {
+    @include roboto-regular;
+
+    font-size: 28px;
+    line-height: 35px;
+    font-weight: 400;
+    color: $tc-black;
+    margin-bottom: 20px;
+  }
+}
+
+.track-list {
+  margin-top: 32px;
+
+  @include upto-sm {
+    padding: 0;
+    margin-top: 24px;
+  }
+}
diff --git a/src/shared/components/Settings/constants.js b/src/shared/components/Settings/constants.js
index 2d8a901b08..39d99bf13e 100644
--- a/src/shared/components/Settings/constants.js
+++ b/src/shared/components/Settings/constants.js
@@ -1,3 +1,4 @@
+
 export const SCREEN_SIZE = {
   SM: 767,
 };
@@ -31,3 +32,13 @@ export const PROFILE_SETTINGS = {
     description: 'Tell us about what you love to do in your free time.',
   },
 };
+
+export const TOPCODER_AND_YOU = {
+  tracks: {
+    title: 'Tracks',
+    description: 'Topcoder\'s three categories of challenges... please pick at least one based on your skills and interests.',
+  },
+  community: {
+    title: 'Your Communities',
+  },
+};
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index 93d3b99a9f..40d1307e47 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -9,6 +9,7 @@ import { TABS } from 'actions/page/settings';
 
 import _ from 'lodash';
 import Header from './Header';
+import TopcoderAndYou from './TopcoderAndYou';
 import Tools from './Tools';
 
 import './style.scss';
@@ -33,7 +34,9 @@ export default function Settings(props) {
 
   const currentTab = _.find(SETTINGS_TABS, { link: newProps.settingsTab });
   const title = currentTab ? currentTab.title : 'Settings';
-  const childRef = createRef();
+  const profileRef = createRef();
+  const tracksRef = createRef();
+
   const [isSaving, setIsSaving] = useState(false);
 
   return (
@@ -47,7 +50,11 @@ export default function Settings(props) {
           settingsTab={newProps.settingsTab}
           selectTab={selectTab}
           saveSettings={() => {
-            childRef.current.onSaveBasicInfo();
+            if (tracksRef.current) {
+              tracksRef.current.onSaveTopcoderAndYou();
+            } else {
+              profileRef.current.onSaveBasicInfo();
+            }
           }}
           isSaving={isSaving}
         />
@@ -57,7 +64,18 @@ export default function Settings(props) {
           && (
             <ProfileSettings
               {...newProps}
-              ref={childRef}
+              ref={profileRef}
+              isSaving={isSaving}
+              setIsSaving={setIsSaving}
+            />
+          )
+        }
+        {
+          newProps.settingsTab === TABS.TRACKS
+          && (
+            <TopcoderAndYou
+              ref={tracksRef}
+              {...newProps}
               isSaving={isSaving}
               setIsSaving={setIsSaving}
             />
diff --git a/src/shared/components/Settings/style.scss b/src/shared/components/Settings/style.scss
index 6985a0c4ce..08dddc9337 100644
--- a/src/shared/components/Settings/style.scss
+++ b/src/shared/components/Settings/style.scss
@@ -338,12 +338,13 @@ $checkbox-bg-selected: $tc-dark-blue;
   }
 
   // Switch location
-  $switch-width: 34px;
+  $switch-width: 37px;
   $switch-height: 20px;
+  $switch-border-radius: 10px;
   $switch-handle-offset: 3px;
   $switch-handle-size: $switch-height - (2 * $switch-handle-offset);
-  $switch-active-color: $tc-dark-blue-110;
-  $switch-inactive-color: $tc-gray-20;
+  $switch-active-color: $listing-checkbox-green;
+  $switch-inactive-color: $tc-gray-40;
 
   @mixin switch-transition {
     transition: all 0.15s ease-in-out;
@@ -356,7 +357,7 @@ $checkbox-bg-selected: $tc-dark-blue;
     margin-right: 10px;
     margin-left: 22px;
     background-color: $switch-inactive-color;
-    border-radius: $switch-height;
+    border-radius: $switch-border-radius;
     box-sizing: border-box;
     height: $switch-height;
     width: $switch-width;
@@ -377,9 +378,10 @@ $checkbox-bg-selected: $tc-dark-blue;
       @include switch-transition;
 
       display: block;
-      align-self: center;
+      align-self: flex-start;
       margin-right: 10px;
       margin-left: 15px;
+      margin-top: 10px;
       background-color: $switch-inactive-color;
       border-radius: $switch-height;
       box-sizing: border-box;

From 4a60dc4c6f7c66a727796697dfb06a38d17c6ec8 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Tue, 26 Jul 2022 18:55:08 +0700
Subject: [PATCH 03/49] improvement(reskin-profile-settings): 2 - experience &
 skill tab

---
 package-lock.json                             |  38 +-
 src/assets/images/calendar-green.svg          |   3 +
 src/assets/images/icon-check.svg              |   1 +
 src/assets/images/icon-close.svg              |   3 +
 src/assets/images/icon-x-cancel.svg           |   3 +
 .../images/verified-skill-badge-green.svg     |  14 +
 .../components/GUIKit/Datepicker/index.jsx    |   8 +
 .../Settings/ErrorMessage/styles.scss         |   4 +-
 .../Settings/ErrorWrapper/index.jsx           |  36 +-
 .../WorkplaceList/Item/index.jsx              |  95 +++
 .../WorkplaceList/Item/styles.scss            | 157 ++++
 .../WorkExperience/WorkplaceList/index.jsx    |  36 +
 .../WorkExperience/WorkplaceList/styles.scss  |  22 +
 .../WorkExperience/index.jsx                  | 602 ++++++++++++++
 .../WorkExperience/styles.scss                | 139 ++++
 .../WorkSkills/Interests/index.jsx            | 242 ++++++
 .../WorkSkills/Interests/styles.scss          | 113 +++
 .../WorkSkills/Languages/List/Item/index.jsx  | 116 +++
 .../Languages/List/Item/styles.scss           | 155 ++++
 .../WorkSkills/Languages/List/index.jsx       |  41 +
 .../WorkSkills/Languages/List/styles.scss     |  30 +
 .../WorkSkills/Languages/dropdowns.json       | 782 ++++++++++++++++++
 .../WorkSkills/Languages/index.jsx            | 477 +++++++++++
 .../WorkSkills/Languages/styles.scss          | 109 +++
 .../Skills/AddSkillsModal/index.jsx           | 210 +++++
 .../Skills/AddSkillsModal/styles.scss         | 249 ++++++
 .../WorkSkills/Skills/index.jsx               | 445 ++++++++++
 .../WorkSkills/Skills/styles.scss             | 164 ++++
 .../ExperienceAndSkills/WorkSkills/index.jsx  |  35 +
 .../WorkSkills/styles.scss                    |  33 +
 .../Settings/ExperienceAndSkills/index.jsx    | 121 +++
 .../Settings/ExperienceAndSkills/styles.scss  |  46 ++
 .../components/Settings/FormField/index.jsx   |  28 +-
 .../components/Settings/FormField/styles.scss |  10 +-
 .../Settings/FormInputCheckbox/index.jsx      |  56 ++
 .../Settings/FormInputCheckbox/styles.scss    |  65 ++
 .../Settings/FormInputDatePicker/index.jsx    | 122 +++
 .../Settings/FormInputDatePicker/styles.scss  | 151 ++++
 .../Settings/FormInputSelect/styles.scss      | 104 ++-
 .../Settings/FormInputText/index.jsx          |   9 +-
 .../Settings/FormInputText/styles.scss        |   8 +-
 .../Settings/FormInputTextArea/styles.scss    |   3 +-
 .../components/Settings/Header/styles.scss    |  21 +-
 .../ProfileSettings/Hobbies/index.jsx         |  49 +-
 .../ProfileSettings/Hobbies/styles.scss       |   7 +-
 .../ProfileSettings/Learning/index.jsx        | 136 +--
 .../ProfileSettings/Learning/styles.scss      |   8 +-
 .../ProfileSettings/PersonalDetails/index.jsx |  75 +-
 .../Settings/ProfileSettings/styles.scss      |  57 --
 .../Settings/SettingsBanner/index.jsx         |  23 +-
 .../Settings/SettingsBanner/styles.scss       |  12 +
 .../Settings/TabSelector/styles.scss          |  14 +-
 src/shared/components/Settings/constants.js   |  29 +-
 src/shared/components/Settings/index.jsx      |  26 +-
 src/shared/components/Settings/style.scss     | 200 +----
 .../_mixins/_variables-platform-ui.scss       | 163 ++++
 src/styles/_mixins/_variables.scss            |   3 +
 57 files changed, 5362 insertions(+), 546 deletions(-)
 create mode 100644 src/assets/images/calendar-green.svg
 create mode 100644 src/assets/images/icon-check.svg
 create mode 100644 src/assets/images/icon-close.svg
 create mode 100644 src/assets/images/icon-x-cancel.svg
 create mode 100644 src/assets/images/verified-skill-badge-green.svg
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/dropdowns.json
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/styles.scss
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/index.jsx
 create mode 100644 src/shared/components/Settings/ExperienceAndSkills/styles.scss
 create mode 100644 src/shared/components/Settings/FormInputCheckbox/index.jsx
 create mode 100644 src/shared/components/Settings/FormInputCheckbox/styles.scss
 create mode 100644 src/shared/components/Settings/FormInputDatePicker/index.jsx
 create mode 100644 src/shared/components/Settings/FormInputDatePicker/styles.scss
 create mode 100644 src/styles/_mixins/_variables-platform-ui.scss

diff --git a/package-lock.json b/package-lock.json
index d0b95fd47c..87325d5a5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15280,7 +15280,7 @@
           "resolved": "https://registry.npmjs.org/config/-/config-3.3.7.tgz",
           "integrity": "sha512-mX/n7GKDYZMqvvkY6e6oBY49W8wxdmQt+ho/5lhwFDXqQW9gI+Ahp8EKp8VAbISPnmf2+Bv5uZK7lKXZ6pf1aA==",
           "requires": {
-            "json5": "2.2.0"
+            "json5": "2.2.1"
           }
         },
         "hoist-non-react-statics": {
@@ -15292,12 +15292,9 @@
           }
         },
         "json5": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-          "requires": {
-            "minimist": "1.2.5"
-          }
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
         },
         "react-redux": {
           "version": "6.0.1",
@@ -15313,9 +15310,9 @@
           }
         },
         "redux": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
-          "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+          "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
           "requires": {
             "@babel/runtime": "7.9.6"
           }
@@ -15353,7 +15350,7 @@
             "react-helmet": "5.2.1",
             "react-redux": "6.0.1",
             "react-router-dom": "4.3.1",
-            "redux": "4.1.2",
+            "redux": "4.2.0",
             "redux-actions": "2.6.5",
             "redux-devtools": "3.5.0",
             "redux-devtools-dock-monitor": "1.1.3",
@@ -15384,7 +15381,7 @@
           "resolved": "https://registry.npmjs.org/config/-/config-3.3.7.tgz",
           "integrity": "sha512-mX/n7GKDYZMqvvkY6e6oBY49W8wxdmQt+ho/5lhwFDXqQW9gI+Ahp8EKp8VAbISPnmf2+Bv5uZK7lKXZ6pf1aA==",
           "requires": {
-            "json5": "2.2.0"
+            "json5": "2.2.1"
           }
         },
         "hoist-non-react-statics": {
@@ -15396,12 +15393,9 @@
           }
         },
         "json5": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-          "requires": {
-            "minimist": "1.2.5"
-          }
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
         },
         "react-redux": {
           "version": "6.0.1",
@@ -15417,9 +15411,9 @@
           }
         },
         "redux": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
-          "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+          "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
           "requires": {
             "@babel/runtime": "7.9.6"
           }
@@ -15457,7 +15451,7 @@
             "react-helmet": "5.2.1",
             "react-redux": "6.0.1",
             "react-router-dom": "4.3.1",
-            "redux": "4.1.2",
+            "redux": "4.2.0",
             "redux-actions": "2.6.5",
             "redux-devtools": "3.5.0",
             "redux-devtools-dock-monitor": "1.1.3",
diff --git a/src/assets/images/calendar-green.svg b/src/assets/images/calendar-green.svg
new file mode 100644
index 0000000000..9b1fc78ecd
--- /dev/null
+++ b/src/assets/images/calendar-green.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.6669 1.25563C4.93994 1.25563 5.16128 1.47697 5.16128 1.75001V2.4223H8.83919V1.75001C8.83919 1.47697 9.06053 1.25563 9.33357 1.25563C9.6066 1.25563 9.82794 1.47697 9.82794 1.75001V2.4223H11.0836C12.0009 2.4223 12.7446 3.16597 12.7446 4.08334V11.0833C12.7446 12.0007 12.0009 12.7444 11.0836 12.7444H2.9169C1.99953 12.7444 1.25586 12.0007 1.25586 11.0833V4.08334C1.25586 3.16597 1.99953 2.4223 2.9169 2.4223H4.17253V1.75001C4.17253 1.47697 4.39387 1.25563 4.6669 1.25563ZM4.17253 3.41105H2.9169C2.5456 3.41105 2.24461 3.71204 2.24461 4.08334V11.0833C2.24461 11.4546 2.5456 11.7556 2.9169 11.7556H11.0836C11.4549 11.7556 11.7559 11.4546 11.7559 11.0833V4.08334C11.7559 3.71204 11.4549 3.41105 11.0836 3.41105H9.82794V4.08334C9.82794 4.35637 9.6066 4.57771 9.33357 4.57771C9.06053 4.57771 8.83919 4.35637 8.83919 4.08334V3.41105H5.16128V4.08334C5.16128 4.35637 4.93994 4.57771 4.6669 4.57771C4.39387 4.57771 4.17253 4.35637 4.17253 4.08334V3.41105ZM3.58919 6.41667C3.58919 6.14364 3.81053 5.9223 4.08357 5.9223H9.9169C10.1899 5.9223 10.4113 6.14364 10.4113 6.41667C10.4113 6.68971 10.1899 6.91105 9.9169 6.91105H4.08357C3.81053 6.91105 3.58919 6.68971 3.58919 6.41667Z" fill="#137D60"/>
+</svg>
diff --git a/src/assets/images/icon-check.svg b/src/assets/images/icon-check.svg
new file mode 100644
index 0000000000..15d7ab5e84
--- /dev/null
+++ b/src/assets/images/icon-check.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="svg-inline--fa fa-check fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/icon-close.svg b/src/assets/images/icon-close.svg
new file mode 100644
index 0000000000..ec7dc669a5
--- /dev/null
+++ b/src/assets/images/icon-close.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0773 2.42254C16.6249 1.97016 15.9463 1.97016 15.494 2.42254L9.49992 8.41658L3.50587 2.42254C3.05349 1.97016 2.37492 1.97016 1.92254 2.42254C1.47016 2.87492 1.47016 3.55349 1.92254 4.00587L7.91658 9.99992L1.92254 15.994C1.47016 16.4463 1.47016 17.1249 1.92254 17.5773C2.14873 17.8035 2.37492 17.9166 2.7142 17.9166C3.05349 17.9166 3.27968 17.8035 3.50587 17.5773L9.49992 11.5833L15.494 17.5773C15.7202 17.8035 16.0594 17.9166 16.2856 17.9166C16.5118 17.9166 16.8511 17.8035 17.0773 17.5773C17.5297 17.1249 17.5297 16.4463 17.0773 15.994L11.0833 9.99992L17.0773 4.00587C17.5297 3.55349 17.5297 2.87492 17.0773 2.42254Z" fill="#2A2A2A"/>
+</svg>
diff --git a/src/assets/images/icon-x-cancel.svg b/src/assets/images/icon-x-cancel.svg
new file mode 100644
index 0000000000..4757bfd348
--- /dev/null
+++ b/src/assets/images/icon-x-cancel.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 1.66675C5.39175 1.66675 1.66675 5.39175 1.66675 10.0001C1.66675 14.6084 5.39175 18.3334 10.0001 18.3334C14.6084 18.3334 18.3334 14.6084 18.3334 10.0001C18.3334 5.39175 14.6084 1.66675 10.0001 1.66675ZM14.1667 12.9917L12.9917 14.1667L10.0001 11.1751L7.00841 14.1667L5.83341 12.9917L8.82508 10.0001L5.83341 7.00841L7.00841 5.83341L10.0001 8.82508L12.9917 5.83341L14.1667 7.00841L11.1751 10.0001L14.1667 12.9917Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/verified-skill-badge-green.svg b/src/assets/images/verified-skill-badge-green.svg
new file mode 100644
index 0000000000..43f6b82814
--- /dev/null
+++ b/src/assets/images/verified-skill-badge-green.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 54.1 (76490) - https://sketchapp.com -->
+    <title>This skill was used to win a challenge.</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Profile-Web" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="verified-skill-badge" transform="translate(-978.000000, -88.000000)">
+            <g transform="translate(978.000000, 88.000000)">
+                <path d="M1.45883079,10.6860988 C1.44371357,9.68530019 1.07405795,8.72231437 0.41562723,7.96846065 C-0.160703042,7.30860577 -0.134738369,6.31705492 0.475336198,5.68826715 C1.17231821,4.96990616 1.59186602,4.02758636 1.65934027,3.02895046 C1.71840109,2.15483555 2.43789321,1.47206302 3.31390118,1.45883079 C4.31469981,1.44371357 5.27768563,1.07405795 6.03153935,0.41562723 C6.69139423,-0.160703042 7.68294508,-0.134738369 8.31173285,0.475336198 C9.03009384,1.17231821 9.97241364,1.59186602 10.9710495,1.65934027 C11.8451644,1.71840109 12.527937,2.43789321 12.5411692,3.31390118 C12.5562864,4.31469981 12.9259421,5.27768563 13.5843728,6.03153935 C14.160703,6.69139423 14.1347384,7.68294508 13.5246638,8.31173285 C12.8276818,9.03009384 12.408134,9.97241364 12.3406597,10.9710495 C12.2815989,11.8451644 11.5621068,12.527937 10.6860988,12.5411692 C9.68530019,12.5562864 8.72231437,12.9259421 7.96846065,13.5843728 C7.30860577,14.160703 6.31705492,14.1347384 5.68826715,13.5246638 C4.96990616,12.8276818 4.02758636,12.408134 3.02895046,12.3406597 C2.15483555,12.2815989 1.47206302,11.5621068 1.45883079,10.6860988 Z" id="Star" fill="#FFFFFF"></path>
+                <path d="M4.79560672,6.24022302 C4.48223885,5.91384027 3.97084009,5.91384028 3.65757923,6.24011151 C3.34871983,6.56179848 3.34871982,7.08011599 3.65757921,7.40180297 L5.43133872,9.15497996 C5.5812057,9.31146655 5.78608047,9.40001099 6.00029897,9.40001099 C6.21451748,9.40001099 6.41939225,9.31146655 6.56943405,9.15479765 L10.1683417,5.40642016 C10.3683131,5.19814359 10.4459239,4.89646662 10.3732141,4.61384007 C10.3000712,4.32952987 10.0854129,4.10595633 9.80859067,4.02870144 C9.52998625,3.95094917 9.23287537,4.03386619 9.03042123,4.24472869 L6.00038333,7.40180297 L4.79560672,6.24022302 Z" id="Path" fill="#137D60"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/shared/components/GUIKit/Datepicker/index.jsx b/src/shared/components/GUIKit/Datepicker/index.jsx
index 6900fdf0a9..83605fac04 100644
--- a/src/shared/components/GUIKit/Datepicker/index.jsx
+++ b/src/shared/components/GUIKit/Datepicker/index.jsx
@@ -37,6 +37,8 @@ function Datepicker({
   readOnly,
   showClearDate,
   renderCalendarInfo,
+  className,
+  anchorDirection,
 }) {
   const sizeStyle = size === 'lg' ? 'lgSize' : 'xsSize';
   const [date, setDate] = useState(value ? moment(value) : null);
@@ -50,6 +52,7 @@ function Datepicker({
       styleName={`container ${sizeStyle} ${date ? 'haveValue' : ''} ${
         errorMsg ? 'haveError' : ''
       } ${focused ? 'isFocused' : ''}`}
+      className={className || ''}
     >
       <SingleDatePicker
         hideKeyboardShortcutsPanel
@@ -82,6 +85,7 @@ function Datepicker({
         readOnly={readOnly}
         showClearDate={showClearDate}
         renderCalendarInfo={renderCalendarInfo}
+        anchorDirection={anchorDirection}
       />
       {label ? (
         <span styleName="label">
@@ -113,6 +117,8 @@ Datepicker.defaultProps = {
   readOnly: false,
   showClearDate: false,
   renderCalendarInfo: null,
+  anchorDirection: 'left',
+  className: '',
 };
 
 Datepicker.propTypes = {
@@ -134,6 +140,8 @@ Datepicker.propTypes = {
   readOnly: PT.bool,
   showClearDate: PT.bool,
   renderCalendarInfo: PT.func,
+  anchorDirection: PT.oneOf(['left', 'right']),
+  className: PT.string,
 };
 
 export default Datepicker;
diff --git a/src/shared/components/Settings/ErrorMessage/styles.scss b/src/shared/components/Settings/ErrorMessage/styles.scss
index ddcca5ff3b..c68e85e9fd 100644
--- a/src/shared/components/Settings/ErrorMessage/styles.scss
+++ b/src/shared/components/Settings/ErrorMessage/styles.scss
@@ -6,11 +6,11 @@
   &.active {
     @include roboto-medium;
 
-    display: inline;
+    display: block;
     border-radius: 5px;
     color: $tc-red-110;
     font-size: 12px;
-    margin: 0 0 0 10px;
+    margin: 10px 0 0 10px;
   }
 
   &.active-margin {
diff --git a/src/shared/components/Settings/ErrorWrapper/index.jsx b/src/shared/components/Settings/ErrorWrapper/index.jsx
index efb7f324df..3612074b5a 100644
--- a/src/shared/components/Settings/ErrorWrapper/index.jsx
+++ b/src/shared/components/Settings/ErrorWrapper/index.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import PT from 'prop-types';
+import { logger } from 'topcoder-react-lib';
 
 import './styles.scss';
 
@@ -8,38 +9,31 @@ export default class ErrorWrapper extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      hasError: false,
-      info: null,
+      error: null,
+      errorInfo: null,
     };
   }
 
   componentDidCatch(error, errorInfo) {
     // Catch errors in any child components and re-renders with an error message
     this.setState({
-      hasError: true,
-      info: errorInfo.componentStack,
+      error,
+      errorInfo,
     });
   }
 
   render() {
-    const { hasError, info } = this.state;
+    const { error, errorInfo } = this.state;
     const { children } = this.props;
-    let isCurrentTab = false;
-
-    if (hasError) {
-      if (info.toString().includes(children.type.displayName)) {
-        isCurrentTab = true;
-      }
-
-      if (isCurrentTab) {
-        return (
-          <div styleName="container">
-            <h4>{`There was an issue loading the ${children.type.displayName}`}</h4>
-          </div>
-        );
-      }
-
-      return children;
+
+    if (error) {
+      logger.error(error, errorInfo);
+
+      return (
+        <div styleName="container">
+          { process.env.NODE_ENV !== 'production' ? `${error.name}: ${error.message}` : 'There was an issue loading the page' }
+        </div>
+      );
     }
 
     return children;
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx
new file mode 100644
index 0000000000..a745a2fe6d
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx
@@ -0,0 +1,95 @@
+/**
+ * render work Item
+ */
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import ReactSVG from 'react-svg';
+import moment from 'moment';
+import { isomorphy } from 'topcoder-react-utils';
+
+import './styles.scss';
+
+let assets;
+if (isomorphy.isClientSide()) {
+  assets = require.context('assets/images/profile', false, /svg/);
+}
+
+export default function Item(props) {
+  const {
+    work,
+    index,
+    onDeleteItem,
+    onEditItem,
+  } = props;
+
+  const hasSecondLine = () => {
+    if (_.isEmpty(work.timePeriodFrom) && _.isEmpty(work.timePeriodTo)
+      && _.isEmpty(work.position) && !work.working) {
+      return false;
+    }
+
+    return true;
+  };
+
+  const current = work.working ? '- Current' : '';
+
+  return (
+    <div styleName="container">
+      <div styleName="work-info">
+        <div styleName="work-icon">
+          <ReactSVG path={assets('./ico-work.svg')} />
+        </div>
+        <div styleName={`work-parameters${hasSecondLine() ? '' : ' single-line'}`}>
+          <div styleName={`parameter-first-line${hasSecondLine() ? '' : ' single-line'}`}>
+            { `${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}` : ''}` }
+          </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}`}`}
+            </p>
+            <p>
+              {`${!_.isEmpty(work.position) ? `${work.position}` : ''}`}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div styleName="operation-container">
+        <a
+          styleName="edit"
+          onKeyPress={() => onEditItem(index)}
+          tabIndex={0}
+          role="button"
+          onClick={() => onEditItem(index)}
+        >
+          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          <p>
+            Edit
+          </p>
+        </a>
+        <a
+          styleName="delete"
+          onKeyPress={() => onDeleteItem(index)}
+          tabIndex={0}
+          role="button"
+          onClick={() => onDeleteItem(index)}
+        >
+          <img src={assets('./ico-trash.svg')} alt="delete-icon" />
+          <p>
+            Delete
+          </p>
+        </a>
+      </div>
+    </div>
+  );
+}
+
+Item.propTypes = {
+  work: PT.shape().isRequired,
+  index: PT.number.isRequired,
+  onDeleteItem: PT.func.isRequired,
+  onEditItem: PT.func.isRequired,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss
new file mode 100644
index 0000000000..6bc480ae4a
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss
@@ -0,0 +1,157 @@
+@import "../../../../style";
+
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-items: center;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+  border: 1px solid $tc-gray-10;
+  border-bottom: none;
+  background-color: $tc-white;
+}
+
+.work-info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.work-icon {
+  height: 49px;
+  width: 49px;
+  margin-right: 18px;
+}
+
+.work-parameters {
+  @include roboto-medium;
+
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  justify-content: left;
+  font-size: 15px;
+  line-height: 20px;
+  text-transform: capitalize;
+  padding-right: 20px;
+
+  &.single-line {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.parameter-first-line {
+  font-weight: 500;
+  color: $tc-black;
+  margin-bottom: 10px;
+  word-break: break-all;
+
+  &.single-line {
+    margin-bottom: 0;
+  }
+
+  @include upto-sm {
+    margin-bottom: 0;
+  }
+}
+
+.parameter-second-line,
+.parameter-third-line {
+  color: $tc-gray-50;
+  font-weight: 400;
+  word-break: break-all;
+
+  @include upto-sm {
+    display: none;
+  }
+}
+
+.parameter-second-line-mobile {
+  display: none;
+
+  @include upto-sm {
+    display: flex;
+    flex-direction: column;
+    color: $tc-gray-50;
+    font-weight: 400;
+
+    p {
+      word-break: break-all;
+    }
+  }
+}
+
+.operation-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .delete {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline-style: none;
+    margin-left: 10px;
+
+    img {
+      margin-bottom: 10px;
+      width: 20px;
+      height: 20px;
+
+      @include upto-sm {
+        margin-bottom: 0;
+      }
+    }
+
+    p {
+      @include roboto-regular;
+
+      font-size: 11px;
+      line-height: 15px;
+      font-weight: 400;
+      color: $tc-gray-50;
+
+      @include upto-sm {
+        display: none;
+      }
+    }
+  }
+
+  .edit {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline-style: none;
+    margin-left: 10px;
+
+    img {
+      margin-bottom: 10px;
+      width: 20px;
+      height: 20px;
+
+      @include upto-sm {
+        margin-bottom: 0;
+      }
+    }
+
+    p {
+      @include roboto-regular;
+
+      font-size: 11px;
+      line-height: 15px;
+      font-weight: 400;
+      color: $tc-gray-50;
+
+      @include upto-sm {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/index.jsx
new file mode 100644
index 0000000000..a45950d3ee
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/index.jsx
@@ -0,0 +1,36 @@
+/**
+ * render Work list
+ */
+import React from 'react';
+import PT from 'prop-types';
+import Item from './Item';
+
+import './styles.scss';
+
+export default function WorkList(props) {
+  const {
+    workList,
+    onDeleteItem,
+    onEditItem,
+  } = props;
+
+  return (
+    <div styleName="container">
+      <ul>
+        {
+          workList.items.map((work, index) => (
+            <li key={`${work.company}${index + 1}`}>
+              <Item work={work} index={index} onDeleteItem={onDeleteItem} onEditItem={onEditItem} />
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+  );
+}
+
+WorkList.propTypes = {
+  workList: PT.shape().isRequired,
+  onDeleteItem: PT.func.isRequired,
+  onEditItem: PT.func.isRequired,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss
new file mode 100644
index 0000000000..1d4ed8cb31
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss
@@ -0,0 +1,22 @@
+@import "../../../style";
+
+.container {
+  width: 100%;
+  background-color: $tc-white;
+  padding: 0 0;
+  margin: 0 0 $margin-xxxxl;
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+
+    li {
+      min-height: 90px;
+    }
+
+    li:last-child {
+      border-bottom: 1px solid $tc-gray-10;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
new file mode 100644
index 0000000000..655ecc3057
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
@@ -0,0 +1,602 @@
+/**
+ * Child component of Settings/Profile/ renders the
+ * 'Work' page.
+ */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-disable no-undef */
+import React from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import moment from 'moment';
+import ConsentComponent from 'components/Settings/ConsentComponent';
+import { PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit';
+import ErrorMessage from 'components/Settings/ErrorMessage';
+import { validateStartDate, validateEndDate } from 'utils/settings';
+import FormField from 'components/Settings/FormField';
+import FormInputText from 'components/Settings/FormInputText';
+import FormInputCheckbox from 'components/Settings/FormInputCheckbox';
+import FormInputDatePicker from 'components/Settings/FormInputDatePicker';
+import AddItemIcon from 'assets/images/settings-add-item.svg';
+import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import WorkplaceList from './WorkplaceList';
+import ConfirmationModal from '../../ConfirmationModal';
+
+import styles from './styles.scss';
+
+export default class Work extends ConsentComponent {
+  constructor(props) {
+    super(props);
+    this.onHandleDeleteWork = this.onHandleDeleteWork.bind(this);
+    this.onDeleteWork = this.onDeleteWork.bind(this);
+    this.onEditWork = this.onEditWork.bind(this);
+    this.loadWorkTrait = this.loadWorkTrait.bind(this);
+    this.onUpdateInput = this.onUpdateInput.bind(this);
+    this.onHandleAddWork = this.onHandleAddWork.bind(this);
+    this.onAddWork = this.onAddWork.bind(this);
+    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
+    this.onUpdateDate = this.onUpdateDate.bind(this);
+    this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
+
+    const { userTraits } = props;
+    this.state = {
+      formInvalid: false,
+      startDateInvalid: false,
+      startDateInvalidMsg: '',
+      endDateInvalid: false,
+      endDateDisabled: false,
+      endDateInvalidMsg: '',
+      isSumbit: false,
+      workTrait: this.loadWorkTrait(userTraits),
+      personalizationTrait: this.loadPersonalizationTrait(userTraits),
+      newWork: {
+        company: '',
+        position: '',
+        cityTown: '',
+        timePeriodFrom: '',
+        timePeriodTo: '',
+        industry: '',
+        working: false,
+      },
+      isEdit: false,
+      indexNo: null,
+      showConfirmation: false,
+      windowInnerWidth: 0,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const workTrait = this.loadWorkTrait(nextProps.userTraits);
+    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
+    this.setState({
+      workTrait,
+      personalizationTrait,
+      isSubmit: false,
+      formInvalid: false,
+      startDateInvalid: false,
+      startDateInvalidMsg: '',
+      endDateInvalid: false,
+      endDateDisabled: false,
+      endDateInvalidMsg: '',
+    });
+  }
+
+  componentDidMount() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleResize = () => {
+    this.setState({ windowInnerWidth: window.innerWidth });
+  }
+
+  /**
+   * Show User Consent Modal
+   * @param e event
+   */
+  onHandleAddWork(e) {
+    if (e) e.preventDefault();
+    const { newWork } = this.state;
+    this.setState({ isSubmit: true });
+    if (this.onCheckFormValue(newWork)) {
+      return;
+    }
+    this.showConsent(this.onAddWork.bind(this));
+  }
+
+  /**
+   * Check form fields value,
+   * Invalid value, can not save
+   * @param newWork object
+   */
+  onCheckFormValue(newWork) {
+    let invalid = false;
+
+    if (!_.trim(newWork.company).length) {
+      invalid = true;
+    }
+
+    const fromDateValidResult = validateStartDate(newWork.working,
+      newWork.timePeriodFrom, newWork.timePeriodTo);
+    const endDateValidResult = validateEndDate(newWork.working,
+      newWork.timePeriodFrom, newWork.timePeriodTo);
+    const formInvalid = invalid || fromDateValidResult.invalid || endDateValidResult.invalid;
+
+    this.setState({
+      formInvalid,
+      startDateInvalid: fromDateValidResult.invalid,
+      startDateInvalidMsg: fromDateValidResult.message,
+      endDateInvalid: endDateValidResult.invalid,
+      endDateInvalidMsg: endDateValidResult.message,
+    });
+
+    return formInvalid;
+  }
+
+  onHandleDeleteWork(indexNo) {
+    this.setState({
+      showConfirmation: true,
+      indexNo,
+    });
+  }
+
+  onUpdateDate(date, timePeriod) {
+    const { newWork: oldWork } = this.state;
+    const newWork = { ...oldWork };
+    newWork[timePeriod] = date;
+    this.setState({ newWork, isSubmit: false });
+  }
+
+  /**
+   * Delete work by index
+   * @param indexNo the work index no
+   */
+  onDeleteWork(indexNo) {
+    const { workTrait } = this.state;
+    const newWorkTrait = { ...workTrait };
+    newWorkTrait.traits.data.splice(indexNo, 1);
+    this.setState({
+      workTrait: newWorkTrait,
+    });
+
+    const {
+      handle,
+      tokenV3,
+      updateUserTrait,
+      deleteUserTrait,
+    } = this.props;
+
+    if (newWorkTrait.traits.data.length > 0) {
+      updateUserTrait(handle, 'work', newWorkTrait.traits.data, tokenV3);
+    } else {
+      deleteUserTrait(handle, 'work', tokenV3);
+    }
+
+    this.setState({
+      showConfirmation: false,
+      newWork: {
+        company: '',
+        position: '',
+        cityTown: '',
+        timePeriodFrom: '',
+        timePeriodTo: '',
+        industry: '',
+        working: false,
+      },
+      isEdit: false,
+      indexNo: null,
+      isSubmit: false,
+      formInvalid: false,
+      startDateInvalid: false,
+      startDateInvalidMsg: '',
+      endDateInvalid: false,
+      endDateDisabled: false,
+      endDateInvalidMsg: '',
+    });
+  }
+
+  /**
+   * Edit work by index
+   * @param indexNo the work index no
+   */
+  onEditWork(indexNo) {
+    const { workTrait } = this.state;
+    const isEmpty = val => val == null || val === '';
+
+    this.setState({
+      newWork: {
+        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,
+        industry: isEmpty(workTrait.traits.data[indexNo].industry) ? '' : workTrait.traits.data[indexNo].industry,
+        working: workTrait.traits.data[indexNo].working,
+      },
+      isEdit: true,
+      indexNo,
+      formInvalid: false,
+      startDateInvalid: false,
+      startDateInvalidMsg: '',
+      endDateInvalid: false,
+      endDateDisabled: workTrait.traits.data[indexNo].working,
+      endDateInvalidMsg: '',
+      isSubmit: false,
+    });
+  }
+
+  /**
+   * Add new work
+   * @param answer user consent answer value
+   */
+  onAddWork(answer) {
+    const {
+      newWork, personalizationTrait, isEdit, indexNo,
+    } = this.state;
+    const isEmpty = val => val == null || val === '';
+    const isEmptyObject = val => _.isEmpty(val);
+
+    const {
+      handle,
+      tokenV3,
+      updateUserTrait,
+      addUserTrait,
+    } = this.props;
+
+    const { workTrait } = this.state;
+
+    const work = _.clone(newWork);
+    if (isEmpty(work.position)) {
+      delete work.position;
+    }
+    if (isEmpty(work.cityTown)) {
+      delete work.cityTown;
+    }
+    if (isEmpty(work.timePeriodFrom)) {
+      delete work.timePeriodFrom;
+    } else {
+      work.timePeriodFrom = new Date(work.timePeriodFrom).getTime();
+    }
+    if (isEmpty(work.timePeriodTo)) {
+      delete work.timePeriodTo;
+    } else {
+      work.timePeriodTo = new Date(work.timePeriodTo).getTime();
+    }
+    if (isEmpty(work.industry)) {
+      delete work.industry;
+    }
+
+    if (workTrait.traits && workTrait.traits.data.length > 0) {
+      const newWorkTrait = _.cloneDeep(workTrait);
+      if (isEdit) {
+        newWorkTrait.traits.data.splice(indexNo, 1);
+      }
+      newWorkTrait.traits.data.push(work);
+      updateUserTrait(handle, 'work', newWorkTrait.traits.data, tokenV3);
+    } else {
+      const newWorks = [];
+      newWorks.push(work);
+      addUserTrait(handle, 'work', newWorks, tokenV3);
+    }
+    this.setState({
+      isEdit: false,
+      indexNo: null,
+      isSubmit: false,
+    });
+    // save personalization
+    if (isEmptyObject(personalizationTrait)) {
+      const personalizationData = { userConsent: answer };
+      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+    } else {
+      const trait = personalizationTrait.traits.data[0];
+      if (trait.userConsent !== answer) {
+        const personalizationData = { userConsent: answer };
+        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+      }
+    }
+
+    this.clearForm();
+  }
+
+  clearForm() {
+    this.setState({
+      newWork: {
+        company: '',
+        position: '',
+        cityTown: '',
+        timePeriodFrom: '',
+        timePeriodTo: '',
+        industry: '',
+        working: false,
+      },
+    });
+  }
+
+  /**
+   * Update input value
+   * @param e event
+   */
+  onUpdateInput(e) {
+    const { newWork: oldWork } = this.state;
+    const newWork = { ...oldWork };
+    let endDateDisabled = newWork.working;
+    if (e.target.type !== 'checkbox') {
+      newWork[e.target.name] = e.target.value;
+    } else {
+      newWork[e.target.name] = e.target.checked;
+      if (e.target.checked) { // if working nullify toDate
+        newWork.timePeriodTo = '';
+        endDateDisabled = true;
+      } else {
+        endDateDisabled = false;
+      }
+    }
+    this.setState({ newWork, isSubmit: false, endDateDisabled });
+  }
+
+  /**
+   * Get work trait
+   * @param userTraits the all user traits
+   */
+  loadWorkTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'work');
+    const works = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, works);
+  }
+
+  /**
+   * Get personalization trait
+   * @param userTraits the all user traits
+   */
+  loadPersonalizationTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'personalization');
+    const personalization = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, personalization);
+  }
+
+  onCancelEditStatus() {
+    const { isEdit } = this.state;
+    if (isEdit) {
+      this.setState({
+        isEdit: false,
+        isSubmit: false,
+        indexNo: null,
+        newWork: {
+          company: '',
+          position: '',
+          cityTown: '',
+          timePeriodFrom: '',
+          timePeriodTo: '',
+          industry: '',
+          working: false,
+        },
+        formInvalid: false,
+        startDateInvalid: false,
+        startDateInvalidMsg: '',
+        endDateInvalid: false,
+        endDateDisabled: false,
+        endDateInvalidMsg: '',
+      });
+    }
+  }
+
+  render() {
+    const {
+      workTrait,
+      isEdit,
+      showConfirmation,
+      indexNo,
+      formInvalid,
+      startDateInvalid,
+      startDateInvalidMsg,
+      endDateInvalid,
+      endDateDisabled,
+      endDateInvalidMsg,
+      isSubmit,
+      windowInnerWidth,
+    } = this.state;
+    const workItems = workTrait.traits
+      ? workTrait.traits.data.slice() : [];
+    const { newWork } = this.state;
+
+    return (
+      <React.Fragment>
+        {
+          this.shouldRenderConsent() && this.renderConsent()
+        }
+        {
+          showConfirmation && (
+            <ConfirmationModal
+              onConfirm={() => this.showConsent(this.onDeleteWork.bind(this, indexNo))}
+              onCancel={() => this.setState({
+                showConfirmation: false,
+                indexNo: null,
+              })}
+              name={workTrait.traits.data[indexNo].company}
+            />
+          )
+        }
+        <div styleName="work-container">
+          <h2 styleName="title">
+            Work Experience
+          </h2>
+
+          <div styleName="form-container">
+            <Collapse>
+              <div styleName="form-title">
+                {
+                  isEdit ? (<React.Fragment>Edit workplace</React.Fragment>)
+                    : (<React.Fragment>Add a new workplace</React.Fragment>)
+                }
+              </div>
+
+              <div styleName="form-content">
+                <div styleName="form-label">
+                  Enter your work experience to show customers the roles and responsibilites
+                  you have held in the past.
+                </div>
+                <div styleName="form-body">
+                  <WorkplaceList
+                    workList={{ items: workItems }}
+                    onDeleteItem={this.onHandleDeleteWork}
+                    onEditItem={this.onEditWork}
+                  />
+                  <form styleName="workplace-form" noValidate autoComplete="off">
+                    <FormField label="Company *" style={{ flex: '0 0 100%' }}>
+                      <FormInputText
+                        id="company"
+                        name="company"
+                        type="text"
+                        placeholder="Enter company"
+                        onChange={this.onUpdateInput}
+                        value={newWork.company}
+                        maxLength="64"
+                        required
+                      />
+                      {isSubmit && formInvalid && (
+                        <ErrorMessage
+                          invalid={_.isEmpty(newWork.company)}
+                          message="Company cannot be empty"
+                        />
+                      )}
+                    </FormField>
+
+                    <FormField label="Position" style={{ flex: '0 0 100%' }}>
+                      <FormInputText
+                        id="position"
+                        name="position"
+                        type="text"
+                        placeholder="Enter position"
+                        onChange={this.onUpdateInput}
+                        value={newWork.position}
+                        maxLength="64"
+                        required={false}
+                      />
+                    </FormField>
+
+                    <FormField label="Industry" style={{ flex: '0 0 calc(50% - 5px)', marginRight: '5px' }}>
+                      <FormInputText
+                        id="industry"
+                        name="industry"
+                        value={newWork.industry}
+                        onChange={this.onUpdateInput}
+                        placeholder="Select industry"
+                        maxLength="64"
+                      />
+                    </FormField>
+
+                    <FormField label="City" style={{ flex: '0 0 calc(50% - 5px)', marginLeft: '5px' }}>
+                      <FormInputText
+                        id="cityTown"
+                        name="cityTown"
+                        type="text"
+                        placeholder="Enter city"
+                        onChange={this.onUpdateInput}
+                        value={newWork.cityTown}
+                        maxLength="64"
+                        required={false}
+                      />
+                    </FormField>
+
+                    <FormField label="Start Date" style={{ flex: '0 0 calc(50% - 5px)', marginRight: '5px' }}>
+                      <FormInputDatePicker
+                        readOnly
+                        displayFormat="MM/DD/YYYY"
+                        placeholder={windowInnerWidth < 768 ? 'Select start' : 'Select start date'}
+                        isOutsideRange={date => moment(date).add(-1, 'days').isAfter()}
+                        value={newWork.timePeriodFrom}
+                        id="date-from1"
+                        onChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
+                      />
+                      {
+                        isSubmit && formInvalid && (
+                          <ErrorMessage
+                            invalid={startDateInvalid}
+                            message={startDateInvalidMsg}
+                          />
+                        )
+                      }
+                    </FormField>
+
+                    <FormField label="End Date" style={{ flex: '0 0 calc(50% - 5px)', marginLeft: '5px' }}>
+                      <FormInputDatePicker
+                        readOnly
+                        displayFormat="MM/DD/YYYY"
+                        placeholder={windowInnerWidth < 768 ? 'Select end' : 'Select end date'}
+                        isOutsideRange={date => moment(date).add(-1, 'days').isAfter()}
+                        value={newWork.timePeriodTo}
+                        id="date-to1"
+                        onChange={date => this.onUpdateDate(date, 'timePeriodTo')}
+                        anchorDirection="right"
+                        disabled={endDateDisabled}
+                      />
+                      {
+                        isSubmit && formInvalid && (
+                          <ErrorMessage
+                            invalid={endDateInvalid}
+                            message={endDateInvalidMsg}
+                          />
+                        )
+                      }
+                    </FormField>
+
+                    <FormInputCheckbox
+                      checked={newWork.working}
+                      id="working"
+                      name="working"
+                      label="I am currently working in this role"
+                      onChange={this.onUpdateInput}
+                      style={{ flex: '0 0 100%' }}
+                    />
+
+                  </form>
+                </div>
+              </div>
+              <div styleName="form-footer">
+                {!isEdit && (
+                  <PrimaryButton
+                    theme={{ button: styles.button }}
+                    onClick={this.onHandleAddWork}
+                  >
+                    <AddItemIcon styleName="icon" /> Add Another Job
+                  </PrimaryButton>
+                )}
+
+                { isEdit && (
+                  <React.Fragment>
+                    <PrimaryButton
+                      theme={{ button: styles.button }}
+                      onClick={this.onHandleAddWork}
+                    >
+                      Edit workplace to your list
+                    </PrimaryButton>
+                    <SecondaryButton
+                      theme={{ button: styles.button }}
+                      onClick={this.onCancelEditStatus}
+                    >
+                      Cancel
+                    </SecondaryButton>
+                  </React.Fragment>
+                )}
+              </div>
+            </Collapse>
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+Work.propTypes = {
+  tokenV3: PT.string.isRequired,
+  handle: PT.string.isRequired,
+  userTraits: PT.array.isRequired,
+  addUserTrait: PT.func.isRequired,
+  updateUserTrait: PT.func.isRequired,
+  deleteUserTrait: PT.func.isRequired,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss
new file mode 100644
index 0000000000..8a1bb6c79a
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss
@@ -0,0 +1,139 @@
+@import "~styles/mixins";
+
+.work-container {
+  padding: $pad-xxxxl;
+  margin: $margin-xxxxl 0;
+  background-color: $color-black-5;
+  border-radius: 8px;
+
+  .title {
+    @include barlow-semi-bold;
+
+    font-size: 20px;
+    line-height: 22px;
+    color: inherit;
+    padding: 0 0 40px;
+    text-transform: uppercase;
+  }
+
+  .workplace-form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.form-container {
+  padding: $pad-xxxxl;
+  background-color: $color-tc-white;
+  border-radius: 4px;
+}
+
+.form-title {
+  @include barlow-semi-bold;
+
+  font-size: 20px;
+  line-height: 22px;
+  color: inherit;
+  text-transform: uppercase;
+  padding-bottom: $pad-xxxxl;
+}
+
+.form-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.form-label {
+  flex: 0 0 calc(50% - 13px);
+  padding-right: 48px;
+
+  @include roboto-regular;
+
+  font-size: 16px;
+  line-height: 26px;
+  color: inherit;
+}
+
+.form-body {
+  flex: 0 0 calc(50% + 13px);
+}
+
+.form-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-left: calc(50% - 13px);
+  padding: $pad-sm 0;
+  gap: 8px 36px;
+
+  .button {
+    @include roboto-bold;
+
+    font-size: 14px;
+    line-height: 22px;
+    color: $color-turq-160;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent !important;
+    border: none;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none !important;
+      color: lighten($color-turq-160, 5%);
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+
+    .icon {
+      margin-right: $margin-xs;
+    }
+  }
+}
+
+@include xs-to-md {
+  .work-container {
+    padding: $pad-xxl $pad-lg;
+    margin: $margin-xxl 0;
+
+    .title {
+      @include barlow-condensed-medium;
+
+      font-size: 27px;
+      line-height: 28px;
+      padding: 0 0 $pad-lg;
+    }
+  }
+
+  .form-container {
+    padding: $pad-xxl $pad-lg;
+  }
+
+  .form-title {
+    @include barlow-condensed-medium;
+
+    font-size: 22px;
+    line-height: 24px;
+    padding-bottom: $pad-xxl;
+  }
+
+  .form-label {
+    flex: 1 1 100%;
+    padding: 0;
+    margin-bottom: $margin-xxl;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .form-body {
+    flex: 1 1 100%;
+  }
+
+  .form-footer {
+    margin: 0;
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx
new file mode 100644
index 0000000000..a1535528fc
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx
@@ -0,0 +1,242 @@
+/**
+ * Child component of Settings/Profile/ renders the
+ * 'Basic Info' page.
+ */
+
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import fetch from 'isomorphic-fetch';
+import { config } from 'topcoder-react-utils';
+import ConsentComponent from 'components/Settings/ConsentComponent';
+import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import { INTERESTS_AT_TOPCODER } from '../../../constants';
+import './styles.scss';
+
+export default class Interests extends ConsentComponent {
+  constructor(props) {
+    super(props);
+
+    this.save = this.save.bind(this);
+    this.processBasicInfo = this.processBasicInfo.bind(this);
+    this.loadInterests = this.loadInterests.bind(this);
+    this.updateInterest = this.updateInterest.bind(this);
+
+    const { userTraits } = props;
+    this.state = {
+      allInterestData: INTERESTS_AT_TOPCODER,
+      interestData: [],
+      basicInfoTrait: this.loadBasicInfoTraits(userTraits),
+      profile: {},
+      newBasicInfo: {
+        primaryInterestInTopcoder: '',
+      },
+    };
+
+    this.previousInterestData = null;
+  }
+
+  componentDidMount() {
+    const { basicInfoTrait } = this.state;
+    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
+    this.processBasicInfo(basicInfo, this.props.profile);
+    this.setState({ profile: this.props.profile });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const basicInfoTrait = this.loadBasicInfoTraits(nextProps.userTraits);
+
+    const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
+    const previousBasicInfoTrait = this.loadBasicInfoTraits(this.props.userTraits);
+
+    if (!_.isEqual(basicInfoTrait, previousBasicInfoTrait)) {
+      this.processBasicInfo(basicInfo, nextProps.profile);
+      this.setState({
+        basicInfoTrait,
+      });
+    }
+    if (!_.isEqual(this.state.profile, nextProps.profile)) {
+      this.processBasicInfo(basicInfo, nextProps.profile);
+      this.setState({ profile: nextProps.profile });
+    }
+  }
+
+  async onCheckUserTrait(traitId) {
+    const { handle, tokenV3 } = this.props;
+    let isExists = false;
+    await fetch(`${config.API.V5}/members/${handle}/traits?traitIds=${traitId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${tokenV3}`,
+      },
+    })
+      .then(result => result.json())
+      .then((dataResponse) => {
+        if (dataResponse.length > 0) {
+          const trait = dataResponse[0];
+          if (trait.createdAt) {
+            isExists = true;
+          }
+        }
+      });
+
+    return isExists;
+  }
+
+  /**
+   * Show User Consent Modal
+   * @param {*} e event
+   */
+  save() {
+    this.setState({ isSaving: true });
+    this.showConsent(this.onSave.bind(this));
+  }
+
+  /**
+   * Save Basic Info
+   * @param answer user consent answer value
+   */
+  async onSave(/* answer */) {
+    const {
+      newBasicInfo, basicInfoTrait,
+    } = this.state;
+    const {
+      handle,
+      tokenV3,
+      addUserTrait,
+      updateUserTrait,
+    } = this.props;
+
+    // This is a hack to check if the user has an existing basic_info trait object
+    const exists = await this.onCheckUserTrait('basic_info');
+    if (exists) {
+      const newBasicInfoTrait = { ...basicInfoTrait };
+      newBasicInfoTrait.traits.data = [];
+      newBasicInfoTrait.traits.data.push(newBasicInfo);
+      await updateUserTrait(handle, 'basic_info', newBasicInfoTrait.traits.data, tokenV3);
+    } else {
+      const data = [];
+      data.push(newBasicInfo);
+      await addUserTrait(handle, 'basic_info', data, tokenV3);
+    }
+
+    this.setState({ isSaving: false });
+    this.previousInterestData = null;
+  }
+
+  /**
+   * Get basic info trait
+   * @param userTraits the all user traits
+   */
+  loadBasicInfoTraits = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'basic_info');
+    const basicInfo = trait.length === 0 ? {} : trait[trait.length - 1];
+    return _.assign({}, basicInfo);
+  }
+
+
+  /**
+   * Process basic info state
+   */
+  processBasicInfo = (value, profile) => {
+    const { newBasicInfo } = this.state;
+    if (_.has(profile, 'handle')) {
+      Object.keys(newBasicInfo).reduce((acc, key) => {
+        if (_.has(value, key)) {
+          newBasicInfo[key] = value[key];
+        }
+        return acc;
+      }, {});
+    }
+    this.setState({ newBasicInfo }, () => {
+      this.loadInterests();
+    });
+  }
+
+  loadInterests() {
+    const { newBasicInfo: { primaryInterestInTopcoder }, allInterestData } = this.state;
+
+    const isValid = i => allInterestData.indexOf(i) !== -1;
+    const isNotDeduplicated = (i, index, array) => array.indexOf(i) === index;
+    const compareByIndex = (a, b) => allInterestData.indexOf(a) - allInterestData.indexOf(b);
+
+    const interestData = primaryInterestInTopcoder
+      .split(',')
+      .map(i => i.trim())
+      .filter(isValid)
+      .filter(isNotDeduplicated)
+      .sort(compareByIndex);
+
+    this.setState({ interestData });
+  }
+
+  updateInterest(item) {
+    const { interestData, newBasicInfo, allInterestData } = this.state;
+
+    let updated;
+    if (interestData.indexOf(item) !== -1) {
+      updated = interestData.filter(i => i !== item);
+    } else {
+      updated = [...interestData, item].sort(
+        (a, b) => allInterestData.indexOf(a) - allInterestData.indexOf(b),
+      );
+    }
+
+    const primaryInterestInTopcoder = updated.join(',');
+    this.setState({
+      interestData: updated,
+      newBasicInfo: { ...newBasicInfo, primaryInterestInTopcoder },
+    });
+
+    this.previousInterestData = interestData;
+  }
+
+  render() {
+    const { interestData, allInterestData } = this.state;
+    const canModifyTrait = !this.props.traitRequestCount;
+    const isSelected = item => interestData.indexOf(item) !== -1;
+
+    return (
+      <div styleName="form-container">
+        <Collapse>
+          <div styleName="form-title">
+            Select Your Interests at Topcoder
+          </div>
+          <div styleName="form-content">
+            <div styleName="form-label">
+              What do you want to do at Topcoder? Compete? Learn? Earn extra money?
+              Get a full time gig? There are no wrong answers.
+            </div>
+            <form styleName="form-body" name="primaryInterestInTopcoder-form">
+              <div styleName="interestList">
+                { allInterestData.map(item => (
+                  <span
+                    key={item}
+                    role="button"
+                    styleName={`interestListItem ${isSelected(item) ? 'selected' : ''}`}
+                    onClick={() => canModifyTrait && this.updateInterest(item)}
+                    tabIndex={0}
+                    onKeyDown={() => {}}
+                  >
+                    {item}
+                  </span>
+                ))}
+              </div>
+            </form>
+          </div>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+Interests.propTypes = {
+  tokenV3: PT.string.isRequired,
+  handle: PT.string.isRequired,
+  profile: PT.shape().isRequired,
+  userTraits: PT.array.isRequired,
+  addUserTrait: PT.func.isRequired,
+  updateUserTrait: PT.func.isRequired,
+  traitRequestCount: PT.number.isRequired,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/styles.scss
new file mode 100644
index 0000000000..c4ad4f45df
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/styles.scss
@@ -0,0 +1,113 @@
+@import "~styles/mixins";
+
+.form-container {
+  padding: $pad-xxxxl;
+  margin: $margin-sm 0 0;
+  background-color: $color-tc-white;
+}
+
+.form-title {
+  @include barlow-semi-bold;
+
+  font-size: 20px;
+  line-height: 22px;
+  color: inherit;
+  text-transform: uppercase;
+  padding-bottom: $pad-xxxxl;
+}
+
+.form-content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $pad-xxxxl 0 0;
+  border-top: 2px solid $color-black-10;
+}
+
+.form-label {
+  flex: 0 0 calc(50% - 13px);
+  padding-right: 48px;
+
+  @include roboto-regular;
+
+  font-size: 16px;
+  line-height: 26px;
+  color: inherit;
+}
+
+.form-body {
+  flex: 0 0 calc(50% + 13px);
+}
+
+.form-footer {
+  // empty
+}
+
+.interestList {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-items: flex-start;
+  gap: 16px 8px;
+
+  .interestListItem {
+    @include roboto-medium;
+
+    font-size: 14px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    text-transform: capitalize;
+    padding: ($pad-sm - 1px) ($pad-lg - 1px);
+    border: 1px solid $color-black-100;
+    border-radius: 4px;
+    cursor: pointer;
+    white-space: nowrap;
+
+    &.selected {
+      color: $color-tc-white;
+      background-color: $color-turq-160;
+      border-color: $color-turq-160;
+    }
+  }
+
+  @include xs-to-md {
+    gap: 8px;
+
+    .interestListItem {
+      padding: ($pad-xs - 1px) ($pad-lg - 1px);
+    }
+  }
+}
+
+@include xs-to-md {
+  .form-container {
+    padding: $pad-xxl $pad-lg;
+  }
+
+  .form-title {
+    @include barlow-condensed-medium;
+
+    font-size: 22px;
+    line-height: 24px;
+    padding-bottom: $pad-xxl;
+  }
+
+  .form-content {
+    padding: $pad-xxl 0 0;
+  }
+
+  .form-label {
+    flex: 1 1 100%;
+    padding: 0;
+    margin-bottom: $margin-xxl;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .form-body {
+    flex: 1 1 100%;
+  }
+
+  .form-footer {
+    margin: 0;
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx
new file mode 100644
index 0000000000..6eeb4f7968
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx
@@ -0,0 +1,116 @@
+/**
+ * render language Item
+ */
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import { isomorphy } from 'topcoder-react-utils';
+
+import languageIcon from 'assets/images/profile/language.png';
+
+import './styles.scss';
+
+let assets;
+if (isomorphy.isClientSide()) {
+  assets = require.context('assets/images/profile', false, /svg/);
+}
+
+export default function Item(props) {
+  const {
+    language,
+    index,
+    onDeleteItem,
+    onEditItem,
+  } = props;
+
+  const hasOptions = () => {
+    if (_.isEmpty(language.spokenLevel) && _.isEmpty(language.writtenLevel)) {
+      return false;
+    }
+
+    return true;
+  };
+
+  return (
+    <div styleName="container">
+      <div styleName="language-info">
+        <div styleName="language-icon">
+          <img src={languageIcon} alt="language" />
+        </div>
+        <div styleName={`language-parameters${hasOptions() ? '' : ' single-line'}`}>
+          <div styleName={`parameter-first-line${hasOptions() ? '' : ' single-line'}`}>
+            { language.language }
+          </div>
+          {
+            (!_.isEmpty(language.spokenLevel) || !_.isEmpty(language.writtenLevel)) && (
+              <div styleName="parameter-second-line">
+                {
+                  (!_.isEmpty(language.spokenLevel) && !_.isEmpty(language.writtenLevel)) && (`Spoken: ${language.spokenLevel.toUpperCase()} | Written: ${language.writtenLevel.toUpperCase()}`)
+                }
+                {
+                  (!_.isEmpty(language.spokenLevel) && _.isEmpty(language.writtenLevel)) && (`Spoken: ${language.spokenLevel.toUpperCase()}`)
+                }
+                {
+                  (_.isEmpty(language.spokenLevel) && !_.isEmpty(language.writtenLevel)) && (`Written: ${language.writtenLevel.toUpperCase()}`)
+                }
+              </div>
+            )
+          }
+          {
+            (!_.isEmpty(language.spokenLevel) || !_.isEmpty(language.writtenLevel)) && (
+              <div styleName="parameter-second-line-mobile">
+                {
+                  !_.isEmpty(language.spokenLevel) && (
+                    <p>
+                      {`Spoken: ${language.spokenLevel.toUpperCase()}`}
+                    </p>
+                  )
+                }
+                {
+                  !_.isEmpty(language.writtenLevel) && (
+                    <p>
+                      {`Written: ${language.writtenLevel.toUpperCase()}`}
+                    </p>
+                  )
+                }
+              </div>
+            )
+          }
+        </div>
+      </div>
+      <div styleName="operation-container">
+        <a
+          styleName="edit"
+          onKeyPress={() => onEditItem(index)}
+          tabIndex={0}
+          role="button"
+          onClick={() => onEditItem(index)}
+        >
+          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          <p>
+            Edit
+          </p>
+        </a>
+        <a
+          styleName="delete"
+          onKeyPress={() => onDeleteItem(index)}
+          tabIndex={0}
+          role="button"
+          onClick={() => onDeleteItem(index)}
+        >
+          <img src={assets('./ico-trash.svg')} alt="delete-icon" />
+          <p>
+            Delete
+          </p>
+        </a>
+      </div>
+    </div>
+  );
+}
+
+Item.propTypes = {
+  language: PT.shape().isRequired,
+  index: PT.number.isRequired,
+  onDeleteItem: PT.func.isRequired,
+  onEditItem: PT.func.isRequired,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss
new file mode 100644
index 0000000000..3f32306a30
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss
@@ -0,0 +1,155 @@
+@import "../../../../../style";
+
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-items: center;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+  border: 1px solid $tc-gray-10;
+  border-bottom: none;
+  background-color: $tc-white;
+}
+
+.language-info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.language-icon {
+  height: 49px;
+  width: 49px;
+  margin-right: 18px;
+}
+
+.language-parameters {
+  @include roboto-medium;
+
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  justify-content: left;
+  font-size: 15px;
+  line-height: 20px;
+  text-transform: capitalize;
+  margin-right: 20px;
+
+  @include upto-sm {
+    margin-right: 0;
+  }
+
+  &.single-line {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.parameter-first-line {
+  font-weight: 500;
+  color: $tc-black;
+  margin-bottom: 10px;
+  word-break: break-all;
+
+  &.single-line {
+    margin-bottom: 0;
+  }
+
+  @include upto-sm {
+    margin-bottom: 0;
+  }
+}
+
+.parameter-second-line {
+  color: $tc-gray-50;
+  font-weight: 400;
+
+  @include upto-sm {
+    display: none;
+  }
+}
+
+.parameter-second-line-mobile {
+  display: none;
+
+  @include upto-sm {
+    display: flex;
+    flex-direction: column;
+    color: $tc-gray-50;
+    font-weight: 400;
+  }
+}
+
+.operation-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .delete {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline-style: none;
+    margin-left: 10px;
+
+    img {
+      margin-bottom: 10px;
+      width: 20px;
+      height: 20px;
+
+      @include upto-sm {
+        margin-bottom: 0;
+      }
+    }
+
+    p {
+      @include roboto-regular;
+
+      font-size: 11px;
+      line-height: 15px;
+      font-weight: 400;
+      color: $tc-gray-50;
+
+      @include upto-sm {
+        display: none;
+      }
+    }
+  }
+
+  .edit {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline-style: none;
+    margin-left: 10px;
+
+    img {
+      margin-bottom: 10px;
+      width: 20px;
+      height: 20px;
+
+      @include upto-sm {
+        margin-bottom: 0;
+      }
+    }
+
+    p {
+      @include roboto-regular;
+
+      font-size: 11px;
+      line-height: 15px;
+      font-weight: 400;
+      color: $tc-gray-50;
+
+      @include upto-sm {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/index.jsx
new file mode 100644
index 0000000000..e9a2cc522a
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/index.jsx
@@ -0,0 +1,41 @@
+/**
+ * render Language list
+ */
+import React from 'react';
+import PT from 'prop-types';
+import Item from './Item';
+
+import './styles.scss';
+
+export default function LanguageList(props) {
+  const {
+    languageList,
+    onDeleteItem,
+    onEditItem,
+  } = props;
+
+  return (
+    <div styleName="container">
+      <ul>
+        {
+          languageList.items.map((language, index) => (
+            <li key={`${language.language}${index + 1}`}>
+              <Item
+                language={language}
+                index={index}
+                onDeleteItem={onDeleteItem}
+                onEditItem={onEditItem}
+              />
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+  );
+}
+
+LanguageList.propTypes = {
+  languageList: PT.shape().isRequired,
+  onDeleteItem: PT.func.isRequired,
+  onEditItem: PT.func.isRequired,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss
new file mode 100644
index 0000000000..7d1409c14e
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss
@@ -0,0 +1,30 @@
+@import "../../../../style";
+
+.container {
+  width: 100%;
+  background-color: $tc-white;
+  padding: 0;
+  margin-bottom: $margin-xxxxl;
+
+  // &.active {
+  //   margin-top: 20px;
+
+  //   @include upto-sm {
+  //     margin-top: 0;
+  //   }
+  // }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+
+    li {
+      min-height: 90px;
+    }
+
+    li:last-child {
+      border-bottom: 1px solid $tc-gray-10;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/dropdowns.json b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/dropdowns.json
new file mode 100644
index 0000000000..98fbe6c398
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/dropdowns.json
@@ -0,0 +1,782 @@
+{
+  "language": [
+    {
+      "key": "language",
+      "name": "Afar"
+    },
+    {
+      "key": "language",
+      "name": "Abkhazian"
+    },
+    {
+      "key": "language",
+      "name": "Avestan"
+    },
+    {
+      "key": "language",
+      "name": "Afrikaans"
+    },
+    {
+      "key": "language",
+      "name": "Akan"
+    },
+    {
+      "key": "language",
+      "name": "Amharic"
+    },
+    {
+      "key": "language",
+      "name": "Aragonese"
+    },
+    {
+      "key": "language",
+      "name": "Arabic"
+    },
+    {
+      "key": "language",
+      "name": "Assamese"
+    },
+    {
+      "key": "language",
+      "name": "Avaric"
+    },
+    {
+      "key": "language",
+      "name": "Aymara"
+    },
+    {
+      "key": "language",
+      "name": "Azerbaijani"
+    },
+    {
+      "key": "language",
+      "name": "Bashkir"
+    },
+    {
+      "key": "language",
+      "name": "Belarusian"
+    },
+    {
+      "key": "language",
+      "name": "Bulgarian"
+    },
+    {
+      "key": "language",
+      "name": "Bihari languages"
+    },
+    {
+      "key": "language",
+      "name": "Bislama"
+    },
+    {
+      "key": "language",
+      "name": "Bambara"
+    },
+    {
+      "key": "language",
+      "name": "Bengali"
+    },
+    {
+      "key": "language",
+      "name": "Tibetan"
+    },
+    {
+      "key": "language",
+      "name": "Breton"
+    },
+    {
+      "key": "language",
+      "name": "Bosnian"
+    },
+    {
+      "key": "language",
+      "name": "Catalan; Valencian"
+    },
+    {
+      "key": "language",
+      "name": "Chechen"
+    },
+    {
+      "key": "language",
+      "name": "Chamorro"
+    },
+    {
+      "key": "language",
+      "name": "Corsican"
+    },
+    {
+      "key": "language",
+      "name": "Cree"
+    },
+    {
+      "key": "language",
+      "name": "Czech"
+    },
+    {
+      "key": "language",
+      "name": "Church Slavic; Old Slavonic; Church Slavonic; Old Bulgarian; Old Church Slavonic"
+    },
+    {
+      "key": "language",
+      "name": "Chuvash"
+    },
+    {
+      "key": "language",
+      "name": "Welsh"
+    },
+    {
+      "key": "language",
+      "name": "Danish"
+    },
+    {
+      "key": "language",
+      "name": "German"
+    },
+    {
+      "key": "language",
+      "name": "Divehi; Dhivehi; Maldivian"
+    },
+    {
+      "key": "language",
+      "name": "Dzongkha"
+    },
+    {
+      "key": "language",
+      "name": "Ewe"
+    },
+    {
+      "key": "language",
+      "name": "\"Greek",
+      "field3": "Modern (1453-)\""
+    },
+    {
+      "key": "language",
+      "name": "English"
+    },
+    {
+      "key": "language",
+      "name": "Esperanto"
+    },
+    {
+      "key": "language",
+      "name": "Spanish; Castilian"
+    },
+    {
+      "key": "language",
+      "name": "Estonian"
+    },
+    {
+      "key": "language",
+      "name": "Basque"
+    },
+    {
+      "key": "language",
+      "name": "Persian"
+    },
+    {
+      "key": "language",
+      "name": "Fulah"
+    },
+    {
+      "key": "language",
+      "name": "Finnish"
+    },
+    {
+      "key": "language",
+      "name": "Fijian"
+    },
+    {
+      "key": "language",
+      "name": "Faroese"
+    },
+    {
+      "key": "language",
+      "name": "French"
+    },
+    {
+      "key": "language",
+      "name": "Western Frisian"
+    },
+    {
+      "key": "language",
+      "name": "Irish"
+    },
+    {
+      "key": "language",
+      "name": "Gaelic; Scottish Gaelic"
+    },
+    {
+      "key": "language",
+      "name": "Galician"
+    },
+    {
+      "key": "language",
+      "name": "Guarani"
+    },
+    {
+      "key": "language",
+      "name": "Gujarati"
+    },
+    {
+      "key": "language",
+      "name": "Manx"
+    },
+    {
+      "key": "language",
+      "name": "Hausa"
+    },
+    {
+      "key": "language",
+      "name": "Hebrew"
+    },
+    {
+      "key": "language",
+      "name": "Hindi"
+    },
+    {
+      "key": "language",
+      "name": "Hiri Motu"
+    },
+    {
+      "key": "language",
+      "name": "Croatian"
+    },
+    {
+      "key": "language",
+      "name": "Haitian; Haitian Creole"
+    },
+    {
+      "key": "language",
+      "name": "Hungarian"
+    },
+    {
+      "key": "language",
+      "name": "Armenian"
+    },
+    {
+      "key": "language",
+      "name": "Herero"
+    },
+    {
+      "key": "language",
+      "name": "Interlingua (International Auxiliary Language Association)"
+    },
+    {
+      "key": "language",
+      "name": "Indonesian"
+    },
+    {
+      "key": "language",
+      "name": "Interlingue; Occidental"
+    },
+    {
+      "key": "language",
+      "name": "Igbo"
+    },
+    {
+      "key": "language",
+      "name": "Sichuan Yi; Nuosu"
+    },
+    {
+      "key": "language",
+      "name": "Inupiaq"
+    },
+    {
+      "key": "language",
+      "name": "Ido"
+    },
+    {
+      "key": "language",
+      "name": "Icelandic"
+    },
+    {
+      "key": "language",
+      "name": "Italian"
+    },
+    {
+      "key": "language",
+      "name": "Inuktitut"
+    },
+    {
+      "key": "language",
+      "name": "Japanese"
+    },
+    {
+      "key": "language",
+      "name": "Javanese"
+    },
+    {
+      "key": "language",
+      "name": "Georgian"
+    },
+    {
+      "key": "language",
+      "name": "Kongo"
+    },
+    {
+      "key": "language",
+      "name": "Kikuyu; Gikuyu"
+    },
+    {
+      "key": "language",
+      "name": "Kuanyama; Kwanyama"
+    },
+    {
+      "key": "language",
+      "name": "Kazakh"
+    },
+    {
+      "key": "language",
+      "name": "Kalaallisut; Greenlandic"
+    },
+    {
+      "key": "language",
+      "name": "Central Khmer"
+    },
+    {
+      "key": "language",
+      "name": "Kannada"
+    },
+    {
+      "key": "language",
+      "name": "Korean"
+    },
+    {
+      "key": "language",
+      "name": "Kanuri"
+    },
+    {
+      "key": "language",
+      "name": "Kashmiri"
+    },
+    {
+      "key": "language",
+      "name": "Kurdish"
+    },
+    {
+      "key": "language",
+      "name": "Komi"
+    },
+    {
+      "key": "language",
+      "name": "Cornish"
+    },
+    {
+      "key": "language",
+      "name": "Kirghiz; Kyrgyz"
+    },
+    {
+      "key": "language",
+      "name": "Latin"
+    },
+    {
+      "key": "language",
+      "name": "Luxembourgish; Letzeburgesch"
+    },
+    {
+      "key": "language",
+      "name": "Ganda"
+    },
+    {
+      "key": "language",
+      "name": "Limburgan; Limburger; Limburgish"
+    },
+    {
+      "key": "language",
+      "name": "Lingala"
+    },
+    {
+      "key": "language",
+      "name": "Lao"
+    },
+    {
+      "key": "language",
+      "name": "Lithuanian"
+    },
+    {
+      "key": "language",
+      "name": "Luba-Katanga"
+    },
+    {
+      "key": "language",
+      "name": "Latvian"
+    },
+    {
+      "key": "language",
+      "name": "Malagasy"
+    },
+    {
+      "key": "language",
+      "name": "Marshallese"
+    },
+    {
+      "key": "language",
+      "name": "Maori"
+    },
+    {
+      "key": "language",
+      "name": "Macedonian"
+    },
+    {
+      "key": "language",
+      "name": "Malayalam"
+    },
+    {
+      "key": "language",
+      "name": "Mongolian"
+    },
+    {
+      "key": "language",
+      "name": "Marathi"
+    },
+    {
+      "key": "language",
+      "name": "Malay"
+    },
+    {
+      "key": "language",
+      "name": "Maltese"
+    },
+    {
+      "key": "language",
+      "name": "Burmese"
+    },
+    {
+      "key": "language",
+      "name": "Nauru"
+    },
+    {
+      "key": "language",
+      "name": "\"Bokmål",
+      "field3": "Norwegian; Norwegian Bokmål\""
+    },
+    {
+      "key": "language",
+      "name": "\"Ndebele",
+      "field3": "North; North Ndebele\""
+    },
+    {
+      "key": "language",
+      "name": "Nepali"
+    },
+    {
+      "key": "language",
+      "name": "Ndonga"
+    },
+    {
+      "key": "language",
+      "name": "Dutch; Flemish"
+    },
+    {
+      "key": "language",
+      "name": "\"Norwegian Nynorsk; Nynorsk",
+      "field3": "Norwegian\""
+    },
+    {
+      "key": "language",
+      "name": "Norwegian"
+    },
+    {
+      "key": "language",
+      "name": "\"Ndebele",
+      "field3": "South; South Ndebele\""
+    },
+    {
+      "key": "language",
+      "name": "Navajo; Navaho"
+    },
+    {
+      "key": "language",
+      "name": "Chichewa; Chewa; Nyanja"
+    },
+    {
+      "key": "language",
+      "name": "Occitan (post 1500); Provençal"
+    },
+    {
+      "key": "language",
+      "name": "Ojibwa"
+    },
+    {
+      "key": "language",
+      "name": "Oromo"
+    },
+    {
+      "key": "language",
+      "name": "Oriya"
+    },
+    {
+      "key": "language",
+      "name": "Ossetian; Ossetic"
+    },
+    {
+      "key": "language",
+      "name": "Panjabi; Punjabi"
+    },
+    {
+      "key": "language",
+      "name": "Pali"
+    },
+    {
+      "key": "language",
+      "name": "Polish"
+    },
+    {
+      "key": "language",
+      "name": "Pushto; Pashto"
+    },
+    {
+      "key": "language",
+      "name": "Portuguese"
+    },
+    {
+      "key": "language",
+      "name": "Quechua"
+    },
+    {
+      "key": "language",
+      "name": "Romansh"
+    },
+    {
+      "key": "language",
+      "name": "Rundi"
+    },
+    {
+      "key": "language",
+      "name": "Romanian; Moldavian; Moldovan"
+    },
+    {
+      "key": "language",
+      "name": "Russian"
+    },
+    {
+      "key": "language",
+      "name": "Kinyarwanda"
+    },
+    {
+      "key": "language",
+      "name": "Sanskrit"
+    },
+    {
+      "key": "language",
+      "name": "Sardinian"
+    },
+    {
+      "key": "language",
+      "name": "Sindhi"
+    },
+    {
+      "key": "language",
+      "name": "Northern Sami"
+    },
+    {
+      "key": "language",
+      "name": "Sango"
+    },
+    {
+      "key": "language",
+      "name": "Sinhala; Sinhalese"
+    },
+    {
+      "key": "language",
+      "name": "Slovak"
+    },
+    {
+      "key": "language",
+      "name": "Slovenian"
+    },
+    {
+      "key": "language",
+      "name": "Samoan"
+    },
+    {
+      "key": "language",
+      "name": "Shona"
+    },
+    {
+      "key": "language",
+      "name": "Somali"
+    },
+    {
+      "key": "language",
+      "name": "Albanian"
+    },
+    {
+      "key": "language",
+      "name": "Serbian"
+    },
+    {
+      "key": "language",
+      "name": "Swati"
+    },
+    {
+      "key": "language",
+      "name": "\"Sotho",
+      "field3": "Southern\""
+    },
+    {
+      "key": "language",
+      "name": "Sundanese"
+    },
+    {
+      "key": "language",
+      "name": "Swedish"
+    },
+    {
+      "key": "language",
+      "name": "Swahili"
+    },
+    {
+      "key": "language",
+      "name": "Tamil"
+    },
+    {
+      "key": "language",
+      "name": "Telugu"
+    },
+    {
+      "key": "language",
+      "name": "Tajik"
+    },
+    {
+      "key": "language",
+      "name": "Thai"
+    },
+    {
+      "key": "language",
+      "name": "Tigrinya"
+    },
+    {
+      "key": "language",
+      "name": "Turkmen"
+    },
+    {
+      "key": "language",
+      "name": "Tagalog"
+    },
+    {
+      "key": "language",
+      "name": "Tswana"
+    },
+    {
+      "key": "language",
+      "name": "Tonga (Tonga Islands)"
+    },
+    {
+      "key": "language",
+      "name": "Turkish"
+    },
+    {
+      "key": "language",
+      "name": "Tsonga"
+    },
+    {
+      "key": "language",
+      "name": "Tatar"
+    },
+    {
+      "key": "language",
+      "name": "Twi"
+    },
+    {
+      "key": "language",
+      "name": "Tahitian"
+    },
+    {
+      "key": "language",
+      "name": "Uighur; Uyghur"
+    },
+    {
+      "key": "language",
+      "name": "Ukrainian"
+    },
+    {
+      "key": "language",
+      "name": "Urdu"
+    },
+    {
+      "key": "language",
+      "name": "Uzbek"
+    },
+    {
+      "key": "language",
+      "name": "Venda"
+    },
+    {
+      "key": "language",
+      "name": "Vietnamese"
+    },
+    {
+      "key": "language",
+      "name": "Volapük"
+    },
+    {
+      "key": "language",
+      "name": "Walloon"
+    },
+    {
+      "key": "language",
+      "name": "Wolof"
+    },
+    {
+      "key": "language",
+      "name": "Xhosa"
+    },
+    {
+      "key": "language",
+      "name": "Yiddish"
+    },
+    {
+      "key": "language",
+      "name": "Yoruba"
+    },
+    {
+      "key": "language",
+      "name": "Zhuang; Chuang"
+    },
+    {
+      "key": "language",
+      "name": "Chinese"
+    },
+    {
+      "key": "language",
+      "name": "Zulu"
+    }
+  ],
+  "spokenLevel": [
+    {
+      "key": "spokenLevel",
+      "name": "Basic"
+    },
+    {
+      "key": "spokenLevel",
+      "name": "Intermediate"
+    },
+    {
+      "key": "spokenLevel",
+      "name": "Advanced"
+    },
+    {
+      "key": "spokenLevel",
+      "name": "Native"
+    }
+  ],
+  "writtenLevel": [
+    {
+      "key": "writtenLevel",
+      "name": "Basic"
+    },
+    {
+      "key": "writtenLevel",
+      "name": "Intermediate"
+    },
+    {
+      "key": "writtenLevel",
+      "name": "Advanced"
+    },
+    {
+      "key": "writtenLevel",
+      "name": "Native"
+    }
+  ]
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
new file mode 100644
index 0000000000..19e8bdbb1f
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
@@ -0,0 +1,477 @@
+/**
+ * Child component of Settings/Profile/ renders the
+ * 'Language' page.
+ */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-disable no-undef */
+/* eslint-disable react/jsx-boolean-value */
+import React from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import { PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit';
+import ConsentComponent from 'components/Settings/ConsentComponent';
+import ErrorMessage from 'components/Settings/ErrorMessage';
+import ConfirmationModal from 'components/Settings//ConfirmationModal';
+import FormField from 'components/Settings/FormField';
+import FormInputSelect from 'components/Settings/FormInputSelect';
+import AddItemIcon from 'assets/images/settings-add-item.svg';
+import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import LanguageList from './List';
+import dropdowns from './dropdowns.json';
+
+import styles from './styles.scss';
+
+
+export default class Languages extends ConsentComponent {
+  constructor(props) {
+    super(props);
+    this.onHandleDeleteLanguage = this.onHandleDeleteLanguage.bind(this);
+    this.onDeleteLanguage = this.onDeleteLanguage.bind(this);
+    this.onEditLanguage = this.onEditLanguage.bind(this);
+    this.onUpdateSelect = this.onUpdateSelect.bind(this);
+    this.loadLanguageTrait = this.loadLanguageTrait.bind(this);
+    this.onHandleAddLanguage = this.onHandleAddLanguage.bind(this);
+    this.onAddLanguage = this.onAddLanguage.bind(this);
+    this.onUpdateInput = this.onUpdateInput.bind(this);
+    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
+    this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
+
+    const { userTraits } = props;
+    this.state = {
+      formInvalid: false,
+      languageNameInvalid: false,
+      languageNameInvalidMsg: '',
+      languageTrait: this.loadLanguageTrait(userTraits),
+      personalizationTrait: this.loadPersonalizationTrait(userTraits),
+      newLanguage: {
+        language: '',
+        spokenLevel: '',
+        writtenLevel: '',
+      },
+      isEdit: false,
+      indexNo: null,
+      showConfirmation: false,
+      isSubmit: false,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const languageTrait = this.loadLanguageTrait(nextProps.userTraits);
+    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
+    this.setState({
+      languageTrait,
+      personalizationTrait,
+      formInvalid: false,
+      languageNameInvalid: false,
+      languageNameInvalidMsg: '',
+      newLanguage: {
+        language: '',
+        spokenLevel: '',
+        writtenLevel: '',
+      },
+      isSubmit: false,
+    });
+  }
+
+  /**
+   * Update input value
+   * @param e event
+   */
+  onUpdateInput(e) {
+    const { newLanguage: oldLanguage } = this.state;
+    const newLanguage = { ...oldLanguage };
+    newLanguage[e.target.name] = e.target.value.trim();
+    this.setState({ newLanguage, isSubmit: false });
+  }
+
+  onHandleDeleteLanguage(indexNo) {
+    this.setState({
+      showConfirmation: true,
+      indexNo,
+    });
+  }
+
+  /**
+   * Delete language by index
+   * @param indexNo the language index no
+   */
+  onDeleteLanguage(indexNo) {
+    const { languageTrait } = this.state;
+    const newLanguageTrait = { ...languageTrait };
+    newLanguageTrait.traits.data.splice(indexNo, 1);
+    this.setState({
+      languageTrait: newLanguageTrait,
+      isEdit: false,
+      formInvalid: false,
+      languageNameInvalid: false,
+      languageNameInvalidMsg: '',
+    });
+
+    const {
+      handle,
+      tokenV3,
+      updateUserTrait,
+      deleteUserTrait,
+    } = this.props;
+
+    if (newLanguageTrait.traits.data.length > 0) {
+      updateUserTrait(handle, 'languages', newLanguageTrait.traits.data, tokenV3);
+    } else {
+      deleteUserTrait(handle, 'languages', tokenV3);
+    }
+    this.setState({
+      showConfirmation: false,
+      indexNo: null,
+      isSubmit: false,
+    });
+  }
+
+  /**
+   * Edit language by index
+   * @param indexNo the language index no
+   */
+  onEditLanguage(indexNo) {
+    const { languageTrait } = this.state;
+    this.setState({
+      newLanguage: {
+        language: languageTrait.traits.data[indexNo].language,
+        spokenLevel: _.isEmpty(languageTrait.traits.data[indexNo].spokenLevel) ? '' : languageTrait.traits.data[indexNo].spokenLevel,
+        writtenLevel: _.isEmpty(languageTrait.traits.data[indexNo].writtenLevel) ? '' : languageTrait.traits.data[indexNo].writtenLevel,
+      },
+      isEdit: true,
+      indexNo,
+      formInvalid: false,
+      languageNameInvalid: false,
+      languageNameInvalidMsg: '',
+      isSubmit: false,
+    });
+  }
+
+  /**
+   * Check form fields value,
+   * Invalid value, can not save
+   */
+  onCheckFormValue() {
+    const {
+      languageTrait, newLanguage, isEdit, indexNo,
+    } = this.state;
+
+    let invalid = false;
+    let languageNameInvalid = false;
+    let languageNameInvalidMsg = '';
+
+    if (_.isEmpty(newLanguage.language.trim())) {
+      invalid = true;
+      languageNameInvalid = true;
+      languageNameInvalidMsg = 'Language cannot be empty';
+    }
+
+    if (isEdit) {
+      const result = _.filter(languageTrait.traits.data, (item, index) => (
+        item.language.toLowerCase() === newLanguage.language.toLowerCase() && index !== indexNo
+      ));
+
+      if (result && result.length > 0) {
+        invalid = true;
+        languageNameInvalid = true;
+        languageNameInvalidMsg = 'Language already added';
+      }
+    } else if (!_.isEmpty(languageTrait)) {
+      const result = _.filter(languageTrait.traits.data, item => (
+        item.language.toLowerCase() === newLanguage.language.toLowerCase()
+      ));
+
+      if (result && result.length > 0) {
+        invalid = true;
+        languageNameInvalid = true;
+        languageNameInvalidMsg = 'Language already added';
+      }
+    }
+
+    this.setState({
+      formInvalid: invalid,
+      languageNameInvalid,
+      languageNameInvalidMsg,
+    });
+    return invalid;
+  }
+
+  onHandleAddLanguage(e) {
+    if (e) e.preventDefault();
+    this.setState({ isSubmit: true });
+    if (this.onCheckFormValue()) {
+      return;
+    }
+    this.showConsent(this.onAddLanguage.bind(this));
+  }
+
+  /**
+   * Add new language
+   * @param e form submit event
+   * @param answer user consent answer value
+   */
+  onAddLanguage(answer) {
+    const {
+      newLanguage, personalizationTrait, isEdit, indexNo,
+    } = this.state;
+
+    const {
+      handle,
+      tokenV3,
+      updateUserTrait,
+      addUserTrait,
+    } = this.props;
+    const { languageTrait } = this.state;
+    const language = _.clone(newLanguage);
+    if (_.isEmpty(language.spokenLevel)) {
+      delete language.spokenLevel;
+    }
+    if (_.isEmpty(language.writtenLevel)) {
+      delete language.writtenLevel;
+    }
+    if (languageTrait.traits && languageTrait.traits.data.length > 0) {
+      const newLanguageTrait = _.cloneDeep(languageTrait);
+
+      if (isEdit) {
+        newLanguageTrait.traits.data.splice(indexNo, 1, language);
+      } else {
+        newLanguageTrait.traits.data.push(language);
+      }
+
+      updateUserTrait(handle, 'languages', newLanguageTrait.traits.data, tokenV3);
+    } else {
+      const newLanguages = [];
+      newLanguages.push(language);
+      addUserTrait(handle, 'languages', newLanguages, tokenV3);
+    }
+    const empty = {
+      language: '',
+      spokenLevel: '',
+      writtenLevel: '',
+    };
+    this.setState({
+      newLanguage: empty,
+      isEdit: false,
+      indexNo: null,
+      isSubmit: false,
+    });
+    // save personalization
+    if (_.isEmpty(personalizationTrait)) {
+      const personalizationData = { userConsent: answer };
+      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+    } else {
+      const trait = personalizationTrait.traits.data[0];
+      if (trait.userConsent !== answer) {
+        const personalizationData = { userConsent: answer };
+        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+      }
+    }
+  }
+
+  /**
+   * Update select value
+   * @param option selected value
+   */
+  onUpdateSelect(option) {
+    if (option) {
+      const { newLanguage: oldLanguage } = this.state;
+      const newLanguage = { ...oldLanguage };
+      newLanguage[option.key] = option.name;
+      this.setState({ newLanguage, isSubmit: false });
+    }
+  }
+
+  onCancelEditStatus() {
+    const { isEdit } = this.state;
+    if (isEdit) {
+      this.setState({
+        isEdit: false,
+        indexNo: null,
+        isSubmit: false,
+        formInvalid: false,
+        languageNameInvalid: false,
+        languageNameInvalidMsg: '',
+        newLanguage: {
+          language: '',
+          spokenLevel: '',
+          writtenLevel: '',
+        },
+      });
+    }
+  }
+
+  /**
+   * Get language trait
+   * @param userTraits the all user traits
+   */
+  loadLanguageTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'languages');
+    const languages = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, languages);
+  }
+
+  /**
+   * Get personalization trait
+   * @param userTraits the all user traits
+   */
+  loadPersonalizationTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'personalization');
+    const personalization = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, personalization);
+  };
+
+  render() {
+    const {
+      languageTrait,
+      isEdit,
+      formInvalid,
+      showConfirmation,
+      indexNo,
+      languageNameInvalid,
+      languageNameInvalidMsg,
+      isSubmit,
+    } = this.state;
+    const languageItems = languageTrait.traits
+      ? languageTrait.traits.data.slice() : [];
+    const { newLanguage } = this.state;
+
+    return (
+      <React.Fragment/*  styleName={containerStyle} */>
+        {
+          this.shouldRenderConsent() && this.renderConsent()
+        }
+        {
+          showConfirmation && (
+            <ConfirmationModal
+              onConfirm={() => this.showConsent(this.onDeleteLanguage.bind(this, indexNo))}
+              onCancel={() => this.setState({
+                showConfirmation: false,
+                indexNo: null,
+              })}
+              name={languageTrait.traits.data[indexNo].language}
+            />
+          )
+        }
+        <div styleName="form-container">
+          <Collapse>
+            <h2 styleName="form-title">
+              Language Skills
+            </h2>
+            <div styleName="form-content">
+              <div styleName="form-label">
+                Let customers know the langagues you speak.
+                Multilingual? Magnifique.
+              </div>
+              <div styleName="form-body">
+                <LanguageList
+                  languageList={{ items: languageItems }}
+                  onDeleteItem={this.onHandleDeleteLanguage}
+                  onEditItem={this.onEditLanguage}
+                />
+                <form styleName="language-form" noValidate autoComplete="off">
+                  <FormField label="Language *" style={{ flex: '0 0 100%' }}>
+                    <FormInputSelect
+                      name="language"
+                      options={dropdowns.language}
+                      value={newLanguage.language}
+                      onChange={this.onUpdateSelect}
+                      placeholder="Language"
+                      labelKey="name"
+                      valueKey="name"
+                      clearable={false}
+                    />
+                    { isSubmit && formInvalid && (
+                      <ErrorMessage
+                        invalid={languageNameInvalid}
+                        message={languageNameInvalidMsg}
+                        addMargin
+                      />
+                    )
+                    }
+                  </FormField>
+
+                  <FormField label="Spoken Level" style={{ flex: '0 0 100%' }}>
+                    <FormInputSelect
+                      name="spokenLevel"
+                      options={dropdowns.spokenLevel}
+                      value={newLanguage.spokenLevel}
+                      onChange={(option) => {
+                        if (option) {
+                          this.onUpdateSelect(option);
+                        } else {
+                          this.onUpdateSelect({ key: 'spokenLevel', name: '' });
+                        }
+                      }}
+                      placeholder="Level"
+                      labelKey="name"
+                      valueKey="name"
+                      clearable={false}
+                    />
+                  </FormField>
+
+                  <FormField label="Written Level" style={{ flex: '0 0 100%' }}>
+                    <FormInputSelect
+                      name="writtenLevel"
+                      options={dropdowns.writtenLevel}
+                      value={newLanguage.writtenLevel}
+                      onChange={(option) => {
+                        if (option) {
+                          this.onUpdateSelect(option);
+                        } else {
+                          this.onUpdateSelect({ key: 'writtenLevel', name: '' });
+                        }
+                      }}
+                      placeholder="Level"
+                      labelKey="name"
+                      valueKey="name"
+                      clearable={false}
+                    />
+                  </FormField>
+                </form>
+              </div>
+              <div styleName="form-footer">
+                {!isEdit && (
+                  <PrimaryButton
+                    theme={{ button: styles.button }}
+                    onClick={this.onHandleAddLanguage}
+                  >
+                    <AddItemIcon styleName="icon" /> Add language to your list
+                  </PrimaryButton>
+                )}
+
+                { isEdit && (
+                  <React.Fragment>
+                    <PrimaryButton
+                      theme={{ button: styles.button }}
+                      onClick={this.onHandleAddLanguage}
+                    >
+                      Edit language to your list
+                    </PrimaryButton>
+                    <SecondaryButton
+                      theme={{ button: styles.button }}
+                      onClick={this.onCancelEditStatus}
+                    >
+                      Cancel
+                    </SecondaryButton>
+                  </React.Fragment>
+                )}
+              </div>
+            </div>
+          </Collapse>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+Languages.propTypes = {
+  tokenV3: PT.string.isRequired,
+  handle: PT.string.isRequired,
+  userTraits: PT.array.isRequired,
+  addUserTrait: PT.func.isRequired,
+  updateUserTrait: PT.func.isRequired,
+  deleteUserTrait: PT.func.isRequired,
+  // settingsUI: PT.shape().isRequired,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss
new file mode 100644
index 0000000000..a9ea7de4d1
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss
@@ -0,0 +1,109 @@
+@import "~styles/mixins";
+
+.form-container {
+  padding: $pad-xxxxl;
+  background-color: $color-tc-white;
+  border-radius: 4px;
+
+  .language-form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.form-title {
+  @include barlow-semi-bold;
+
+  font-size: 20px;
+  line-height: 22px;
+  color: inherit;
+  text-transform: uppercase;
+  padding-bottom: $pad-xxxxl;
+}
+
+.form-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.form-label {
+  flex: 0 0 calc(50% - 13px);
+  padding-right: 230px;
+
+  @include roboto-regular;
+
+  font-size: 16px;
+  line-height: 26px;
+  color: inherit;
+}
+
+.form-body {
+  flex: 0 0 calc(50% + 13px);
+}
+
+.form-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-left: calc(50% - 13px);
+  padding: $pad-sm 0;
+  gap: 8px 36px;
+
+  .button {
+    @include roboto-bold;
+
+    font-size: 14px;
+    line-height: 22px;
+    color: $color-turq-160;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent !important;
+    border: none;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none !important;
+      color: lighten($color-turq-160, 5%);
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+
+    .icon {
+      margin-right: $margin-xs;
+    }
+  }
+}
+
+@include xs-to-md {
+  .form-container {
+    padding: $pad-xxl $pad-lg;
+  }
+
+  .form-title {
+    @include barlow-condensed-medium;
+
+    font-size: 22px;
+    line-height: 24px;
+    padding-bottom: $pad-xxl;
+  }
+
+  .form-label {
+    flex: 1 1 100%;
+    padding: 0;
+    margin-bottom: $margin-xxl;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .form-body {
+    flex: 1 1 100%;
+  }
+
+  .form-footer {
+    margin: 0;
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
new file mode 100644
index 0000000000..7bcb3b85f8
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
@@ -0,0 +1,210 @@
+import React from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import { Modal, PrimaryButton, GhostButton } from 'topcoder-react-ui-kit';
+import FormField from 'components/Settings/FormField';
+import FormInputSelect from 'components/Settings/FormInputSelect';
+import IconClose from 'assets/images/icon-close.svg';
+import RemoveTagIcon from 'assets/images/icon-x-cancel.svg';
+import styles from './styles.scss';
+
+const CATEGORIES = {
+  design: 'design',
+  develop: 'develop',
+  data_science: 'data_science',
+  qa: 'qa',
+};
+
+export default function AddSkillsModal({
+  allSkills,
+  disabled,
+  category: intialCategory,
+  editingSkills,
+  lookupSkills,
+  userSkills,
+  onClose,
+  onSave,
+  setEditingSkills,
+}) {
+  const [tempStr, setTempStr] = React.useState('');
+  const [tab, setTab] = React.useState(intialCategory);
+  const [displayingSkills, setDisplayingSkills] = React.useState([]);
+  const category = tab;
+
+  // onInit
+  React.useEffect(() => {
+    setEditingSkills([...userSkills]);
+    setDisplayingSkills([...userSkills]);
+  }, [userSkills]);
+
+  const find = (arr, i) => arr && arr.indexOf(i) !== -1;
+  const findSkill = (arr, skill) => arr && arr.find(a => a.id === skill.id);
+
+  const popularSkills = React.useMemo(() => allSkills
+    .filter(skill => find(skill.categories, category))
+    .slice(0, 10)
+    .map(skill => _.cloneDeep(({ ...skill, isPopularSkill: true }))),
+  [allSkills, category]);
+
+  const handleSkillSelect = (skill) => {
+    setEditingSkills([...editingSkills, skill]);
+  };
+  const handleSkillUnselect = (skill) => {
+    setEditingSkills(editingSkills.filter(i => i.id !== skill.id));
+  };
+  const toggleSkillSelection = (skill) => {
+    if (findSkill(editingSkills, skill)) {
+      handleSkillUnselect(skill);
+    } else {
+      handleSkillSelect(skill);
+    }
+  };
+  const updateDisplayingSkills = (skill) => {
+    if (!findSkill(displayingSkills, skill)) {
+      setDisplayingSkills([...displayingSkills, skill]);
+    }
+  };
+
+  const allDisplayingSkills = displayingSkills;
+  popularSkills.forEach((skill) => {
+    if (!findSkill(displayingSkills, skill)) {
+      allDisplayingSkills.push(skill);
+    }
+  });
+
+  const lookupSkillsOptions = lookupSkills
+    .filter(skill => !findSkill(allDisplayingSkills, skill))
+    .filter(skill => find(skill.categories, category));
+
+  const skillList = allDisplayingSkills.map((skill) => {
+    const isOtherCategorySkill = s => !find(s.categories, category);
+    if (isOtherCategorySkill(skill)) {
+      return null;
+    }
+
+    const selected = findSkill(editingSkills, skill);
+    return (
+      <li key={skill.id} styleName={`skillListItem non-removable ${selected ? 'selected' : ''}`}>
+        <span
+          role="button"
+          onClick={() => !selected && toggleSkillSelection(skill)}
+          tabIndex={0}
+          onKeyDown={() => {}}
+        >
+          {_.truncate(skill.name, { length: 18, separator: ' ' })}
+        </span>
+        <span
+          role="button"
+          onClick={() => selected && toggleSkillSelection(skill)}
+          styleName="close"
+          tabIndex={0}
+          onKeyDown={() => {}}
+        >
+          <RemoveTagIcon />
+        </span>
+      </li>
+    );
+  });
+
+  const getTabName = (tabname) => {
+    if (tabname === CATEGORIES.design) return 'Design / UX';
+    if (tabname === CATEGORIES.develop) return 'Development';
+    if (tabname === CATEGORIES.data_science) return 'Data Science';
+    if (tabname === CATEGORIES.qa) return 'QA';
+    return '';
+  };
+
+  return (
+    <Modal theme={{ container: styles.modal, overlay: styles['modal-overlay'] }}>
+      <div styleName="modal-content">
+        <h3 styleName="modal-header">
+          Add Skills
+          <GhostButton theme={{ button: styles.close }} onClick={onClose}>
+            <IconClose />
+          </GhostButton>
+        </h3>
+        <div styleName="modal-body">
+          <nav styleName="tabs">
+            <ul>
+              <li
+                styleName={tab === CATEGORIES.design ? 'active' : ''}
+                role="presentation"
+                onClick={() => setTab(CATEGORIES.design)}
+                onKeyDown={() => {}}
+              >
+                { getTabName(CATEGORIES.design) }
+              </li>
+              <li
+                styleName={tab === CATEGORIES.develop ? 'active' : ''}
+                role="presentation"
+                onClick={() => setTab(CATEGORIES.develop)}
+                onKeyDown={() => {}}
+              >
+                { getTabName(CATEGORIES.develop) }
+              </li>
+              <li
+                styleName={tab === CATEGORIES.data_science ? 'active' : ''}
+                role="presentation"
+                onClick={() => setTab(CATEGORIES.data_science)}
+                onKeyDown={() => {}}
+              >
+                { getTabName(CATEGORIES.data_science) }
+              </li>
+              <li
+                styleName={tab === CATEGORIES.qa ? 'active' : ''}
+                role="presentation"
+                onClick={() => setTab(CATEGORIES.qa)}
+                onKeyDown={() => {}}
+              >
+                { getTabName(CATEGORIES.qa) }
+              </li>
+            </ul>
+          </nav>
+          <div styleName="tabContent">
+            <h4 styleName="title">Select {getTabName(tab)} Skills</h4>
+
+            <FormField label="Skill">
+              <FormInputSelect
+                options={lookupSkillsOptions}
+                onChange={(skill) => {
+                  handleSkillSelect(skill);
+                  setTempStr(skill.name);
+                  updateDisplayingSkills(skill);
+                }}
+                matchPos="any"
+                matchProp="name"
+                labelKey="name"
+                valueKey="name"
+                placeholder="Add new skill"
+                clearable={false}
+                disabled={disabled}
+                value={tempStr}
+              />
+            </FormField>
+
+            <ul styleName="skillList">
+              {skillList}
+            </ul>
+          </div>
+        </div>
+        <div styleName="modal-footer">
+          <PrimaryButton theme={{ button: styles['button-save'] }} onClick={onSave} disabled={disabled}>
+            Save
+          </PrimaryButton>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+AddSkillsModal.propTypes = {
+  allSkills: PT.arrayOf(PT.shape()).isRequired,
+  disabled: PT.bool.isRequired,
+  category: PT.string.isRequired,
+  editingSkills: PT.arrayOf(PT.shape()).isRequired,
+  lookupSkills: PT.arrayOf(PT.shape()).isRequired,
+  userSkills: PT.arrayOf(PT.shape()).isRequired,
+  onClose: PT.func.isRequired,
+  onSave: PT.func.isRequired,
+  setEditingSkills: PT.func.isRequired,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss
new file mode 100644
index 0000000000..ad1e4a41f3
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss
@@ -0,0 +1,249 @@
+@import "~styles/mixins";
+
+.modal-overlay {
+  background-color: rgba($color-tc-black, 0.85);
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  border-radius: 8px;
+  overflow-y: auto;
+  background: none;
+  top: 0;
+  left: 0;
+  transform: none;
+
+  .close {
+    padding: 0;
+    margin: 0 0 0 auto;
+    min-height: 0;
+  }
+}
+
+.modal-content {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+  color: $color-black-100;
+  max-width: 794px;
+  background-color: $color-tc-white;
+  border-radius: 8px;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  margin: 32px 0;
+}
+
+.modal-header {
+  @include barlow-condensed-medium;
+
+  font-size: 34px;
+  line-height: 32px;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  padding: $pad-xxxl $pad-xxxxl $pad-xxxxl;
+  border-radius: 8px 8px 0 0;
+}
+
+.modal-body {
+  flex: auto;
+  display: flex;
+  padding: 0 $pad-xxxxl;
+}
+
+.modal-footer {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-end;
+  padding: $pad-xxxxl 0;
+  margin: $margin-xxxl $margin-xxxxl 0;
+  border-top: 2px solid $color-black-10;
+  border-radius: 0 0 8px 8px;
+
+  @include xs-to-md {
+    padding: $pad-lg;
+    margin: 0 $margin-lg 0;
+  }
+}
+
+@include xs-to-md {
+  .modal {
+    padding: 0;
+    overflow-y: auto;
+    height: 100%;
+    max-height: 100%;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    z-index: 999999;
+  }
+
+  .modal-content {
+    min-height: 568px;
+    margin: 0;
+    border-radius: 0;
+  }
+
+  .modal-header {
+    @include barlow-semi-bold;
+
+    font-size: 16px;
+    line-height: 20px;
+    padding: $pad-lg;
+    border-radius: 0;
+  }
+
+  .modal-body {
+    padding: 0 $pad-lg;
+    flex-direction: column;
+  }
+
+  .modal-footer {
+    padding: $pad-lg;
+    margin: 0 $margin-lg 0;
+    border-radius: 0;
+  }
+}
+
+.tabs {
+  border-right: 2px solid $color-black-10;
+
+  li {
+    @include roboto-regular;
+
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: 0.5px;
+    color: $color-black-80;
+    padding: $pad-sm $pad-xxxxl $pad-sm 0;
+    margin-top: -$margin-sm;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &.active,
+    &:hover {
+      color: $color-turq-160;
+    }
+  }
+}
+
+.tabContent {
+  flex: 0 0 auto;
+  padding-left: $pad-xxxxl;
+  width: calc(100% - 134px);
+
+  .title {
+    @include barlow-semi-bold;
+
+    font-size: 20px;
+    line-height: 20px;
+    color: inherit;
+    margin-bottom: $margin-xxl;
+  }
+}
+
+@include xs-to-md {
+  .tabs {
+    border: none;
+  }
+
+  .tabContent {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: $pad-lg 0 0;
+    margin: $margin-sm 0 0;
+    border-top: 2px solid $color-black-10;
+
+    .title {
+      font-size: 16px;
+      line-height: 20px;
+      margin-bottom: margin-lg;
+    }
+  }
+}
+
+.skillList {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 8px 4px;
+  min-height: 152px;
+
+  @include xs-to-md {
+    flex: 1 1 auto;
+    height: calc(100vh - 386px);
+    overflow-y: auto;
+  }
+}
+
+.skillListItem {
+  @include roboto-regular;
+
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  color: $color-tc-white;
+  text-transform: capitalize;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: $pad-xs $pad-sm;
+  background-color: $color-teal-140;
+  border: 1px solid $color-teal-140;
+  border-radius: 4px;
+  cursor: default;
+
+  .close {
+    cursor: pointer;
+
+    svg {
+      display: block;
+    }
+  }
+
+  &.non-removable {
+    color: $color-black-100;
+    background-color: $color-tc-white;
+
+    .close {
+      display: none;
+    }
+
+    &.selected {
+      color: $color-tc-white;
+      background-color: $color-teal-140;
+
+      .close {
+        display: block;
+      }
+    }
+  }
+}
+
+.button-save {
+  @include roboto-bold;
+
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  border-radius: 50px !important;
+  background: $color-turq-160 !important;
+  color: $color-tc-white !important;
+  text-transform: uppercase;
+
+  @include xs-to-md {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx
new file mode 100644
index 0000000000..42238bafb9
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx
@@ -0,0 +1,445 @@
+/**
+ * Child component of Settings/Profile renders "Skills" section of profile setting page.
+ */
+
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
+import ConsentComponent from 'components/Settings/ConsentComponent';
+
+import VerifiedBadgeIcon from 'assets/images/verified-skill-badge-green.svg';
+import ConfirmationModal from 'components/Settings/ConfirmationModal';
+import AddItemIcon from 'assets/images/settings-add-item.svg';
+import RemoveTagIcon from 'assets/images/icon-x-cancel.svg';
+import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import AddSkillsModal from './AddSkillsModal';
+
+import styles from './styles.scss';
+
+
+export default class Skills extends ConsentComponent {
+  constructor(props) {
+    super(props);
+    this.onHandleAddSkill = this.onHandleAddSkill.bind(this);
+    this.onHandleDeleteSkills = this.onHandleDeleteSkills.bind(this);
+    this.onAddSkill = this.onAddSkill.bind(this);
+    this.toggleSkill = this.toggleSkill.bind(this);
+    this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
+    this.lastValidInputPosition = 0;
+    this.setEditingSkills = this.setEditingSkills.bind(this);
+    this.onModalClose = this.onModalClose.bind(this);
+    this.onModalSave = this.onModalSave.bind(this);
+
+    const { userTraits } = props;
+    this.state = {
+      personalizationTrait: this.loadPersonalizationTrait(userTraits),
+      userSkills: [],
+      editingSkills: [],
+      newSkill: {
+        design: [],
+        develop: [],
+        data_science: [],
+        qa: [],
+      },
+      skillsToDelete: null,
+      showConfirmation: false,
+      showAddSkillsModal: null,
+    };
+  }
+
+  componentWillMount() {
+    this.processUserSkills(this.props);
+  }
+
+  componentDidUpdate() {
+    this.removeHover();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const personalizationTrait = this.loadPersonalizationTrait(nextProps.userTraits);
+    this.setState({
+      personalizationTrait,
+      userSkills: [],
+      editingSkills: [],
+      newSkill: {
+        design: [],
+        develop: [],
+        data_science: [],
+        qa: [],
+      },
+      showAddSkillsModal: false,
+    });
+
+    this.processUserSkills(nextProps);
+  }
+
+  /**
+   * Show User Consent Modal
+   * @param e event
+   */
+  onHandleAddSkill(selectedSkill) {
+    this.showConsent(this.onAddSkill.bind(this, selectedSkill));
+  }
+
+  setEditingSkills(updatedEdittingSkills) {
+    this.setState({
+      editingSkills: updatedEdittingSkills,
+    });
+  }
+
+  /**
+   * Add new skill
+   * @param answer user consent answer value
+   */
+  onAddSkill(selectedSkill, answer) {
+    const { newSkill, personalizationTrait } = this.state;
+    const {
+      handle,
+      tokenV3,
+      addUserSkill,
+      addUserTrait,
+      updateUserTrait,
+    } = this.props;
+
+    let category = '';
+    switch (selectedSkill.categories[0]) {
+      case 'develop':
+        category = 'develop';
+        break;
+      case 'data_science':
+        category = 'data_science';
+        break;
+      case 'design':
+        category = 'design';
+        break;
+      case 'qa':
+        category = 'qa';
+        break;
+      default:
+        category = 'design';
+        break;
+    }
+
+    const index = _.findIndex(newSkill[category], skill => (
+      skill.name.toLowerCase() === selectedSkill.name.toLowerCase()
+    ));
+
+    if (index > -1) {
+      return;
+    }
+
+    newSkill[category].push(selectedSkill);
+    addUserSkill(handle, selectedSkill, tokenV3);
+    // save personalization
+    if (_.isEmpty(personalizationTrait)) {
+      const personalizationData = { userConsent: answer };
+      addUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+    } else {
+      const trait = personalizationTrait.traits.data[0];
+      if (trait.userConsent !== answer) {
+        const personalizationData = { userConsent: answer };
+        updateUserTrait(handle, 'personalization', [personalizationData], tokenV3);
+      }
+    }
+  }
+
+  onHandleDeleteSkills(skill) {
+    const skillsToDelete = Array.isArray(skill) ? skill : [skill];
+    this.setState({
+      showConfirmation: true,
+      skillsToDelete,
+    });
+  }
+
+  /**
+   * Get personalization trait
+   * @param userTraits the all user traits
+   */
+  loadPersonalizationTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'personalization');
+    const personalization = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, personalization);
+  }
+
+  /**
+   * Process user skills
+   */
+  processUserSkills = (props) => {
+    const { lookupData, skills } = props;
+
+    // All lookup skills
+    const lookupSkills = lookupData.skillTags || [];
+
+    // Construct user skills
+    const filterUserSkills = [];
+
+    const arraySkill = _.map(skills, (skill, tagId) => ({ tagId: Number(tagId), ...skill }));
+    const design = [];
+    const develop = [];
+    const dataScience = [];
+    const qa = [];
+    if (arraySkill.length > 0) {
+      for (let i = 0; i < arraySkill.length; i += 1) {
+        const result = _.filter(lookupSkills, skill => (
+          skill.id === arraySkill[i].tagId
+        ));
+        if (result && result.length > 0) {
+          result[0].sources = arraySkill[i].sources;
+          filterUserSkills.push(result[0]);
+          if (_.some(result[0].categories, category => category.toLowerCase() === 'design')) {
+            design.push(result[0]);
+          }
+          if (_.some(result[0].categories, category => category.toLowerCase() === 'develop')) {
+            develop.push(result[0]);
+          }
+          if (_.some(result[0].categories, category => category.toLowerCase() === 'data_science')) {
+            dataScience.push(result[0]);
+          }
+          if (_.some(result[0].categories, category => category.toLowerCase() === 'qa')) {
+            qa.push(result[0]);
+          }
+        }
+      }
+
+      const { newSkill } = this.state;
+      newSkill.design = design.length > 0 ? design.slice() : [];
+      newSkill.develop = develop.length > 0 ? develop.slice() : [];
+      newSkill.data_science = dataScience.length > 0 ? dataScience.slice() : [];
+      newSkill.qa = qa.length > 0 ? qa.slice() : [];
+
+      this.setState({ newSkill, userSkills: filterUserSkills });
+    }
+  }
+
+  removeHover = () => {
+    setTimeout(() => {
+      const btn = document.querySelector('a:hover');
+      if (btn) {
+        const par = btn.parentNode;
+        const next = btn.nextSibling;
+        par.removeChild(btn);
+        setTimeout(() => { par.insertBefore(btn, next); }, 0);
+      }
+    }, 100);
+  }
+
+  /**
+   * Toggle Skill to delete selected skill
+   */
+  toggleSkill = (skillsToDelete/* , consentAnswer */) => {
+    const { newSkill } = this.state;
+    const {
+      handle,
+      tokenV3,
+      deleteUserSkill,
+    } = this.props;
+
+    skillsToDelete.forEach((skill) => {
+      let category = '';
+      switch (skill.categories[0]) {
+        case 'develop':
+          category = 'develop';
+          break;
+        case 'data_science':
+          category = 'data_science';
+          break;
+        case 'design':
+          category = 'design';
+          break;
+        case 'qa':
+          category = 'qa';
+          break;
+        default:
+          category = 'design';
+          break;
+      }
+      const result = _.remove(newSkill[category], item => (
+        item.name.toLowerCase() !== skill.name.toLowerCase()
+      ));
+      newSkill[category] = result.length > 0 ? result.slice() : [];
+      deleteUserSkill(handle, skill, tokenV3);
+    });
+
+    this.setState({
+      skillsToDelete: null,
+      showConfirmation: false,
+    });
+  };
+
+  onModalClose() {
+    this.setState({ showAddSkillsModal: null });
+  }
+
+  onModalSave() {
+    this.onModalClose();
+
+    const { userSkills, editingSkills } = this.state;
+
+    const diffAdd = (target, source) => target.filter(t => !source.find(s => s.id === t.id));
+    const diffRemove = (target, source) => source.filter(s => !target.find(t => t.id === s.id));
+
+    const toAdd = diffAdd(editingSkills, userSkills);
+    const toRemove = diffRemove(editingSkills, userSkills);
+
+    toAdd.forEach(skill => this.onAddSkill(skill));
+    if (toRemove.length) {
+      this.onHandleDeleteSkills(toRemove);
+    }
+  }
+
+  render() {
+    const {
+      lookupData,
+    } = this.props;
+
+    const {
+      userSkills,
+      showConfirmation,
+      skillsToDelete,
+      editingSkills,
+      showAddSkillsModal,
+    } = this.state;
+
+    const canModifyTrait = !this.props.traitRequestCount;
+    // All lookup skills
+    const allSkills = lookupData.skillTags ? lookupData.skillTags : [];
+    let list = userSkills;
+    list = _.orderBy(list, [skill => skill.name.toLowerCase()], ['asc']); // Use Lodash to sort array by 'name'
+
+    // // filter out already added skills
+    const lookupSkills = _.sortBy(
+      _.filter(allSkills, skill => _.findIndex(userSkills, l => l.id === skill.id) === -1),
+      s => s.name,
+    );
+
+    const skillList = (
+      <ul styleName="skillList">
+        {
+          _.map(list, skill => (
+            <li key={skill.id} styleName="skillListItem">
+              {_.includes(skill.sources, 'CHALLENGE') && <VerifiedBadgeIcon styleName="verified-badge" /> }
+              {_.truncate(skill.name, { length: 18, separator: ' ' })}
+              <a
+                id={`skill-a-${skill.id}`}
+                role="link"
+                onClick={(e) => {
+                  e.preventDefault();
+                  this.onHandleDeleteSkills(skill);
+                }}
+                styleName="close"
+                tabIndex={0}
+                onKeyDown={() => {}}
+              >
+                <RemoveTagIcon />
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    );
+
+    return (
+      <React.Fragment>
+        {
+          this.shouldRenderConsent() && this.renderConsent()
+        }
+        {
+          showConfirmation && (
+            <ConfirmationModal
+              onConfirm={() => this.showConsent(this.toggleSkill
+                .bind(this, skillsToDelete))}
+              onCancel={() => this.setState({
+                showConfirmation: false,
+                skillsToDelete: null,
+              })}
+              name={skillsToDelete.map(s => s.name).join(', ')}
+            />
+          )
+        }
+        { showAddSkillsModal && (
+          <AddSkillsModal
+            allSkills={allSkills}
+            lookupSkills={lookupSkills}
+            userSkills={userSkills}
+            disabled={!canModifyTrait}
+            setEditingSkills={this.setEditingSkills}
+            editingSkills={editingSkills}
+            category={showAddSkillsModal}
+            onClose={this.onModalClose}
+            onSave={this.onModalSave}
+          />
+        )}
+
+        <div styleName="form-container">
+          <Collapse>
+            <h2 styleName="form-title">
+              Add your skills
+            </h2>
+
+            <div styleName="form-content">
+              <div styleName="form-label">
+                Add skills to your profile. You can add or update your skills any time.
+              </div>
+
+              <div styleName="form-body">
+                {skillList}
+              </div>
+
+              <div styleName="form-footer">
+                <PrimaryButton
+                  onClick={() => this.setState({ showAddSkillsModal: 'design' })}
+                  disabled={!canModifyTrait}
+                  theme={{ button: styles['button-add'] }}
+                >
+                  <AddItemIcon styleName="icon" /> Add Design / UX Skills
+                </PrimaryButton>
+
+                <PrimaryButton
+                  onClick={() => this.setState({ showAddSkillsModal: 'develop' })}
+                  disabled={!canModifyTrait}
+                  theme={{ button: styles['button-add'] }}
+                >
+                  <AddItemIcon styleName="icon" /> Add Developer Skills
+                </PrimaryButton>
+
+                <PrimaryButton
+                  onClick={() => this.setState({ showAddSkillsModal: 'data_science' })}
+                  disabled={!canModifyTrait}
+                  theme={{ button: styles['button-add'] }}
+                >
+                  <AddItemIcon styleName="icon" /> Add Data Science Skills
+                </PrimaryButton>
+
+                <PrimaryButton
+                  onClick={() => this.setState({ showAddSkillsModal: 'qa' })}
+                  disabled={!canModifyTrait}
+                  theme={{ button: styles['button-add'] }}
+                >
+                  <AddItemIcon styleName="icon" /> Add QA Skills
+                </PrimaryButton>
+              </div>
+            </div>
+          </Collapse>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+Skills.defaultProps = {
+  skills: {},
+};
+
+Skills.propTypes = {
+  handle: PT.string.isRequired,
+  tokenV3: PT.string.isRequired,
+  lookupData: PT.shape().isRequired,
+  addUserSkill: PT.func.isRequired,
+  deleteUserSkill: PT.func.isRequired,
+  /* eslint-disable react/no-unused-prop-types */
+  skills: PT.shape(),
+  userTraits: PT.array.isRequired,
+  traitRequestCount: PT.number.isRequired,
+  updateUserTrait: PT.func.isRequired,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss
new file mode 100644
index 0000000000..7ef85b7b48
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss
@@ -0,0 +1,164 @@
+@import "~styles/mixins";
+
+.skillList {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-items: flex-start;
+  gap: 8px 4px;
+  margin-bottom: $margin-lg;
+}
+
+.skillListItem {
+  @include roboto-medium;
+
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: 0.5px;
+  color: $color-tc-white;
+  text-transform: capitalize;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: ($pad-xs - 1px) ($pad-sm - 1px);
+  background-color: $color-teal-140;
+  border: 1px solid $color-teal-140;
+  border-radius: 4px;
+  cursor: default;
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    svg {
+      width: 16px;
+      height: 16px;
+      display: block;
+    }
+  }
+
+  .verified-badge {
+    margin-right: $margin-xs;
+  }
+}
+
+.form-container {
+  padding: $pad-xxxxl;
+  margin: $margin-sm 0 0;
+  background-color: $color-tc-white;
+}
+
+.form-title {
+  @include barlow-semi-bold;
+
+  font-size: 20px;
+  line-height: 22px;
+  color: inherit;
+  text-transform: uppercase;
+  padding-bottom: $pad-xxxxl;
+}
+
+.form-content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $pad-xxxxl 0 0;
+  border-top: 2px solid $color-black-10;
+}
+
+.form-label {
+  flex: 0 0 calc(50% - 13px);
+  padding-right: 48px;
+
+  @include roboto-regular;
+
+  font-size: 16px;
+  line-height: 26px;
+  color: inherit;
+}
+
+.form-body {
+  flex: 0 0 calc(50% + 13px);
+}
+
+.form-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin-left: calc(50% - 13px);
+  padding: $pad-sm 0;
+  gap: $margin-sm 40px;
+
+  .button-add {
+    @include roboto-bold;
+
+    font-size: 14px;
+    line-height: 22px;
+    color: $color-turq-160;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent !important;
+    border: none;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none !important;
+      color: lighten($color-turq-160, 5%);
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+
+    .icon {
+      margin-right: $margin-xs;
+    }
+  }
+}
+
+@include xs-to-md {
+  .form-container {
+    padding: $pad-xxl $pad-lg;
+  }
+
+  .form-title {
+    @include barlow-condensed-medium;
+
+    font-size: 22px;
+    line-height: 24px;
+    padding-bottom: $pad-xxl;
+  }
+
+  .form-content {
+    padding: $pad-xxl 0 0;
+  }
+
+  .form-label {
+    flex: 1 1 100%;
+    padding: 0;
+    margin-bottom: $margin-xxl;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .form-body {
+    flex: 1 1 100%;
+  }
+
+  .form-footer {
+    padding: 0;
+    margin: 0;
+    gap: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .button-add {
+      padding: $pad-sm 0;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/index.jsx
new file mode 100644
index 0000000000..1290989e85
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/index.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Interests from './Interests';
+import Languages from './Languages';
+import Skills from './Skills';
+
+import './styles.scss';
+
+export default class WorkSkills extends React.Component {
+  constructor(props) {
+    super(props);
+    this.interestsRef = React.createRef();
+    this.languagesRef = React.createRef();
+    this.skillsRef = React.createRef();
+  }
+
+  render() {
+    return (
+      <div styleName="workSkills">
+        <h2 styleName="title">Skills</h2>
+        <Languages
+          {...this.props}
+          ref={this.languagesRef}
+        />
+        <Interests
+          {...this.props}
+          ref={this.interestsRef}
+        />
+        <Skills
+          {...this.props}
+          ref={this.skillsRef}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/styles.scss
new file mode 100644
index 0000000000..04e4ac42ef
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/styles.scss
@@ -0,0 +1,33 @@
+@import "~styles/mixins";
+
+.workSkills {
+  padding: $pad-xxxxl;
+  margin: $margin-xxxxl 0;
+  background-color: $color-black-5;
+  border-radius: 8px;
+
+  .title {
+    @include barlow-semi-bold;
+
+    font-size: 20px;
+    line-height: 22px;
+    color: inherit;
+    padding-bottom: 40px;
+    text-transform: uppercase;
+  }
+}
+
+@include xs-to-md {
+  .workSkills {
+    padding: $pad-xxl $pad-lg;
+    margin: $margin-xxl 0;
+
+    .title {
+      @include barlow-condensed-medium;
+
+      font-size: 27px;
+      line-height: 28px;
+      padding: 0 0 $pad-lg;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/ExperienceAndSkills/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/index.jsx
new file mode 100644
index 0000000000..6dfcd544ee
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/index.jsx
@@ -0,0 +1,121 @@
+/* eslint-disable prefer-destructuring */
+import React from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
+import WorkExperience from './WorkExperience';
+import WorkSkills from './WorkSkills';
+import ErrorWrapper from '../ErrorWrapper';
+
+import styles from './styles.scss';
+
+export default class ExperienceAndSkills extends React.Component {
+  constructor(props) {
+    super(props);
+    this.save = this.save.bind(this);
+    this.workExperienceRef = React.createRef();
+    this.workSkillsRef = React.createRef();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { isSaving, setIsSaving } = this.props;
+    if (isSaving && nextProps.userTraits) {
+      setIsSaving(false);
+    }
+  }
+
+  save() {
+    const { isSaving, setIsSaving } = this.props;
+    if (isSaving) {
+      return;
+    }
+
+    const newWork = this.workExperienceRef.current.state.newWork;
+    const newWorkDirty = newWork.company !== ''
+      || newWork.position !== ''
+      || newWork.cityTown !== ''
+      || newWork.timePeriodFrom !== ''
+      || newWork.timePeriodTo !== ''
+      || newWork.industry !== ''
+      || newWork.working;
+
+    const newLanguage = this.workSkillsRef.current.languagesRef.current.state.newLanguage;
+    const newLanguageDirty = newLanguage.language !== ''
+      || newLanguage.spokenLevel !== ''
+      || newLanguage.writtenLevel !== '';
+
+    const interestData = this.workSkillsRef.current.interestsRef.current.state.interestData;
+    const previousInterestData = this.workSkillsRef.current.interestsRef.current
+      .previousInterestData;
+    const interestDataDirty = previousInterestData
+      && !_.isEqual(interestData, previousInterestData);
+
+    let valid = true;
+    let dirty;
+
+    if (newWorkDirty) {
+      valid = valid && !this.workExperienceRef.current.onCheckFormValue(newWork);
+      dirty = true;
+    }
+
+    if (newLanguageDirty) {
+      valid = valid && !this.workSkillsRef.current.languagesRef.current
+        .onCheckFormValue(newLanguage);
+      dirty = true;
+    }
+
+    if (interestDataDirty) {
+      valid = valid && true;
+      dirty = true;
+    }
+
+    if (newWorkDirty) this.workExperienceRef.current.onHandleAddWork();
+    if (newLanguageDirty) this.workSkillsRef.current.languagesRef.current.onHandleAddLanguage();
+    if (interestDataDirty && valid) this.workSkillsRef.current.interestsRef.current.save();
+
+    if (dirty && valid) setIsSaving(true);
+  }
+
+  render() {
+    const { isSaving } = this.props;
+
+    const saveBtn = (
+      <PrimaryButton
+        onClick={this.save}
+        theme={{
+          button: `${styles['save-changes-btn']} ${isSaving ? styles.disabled : ''}`,
+        }}
+        disabled={!!isSaving}
+      >
+        Save Changes
+      </PrimaryButton>
+    );
+
+    return (
+      <ErrorWrapper>
+        <div styleName="experience-and-skills">
+          <WorkExperience
+            {...this.props}
+            ref={this.workExperienceRef}
+          />
+          <WorkSkills
+            {...this.props}
+            ref={this.workSkillsRef}
+          />
+          <div styleName="footer">{saveBtn}</div>
+        </div>
+      </ErrorWrapper>
+    );
+  }
+}
+
+ExperienceAndSkills.defaultProps = {
+  isSaving: false,
+  setIsSaving: () => {},
+};
+
+ExperienceAndSkills.propTypes = {
+  userTraits: PT.array.isRequired,
+  isSaving: PT.bool,
+  setIsSaving: PT.func,
+};
diff --git a/src/shared/components/Settings/ExperienceAndSkills/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/styles.scss
new file mode 100644
index 0000000000..aaa5000547
--- /dev/null
+++ b/src/shared/components/Settings/ExperienceAndSkills/styles.scss
@@ -0,0 +1,46 @@
+@import '~styles/mixins';
+
+.experience-and-skills {
+  display: flex;
+  flex-direction: column;
+  margin: 9px 0 0;
+  color: $color-black-100;
+
+  @include xs-to-md {
+    display: block;
+    margin: 0;
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+
+  .save-changes-btn {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 50px !important;
+    background: #137d60 !important;
+    color: #fff !important;
+    text-transform: uppercase;
+    padding: 11px 23px;
+    margin: 0;
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  @include xs-to-md {
+    padding: $pad-xxxxl 0 $pad-sm;
+    border-top: 2px solid $color-black-10;
+
+    .save-changes-btn {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/FormField/index.jsx b/src/shared/components/Settings/FormField/index.jsx
index cfaa5171df..28e92508bc 100644
--- a/src/shared/components/Settings/FormField/index.jsx
+++ b/src/shared/components/Settings/FormField/index.jsx
@@ -7,35 +7,27 @@ import React from 'react';
 import PT from 'prop-types';
 import './styles.scss';
 
-const FormField = ({ children, label = '' }) => {
-  const handleClick = (e) => {
-    // focus on input label click
-    const inputElement = e.target.closest('.form-field').querySelector('input');
-    if (inputElement) {
-      inputElement.focus();
-    }
-  };
-
-  return (
-    <div styleName="form-field-wrapper">
-      <div styleName="form-field">
-        <div styleName="label" role="presentation" onClick={handleClick}>
-          {label}
-        </div>
-        {children}
+const FormField = ({ children, label = '', style }) => (
+  <div styleName="form-field-wrapper" style={style}>
+    <div styleName="form-field">
+      <div styleName="label" role="presentation">
+        {label}
       </div>
+      {children}
     </div>
-  );
-};
+  </div>
+);
 
 FormField.defaultProps = {
   label: '',
   children: null,
+  style: {},
 };
 
 FormField.propTypes = {
   label: PT.string,
   children: PT.node,
+  style: PT.object,
 };
 
 export default FormField;
diff --git a/src/shared/components/Settings/FormField/styles.scss b/src/shared/components/Settings/FormField/styles.scss
index 4593446b10..f1ed9584bd 100644
--- a/src/shared/components/Settings/FormField/styles.scss
+++ b/src/shared/components/Settings/FormField/styles.scss
@@ -5,13 +5,14 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  margin-bottom: 16px;
 
   .form-field {
-    border: 1px solid #aaa;
+    // border: 1px solid #aaa;
     border-radius: 4px;
     background: white;
-    padding-top: 24px;
-    margin-bottom: 10px;
+    // padding-top: 24px;
+    // margin-bottom: 10px;
 
     .label {
       @include roboto-regular;
@@ -21,8 +22,9 @@
       line-height: 10px;
       position: absolute;
       top: 10px;
-      left: 12px;
+      left: 11px;
       color: $listing-checkbox-green;
+      z-index: 1;
     }
   }
 }
diff --git a/src/shared/components/Settings/FormInputCheckbox/index.jsx b/src/shared/components/Settings/FormInputCheckbox/index.jsx
new file mode 100644
index 0000000000..89ab4bb2e0
--- /dev/null
+++ b/src/shared/components/Settings/FormInputCheckbox/index.jsx
@@ -0,0 +1,56 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/label-has-for */
+
+import React from 'react';
+import PT from 'prop-types';
+import IconCheck from 'assets/images/icon-check.svg';
+
+import './styles.scss';
+
+export default function FormInputCheckBox({
+  checked: checkedProp,
+  id,
+  name,
+  label,
+  onChange,
+  style,
+}) {
+  const [checked, setChecked] = React.useState(false);
+  React.useEffect(() => {
+    setChecked(checkedProp);
+  }, [checkedProp]);
+
+  const handleChange = (e) => {
+    setChecked(!checked);
+    onChange(e);
+  };
+
+  return (
+    <span styleName="formInputCheckbox" style={style}>
+      <span styleName="input-container">
+        <input type="checkbox" id={id} name={name} checked={checked} onChange={handleChange} />
+        <span styleName="checked"><IconCheck /></span>
+        <span styleName="unchecked" />
+      </span>
+      <label styleName="label" htmlFor={id}>{label}</label>
+    </span>
+  );
+}
+
+FormInputCheckBox.defaultProps = {
+  checked: false,
+  id: '',
+  name: '',
+  label: '',
+  onChange: () => {},
+  style: {},
+};
+
+FormInputCheckBox.propTypes = {
+  checked: PT.bool,
+  id: PT.string,
+  name: PT.string,
+  label: PT.string,
+  onChange: PT.func,
+  style: PT.object,
+};
diff --git a/src/shared/components/Settings/FormInputCheckbox/styles.scss b/src/shared/components/Settings/FormInputCheckbox/styles.scss
new file mode 100644
index 0000000000..266a929b76
--- /dev/null
+++ b/src/shared/components/Settings/FormInputCheckbox/styles.scss
@@ -0,0 +1,65 @@
+@import "~styles/mixins";
+
+.formInputCheckbox {
+  display: inline-flex;
+  align-items: flex-start;
+  vertical-align: middle;
+  gap: 8px;
+  padding: 10px 0 6px;
+  margin-bottom: $margin-lg;
+
+  .input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    .checked,
+    .unchecked {
+      display: none;
+      width: 20px;
+      height: 20px;
+      border: 1.5px solid #7f7f7f;
+      border-radius: 3px;
+      pointer-events: none;
+    }
+
+    .checked {
+      color: $color-tc-white;
+      background-color: $color-turq-160;
+      border-color: $color-turq-160;
+
+      svg { width: 80%; }
+    }
+
+    input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: block;
+      opacity: 0;
+      visibility: visible;
+      cursor: inherit;
+
+      &:checked ~ .checked {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &:not(:checked) ~ .unchecked { display: block; }
+    }
+  }
+
+  .label {
+    @include roboto-regular;
+
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0;
+    cursor: default;
+  }
+}
diff --git a/src/shared/components/Settings/FormInputDatePicker/index.jsx b/src/shared/components/Settings/FormInputDatePicker/index.jsx
new file mode 100644
index 0000000000..9ec1bece99
--- /dev/null
+++ b/src/shared/components/Settings/FormInputDatePicker/index.jsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import moment from 'moment';
+import ReactSelect from 'react-select';
+import DatePicker from 'components/GUIKit/Datepicker';
+import styles from './styles.scss';
+
+const renderResetButton = props => (
+  <div style={{ display: 'flex' }} className="reset-btn-container">
+    <button
+      type="button"
+      onClick={() => {
+        props.onChange(null);
+      }}
+    >
+      RESET
+    </button>
+  </div>
+);
+
+renderResetButton.defaultProps = {
+  onChange: () => {},
+};
+
+renderResetButton.propTypes = {
+  onChange: PT.func,
+};
+
+const renderDatePickerMonthElement = ({ month, onMonthSelect, onYearSelect }) => {
+  const monthOptions = moment.months().map((label, value) => ({
+    value, label,
+  }));
+
+  const yearOptions = [];
+  for (let year = moment().year(), i = year; i > year - 99; i -= 1) {
+    yearOptions.push({ value: i, label: `${i}` });
+  }
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <div>
+        <ReactSelect
+          value={month.month()}
+          options={monthOptions}
+          onChange={(option) => {
+            onMonthSelect(month, option.value);
+          }}
+          placeholder="Month"
+          clearable={false}
+          autosize={false}
+          searchable={false}
+          autoBlur={false}
+        />
+      </div>
+      <div>
+        <ReactSelect
+          value={month.year()}
+          options={yearOptions}
+          onChange={(option) => {
+            onYearSelect(month, option.value);
+          }}
+          placeholder="Year"
+          clearable={false}
+          autosize={false}
+          searchable={false}
+          autoBlur={false}
+        />
+      </div>
+    </div>
+  );
+};
+
+renderDatePickerMonthElement.propTypes = {
+  month: PT.number.isRequired,
+  onMonthSelect: PT.func.isRequired,
+  onYearSelect: PT.func.isRequired,
+};
+
+export default function FormInputDatePicker(props) {
+  const { value, onChange } = props;
+
+  return (
+    <DatePicker
+      {...props}
+      value={value ? moment(value).toDate() : null}
+      onChange={date => onChange(date ? date.toISOString() : '')}
+      renderCalendarInfo={() => renderResetButton(props)}
+      renderMonthElement={renderDatePickerMonthElement}
+      className={styles.formInputDatePicker}
+    />
+  );
+}
+
+FormInputDatePicker.defaultProps = {
+  value: null,
+  placeholder: '',
+  label: '',
+  onChange: () => {},
+  isOutsideRange: () => false,
+  isDayBlocked: () => false,
+  displayFormat: 'MM/DD/YYYY',
+  id: '',
+  readOnly: false,
+  showClearDate: false,
+  anchorDirection: 'left',
+};
+
+
+FormInputDatePicker.propTypes = {
+  value: PT.any,
+  placeholder: PT.string,
+  label: PT.string,
+  onChange: PT.func,
+  isOutsideRange: PT.func,
+  isDayBlocked: PT.func,
+  displayFormat: PT.string,
+  id: PT.string,
+  readOnly: PT.bool,
+  showClearDate: PT.bool,
+  anchorDirection: PT.oneOf(['left', 'right']),
+};
diff --git a/src/shared/components/Settings/FormInputDatePicker/styles.scss b/src/shared/components/Settings/FormInputDatePicker/styles.scss
new file mode 100644
index 0000000000..ccdc0b80bc
--- /dev/null
+++ b/src/shared/components/Settings/FormInputDatePicker/styles.scss
@@ -0,0 +1,151 @@
+@import "~styles/mixins";
+
+.formInputDatePicker {
+  :global {
+    @import '~react-select/dist/react-select';
+
+    .SingleDatePicker {
+      .SingleDatePickerInput {
+        .DateInput {
+          position: relative;
+
+          &::before {
+            content: url('assets/images/calendar-green.svg');
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            display: flex;
+            margin: 0 0 4px 10px;
+          }
+
+          .DateInput_input {
+            height: auto;
+            padding: 22px 0 2px;
+            padding-left: 28px;
+            padding-right: 28px;
+            margin: 0;
+            line-height: 22px;
+            cursor: pointer;
+
+            &::placeholder {
+              @include roboto-regular;
+
+              font-size: 14px;
+              line-height: 22px;
+              color: $color-black-60;
+            }
+          }
+        }
+
+        .SingleDatePickerInput_calendarIcon {
+          width: 24px !important;
+          padding-top: 10px !important;
+          padding-right: 10px !important;
+
+          &::before {
+            content: url('assets/images/dropdown-arrow.svg');
+            display: block;
+          }
+
+          svg {
+            display: none;
+          }
+        }
+      }
+
+      @include xs-to-md {
+        .SingleDatePickerInput {
+          .DateInput {
+            .DateInput_input {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+
+    .DayPicker_weekHeaders {
+      z-index: 0;
+    }
+
+    .CalendarMonth_caption {
+      .Select {
+        .Select-control {
+          @include roboto-medium;
+
+          font-size: 16px;
+          line-height: 24px;
+          color: $tc-gray-90;
+          height: 24px;
+          min-width: 120px;
+          border: none;
+          box-shadow: none !important;
+          cursor: pointer;
+
+          .Select-value {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            padding-right: 25px;
+          }
+        }
+
+        .Select-menu-outer {
+          position: absolute;
+          top: calc(100% + 2px);
+          max-height: 320px;
+          border: 1px solid #767676;
+          border-radius: 0;
+
+          .Select-menu {
+            background-color: $tc-white;
+
+            .Select-option {
+              font-size: 16px;
+              line-height: 30px;
+              color: $tc-gray-90;
+              padding: 0 15px;
+
+              &.is-selected {
+                font-weight: bold;
+                background-color: #229173;
+              }
+
+              &:hover,
+              &.is-focused {
+                background-color: #229173;
+                color: $tc-white;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .CalendarMonthGrid {
+      background: transparent !important;
+
+      .CalendarMonth {
+        background: transparent !important;
+      }
+    }
+
+    .reset-btn-container {
+      padding: 16px 0 15px;
+      margin: 0 15px;
+      border-top: 2px solid $listing-filter-bg;
+
+      button {
+        @include roboto-bold;
+
+        font-size: 12px;
+        line-height: 22px;
+        color: $listing-checkbox-green;
+        padding: 0 15px;
+        background: none;
+        border: 1.5px solid currentColor;
+        border-radius: 24px;
+      }
+    }
+  }
+}
diff --git a/src/shared/components/Settings/FormInputSelect/styles.scss b/src/shared/components/Settings/FormInputSelect/styles.scss
index 2441a82ca8..d6a2fc56b6 100644
--- a/src/shared/components/Settings/FormInputSelect/styles.scss
+++ b/src/shared/components/Settings/FormInputSelect/styles.scss
@@ -1,25 +1,101 @@
+@import "~styles/mixins";
+
 .form-input-select {
   :global {
     @import '~react-select/dist/react-select';
 
-    width: 100%;
+    .Select-control {
+      border: 1px solid $color-black-40;
+      box-shadow: none !important;
+      cursor: pointer;
 
-    input.Select-input,
-    input.Select-input:focus {
-      background-color: transparent !important;
-      margin-left: 0 !important;
-      padding-right: 6px !important;
-    }
+      .Select-placeholder {
+        padding: 22px 0 2px 10px !important;
+        font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
+        font-weight: 400 !important;
+        font-size: 14px !important;
+        line-height: 22px !important;
+        color: $color-black-60 !important;
+      }
 
-    .Select-control {
-      height: 25px !important;
-      padding-top: 0 !important;
-      padding-bottom: 0 !important;
-      border: 0 !important;
+      .Select-value {
+        .Select-value-label {
+          @include roboto-regular;
+
+          font-size: 14px;
+          line-height: 24px;
+          color: $color-black-60;
+          display: block;
+          padding: 22px 0 2px;
+        }
+      }
+
+      .Select-input {
+        height: 48px;
+        border-radius: inherit;
+
+        > input {
+          @include roboto-regular;
+
+          font-size: 14px;
+          line-height: 22px;
+          color: $color-black-60;
+          height: 100%;
+          padding: 22px 0 2px;
+        }
+      }
+
+      .Select-arrow-zone {
+        vertical-align: bottom;
+        position: relative;
+        padding-right: 5px;
+        width: 28px;
+
+        .Select-arrow {
+          position: static;
+          width: auto;
+          height: auto;
+          border: none;
+
+          &::before {
+            content: url('assets/images/dropdown-arrow.svg');
+            display: block;
+            margin: 0;
+            left: 0;
+            top: 30px;
+          }
+        }
+      }
     }
 
-    .Select-multi-value-wrapper {
-      width: 100% !important;
+    .Select-menu-outer {
+      max-height: 240px;
+      z-index: 10;
+
+      .Select-menu {
+        @include roboto-regular;
+
+        background-color: $tc-white;
+
+        .Select-option {
+          font-size: 16px;
+          line-height: 30px;
+          color: $tc-gray-90;
+          padding: 0 15px;
+
+          &:hover,
+          &.is-focused {
+            background-color: #229173;
+            color: $tc-white;
+          }
+
+          &.is-selected {
+            font-weight: bold;
+            color: $tc-gray-90;
+            background-color: #229173;
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/shared/components/Settings/FormInputText/index.jsx b/src/shared/components/Settings/FormInputText/index.jsx
index 9ac54be7a0..3ebc2dcdb0 100644
--- a/src/shared/components/Settings/FormInputText/index.jsx
+++ b/src/shared/components/Settings/FormInputText/index.jsx
@@ -8,20 +8,23 @@ import PT from 'prop-types';
 import cn from 'classnames';
 import './styles.scss';
 
-const FormInputText = ({ styleName, ...props }) => (
+const FormInputText = ({ styleName, value, ...props }) => (
   <input
     type="text"
     styleName={cn('form-input-text', styleName || '')}
     {...props}
+    value={value || ''}
   />
 );
 
 FormInputText.defaultProps = {
-  styleName: {},
+  styleName: '',
+  value: '',
 };
 
 FormInputText.propTypes = {
-  styleName: PT.shape(),
+  styleName: PT.string,
+  value: PT.string,
 };
 
 export default FormInputText;
diff --git a/src/shared/components/Settings/FormInputText/styles.scss b/src/shared/components/Settings/FormInputText/styles.scss
index 706747ba98..2c57aa44ad 100644
--- a/src/shared/components/Settings/FormInputText/styles.scss
+++ b/src/shared/components/Settings/FormInputText/styles.scss
@@ -5,15 +5,17 @@
   box-sizing: border-box !important;
   color: #767676 !important;
   font-size: 14px !important;
-  height: 24px !important;
+  height: 48px !important;
   outline: none !important;
-  border: 0 !important;
+  border: 1px solid #aaa !important;
   width: 100% !important;
   margin-bottom: 0 !important;
   box-shadow: none !important;
+  border-radius: inherit !important;
+  padding: 22px 9px 2px 9px;
 
   &::placeholder {
-    color: #aaa !important;
+    color: #767676 !important;
     text-transform: none !important;
   }
 
diff --git a/src/shared/components/Settings/FormInputTextArea/styles.scss b/src/shared/components/Settings/FormInputTextArea/styles.scss
index dbb679a870..132a6f0a59 100644
--- a/src/shared/components/Settings/FormInputTextArea/styles.scss
+++ b/src/shared/components/Settings/FormInputTextArea/styles.scss
@@ -6,13 +6,14 @@
   color: #767676 !important;
   font-size: 14px !important;
   outline: none !important;
-  border: 0 !important;
+  border: 1px solid #aaa !important;
   width: 100% !important;
   min-height: 120px !important;
   border-radius: 4px;
   margin-bottom: 10px;
   resize: vertical;
   box-shadow: none !important;
+  padding: 22px 9px 2px 9px;
 
   &:hover {
     box-shadow: none !important;
diff --git a/src/shared/components/Settings/Header/styles.scss b/src/shared/components/Settings/Header/styles.scss
index fd710c69e7..859707fef6 100644
--- a/src/shared/components/Settings/Header/styles.scss
+++ b/src/shared/components/Settings/Header/styles.scss
@@ -4,14 +4,12 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
-  padding: 0;
+  align-items: flex-start;
   background: $tc-white;
-  border-bottom: 1px solid $tc-gray-10;
+  border-bottom: 2px solid $color-black-10;
+  padding: 0 0 $pad-xxl 0;
 
   .title {
-    margin: 32px 0 40px 0;
-
     h1 {
       @include barlow-condensed-semi-bold;
 
@@ -34,8 +32,19 @@
     background: #137d60 !important;
     color: #fff !important;
     height: 48px;
+    margin: 0;
+  }
+
+  @include xs-to-md {
+    padding: 0 0 $pad-lg;
+
+    .title {
+      h1 {
+        font-size: 28px;
+      }
+    }
 
-    @include xs-to-md {
+    .saveButton {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
index cd91c95a5a..0fb3e071f9 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
@@ -82,31 +82,38 @@ const Hobbies = (props) => {
           </FormField>
         </form>
         <div styleName="edit-text-wrapper">
-          <AddItemIcon />
-          <span
-            styleName="edit-text"
-            role="presentation"
-            disabled={!canModifyTrait}
-            onClick={onHandleAddHobby}
-          >
-            {
-              isEdit ? (<React.Fragment>Edit hobby to your list</React.Fragment>)
-                : (<React.Fragment>Add hobby to your list</React.Fragment>)
-            }
-          </span>
-          {
-          isEdit && (
-            <div styleName="button-cancel">
+          {!isEdit && (
+            <span
+              styleName="edit-text"
+              role="presentation"
+              disabled={!canModifyTrait}
+              onClick={onHandleAddHobby}
+            >
+              <AddItemIcon /> Add hobby to your list
+            </span>
+          )}
+
+          { isEdit && (
+            <React.Fragment>
               <span
-                role="presentation"
                 styleName="edit-text"
-                onClick={onCancelEditStatus}
+                role="presentation"
+                disabled={!canModifyTrait}
+                onClick={onHandleAddHobby}
               >
-                Cancel
+                Edit hobby to your list
+              </span>
+              <span styleName="button-cancel">
+                <span
+                  role="presentation"
+                  styleName="edit-text"
+                  onClick={onCancelEditStatus}
+                >
+                  Cancel
+                </span>
               </span>
-            </div>
-          )
-        }
+            </React.Fragment>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/styles.scss b/src/shared/components/Settings/ProfileSettings/Hobbies/styles.scss
index adee659dc0..f1efdaf9e2 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/styles.scss
@@ -3,6 +3,9 @@
 
 .edit-text-wrapper {
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px 36px;
 }
 
 .edit-text {
@@ -13,8 +16,10 @@
   line-height: 22px;
   text-align: center;
   color: $listing-checkbox-green;
-  margin-left: 4px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .hide {
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
index 88145ab1fb..5637ff6174 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
@@ -6,7 +6,6 @@
  */
 import _ from 'lodash';
 import React from 'react';
-import ReactSelect from 'react-select';
 import PT from 'prop-types';
 import moment from 'moment';
 
@@ -14,7 +13,7 @@ import ErrorMessage from 'components/Settings/ErrorMessage';
 import FormInputText from 'components/Settings/FormInputText';
 import FormField from 'components/Settings/FormField';
 import AddItemIcon from 'assets/images/settings-add-item.svg';
-import DatePickerGUIKit from '../../../GUIKit/Datepicker';
+import FormInputDatePicker from 'components/Settings/FormInputDatePicker';
 
 import EducationList from './List';
 
@@ -39,56 +38,6 @@ const Learning = (props) => {
     onCancelEditStatus,
   } = props;
 
-  const renderResetButton = () => (
-    <div style={{ display: 'flex' }} className="reset-btn-container">
-      <button type="button" onClick={() => {}}>RESET</button>
-    </div>
-  );
-
-  const renderDatePickerMonthElement = ({ month, onMonthSelect, onYearSelect }) => {
-    const monthOptions = moment.months().map((label, value) => ({
-      value, label,
-    }));
-
-    const yearOptions = [];
-    for (let year = moment().year(), i = year; i > year - 99; i -= 1) {
-      yearOptions.push({ value: i, label: `${i}` });
-    }
-
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <div>
-          <ReactSelect
-            value={month.month()}
-            options={monthOptions}
-            onChange={(option) => {
-              onMonthSelect(month, option.value);
-            }}
-            placeholder="Month"
-            clearable={false}
-            autosize={false}
-            searchable={false}
-            autoBlur={false}
-          />
-        </div>
-        <div>
-          <ReactSelect
-            value={month.year()}
-            options={yearOptions}
-            onChange={(option) => {
-              onYearSelect(month, option.value);
-            }}
-            placeholder="Year"
-            clearable={false}
-            autosize={false}
-            searchable={false}
-            autoBlur={false}
-          />
-        </div>
-      </div>
-    );
-  };
-
   return (
     <div styleName="education-container">
       {
@@ -139,18 +88,17 @@ const Learning = (props) => {
           <div styleName="date-wrapper">
             {/* Start Date */}
             <FormField label="Degree">
-              <div styleName="datePicker">
-                <DatePickerGUIKit
-                  readOnly
-                  displayFormat="MM/DD/YYYY"
-                  placeholder="MM/DD/YYYY"
-                  isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
-                  value={newEducation.timePeriodFrom}
-                  id="date-from1"
-                  onChange={date => onUpdateDate(date, 'timePeriodFrom')}
-                  renderMonthElement={renderDatePickerMonthElement}
-                />
-              </div>
+
+              <FormInputDatePicker
+                readOnly
+                displayFormat="MM/DD/YYYY"
+                placeholder="MM/DD/YYYY"
+                isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
+                value={newEducation.timePeriodFrom}
+                id="date-from1"
+                onChange={date => onUpdateDate(date, 'timePeriodFrom')}
+              />
+
               {isSubmit && (
                 <ErrorMessage
                   invalid={startDateInvalid}
@@ -161,10 +109,10 @@ const Learning = (props) => {
 
             {/* End Date */}
             <FormField label="End Date (or expected)">
-              <div styleName="datePicker">
-                {
+
+              {
                   newEducation.graduated ? (
-                    <DatePickerGUIKit
+                    <FormInputDatePicker
                       readOnly
                       displayFormat="MM/DD/YYYY"
                       placeholder="MM/DD/YYYY"
@@ -172,11 +120,9 @@ const Learning = (props) => {
                       value={newEducation.timePeriodTo}
                       id="date-to1"
                       onChange={date => onUpdateDate(date, 'timePeriodTo')}
-                      renderCalendarInfo={() => renderResetButton}
-                      renderMonthElement={renderDatePickerMonthElement}
                     />
                   ) : (
-                    <DatePickerGUIKit
+                    <FormInputDatePicker
                       readOnly
                       displayFormat="MM/DD/YYYY"
                       placeholder="MM/DD/YYYY"
@@ -185,12 +131,10 @@ const Learning = (props) => {
                       id="date-to1"
                       onChange={date => onUpdateDate(date, 'timePeriodTo')}
                       allowFutureYear
-                      renderCalendarInfo={() => renderResetButton}
-                      renderMonthElement={renderDatePickerMonthElement}
                     />
                   )
                 }
-              </div>
+
               {
                 isSubmit && (
                   <ErrorMessage
@@ -225,31 +169,37 @@ const Learning = (props) => {
           </div>
         </form>
         <div styleName="edit-text-wrapper">
-          <AddItemIcon />
-          <span
-            role="presentation"
-            styleName="edit-text"
-            onClick={onHandleAddEducation}
-          >
-            {
-              isEdit ? (<React.Fragment>Edit Another School / Degree</React.Fragment>)
-                : (<React.Fragment>Add Another School / Degree</React.Fragment>)
-            }
-          </span>
-        </div>
-        {
-          isEdit && (
-            <div styleName="button-cancel">
+          {!isEdit && (
+            <span
+              role="presentation"
+              styleName="edit-text"
+              onClick={onHandleAddEducation}
+            >
+              <AddItemIcon /> Add Another School / Degree
+            </span>
+          )}
+
+          { isEdit && (
+            <React.Fragment>
               <span
                 role="presentation"
                 styleName="edit-text"
-                onClick={onCancelEditStatus}
+                onClick={onHandleAddEducation}
               >
-                Cancel
+                Edit Another School / Degree
               </span>
-            </div>
-          )
-        }
+              <span styleName="button-cancel">
+                <span
+                  role="presentation"
+                  styleName="edit-text"
+                  onClick={onCancelEditStatus}
+                >
+                  Cancel
+                </span>
+              </span>
+            </React.Fragment>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/styles.scss b/src/shared/components/Settings/ProfileSettings/Learning/styles.scss
index 1d5d77c3bf..911f4828ae 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Learning/styles.scss
@@ -129,6 +129,9 @@ $checkbox-bg-selected: $tc-dark-blue;
 
 .edit-text-wrapper {
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px 36px;
 }
 
 .edit-text {
@@ -139,8 +142,9 @@ $checkbox-bg-selected: $tc-dark-blue;
   line-height: 22px;
   text-align: center;
   color: $listing-checkbox-green;
-  margin-left: 4px;
-  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .hide {
diff --git a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
index 974875aae1..c7196e01c2 100644
--- a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
@@ -6,14 +6,13 @@
  */
 import _ from 'lodash';
 import React from 'react';
-import ReactSelect from 'react-select';
 import PT from 'prop-types';
 import moment from 'moment';
 import ErrorMessage from 'components/Settings/ErrorMessage';
 import FormInputText from 'components/Settings/FormInputText';
 import Select from 'components/Settings/FormInputSelect';
 import FormField from 'components/Settings/FormField';
-import DatePickerGUIKit from '../../../GUIKit/Datepicker';
+import FormInputDatePicker from 'components/Settings/FormInputDatePicker';
 
 import '../styles.scss';
 
@@ -29,56 +28,6 @@ const PersonalDetails = (props) => {
     onUpdateCountry,
   } = props;
 
-  const renderResetButton = () => (
-    <div style={{ display: 'flex' }} className="reset-btn-container">
-      <button type="button" onClick={() => {}}>RESET</button>
-    </div>
-  );
-
-  const renderDatePickerMonthElement = ({ month, onMonthSelect, onYearSelect }) => {
-    const monthOptions = moment.months().map((label, value) => ({
-      value, label,
-    }));
-
-    const yearOptions = [];
-    for (let year = moment().year(), i = year; i > year - 99; i -= 1) {
-      yearOptions.push({ value: i, label: `${i}` });
-    }
-
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <div>
-          <ReactSelect
-            value={month.month()}
-            options={monthOptions}
-            onChange={(option) => {
-              onMonthSelect(month, option.value);
-            }}
-            placeholder="Month"
-            clearable={false}
-            autosize={false}
-            searchable={false}
-            autoBlur={false}
-          />
-        </div>
-        <div>
-          <ReactSelect
-            value={month.year()}
-            options={yearOptions}
-            onChange={(option) => {
-              onYearSelect(month, option.value);
-            }}
-            placeholder="Year"
-            clearable={false}
-            autosize={false}
-            searchable={false}
-            autoBlur={false}
-          />
-        </div>
-      </div>
-    );
-  };
-
   return (
     <div styleName="basic-info-container">
       <div styleName="form-container-default">
@@ -132,19 +81,15 @@ const PersonalDetails = (props) => {
 
           {/* Birth Date */}
           <FormField label="Birth Date">
-            <div styleName="datePicker">
-              <DatePickerGUIKit
-                readOnly
-                displayFormat="MM/DD/YYYY"
-                placeholder="MM/DD/YYYY"
-                isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
-                value={newBasicInfo.birthDate ? moment(newBasicInfo.birthDate).toDate() : null}
-                id="date-range-picker1"
-                renderMonthElement={renderDatePickerMonthElement}
-                onChange={date => onUpdateDate(date ? moment(date).format('MM/DD/YYYY') : null)}
-                renderCalendarInfo={() => renderResetButton}
-              />
-            </div>
+            <FormInputDatePicker
+              readOnly
+              displayFormat="MM/DD/YYYY"
+              placeholder="MM/DD/YYYY"
+              isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
+              value={newBasicInfo.birthDate}
+              id="date-range-picker1"
+              onChange={date => onUpdateDate(date)}
+            />
           </FormField>
 
           {/* Address */}
diff --git a/src/shared/components/Settings/ProfileSettings/styles.scss b/src/shared/components/Settings/ProfileSettings/styles.scss
index 3592ede427..3968d233f9 100644
--- a/src/shared/components/Settings/ProfileSettings/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/styles.scss
@@ -143,63 +143,6 @@
   }
 }
 
-/*
- * React Select component styling
- */
-.basic-info-container .form-container .row .field :global .Select,
-.basic-info-container .form-container .row .field :global .Select-value span,
-.basic-info-container .form-container .row .field :global .Select-menu-outer,
-.basic-info-container.form-container .row .field :global .Select-placeholder,
-.basic-info-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    margin-top: 5px;
-  }
-}
-
-.basic-info-container div[class="Select-control"] {
-  height: 40px;
-
-  div[class="Select-input"] {
-    height: 38px;
-
-    @include placeholder {
-      text-transform: capitalize;
-    }
-  }
-
-  div[class="Select-placeholder"] {
-    height: 38px;
-    line-height: 40px !important;
-
-    @include upto-sm {
-      line-height: 38px !important;
-    }
-  }
-
-  div[class="Select-value"] {
-    line-height: 40px !important;
-  }
-}
-
-.basic-info-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
-}
-
-.date-picker {
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-
-.date-picker-sm {
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-
 .col-2,
 .col-percent50,
 .col-percent35 {
diff --git a/src/shared/components/Settings/SettingsBanner/index.jsx b/src/shared/components/Settings/SettingsBanner/index.jsx
index 7ee254c39c..04c92cc9fe 100644
--- a/src/shared/components/Settings/SettingsBanner/index.jsx
+++ b/src/shared/components/Settings/SettingsBanner/index.jsx
@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import cn from 'classnames';
 import PT from 'prop-types';
 import ArrowIcon from 'assets/images/icon-banner-selector.svg';
-import './styles.scss';
+import styles from './styles.scss';
 import PageRow from '../PageRow';
 
 const SettingsBanner = ({
@@ -64,4 +64,25 @@ SettingsBanner.propTypes = {
   row: PT.bool,
 };
 
+export function SettingBannerV2({ children }) {
+  const [open, setOpen] = useState(true);
+
+  const [heading, ...content] = React.Children.toArray(children);
+  const header = React.cloneElement(heading, {
+    onClick: () => setOpen(!open),
+    className: `${heading.props.className} ${styles.collapse} ${open ? '' : styles.closed}`,
+  });
+
+  return (
+    <React.Fragment>
+      {header}
+      {open && content}
+    </React.Fragment>
+  );
+}
+
+SettingBannerV2.propTypes = {
+  children: PT.node.isRequired,
+};
+
 export default SettingsBanner;
diff --git a/src/shared/components/Settings/SettingsBanner/styles.scss b/src/shared/components/Settings/SettingsBanner/styles.scss
index d2444dbec4..f1852ffd29 100644
--- a/src/shared/components/Settings/SettingsBanner/styles.scss
+++ b/src/shared/components/Settings/SettingsBanner/styles.scss
@@ -51,3 +51,15 @@
     margin-top: 32px;
   }
 }
+
+.collapse {
+  display: flex;
+  padding-right: 24px;
+  background: url('assets/images/icon-banner-selector.svg') no-repeat top 10px right 6px / auto;
+  cursor: pointer;
+
+  &.closed {
+    padding-bottom: 0;
+    background-image: url('assets/images/chevron-down-green.svg');
+  }
+}
diff --git a/src/shared/components/Settings/TabSelector/styles.scss b/src/shared/components/Settings/TabSelector/styles.scss
index 52a3622c94..0c336a8c13 100644
--- a/src/shared/components/Settings/TabSelector/styles.scss
+++ b/src/shared/components/Settings/TabSelector/styles.scss
@@ -6,6 +6,7 @@
   .item {
     height: 40px;
     margin: 0;
+    cursor: pointer;
 
     p {
       @include barlow-bold;
@@ -18,6 +19,10 @@
       padding-left: 16px;
       padding-top: 10px;
     }
+
+    &:hover {
+      background-color: #bae1f9;
+    }
   }
 
   .active {
@@ -38,6 +43,7 @@
   border-radius: 4px 4px 0 0;
   border-bottom: 1px solid $listing-light-gray;
 
+  /* stylelint-disable no-descending-specificity */
   .item {
     @include barlow;
 
@@ -55,6 +61,7 @@
       background-color: #bae1f9;
     }
   }
+  /* stylelint-enable no-descending-specificity */
 
   .active {
     color: $tc-black;
@@ -79,11 +86,12 @@
 .mobile-tab-container {
   background-color: $listing-light-blue;
   height: 40px;
-  margin-top: 32px;
+  margin-top: $margin-xxl;
   display: flex;
   justify-content: space-between;
   border-radius: 4px 4px 0 0;
   border-bottom: 1px solid #d4d4d4;
+  cursor: pointer;
 
   .title {
     @include barlow-bold;
@@ -113,8 +121,4 @@
     transform: scale(1.5) rotate(180deg);
     margin-right: 20px !important;
   }
-
-  @include xs-to-md {
-    margin: 0;
-  }
 }
diff --git a/src/shared/components/Settings/constants.js b/src/shared/components/Settings/constants.js
index 39d99bf13e..aa18ca8bdc 100644
--- a/src/shared/components/Settings/constants.js
+++ b/src/shared/components/Settings/constants.js
@@ -1,15 +1,17 @@
 
+import { TABS } from '../../actions/page/settings';
+
 export const SCREEN_SIZE = {
   SM: 767,
 };
 
 export const SETTINGS_TABS = [
-  { title: 'Profile', link: 'profile' },
-  { title: 'Experience & Skills', link: 'skills' },
-  { title: 'Topcoder & You', link: 'tracks' },
-  { title: 'Tools', link: 'tools' },
-  { title: 'Account', link: 'accounts' },
-  { title: 'Preferences', link: 'preferences' },
+  { title: 'Profile', link: TABS.PROFILE },
+  { title: 'Experience & Skills', link: TABS.SKILLS },
+  { title: 'Topcoder & You', link: TABS.TRACKS },
+  { title: 'Tools', link: TABS.TOOLS },
+  { title: 'Account', link: TABS.ACCOUNTS },
+  { title: 'Preferences', link: TABS.PREFERENCES },
 ];
 
 export const PROFILE_SETTINGS = {
@@ -42,3 +44,18 @@ export const TOPCODER_AND_YOU = {
     title: 'Your Communities',
   },
 };
+
+export const INTERESTS_AT_TOPCODER = [
+  'Top Paying Work',
+  'Skill Building / Upskilling',
+  'Work with Top Companies',
+  'Compete (Code & Design Challenges)',
+  'Full Time Freelance Work',
+  'Have Fun',
+  'Gain Technical Experience',
+  'Prepare for an interview',
+  'Competitive Programming',
+  'Earn Extra Money',
+  'Connect With Smart People',
+  'Explore / Not Sure',
+];
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index 40d1307e47..5aac8703fa 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -1,7 +1,7 @@
 /**
  * Settings page component.
  */
-import React, { createRef, useState } from 'react';
+import React, { useState } from 'react';
 import PT from 'prop-types';
 import MetaTags from 'components/MetaTags';
 
@@ -9,6 +9,7 @@ import { TABS } from 'actions/page/settings';
 
 import _ from 'lodash';
 import Header from './Header';
+import ExperienceAndSkills from './ExperienceAndSkills';
 import TopcoderAndYou from './TopcoderAndYou';
 import Tools from './Tools';
 
@@ -34,8 +35,10 @@ export default function Settings(props) {
 
   const currentTab = _.find(SETTINGS_TABS, { link: newProps.settingsTab });
   const title = currentTab ? currentTab.title : 'Settings';
-  const profileRef = createRef();
-  const tracksRef = createRef();
+
+  const profileRef = React.useRef();
+  const tracksRef = React.useRef();
+  const experienceAndSkillsRef = React.useRef();
 
   const [isSaving, setIsSaving] = useState(false);
 
@@ -50,10 +53,12 @@ export default function Settings(props) {
           settingsTab={newProps.settingsTab}
           selectTab={selectTab}
           saveSettings={() => {
-            if (tracksRef.current) {
+            if (newProps.settingsTab === TABS.TRACKS) {
               tracksRef.current.onSaveTopcoderAndYou();
-            } else {
+            } else if (newProps.settingsTab === TABS.PROFILE) {
               profileRef.current.onSaveBasicInfo();
+            } else if (newProps.settingsTab === TABS.SKILLS) {
+              experienceAndSkillsRef.current.save();
             }
           }}
           isSaving={isSaving}
@@ -70,6 +75,17 @@ export default function Settings(props) {
             />
           )
         }
+        {
+          newProps.settingsTab === TABS.SKILLS
+          && (
+            <ExperienceAndSkills
+              ref={experienceAndSkillsRef}
+              {...newProps}
+              isSaving={isSaving}
+              setIsSaving={setIsSaving}
+            />
+          )
+        }
         {
           newProps.settingsTab === TABS.TRACKS
           && (
diff --git a/src/shared/components/Settings/style.scss b/src/shared/components/Settings/style.scss
index 08dddc9337..37f7c1c196 100644
--- a/src/shared/components/Settings/style.scss
+++ b/src/shared/components/Settings/style.scss
@@ -42,16 +42,12 @@ $checkbox-bg-selected: $tc-dark-blue;
 .container {
   background: $tc-white;
   width: 100%;
-  max-width: $screen-max;
+  max-width: 1440px;
   margin: 0 auto;
-  box-shadow: 0 1px 0 0 #f0f0f0;
+  padding: $pad-xxxxl $pad-xxxxl $pad-xxxl;
 
-  @include from-sm-to-lg {
-    padding: 30px;
-  }
-
-  @include upto-sm {
-    padding: 10px;
+  @include xs-to-md {
+    padding: $pad-lg;
   }
 }
 
@@ -477,192 +473,4 @@ $checkbox-bg-selected: $tc-dark-blue;
     padding-right: 10px;
     text-align: right;
   }
-
-  .DateInput {
-    position: relative;
-
-    &::before {
-      content: url("assets/images/icon-input-calendar.svg");
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      display: flex;
-      margin: 0 0 4px 10px;
-    }
-  }
-
-  .DateInput_input {
-    height: auto;
-    padding: 22px 0 2px;
-    padding-left: 28px !important;
-    padding-right: 0 !important;
-    margin: 0 !important;
-    line-height: 22px;
-    cursor: pointer;
-    font-size: 14px !important;
-  }
-
-  .SingleDatePickerInput_calendarIcon {
-    width: 32px;
-    padding-top: 10px;
-    top: 5px !important;
-
-    &::before {
-      content: url("assets/images/dropdown-arrow.svg");
-    }
-
-    svg {
-      display: none;
-    }
-  }
-
-  .DayPicker_weekHeaders {
-    z-index: 0;
-  }
-
-  .CalendarMonth_caption {
-    padding-bottom: 0 !important;
-
-    .Select-control {
-      @include roboto-bold;
-
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-      color: $tc-gray-90;
-      height: 24px;
-      min-width: 120px;
-      border: none;
-      box-shadow: none !important;
-      cursor: pointer;
-    }
-
-    .Select-menu-outer {
-      max-height: 240px;
-    }
-
-    .Select-menu {
-      background-color: $tc-white;
-    }
-
-    .Select-option {
-      font-size: 16px;
-      line-height: 30px;
-      color: $tc-gray-90;
-      padding: 0 15px;
-
-      &.is-selected {
-        font-weight: bold;
-        background-color: #229173;
-      }
-
-      &:hover,
-      &.is-focused {
-        background-color: #229173;
-        color: $tc-white;
-      }
-    }
-  }
-
-  .CalendarMonthGrid {
-    background: transparent !important;
-  }
-
-  .CalendarMonth {
-    background: transparent !important;
-  }
-
-  .reset-btn-container {
-    padding: 16px 0 15px;
-    margin: 0 15px;
-    border-top: 2px solid $listing-filter-bg;
-
-    button {
-      @include roboto-bold;
-
-      font-weight: 700;
-      font-size: 12px;
-      line-height: 22px;
-      color: $listing-checkbox-green;
-      padding: 0 15px;
-      background: none;
-      border: 1.5px solid currentColor;
-      border-radius: 24px;
-    }
-  }
-
-  .Select-control {
-    box-shadow: none !important;
-    cursor: pointer;
-  }
-
-  .Select-value-label {
-    @include roboto-regular;
-
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 24px;
-    color: $listing-placeholder-gray;
-    display: block;
-    padding: 22px 0 2px;
-  }
-
-  .Select-input {
-    height: 46px;
-
-    > input {
-      @include roboto-regular;
-
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 22px;
-      color: $listing-placeholder-gray;
-      padding: 22px 0 2px;
-    }
-  }
-
-  .Select-arrow-zone {
-    vertical-align: bottom;
-  }
-
-  .Select-arrow {
-    width: auto;
-    height: auto;
-    border: none;
-
-    &::before {
-      content: url("assets/images/dropdown-arrow.svg");
-      top: 15px;
-      position: absolute;
-      margin-left: 38px;
-    }
-  }
-
-  .Select-menu-outer {
-    max-height: 240px;
-    z-index: 10;
-  }
-
-  .Select-menu {
-    background-color: $tc-white;
-  }
-
-  .Select-option {
-    font-size: 16px;
-    line-height: 30px;
-    color: $tc-gray-90;
-    padding: 0 15px;
-
-    &:hover,
-    &.is-focused {
-      background-color: #229173;
-      color: $tc-white;
-    }
-
-    &.is-selected {
-      font-weight: bold;
-      color: $tc-gray-90;
-      background-color: #229173;
-    }
-  }
 }
diff --git a/src/styles/_mixins/_variables-platform-ui.scss b/src/styles/_mixins/_variables-platform-ui.scss
new file mode 100644
index 0000000000..f32f235e7b
--- /dev/null
+++ b/src/styles/_mixins/_variables-platform-ui.scss
@@ -0,0 +1,163 @@
+/*  GRAY */
+$color-tc-black: #0c0c0c;
+$color-black-100: #2a2a2a;
+$color-black-80: #555;
+$color-black-60: #767676;
+$color-black-40: #aaa;
+$color-black-20: #d4d4d4;
+$color-black-10: #e9e9e9;
+$color-black-5: #f4f4f4;
+$color-black-2: #fbfbfb;
+
+/* WHITE */
+$color-tc-white: #fff;
+
+/* RED */
+$color-red-100: #ef3a3a;
+$color-red-75: #f37593;
+$color-red-50: #f7a3b7;
+$color-red-25: #fbd1db;
+// dark
+$color-red-120: #be405e;
+$color-red-140: #8c384c;
+
+/* ORANGE */
+$color-orange-100: #ffc43d;
+$color-orange-75: #ffd36e;
+$color-orange-50: #ffe19e;
+$color-orange-25: #fff0ce;
+// dark
+$color-orange-120: #e2af3b;
+$color-orange-140: #b98f31;
+
+/* YELLOW */
+$color-yellow-100: #f9f649;
+$color-yellow-75: #fbf877;
+$color-yellow-50: #fbfaa4;
+$color-yellow-25: #fdfcd1;
+// dark
+$color-yellow-120: #ddda43;
+$color-yellow-140: #b6b431;
+
+/* GREEN */
+$color-green-100: #63f963;
+$color-green-75: #8afb8a;
+$color-green-50: #b0fcb1;
+$color-green-25: #d8fdd8;
+// dark
+$color-green-120: #4cc94c;
+$color-green-140: #35ac35;
+
+/*  TURQUOISE */
+$color-turq-100: #06d6a0;
+$color-turq-75: #45e1b8;
+$color-turq-50: #82eacf;
+$color-turq-25: #c1f5e7;
+$color-turq-15: #e0faf3;
+// dark
+$color-turq-120: #0ab88a;
+$color-turq-140: #219174;
+$color-turq-160: #137d60;
+$color-turq-180: #0d664e;
+
+/*  TEAL */
+$color-teal-100: #26b3c5;
+$color-teal-75: #54b4c0;
+$color-teal-50: #8dccd4;
+$color-teal-25: #c6e6ea;
+// dark
+$color-teal-120: #1e94a3;
+$color-teal-140: #227681;
+
+/*  BLUE */
+$color-blue-110: #0a7ac0;
+$color-blue-100: #2c95d7;
+$color-blue-75: #50ade8;
+$color-blue-50: #83c5ee;
+$color-blue-25: #bae1f9;
+$color-blue-15: #d6edfc;
+$color-blue-10: #eaf6fd;
+// dark
+$color-blue-120: #2984bd;
+$color-blue-140: #16679a;
+$color-blue-160: #05456d;
+$color-link-blue-dark: #0d61bf;
+$color-link-blue-light: #5fb7ee;
+
+/*  PURPLE */
+$color-purple-100: #9d41c9;
+$color-purple-75: #b671d7;
+$color-purple-50: #cd9fe3;
+$color-purple-25: #e6cff1;
+// dark
+$color-purple-120: #8231a9;
+$color-purple-140: #652385;
+
+/* ORANGE LEGACY */
+$color-legacy-100: #fd7d01;
+$color-legacy-75: #ffa45d;
+$color-legacy-50: #ffe3cf;
+$color-legacy-25: #fff0eb;
+// dark
+$color-legacy-120: #f46500;
+
+/* HANDLES */
+$color-handle-grey: $color-black-100;
+$color-handle-green: #2d7e2d;
+$color-handle-blue: #616bd5;
+$color-handle-yellow: #f2c900;
+$color-handle-red: #ef3a3a;
+
+/* GOLD  */
+$color-gold-1: #ffd84d;
+$color-gold-2: #c99014;
+$color-gold-3: #865e07;
+
+/* SILVER */
+$color-silver-1: #d1d0cf;
+$color-silver-2: #716d67;
+$color-silver-3: #554e48;
+
+/* BRONZE */
+$color-bronze-1: #d98f64;
+$color-bronze-2: #854e29;
+$color-bronze-3: #733d17;
+
+/* GRADIENTS */
+$color-tc-grad1: linear-gradient(90deg, #ffc43d 0%, #f37593 100%);
+$color-tc-grad2: linear-gradient(270deg, #0ab88a 0%, #63f963 100%);
+$color-tc-grad3: linear-gradient(90deg, #9d41c9 0.01%, #ef476f 100%);
+$color-tc-grad4: linear-gradient(90deg, #16679a 0%, #2c95d7 100%);
+$color-tc-grad5: linear-gradient(90deg, #26b3c5 0%, #45e1b8 100%);
+$color-tc-grad6: linear-gradient(90deg, #9d41c9 0%, #50ade8 100%);
+$color-tc-grad7: linear-gradient(90deg, #2c95d7 0%, #83c5ee 100%);
+$color-tc-grad8: linear-gradient(90deg, #ef476f 2.28%, #f9f649 100%);
+$color-tc-grad9: linear-gradient(270deg, #06d6a0 0%, #2c95d7 100%);
+$color-tc-grad10: linear-gradient(270deg, #9d41c9 0%, #f37593 100%);
+$color-tc-grad11: linear-gradient(90deg, #3023ae 0%, #c86dd7 100%);
+$color-tc-grad12: linear-gradient(90deg, #652385 0%, #8c384c 100%);
+$color-tc-grad13: linear-gradient(90deg, #219174 0%, #b98f31 100%);
+$color-tc-grad14: linear-gradient(0deg, #880152 0%, #be4a1d 100%);
+$color-tc-grad15: linear-gradient(84.45deg, $color-blue-160 2.12%, $color-blue-110 97.43%);
+
+/*  OPACITY */
+$color-black-100-opacity-80: rgba(255, 255, 255, 0.8);
+
+/* SPACING */
+$pad-xs: 4px;
+$pad-sm: 8px;
+$pad-md: 12px;
+$pad-lg: 16px;
+$pad-xl: 20px;
+$pad-xxl: 24px;
+$pad-xxxl: 28px;
+$pad-xxxxl: 32px;
+
+$margin-xs: 4px;
+$margin-sm: 8px;
+$margin-md: 12px;
+$margin-lg: 16px;
+$margin-xl: 20px;
+$margin-xxl: 24px;
+$margin-xxxl: 28px;
+$margin-xxxxl: 32px;
diff --git a/src/styles/_mixins/_variables.scss b/src/styles/_mixins/_variables.scss
index 1d0be4396c..4c2220b860 100644
--- a/src/styles/_mixins/_variables.scss
+++ b/src/styles/_mixins/_variables.scss
@@ -45,3 +45,6 @@ $listing-avatar-white: #f0f0f0;
 $profile-skill-badge: #227681;
 $profile-member-wins: #1e94a3;
 $profile-border-gray: #e9e9e9;
+
+/// https://github.com/topcoder-platform/mfe-customer-work/src-ts/lib/styles/variables/_palette.scss
+@import "variables-platform-ui";

From 4314b49d092f571021d89b5abe3c310d916f04fa Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Tue, 26 Jul 2022 18:56:06 +0700
Subject: [PATCH 04/49] ci: set qa to reskin-profile-settings branch

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index ab9d75fe91..59e4acd705 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -363,7 +363,7 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - reskin-profile-settings
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

From 4dbd8920addf627e565da5d7d27ad2fc57b1d23d Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 30 Jul 2022 17:35:38 +0700
Subject: [PATCH 05/49] improvement(reskin-profile-settings): 2 - experiences &
 skills ff2

---
 .../WorkSkills/Interests/index.jsx            |   8 +-
 .../Skills/AddSkillsModal/index.jsx           | 146 +++++++++---------
 .../Skills/AddSkillsModal/styles.scss         |  27 +++-
 .../WorkSkills/Skills/index.jsx               |   1 -
 4 files changed, 101 insertions(+), 81 deletions(-)
 mode change 100644 => 100755 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx
 mode change 100644 => 100755 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
 mode change 100644 => 100755 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss
 mode change 100644 => 100755 src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx

diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx
old mode 100644
new mode 100755
index a1535528fc..f90fdb97e6
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Interests/index.jsx
@@ -142,10 +142,10 @@ export default class Interests extends ConsentComponent {
   processBasicInfo = (value, profile) => {
     const { newBasicInfo } = this.state;
     if (_.has(profile, 'handle')) {
-      Object.keys(newBasicInfo).reduce((acc, key) => {
-        if (_.has(value, key)) {
-          newBasicInfo[key] = value[key];
-        }
+      Object.keys(/* newBasicInfo */value).reduce((acc, key) => {
+        // if (_.has(value, key)) {
+        newBasicInfo[key] = value[key];
+        // }
         return acc;
       }, {});
     }
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
old mode 100644
new mode 100755
index 7bcb3b85f8..e7fa312d4d
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx
@@ -116,81 +116,83 @@ export default function AddSkillsModal({
 
   return (
     <Modal theme={{ container: styles.modal, overlay: styles['modal-overlay'] }}>
-      <div styleName="modal-content">
-        <h3 styleName="modal-header">
-          Add Skills
-          <GhostButton theme={{ button: styles.close }} onClick={onClose}>
-            <IconClose />
-          </GhostButton>
-        </h3>
-        <div styleName="modal-body">
-          <nav styleName="tabs">
-            <ul>
-              <li
-                styleName={tab === CATEGORIES.design ? 'active' : ''}
-                role="presentation"
-                onClick={() => setTab(CATEGORIES.design)}
-                onKeyDown={() => {}}
-              >
-                { getTabName(CATEGORIES.design) }
-              </li>
-              <li
-                styleName={tab === CATEGORIES.develop ? 'active' : ''}
-                role="presentation"
-                onClick={() => setTab(CATEGORIES.develop)}
-                onKeyDown={() => {}}
-              >
-                { getTabName(CATEGORIES.develop) }
-              </li>
-              <li
-                styleName={tab === CATEGORIES.data_science ? 'active' : ''}
-                role="presentation"
-                onClick={() => setTab(CATEGORIES.data_science)}
-                onKeyDown={() => {}}
-              >
-                { getTabName(CATEGORIES.data_science) }
-              </li>
-              <li
-                styleName={tab === CATEGORIES.qa ? 'active' : ''}
-                role="presentation"
-                onClick={() => setTab(CATEGORIES.qa)}
-                onKeyDown={() => {}}
-              >
-                { getTabName(CATEGORIES.qa) }
-              </li>
-            </ul>
-          </nav>
-          <div styleName="tabContent">
-            <h4 styleName="title">Select {getTabName(tab)} Skills</h4>
+      <div styleName="modal-dialog">
+        <div styleName="modal-content">
+          <h3 styleName="modal-header">
+            Add Skills
+            <GhostButton theme={{ button: styles.close }} onClick={onClose}>
+              <IconClose />
+            </GhostButton>
+          </h3>
+          <div styleName="modal-body">
+            <nav styleName="tabs">
+              <ul>
+                <li
+                  styleName={tab === CATEGORIES.design ? 'active' : ''}
+                  role="presentation"
+                  onClick={() => setTab(CATEGORIES.design)}
+                  onKeyDown={() => {}}
+                >
+                  { getTabName(CATEGORIES.design) }
+                </li>
+                <li
+                  styleName={tab === CATEGORIES.develop ? 'active' : ''}
+                  role="presentation"
+                  onClick={() => setTab(CATEGORIES.develop)}
+                  onKeyDown={() => {}}
+                >
+                  { getTabName(CATEGORIES.develop) }
+                </li>
+                <li
+                  styleName={tab === CATEGORIES.data_science ? 'active' : ''}
+                  role="presentation"
+                  onClick={() => setTab(CATEGORIES.data_science)}
+                  onKeyDown={() => {}}
+                >
+                  { getTabName(CATEGORIES.data_science) }
+                </li>
+                <li
+                  styleName={tab === CATEGORIES.qa ? 'active' : ''}
+                  role="presentation"
+                  onClick={() => setTab(CATEGORIES.qa)}
+                  onKeyDown={() => {}}
+                >
+                  { getTabName(CATEGORIES.qa) }
+                </li>
+              </ul>
+            </nav>
+            <div styleName="tabContent">
+              <h4 styleName="title">Select {getTabName(tab)} Skills</h4>
 
-            <FormField label="Skill">
-              <FormInputSelect
-                options={lookupSkillsOptions}
-                onChange={(skill) => {
-                  handleSkillSelect(skill);
-                  setTempStr(skill.name);
-                  updateDisplayingSkills(skill);
-                }}
-                matchPos="any"
-                matchProp="name"
-                labelKey="name"
-                valueKey="name"
-                placeholder="Add new skill"
-                clearable={false}
-                disabled={disabled}
-                value={tempStr}
-              />
-            </FormField>
+              <FormField label="Skill">
+                <FormInputSelect
+                  options={lookupSkillsOptions}
+                  onChange={(skill) => {
+                    handleSkillSelect(skill);
+                    setTempStr(skill.name);
+                    updateDisplayingSkills(skill);
+                  }}
+                  matchPos="any"
+                  matchProp="name"
+                  labelKey="name"
+                  valueKey="name"
+                  placeholder="Add new skill"
+                  clearable={false}
+                  disabled={disabled}
+                  value={tempStr}
+                />
+              </FormField>
 
-            <ul styleName="skillList">
-              {skillList}
-            </ul>
+              <ul styleName="skillList">
+                {skillList}
+              </ul>
+            </div>
+          </div>
+          <div styleName="modal-footer">
+            <PrimaryButton theme={{ button: styles['button-save'] }} onClick={onSave} disabled={disabled}>
+              Save
+            </PrimaryButton>
           </div>
-        </div>
-        <div styleName="modal-footer">
-          <PrimaryButton theme={{ button: styles['button-save'] }} onClick={onSave} disabled={disabled}>
-            Save
-          </PrimaryButton>
         </div>
       </div>
     </Modal>
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss
old mode 100644
new mode 100755
index ad1e4a41f3..40820c3b49
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss
@@ -27,6 +27,13 @@
   }
 }
 
+.modal-dialog {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+}
+
 .modal-content {
   flex: auto;
   display: flex;
@@ -36,7 +43,9 @@
   background-color: $color-tc-white;
   border-radius: 8px;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-  margin: 32px 0;
+  margin: 32px;
+  width: calc(100% - 64px);
+  min-height: 700px;
 }
 
 .modal-header {
@@ -86,8 +95,6 @@
 
   .modal-content {
     min-height: 568px;
-    margin: 0;
-    border-radius: 0;
   }
 
   .modal-header {
@@ -111,6 +118,14 @@
   }
 }
 
+@include xs-to-sm {
+  .modal-content {
+    width: 100%;
+    margin: 0;
+    border-radius: 0;
+  }
+}
+
 .tabs {
   border-right: 2px solid $color-black-10;
 
@@ -180,9 +195,13 @@
 
   @include xs-to-md {
     flex: 1 1 auto;
-    height: calc(100vh - 386px);
+    height: calc(100vh - 450px);
     overflow-y: auto;
   }
+
+  @include xs-to-sm {
+    height: calc(100vh - 386px);
+  }
 }
 
 .skillListItem {
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx
old mode 100644
new mode 100755
index 42238bafb9..b9f825f0a2
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx
@@ -68,7 +68,6 @@ export default class Skills extends ConsentComponent {
         data_science: [],
         qa: [],
       },
-      showAddSkillsModal: false,
     });
 
     this.processUserSkills(nextProps);

From 0af80b14aba6751872a00fac2b42b85f23f4f2a4 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 30 Jul 2022 17:55:17 +0700
Subject: [PATCH 06/49] improvement(reskin-profile-settings): 4 - tools tab

---
 .gitignore                                    |   2 +
 src/assets/images/profile/ico-edit.svg        |   7 +-
 src/assets/images/profile/ico-education.svg   |   2 +-
 src/assets/images/profile/ico-hobby.svg       |   2 +-
 src/assets/images/profile/ico-trash.svg       |   9 +-
 src/assets/images/profile/ico-work.svg        |   2 +-
 .../images/tools/device-types/desktop.svg     |   5 +-
 .../images/tools/device-types/ico-edit.svg    |   9 +-
 .../images/tools/device-types/other.svg       |   2 +-
 .../images/tools/device-types/smartphone.svg  |   5 +-
 .../images/tools/device-types/trash.svg       |  11 +-
 .../Financial Institution.svg                 |   2 +-
 .../Internet Service Provider.svg             |   2 +-
 .../service-provider-types/Mobile Carrier.svg |   2 +-
 .../tools/service-provider-types/ico-edit.svg |   9 +-
 .../tools/service-provider-types/trash.svg    |   9 +-
 .../images/tools/software-types/ico-edit.svg  |   7 +-
 .../images/tools/software-types/software.svg  |   2 +-
 .../images/tools/software-types/trash.svg     |  11 +-
 .../tools/subscription-types/ico-edit.svg     |   9 +-
 .../subscription-types/subscriptionlist.svg   |   2 +-
 .../images/tools/subscription-types/trash.svg |  11 +-
 .../InputSelect/MenuItem/style.scss           |  17 +-
 src/shared/components/InputSelect/index.jsx   |  72 ++-
 src/shared/components/InputSelect/style.scss  |  75 +++-
 .../WorkplaceList/Item/index.jsx              |  68 ++-
 .../WorkplaceList/Item/styles.scss            | 100 +++--
 .../WorkExperience/WorkplaceList/styles.scss  |   7 +-
 .../WorkExperience/index.jsx                  |  16 +-
 .../WorkExperience/styles.scss                |   2 +-
 .../WorkSkills/Languages/List/Item/index.jsx  |  68 ++-
 .../Languages/List/Item/styles.scss           | 102 ++++-
 .../WorkSkills/Languages/List/styles.scss     |   6 +-
 .../WorkSkills/Languages/index.jsx            |  15 +-
 .../WorkSkills/Languages/styles.scss          |   2 +-
 .../Hobbies/List/Item/index.jsx               |  69 ++-
 .../Hobbies/List/Item/styles.scss             | 112 +++--
 .../ProfileSettings/Hobbies/List/styles.scss  |   6 +-
 .../ProfileSettings/Hobbies/index.jsx         |  18 -
 .../Learning/List/Item/index.jsx              |  68 ++-
 .../Learning/List/Item/styles.scss            | 108 +++--
 .../ProfileSettings/Learning/List/styles.scss |   6 +-
 .../ProfileSettings/Learning/index.jsx        |  19 -
 .../Settings/ProfileSettings/index.jsx        | 400 +++++++++--------
 .../Settings/SettingsBanner/index.jsx         |   4 +-
 .../Tools/Devices/List/Item/index.jsx         |  70 ++-
 .../Tools/Devices/List/Item/styles.scss       | 140 ++++--
 .../Settings/Tools/Devices/List/styles.scss   |   7 +-
 .../Settings/Tools/Devices/index.jsx          | 417 +++++-------------
 .../Settings/Tools/Devices/styles.scss        | 333 ++++----------
 .../ServiceProviders/List/Item/index.jsx      |  68 ++-
 .../ServiceProviders/List/Item/styles.scss    | 139 +++++-
 .../Tools/ServiceProviders/List/styles.scss   |   7 +-
 .../Settings/Tools/ServiceProviders/index.jsx | 269 ++++-------
 .../Tools/ServiceProviders/styles.scss        | 324 ++++----------
 .../Tools/Software/List/Item/index.jsx        |  68 ++-
 .../Tools/Software/List/Item/styles.scss      | 137 +++++-
 .../Settings/Tools/Software/List/index.jsx    |   5 +-
 .../Settings/Tools/Software/List/styles.scss  |  16 +-
 .../Settings/Tools/Software/index.jsx         | 272 ++++--------
 .../Settings/Tools/Software/styles.scss       | 324 ++++----------
 .../Tools/Subscriptions/List/Item/index.jsx   |  67 ++-
 .../Tools/Subscriptions/List/Item/styles.scss | 149 +++++--
 .../Tools/Subscriptions/List/index.jsx        |   5 +-
 .../Tools/Subscriptions/List/styles.scss      |   7 +-
 .../Settings/Tools/Subscriptions/index.jsx    | 239 ++++------
 .../Settings/Tools/Subscriptions/styles.scss  | 281 ++++--------
 .../components/Settings/Tools/index.jsx       | 227 +++++-----
 .../components/Settings/Tools/styles.scss     |  79 ++--
 src/shared/components/Settings/index.jsx      |   6 +
 70 files changed, 2431 insertions(+), 2707 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2094dd84f8..1463bbc9ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,6 +45,8 @@ jspm_packages
 # macOS system files
 *.DS_Store
 
+.env.sh
+
 # Misc files
 .build-info
 .vscode
diff --git a/src/assets/images/profile/ico-edit.svg b/src/assets/images/profile/ico-edit.svg
index b3e37a33dc..87e715e155 100644
--- a/src/assets/images/profile/ico-edit.svg
+++ b/src/assets/images/profile/ico-edit.svg
@@ -1,6 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" width="10px" height="10px">
-<g id="surface1">
-<path style=" " d="M 12.03125 2.023438 C 11.535156 2.023438 11.066406 2.269531 10.675781 2.65625 L 2.5625 10.726563 L 1.207031 14.785156 L 5.265625 13.433594 L 5.351563 13.351563 L 13.386719 5.367188 C 13.773438 4.976563 14.015625 4.507813 14.015625 4.011719 C 14.015625 3.515625 13.773438 3.046875 13.386719 2.65625 C 12.996094 2.269531 12.527344 2.023438 12.03125 2.023438 Z M 10.027344 4.710938 L 11.320313 6.007813 L 4.726563 12.5625 L 2.789063 13.207031 L 3.4375 11.265625 Z "/>
-</g>
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5607 2.43934C16.9749 1.85355 16.0251 1.85355 15.4393 2.43934L14.6465 3.23223L16.7678 5.35355L17.5607 4.56066C18.1465 3.97487 18.1465 3.02513 17.5607 2.43934ZM18.9749 5.97487C20.3417 4.60804 20.3417 2.39196 18.9749 1.02513C17.608 -0.341709 15.392 -0.341709 14.0251 1.02513L12.5253 2.52494L0.292954 14.7573C0.105418 14.9448 6.10352e-05 15.1992 6.10352e-05 15.4644V19.0355C6.10352e-05 19.5878 0.447776 20.0355 1.00006 20.0355H4.50006C4.76528 20.0355 5.01963 19.9301 5.20717 19.7426L18.9749 5.97487ZM15.3536 6.76777L13.2322 4.64645L2.00006 15.8786V18.0355H4.08585L15.3536 6.76777Z" fill="#137D60"/>
 </svg>
diff --git a/src/assets/images/profile/ico-education.svg b/src/assets/images/profile/ico-education.svg
index a20622e467..7994fd21e1 100644
--- a/src/assets/images/profile/ico-education.svg
+++ b/src/assets/images/profile/ico-education.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 50 50">
     <g fill="none" fill-rule="evenodd">
         <rect width="34" height="40" x="1" fill="#CEE6FF" stroke="#444" stroke-width="2" rx="6"/>
         <path fill="#FFF" stroke="#444" stroke-width="2" d="M35 33H10v2c0 1.94-.795 3.72-2.1 5H30a5 5 0 0 0 5-5v-2zM5.03 22.258l.303-.86a6.953 6.953 0 0 0-.584-.177l-.222.862H4v.258h.54l.21.816c.136-.035.275-.064.415-.088l-.136-.81z"/>
diff --git a/src/assets/images/profile/ico-hobby.svg b/src/assets/images/profile/ico-hobby.svg
index d5a6f56238..ee862b6a27 100644
--- a/src/assets/images/profile/ico-hobby.svg
+++ b/src/assets/images/profile/ico-hobby.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 50 50">
     <g fill="none" fill-rule="evenodd" stroke="#444" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
         <path d="M1 49h48V4.273H1zM14.09 1v6.545M25 1v6.545M35.91 1v6.545"/>
         <path fill="#CEF0AF" d="M8.636 42.455l7.637-13.091 6.545 6.545L31.545 25l9.819 17.455z"/>
diff --git a/src/assets/images/profile/ico-trash.svg b/src/assets/images/profile/ico-trash.svg
index aa096be689..4253c2a03f 100644
--- a/src/assets/images/profile/ico-trash.svg
+++ b/src/assets/images/profile/ico-trash.svg
@@ -1,8 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 15 15">
-    <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
-        <path d="M0 3.75h15M9.375 12.188V6.561"/>
-        <rect width="11.125" height="10.188" x="1.938" y="3.813" rx="1"/>
-        <rect width="5.5" height="2.688" x="4.75" y="1" rx="1"/>
-        <path d="M5.625 12.188V6.561"/>
-    </g>
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5 0.895431 5.89543 0 7 0H11C12.1046 0 13 0.895431 13 2V4H15.9897C15.9959 3.99994 16.0021 3.99994 16.0083 4H17C17.5523 4 18 4.44772 18 5C18 5.55228 17.5523 6 17 6H16.9311L16.1301 17.2137C16.018 18.7837 14.7117 20 13.1378 20H4.86224C3.28832 20 1.982 18.7837 1.86986 17.2137L1.06888 6H1C0.447715 6 0 5.55228 0 5C0 4.44772 0.447715 4 1 4H1.99174C1.99795 3.99994 2.00414 3.99994 2.01032 4H5V2ZM3.07398 6L3.86478 17.0712C3.90216 17.5946 4.3376 18 4.86224 18H13.1378C13.6624 18 14.0978 17.5946 14.1352 17.0712L14.926 6H3.07398ZM11 4H7V2H11V4ZM7 8C7.55228 8 8 8.44772 8 9V15C8 15.5523 7.55228 16 7 16C6.44772 16 6 15.5523 6 15V9C6 8.44772 6.44772 8 7 8ZM11 8C11.5523 8 12 8.44772 12 9V15C12 15.5523 11.5523 16 11 16C10.4477 16 10 15.5523 10 15V9C10 8.44772 10.4477 8 11 8Z" fill="#137D60"/>
 </svg>
diff --git a/src/assets/images/profile/ico-work.svg b/src/assets/images/profile/ico-work.svg
index e0f3f1dc6f..3f5e0a2f7b 100644
--- a/src/assets/images/profile/ico-work.svg
+++ b/src/assets/images/profile/ico-work.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 50 50">
     <g fill="none" fill-rule="evenodd">
         <path fill="#444" d="M27 3v16h-2V3z"/>
         <path fill="#FFF" stroke="#444" stroke-width="2" d="M13 8h26v41H13z"/>
diff --git a/src/assets/images/tools/device-types/desktop.svg b/src/assets/images/tools/device-types/desktop.svg
index cc371322ff..1755a75818 100644
--- a/src/assets/images/tools/device-types/desktop.svg
+++ b/src/assets/images/tools/device-types/desktop.svg
@@ -1 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?><svg width="45px" height="29px" viewBox="0 0 45 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>computer</title><desc>Created with Sketch.</desc><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="device/desktop" fill="#000000" fill-rule="nonzero"><g id="computer" transform="translate(0.000000, -0.000000)"><path d="M10.0660635,24.6076163 L9.20196293,24.6076163 C8.03046919,24.6076163 7.07712543,25.554496 7.07712543,26.7180465 L7.07712543,27.4215233 C7.07712543,27.8105459 7.39372622,28.125 7.7854046,28.125 L21.9467383,28.125 C22.3384166,28.125 22.6550174,27.8105459 22.6550174,27.4215233 L22.6550174,26.7180465 C22.6550174,25.554496 21.7016737,24.6076163 20.5301799,24.6076163 L19.6660793,24.6076163 L19.312648,23.2034767 L27.6073054,23.2034767 C28.7787991,23.2034767 29.7321429,22.256597 29.7321429,21.0930465 L29.7321429,2.11043022 C29.7321429,0.94687969 28.7787991,0 27.6073054,0 L2.1248375,0 C0.953343758,0 0,0.94687969 0,2.11043022 L0,21.0930465 C0,22.256597 0.953343758,23.2034767 2.1248375,23.2034767 L10.4194948,23.2034767 L10.0660635,24.6076163 Z M9.20196293,26.0145698 L20.5301799,26.0145698 C20.92115,26.0145698 21.2384591,26.3297274 21.2384591,26.7180465 L8.49368377,26.7180465 C8.49368377,26.3297274 8.81099283,26.0145698 9.20196293,26.0145698 Z M18.2070243,24.6076163 L11.5251186,24.6076163 L11.8785499,23.2034767 L17.853593,23.2034767 L18.2070243,24.6076163 Z M2.1248375,1.40695348 L27.6080136,1.40695348 C27.9989837,1.40695348 28.3162928,1.72211106 28.3162928,2.11043022 L28.3162928,18.9826163 L1.41655833,18.9826163 L1.41655833,2.11043022 C1.41655833,1.72211106 1.7338674,1.40695348 2.1248375,1.40695348 Z M1.41655833,21.0930465 L1.41655833,20.3895698 L14.880237,20.3895698 C14.4892669,20.3895698 14.1762075,20.7040239 14.1762075,21.0930465 C14.1762075,21.4820692 14.4963497,21.7965233 14.8880281,21.7965233 C15.2789982,21.7965233 15.5963072,21.4820692 15.5963072,21.0930465 C15.5963072,20.7040239 15.2789982,20.3895698 14.8880281,20.3895698 L28.3162928,20.3895698 L28.3162928,21.0930465 C28.3162928,21.4813657 27.9989837,21.7965233 27.6080136,21.7965233 L14.8873198,21.7965233 L2.1248375,21.7965233 C1.7338674,21.7965233 1.41655833,21.4813657 1.41655833,21.0930465 Z" id="Shape"></path><path d="M42.9509953,0 L33.3882904,0 C32.2586058,0 31.3392857,0.94687969 31.3392857,2.11043022 L31.3392857,26.0145698 C31.3392857,27.1781203 32.2586058,28.125 33.3882904,28.125 L42.9509953,28.125 C44.0806799,28.125 45,27.1781203 45,26.0145698 L45,2.11043022 C45,0.946176213 44.0806799,0 42.9509953,0 Z M32.7052888,4.21804652 L43.6339969,4.21804652 L43.6339969,4.92011631 L32.7052888,4.92011631 L32.7052888,4.21804652 Z M33.3882904,1.40695348 L42.9509953,1.40695348 C43.3280122,1.40695348 43.6339969,1.72211106 43.6339969,2.11043022 L43.6339969,2.81109305 L32.7052888,2.81109305 L32.7052888,2.11043022 C32.7052888,1.72211106 33.0112735,1.40695348 33.3882904,1.40695348 L33.3882904,1.40695348 Z M42.9509953,26.7180465 L33.3882904,26.7180465 C33.0112735,26.7180465 32.7052888,26.4028889 32.7052888,26.0145698 L32.7052888,6.32706978 L43.6339969,6.32706978 L43.6339969,26.0145698 C43.6339969,26.4028889 43.3280122,26.7180465 42.9509953,26.7180465 Z" id="Shape"></path><path d="M38.1696429,15.2678571 C39.2772321,15.2678571 40.1785714,14.3665179 40.1785714,13.2589286 C40.1785714,12.1513393 39.2772321,11.25 38.1696429,11.25 C37.0620536,11.25 36.1607143,12.1513393 36.1607143,13.2589286 C36.1607143,14.3665179 37.0620536,15.2678571 38.1696429,15.2678571 Z M38.1696429,12.5892857 C38.5392857,12.5892857 38.8392857,12.8892857 38.8392857,13.2589286 C38.8392857,13.6285714 38.5392857,13.9285714 38.1696429,13.9285714 C37.8,13.9285714 37.5,13.6285714 37.5,13.2589286 C37.5,12.8892857 37.8,12.5892857 38.1696429,12.5892857 Z" id="Shape"></path><path d="M40.2589286,19.2857143 L34.4732143,19.2857143 C34.0732768,19.2857143 33.75,19.4653125 33.75,19.6875 C33.75,19.9096875 34.0732768,20.0892857 34.4732143,20.0892857 L40.2589286,20.0892857 C40.6588661,20.0892857 40.9821429,19.9096875 40.9821429,19.6875 C40.9821429,19.4653125 40.6588661,19.2857143 40.2589286,19.2857143 Z" id="Path"></path><path d="M40.2589286,20.8928571 L34.4732143,20.8928571 C34.0732768,20.8928571 33.75,21.0724554 33.75,21.2946429 C33.75,21.5168304 34.0732768,21.6964286 34.4732143,21.6964286 L40.2589286,21.6964286 C40.6588661,21.6964286 40.9821429,21.5168304 40.9821429,21.2946429 C40.9821429,21.0724554 40.6588661,20.8928571 40.2589286,20.8928571 Z" id="Path"></path><path d="M40.2589286,23.3035714 L34.4732143,23.3035714 C34.0732768,23.3035714 33.75,23.4831696 33.75,23.7053571 C33.75,23.9275446 34.0732768,24.1071429 34.4732143,24.1071429 L40.2589286,24.1071429 C40.6588661,24.1071429 40.9821429,23.9275446 40.9821429,23.7053571 C40.9821429,23.4831696 40.6588661,23.3035714 40.2589286,23.3035714 Z" id="Path"></path></g></g></g></svg>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666687 4.66669C0.666687 2.45755 2.45755 0.666687 4.66669 0.666687H23.3334C25.5425 0.666687 27.3334 2.45755 27.3334 4.66669V18C27.3334 20.2092 25.5425 22 23.3334 22H18.7077L19.204 23.985L20.2762 25.0572C20.6575 25.4385 20.7716 26.012 20.5652 26.5103C20.3588 27.0085 19.8726 27.3334 19.3334 27.3334H8.66669C8.1274 27.3334 7.64122 27.0085 7.43485 26.5103C7.22847 26.012 7.34255 25.4385 7.72388 25.0572L8.79607 23.985L9.29232 22H4.66669C2.45755 22 0.666687 20.2092 0.666687 18V4.66669ZM3.33335 16.6667V18C3.33335 18.7364 3.93031 19.3334 4.66669 19.3334H10.9701C10.9893 19.3329 11.0086 19.3329 11.0279 19.3334H16.9721C16.9914 19.3329 17.0107 19.3329 17.0299 19.3334H23.3334C24.0697 19.3334 24.6667 18.7364 24.6667 18V16.6667H3.33335ZM24.6667 14H3.33335V4.66669C3.33335 3.93031 3.93031 3.33335 4.66669 3.33335H23.3334C24.0697 3.33335 24.6667 3.93031 24.6667 4.66669V14ZM15.959 22H12.0411L11.3744 24.6667H16.6257L15.959 22Z" fill="#2A2A2A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666687 4.66669C0.666687 2.45755 2.45755 0.666687 4.66669 0.666687H23.3334C25.5425 0.666687 27.3334 2.45755 27.3334 4.66669V18C27.3334 20.2092 25.5425 22 23.3334 22H18.7077L19.204 23.985L20.2762 25.0572C20.6575 25.4385 20.7716 26.012 20.5652 26.5103C20.3588 27.0085 19.8726 27.3334 19.3334 27.3334H8.66669C8.1274 27.3334 7.64122 27.0085 7.43485 26.5103C7.22847 26.012 7.34255 25.4385 7.72388 25.0572L8.79607 23.985L9.29232 22H4.66669C2.45755 22 0.666687 20.2092 0.666687 18V4.66669ZM3.33335 16.6667V18C3.33335 18.7364 3.93031 19.3334 4.66669 19.3334H10.9701C10.9893 19.3329 11.0086 19.3329 11.0279 19.3334H16.9721C16.9914 19.3329 17.0107 19.3329 17.0299 19.3334H23.3334C24.0697 19.3334 24.6667 18.7364 24.6667 18V16.6667H3.33335ZM24.6667 14H3.33335V4.66669C3.33335 3.93031 3.93031 3.33335 4.66669 3.33335H23.3334C24.0697 3.33335 24.6667 3.93031 24.6667 4.66669V14ZM15.959 22H12.0411L11.3744 24.6667H16.6257L15.959 22Z" fill="black" fill-opacity="0.2"/>
+</svg>
diff --git a/src/assets/images/tools/device-types/ico-edit.svg b/src/assets/images/tools/device-types/ico-edit.svg
index b3e37a33dc..a97eb0345c 100644
--- a/src/assets/images/tools/device-types/ico-edit.svg
+++ b/src/assets/images/tools/device-types/ico-edit.svg
@@ -1,6 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" width="10px" height="10px">
-<g id="surface1">
-<path style=" " d="M 12.03125 2.023438 C 11.535156 2.023438 11.066406 2.269531 10.675781 2.65625 L 2.5625 10.726563 L 1.207031 14.785156 L 5.265625 13.433594 L 5.351563 13.351563 L 13.386719 5.367188 C 13.773438 4.976563 14.015625 4.507813 14.015625 4.011719 C 14.015625 3.515625 13.773438 3.046875 13.386719 2.65625 C 12.996094 2.269531 12.527344 2.023438 12.03125 2.023438 Z M 10.027344 4.710938 L 11.320313 6.007813 L 4.726563 12.5625 L 2.789063 13.207031 L 3.4375 11.265625 Z "/>
-</g>
-</svg>
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5607 2.43934C16.9749 1.85355 16.0251 1.85355 15.4393 2.43934L14.6465 3.23223L16.7678 5.35355L17.5607 4.56066C18.1465 3.97487 18.1465 3.02513 17.5607 2.43934ZM18.9749 5.97487C20.3417 4.60804 20.3417 2.39196 18.9749 1.02513C17.608 -0.341709 15.392 -0.341709 14.0251 1.02513L12.5253 2.52494L0.292954 14.7573C0.105418 14.9448 6.10352e-05 15.1992 6.10352e-05 15.4644V19.0355C6.10352e-05 19.5878 0.447776 20.0355 1.00006 20.0355H4.50006C4.76528 20.0355 5.01963 19.9301 5.20717 19.7426L18.9749 5.97487ZM15.3536 6.76777L13.2322 4.64645L2.00006 15.8786V18.0355H4.08585L15.3536 6.76777Z" fill="#137D60"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/tools/device-types/other.svg b/src/assets/images/tools/device-types/other.svg
index 9a99d31b12..1fca19866f 100644
--- a/src/assets/images/tools/device-types/other.svg
+++ b/src/assets/images/tools/device-types/other.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 50 50">
     <g fill="none" fill-rule="evenodd">
         <path fill="#FFF" d="M1 8h48v33H1z"/>
         <path stroke="#444" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M43.182 7.818H50v32.955H19.318M6.818 40.773H0V7.818h23.864"/>
diff --git a/src/assets/images/tools/device-types/smartphone.svg b/src/assets/images/tools/device-types/smartphone.svg
index 8ed43adf1a..c8b32fa44e 100644
--- a/src/assets/images/tools/device-types/smartphone.svg
+++ b/src/assets/images/tools/device-types/smartphone.svg
@@ -1 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?><svg width="20px" height="36px" viewBox="0 0 20 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>002-mobile-phone-variant</title><desc>Created with Sketch.</desc><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="device/mobile" fill="#000000" fill-rule="nonzero"><g id="002-mobile-phone-variant"><path d="M17.5226506,0 L2.44497992,0 C1.10289157,0 0.0108433735,1.09204819 0.0108433735,2.43413655 L0.0108433735,33.4371084 C0.0108433735,34.7790361 1.10289157,35.8713253 2.44497992,35.8713253 L17.5226506,35.8713253 C18.8649799,35.8713253 19.9568675,34.7790361 19.9568675,33.4371084 L19.9568675,2.43413655 C19.9568675,1.09204819 18.8649799,0 17.5226506,0 Z M19.0053012,33.4371084 C19.0053012,34.2540562 18.3400803,34.9192771 17.5226506,34.9192771 L2.44497992,34.9192771 C1.62763052,34.9192771 0.962570281,34.2540562 0.962570281,33.4371084 L0.962570281,2.43413655 C0.962570281,1.61678715 1.6275502,0.951726908 2.44497992,0.951726908 L17.5226506,0.951726908 C18.3400803,0.951726908 19.0053012,1.61678715 19.0053012,2.43413655 L19.0053012,33.4371084 L19.0053012,33.4371084 Z" id="Shape"></path><path d="M18.1100402,3.95815261 L1.79261044,3.95815261 C1.66128514,3.95815261 1.55461847,4.06481928 1.55461847,4.19614458 L1.55461847,31.4133333 C1.55461847,31.5450602 1.66128514,31.6514859 1.79261044,31.6514859 L18.1104418,31.6514859 C18.2418474,31.6514859 18.3486747,31.5450602 18.3486747,31.4133333 L18.3486747,4.1962249 C18.3478715,4.06481928 18.2409639,3.95815261 18.1100402,3.95815261 Z M17.2372691,31.175502 L2.66522088,31.175502 C2.31485944,31.175502 2.03060241,30.891245 2.03060241,30.5408835 L2.03060241,5.06859438 C2.03060241,4.7184739 2.31493976,4.43421687 2.66522088,4.43421687 L17.237992,4.43421687 C17.5882731,4.43421687 17.8726104,4.7184739 17.8726104,5.06859438 L17.8726104,30.5408835 C17.8718072,30.8920482 17.5883534,31.175502 17.2372691,31.175502 Z" id="Shape"></path><path d="M8.94008032,2.50899598 L11.6167871,2.50899598 C11.7477108,2.50899598 11.8545382,2.40232932 11.8545382,2.27100402 C11.8545382,2.13967871 11.7477108,2.03301205 11.6167871,2.03301205 L8.94008032,2.03301205 C8.80875502,2.03301205 8.70208835,2.13967871 8.70208835,2.27100402 C8.70208835,2.40240964 8.80875502,2.50899598 8.94008032,2.50899598 Z" id="Path"></path><path d="M11.5841767,32.4313253 L8.84305221,32.4313253 C8.28016064,32.4313253 7.82192771,32.8893976 7.82192771,33.4522892 L7.82192771,33.6154217 C7.82192771,34.1786345 8.28016064,34.6371084 8.84305221,34.6371084 L11.5841767,34.6371084 C12.146988,34.6371084 12.6050602,34.1786345 12.6050602,33.6154217 L12.6050602,33.4522892 C12.6050602,32.8893976 12.1469076,32.4313253 11.5841767,32.4313253 Z M12.1294779,33.6154217 C12.1294779,33.9159839 11.8843373,34.1611245 11.5841767,34.1611245 L8.84305221,34.1611245 C8.542249,34.1611245 8.29791165,33.9159839 8.29791165,33.6154217 L8.29791165,33.4522892 C8.29791165,33.1516466 8.54281124,32.9073092 8.84305221,32.9073092 L11.5841767,32.9073092 C11.8851406,32.9073092 12.1294779,33.1516466 12.1294779,33.4522892 L12.1294779,33.6154217 Z" id="Shape"></path><path d="M5.63413655,33.2029719 L4.4837751,33.2029719 C4.43991968,33.2029719 4.40441767,33.2384739 4.40441767,33.2820884 C4.40441767,33.3257831 4.43991968,33.3616064 4.4837751,33.3616064 L5.63413655,33.3616064 C5.67799197,33.3616064 5.71349398,33.3257831 5.71349398,33.2820884 C5.71341365,33.2385542 5.67791165,33.2029719 5.63413655,33.2029719 Z" id="Path"></path><path d="M5.54843373,33.5583133 L4.56939759,33.5583133 C4.52554217,33.5583133 4.49004016,33.5937349 4.49004016,33.6373494 C4.49004016,33.6814458 4.52554217,33.7168675 4.56939759,33.7168675 L5.54843373,33.7168675 C5.59228916,33.7168675 5.62779116,33.6814458 5.62779116,33.6373494 C5.62779116,33.5938153 5.59172691,33.5583133 5.54843373,33.5583133 Z" id="Path"></path><path d="M5.4811245,33.9122892 L4.63662651,33.9122892 C4.59277108,33.9122892 4.55726908,33.9477108 4.55726908,33.9914056 C4.55726908,34.0354217 4.59277108,34.0709237 4.63662651,34.0709237 L5.4811245,34.0709237 C5.52497992,34.0709237 5.56048193,34.0354217 5.56048193,33.9914056 C5.56048193,33.9486747 5.52441767,33.9122892 5.4811245,33.9122892 Z" id="Path"></path><path d="M15.3418474,33.2891566 C15.3001606,33.2891566 15.2660241,33.2536546 15.2660241,33.2100402 C15.2660241,33.1659438 15.1738153,33.1831325 15.0600803,33.2491566 C14.9466667,33.3147791 14.9466667,33.4212851 15.0600803,33.486506 C15.1738153,33.5517269 15.2660241,33.5701205 15.2660241,33.526506 C15.2660241,33.4832932 15.300241,33.4477912 15.3418474,33.4477912 L15.4180723,33.4477912 C15.6804016,33.4477912 15.9017671,33.5824096 15.9017671,33.7414458 C15.9017671,33.9008835 15.6803213,34.035502 15.4180723,34.035502 L15.0506024,34.035502 C15.006988,34.035502 14.9714859,34.071004 14.9714859,34.1146185 C14.9714859,34.1587149 15.006988,34.1941365 15.0506024,34.1941365 L15.4180723,34.1941365 C15.7778313,34.1941365 16.0604819,33.995502 16.0604819,33.7413655 C16.0604819,33.4877108 15.7786345,33.2890763 15.4180723,33.2890763 C15.4180723,33.2891566 15.3841767,33.2891566 15.3418474,33.2891566 Z" id="Path"></path></g></g></g></svg>
+<svg width="20" height="28" viewBox="0 0 20 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666687 4.66666C0.666687 2.45752 2.45755 0.666656 4.66669 0.666656H15.3334C17.5425 0.666656 19.3334 2.45752 19.3334 4.66666V23.3333C19.3334 25.5425 17.5425 27.3333 15.3334 27.3333H4.66669C2.45755 27.3333 0.666687 25.5425 0.666687 23.3333V4.66666ZM4.66669 3.33332C3.93031 3.33332 3.33335 3.93028 3.33335 4.66666V23.3333C3.33335 24.0697 3.93031 24.6667 4.66669 24.6667H15.3334C16.0697 24.6667 16.6667 24.0697 16.6667 23.3333V4.66666C16.6667 3.93028 16.0697 3.33332 15.3334 3.33332H4.66669ZM8.66669 22C8.66669 21.2636 9.26364 20.6667 10 20.6667H10.0134C10.7497 20.6667 11.3467 21.2636 11.3467 22C11.3467 22.7364 10.7497 23.3333 10.0134 23.3333H10C9.26364 23.3333 8.66669 22.7364 8.66669 22Z" fill="#2A2A2A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666687 4.66666C0.666687 2.45752 2.45755 0.666656 4.66669 0.666656H15.3334C17.5425 0.666656 19.3334 2.45752 19.3334 4.66666V23.3333C19.3334 25.5425 17.5425 27.3333 15.3334 27.3333H4.66669C2.45755 27.3333 0.666687 25.5425 0.666687 23.3333V4.66666ZM4.66669 3.33332C3.93031 3.33332 3.33335 3.93028 3.33335 4.66666V23.3333C3.33335 24.0697 3.93031 24.6667 4.66669 24.6667H15.3334C16.0697 24.6667 16.6667 24.0697 16.6667 23.3333V4.66666C16.6667 3.93028 16.0697 3.33332 15.3334 3.33332H4.66669ZM8.66669 22C8.66669 21.2636 9.26364 20.6667 10 20.6667H10.0134C10.7497 20.6667 11.3467 21.2636 11.3467 22C11.3467 22.7364 10.7497 23.3333 10.0134 23.3333H10C9.26364 23.3333 8.66669 22.7364 8.66669 22Z" fill="black" fill-opacity="0.2"/>
+</svg>
diff --git a/src/assets/images/tools/device-types/trash.svg b/src/assets/images/tools/device-types/trash.svg
index aa096be689..763bddc9f6 100644
--- a/src/assets/images/tools/device-types/trash.svg
+++ b/src/assets/images/tools/device-types/trash.svg
@@ -1,8 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 15 15">
-    <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
-        <path d="M0 3.75h15M9.375 12.188V6.561"/>
-        <rect width="11.125" height="10.188" x="1.938" y="3.813" rx="1"/>
-        <rect width="5.5" height="2.688" x="4.75" y="1" rx="1"/>
-        <path d="M5.625 12.188V6.561"/>
-    </g>
-</svg>
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5 0.895431 5.89543 0 7 0H11C12.1046 0 13 0.895431 13 2V4H15.9897C15.9959 3.99994 16.0021 3.99994 16.0083 4H17C17.5523 4 18 4.44772 18 5C18 5.55228 17.5523 6 17 6H16.9311L16.1301 17.2137C16.018 18.7837 14.7117 20 13.1378 20H4.86224C3.28832 20 1.982 18.7837 1.86986 17.2137L1.06888 6H1C0.447715 6 0 5.55228 0 5C0 4.44772 0.447715 4 1 4H1.99174C1.99795 3.99994 2.00414 3.99994 2.01032 4H5V2ZM3.07398 6L3.86478 17.0712C3.90216 17.5946 4.3376 18 4.86224 18H13.1378C13.6624 18 14.0978 17.5946 14.1352 17.0712L14.926 6H3.07398ZM11 4H7V2H11V4ZM7 8C7.55228 8 8 8.44772 8 9V15C8 15.5523 7.55228 16 7 16C6.44772 16 6 15.5523 6 15V9C6 8.44772 6.44772 8 7 8ZM11 8C11.5523 8 12 8.44772 12 9V15C12 15.5523 11.5523 16 11 16C10.4477 16 10 15.5523 10 15V9C10 8.44772 10.4477 8 11 8Z" fill="#137D60"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/tools/service-provider-types/Financial Institution.svg b/src/assets/images/tools/service-provider-types/Financial Institution.svg
index 69b4d1d8f8..5736f8c0fe 100644
--- a/src/assets/images/tools/service-provider-types/Financial Institution.svg	
+++ b/src/assets/images/tools/service-provider-types/Financial Institution.svg	
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 50 50">
     <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
         <path fill="#FFE3CF" d="M29.464 39.404c0 2.476-1.981 4.484-4.425 4.484-2.443 0-4.424-2.008-4.424-4.484s1.981-4.484 4.424-4.484c2.444 0 4.425 2.008 4.425 4.484z"/>
         <path d="M10.706 27.017a19.066 19.066 0 0 1 14.334-6.445 19.064 19.064 0 0 1 14.38 6.5M.21 17.052C6.326 10.266 15.184 6 25.04 6c9.798 0 18.61 4.216 24.72 10.933"/>
diff --git a/src/assets/images/tools/service-provider-types/Internet Service Provider.svg b/src/assets/images/tools/service-provider-types/Internet Service Provider.svg
index 69b4d1d8f8..5736f8c0fe 100644
--- a/src/assets/images/tools/service-provider-types/Internet Service Provider.svg	
+++ b/src/assets/images/tools/service-provider-types/Internet Service Provider.svg	
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 50 50">
     <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
         <path fill="#FFE3CF" d="M29.464 39.404c0 2.476-1.981 4.484-4.425 4.484-2.443 0-4.424-2.008-4.424-4.484s1.981-4.484 4.424-4.484c2.444 0 4.425 2.008 4.425 4.484z"/>
         <path d="M10.706 27.017a19.066 19.066 0 0 1 14.334-6.445 19.064 19.064 0 0 1 14.38 6.5M.21 17.052C6.326 10.266 15.184 6 25.04 6c9.798 0 18.61 4.216 24.72 10.933"/>
diff --git a/src/assets/images/tools/service-provider-types/Mobile Carrier.svg b/src/assets/images/tools/service-provider-types/Mobile Carrier.svg
index 6e737a33e4..eb23554ab3 100644
--- a/src/assets/images/tools/service-provider-types/Mobile Carrier.svg	
+++ b/src/assets/images/tools/service-provider-types/Mobile Carrier.svg	
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 50 50">
     <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
         <path fill="#CEF0AF" d="M0 43.677h11.538V29.484H0zM19.23 43.71h11.54V16.613H19.23z"/>
         <path d="M38.462 43.71H50V5H38.462z"/>
diff --git a/src/assets/images/tools/service-provider-types/ico-edit.svg b/src/assets/images/tools/service-provider-types/ico-edit.svg
index b3e37a33dc..a97eb0345c 100644
--- a/src/assets/images/tools/service-provider-types/ico-edit.svg
+++ b/src/assets/images/tools/service-provider-types/ico-edit.svg
@@ -1,6 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" width="10px" height="10px">
-<g id="surface1">
-<path style=" " d="M 12.03125 2.023438 C 11.535156 2.023438 11.066406 2.269531 10.675781 2.65625 L 2.5625 10.726563 L 1.207031 14.785156 L 5.265625 13.433594 L 5.351563 13.351563 L 13.386719 5.367188 C 13.773438 4.976563 14.015625 4.507813 14.015625 4.011719 C 14.015625 3.515625 13.773438 3.046875 13.386719 2.65625 C 12.996094 2.269531 12.527344 2.023438 12.03125 2.023438 Z M 10.027344 4.710938 L 11.320313 6.007813 L 4.726563 12.5625 L 2.789063 13.207031 L 3.4375 11.265625 Z "/>
-</g>
-</svg>
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5607 2.43934C16.9749 1.85355 16.0251 1.85355 15.4393 2.43934L14.6465 3.23223L16.7678 5.35355L17.5607 4.56066C18.1465 3.97487 18.1465 3.02513 17.5607 2.43934ZM18.9749 5.97487C20.3417 4.60804 20.3417 2.39196 18.9749 1.02513C17.608 -0.341709 15.392 -0.341709 14.0251 1.02513L12.5253 2.52494L0.292954 14.7573C0.105418 14.9448 6.10352e-05 15.1992 6.10352e-05 15.4644V19.0355C6.10352e-05 19.5878 0.447776 20.0355 1.00006 20.0355H4.50006C4.76528 20.0355 5.01963 19.9301 5.20717 19.7426L18.9749 5.97487ZM15.3536 6.76777L13.2322 4.64645L2.00006 15.8786V18.0355H4.08585L15.3536 6.76777Z" fill="#137D60"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/tools/service-provider-types/trash.svg b/src/assets/images/tools/service-provider-types/trash.svg
index aa096be689..4253c2a03f 100644
--- a/src/assets/images/tools/service-provider-types/trash.svg
+++ b/src/assets/images/tools/service-provider-types/trash.svg
@@ -1,8 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 15 15">
-    <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
-        <path d="M0 3.75h15M9.375 12.188V6.561"/>
-        <rect width="11.125" height="10.188" x="1.938" y="3.813" rx="1"/>
-        <rect width="5.5" height="2.688" x="4.75" y="1" rx="1"/>
-        <path d="M5.625 12.188V6.561"/>
-    </g>
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5 0.895431 5.89543 0 7 0H11C12.1046 0 13 0.895431 13 2V4H15.9897C15.9959 3.99994 16.0021 3.99994 16.0083 4H17C17.5523 4 18 4.44772 18 5C18 5.55228 17.5523 6 17 6H16.9311L16.1301 17.2137C16.018 18.7837 14.7117 20 13.1378 20H4.86224C3.28832 20 1.982 18.7837 1.86986 17.2137L1.06888 6H1C0.447715 6 0 5.55228 0 5C0 4.44772 0.447715 4 1 4H1.99174C1.99795 3.99994 2.00414 3.99994 2.01032 4H5V2ZM3.07398 6L3.86478 17.0712C3.90216 17.5946 4.3376 18 4.86224 18H13.1378C13.6624 18 14.0978 17.5946 14.1352 17.0712L14.926 6H3.07398ZM11 4H7V2H11V4ZM7 8C7.55228 8 8 8.44772 8 9V15C8 15.5523 7.55228 16 7 16C6.44772 16 6 15.5523 6 15V9C6 8.44772 6.44772 8 7 8ZM11 8C11.5523 8 12 8.44772 12 9V15C12 15.5523 11.5523 16 11 16C10.4477 16 10 15.5523 10 15V9C10 8.44772 10.4477 8 11 8Z" fill="#137D60"/>
 </svg>
diff --git a/src/assets/images/tools/software-types/ico-edit.svg b/src/assets/images/tools/software-types/ico-edit.svg
index b3e37a33dc..87e715e155 100644
--- a/src/assets/images/tools/software-types/ico-edit.svg
+++ b/src/assets/images/tools/software-types/ico-edit.svg
@@ -1,6 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" width="10px" height="10px">
-<g id="surface1">
-<path style=" " d="M 12.03125 2.023438 C 11.535156 2.023438 11.066406 2.269531 10.675781 2.65625 L 2.5625 10.726563 L 1.207031 14.785156 L 5.265625 13.433594 L 5.351563 13.351563 L 13.386719 5.367188 C 13.773438 4.976563 14.015625 4.507813 14.015625 4.011719 C 14.015625 3.515625 13.773438 3.046875 13.386719 2.65625 C 12.996094 2.269531 12.527344 2.023438 12.03125 2.023438 Z M 10.027344 4.710938 L 11.320313 6.007813 L 4.726563 12.5625 L 2.789063 13.207031 L 3.4375 11.265625 Z "/>
-</g>
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5607 2.43934C16.9749 1.85355 16.0251 1.85355 15.4393 2.43934L14.6465 3.23223L16.7678 5.35355L17.5607 4.56066C18.1465 3.97487 18.1465 3.02513 17.5607 2.43934ZM18.9749 5.97487C20.3417 4.60804 20.3417 2.39196 18.9749 1.02513C17.608 -0.341709 15.392 -0.341709 14.0251 1.02513L12.5253 2.52494L0.292954 14.7573C0.105418 14.9448 6.10352e-05 15.1992 6.10352e-05 15.4644V19.0355C6.10352e-05 19.5878 0.447776 20.0355 1.00006 20.0355H4.50006C4.76528 20.0355 5.01963 19.9301 5.20717 19.7426L18.9749 5.97487ZM15.3536 6.76777L13.2322 4.64645L2.00006 15.8786V18.0355H4.08585L15.3536 6.76777Z" fill="#137D60"/>
 </svg>
diff --git a/src/assets/images/tools/software-types/software.svg b/src/assets/images/tools/software-types/software.svg
index 4b1a840b73..266fc1aaf7 100644
--- a/src/assets/images/tools/software-types/software.svg
+++ b/src/assets/images/tools/software-types/software.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 50 50">
     <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
         <path d="M29.516 21.721a4.918 4.918 0 0 1-4.92 4.918 4.918 4.918 0 1 1 0-9.836 4.918 4.918 0 0 1 4.92 4.918z"/>
         <path d="M3.885 26.787a21.374 21.374 0 0 1-.606-5.066C3.28 9.951 12.822.41 24.597.41 36.37.41 45.914 9.95 45.914 21.72c0 1.743-.209 3.437-.604 5.058"/>
diff --git a/src/assets/images/tools/software-types/trash.svg b/src/assets/images/tools/software-types/trash.svg
index aa096be689..763bddc9f6 100644
--- a/src/assets/images/tools/software-types/trash.svg
+++ b/src/assets/images/tools/software-types/trash.svg
@@ -1,8 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 15 15">
-    <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
-        <path d="M0 3.75h15M9.375 12.188V6.561"/>
-        <rect width="11.125" height="10.188" x="1.938" y="3.813" rx="1"/>
-        <rect width="5.5" height="2.688" x="4.75" y="1" rx="1"/>
-        <path d="M5.625 12.188V6.561"/>
-    </g>
-</svg>
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5 0.895431 5.89543 0 7 0H11C12.1046 0 13 0.895431 13 2V4H15.9897C15.9959 3.99994 16.0021 3.99994 16.0083 4H17C17.5523 4 18 4.44772 18 5C18 5.55228 17.5523 6 17 6H16.9311L16.1301 17.2137C16.018 18.7837 14.7117 20 13.1378 20H4.86224C3.28832 20 1.982 18.7837 1.86986 17.2137L1.06888 6H1C0.447715 6 0 5.55228 0 5C0 4.44772 0.447715 4 1 4H1.99174C1.99795 3.99994 2.00414 3.99994 2.01032 4H5V2ZM3.07398 6L3.86478 17.0712C3.90216 17.5946 4.3376 18 4.86224 18H13.1378C13.6624 18 14.0978 17.5946 14.1352 17.0712L14.926 6H3.07398ZM11 4H7V2H11V4ZM7 8C7.55228 8 8 8.44772 8 9V15C8 15.5523 7.55228 16 7 16C6.44772 16 6 15.5523 6 15V9C6 8.44772 6.44772 8 7 8ZM11 8C11.5523 8 12 8.44772 12 9V15C12 15.5523 11.5523 16 11 16C10.4477 16 10 15.5523 10 15V9C10 8.44772 10.4477 8 11 8Z" fill="#137D60"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/tools/subscription-types/ico-edit.svg b/src/assets/images/tools/subscription-types/ico-edit.svg
index b3e37a33dc..a97eb0345c 100644
--- a/src/assets/images/tools/subscription-types/ico-edit.svg
+++ b/src/assets/images/tools/subscription-types/ico-edit.svg
@@ -1,6 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" width="10px" height="10px">
-<g id="surface1">
-<path style=" " d="M 12.03125 2.023438 C 11.535156 2.023438 11.066406 2.269531 10.675781 2.65625 L 2.5625 10.726563 L 1.207031 14.785156 L 5.265625 13.433594 L 5.351563 13.351563 L 13.386719 5.367188 C 13.773438 4.976563 14.015625 4.507813 14.015625 4.011719 C 14.015625 3.515625 13.773438 3.046875 13.386719 2.65625 C 12.996094 2.269531 12.527344 2.023438 12.03125 2.023438 Z M 10.027344 4.710938 L 11.320313 6.007813 L 4.726563 12.5625 L 2.789063 13.207031 L 3.4375 11.265625 Z "/>
-</g>
-</svg>
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5607 2.43934C16.9749 1.85355 16.0251 1.85355 15.4393 2.43934L14.6465 3.23223L16.7678 5.35355L17.5607 4.56066C18.1465 3.97487 18.1465 3.02513 17.5607 2.43934ZM18.9749 5.97487C20.3417 4.60804 20.3417 2.39196 18.9749 1.02513C17.608 -0.341709 15.392 -0.341709 14.0251 1.02513L12.5253 2.52494L0.292954 14.7573C0.105418 14.9448 6.10352e-05 15.1992 6.10352e-05 15.4644V19.0355C6.10352e-05 19.5878 0.447776 20.0355 1.00006 20.0355H4.50006C4.76528 20.0355 5.01963 19.9301 5.20717 19.7426L18.9749 5.97487ZM15.3536 6.76777L13.2322 4.64645L2.00006 15.8786V18.0355H4.08585L15.3536 6.76777Z" fill="#137D60"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/tools/subscription-types/subscriptionlist.svg b/src/assets/images/tools/subscription-types/subscriptionlist.svg
index 283806653d..eafb3cfa95 100644
--- a/src/assets/images/tools/subscription-types/subscriptionlist.svg
+++ b/src/assets/images/tools/subscription-types/subscriptionlist.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 50 50">
     <path fill="none" fill-rule="evenodd" stroke="#0681FF" stroke-width="2" d="M22.319 34.276H5.903V51m21.435-33.276h16.416V1M6.62 35.537C9.924 42.485 16.913 47.274 25 47.274c9.866 0 18.096-7.13 20-16.608m-1.635-13.28C40.055 10.454 33.075 5.68 25 5.68c-9.866 0-18.096 7.13-20 16.607"/>
 </svg>
diff --git a/src/assets/images/tools/subscription-types/trash.svg b/src/assets/images/tools/subscription-types/trash.svg
index 16bbcda0de..763bddc9f6 100644
--- a/src/assets/images/tools/subscription-types/trash.svg
+++ b/src/assets/images/tools/subscription-types/trash.svg
@@ -1,8 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
-    <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
-        <path d="M0 3.75h15M9.375 12.188V6.561"/>
-        <rect width="11.125" height="10.188" x="1.938" y="3.813" rx="1"/>
-        <rect width="5.5" height="2.688" x="4.75" y="1" rx="1"/>
-        <path d="M5.625 12.188V6.561"/>
-    </g>
-</svg>
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5 0.895431 5.89543 0 7 0H11C12.1046 0 13 0.895431 13 2V4H15.9897C15.9959 3.99994 16.0021 3.99994 16.0083 4H17C17.5523 4 18 4.44772 18 5C18 5.55228 17.5523 6 17 6H16.9311L16.1301 17.2137C16.018 18.7837 14.7117 20 13.1378 20H4.86224C3.28832 20 1.982 18.7837 1.86986 17.2137L1.06888 6H1C0.447715 6 0 5.55228 0 5C0 4.44772 0.447715 4 1 4H1.99174C1.99795 3.99994 2.00414 3.99994 2.01032 4H5V2ZM3.07398 6L3.86478 17.0712C3.90216 17.5946 4.3376 18 4.86224 18H13.1378C13.6624 18 14.0978 17.5946 14.1352 17.0712L14.926 6H3.07398ZM11 4H7V2H11V4ZM7 8C7.55228 8 8 8.44772 8 9V15C8 15.5523 7.55228 16 7 16C6.44772 16 6 15.5523 6 15V9C6 8.44772 6.44772 8 7 8ZM11 8C11.5523 8 12 8.44772 12 9V15C12 15.5523 11.5523 16 11 16C10.4477 16 10 15.5523 10 15V9C10 8.44772 10.4477 8 11 8Z" fill="#137D60"/>
+</svg>
\ No newline at end of file
diff --git a/src/shared/components/InputSelect/MenuItem/style.scss b/src/shared/components/InputSelect/MenuItem/style.scss
index aec3220288..e70f1398ec 100644
--- a/src/shared/components/InputSelect/MenuItem/style.scss
+++ b/src/shared/components/InputSelect/MenuItem/style.scss
@@ -1,21 +1,28 @@
 @import '~styles/mixins';
 
 .item {
-  height: 40px;
-  line-height: 40px;
+  @include roboto-regular;
+
+  height: 30px;
+  line-height: 30px;
+  font-weight: 400;
+  font-size: 16px;
   padding-left: 15px;
-  color: #262628;
-  font-size: 14px;
+  color: $tco-black;
 
   &:focus {
     outline: 0;
   }
 
   &:hover {
-    background-color: $tc-dark-blue-10;
+    background-color: $color-turq-160;
+    color: $tc-white;
   }
 }
 
 .is-select {
   @include roboto-bold;
+
+  background-color: $color-turq-160;
+  color: $tc-white;
 }
diff --git a/src/shared/components/InputSelect/index.jsx b/src/shared/components/InputSelect/index.jsx
index bd43cbbdcc..a9255a32f6 100644
--- a/src/shared/components/InputSelect/index.jsx
+++ b/src/shared/components/InputSelect/index.jsx
@@ -1,24 +1,23 @@
 import React, { Component } from 'react';
 import { map, filter } from 'lodash';
-import DownArrowIcon from 'assets/images/select-arrow.svg';
 import uuid from 'uuid';
 import PT from 'prop-types';
-import cn from 'classnames';
 import MenuItem from './MenuItem';
 import './style.scss';
 
-
 export default class InputSelect extends Component {
   constructor(props) {
     super(props);
     this.state = {
       filterVal: '',
       isShowModal: false,
+      inputValue: '',
       _id: uuid(),
     };
 
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.onToggleModal = this.onToggleModal.bind(this);
+    this.onShowModal = this.onShowModal.bind(this);
     this.onSelect = this.onSelect.bind(this);
     this.onFilterChange = this.onFilterChange.bind(this);
     this.onLoadMore = this.onLoadMore.bind(this);
@@ -28,10 +27,17 @@ export default class InputSelect extends Component {
     document.addEventListener('click', this.handleClickOutside);
   }
 
+  componentWillReceiveProps(props) {
+    this.setState({
+      inputValue: props.value,
+    });
+  }
+
   componentWillUnmount() {
     document.removeEventListener('click', this.handleClickOutside);
   }
 
+
   onToggleModal(evt) {
     const {
       disabled,
@@ -51,6 +57,21 @@ export default class InputSelect extends Component {
     });
   }
 
+  onShowModal(evt) {
+    const {
+      disabled,
+    } = this.props;
+
+    evt.stopPropagation();
+
+    if (disabled) { return; }
+
+    this.setState({
+      isShowModal: true,
+      filterVal: '',
+    });
+  }
+
   onReset() {
     this.setState({
       isShowModal: false,
@@ -79,6 +100,7 @@ export default class InputSelect extends Component {
   }
 
   onFilterChange(evt) {
+    this.setState({ inputValue: evt.target.value });
     evt.stopPropagation();
     this.setState({
       filterVal: evt.target.value,
@@ -138,15 +160,16 @@ export default class InputSelect extends Component {
       _id,
       isShowModal,
       filterVal,
+      inputValue,
     } = this.state;
 
     const escapeRegExp = stringToGoIntoTheRegex => stringToGoIntoTheRegex.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); /* eslint-disable-line no-useless-escape */
-    let fiterList = options;
+    let filterList = options;
     if (filterVal) {
       const REG = new RegExp(escapeRegExp(filterVal), 'i');
-      fiterList = filter(options, o => REG.test(o[labelKey]));
+      filterList = filter(options, o => REG.test(o[labelKey]));
     }
-    const list = map(fiterList, o => (
+    const list = map(filterList, o => (
       <MenuItem
         data={o}
         labelKey={labelKey}
@@ -160,21 +183,37 @@ export default class InputSelect extends Component {
       <div className={_id} styleName="container">
         <div
           styleName="input-container"
-          tabIndex={0}
-          role="button"
-          onKeyPress={() => {}}
-          onClick={this.onToggleModal}
         >
-          <div styleName={cn('input-label', { 'input-placeholder': value.length === 0 })}>{value.length ? value : placeholder }</div>
-          <div styleName="input-arrow"><DownArrowIcon /></div>
+          <div
+            tabIndex={0}
+            role="button"
+            onKeyPress={() => {}}
+            onClick={this.onShowModal}
+            style={{ width: '100%' }}
+          >
+            <input
+              styleName="input-text"
+              type="text"
+              onChange={this.onFilterChange}
+              placeholder={placeholder}
+              value={inputValue}
+              disabled={options.length === 0 && true}
+              onKeyPress={onKeyPress}
+            />
+          </div>
+          <div
+            tabIndex={0}
+            role="button"
+            onKeyPress={() => {}}
+            styleName="select-arrow-zone"
+            onClick={this.onToggleModal}
+          >
+            <span styleName="select-arrow" />
+          </div>
         </div>
         {isShowModal && options.length > 0
           ? (
             <div styleName="modal">
-              <div styleName="modal-input-container">
-
-                <input type="text" onChange={this.onFilterChange} placeholder="Search" onKeyPress={onKeyPress} />
-              </div>
               <div styleName="modal-list-container" onScroll={this.onLoadMore}>
                 {list}
               </div>
@@ -185,7 +224,6 @@ export default class InputSelect extends Component {
   }
 }
 
-
 InputSelect.defaultProps = {
   options: [],
   valueKey: '',
diff --git a/src/shared/components/InputSelect/style.scss b/src/shared/components/InputSelect/style.scss
index 0706cb0aff..6c85fac7d0 100644
--- a/src/shared/components/InputSelect/style.scss
+++ b/src/shared/components/InputSelect/style.scss
@@ -7,15 +7,17 @@
 }
 
 .input-container {
-  height: 40px;
-  display: flex;
-  align-items: center;
+  height: 48px;
   border-radius: 4px;
-  border: solid 1px #c3c3c8;
+  display: flex;
   background-color: $tc-white;
+  border: 1px solid #aaa;
+  box-shadow: none !important;
+  cursor: pointer;
+  width: 100%;
 
   &:focus {
-    outline: 0;
+    outline: none;
   }
 }
 
@@ -44,28 +46,53 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  border-radius: 5px;
-  box-shadow: 0 5px 35px 5px rgba(21, 21, 22, 0.1), 0 10px 14px -4px rgba(21, 21, 22, 0.3);
-  background-color: #fff;
+  background-color: $tc-white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  margin-top: 2px;
+  max-height: 216px;
 }
 
-.modal-input-container {
-  display: flex;
-  height: 63px;
-  padding: 14px 17px;
-  align-items: center;
-  border-bottom: 1px solid $tc-gray-neutral-dark;
-
-  input {
-    margin-bottom: 0 !important;
-    box-sizing: border-box;
-    border: 1px solid $tc-dark-blue-70 !important;
+.modal-list-container {
+  flex-grow: 1;
+  overflow-y: auto;
+  cursor: pointer;
+}
+
+.select-arrow-zone {
+  width: 25px;
+  height: 100%;
+
+  .select-arrow {
+    position: absolute;
+    top: 29px;
+
+    &::before {
+      content: url('assets/images/dropdown-arrow.svg');
+    }
   }
 }
 
-.modal-list-container {
-  padding-top: 10px;
-  padding-bottom: 6px;
-  overflow-y: scroll;
-  max-height: 216px;
+.input-text {
+  box-sizing: border-box !important;
+  color: #767676 !important;
+  border: none !important;
+  background: transparent !important;
+  font-size: 14px !important;
+  height: 48px !important;
+  outline: none !important;
+  width: 100% !important;
+  margin-bottom: 0 !important;
+  box-shadow: none !important;
+  border-radius: inherit !important;
+  padding: 22px 9px 2px 9px;
+
+  &::placeholder {
+    color: #767676 !important;
+    text-transform: none !important;
+  }
+
+  &:focus {
+    box-shadow: none !important;
+  }
 }
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx
index a745a2fe6d..b6696e0430 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/index.jsx
@@ -6,6 +6,7 @@ import React from 'react';
 import PT from 'prop-types';
 import ReactSVG from 'react-svg';
 import moment from 'moment';
+import Tooltip from 'components/Tooltip';
 import { isomorphy } from 'topcoder-react-utils';
 
 import './styles.scss';
@@ -34,6 +35,18 @@ export default function Item(props) {
 
   const current = work.working ? '- Current' : '';
 
+  const deleteTip = (
+    <div styleName="tctooltiptext">
+      <p>Delete</p>
+    </div>
+  );
+
+  const editTip = (
+    <div styleName="tctooltiptext">
+      <p>Edit</p>
+    </div>
+  );
+
   return (
     <div styleName="container">
       <div styleName="work-info">
@@ -58,30 +71,39 @@ export default function Item(props) {
         </div>
       </div>
       <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
-        >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          styleName="delete"
-          onKeyPress={() => onDeleteItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onDeleteItem(index)}
+        <Tooltip
+          id="edit-tip"
+          content={editTip}
+          trigger={['hover', 'focus']}
         >
-          <img src={assets('./ico-trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
+          <a
+            styleName="edit"
+            onKeyPress={() => onEditItem(index)}
+            tabIndex={0}
+            role="button"
+            onClick={() => onEditItem(index)}
+          >
+            <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          </a>
+        </Tooltip>
+        <div styleName="delete-wrapper">
+          <Tooltip
+            id="delete-tip"
+            content={deleteTip}
+            trigger={['hover', 'focus']}
+          >
+            <a
+              styleName="delete"
+              onKeyPress={() => onDeleteItem(index)}
+              tabIndex={0}
+              role="button"
+              onClick={() => onDeleteItem(index)}
+            >
+              <img src={assets('./ico-trash.svg')} alt="delete-icon" />
+            </a>
+
+          </Tooltip>
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss
index 6bc480ae4a..7174a0ee52 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss
@@ -5,24 +5,33 @@
   flex-direction: row;
   justify-items: center;
   justify-content: space-between;
-  height: 100%;
+  align-items: center;
+  min-height: 96px;
   width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
   border-bottom: none;
   background-color: $tc-white;
+  padding: $pad-lg;
+  border: 1px solid $color-black-20;
+  border-radius: 8px;
 }
 
 .work-info {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 }
 
 .work-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+  background: $color-black-5;
+  border-radius: 4px;
+  margin-right: $margin-lg;
 }
 
 .work-parameters {
@@ -31,7 +40,7 @@
   display: flex;
   flex-direction: column;
   justify-items: center;
-  justify-content: left;
+  justify-content: center;
   font-size: 15px;
   line-height: 20px;
   text-transform: capitalize;
@@ -44,9 +53,14 @@
 }
 
 .parameter-first-line {
-  font-weight: 500;
+  @include roboto-bold;
+
   color: $tc-black;
-  margin-bottom: 10px;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
   word-break: break-all;
 
   &.single-line {
@@ -59,9 +73,14 @@
 }
 
 .parameter-second-line,
-.parameter-third-line {
-  color: $tc-gray-50;
+.parameter-third-line,
+.parameter-second-line-mobile {
+  @include roboto-medium;
+
+  color: $color-black-60;
   font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
   word-break: break-all;
 
   @include upto-sm {
@@ -75,8 +94,6 @@
   @include upto-sm {
     display: flex;
     flex-direction: column;
-    color: $tc-gray-50;
-    font-weight: 400;
 
     p {
       word-break: break-all;
@@ -84,11 +101,56 @@
   }
 }
 
+.tctooltiptext {
+  background: $tc-black;
+  color: $tc-white;
+  border-radius: 8px;
+  padding: 10px;
+
+  p {
+    @include roboto-medium;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.tctooltiptext::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  left: 50%;
+  border-top-color: $tc-black;
+  z-index: 1000;
+}
+
 .operation-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 
+  .delete-wrapper {
+    margin-left: $margin-xl;
+    margin-right: $margin-xs;
+
+    @include xs-to-sm {
+      margin-left: $margin-lg;
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 320px) {
+      margin-right: 0;
+      margin-left: 6px;
+    }
+  }
+
   .delete {
     display: flex;
     flex-direction: column;
@@ -96,16 +158,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
       width: 20px;
       height: 20px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
     }
 
     p {
@@ -129,16 +185,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
       width: 20px;
       height: 20px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
     }
 
     p {
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss
index 1d4ed8cb31..92dda54439 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/styles.scss
@@ -1,4 +1,5 @@
 @import "../../../style";
+@import "~styles/mixins";
 
 .container {
   width: 100%;
@@ -12,11 +13,7 @@
     justify-items: center;
 
     li {
-      min-height: 90px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
+      margin-bottom: $margin-md;
     }
   }
 }
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
index 655ecc3057..fd009111f8 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
@@ -434,18 +434,22 @@ export default class Work extends ConsentComponent {
                     : (<React.Fragment>Add a new workplace</React.Fragment>)
                 }
               </div>
-
+              {
+                workItems.length > 0
+                && (
+                  <WorkplaceList
+                    workList={{ items: workItems }}
+                    onDeleteItem={this.onHandleDeleteWork}
+                    onEditItem={this.onEditWork}
+                  />
+                )
+              }
               <div styleName="form-content">
                 <div styleName="form-label">
                   Enter your work experience to show customers the roles and responsibilites
                   you have held in the past.
                 </div>
                 <div styleName="form-body">
-                  <WorkplaceList
-                    workList={{ items: workItems }}
-                    onDeleteItem={this.onHandleDeleteWork}
-                    onEditItem={this.onEditWork}
-                  />
                   <form styleName="workplace-form" noValidate autoComplete="off">
                     <FormField label="Company *" style={{ flex: '0 0 100%' }}>
                       <FormInputText
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss
index 8a1bb6c79a..e521332197 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss
@@ -65,7 +65,7 @@
   justify-content: flex-start;
   margin-left: calc(50% - 13px);
   padding: $pad-sm 0;
-  gap: 8px 36px;
+  gap: 8px 16px;
 
   .button {
     @include roboto-bold;
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx
index 6eeb4f7968..1b6b24a867 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/index.jsx
@@ -5,6 +5,7 @@ import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { isomorphy } from 'topcoder-react-utils';
+import Tooltip from 'components/Tooltip';
 
 import languageIcon from 'assets/images/profile/language.png';
 
@@ -31,6 +32,18 @@ export default function Item(props) {
     return true;
   };
 
+  const deleteTip = (
+    <div styleName="tctooltiptext">
+      <p>Delete</p>
+    </div>
+  );
+
+  const editTip = (
+    <div styleName="tctooltiptext">
+      <p>Edit</p>
+    </div>
+  );
+
   return (
     <div styleName="container">
       <div styleName="language-info">
@@ -79,30 +92,39 @@ export default function Item(props) {
         </div>
       </div>
       <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
-        >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          styleName="delete"
-          onKeyPress={() => onDeleteItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onDeleteItem(index)}
+        <Tooltip
+          id="edit-tip"
+          content={editTip}
+          trigger={['hover', 'focus']}
         >
-          <img src={assets('./ico-trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
+          <a
+            styleName="edit"
+            onKeyPress={() => onEditItem(index)}
+            tabIndex={0}
+            role="button"
+            onClick={() => onEditItem(index)}
+          >
+            <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          </a>
+        </Tooltip>
+        <div styleName="delete-wrapper">
+          <Tooltip
+            id="delete-tip"
+            content={deleteTip}
+            trigger={['hover', 'focus']}
+          >
+            <a
+              styleName="delete"
+              onKeyPress={() => onDeleteItem(index)}
+              tabIndex={0}
+              role="button"
+              onClick={() => onDeleteItem(index)}
+            >
+              <img src={assets('./ico-trash.svg')} alt="delete-icon" />
+            </a>
+
+          </Tooltip>
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss
index 3f32306a30..1c2e121e06 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss
@@ -5,24 +5,38 @@
   flex-direction: row;
   justify-items: center;
   justify-content: space-between;
-  height: 100%;
+  align-items: center;
+  min-height: 96px;
   width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
   border-bottom: none;
   background-color: $tc-white;
+  padding: $pad-lg;
+  border: 1px solid $color-black-20;
+  border-radius: 8px;
 }
 
 .language-info {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 }
 
 .language-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+  background: $color-black-5;
+  border-radius: 4px;
+  margin-right: $margin-lg;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 .language-parameters {
@@ -48,9 +62,14 @@
 }
 
 .parameter-first-line {
-  font-weight: 500;
+  @include roboto-bold;
+
   color: $tc-black;
-  margin-bottom: 10px;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
   word-break: break-all;
 
   &.single-line {
@@ -62,9 +81,15 @@
   }
 }
 
-.parameter-second-line {
-  color: $tc-gray-50;
+.parameter-second-line,
+.parameter-second-line-mobile {
+  @include roboto-medium;
+
+  color: $color-black-60;
   font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  word-break: break-all;
 
   @include upto-sm {
     display: none;
@@ -77,16 +102,59 @@
   @include upto-sm {
     display: flex;
     flex-direction: column;
-    color: $tc-gray-50;
+  }
+}
+
+.tctooltiptext {
+  background: $tc-black;
+  color: $tc-white;
+  border-radius: 8px;
+  padding: 10px;
+
+  p {
+    @include roboto-medium;
+
     font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
   }
 }
 
+.tctooltiptext::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  left: 50%;
+  border-top-color: $tc-black;
+  z-index: 1000;
+}
+
 .operation-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 
+  .delete-wrapper {
+    margin-left: $margin-xl;
+    margin-right: $margin-xs;
+
+    @include xs-to-sm {
+      margin-left: $margin-lg;
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 320px) {
+      margin-right: 0;
+      margin-left: 6px;
+    }
+  }
+
   .delete {
     display: flex;
     flex-direction: column;
@@ -94,16 +162,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
       width: 20px;
       height: 20px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
     }
 
     p {
@@ -127,16 +189,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
       width: 20px;
       height: 20px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
     }
 
     p {
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss
index 7d1409c14e..e78e1de213 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/styles.scss
@@ -20,11 +20,7 @@
     justify-items: center;
 
     li {
-      min-height: 90px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
+      margin-bottom: $margin-md;
     }
   }
 }
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
index 19e8bdbb1f..fe9251bd52 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
@@ -359,17 +359,22 @@ export default class Languages extends ConsentComponent {
             <h2 styleName="form-title">
               Language Skills
             </h2>
+            {
+              languageItems.length > 0
+              && (
+                <LanguageList
+                  languageList={{ items: languageItems }}
+                  onDeleteItem={this.onHandleDeleteLanguage}
+                  onEditItem={this.onEditLanguage}
+                />
+              )
+            }
             <div styleName="form-content">
               <div styleName="form-label">
                 Let customers know the langagues you speak.
                 Multilingual? Magnifique.
               </div>
               <div styleName="form-body">
-                <LanguageList
-                  languageList={{ items: languageItems }}
-                  onDeleteItem={this.onHandleDeleteLanguage}
-                  onEditItem={this.onEditLanguage}
-                />
                 <form styleName="language-form" noValidate autoComplete="off">
                   <FormField label="Language *" style={{ flex: '0 0 100%' }}>
                     <FormInputSelect
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss
index a9ea7de4d1..9dea6eda02 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss
@@ -48,7 +48,7 @@
   justify-content: flex-start;
   margin-left: calc(50% - 13px);
   padding: $pad-sm 0;
-  gap: 8px 36px;
+  gap: 8px 16px;
 
   .button {
     @include roboto-bold;
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx
index 199f87e8bc..23e6795188 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/index.jsx
@@ -5,6 +5,8 @@ import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import ReactSVG from 'react-svg';
+import Tooltip from 'components/Tooltip';
+
 import { isomorphy } from 'topcoder-react-utils';
 
 
@@ -31,6 +33,18 @@ export default function Item(props) {
     return true;
   };
 
+  const deleteTip = (
+    <div styleName="tctooltiptext">
+      <p>Delete</p>
+    </div>
+  );
+
+  const editTip = (
+    <div styleName="tctooltiptext">
+      <p>Edit</p>
+    </div>
+  );
+
   return (
     <div styleName="container">
       <div styleName="hobby-info">
@@ -51,30 +65,39 @@ export default function Item(props) {
         </div>
       </div>
       <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
-        >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          styleName="delete"
-          onKeyPress={() => onDeleteItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onDeleteItem(index)}
+        <Tooltip
+          id="edit-tip"
+          content={editTip}
+          trigger={['hover', 'focus']}
         >
-          <img src={assets('./ico-trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
+          <a
+            styleName="edit"
+            onKeyPress={() => onEditItem(index)}
+            tabIndex={0}
+            role="button"
+            onClick={() => onEditItem(index)}
+          >
+            <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          </a>
+        </Tooltip>
+        <div styleName="delete-wrapper">
+          <Tooltip
+            id="delete-tip"
+            content={deleteTip}
+            trigger={['hover', 'focus']}
+          >
+            <a
+              styleName="delete"
+              onKeyPress={() => onDeleteItem(index)}
+              tabIndex={0}
+              role="button"
+              onClick={() => onDeleteItem(index)}
+            >
+              <img src={assets('./ico-trash.svg')} alt="delete-icon" />
+            </a>
+
+          </Tooltip>
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss
index 95c86601ca..07c52fda03 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss
@@ -5,24 +5,37 @@
   flex-direction: row;
   justify-items: center;
   justify-content: space-between;
-  height: 100%;
+  align-items: center;
+  min-height: 96px;
   width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
   border-bottom: none;
   background-color: $tc-white;
+  padding: $pad-lg;
+  border: 1px solid $color-black-20;
+  border-radius: 8px;
 }
 
 .hobby-info {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 }
 
 .hobby-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+  background: $color-black-5;
+  border-radius: 4px;
+  margin-right: $margin-lg;
+
+  svg {
+    display: block;
+  }
 }
 
 .hobby-parameters {
@@ -35,8 +48,7 @@
   font-size: 15px;
   line-height: 20px;
   text-transform: capitalize;
-  word-break: break-word;
-  margin-right: 20px;
+  padding-right: 20px;
 
   &.single-line {
     flex-direction: row;
@@ -45,13 +57,17 @@
 }
 
 .parameter-first-line {
-  font-weight: 500;
+  @include roboto-bold;
+
   color: $tc-black;
-  margin-bottom: 10px;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
+  word-break: break-all;
 
   &.single-line {
-    flex-direction: row;
-    align-items: center;
     margin-bottom: 0;
   }
 
@@ -60,9 +76,45 @@
   }
 }
 
-.parameter-second-line {
-  color: $tc-gray-50;
+.parameter-second-line,
+.parameter-third-line {
+  @include roboto-medium;
+
+  color: $color-black-60;
   font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  word-break: break-all;
+}
+
+.tctooltiptext {
+  background: $tc-black;
+  color: $tc-white;
+  border-radius: 8px;
+  padding: 10px;
+
+  p {
+    @include roboto-medium;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.tctooltiptext::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  left: 50%;
+  border-top-color: $tc-black;
+  z-index: 1000;
 }
 
 .operation-container {
@@ -70,6 +122,21 @@
   flex-direction: row;
   justify-content: space-between;
 
+  .delete-wrapper {
+    margin-left: $margin-xl;
+    margin-right: $margin-xs;
+
+    @include xs-to-sm {
+      margin-left: $margin-lg;
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 320px) {
+      margin-right: 0;
+      margin-left: 6px;
+    }
+  }
+
   .delete {
     display: flex;
     flex-direction: column;
@@ -77,15 +144,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
-      height: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
@@ -109,14 +171,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/List/styles.scss b/src/shared/components/Settings/ProfileSettings/Hobbies/List/styles.scss
index 13cbb9cd6e..53bec1cf29 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/List/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/List/styles.scss
@@ -24,11 +24,7 @@
     justify-items: center;
 
     li {
-      min-height: 90px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
+      margin-bottom: $margin-md;
     }
   }
 }
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
index 0fb3e071f9..9afbbdfc28 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
@@ -12,16 +12,12 @@ import FormInputText from 'components/Settings/FormInputText';
 import FormInputTextArea from 'components/Settings/FormInputTextArea';
 import FormField from 'components/Settings/FormField';
 import AddItemIcon from 'assets/images/settings-add-item.svg';
-import HobbyList from './List';
 
 import './styles.scss';
 
 const Hobbies = (props) => {
   const {
-    hobbyItems,
     isEdit,
-    onHandleDeleteHobby,
-    onEditHobby,
     canModifyTrait,
     isSubmit,
     formInvalid,
@@ -33,16 +29,6 @@ const Hobbies = (props) => {
 
   return (
     <div styleName="hobby-container">
-      {
-      hobbyItems.length > 0
-      && (
-        <HobbyList
-          hobbyList={{ items: hobbyItems }}
-          onDeleteItem={onHandleDeleteHobby}
-          onEditItem={onEditHobby}
-        />
-      )
-    }
       <div styleName="form-container-default">
         <form name="device-form" noValidate autoComplete="off">
           {/* Hobby */}
@@ -121,7 +107,6 @@ const Hobbies = (props) => {
 };
 
 Hobbies.defaultProps = {
-  hobbyItems: [],
   isEdit: false,
   formInvalid: false,
   isSubmit: false,
@@ -129,10 +114,7 @@ Hobbies.defaultProps = {
 };
 
 Hobbies.propTypes = {
-  hobbyItems: PT.arrayOf(PT.shape()),
   isEdit: PT.bool,
-  onHandleDeleteHobby: PT.func.isRequired,
-  onEditHobby: PT.func.isRequired,
   canModifyTrait: PT.bool.isRequired,
   formInvalid: PT.bool,
   isSubmit: PT.bool,
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx
index d7ef8ca436..c13577e2cd 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/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 Tooltip from 'components/Tooltip';
 
 import './styles.scss';
 
@@ -77,6 +78,18 @@ export default function Item(props) {
     return '';
   };
 
+  const deleteTip = (
+    <div styleName="tctooltiptext">
+      <p>Delete</p>
+    </div>
+  );
+
+  const editTip = (
+    <div styleName="tctooltiptext">
+      <p>Edit</p>
+    </div>
+  );
+
   return (
     <div styleName="container">
       <div styleName="education-info">
@@ -117,30 +130,39 @@ export default function Item(props) {
         </div>
       </div>
       <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
+        <Tooltip
+          id="edit-tip"
+          content={editTip}
+          trigger={['hover', 'focus']}
         >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          styleName="delete"
-          onKeyPress={() => onDeleteItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onDeleteItem(index)}
-        >
-          <img src={assets('./ico-trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
+          <a
+            styleName="edit"
+            onKeyPress={() => onEditItem(index)}
+            tabIndex={0}
+            role="button"
+            onClick={() => onEditItem(index)}
+          >
+            <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          </a>
+        </Tooltip>
+        <div styleName="delete-wrapper">
+          <Tooltip
+            id="delete-tip"
+            content={deleteTip}
+            trigger={['hover', 'focus']}
+          >
+            <a
+              styleName="delete"
+              onKeyPress={() => onDeleteItem(index)}
+              tabIndex={0}
+              role="button"
+              onClick={() => onDeleteItem(index)}
+            >
+              <img src={assets('./ico-trash.svg')} alt="delete-icon" />
+            </a>
+
+          </Tooltip>
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss
index 5f9eca6b10..aec47c1bbe 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss
@@ -5,24 +5,37 @@
   flex-direction: row;
   justify-items: center;
   justify-content: space-between;
-  height: 100%;
+  align-items: center;
+  min-height: 96px;
   width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
   border-bottom: none;
   background-color: $tc-white;
+  padding: $pad-lg;
+  border: 1px solid $color-black-20;
+  border-radius: 8px;
 }
 
 .education-info {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 }
 
 .education-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+  background: $color-black-5;
+  border-radius: 4px;
+  margin-right: $margin-lg;
+
+  svg {
+    display: block;
+  }
 }
 
 .education-parameters {
@@ -44,9 +57,14 @@
 }
 
 .parameter-first-line {
-  font-weight: 500;
+  @include roboto-bold;
+
   color: $tc-black;
-  margin-bottom: 10px;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
   word-break: break-all;
 
   &.single-line {
@@ -58,9 +76,15 @@
   }
 }
 
-.parameter-second-line {
-  color: $tc-gray-50;
+.parameter-second-line,
+.parameter-third-line,
+.parameter-second-line-mobile {
+  @include roboto-medium;
+
+  color: $color-black-60;
   font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
   word-break: break-all;
 
   @include upto-sm {
@@ -74,8 +98,6 @@
   @include upto-sm {
     display: flex;
     flex-direction: column;
-    color: $tc-gray-50;
-    font-weight: 400;
 
     p {
       word-break: break-all;
@@ -83,11 +105,56 @@
   }
 }
 
+.tctooltiptext {
+  background: $tc-black;
+  color: $tc-white;
+  border-radius: 8px;
+  padding: 10px;
+
+  p {
+    @include roboto-medium;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.tctooltiptext::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  left: 50%;
+  border-top-color: $tc-black;
+  z-index: 1000;
+}
+
 .operation-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 
+  .delete-wrapper {
+    margin-left: $margin-xl;
+    margin-right: $margin-xs;
+
+    @include xs-to-sm {
+      margin-left: $margin-lg;
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 320px) {
+      margin-right: 0;
+      margin-left: 6px;
+    }
+  }
+
   .delete {
     display: flex;
     flex-direction: column;
@@ -95,15 +162,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
-      height: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
@@ -127,14 +189,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/List/styles.scss b/src/shared/components/Settings/ProfileSettings/Learning/List/styles.scss
index c26ee03bf1..8dcf8b2f15 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/List/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Learning/List/styles.scss
@@ -24,11 +24,7 @@
     justify-items: center;
 
     li {
-      min-height: 90px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
+      margin-bottom: $margin-md;
     }
   }
 }
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
index 5637ff6174..7983d442c4 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
@@ -15,8 +15,6 @@ import FormField from 'components/Settings/FormField';
 import AddItemIcon from 'assets/images/settings-add-item.svg';
 import FormInputDatePicker from 'components/Settings/FormInputDatePicker';
 
-import EducationList from './List';
-
 import './styles.scss';
 
 const Learning = (props) => {
@@ -24,9 +22,6 @@ const Learning = (props) => {
     formInvalid,
     isSubmit,
     isEdit,
-    educationItems,
-    onHandleDeleteEducation,
-    onEditEducation,
     startDateInvalid,
     startDateInvalidMsg,
     endDateInvalid,
@@ -40,16 +35,6 @@ const Learning = (props) => {
 
   return (
     <div styleName="education-container">
-      {
-        educationItems.length > 0
-        && (
-          <EducationList
-            educationList={{ items: educationItems }}
-            onDeleteItem={onHandleDeleteEducation}
-            onEditItem={onEditEducation}
-          />
-        )
-      }
       <div styleName="form-container-default">
         <form name="device-form" noValidate autoComplete="off">
           {/* Name of College or University */}
@@ -209,7 +194,6 @@ Learning.defaultProps = {
   formInvalid: false,
   isSubmit: false,
   isEdit: false,
-  educationItems: [],
   newEducation: {},
   startDateInvalid: false,
   startDateInvalidMsg: '',
@@ -221,9 +205,6 @@ Learning.propTypes = {
   formInvalid: PT.bool,
   isSubmit: PT.bool,
   isEdit: PT.bool,
-  educationItems: PT.arrayOf(PT.shape()),
-  onHandleDeleteEducation: PT.func.isRequired,
-  onEditEducation: PT.func.isRequired,
   startDateInvalid: PT.bool,
   startDateInvalidMsg: PT.string,
   endDateInvalid: PT.bool,
diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
index 611366f5c0..56f3ce5561 100644
--- a/src/shared/components/Settings/ProfileSettings/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -13,6 +13,8 @@ import { validateStartDate, validateEndDate } from 'utils/settings';
 import ImageInput from './ImageInput';
 import SettingsBanner from '../SettingsBanner';
 import PersonalDetails from './PersonalDetails';
+import EducationList from './Learning/List';
+import HobbyList from './Hobbies/List';
 
 import style from './styles.scss';
 
@@ -281,7 +283,7 @@ class ProfileSettings extends ConsentComponent {
       } else {
         newBasicInfo.birthDate = null;
       }
-    } catch (error) { // eslint-disable-line
+    } catch (error) {
       newBasicInfo.birthDate = null;
     }
 
@@ -924,209 +926,231 @@ class ProfileSettings extends ConsentComponent {
     this.setState({ newHobby, isSubmitHobby: false });
   }
 
-    /**
-     * Get hobby trait
-     * @param userTraits the all user traits
-     */
-    loadHobbyTrait = (userTraits) => {
-      const trait = userTraits.filter(t => t.traitId === 'hobby');
-      const hobbys = trait.length === 0 ? {} : trait[0];
-      return _.assign({}, hobbys);
-    }
+  /**
+   * Get hobby trait
+   * @param userTraits the all user traits
+   */
+  loadHobbyTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'hobby');
+    const hobbys = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, hobbys);
+  }
 
-    /**
-     * Edit hobby by index
-     * @param indexNoHobby the hobby index no
-     */
-    onEditHobby(indexNoHobby) {
-      const { hobbyTrait } = this.state;
+  /**
+   * Edit hobby by index
+   * @param indexNoHobby the hobby index no
+   */
+  onEditHobby(indexNoHobby) {
+    const { hobbyTrait } = this.state;
+    this.setState({
+      newHobby: {
+        hobby: hobbyTrait.traits.data[indexNoHobby].hobby,
+        description: _.isEmpty(hobbyTrait.traits.data[indexNoHobby].description) ? '' : hobbyTrait.traits.data[indexNoHobby].description,
+      },
+      isHobbyEdit: true,
+      indexNoHobby,
+      formInvalidHobby: false,
+      isSubmitHobby: false,
+    });
+  }
+
+  onCancelEditStatusHobby() {
+    const { isHobbyEdit } = this.state;
+    if (isHobbyEdit) {
       this.setState({
+        isHobbyEdit: false,
+        indexNoHobby: null,
+        isSubmitHobby: false,
+        formInvalidHobby: false,
         newHobby: {
-          hobby: hobbyTrait.traits.data[indexNoHobby].hobby,
-          description: _.isEmpty(hobbyTrait.traits.data[indexNoHobby].description) ? '' : hobbyTrait.traits.data[indexNoHobby].description,
+          hobby: '',
+          description: '',
         },
-        isHobbyEdit: true,
-        indexNoHobby,
-        formInvalidHobby: false,
-        isSubmitHobby: false,
       });
     }
+  }
 
-    onCancelEditStatusHobby() {
-      const { isHobbyEdit } = this.state;
-      if (isHobbyEdit) {
-        this.setState({
-          isHobbyEdit: false,
-          indexNoHobby: null,
-          isSubmitHobby: false,
-          formInvalidHobby: false,
-          newHobby: {
-            hobby: '',
-            description: '',
-          },
-        });
-      }
+  render() {
+    const {
+      personalDetails, aboutYou, learningAndEducations, hobbies,
+    } = PROFILE_SETTINGS;
+
+    const canModifyTrait = !this.props.traitRequestCount;
+    if (!canModifyTrait) {
+      this.props.setIsSaving(true);
+    } else {
+      this.props.setIsSaving(false);
     }
+    const { lookupData } = this.props;
+    const countries = _.get(lookupData, 'countries', []).map(country => ({
+      key: country.countryCode,
+      name: country.country,
+    }));
 
-    render() {
-      const {
-        personalDetails, aboutYou, learningAndEducations, hobbies,
-      } = PROFILE_SETTINGS;
+    const {
+      newBasicInfo,
+      newProfileInfo,
+      inputChanged,
+      showConfirmation,
+      showConfirmationHobby,
+      educationTrait,
+      indexNo,
+      formInvalid,
+      isSubmit,
+      isEdit,
+      isMobileView,
+      startDateInvalid,
+      startDateInvalidMsg,
+      endDateInvalid,
+      endDateInvalidMsg,
+      newEducation,
+      hobbyTrait,
+      isHobbyEdit,
+      formInvalidHobby,
+      isSubmitHobby,
+      newHobby,
+      indexNoHobby,
+    } = this.state;
 
-      const canModifyTrait = !this.props.traitRequestCount;
-      if (!canModifyTrait) {
-        this.props.setIsSaving(true);
-      } else {
-        this.props.setIsSaving(false);
-      }
-      const { lookupData } = this.props;
-      const countries = _.get(lookupData, 'countries', []).map(country => ({
-        key: country.countryCode,
-        name: country.country,
-      }));
-
-      const {
-        newBasicInfo,
-        newProfileInfo,
-        inputChanged,
-        showConfirmation,
-        showConfirmationHobby,
-        educationTrait,
-        indexNo,
-        formInvalid,
-        isSubmit,
-        isEdit,
-        isMobileView,
-        startDateInvalid,
-        startDateInvalidMsg,
-        endDateInvalid,
-        endDateInvalidMsg,
-        newEducation,
-        hobbyTrait,
-        isHobbyEdit,
-        formInvalidHobby,
-        isSubmitHobby,
-        newHobby,
-        indexNoHobby,
-      } = this.state;
-
-      const educationItems = educationTrait.traits
-        ? educationTrait.traits.data.slice() : [];
-
-      const hobbyItems = hobbyTrait.traits
-        ? hobbyTrait.traits.data.slice() : [];
-
-      return (
-        <React.Fragment>
-          <div styleName="profile-settings-container">
-            <div styleName="header">
-              <h3>BASIC INFO</h3>
-            </div>
-            {
-            this.shouldRenderConsent() && this.renderConsent()
+    const educationItems = educationTrait.traits
+      ? educationTrait.traits.data.slice() : [];
+
+    const hobbyItems = hobbyTrait.traits
+      ? hobbyTrait.traits.data.slice() : [];
+
+    return (
+      <React.Fragment>
+        <div styleName="profile-settings-container">
+          <div styleName="header">
+            <h3>BASIC INFO</h3>
+          </div>
+          {
+          this.shouldRenderConsent() && this.renderConsent()
+          }
+          {
+            showConfirmation && (
+              <ConfirmationModal
+                onConfirm={() => this.showConsent(this.onDeleteEducation.bind(this, indexNo))}
+                onCancel={() => this.setState({
+                  showConfirmation: false,
+                  indexNo: null,
+                })}
+                name={educationTrait.traits.data[indexNo].schoolCollegeName}
+              />
+            )
+          }
+          {
+            showConfirmationHobby && (
+              <ConfirmationModal
+                onConfirm={() => this.showConsent(this.onDeleteHobby.bind(this, indexNoHobby))}
+                onCancel={() => this.setState({ showConfirmation: false, indexNoHobby: null })}
+                name={hobbyTrait.traits.data[indexNoHobby].hobby}
+              />
+            )
           }
 
+          <ImageInput {...this.props} />
+
+          <SettingsBanner
+            title={personalDetails.title}
+            description={personalDetails.description}
+          >
+            <PersonalDetails
+              countries={countries}
+              canModifyTrait={canModifyTrait}
+              newProfileInfo={newProfileInfo}
+              newBasicInfo={newBasicInfo}
+              onUpdateDate={this.onUpdateDate}
+              onUpdateInput={this.onUpdateInput}
+              inputChanged={inputChanged}
+              onUpdateCountry={this.onUpdateCountry}
+            />
+          </SettingsBanner>
+          <SettingsBanner title={aboutYou.title} description={aboutYou.description}>
+            <AboutYou
+              canModifyTrait={canModifyTrait}
+              newProfileInfo={newProfileInfo}
+              newBasicInfo={newBasicInfo}
+              onUpdateInput={this.onUpdateInput}
+            />
+          </SettingsBanner>
+          <SettingsBanner
+            title={learningAndEducations.title}
+            description={learningAndEducations.description}
+          >
             {
-          showConfirmation && (
-            <ConfirmationModal
-              onConfirm={() => this.showConsent(this.onDeleteEducation.bind(this, indexNo))}
-              onCancel={() => this.setState({
-                showConfirmation: false,
-                indexNo: null,
-              })}
-              name={educationTrait.traits.data[indexNo].schoolCollegeName}
+              educationItems.length > 0
+              && (
+                <EducationList
+                  educationList={{ items: educationItems }}
+                  onDeleteItem={this.onHandleDeleteEducation}
+                  onEditItem={this.onEditEducation}
+                />
+              )
+            }
+            <Learning
+              formInvalid={formInvalid}
+              isSubmit={isSubmit}
+              isEdit={isEdit}
+              isMobileView={isMobileView}
+              educationItems={educationItems}
+              onHandleDeleteEducation={this.onHandleDeleteEducation}
+              onEditEducation={this.onEditEducation}
+              startDateInvalid={startDateInvalid}
+              startDateInvalidMsg={startDateInvalidMsg}
+              endDateInvalid={endDateInvalid}
+              endDateInvalidMsg={endDateInvalidMsg}
+              newEducation={newEducation}
+              onUpdateInput={this.onUpdateEducationInput}
+              onUpdateDate={this.onUpdateEducationDate}
+              onHandleAddEducation={this.onHandleAddEducation}
+              onCancelEditStatus={this.onCancelEditStatus}
             />
-          )
-        }
+          </SettingsBanner>
+          <SettingsBanner
+            title={hobbies.title}
+            description={hobbies.description}
+          >
             {
-          showConfirmationHobby && (
-            <ConfirmationModal
-              onConfirm={() => this.showConsent(this.onDeleteHobby.bind(this, indexNoHobby))}
-              onCancel={() => this.setState({ showConfirmation: false, indexNoHobby: null })}
-              name={hobbyTrait.traits.data[indexNoHobby].hobby}
+              hobbyItems.length > 0
+              && (
+                <HobbyList
+                  hobbyList={{ items: hobbyItems }}
+                  onDeleteItem={this.onHandleDeleteHobby}
+                  onEditItem={this.onEditHobby}
+                />
+              )
+            }
+            <Hobbies
+              isMobileView={isMobileView}
+              hobbyItems={hobbyItems}
+              isEdit={isHobbyEdit}
+              onHandleDeleteHobby={this.onHandleDeleteHobby}
+              onEditHobby={this.onEditHobby}
+              canModifyTrait={canModifyTrait}
+              formInvalid={formInvalidHobby}
+              isSubmit={isSubmitHobby}
+              newHobby={newHobby}
+              onUpdateInput={this.onUpdateHobbyInput}
+              onHandleAddHobby={this.onHandleAddHobby}
+              onCancelEditStatus={this.onCancelEditStatusHobby}
             />
-          )
-        }
-
-            <ImageInput {...this.props} />
-
-            <SettingsBanner title={personalDetails.title} description={personalDetails.description}>
-              <PersonalDetails
-                countries={countries}
-                canModifyTrait={canModifyTrait}
-                newProfileInfo={newProfileInfo}
-                newBasicInfo={newBasicInfo}
-                onUpdateDate={this.onUpdateDate}
-                onUpdateInput={this.onUpdateInput}
-                inputChanged={inputChanged}
-                onUpdateCountry={this.onUpdateCountry}
-              />
-            </SettingsBanner>
-            <SettingsBanner title={aboutYou.title} description={aboutYou.description}>
-              <AboutYou
-                canModifyTrait={canModifyTrait}
-                newProfileInfo={newProfileInfo}
-                newBasicInfo={newBasicInfo}
-                onUpdateInput={this.onUpdateInput}
-              />
-            </SettingsBanner>
-            <SettingsBanner
-              title={learningAndEducations.title}
-              description={learningAndEducations.description}
-            >
-              <Learning
-                formInvalid={formInvalid}
-                isSubmit={isSubmit}
-                isEdit={isEdit}
-                isMobileView={isMobileView}
-                educationItems={educationItems}
-                onHandleDeleteEducation={this.onHandleDeleteEducation}
-                onEditEducation={this.onEditEducation}
-                startDateInvalid={startDateInvalid}
-                startDateInvalidMsg={startDateInvalidMsg}
-                endDateInvalid={endDateInvalid}
-                endDateInvalidMsg={endDateInvalidMsg}
-                newEducation={newEducation}
-                onUpdateInput={this.onUpdateEducationInput}
-                onUpdateDate={this.onUpdateEducationDate}
-                onHandleAddEducation={this.onHandleAddEducation}
-                onCancelEditStatus={this.onCancelEditStatus}
-              />
-            </SettingsBanner>
-            <SettingsBanner
-              title={hobbies.title}
-              description={hobbies.description}
-            >
-              <Hobbies
-                isMobileView={isMobileView}
-                hobbyItems={hobbyItems}
-                isEdit={isHobbyEdit}
-                onHandleDeleteHobby={this.onHandleDeleteHobby}
-                onEditHobby={this.onEditHobby}
-                canModifyTrait={canModifyTrait}
-                formInvalid={formInvalidHobby}
-                isSubmit={isSubmitHobby}
-                newHobby={newHobby}
-                onUpdateInput={this.onUpdateHobbyInput}
-                onHandleAddHobby={this.onHandleAddHobby}
-                onCancelEditStatus={this.onCancelEditStatusHobby}
-              />
-            </SettingsBanner>
-          </div>
-          <div styleName="button-save">
-            <PrimaryButton
-              disabled={!canModifyTrait}
-              onClick={this.onHandleSaveBasicInfo}
-              theme={{
-                button: style['save-changes-btn'],
-              }}
-            >
-              Save Changes
-            </PrimaryButton>
-          </div>
-        </React.Fragment>
-      );
-    }
+          </SettingsBanner>
+        </div>
+        <div styleName="button-save">
+          <PrimaryButton
+            disabled={!canModifyTrait}
+            onClick={this.onHandleSaveBasicInfo}
+            theme={{
+              button: style['save-changes-btn'],
+            }}
+          >
+            Save Changes
+          </PrimaryButton>
+        </div>
+      </React.Fragment>
+    );
+  }
 }
 
 ProfileSettings.defaultProps = {
diff --git a/src/shared/components/Settings/SettingsBanner/index.jsx b/src/shared/components/Settings/SettingsBanner/index.jsx
index 04c92cc9fe..e2ec13a18b 100644
--- a/src/shared/components/Settings/SettingsBanner/index.jsx
+++ b/src/shared/components/Settings/SettingsBanner/index.jsx
@@ -16,6 +16,7 @@ const SettingsBanner = ({
   row,
 }) => {
   const [open, setOpen] = useState(defaultOpen);
+  const childrenArr = React.Children.toArray(children);
 
   return (
     <div styleName="settings-banner">
@@ -35,11 +36,12 @@ const SettingsBanner = ({
       {
         open ? (
           <div styleName="page-row">
+            { childrenArr.length > 1 && childrenArr[0] }
             <PageRow row={row}>
               <div>
                 <p styleName="description">{description}</p>
               </div>
-              {children}
+              {childrenArr.length > 1 ? childrenArr[1] : childrenArr[0] }
             </PageRow>
           </div>
         ) : null
diff --git a/src/shared/components/Settings/Tools/Devices/List/Item/index.jsx b/src/shared/components/Settings/Tools/Devices/List/Item/index.jsx
index f81e794d98..5e6206e261 100644
--- a/src/shared/components/Settings/Tools/Devices/List/Item/index.jsx
+++ b/src/shared/components/Settings/Tools/Devices/List/Item/index.jsx
@@ -7,6 +7,7 @@ import PT from 'prop-types';
 import ReactSVG from 'react-svg';
 import cn from 'classnames';
 import { isomorphy } from 'topcoder-react-utils';
+import Tooltip from 'components/Tooltip';
 
 import './styles.scss';
 
@@ -36,6 +37,18 @@ export default function Item(props) {
   secondLineItems.push(device.deviceType);
   const secondLine = secondLineItems.join(' | ');
 
+  const deleteTip = (
+    <div styleName="tctooltiptext">
+      <p>Delete</p>
+    </div>
+  );
+
+  const editTip = (
+    <div styleName="tctooltiptext">
+      <p>Edit</p>
+    </div>
+  );
+
   return (
     <div styleName={cn('container', { isEditing })}>
       <div styleName="device-info">
@@ -44,7 +57,7 @@ export default function Item(props) {
         </div>
         <div styleName="device-parameters">
           {hasModel ? (
-            <div styleName="parameter-model">
+            <div>
               {device.model}
             </div>
           ) : null}
@@ -54,30 +67,39 @@ export default function Item(props) {
         </div>
       </div>
       <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
-        >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          tabIndex={0}
-          styleName="delete"
-          role="button"
-          onKeyPress={() => onDeleteItem(index)}
-          onClick={() => onDeleteItem(index)}
+        <Tooltip
+          id="edit-tip"
+          content={editTip}
+          trigger={['hover', 'focus']}
         >
-          <img src={assets('./trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
+          <a
+            styleName="edit"
+            onKeyPress={() => onEditItem(index)}
+            tabIndex={0}
+            role="button"
+            onClick={() => onEditItem(index)}
+          >
+            <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          </a>
+        </Tooltip>
+        <div styleName="delete-wrapper">
+          <Tooltip
+            id="delete-tip"
+            content={deleteTip}
+            trigger={['hover', 'focus']}
+          >
+            <a
+              styleName="delete"
+              onKeyPress={() => onDeleteItem(index)}
+              tabIndex={0}
+              role="button"
+              onClick={() => onDeleteItem(index)}
+            >
+              <img src={assets('./trash.svg')} alt="delete-icon" />
+            </a>
+
+          </Tooltip>
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss b/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
index 5a283b9eec..9b2f3ad798 100644
--- a/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
@@ -4,34 +4,42 @@
   display: flex;
   flex-direction: row;
   justify-items: center;
-  align-items: center;
   justify-content: space-between;
-  height: 100%;
+  align-items: center;
+  min-height: 96px;
   width: 100%;
-  padding: 19px 20px 18px 45px;
-  border: 1px solid $tc-gray-10;
   border-bottom: none;
   background-color: $tc-white;
+  padding: $pad-lg;
+  border: 1px solid $color-black-20;
+  border-radius: 8px;
 
-  &.isEditing {
-    border: 1px solid $tc-gray-75;
+  @include xs {
+    padding: $pad-sm;
   }
 }
 
 .device-info {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
-  flex: 1;
 }
 
 .device-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+  background: $color-black-5;
+  border-radius: 4px;
+  margin-right: $margin-lg;
+
+  svg {
+    display: block;
+  }
 }
 
 .device-parameters {
@@ -41,9 +49,10 @@
   flex-direction: column;
   justify-items: center;
   justify-content: center;
+  font-size: 15px;
   line-height: 20px;
+  text-transform: capitalize;
   padding-right: 20px;
-  flex: 1;
 
   &.single-line {
     flex-direction: row;
@@ -51,24 +60,77 @@
   }
 
   > div:first-child {
-    @include roboto-medium;
+    @include roboto-bold;
+
+    color: $tc-black;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: 0.5px;
+    text-transform: capitalize;
+    word-break: break-all;
+
+    &.single-line {
+      margin-bottom: 0;
+    }
 
-    font-size: 15px !important;
-    letter-spacing: -0.16px !important;
-    color: $tc-black !important;
+    @include upto-sm {
+      margin-bottom: 0;
+    }
   }
 }
 
-.parameter-model {
-  margin-bottom: 8px;
+.parameter-second-line,
+.parameter-third-line,
+.parameter-second-line-mobile {
+  @include roboto-medium;
+
+  color: $color-black-60;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  word-break: break-all;
+}
+
+.parameter-second-line-mobile {
+  @include upto-sm {
+    display: flex;
+    flex-direction: column;
+
+    p {
+      word-break: break-all;
+    }
+  }
 }
 
-.parameter-second-line {
-  @include roboto-regular;
+.tctooltiptext {
+  background: $tc-black;
+  color: $tc-white;
+  border-radius: 8px;
+  padding: 10px;
+
+  p {
+    @include roboto-medium;
 
-  font-size: 13px;
-  letter-spacing: -0.14px;
-  color: #888894;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.tctooltiptext::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  left: 50%;
+  border-top-color: $tc-black;
+  z-index: 1000;
 }
 
 .operation-container {
@@ -76,22 +138,32 @@
   flex-direction: row;
   justify-content: space-between;
 
+  .delete-wrapper {
+    margin-left: $margin-xl;
+    margin-right: $margin-xs;
+
+    @include xs-to-sm {
+      margin-left: $margin-lg;
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 320px) {
+      margin-right: 0;
+      margin-left: 6px;
+    }
+  }
+
   .delete {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-items: center;
-    justify-content: flex-start;
+    justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
@@ -115,14 +187,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
diff --git a/src/shared/components/Settings/Tools/Devices/List/styles.scss b/src/shared/components/Settings/Tools/Devices/List/styles.scss
index af0001d2bd..b799bc7594 100644
--- a/src/shared/components/Settings/Tools/Devices/List/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/List/styles.scss
@@ -4,6 +4,7 @@
   width: 100%;
   background-color: $tc-white;
   padding: 0;
+  margin-bottom: 30px;
 
   &.active {
     margin-top: 20px;
@@ -19,11 +20,7 @@
     justify-items: center;
 
     li {
-      min-height: 85px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
+      margin-bottom: $margin-md;
     }
   }
 
diff --git a/src/shared/components/Settings/Tools/Devices/index.jsx b/src/shared/components/Settings/Tools/Devices/index.jsx
index 3df24ea2d5..cd1586ed06 100644
--- a/src/shared/components/Settings/Tools/Devices/index.jsx
+++ b/src/shared/components/Settings/Tools/Devices/index.jsx
@@ -11,13 +11,16 @@ import React from 'react';
 import PT from 'prop-types';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import ErrorMessage from 'components/Settings/ErrorMessage';
+import FormField from 'components/Settings/FormField';
+import AddItemIcon from 'assets/images/settings-add-item.svg';
+import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import { PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit';
 import InputSelect from 'components/InputSelect';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
 import { toastr } from 'react-redux-toastr';
 import ConfirmationModal from '../../ConfirmationModal';
 import DeviceList from './List';
 
-import './styles.scss';
+import styles from './styles.scss';
 
 export default class Devices extends ConsentComponent {
   constructor(props) {
@@ -83,7 +86,7 @@ export default class Devices extends ConsentComponent {
    * @param e event
    */
   onHandleAddDevice(e) {
-    e.preventDefault();
+    if (e) e.preventDefault();
     const { newDevice, deviceTrait } = this.state;
     const { clearDeviceState } = this.props;
     this.setState({ isSubmit: true });
@@ -289,7 +292,7 @@ export default class Devices extends ConsentComponent {
 
   /**
    * Update deviceType
-   * @param e event
+   * @param option selected value
    */
   onUpdateType(val) {
     const {
@@ -452,7 +455,7 @@ export default class Devices extends ConsentComponent {
       isOsesLoading,
     } = lookupData;
     const {
-      deviceTrait, isMobileView, showConfirmation, indexNo, isEdit,
+      deviceTrait, showConfirmation, indexNo, isEdit,
       formInvalid, isSubmit,
     } = this.state;
     const deviceItems = deviceTrait.traits
@@ -460,7 +463,7 @@ export default class Devices extends ConsentComponent {
     const { newDevice } = this.state;
     const canModifyTrait = !this.props.traitRequestCount;
     return (
-      <div styleName="devices-container">
+      <React.Fragment>
         {
           this.shouldRenderConsent() && this.renderConsent()
         }
@@ -472,306 +475,130 @@ export default class Devices extends ConsentComponent {
             name={`${deviceTrait.traits.data[indexNo].deviceType}${!_.isEmpty(deviceTrait.traits.data[indexNo].manufacturer) ? ` ${deviceTrait.traits.data[indexNo].manufacturer}` : ''}`}
           />
         )}
-        <h1>
-          Devices
-        </h1>
-        <div styleName={`sub-title ${deviceItems.length > 0 ? '' : 'hidden'}`}>
-          Your devices
-        </div>
-        {
-          !isMobileView && deviceItems.length > 0
-          && (
-            <DeviceList
-              deviceList={{ items: deviceItems }}
-              onDeleteItem={this.onHandleDeleteDevice}
-              indexNo={indexNo}
-              disabled={!canModifyTrait}
-              onEditItem={this.onEditDevice}
-            />
-          )
-        }
-        <div styleName={`sub-title ${deviceItems.length > 0 ? 'second' : 'first'}`}>
-          {
-            isEdit ? (<React.Fragment>Edit device</React.Fragment>)
-              : (<React.Fragment>Add a new device</React.Fragment>)
-          }
-        </div>
-        <div styleName="form-container-default">
-          <form name="device-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="deviceType">
-                  Type
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <span styleName="text-required">* Required</span>
-                <InputSelect
-                  name="deviceType"
-                  options={types}
-                  onChange={this.onUpdateType}
-                  value={newDevice.deviceType}
-                  placeholder="Select device Type"
-                  valueKey="name"
-                  labelKey="name"
-                  disabled={!canModifyTrait}
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newDevice.deviceType) && formInvalid} addMargin message="Type cannot be empty" />
-                  )
-                }
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1-no-padding">
-                <label htmlFor="manufacturer">
-                  Manufacturer
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <InputSelect
-                  name="manufacturer"
-                  options={manufacturers}
-                  onChange={this.onUpdateManufacturer}
-                  value={newDevice.manufacturer}
-                  placeholder="Select device Manufacturer"
-                  valueKey="name"
-                  labelKey="name"
-                  disabled={!canModifyTrait}
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1-no-padding">
-                <label htmlFor="model">
-                  Model
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <InputSelect
-                  name="model"
-                  options={models}
-                  onChange={this.onUpdateModel}
-                  value={newDevice.model}
-                  placeholder="Select device Model"
-                  valueKey="model"
-                  labelKey="model"
-                  onLoadMore={this.onLoadMoreModels}
-                  isLoading={isModelsLoading}
-                  hasMore={hasMoreModels}
-                  disabled={!canModifyTrait}
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1-no-padding">
-                <label htmlFor="operating-system">
-                  Operating System
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <InputSelect
-                  name="Operating System"
-                  options={oses}
-                  onChange={this.onUpdateOs}
-                  value={newDevice.operatingSystem}
-                  placeholder="Select device Operating System"
-                  valueKey="operatingSystem"
-                  labelKey="operatingSystem"
-                  hasMore={hasMoreOses}
-                  isLoading={isOsesLoading}
-                  onLoadMore={this.onLoadMoreOses}
-                  disabled={!canModifyTrait}
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                />
-              </div>
-            </div>
-          </form>
-          <div styleName="button-container">
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddDevice}
-              >
-                {
-                  isEdit ? (<React.Fragment>Edit device to your list</React.Fragment>)
-                    : (<React.Fragment>Add device to your list</React.Fragment>)
-                }
-              </PrimaryButton>
-            </div>
+        <div styleName="form-container">
+          <Collapse>
+            <h2 styleName="form-title">
+              Your Devices
+            </h2>
             {
-              isEdit && (
-                <div styleName="button-cancel">
-                  <PrimaryButton
-                    styleName="complete"
-                    onClick={this.onCancelEditStatus}
-                  >
-                    Cancel
-                  </PrimaryButton>
-                </div>
+              deviceItems.length > 0
+              && (
+                <DeviceList
+                  deviceList={{ items: deviceItems }}
+                  onDeleteItem={this.onHandleDeleteDevice}
+                  onEditItem={this.onEditDevice}
+                />
               )
             }
-          </div>
-          <div styleName="help-text-container">
-            <div styleName="help-text-label">
-              Don&#39;t see your device?
-            </div>
-            <div styleName="help-text-email">
-              Contact Support at <a href="mailto:support@topcoder.com">support@topcoder.com</a>
-            </div>
-          </div>
-        </div>
-        <div styleName="form-container-mobile">
-          <form name="device-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <p>
-                {
-                  isEdit ? (<React.Fragment>Edit Device</React.Fragment>)
-                    : (<React.Fragment>Add Device</React.Fragment>)
-                }
-              </p>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="deviceType">
-                  Type
-                  <span styleName="text-required">* Required</span>
-                  <input type="hidden" />
-                </label>
-                <InputSelect
-                  name="deviceType"
-                  options={types}
-                  onChange={this.onUpdateType}
-                  value={newDevice.deviceType}
-                  placeholder="Select device Type"
-                  valueKey="name"
-                  labelKey="name"
-                  disabled={!canModifyTrait}
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newDevice.deviceType) && formInvalid} addMargin message="Type cannot be empty" />
-                  )
-                }
+            <div styleName="form-content">
+              <div styleName="form-label">
+                Add a new device to your devices list
               </div>
-              <div styleName="field col-1">
-                <label htmlFor="manufacturer">
-                  Manufacturer
-                  <input type="hidden" />
-                </label>
-                <InputSelect
-                  name="manufacturer"
-                  options={manufacturers}
-                  onChange={this.onUpdateManufacturer}
-                  value={newDevice.manufacturer}
-                  placeholder="Select device Manufacturer"
-                  valueKey="name"
-                  labelKey="name"
-                  disabled={!canModifyTrait}
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                />
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-2">
-                <label htmlFor="model">
-                  Model
-                  <input type="hidden" />
-                </label>
-                <InputSelect
-                  name="model"
-                  options={models}
-                  onChange={this.onUpdateModel}
-                  value={newDevice.model}
-                  placeholder="Select device Model"
-                  valueKey="model"
-                  labelKey="model"
-                  onLoadMore={this.onLoadMoreModels}
-                  isLoading={isModelsLoading}
-                  hasMore={hasMoreModels}
-                  disabled={!canModifyTrait}
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                />
-              </div>
-              <div styleName="field col-2">
-                <label htmlFor="operating-system">
-                  Operating System
-                  <input type="hidden" />
-                </label>
-                <InputSelect
-                  name="Operating System"
-                  options={oses}
-                  onChange={this.onUpdateOs}
-                  value={newDevice.operatingSystem}
-                  placeholder="Select device Operating System"
-                  valueKey="operatingSystem"
-                  labelKey="operatingSystem"
-                  hasMore={hasMoreOses}
-                  isLoading={isOsesLoading}
-                  onLoadMore={this.onLoadMoreOses}
-                  disabled={!canModifyTrait}
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                />
+              <div styleName="form-body">
+                <form styleName="device-form" noValidate autoComplete="off">
+                  <FormField label="Device Type *" style={{ flex: '0 0 100%' }}>
+                    <InputSelect
+                      name="Device Type"
+                      options={types}
+                      value={newDevice.deviceType}
+                      onChange={this.onUpdateType}
+                      placeholder="Select"
+                      labelKey="name"
+                      valueKey="name"
+                      disabled={!canModifyTrait}
+                      clearable={false}
+                      onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
+                    />
+                    { isSubmit && formInvalid && (
+                      <ErrorMessage
+                        invalid={_.isEmpty(newDevice.deviceType) && formInvalid}
+                        addMargin
+                        message="Type cannot be empty"
+                      />
+                    )
+                    }
+                  </FormField>
+
+                  <FormField label="Manufacturer" style={{ flex: '0 0 100%' }}>
+                    <InputSelect
+                      name="manufacturer"
+                      options={manufacturers}
+                      value={newDevice.manufacturer}
+                      onChange={this.onUpdateManufacturer}
+                      placeholder="Select"
+                      labelKey="name"
+                      valueKey="name"
+                      disabled={!canModifyTrait}
+                      onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
+                    />
+                  </FormField>
+
+                  <FormField label="Model" style={{ flex: '0 0 100%' }}>
+                    <InputSelect
+                      name="model"
+                      options={models}
+                      onChange={this.onUpdateModel}
+                      value={newDevice.model}
+                      placeholder="Select device Model"
+                      valueKey="model"
+                      labelKey="model"
+                      onLoadMore={this.onLoadMoreModels}
+                      isLoading={isModelsLoading}
+                      hasMore={hasMoreModels}
+                      disabled={!canModifyTrait}
+                      onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
+                    />
+                  </FormField>
+
+                  <FormField label="Operating System" style={{ flex: '0 0 100%' }}>
+                    <InputSelect
+                      name="Operating System"
+                      options={oses}
+                      onChange={this.onUpdateOs}
+                      value={newDevice.operatingSystem}
+                      placeholder="Select device Operating System"
+                      valueKey="operatingSystem"
+                      labelKey="operatingSystem"
+                      hasMore={hasMoreOses}
+                      isLoading={isOsesLoading}
+                      onLoadMore={this.onLoadMoreOses}
+                      disabled={!canModifyTrait}
+                      onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
+                    />
+                  </FormField>
+                </form>
               </div>
-            </div>
-          </form>
-          <div styleName="button-container">
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddDevice}
-              >
-                {
-                  isEdit ? (<React.Fragment>Edit Device</React.Fragment>)
-                    : (<React.Fragment>Add Device</React.Fragment>)
-                }
-              </PrimaryButton>
-            </div>
-            {
-              isEdit && (
-                <div styleName="button-cancel">
+              <div styleName="form-footer">
+                {!isEdit && (
+                <PrimaryButton
+                  theme={{ button: styles.button }}
+                  onClick={this.onHandleAddDevice}
+                >
+                  <AddItemIcon styleName="icon" /> Add Device to Your List
+                </PrimaryButton>
+                )}
+
+                { isEdit && (
+                <React.Fragment>
                   <PrimaryButton
-                    styleName="complete"
+                    theme={{ button: styles.button }}
+                    onClick={this.onHandleAddDevice}
+                  >
+                    Edit Device to Your List
+                  </PrimaryButton>
+                  <SecondaryButton
+                    theme={{ button: styles.button }}
                     onClick={this.onCancelEditStatus}
                   >
                     Cancel
-                  </PrimaryButton>
-                </div>
-              )
-            }
-          </div>
-          <div styleName="help-text-container">
-            <div styleName="help-text-label">
-              Don&#39;t see your device?
-            </div>
-            <div styleName="help-text-email">
-              Contact Support at <a href="mailto:support@topcoder.com">support@topcoder.com</a>
+                  </SecondaryButton>
+                </React.Fragment>
+                )}
+              </div>
             </div>
-          </div>
+          </Collapse>
         </div>
-        {
-          isMobileView
-          && (
-            <DeviceList
-              deviceList={{ items: deviceItems }}
-              indexNo={indexNo}
-              onDeleteItem={this.onHandleDeleteDevice}
-              disabled={!canModifyTrait}
-              onEditItem={this.onEditDevice}
-            />
-          )
-        }
-
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/shared/components/Settings/Tools/Devices/styles.scss b/src/shared/components/Settings/Tools/Devices/styles.scss
index 1ae894a088..4dc00db6b0 100644
--- a/src/shared/components/Settings/Tools/Devices/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/styles.scss
@@ -1,287 +1,110 @@
-@import "../../style";
+@import "~styles/mixins";
 
-.devices-container {
-  display: flex;
-  flex-direction: column;
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 30px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
-
-    &.second {
-      margin-top: 50px;
-      margin-bottom: 30px;
-    }
+.form-container {
+  padding: $pad-xxxxl;
+  background-color: $color-tc-white;
+  border-radius: 4px;
+  margin: $margin-sm 0 0;
 
-    &.first {
-      margin-bottom: 30px;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
+  .device-form {
+    display: flex;
+    flex-wrap: wrap;
   }
 }
 
-.form-container-default {
-  @include form-container-default;
-
-  input {
-    @include roboto-regular;
-
-    height: 40px;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-    margin-bottom: 0;
-  }
-
-  .text-required {
-    @include roboto-medium;
+.form-title {
+  @include barlow-semi-bold;
 
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-bottom: 5px;
-    text-align: right;
-  }
+  font-size: 20px;
+  line-height: 22px;
+  color: inherit;
+  text-transform: uppercase;
+  padding-bottom: $pad-xxxxl;
 }
 
-.form-container-mobile {
-  display: none;
-
-  @include upto-sm {
-    display: flex;
-    flex-direction: column;
-    border: 0;
-    border-radius: 0;
-    padding: 20px;
-    background-color: $tc-gray-neutral-light;
-    border-bottom: 1px solid $tc-gray-10;
-  }
-
-  p {
-    @include roboto-regular;
-
-    font-size: 20px;
-    line-height: 30px;
-    font-weight: 400;
-    color: $tc-black;
-
-    @include upto-sm {
-      margin-bottom: 20px;
-    }
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    align-content: space-between;
-    align-items: center;
-    width: 100%;
-
-    @include upto-sm {
-      display: block;
-      margin-bottom: 0;
-    }
-
-    .field {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      margin-right: 10px;
-      align-content: space-between;
-
-      @include upto-sm {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-      }
-
-      label {
-        @include roboto-medium;
-
-        font-size: 12px;
-        line-height: 15px;
-        font-weight: 500;
-        color: $tc-gray-80;
-        margin-bottom: 5px;
-        display: flex;
-        justify-content: space-between;
-
-        .text-required {
-          color: $tc-red-110;
-        }
-      }
-
-      &.col-1,
-      &.col-1-no-padding {
-        width: 35%;
-
-        @include upto-sm {
-          width: 100%;
-        }
-
-        > div {
-          @include upto-sm {
-            margin-top: 5px;
-          }
-        }
-      }
-
-      &.col-2 {
-        width: 50%;
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-    }
+.form-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
 
-    div.field:last-child {
-      margin-right: 0;
-    }
-  }
+.form-label {
+  flex: 0 0 calc(50% - 13px);
+  padding-right: 230px;
 
-  input {
-    @include roboto-regular;
+  @include roboto-regular;
 
-    margin: 0;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
+  font-size: 16px;
+  line-height: 26px;
+  color: inherit;
+}
 
-    @include upto-sm {
-      margin-top: 5px;
-    }
-  }
+.form-body {
+  flex: 0 0 calc(50% + 13px);
 }
 
-.button-container {
+.form-footer {
   display: flex;
-  justify-content: center;
   align-items: center;
-  margin-top: 50px;
-
-  .button-save,
-  .button-cancel {
-    align-self: center;
-
-    @include upto-sm {
-      margin-top: 10px;
-    }
-
-    button,
-    a {
-      @include roboto-medium;
-
-      height: 40px;
-      font-size: 15px;
-      font-weight: 500;
-      line-height: 40px;
-      margin: 0;
-      padding: 0;
-      width: 199px;
-
-      @include upto-sm {
-        width: 156px;
-      }
+  justify-content: flex-start;
+  margin-left: calc(50% - 13px);
+  padding: $pad-sm 0;
+  gap: 8px 16px;
+
+  .button {
+    @include roboto-bold;
+
+    font-size: 14px;
+    line-height: 22px;
+    color: $color-turq-160;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent !important;
+    border: none;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none !important;
+      color: lighten($color-turq-160, 5%);
+      background: transparent !important;
+      box-shadow: none !important;
     }
 
-    .complete {
-      color: $tc-white;
+    .icon {
+      margin-right: $margin-xs;
     }
   }
-
-  .button-cancel {
-    margin-left: 10px;
-  }
 }
 
-/*
- * React Select component styling
- */
-.devices-container .form-container .row .field :global .Select,
-.devices-container .form-container .row .field :global .Select-value span,
-.devices-container .form-container .row .field :global .Select-menu-outer,
-.devices-container .form-container .row .field :global .Select-placeholder,
-.devices-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    //margin-top: 5px;
+@include xs-to-md {
+  .form-container {
+    padding: $pad-xxl $pad-lg;
   }
-}
 
-.devices-container div[class="Select-control"] {
-  height: 40px;
+  .form-title {
+    @include barlow-condensed-medium;
 
-  div[class="Select-input"] {
-    height: 38px;
+    font-size: 22px;
+    line-height: 24px;
+    padding-bottom: $pad-xxl;
   }
 
-  div[class="Select-placeholder"] {
-    height: 38px;
-    line-height: 40px !important;
-
-    @include upto-sm {
-      line-height: 38px !important;
-    }
+  .form-label {
+    flex: 1 1 100%;
+    padding: 0;
+    margin-bottom: $margin-xxl;
+    font-size: 14px;
+    line-height: 20px;
   }
 
-  div[class="Select-value"] {
-    line-height: 40px !important;
+  .form-body {
+    flex: 1 1 100%;
   }
-}
 
-.devices-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
-}
-
-.help-text-container {
-  margin-top: 45px;
-  margin-bottom: 40px;
-  font-size: 15px;
-  color: $tc-black;
-  text-align: center;
-}
-
-.help-text-label {
-  @include roboto-bold;
-}
-
-.help-text-email {
-  @include roboto-regular;
-
-  margin-top: 10px;
+  .form-footer {
+    margin: 0;
+  }
 }
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/List/Item/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/List/Item/index.jsx
index 7c54d385d9..a6f5754162 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/List/Item/index.jsx
+++ b/src/shared/components/Settings/Tools/ServiceProviders/List/Item/index.jsx
@@ -5,6 +5,7 @@ import React from 'react';
 import PT from 'prop-types';
 import ReactSVG from 'react-svg';
 import { isomorphy } from 'topcoder-react-utils';
+import Tooltip from 'components/Tooltip';
 
 import './styles.scss';
 
@@ -21,6 +22,18 @@ export default function Item(props) {
     onEditItem,
   } = props;
 
+  const deleteTip = (
+    <div styleName="tctooltiptext">
+      <p>Delete</p>
+    </div>
+  );
+
+  const editTip = (
+    <div styleName="tctooltiptext">
+      <p>Edit</p>
+    </div>
+  );
+
   return (
     <div styleName="container">
       <div styleName="service-provider-info">
@@ -37,30 +50,39 @@ export default function Item(props) {
         </div>
       </div>
       <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
-        >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          styleName="delete"
-          onKeyPress={() => onDeleteItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onDeleteItem(index)}
+        <Tooltip
+          id="edit-tip"
+          content={editTip}
+          trigger={['hover', 'focus']}
         >
-          <img src={assets('./trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
+          <a
+            styleName="edit"
+            onKeyPress={() => onEditItem(index)}
+            tabIndex={0}
+            role="button"
+            onClick={() => onEditItem(index)}
+          >
+            <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          </a>
+        </Tooltip>
+        <div styleName="delete-wrapper">
+          <Tooltip
+            id="delete-tip"
+            content={deleteTip}
+            trigger={['hover', 'focus']}
+          >
+            <a
+              styleName="delete"
+              onKeyPress={() => onDeleteItem(index)}
+              tabIndex={0}
+              role="button"
+              onClick={() => onDeleteItem(index)}
+            >
+              <img src={assets('./trash.svg')} alt="delete-icon" />
+            </a>
+
+          </Tooltip>
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss
index 139340d53e..dda11f7e8c 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss
@@ -4,26 +4,42 @@
   display: flex;
   flex-direction: row;
   justify-items: center;
-  align-items: center;
   justify-content: space-between;
-  height: 100%;
+  align-items: center;
+  min-height: 96px;
   width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
   border-bottom: none;
   background-color: $tc-white;
+  padding: $pad-lg;
+  border: 1px solid $color-black-20;
+  border-radius: 8px;
+
+  @media screen and (max-width: 374px) {
+    padding: $pad-sm;
+  }
 }
 
 .service-provider-info {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 }
 
 .service-provider-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+  background: $color-black-5;
+  border-radius: 4px;
+  margin-right: $margin-lg;
+
+  svg {
+    display: block;
+  }
 }
 
 .service-provider-parameters {
@@ -32,20 +48,89 @@
   display: flex;
   flex-direction: column;
   justify-items: center;
-  justify-content: left;
+  justify-content: center;
   font-size: 15px;
   line-height: 20px;
+  text-transform: capitalize;
+  padding-right: 20px;
+
+  &.single-line {
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .parameter-first-line {
-  font-weight: 500;
+  @include roboto-bold;
+
   color: $tc-black;
-  margin-bottom: 10px;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
+  word-break: break-all;
+
+  &.single-line {
+    margin-bottom: 0;
+  }
+
+  @include upto-sm {
+    margin-bottom: 0;
+  }
 }
 
-.parameter-second-line {
-  color: $tc-gray-50;
+.parameter-second-line,
+.parameter-third-line,
+.parameter-second-line-mobile {
+  @include roboto-medium;
+
+  color: $color-black-60;
   font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  word-break: break-all;
+}
+
+.parameter-second-line-mobile {
+  @include upto-sm {
+    display: flex;
+    flex-direction: column;
+
+    p {
+      word-break: break-all;
+    }
+  }
+}
+
+.tctooltiptext {
+  background: $tc-black;
+  color: $tc-white;
+  border-radius: 8px;
+  padding: 10px;
+
+  p {
+    @include roboto-medium;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.tctooltiptext::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  left: 50%;
+  border-top-color: $tc-black;
+  z-index: 1000;
 }
 
 .operation-container {
@@ -53,6 +138,21 @@
   flex-direction: row;
   justify-content: space-between;
 
+  .delete-wrapper {
+    margin-left: $margin-xl;
+    margin-right: $margin-xs;
+
+    @include xs-to-sm {
+      margin-left: $margin-lg;
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 320px) {
+      margin-right: 0;
+      margin-left: 6px;
+    }
+  }
+
   .delete {
     display: flex;
     flex-direction: column;
@@ -60,14 +160,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
@@ -93,11 +189,8 @@
     outline-style: none;
 
     img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss
index 1ac94a9d67..979df1bf53 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss
+++ b/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss
@@ -4,6 +4,7 @@
   width: 100%;
   background-color: $tc-white;
   padding: 0;
+  margin: 0 0 $margin-xxxxl;
 
   &.active {
     margin-top: 20px;
@@ -19,11 +20,7 @@
     justify-items: center;
 
     li {
-      min-height: 90px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
+      margin-bottom: $margin-md;
     }
   }
 
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
index c03aee990d..252fd1b2d0 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
+++ b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
@@ -11,13 +11,17 @@ import PT from 'prop-types';
 import _ from 'lodash';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import ErrorMessage from 'components/Settings/ErrorMessage';
-import Select from 'components/Select';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
+import FormField from 'components/Settings/FormField';
+import FormInputText from 'components/Settings/FormInputText';
+import AddItemIcon from 'assets/images/settings-add-item.svg';
+import FormInputSelect from 'components/Settings/FormInputSelect';
+import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import { PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit';
 import ConfirmationModal from '../../ConfirmationModal';
 import dropdowns from './dropdowns.json';
 import ServiceProviderList from './List';
 
-import './styles.scss';
+import styles from './styles.scss';
 
 export default class ServiceProviders extends ConsentComponent {
   constructor(props) {
@@ -82,7 +86,7 @@ export default class ServiceProviders extends ConsentComponent {
    * @param e event
    */
   onHandleAddServiceProvider(e) {
-    e.preventDefault();
+    if (e) e.preventDefault();
     const { newServiceProvider } = this.state;
     this.setState({ isSubmit: true });
     if (this.onCheckFormValue(newServiceProvider)) {
@@ -294,7 +298,7 @@ export default class ServiceProviders extends ConsentComponent {
 
   render() {
     const {
-      serviceProviderTrait, isMobileView, showConfirmation, indexNo, isEdit,
+      serviceProviderTrait, showConfirmation, indexNo, isEdit,
       formInvalid, isSubmit,
     } = this.state;
     const serviceProviderItems = serviceProviderTrait.traits
@@ -302,7 +306,7 @@ export default class ServiceProviders extends ConsentComponent {
     const { newServiceProvider } = this.state;
     const canModifyTrait = !this.props.traitRequestCount;
     return (
-      <div styleName="service-provider-container">
+      <React.Fragment>
         {
           this.shouldRenderConsent() && this.renderConsent()
         }
@@ -314,189 +318,98 @@ export default class ServiceProviders extends ConsentComponent {
             name={serviceProviderTrait.traits.data[indexNo].name}
           />
         )}
-        <h1>
-          Service Providers
-        </h1>
-        <div styleName={`sub-title ${serviceProviderItems.length > 0 ? '' : 'hidden'}`}>
-          Your service providers
-        </div>
-        {
-          !isMobileView && serviceProviderItems.length > 0
-          && (
-            <ServiceProviderList
-              serviceProviderList={{ items: serviceProviderItems }}
-              onDeleteItem={this.onHandleDeleteServiceProvider}
-              disabled={!canModifyTrait}
-              onEditItem={this.onEditServiceProvider}
-            />
-          )
-        }
-        <div styleName={`sub-title ${serviceProviderItems.length > 0 ? 'second' : 'first'}`}>
-          {
-            isEdit ? (<React.Fragment>Edit service provider</React.Fragment>)
-              : (<React.Fragment>Add a new service provider</React.Fragment>)
-          }
-        </div>
-        <div styleName="form-container-default">
-          <form name="device-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="serviceProviderType">
-                  Type
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <span styleName="text-required">* Required</span>
-                <Select
-                  name="serviceProviderType"
-                  options={dropdowns.serviceProviderType}
-                  onChange={this.onUpdateSelect}
-                  value={newServiceProvider.serviceProviderType}
-                  placeholder="Service Provider Type"
-                  labelKey="name"
-                  valueKey="name"
-                  clearable={false}
+        <div styleName="form-container">
+          <Collapse>
+            <h2 styleName="form-title">
+              Service Provider
+            </h2>
+            {
+              serviceProviderItems.length > 0
+              && (
+                <ServiceProviderList
+                  serviceProviderList={{ items: serviceProviderItems }}
+                  onDeleteItem={this.onHandleDeleteServiceProvider}
                   disabled={!canModifyTrait}
+                  onEditItem={this.onEditServiceProvider}
                 />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newServiceProvider.serviceProviderType) && formInvalid} addMargin message="Type cannot be empty" />
-                  )
-                }
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="name">
-                  Name
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <span styleName="text-required">* Required</span>
-                <input disabled={!canModifyTrait} id="name" name="name" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newServiceProvider.name} maxLength="64" required />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newServiceProvider.name) && formInvalid} message="Name cannot be empty" />
-                  )
-                }
-              </div>
-            </div>
-          </form>
-          <div styleName="button-container">
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddServiceProvider}
-              >
-                {
-                  isEdit ? (<React.Fragment>Edit service provider to your list</React.Fragment>)
-                    : (<React.Fragment>Add service provider to your list</React.Fragment>)
-                }
-              </PrimaryButton>
-            </div>
-            {
-              isEdit && (
-                <div styleName="button-cancel">
-                  <PrimaryButton
-                    styleName="complete"
-                    onClick={this.onCancelEditStatus}
-                  >
-                    Cancel
-                  </PrimaryButton>
-                </div>
               )
             }
-          </div>
-        </div>
-        <div styleName="form-container-mobile">
-          <form name="service-provider-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <p>
-                {
-                  isEdit ? (<React.Fragment>Edit Service Provider</React.Fragment>)
-                    : (<React.Fragment>Add Service Provider</React.Fragment>)
-                }
-              </p>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="serviceProviderType">
-                  Type
-                  <span styleName="text-required">* Required</span>
-                  <input type="hidden" />
-                </label>
-                <Select
-                  name="serviceProviderType"
-                  options={dropdowns.serviceProviderType}
-                  onChange={this.onUpdateSelect}
-                  value={newServiceProvider.serviceProviderType}
-                  placeholder="Service Provider Type"
-                  labelKey="name"
-                  valueKey="name"
-                  clearable={false}
-                  disabled={!canModifyTrait}
-                />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newServiceProvider.serviceProviderType) && formInvalid} addMargin message="Type cannot be empty" />
-                  )
-                }
+            <div styleName="form-content">
+              <div styleName="form-label">
+                Add a new service provider
               </div>
-              <div styleName="field col-2">
-                <label htmlFor="name">
-                  Provider Name
-                  <span styleName="text-required">* Required</span>
-                  <input type="hidden" />
-                </label>
-                <input disabled={!canModifyTrait} id="name" name="name" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newServiceProvider.name} maxLength="64" required />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newServiceProvider.name) && formInvalid} message="Name cannot be empty" />
-                  )
-                }
+              <div styleName="form-body">
+                <form styleName="service-provider-form" noValidate autoComplete="off">
+                  <FormField label="Service Provider Type *" style={{ flex: '0 0 100%' }}>
+                    <FormInputSelect
+                      name="serviceProviderType"
+                      options={dropdowns.serviceProviderType}
+                      onChange={this.onUpdateSelect}
+                      value={newServiceProvider.serviceProviderType}
+                      placeholder="Select"
+                      labelKey="name"
+                      valueKey="name"
+                      clearable={false}
+                      disabled={!canModifyTrait}
+                    />
+                    {
+                      isSubmit && (
+                        <ErrorMessage invalid={_.isEmpty(newServiceProvider.serviceProviderType) && formInvalid} addMargin message="Type cannot be empty" />
+                      )
+                    }
+                  </FormField>
+
+                  <FormField label="Service Provider Name *" style={{ flex: '0 0 100%' }}>
+                    <FormInputText
+                      disabled={!canModifyTrait}
+                      id="name"
+                      name="name"
+                      type="text"
+                      placeholder="Type here the Service Provider Name"
+                      onChange={this.onUpdateInput}
+                      value={newServiceProvider.name}
+                      maxLength="64"
+                      required
+                    />
+                    {
+                      isSubmit && (
+                        <ErrorMessage invalid={_.isEmpty(newServiceProvider.name) && formInvalid} message="Name cannot be empty" />
+                      )
+                    }
+                  </FormField>
+                </form>
               </div>
-            </div>
-          </form>
-          <div styleName="button-container">
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddServiceProvider}
-              >
-                {
-                  isEdit ? (<React.Fragment>Edit Provider</React.Fragment>)
-                    : (<React.Fragment>Add Provider</React.Fragment>)
-                }
-              </PrimaryButton>
-            </div>
-            {
-              isEdit && (
-                <div styleName="button-cancel">
+              <div styleName="form-footer">
+                {!isEdit && (
+                <PrimaryButton
+                  theme={{ button: styles.button }}
+                  onClick={this.onHandleAddServiceProvider}
+                >
+                  <AddItemIcon styleName="icon" /> Add Service Provider to Your List
+                </PrimaryButton>
+                )}
+
+                { isEdit && (
+                <React.Fragment>
                   <PrimaryButton
-                    styleName="complete"
+                    theme={{ button: styles.button }}
+                    onClick={this.onHandleAddServiceProvider}
+                  >
+                    Edit Service Provider to Your List
+                  </PrimaryButton>
+                  <SecondaryButton
+                    theme={{ button: styles.button }}
                     onClick={this.onCancelEditStatus}
                   >
                     Cancel
-                  </PrimaryButton>
-                </div>
-              )
-            }
-          </div>
+                  </SecondaryButton>
+                </React.Fragment>
+                )}
+              </div>
+            </div>
+          </Collapse>
         </div>
-        {
-          isMobileView
-          && (
-            <ServiceProviderList
-              serviceProviderList={{ items: serviceProviderItems }}
-              onDeleteItem={this.onHandleDeleteServiceProvider}
-              disabled={!canModifyTrait}
-              onEditItem={this.onEditServiceProvider}
-            />
-          )
-        }
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
index d693d25835..45b5cfc5ac 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
+++ b/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
@@ -1,275 +1,117 @@
-@import "../../style";
+@import "~styles/mixins";
 
-.service-provider-container {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
-
-    &.second {
-      margin-top: 50px;
-      margin-bottom: 30px;
-    }
+.form-container {
+  padding: $pad-xxxxl;
+  background-color: $color-tc-white;
+  border-radius: 4px;
+  margin: $margin-sm 0 0;
 
-    &.first {
-      margin-bottom: 30px;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
+  .service-provider-form {
+    display: flex;
+    flex-wrap: wrap;
   }
 }
 
-.form-container-default {
-  @include form-container-default;
-
-  input {
-    @include roboto-regular;
-
-    height: 40px;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-    margin-bottom: 0;
-  }
-
-  .text-required {
-    @include roboto-medium;
+.form-title {
+  @include barlow-semi-bold;
 
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-bottom: 5px;
-    text-align: right;
-  }
+  font-size: 20px;
+  line-height: 22px;
+  color: inherit;
+  text-transform: uppercase;
+  padding-bottom: $pad-xxxxl;
 }
 
-.form-container-mobile {
-  display: none;
-
-  @include upto-sm {
-    border: 0;
-    border-radius: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    background-color: $tc-gray-neutral-light;
-    width: 100%;
-    border-bottom: 1px solid $tc-gray-10;
-  }
-
-  p {
-    @include roboto-regular;
-
-    font-size: 20px;
-    line-height: 30px;
-    font-weight: 400;
-    color: $tc-black;
-
-    @include upto-sm {
-      margin-bottom: 20px;
-    }
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    align-content: space-between;
-
-    @include upto-sm {
-      width: 100%;
-      display: block;
-      margin-bottom: 0;
-    }
-
-    .field {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      margin-right: 10px;
-
-      @include upto-sm {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-      }
-
-      label {
-        @include roboto-medium;
-
-        font-size: 12px;
-        line-height: 15px;
-        font-weight: 500;
-        color: $tc-gray-80;
-        margin-bottom: 5px;
-        display: flex;
-        justify-content: space-between;
-
-        .text-required {
-          color: $tc-red-110;
-        }
-      }
-
-      &.col-1 {
-        width: 34%;
-
-        @include from-sm-to-lg {
-          width: 45%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-
-        > div {
-          @include upto-sm {
-            margin-top: 5px;
-          }
-        }
-      }
-
-      &.col-2 {
-        width: 66%;
-
-        @include from-sm-to-lg {
-          width: 55%;
-        }
+.form-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
 
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-    }
+.form-label {
+  flex: 0 0 calc(50% - 13px);
+  padding-right: 230px;
 
-    div.field:last-child {
-      margin-right: 0;
-    }
-  }
-
-  input {
-    @include roboto-regular;
+  @include roboto-regular;
 
-    margin: 0;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
+  font-size: 16px;
+  line-height: 26px;
+  color: inherit;
+}
 
-    @include upto-sm {
-      margin-top: 5px;
-    }
-  }
+.form-body {
+  flex: 0 0 calc(50% + 13px);
 }
 
-.button-container {
+.form-footer {
   display: flex;
-  justify-content: center;
   align-items: center;
-
-  .button-save,
-  .button-cancel {
-    align-self: center;
-
-    @include upto-sm {
-      margin-top: 10px;
+  justify-content: flex-start;
+  margin-left: calc(50% - 13px);
+  padding: $pad-sm 0;
+  gap: 8px 16px;
+  flex-wrap: wrap;
+
+  .button {
+    @include roboto-bold;
+
+    font-size: 14px;
+    line-height: 22px;
+    text-align: left;
+    color: $color-turq-160;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent !important;
+    border: none;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none !important;
+      color: lighten($color-turq-160, 5%);
+      background: transparent !important;
+      box-shadow: none !important;
     }
 
-    button,
-    a {
-      @include roboto-medium;
-
-      height: 40px;
-      font-size: 15px;
-      font-weight: 500;
-      line-height: 40px;
-      margin: 0;
-      padding: 0;
-      width: 300px;
+    .icon {
+      margin-right: $margin-xs;
 
-      @include upto-sm {
-        width: 156px;
+      @media screen and (max-width: 335px) {
+        position: relative;
+        bottom: 12px;
       }
     }
-
-    .complete {
-      color: $tc-white;
-    }
-  }
-
-  .button-cancel {
-    margin-left: 10px;
   }
 }
 
-/*
- * React Select component styling
- */
-.service-provider-container .form-container .row .field :global .Select,
-.service-provider-container .form-container .row .field :global .Select-value span,
-.service-provider-container .form-container .row .field :global .Select-menu-outer,
-.service-provider-container .form-container .row .field :global .Select-placeholder,
-.service-provider-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    margin-top: 5px;
+@include xs-to-md {
+  .form-container {
+    padding: $pad-xxl $pad-lg;
   }
-}
 
-.service-provider-container div[class="Select-control"] {
-  height: 40px;
+  .form-title {
+    @include barlow-condensed-medium;
 
-  div[class="Select-input"] {
-    height: 38px;
+    font-size: 22px;
+    line-height: 24px;
+    padding-bottom: $pad-xxl;
   }
 
-  div[class="Select-placeholder"] {
-    height: 38px;
-    line-height: 40px !important;
-
-    @include upto-sm {
-      line-height: 38px !important;
-    }
+  .form-label {
+    flex: 1 1 100%;
+    padding: 0;
+    margin-bottom: $margin-xxl;
+    font-size: 14px;
+    line-height: 20px;
   }
 
-  div[class="Select-value"] {
-    line-height: 40px !important;
+  .form-body {
+    flex: 1 1 100%;
   }
-}
 
-.service-provider-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
+  .form-footer {
+    margin: 0;
+  }
 }
diff --git a/src/shared/components/Settings/Tools/Software/List/Item/index.jsx b/src/shared/components/Settings/Tools/Software/List/Item/index.jsx
index c54f964de9..483ea9f0b7 100644
--- a/src/shared/components/Settings/Tools/Software/List/Item/index.jsx
+++ b/src/shared/components/Settings/Tools/Software/List/Item/index.jsx
@@ -5,6 +5,7 @@ import React from 'react';
 import PT from 'prop-types';
 import ReactSVG from 'react-svg';
 import { isomorphy } from 'topcoder-react-utils';
+import Tooltip from 'components/Tooltip';
 
 import './styles.scss';
 
@@ -21,6 +22,18 @@ export default function Item(props) {
     onEditItem,
   } = props;
 
+  const deleteTip = (
+    <div styleName="tctooltiptext">
+      <p>Delete</p>
+    </div>
+  );
+
+  const editTip = (
+    <div styleName="tctooltiptext">
+      <p>Edit</p>
+    </div>
+  );
+
   return (
     <div styleName="container">
       <div styleName="software-info">
@@ -37,30 +50,39 @@ export default function Item(props) {
         </div>
       </div>
       <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
-        >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          styleName="delete"
-          onKeyPress={() => onDeleteItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onDeleteItem(index)}
+        <Tooltip
+          id="edit-tip"
+          content={editTip}
+          trigger={['hover', 'focus']}
         >
-          <img src={assets('./trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
+          <a
+            styleName="edit"
+            onKeyPress={() => onEditItem(index)}
+            tabIndex={0}
+            role="button"
+            onClick={() => onEditItem(index)}
+          >
+            <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          </a>
+        </Tooltip>
+        <div styleName="delete-wrapper">
+          <Tooltip
+            id="delete-tip"
+            content={deleteTip}
+            trigger={['hover', 'focus']}
+          >
+            <a
+              styleName="delete"
+              onKeyPress={() => onDeleteItem(index)}
+              tabIndex={0}
+              role="button"
+              onClick={() => onDeleteItem(index)}
+            >
+              <img src={assets('./trash.svg')} alt="delete-icon" />
+            </a>
+
+          </Tooltip>
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/Settings/Tools/Software/List/Item/styles.scss b/src/shared/components/Settings/Tools/Software/List/Item/styles.scss
index 7c4c3f740c..001c63056f 100644
--- a/src/shared/components/Settings/Tools/Software/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Software/List/Item/styles.scss
@@ -4,29 +4,41 @@
   display: flex;
   flex-direction: row;
   justify-items: center;
-  align-items: center;
   justify-content: space-between;
-  height: 100%;
+  align-items: center;
+  min-height: 96px;
   width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
   border-bottom: none;
   background-color: $tc-white;
+  padding: $pad-lg;
+  border: 1px solid $color-black-20;
+  border-radius: 8px;
+
+  @media screen and (max-width: 374px) {
+    padding: $pad-sm;
+  }
 }
 
 .software-info {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 }
 
 .software-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+  background: $color-black-5;
+  border-radius: 4px;
+  margin-right: $margin-lg;
 
   svg {
-    padding-top: 1px;
+    display: block;
   }
 }
 
@@ -36,20 +48,89 @@
   display: flex;
   flex-direction: column;
   justify-items: center;
-  justify-content: left;
+  justify-content: center;
   font-size: 15px;
   line-height: 20px;
+  text-transform: capitalize;
+  padding-right: 20px;
+
+  &.single-line {
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .parameter-first-line {
-  font-weight: 500;
+  @include roboto-bold;
+
   color: $tc-black;
-  margin-bottom: 10px;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
+  word-break: break-all;
+
+  &.single-line {
+    margin-bottom: 0;
+  }
+
+  @include upto-sm {
+    margin-bottom: 0;
+  }
 }
 
-.parameter-second-line {
-  color: $tc-gray-50;
+.parameter-second-line,
+.parameter-third-line,
+.parameter-second-line-mobile {
+  @include roboto-medium;
+
+  color: $color-black-60;
   font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  word-break: break-all;
+}
+
+.parameter-second-line-mobile {
+  @include upto-sm {
+    display: flex;
+    flex-direction: column;
+
+    p {
+      word-break: break-all;
+    }
+  }
+}
+
+.tctooltiptext {
+  background: $tc-black;
+  color: $tc-white;
+  border-radius: 8px;
+  padding: 10px;
+
+  p {
+    @include roboto-medium;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.tctooltiptext::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  left: 50%;
+  border-top-color: $tc-black;
+  z-index: 1000;
 }
 
 .operation-container {
@@ -57,6 +138,21 @@
   flex-direction: row;
   justify-content: space-between;
 
+  .delete-wrapper {
+    margin-left: $margin-xl;
+    margin-right: $margin-xs;
+
+    @include xs-to-sm {
+      margin-left: $margin-lg;
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 320px) {
+      margin-right: 0;
+      margin-left: 6px;
+    }
+  }
+
   .delete {
     display: flex;
     flex-direction: column;
@@ -64,14 +160,10 @@
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
@@ -97,11 +189,8 @@
     outline-style: none;
 
     img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
diff --git a/src/shared/components/Settings/Tools/Software/List/index.jsx b/src/shared/components/Settings/Tools/Software/List/index.jsx
index 921010b1ce..31909f2d15 100644
--- a/src/shared/components/Settings/Tools/Software/List/index.jsx
+++ b/src/shared/components/Settings/Tools/Software/List/index.jsx
@@ -11,12 +11,11 @@ export default function SoftwareList(props) {
   const {
     softwareList,
     onDeleteItem,
-    disabled,
     onEditItem,
   } = props;
 
   return (
-    <div styleName={`container ${softwareList.items.length > 0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
+    <div styleName="container">
       <ul>
         {
           softwareList.items.map((software, index) => (
@@ -39,9 +38,7 @@ SoftwareList.propTypes = {
   softwareList: PT.shape().isRequired,
   onDeleteItem: PT.func.isRequired,
   onEditItem: PT.func.isRequired,
-  disabled: PT.bool,
 };
 
 SoftwareList.defaultProps = {
-  disabled: false,
 };
diff --git a/src/shared/components/Settings/Tools/Software/List/styles.scss b/src/shared/components/Settings/Tools/Software/List/styles.scss
index 1ac94a9d67..cd428a461a 100644
--- a/src/shared/components/Settings/Tools/Software/List/styles.scss
+++ b/src/shared/components/Settings/Tools/Software/List/styles.scss
@@ -1,9 +1,11 @@
 @import "../../../style";
+@import "~styles/mixins";
 
 .container {
   width: 100%;
   background-color: $tc-white;
-  padding: 0;
+  padding: 0 0;
+  margin: 0 0 $margin-xxxxl;
 
   &.active {
     margin-top: 20px;
@@ -19,17 +21,7 @@
     justify-items: center;
 
     li {
-      min-height: 90px;
+      margin-bottom: $margin-md;
     }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
-    }
-  }
-
-  &.disabled {
-    opacity: 0.7;
-    pointer-events: none;
-    user-select: none;
   }
 }
diff --git a/src/shared/components/Settings/Tools/Software/index.jsx b/src/shared/components/Settings/Tools/Software/index.jsx
index 0ef890848d..2b9bf67181 100644
--- a/src/shared/components/Settings/Tools/Software/index.jsx
+++ b/src/shared/components/Settings/Tools/Software/index.jsx
@@ -11,13 +11,17 @@ import PT from 'prop-types';
 import _ from 'lodash';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import ErrorMessage from 'components/Settings/ErrorMessage';
-import Select from 'components/Select';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
+import FormField from 'components/Settings/FormField';
+import FormInputText from 'components/Settings/FormInputText';
+import AddItemIcon from 'assets/images/settings-add-item.svg';
+import FormInputSelect from 'components/Settings/FormInputSelect';
+import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import { PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit';
 import ConfirmationModal from '../../ConfirmationModal';
 import dropdowns from './dropdowns.json';
 import SoftwareList from './List';
 
-import './styles.scss';
+import styles from './styles.scss';
 
 
 export default class Software extends ConsentComponent {
@@ -82,7 +86,7 @@ export default class Software extends ConsentComponent {
    * @param e event
    */
   onHandleAddSoftware(e) {
-    e.preventDefault();
+    if (e) e.preventDefault();
     const { newSoftware } = this.state;
     this.setState({ isSubmit: true });
     if (this.onCheckFormValue(newSoftware)) {
@@ -297,7 +301,7 @@ export default class Software extends ConsentComponent {
 
   render() {
     const {
-      softwareTrait, isMobileView, showConfirmation, indexNo, isEdit,
+      softwareTrait, showConfirmation, indexNo, isEdit,
       formInvalid, isSubmit,
     } = this.state;
     const softwareItems = softwareTrait.traits
@@ -305,201 +309,113 @@ export default class Software extends ConsentComponent {
     const { newSoftware } = this.state;
     const canModifyTrait = !this.props.traitRequestCount;
     return (
-      <div styleName="software-container">
+      <React.Fragment>
         {
           this.shouldRenderConsent() && this.renderConsent()
         }
         {showConfirmation
         && (
           <ConfirmationModal
-            onConfirm={() => this.showConsent(this.onDeleteSoftware.bind(this, indexNo))}
+            onConfirm={() => this.showConsent(this.onDeleteServiceProvider.bind(this, indexNo))}
             onCancel={() => this.setState({ showConfirmation: false, indexNo: null })}
-            name={softwareTrait.traits.data[indexNo].name}
+            name={serviceProviderTrait.traits.data[indexNo].name}
           />
         )}
-        <h1>
-          Software
-        </h1>
-        <div styleName={`sub-title ${softwareItems.length > 0 ? '' : 'hidden'}`}>
-          Your software
-        </div>
-        {
-          !isMobileView
-          && (
-            <SoftwareList
-              softwareList={{ items: softwareItems }}
-              onDeleteItem={this.onHandleDeleteSoftware}
-              disabled={!canModifyTrait}
-              onEditItem={this.onEditSoftware}
-            />
-          )
-        }
-        <div styleName={`sub-title ${softwareItems.length > 0 ? 'second' : 'first'}`}>
-          {
-            isEdit ? (<React.Fragment>Edit software</React.Fragment>)
-              : (<React.Fragment>Add a new software</React.Fragment>)
-          }
-        </div>
-        <div styleName="form-container-default">
-          <form name="device-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="softwareType">
-                  Type
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <span styleName="text-required">* Required</span>
-                <Select
-                  name="softwareType"
-                  options={dropdowns.type}
-                  onChange={this.onUpdateSelect}
-                  value={newSoftware.softwareType}
-                  placeholder="Software Type"
-                  labelKey="name"
-                  valueKey="name"
-                  clearable={false}
+        <div styleName="form-container">
+          <Collapse>
+            <h2 styleName="form-title">
+              Software
+            </h2>
+            {
+              softwareItems.length > 0
+              && (
+                <SoftwareList
+                  softwareList={{ items: softwareItems }}
+                  onDeleteItem={this.onHandleDeleteSoftware}
                   disabled={!canModifyTrait}
+                  onEditItem={this.onEditSoftware}
                 />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newSoftware.softwareType) && formInvalid} addMargin message="Type cannot be empty" />
-                  )
-                }
-              </div>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="name">
-                  Name
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <span styleName="text-required">* Required</span>
-                <input disabled={!canModifyTrait} id="name" name="name" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newSoftware.name} maxLength="64" required />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newSoftware.name.trim()) && formInvalid} message="Name cannot be empty" />
-                  )
-                }
-              </div>
-            </div>
-          </form>
-          <div styleName="button-container">
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddSoftware}
-              >
-                {
-                  isEdit ? (<React.Fragment>Edit software to your list</React.Fragment>)
-                    : (<React.Fragment>Add software to your list</React.Fragment>)
-                }
-              </PrimaryButton>
-            </div>
-            {
-              isEdit && (
-                <div styleName="button-cancel">
-                  <PrimaryButton
-                    styleName="complete"
-                    onClick={this.onCancelEditStatus}
-                  >
-                    Cancel
-                  </PrimaryButton>
-                </div>
               )
             }
-          </div>
-        </div>
-        <div styleName="form-container-mobile">
-          <form name="software-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <p>
-                {
-                  isEdit ? (<React.Fragment>Edit Software</React.Fragment>)
-                    : (<React.Fragment>Add Software</React.Fragment>)
-                }
-              </p>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="softwareType">
-                  Type
-                  <span styleName="text-required">* Required</span>
-                  <input type="hidden" />
-                </label>
-                <Select
-                  name="softwareType"
-                  options={dropdowns.type}
-                  onChange={this.onUpdateSelect}
-                  value={newSoftware.softwareType}
-                  placeholder="Software Type"
-                  labelKey="name"
-                  valueKey="name"
-                  clearable={false}
-                  disabled={!canModifyTrait}
-                />
+            <div styleName="form-content">
+              <div styleName="form-label">
                 {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newSoftware.softwareType) && formInvalid} addMargin message="Type cannot be empty" />
-                  )
+                  isEdit ? (<React.Fragment>Edit software</React.Fragment>)
+                    : (<React.Fragment>Add a new software</React.Fragment>)
                 }
               </div>
-              <div styleName="field col-2">
-                <label htmlFor="name">
-                  Name
-                  <span styleName="text-required">* Required</span>
-                  <input type="hidden" />
-                </label>
-                <input disabled={!canModifyTrait} id="name" name="name" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newSoftware.name} maxLength="64" required />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={_.isEmpty(newSoftware.name) && formInvalid} message="Name cannot be empty" />
-                  )
-                }
+              <div styleName="form-body">
+                <form styleName="software-form" noValidate autoComplete="off">
+                  <FormField label="Software Type *" style={{ flex: '0 0 100%' }}>
+                    <FormInputSelect
+                      name="softwareType"
+                      options={dropdowns.type}
+                      onChange={this.onUpdateSelect}
+                      value={newSoftware.softwareType}
+                      placeholder="Select"
+                      labelKey="name"
+                      valueKey="name"
+                      clearable={false}
+                      disabled={!canModifyTrait}
+                    />
+                    {
+                      isSubmit && (
+                        <ErrorMessage invalid={_.isEmpty(newSoftware.softwareType) && formInvalid} addMargin message="Type cannot be empty" />
+                      )
+                    }
+                  </FormField>
+
+                  <FormField label="Software Name *" style={{ flex: '0 0 100%' }}>
+                    <FormInputText
+                      disabled={!canModifyTrait}
+                      id="name"
+                      name="name"
+                      type="text"
+                      placeholder="Type here the Software Name"
+                      onChange={this.onUpdateInput}
+                      value={newSoftware.name}
+                      maxLength="64"
+                      required
+                    />
+                    {
+                      isSubmit && (
+                        <ErrorMessage invalid={_.isEmpty(newSoftware.name.trim()) && formInvalid} message="Name cannot be empty" />
+                      )
+                    }
+                  </FormField>
+                </form>
               </div>
-            </div>
-          </form>
-          <div styleName="button-container">
-            <div styleName="button-save">
-              <PrimaryButton
-                styleName="complete"
-                onClick={this.onHandleAddSoftware}
-              >
-                {
-                  isEdit ? (<React.Fragment>Edit Software</React.Fragment>)
-                    : (<React.Fragment>Add Software</React.Fragment>)
-                }
-              </PrimaryButton>
-            </div>
-            {
-              isEdit && (
-                <div styleName="button-cancel">
+              <div styleName="form-footer">
+                {!isEdit && (
+                <PrimaryButton
+                  theme={{ button: styles.button }}
+                  onClick={this.onHandleAddSoftware}
+                >
+                  <AddItemIcon styleName="icon" /> Add Software to Your List
+                </PrimaryButton>
+                )}
+
+                { isEdit && (
+                <React.Fragment>
                   <PrimaryButton
-                    styleName="complete"
+                    theme={{ button: styles.button }}
+                    onClick={this.onHandleAddSoftware}
+                  >
+                    Edit Software to Your List
+                  </PrimaryButton>
+                  <SecondaryButton
+                    theme={{ button: styles.button }}
                     onClick={this.onCancelEditStatus}
                   >
                     Cancel
-                  </PrimaryButton>
-                </div>
-              )
-            }
-          </div>
+                  </SecondaryButton>
+                </React.Fragment>
+                )}
+              </div>
+            </div>
+          </Collapse>
         </div>
-        {
-          isMobileView
-          && (
-            <SoftwareList
-              softwareList={{ items: softwareItems }}
-              onDeleteItem={this.onHandleDeleteSoftware}
-              disabled={!canModifyTrait}
-              onEditItem={this.onEditSoftware}
-            />
-          )
-        }
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/shared/components/Settings/Tools/Software/styles.scss b/src/shared/components/Settings/Tools/Software/styles.scss
index 583be0087e..0102857ec3 100644
--- a/src/shared/components/Settings/Tools/Software/styles.scss
+++ b/src/shared/components/Settings/Tools/Software/styles.scss
@@ -1,278 +1,110 @@
-@import "../../style";
+@import "~styles/mixins";
 
-.software-container {
-  display: flex;
-  flex-direction: column;
-
-  @include upto-sm {
-    padding-bottom: 0;
-  }
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
+.form-container {
+  padding: $pad-xxxxl;
+  background-color: $color-tc-white;
+  border-radius: 4px;
+  margin: $margin-sm 0 0;
 
-    &.second {
-      margin-top: 50px;
-      margin-bottom: 30px;
-    }
-
-    &.first {
-      margin-bottom: 30px;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    @include upto-sm {
-      display: none;
-    }
+  .software-form {
+    display: flex;
+    flex-wrap: wrap;
   }
 }
 
-.form-container-default {
-  @include form-container-default;
-
-  input {
-    @include roboto-regular;
+.form-title {
+  @include barlow-semi-bold;
 
-    height: 40px;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-    margin-bottom: 0;
-  }
-
-  .text-required {
-    @include roboto-medium;
-
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-bottom: 5px;
-    text-align: right;
-  }
+  font-size: 20px;
+  line-height: 22px;
+  color: inherit;
+  text-transform: uppercase;
+  padding-bottom: $pad-xxxxl;
 }
 
-.form-container-mobile {
-  display: none;
-
-  @include upto-sm {
-    border: 0;
-    border-radius: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    background-color: $tc-gray-neutral-light;
-    border-bottom: 1px solid $tc-gray-10;
-  }
-
-  p {
-    @include roboto-regular;
-
-    font-size: 20px;
-    line-height: 30px;
-    font-weight: 400;
-    color: $tc-black;
-
-    @include upto-sm {
-      margin-bottom: 20px;
-    }
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    align-content: space-between;
-
-    @include upto-sm {
-      width: 100%;
-      display: block;
-      margin-bottom: 0;
-    }
-
-    .field {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      margin-right: 10px;
-
-      @include upto-sm {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-      }
-
-      label {
-        @include roboto-medium;
-
-        font-size: 12px;
-        line-height: 15px;
-        font-weight: 500;
-        color: $tc-gray-80;
-        margin-bottom: 5px;
-        display: flex;
-        justify-content: space-between;
-
-        .text-required {
-          color: $tc-red-110;
-        }
-      }
-
-      &.col-1 {
-        width: 45%;
-
-        @include from-sm-to-lg {
-          width: 42%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-
-        > div {
-          @include upto-sm {
-            margin-top: 5px;
-          }
-        }
-      }
-
-      &.col-2 {
-        width: 55%;
-
-        @include from-sm-to-lg {
-          width: 58%;
-        }
-
-        @include upto-sm {
-          width: 100%;
-        }
-      }
-    }
+.form-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
 
-    div.field:last-child {
-      margin-right: 0;
-    }
-  }
+.form-label {
+  flex: 0 0 calc(50% - 13px);
+  padding-right: 230px;
 
-  input {
-    @include roboto-regular;
+  @include roboto-regular;
 
-    height: 36px;
-    margin: 0;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
+  font-size: 16px;
+  line-height: 26px;
+  color: inherit;
+}
 
-    @include upto-sm {
-      margin-top: 5px;
-    }
-  }
+.form-body {
+  flex: 0 0 calc(50% + 13px);
 }
 
-.button-container {
+.form-footer {
   display: flex;
-  justify-content: center;
   align-items: center;
-
-  .button-save,
-  .button-cancel {
-    align-self: center;
-
-    @include upto-sm {
-      margin-top: 10px;
-    }
-
-    button,
-    a {
-      @include roboto-medium;
-
-      height: 40px;
-      font-size: 15px;
-      font-weight: 500;
-      line-height: 40px;
-      margin: 0;
-      padding: 0;
-      width: 214px;
-
-      @include upto-sm {
-        width: 156px;
-      }
+  justify-content: flex-start;
+  margin-left: calc(50% - 13px);
+  padding: $pad-sm 0;
+  gap: 8px 16px;
+
+  .button {
+    @include roboto-bold;
+
+    font-size: 14px;
+    line-height: 22px;
+    color: $color-turq-160;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent !important;
+    border: none;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none !important;
+      color: lighten($color-turq-160, 5%);
+      background: transparent !important;
+      box-shadow: none !important;
     }
 
-    .complete {
-      color: $tc-white;
+    .icon {
+      margin-right: $margin-xs;
     }
   }
-
-  .button-cancel {
-    margin-left: 10px;
-  }
 }
 
-/*
- * React Select component styling
- */
-.software-container .form-container .row .field :global .Select,
-.software-container .form-container .row .field :global .Select-value span,
-.software-container .form-container .row .field :global .Select-menu-outer,
-.software-container .form-container .row .field :global .Select-placeholder,
-.software-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    margin-top: 5px;
+@include xs-to-md {
+  .form-container {
+    padding: $pad-xxl $pad-lg;
   }
-}
 
-.software-container div[class="Select-control"] {
-  height: 40px;
+  .form-title {
+    @include barlow-condensed-medium;
 
-  div[class="Select-input"] {
-    height: 38px;
+    font-size: 22px;
+    line-height: 24px;
+    padding-bottom: $pad-xxl;
   }
 
-  div[class="Select-placeholder"] {
-    height: 38px;
-    line-height: 40px !important;
-
-    @include upto-sm {
-      line-height: 38px !important;
-    }
+  .form-label {
+    flex: 1 1 100%;
+    padding: 0;
+    margin-bottom: $margin-xxl;
+    font-size: 14px;
+    line-height: 20px;
   }
 
-  div[class="Select-value"] {
-    line-height: 40px !important;
+  .form-body {
+    flex: 1 1 100%;
   }
-}
 
-.software-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
+  .form-footer {
+    margin: 0;
+  }
 }
diff --git a/src/shared/components/Settings/Tools/Subscriptions/List/Item/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/List/Item/index.jsx
index 608d325da6..e3a796e7cd 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/List/Item/index.jsx
+++ b/src/shared/components/Settings/Tools/Subscriptions/List/Item/index.jsx
@@ -5,6 +5,7 @@ import React from 'react';
 import PT from 'prop-types';
 import ReactSVG from 'react-svg';
 import { isomorphy } from 'topcoder-react-utils';
+import Tooltip from 'components/Tooltip';
 
 import './styles.scss';
 
@@ -21,6 +22,18 @@ export default function Item(props) {
     onEditItem,
   } = props;
 
+  const deleteTip = (
+    <div styleName="tctooltiptext">
+      <p>Delete</p>
+    </div>
+  );
+
+  const editTip = (
+    <div styleName="tctooltiptext">
+      <p>Edit</p>
+    </div>
+  );
+
   return (
     <div styleName="container">
       <div styleName="subscription-info">
@@ -34,30 +47,38 @@ export default function Item(props) {
         </div>
       </div>
       <div styleName="operation-container">
-        <a
-          styleName="edit"
-          onKeyPress={() => onEditItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onEditItem(index)}
+        <Tooltip
+          id="edit-tip"
+          content={editTip}
+          trigger={['hover', 'focus']}
         >
-          <img src={assets('./ico-edit.svg')} alt="edit-icon" />
-          <p>
-            Edit
-          </p>
-        </a>
-        <a
-          styleName="delete"
-          onKeyPress={() => onDeleteItem(index)}
-          tabIndex={0}
-          role="button"
-          onClick={() => onDeleteItem(index)}
-        >
-          <img src={assets('./trash.svg')} alt="delete-icon" />
-          <p>
-            Delete
-          </p>
-        </a>
+          <a
+            styleName="edit"
+            onKeyPress={() => onEditItem(index)}
+            tabIndex={0}
+            role="button"
+            onClick={() => onEditItem(index)}
+          >
+            <img src={assets('./ico-edit.svg')} alt="edit-icon" />
+          </a>
+        </Tooltip>
+        <div styleName="delete-wrapper">
+          <Tooltip
+            id="delete-tip"
+            content={deleteTip}
+            trigger={['hover', 'focus']}
+          >
+            <a
+              styleName="delete"
+              onKeyPress={() => onDeleteItem(index)}
+              tabIndex={0}
+              role="button"
+              onClick={() => onDeleteItem(index)}
+            >
+              <img src={assets('./trash.svg')} alt="delete-icon" />
+            </a>
+          </Tooltip>
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss
index 58d84f0fbd..a8ac6262b9 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss
@@ -4,27 +4,42 @@
   display: flex;
   flex-direction: row;
   justify-items: center;
-  align-items: center;
   justify-content: space-between;
-  height: 100%;
+  align-items: center;
+  min-height: 96px;
   width: 100%;
-  padding: 20px;
-  border: 1px solid $tc-gray-10;
   border-bottom: none;
   background-color: $tc-white;
+  padding: $pad-lg;
+  border: 1px solid $color-black-20;
+  border-radius: 8px;
+
+  @media screen and (max-width: 374px) {
+    padding: $pad-sm;
+  }
 }
 
 .subscription-info {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
-  flex: 1;
 }
 
 .subscription-icon {
-  height: 49px;
-  width: 49px;
-  margin-right: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+  background: $color-black-5;
+  border-radius: 4px;
+  margin-right: $margin-lg;
+
+  svg {
+    display: block;
+  }
 }
 
 .subscription-parameters {
@@ -32,19 +47,96 @@
 
   display: flex;
   flex-direction: column;
+  justify-items: center;
   justify-content: center;
   font-size: 15px;
   line-height: 20px;
-  flex: 1;
+  text-transform: capitalize;
   padding-right: 20px;
+
+  &.single-line {
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .parameter-first-line {
-  font-weight: 500;
+  @include roboto-bold;
+
   color: $tc-black;
-  display: inline-block;
-  word-break: break-word;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
+  word-break: break-all;
+
+  &.single-line {
+    margin-bottom: 0;
+  }
+
+  @include upto-sm {
+    margin-bottom: 0;
+  }
+}
+
+.parameter-second-line,
+.parameter-third-line,
+.parameter-second-line-mobile {
+  @include roboto-medium;
+
+  color: $color-black-60;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
   word-break: break-all;
+
+  @include upto-sm {
+    display: none;
+  }
+}
+
+.parameter-second-line-mobile {
+  display: none;
+
+  @include upto-sm {
+    display: flex;
+    flex-direction: column;
+
+    p {
+      word-break: break-all;
+    }
+  }
+}
+
+.tctooltiptext {
+  background: $tc-black;
+  color: $tc-white;
+  border-radius: 8px;
+  padding: 10px;
+
+  p {
+    @include roboto-medium;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.tctooltiptext::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  left: 50%;
+  border-top-color: $tc-black;
+  z-index: 1000;
 }
 
 .operation-container {
@@ -52,22 +144,32 @@
   flex-direction: row;
   justify-content: space-between;
 
+  .delete-wrapper {
+    margin-left: $margin-xl;
+    margin-right: $margin-xs;
+
+    @include xs-to-sm {
+      margin-left: $margin-lg;
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 320px) {
+      margin-right: 0;
+      margin-left: 6px;
+    }
+  }
+
   .delete {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-items: center;
     justify-content: center;
     cursor: pointer;
     outline-style: none;
-    margin-left: 10px;
 
     img {
-      margin-bottom: 10px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
@@ -93,13 +195,8 @@
     outline-style: none;
 
     img {
-      margin-bottom: 10px;
-      width: 15px;
-      height: 15px;
-
-      @include upto-sm {
-        margin-bottom: 0;
-      }
+      width: 20px;
+      height: 20px;
     }
 
     p {
diff --git a/src/shared/components/Settings/Tools/Subscriptions/List/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/List/index.jsx
index 2a9fd47cf1..c782774d96 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/List/index.jsx
+++ b/src/shared/components/Settings/Tools/Subscriptions/List/index.jsx
@@ -11,12 +11,11 @@ export default function SubscriptionList(props) {
   const {
     subscriptionList,
     onDeleteItem,
-    disabled,
     onEditItem,
   } = props;
 
   return (
-    <div styleName={`container ${subscriptionList.items.length > 0 ? 'active' : ''} ${disabled ? 'disabled' : ''}`}>
+    <div styleName="container">
       <ul>
         {
           subscriptionList.items.map((subscription, index) => (
@@ -39,9 +38,7 @@ SubscriptionList.propTypes = {
   subscriptionList: PT.shape().isRequired,
   onDeleteItem: PT.func.isRequired,
   onEditItem: PT.func.isRequired,
-  disabled: PT.bool,
 };
 
 SubscriptionList.defaultProps = {
-  disabled: false,
 };
diff --git a/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss
index 1ac94a9d67..979df1bf53 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss
+++ b/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss
@@ -4,6 +4,7 @@
   width: 100%;
   background-color: $tc-white;
   padding: 0;
+  margin: 0 0 $margin-xxxxl;
 
   &.active {
     margin-top: 20px;
@@ -19,11 +20,7 @@
     justify-items: center;
 
     li {
-      min-height: 90px;
-    }
-
-    li:last-child {
-      border-bottom: 1px solid $tc-gray-10;
+      margin-bottom: $margin-md;
     }
   }
 
diff --git a/src/shared/components/Settings/Tools/Subscriptions/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
index f9d349491e..60598e2b50 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/index.jsx
+++ b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
@@ -11,7 +11,11 @@ import PT from 'prop-types';
 import _ from 'lodash';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import ErrorMessage from 'components/Settings/ErrorMessage';
-import { PrimaryButton } from 'topcoder-react-ui-kit';
+import FormField from 'components/Settings/FormField';
+import FormInputText from 'components/Settings/FormInputText';
+import AddItemIcon from 'assets/images/settings-add-item.svg';
+import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import { PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit';
 import ConfirmationModal from '../../ConfirmationModal';
 import SubscriptionList from './List';
 
@@ -77,7 +81,7 @@ export default class Subscription extends ConsentComponent {
    * @param e event
    */
   onHandleAddSubscription(e) {
-    e.preventDefault();
+    if (e) e.preventDefault();
     const { newSubscription } = this.state;
     this.setState({ isSubmit: true });
     if (this.onCheckFormValue(newSubscription)) {
@@ -275,7 +279,7 @@ export default class Subscription extends ConsentComponent {
 
   render() {
     const {
-      subscriptionTrait, isMobileView, showConfirmation, indexNo, isEdit, isSubmit,
+      subscriptionTrait, showConfirmation, indexNo, isEdit, isSubmit,
     } = this.state;
     const subscriptionItems = subscriptionTrait.traits
       ? subscriptionTrait.traits.data.slice() : [];
@@ -283,173 +287,94 @@ export default class Subscription extends ConsentComponent {
     const canModifyTrait = !this.props.traitRequestCount;
 
     return (
-      <div styleName="subscription-container">
+      <React.Fragment>
         {
-          this.shouldRenderConsent() && this.renderConsent()
-        }
+        this.shouldRenderConsent() && this.renderConsent()
+      }
         {showConfirmation
-        && (
-          <ConfirmationModal
-            onConfirm={() => this.showConsent(this.onDeleteSubscription.bind(this, indexNo))}
-            onCancel={() => this.setState({ showConfirmation: false, indexNo: null })}
-            name={subscriptionTrait.traits.data[indexNo].name}
-          />
-        )}
-        <h1>
-          Subscriptions
-        </h1>
-        <div styleName={`sub-title ${subscriptionItems.length > 0 ? '' : 'hidden'}`}>
-          Your subscriptions
-        </div>
-        {
-          !isMobileView
-          && (
-            <SubscriptionList
-              subscriptionList={{ items: subscriptionItems }}
-              onDeleteItem={this.onHandleDeleteSubscription}
-              disabled={!canModifyTrait}
-              onEditItem={this.onEditSubscription}
-            />
-          )
-        }
-        <div styleName={`sub-title ${subscriptionItems.length > 0 ? 'second' : 'first'}`}>
-          {
-            isEdit ? (<React.Fragment>Edit subscription</React.Fragment>)
-              : (<React.Fragment>Add a new subscription</React.Fragment>)
+      && (
+        <ConfirmationModal
+          onConfirm={() => this.showConsent(this.onDeleteSubscription.bind(this, indexNo))}
+          onCancel={() => this.setState({ showConfirmation: false, indexNo: null })}
+          name={subscriptionTrait.traits.data[indexNo].name}
+        />
+      )}
+        <div styleName="form-container">
+          <Collapse>
+            <h2 styleName="form-title">
+              Subscriptions
+            </h2>
+            {
+            subscriptionItems.length > 0
+            && (
+              <SubscriptionList
+                subscriptionList={{ items: subscriptionItems }}
+                onDeleteItem={this.onHandleDeleteSubscription}
+                disabled={!canModifyTrait}
+                onEditItem={this.onEditSubscription}
+              />
+            )
           }
-        </div>
-        <div styleName="form-container-default">
-          <form name="device-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="name">
-                  Name
-                  <input type="hidden" />
-                </label>
-              </div>
-              <div styleName="field col-2">
-                <span styleName="text-required">* Required</span>
-                <input
-                  disabled={!canModifyTrait}
-                  id="name"
-                  name="name"
-                  type="text"
-                  placeholder="Name"
-                  onChange={this.onUpdateInput}
-                  value={newSubscription.name}
-                  maxLength="128"
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                  required
-                />
+            <div styleName="form-content">
+              <div styleName="form-label">
                 {
-                  isSubmit && (
-                    <ErrorMessage invalid={formInvalid} message="Name cannot be empty" />
-                  )
+                  isEdit ? (<React.Fragment>Edit subscription</React.Fragment>)
+                    : (<React.Fragment>Add a new subscription</React.Fragment>)
                 }
               </div>
-            </div>
-          </form>
-          <div styleName="button-container">
-            <div styleName="button-save">
-              <PrimaryButton
-                theme={{ button: styles.complete }}
-                onClick={this.onHandleAddSubscription}
-              >
-                {
-                  isEdit ? (<React.Fragment>Edit subscription to your list</React.Fragment>)
-                    : (<React.Fragment>Add subscription to your list</React.Fragment>)
-                }
-              </PrimaryButton>
-            </div>
-            {
-              isEdit && (
-                <div styleName="button-cancel">
+              <div styleName="form-body">
+                <form styleName="subscription-form" noValidate autoComplete="off">
+                  <FormField label="Subscription Name" style={{ flex: '0 0 100%' }}>
+                    <FormInputText
+                      disabled={!canModifyTrait}
+                      id="name"
+                      name="name"
+                      type="text"
+                      placeholder="Type here the Subscription Name"
+                      onChange={this.onUpdateInput}
+                      value={newSubscription.name}
+                      maxLength="64"
+                      required
+                    />
+                    {
+                      isSubmit && (
+                        <ErrorMessage invalid={formInvalid} message="Name cannot be empty" />
+                      )
+                    }
+                  </FormField>
+                </form>
+              </div>
+              <div styleName="form-footer">
+                {!isEdit && (
+                <PrimaryButton
+                  theme={{ button: styles.button }}
+                  onClick={this.onHandleAddSubscription}
+                >
+                  <AddItemIcon styleName="icon" /> Add Subscription to Your List
+                </PrimaryButton>
+                )}
+
+                { isEdit && (
+                <React.Fragment>
                   <PrimaryButton
-                    styleName="complete"
-                    onClick={this.onCancelEditStatus}
+                    theme={{ button: styles.button }}
+                    onClick={this.onHandleAddSubscription}
                   >
-                    Cancel
+                    Edit Subscription to Your List
                   </PrimaryButton>
-                </div>
-              )
-            }
-          </div>
-        </div>
-        <div styleName="form-container-mobile">
-          <form name="subscription-form" noValidate autoComplete="off">
-            <div styleName="row">
-              <p>
-                {
-                  isEdit ? (<React.Fragment>Edit Subscription</React.Fragment>)
-                    : (<React.Fragment>Add Subscription</React.Fragment>)
-                }
-              </p>
-            </div>
-            <div styleName="row">
-              <div styleName="field col-1">
-                <label htmlFor="name">
-                  Name
-                  <span styleName="text-required">* Required</span>
-                  <input type="hidden" />
-                </label>
-                <input
-                  disabled={!canModifyTrait}
-                  id="name"
-                  name="name"
-                  type="text"
-                  placeholder="Name"
-                  onChange={this.onUpdateInput}
-                  value={newSubscription.name}
-                  maxLength="128"
-                  onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
-                  required
-                />
-                {
-                  isSubmit && (
-                    <ErrorMessage invalid={formInvalid} message="Name cannot be empty" />
-                  )
-                }
-              </div>
-            </div>
-          </form>
-          <div styleName="button-container">
-            <div styleName="button-save">
-              <PrimaryButton
-                theme={{ button: styles.complete }}
-                onClick={this.onHandleAddSubscription}
-              >
-                {
-                  isEdit ? (<React.Fragment>Edit Subscription</React.Fragment>)
-                    : (<React.Fragment>Add Subscription</React.Fragment>)
-                }
-              </PrimaryButton>
-            </div>
-            {
-              isEdit && (
-                <div styleName="button-cancel">
-                  <PrimaryButton
-                    styleName="complete"
+                  <SecondaryButton
+                    theme={{ button: styles.button }}
                     onClick={this.onCancelEditStatus}
                   >
                     Cancel
-                  </PrimaryButton>
-                </div>
-              )
-            }
-          </div>
+                  </SecondaryButton>
+                </React.Fragment>
+                )}
+              </div>
+            </div>
+          </Collapse>
         </div>
-        {
-          isMobileView
-          && (
-            <SubscriptionList
-              subscriptionList={{ items: subscriptionItems }}
-              onDeleteItem={this.onHandleDeleteSubscription}
-              disabled={!canModifyTrait}
-              onEditItem={this.onEditSubscription}
-            />
-          )
-        }
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/shared/components/Settings/Tools/Subscriptions/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/styles.scss
index 3e2d722693..3bf3bf2f12 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/styles.scss
+++ b/src/shared/components/Settings/Tools/Subscriptions/styles.scss
@@ -1,226 +1,111 @@
-@import "../../style";
+@import "~styles/mixins";
 
-.subscription-container {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-
-  h1 {
-    @include roboto-regular;
-
-    font-size: 28px;
-    line-height: 35px;
-    font-weight: 400;
-    color: $tc-black;
-    margin-bottom: 20px;
-
-    @include upto-sm {
-      display: none;
-    }
-  }
-
-  .sub-title {
-    @include roboto-light;
-
-    color: #888894;
-    line-height: 35px;
-    font-weight: 300;
-    font-size: 28px;
-    margin-bottom: 10px;
-
-    &.second {
-      margin-top: 50px;
-      margin-bottom: 30px;
-    }
-
-    &.first {
-      margin-bottom: 30px;
-    }
-
-    &.hidden {
-      display: none;
-    }
+.form-container {
+  padding: $pad-xxxxl;
+  background-color: $color-tc-white;
+  border-radius: 4px;
+  margin: $margin-sm 0 0;
 
-    @include upto-sm {
-      display: none;
-    }
+  .subscription-form {
+    display: flex;
+    flex-wrap: wrap;
   }
 }
 
-.form-container-default {
-  @include form-container-default;
-
-  input {
-    @include roboto-regular;
-
-    height: 40px;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
-    margin-bottom: 0;
-  }
-
-  .text-required {
-    @include roboto-medium;
+.form-title {
+  @include barlow-semi-bold;
 
-    font-size: 10px;
-    color: $tc-red-110;
-    margin-bottom: 5px;
-    text-align: right;
-  }
+  font-size: 20px;
+  line-height: 22px;
+  color: inherit;
+  text-transform: uppercase;
+  padding-bottom: $pad-xxxxl;
 }
 
-.form-container-mobile {
-  display: none;
-
-  @include upto-sm {
-    border: 0;
-    border-radius: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    background-color: $tc-gray-neutral-light;
-    width: 100%;
-  }
-
-  p {
-    @include roboto-regular;
-
-    font-size: 20px;
-    line-height: 30px;
-    font-weight: 400;
-    color: $tc-black;
-
-    @include upto-sm {
-      margin-bottom: 20px;
-    }
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    align-content: space-between;
-
-    @include upto-sm {
-      width: 100%;
-      display: block;
-      margin-bottom: 0;
-    }
-
-    .field {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      margin-right: 10px;
-
-      @include upto-sm {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 10px;
-      }
-
-      label {
-        @include roboto-medium;
-
-        font-size: 12px;
-        line-height: 15px;
-        font-weight: 500;
-        color: $tc-gray-80;
-        margin-bottom: 5px;
-        display: flex;
-        justify-content: space-between;
-
-        .text-required {
-          color: $tc-red-110;
-        }
-      }
-
-      &.col-1 {
-        width: 100%;
-      }
-
-      &.col-2 {
-        width: auto;
-      }
-    }
+.form-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
 
-    div.field:last-child {
-      margin-right: 0;
-    }
-  }
+.form-label {
+  flex: 0 0 calc(50% - 13px);
+  padding-right: 230px;
 
-  input {
-    @include roboto-regular;
+  @include roboto-regular;
 
-    margin: 0;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    color: $tc-black;
-    border: 1px solid $tc-gray-20;
-    border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
+  font-size: 16px;
+  line-height: 26px;
+  color: inherit;
+}
 
-    @include upto-sm {
-      margin-top: 5px;
-    }
-  }
+.form-body {
+  flex: 0 0 calc(50% + 13px);
 }
 
-.button-container {
+.form-footer {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: flex-start;
+  margin-left: calc(50% - 13px);
+  padding: $pad-sm 0;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+
+  .button {
+    @include roboto-bold;
+
+    font-size: 14px;
+    line-height: 22px;
+    color: $color-turq-160;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent !important;
+    border: none;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none !important;
+      color: lighten($color-turq-160, 5%);
+      background: transparent !important;
+      box-shadow: none !important;
+    }
 
-  .button-save,
-  .button-cancel {
-    align-self: center;
-
-    @include upto-sm {
-      margin-top: 10px;
+    .icon {
+      margin-right: $margin-xs;
     }
+  }
+}
 
-    .complete {
-      height: 40px;
-      font-size: 15px;
-      font-weight: 500;
-      line-height: 40px;
-      margin: 0;
-      padding: 0 0;
-      width: 240px;
+@include xs-to-md {
+  .form-container {
+    padding: $pad-xxl $pad-lg;
+  }
 
-      @include upto-sm {
-        width: 156px;
-      }
+  .form-title {
+    @include barlow-condensed-medium;
 
-      @include roboto-medium;
-    }
+    font-size: 22px;
+    line-height: 24px;
+    padding-bottom: $pad-xxl;
   }
 
-  .button-cancel {
-    margin-left: 10px;
+  .form-label {
+    flex: 1 1 100%;
+    padding: 0;
+    margin-bottom: $margin-xxl;
+    font-size: 14px;
+    line-height: 20px;
   }
-}
 
-/*
- * React Select component styling
- */
-.subscription-container .form-container .row .field :global .Select,
-.subscription-container .form-container .row .field :global .Select-value span,
-.subscription-container .form-container .row .field :global .Select-menu-outer,
-.subscription-container .form-container .row .field :global .Select-placeholder,
-.subscription-container .form-container .row .field :global .Select-input input {
-  color: $tc-gray-80;
-  font-size: 15px;
-
-  @include upto-sm {
-    margin-top: 5px;
+  .form-body {
+    flex: 1 1 100%;
   }
-}
 
-.subscription-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
+  .form-footer {
+    margin: 0;
+  }
 }
diff --git a/src/shared/components/Settings/Tools/index.jsx b/src/shared/components/Settings/Tools/index.jsx
index 8442954f93..6759da7598 100644
--- a/src/shared/components/Settings/Tools/index.jsx
+++ b/src/shared/components/Settings/Tools/index.jsx
@@ -1,146 +1,139 @@
-/**
- * Child component of Settings/Tools renders setting page for tools.
- */
-/* eslint-disable no-undef */
+/* eslint-disable prefer-destructuring */
 import React from 'react';
 import PT from 'prop-types';
-import _ from 'lodash';
-
-import Accordion from 'components/Settings/Accordion';
-import SideBar from 'components/Settings/SideBar';
-import DevicesIcon from 'assets/images/tools/sideicons/devices.svg';
-import ServiceProvidersIcon from 'assets/images/tools/sideicons/serviceproviders.svg';
-import SoftwareIcon from 'assets/images/tools/sideicons/software.svg';
-import SubscriptionsIcon from 'assets/images/tools/sideicons/subscriptions.svg';
-import Devices from 'components/Settings/Tools/Devices';
-import ComingSoon from 'components/Settings/ComingSoon';
-import Software from 'components/Settings/Tools/Software';
-import ServiceProviders from 'components/Settings/Tools/ServiceProviders';
-import Subscriptions from 'components/Settings/Tools/Subscriptions';
-import ErrorWrapper from 'components/Settings/ErrorWrapper';
-import { SCREEN_SIZE } from '../constants';
-
-import './styles.scss';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
+import Devices from './Devices';
+import Software from './Software';
+import ServiceProviders from './ServiceProviders';
+import Subscriptions from './Subscriptions';
+import ErrorWrapper from '../ErrorWrapper';
+
+import styles from './styles.scss';
 
 export default class Tools extends React.Component {
   constructor(props) {
     super(props);
-    const hash = decodeURIComponent(_.get(props, 'location.hash', '').substring(1));
-    this.tablink = hash.replace('-', ' ');
-    const { toggleToolsSideTab } = this.props;
-    if (this.tablink) {
-      toggleToolsSideTab(this.tablink);
-    }
-    this.state = {
-      isMobileView: false,
-    };
-    this.clearNotifiation = this.clearNotifiation.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
+    this.save = this.save.bind(this);
+    this.deviceRef = React.createRef();
+    this.softwareRef = React.createRef();
+    this.serviceProviderRef = React.createRef();
+    this.subscriptionRef = React.createRef();
   }
 
-  componentDidMount() {
-    this.clearNotifiation();
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
+  componentWillReceiveProps(nextProps) {
+    const { isSaving, setIsSaving } = this.props;
+    if (isSaving && nextProps.userTraits) {
+      setIsSaving(false);
+    }
   }
 
-  componentDidUpdate(prevProps) {
-    const { settingsUI: { currentToolsTab } } = this.props;
-    if (prevProps.settingsUI.currentToolsTab !== currentToolsTab) {
-      window.location.hash = currentToolsTab.replace(' ', '-');
-      this.clearNotifiation();
+  save() {
+    const { isSaving, setIsSaving } = this.props;
+    if (isSaving) {
+      return;
     }
-  }
+    const newDevice = this.deviceRef.current.state.newDevice;
+    const newDeviceDirty = newDevice.deviceType !== ''
+      || newDevice.manufacturer !== ''
+      || newDevice.model !== ''
+      || newDevice.operatingSystem !== '';
 
-  componentWillUnmount() {
-    this.clearNotifiation();
-    window.removeEventListener('resize', this.updatePredicate);
-  }
+    const newSoftware = this.softwareRef.current.state.newSoftware;
+    const newSoftwareDirty = newSoftware.softwareType !== ''
+      || newSoftware.name !== '';
+
+    const newServiceProvider = this.serviceProviderRef.current.state.newServiceProvider;
+    const newServiceProviderDirty = newServiceProvider.serviceProviderType !== ''
+      || newServiceProvider.name !== '';
 
-  clearNotifiation() {
-    const { clearToastrNotification } = this.props;
-    if (clearToastrNotification) {
-      clearToastrNotification();
+    const newSubscription = this.subscriptionRef.current.state.newSubscription;
+    const newSubscriptionDirty = newSubscription.name !== '';
+
+    let valid = true;
+    let dirty;
+
+    if (newDeviceDirty) {
+      valid = valid && !this.deviceRef.current.onCheckFormValue(newDevice);
+      dirty = true;
+    }
+
+    if (newSoftwareDirty) {
+      valid = valid && !this.softwareRef.current.onCheckFormValue(newSoftware);
+      dirty = true;
     }
-  }
 
-  updatePredicate() {
-    this.setState({ isMobileView: window.innerWidth <= SCREEN_SIZE.SM });
+    if (newServiceProviderDirty) {
+      valid = valid && !this.serviceProviderRef.current.onCheckFormValue(newServiceProvider);
+      dirty = true;
+    }
+
+    if (newSubscriptionDirty) {
+      valid = valid && !this.subscriptionRef.current.onCheckFormValue(newSubscription);
+      dirty = true;
+    }
+    if (newDeviceDirty) this.deviceRef.current.onHandleAddDevice();
+    if (newSoftwareDirty) this.softwareRef.current.onHandleAddSoftware();
+    if (newServiceProviderDirty) {
+      this.serviceProviderRef.current.onHandleAddServiceProvider();
+    }
+    if (newSubscriptionDirty) {
+      this.subscriptionRef.current.onHandleAddSubscription();
+    }
+
+    if (dirty && valid) setIsSaving(true);
   }
 
   render() {
-    const { isMobileView } = this.state;
-    const {
-      settingsUI: { currentToolsTab, TABS },
-      toggleToolsSideTab,
-    } = this.props;
-    const tabs = TABS.TOOLS;
-    const names = Object.keys(tabs).map(key => tabs[key]);
-    const currentTab = this.tablink || currentToolsTab;
-
-    const icons = {
-      devices: <DevicesIcon />,
-      'service providers': <ServiceProvidersIcon />,
-      software: <SoftwareIcon />,
-      subscriptions: <SubscriptionsIcon />,
-    };
-
-    const renderTabContent = (tab) => {
-      switch (tab) {
-        case 'devices':
-          return <Devices {...this.props} />;
-        case 'software':
-          return <Software {...this.props} />;
-        case 'service providers':
-          return <ServiceProviders {...this.props} />;
-        case 'subscriptions':
-          return <Subscriptions {...this.props} />;
-        default:
-          return <ComingSoon />;
-      }
-    };
+    const { isSaving } = this.props;
+
+    const saveBtn = (
+      <PrimaryButton
+        onClick={this.save}
+        theme={{
+          button: `${styles['save-changes-btn']} ${isSaving ? styles.disabled : ''}`,
+        }}
+        disabled={!!isSaving}
+      >
+        Save Changes
+      </PrimaryButton>
+    );
 
     return (
-      <div styleName="tools-container">
-        {isMobileView && (
-          <div styleName="mobile-view">
-            <Accordion
-              icons={icons}
-              names={names}
-              currentSidebarTab={currentTab}
-              renderTabContent={renderTabContent}
-              toggleSidebarTab={toggleToolsSideTab}
-            />
+      <ErrorWrapper>
+        <div styleName="tools-container">
+          <div styleName="header" style={{ marginBottom: '40px' }}>
+            <h3>Devices And Softwares</h3>
           </div>
-        )}
-        <div styleName="col-bar">
-          <ErrorWrapper>
-            <SideBar
-              icons={icons}
-              names={names}
-              currentTab={currentTab}
-              toggle={toggleToolsSideTab}
-            />
-          </ErrorWrapper>
+          <Devices
+            {...this.props}
+            ref={this.deviceRef}
+          />
+          <Software
+            {...this.props}
+            ref={this.softwareRef}
+          />
+          <ServiceProviders
+            {...this.props}
+            ref={this.serviceProviderRef}
+          />
+          <Subscriptions
+            {...this.props}
+            ref={this.subscriptionRef}
+          />
         </div>
-        {
-          !isMobileView && (
-          <div styleName="col-content">
-            <ErrorWrapper>
-              { renderTabContent(currentTab) }
-            </ErrorWrapper>
-          </div>
-          )
-        }
-      </div>
+        <div styleName="footer">{saveBtn}</div>
+      </ErrorWrapper>
     );
   }
 }
 
+Tools.defaultProps = {
+  isSaving: false,
+  setIsSaving: () => {},
+};
 
 Tools.propTypes = {
-  settingsUI: PT.shape().isRequired,
-  toggleToolsSideTab: PT.func.isRequired,
-  clearToastrNotification: PT.func.isRequired,
-  location: PT.shape().isRequired,
+  userTraits: PT.array.isRequired,
+  isSaving: PT.bool,
+  setIsSaving: PT.func,
 };
diff --git a/src/shared/components/Settings/Tools/styles.scss b/src/shared/components/Settings/Tools/styles.scss
index eae5efbfe1..06d789534e 100644
--- a/src/shared/components/Settings/Tools/styles.scss
+++ b/src/shared/components/Settings/Tools/styles.scss
@@ -1,50 +1,67 @@
-@import "../style";
+@import '~styles/mixins';
 
 .tools-container {
-  display: flex;
-  flex-direction: row;
-  box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06);
+  background-color: $listing-filter-bg;
+  padding: 32px;
+  border-radius: 8px;
+  margin: 32px 0 32px;
 
-  @include upto-sm {
-    padding: 0;
+  @include xs-to-md {
+    margin-top: 24px;
   }
 
-  .mobile-view {
-    display: none;
+  .header {
+    h3 {
+      @include barlow-bold;
 
-    @include from-sm-to-lg {
-      display: none;
-    }
+      font-size: 20px;
+      line-height: 22px;
+      color: $tco-black;
+      text-transform: uppercase;
+
+      @include xs-to-md {
+        @include barlow-condensed-semi-bold;
 
-    @include upto-sm {
-      display: block;
-      width: 100%;
+        font-size: 27px;
+        line-height: 28px;
+      }
     }
   }
 
-  .col-bar {
-    width: 250px;
-    background-color: #fafafb;
-    padding: 30px;
-    border-bottom-left-radius: 6px;
+  @include xs-to-md {
+    padding: 24px 16px;
+  }
+}
 
-    @include from-sm-to-lg {
-      width: 90px;
-      padding-right: 30px;
-      margin-right: 0;
-    }
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+
+  .save-changes-btn {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 50px !important;
+    background: #137d60 !important;
+    color: #fff !important;
+    text-transform: uppercase;
+    padding: 11px 23px;
+    margin: 0;
 
-    @include upto-sm {
-      display: none;
+    &.disabled {
+      opacity: 0.5;
     }
   }
 
-  .col-content {
-    flex: 1;
-    padding: 30px 80px;
+  @include xs-to-md {
+    padding: $pad-xxxxl 0 $pad-sm;
+    border-top: 2px solid $color-black-10;
 
-    @include upto-sm {
-      display: none;
+    .save-changes-btn {
+      font-size: 14px;
+      line-height: 20px;
     }
   }
 }
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index 5aac8703fa..bf11cfc521 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -39,6 +39,7 @@ export default function Settings(props) {
   const profileRef = React.useRef();
   const tracksRef = React.useRef();
   const experienceAndSkillsRef = React.useRef();
+  const toolsRef = React.useRef();
 
   const [isSaving, setIsSaving] = useState(false);
 
@@ -59,6 +60,8 @@ export default function Settings(props) {
               profileRef.current.onSaveBasicInfo();
             } else if (newProps.settingsTab === TABS.SKILLS) {
               experienceAndSkillsRef.current.save();
+            } else if (newProps.settingsTab === TABS.TOOLS) {
+              toolsRef.current.save();
             }
           }}
           isSaving={isSaving}
@@ -101,7 +104,10 @@ export default function Settings(props) {
           newProps.settingsTab === TABS.TOOLS
           && (
             <Tools
+              ref={toolsRef}
               {...newProps}
+              isSaving={isSaving}
+              setIsSaving={setIsSaving}
             />
           )
         }

From 200443a3227f92a75db96ba756b0d8213f0a999b Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Tue, 2 Aug 2022 21:25:14 +0700
Subject: [PATCH 07/49] improvement(reskin-profile-settings): 5 - account tab

---
 .../Account/__snapshots__/index.jsx.snap      | 746 +++++++++++++++++-
 .../Settings/__snapshots__/index.jsx.snap     |   8 +-
 src/shared/actions/page/settings.js           |   2 +-
 .../Settings/Account/MyAccount/index.jsx      | 542 +++++--------
 .../Settings/Account/MyAccount/styles.scss    | 189 +++--
 .../components/Settings/Account/index.jsx     | 167 ++--
 .../components/Settings/Account/styles.scss   |  87 +-
 .../components/Settings/FormField/index.jsx   |   9 +-
 .../components/Settings/FormField/styles.scss |   4 +
 .../Settings/FormInputText/index.jsx          |  12 +-
 .../Settings/FormInputText/styles.scss        |   6 +
 .../Preferences/Personalization/styles.scss   |   9 +-
 .../Settings/ToggleableItem/styles.scss       |  34 +-
 src/shared/components/Settings/constants.js   |   2 +-
 src/shared/components/Settings/index.jsx      |   8 +-
 src/shared/routes/Settings/Router.jsx         |   2 +-
 16 files changed, 1232 insertions(+), 595 deletions(-)

diff --git a/__tests__/shared/components/Settings/Account/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/Account/__snapshots__/index.jsx.snap
index 706a373936..608ab744be 100644
--- a/__tests__/shared/components/Settings/Account/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/Settings/Account/__snapshots__/index.jsx.snap
@@ -1,36 +1,740 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders account setting page correctly 1`] = `
-<div
-  className="src-shared-components-Settings-Account-___styles__account-container___2rdYG"
->
+<ErrorWrapper>
   <div
-    className="src-shared-components-Settings-Account-___styles__col-bar___3MCVp"
+    className="src-shared-components-Settings-Account-___styles__account-container___2rdYG"
   >
-    <SideBar
-      icons={
+    <div
+      className="src-shared-components-Settings-Account-___styles__header___1pDi6"
+    >
+      <h3>
+        Account information & Security
+      </h3>
+    </div>
+    <MyAccount
+      clearIncorrectPassword={[Function]}
+      isSaving={false}
+      profile={
         Object {
-          "my account": <MyAccountIcon
-            height="30"
-            viewBox="0 0 30 30"
-            width="30"
-            xmlns="http://www.w3.org/2000/svg"
-          />,
+          "addresses": Array [
+            Object {
+              "city": "Cheng Du",
+              "createdAt": null,
+              "createdBy": "",
+              "stateCode": "Sichuan",
+              "streetAddr1": "Street line 1, #432",
+              "streetAddr2": "",
+              "type": "HOME",
+              "updatedAt": null,
+              "updatedBy": "",
+              "zip": "610101",
+            },
+          ],
+          "competitionCountryCode": "CHN",
+          "createdAt": "2006-10-06T08:49Z",
+          "createdBy": "22655076",
+          "description": "Hello",
+          "email": "tcscoder@gmail.com",
+          "firstName": "Mike",
+          "groups": Array [
+            Object {
+              "createdAt": "2017-09-11T13:54:47.000Z",
+              "createdBy": "8547899",
+              "description": "Blockchain",
+              "id": "20000010",
+              "modifiedAt": null,
+              "modifiedBy": null,
+              "name": "Blockchain",
+              "parentGroup": null,
+              "privateGroup": true,
+              "selfRegister": true,
+              "subGroups": null,
+            },
+            Object {
+              "createdAt": "2017-10-19T10:54:47.000Z",
+              "createdBy": "8547899",
+              "description": "Veterans",
+              "id": "20000013",
+              "modifiedAt": null,
+              "modifiedBy": null,
+              "name": "Veterans",
+              "parentGroup": null,
+              "privateGroup": true,
+              "selfRegister": true,
+              "subGroups": null,
+            },
+            Object {
+              "createdAt": "2017-11-06T15:49:35.000Z",
+              "createdBy": "8547899",
+              "description": "Cognitive Community",
+              "id": "20000015",
+              "modifiedAt": null,
+              "modifiedBy": null,
+              "name": "Cognitive",
+              "parentGroup": null,
+              "privateGroup": true,
+              "selfRegister": true,
+              "subGroups": null,
+            },
+          ],
+          "handle": "tcscoder",
+          "handleLower": "tcscoder",
+          "homeCountryCode": "CHN",
+          "lastName": "Smith",
+          "maxRating": Object {
+            "rating": 2162,
+            "subTrack": "DEVELOPMENT",
+            "track": "DEVELOP",
+          },
+          "otherLangName": "Som",
+          "photoURL": "https://topcoder-prod-media.s3.amazonaws.com/member/profile/tcscoder-1525559661069.png",
+          "status": "ACTIVE",
+          "tracks": Array [
+            "DEVELOP",
+          ],
+          "updatedAt": "2018-05-05T22:34Z",
+          "updatedBy": "22655076",
+          "userId": 22655076,
         }
       }
-      names={
-        Array [
-          "my account",
-        ]
+      profileState={
+        Object {
+          "achievements": Array [
+            Object {
+              "date": "2016-09-02T00:00:00.000-04:00",
+              "description": "iOS Developer Challenger Badge",
+            },
+            Object {
+              "date": "2015-08-05T00:00:00.000-04:00",
+              "description": "Participant Badge",
+            },
+            Object {
+              "date": "2015-08-05T00:00:00.000-04:00",
+              "description": "iOS Participant Badge",
+            },
+            Object {
+              "date": "2014-07-01T00:00:00.000-04:00",
+              "description": "Digital Run Top Five",
+            },
+            Object {
+              "date": "2014-07-01T00:00:00.000-04:00",
+              "description": "Digital Run Winner",
+            },
+            Object {
+              "date": "2014-02-11T00:00:00.000-05:00",
+              "description": "First Milestone Prize",
+            },
+            Object {
+              "date": "2013-03-15T00:00:00.000-04:00",
+              "description": "First Forum Post",
+            },
+            Object {
+              "date": "2013-03-04T00:00:00.000-05:00",
+              "description": "First Passing Submission",
+            },
+            Object {
+              "date": "2013-02-28T00:00:00.000-05:00",
+              "description": "First Placement",
+            },
+            Object {
+              "date": "2013-02-28T00:00:00.000-05:00",
+              "description": "First Win",
+            },
+            Object {
+              "date": "2012-11-09T00:00:00.000-05:00",
+              "description": "One Hundred Forum Posts",
+            },
+            Object {
+              "date": "2010-10-09T00:00:00.000-04:00",
+              "description": "Five Hundred Forum Posts",
+            },
+            Object {
+              "date": "2009-04-04T00:00:00.000-04:00",
+              "description": "Twenty Five Placements",
+            },
+            Object {
+              "date": "2008-07-01T00:00:00.000-04:00",
+              "description": "Twenty Five First Placement Win",
+            },
+            Object {
+              "date": "2008-06-11T00:00:00.000-04:00",
+              "description": "One Thousand Forum Posts",
+            },
+            Object {
+              "date": "2008-05-12T00:00:00.000-04:00",
+              "description": "Fifty Passing Submissions",
+            },
+            Object {
+              "date": "2008-05-03T00:00:00.000-04:00",
+              "description": "Fifty Placements",
+            },
+            Object {
+              "date": "2008-05-01T00:00:00.000-04:00",
+              "description": "TopCoder Development Coder of the Month for May 2008",
+            },
+            Object {
+              "date": "2007-03-30T00:00:00.000-04:00",
+              "description": "Fifty First Placement Win",
+            },
+            Object {
+              "date": "2006-11-03T00:00:00.000-05:00",
+              "description": "One Hundred Passing Submissions",
+            },
+            Object {
+              "date": "2006-10-28T00:00:00.000-04:00",
+              "description": "One Hundred First Placement Win",
+            },
+            Object {
+              "date": "2006-10-28T00:00:00.000-04:00",
+              "description": "One hundred Placements",
+            },
+            Object {
+              "date": "2006-10-28T00:00:00.000-04:00",
+              "description": "SRM Engagement Honor",
+            },
+          ],
+          "copilot": false,
+          "country": "China",
+          "credential": Object {
+            "activationCode": "SDUUH(HFS",
+            "hasPassword": true,
+            "resetToken": null,
+          },
+          "emailPreferences": Object {
+            "TOPCODER_NL_DESIGN": true,
+            "TOPCODER_NL_DEV": true,
+            "TOPCODER_NL_GEN": true,
+          },
+          "externalAccounts": Object {
+            "behance": null,
+            "bitbucket": null,
+            "createdAt": null,
+            "createdBy": null,
+            "dribbble": null,
+            "github": null,
+            "handle": "tcscoder",
+            "linkedin": null,
+            "stackoverflow": null,
+            "twitter": null,
+            "updatedAt": null,
+            "updatedBy": null,
+            "userId": 22655076,
+          },
+          "externalLinks": Array [
+            Object {
+              "URL": "https://www.google.com",
+              "description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
+              "entities": null,
+              "handle": "tcscoder",
+              "images": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
+              "key": "4c7136cdbbf227274e49c475e7541abf",
+              "keywords": null,
+              "source": "embed.ly",
+              "synchronizedAt": 1525560141959,
+              "title": "Google",
+              "userId": 22655076,
+            },
+          ],
+          "info": null,
+          "linkedAccounts": Array [
+            Object {
+              "context": null,
+              "email": "tcscoder@gmail.com",
+              "emailVerified": false,
+              "enterprise": false,
+              "name": "tcscoder",
+              "provider": null,
+              "providerType": "github",
+              "social": true,
+              "userId": "623633",
+            },
+            Object {
+              "context": null,
+              "email": "",
+              "emailVerified": false,
+              "enterprise": false,
+              "name": "1233342",
+              "provider": null,
+              "providerType": "stackoverflow",
+              "social": true,
+              "userId": "1233342",
+            },
+          ],
+          "loadingError": false,
+          "profileForHandle": "tcscoder",
+          "skills": Object {
+            "100": Object {
+              "hidden": false,
+              "score": 2,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": ".NET",
+            },
+            "101": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "ActionScript",
+            },
+            "109": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Android",
+            },
+            "110": Object {
+              "hidden": false,
+              "score": 10,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "AngularJS",
+            },
+            "115": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "USER_ENTERED",
+              ],
+              "tagName": "Apache Kafka",
+            },
+            "117": Object {
+              "hidden": false,
+              "score": 4,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "API",
+            },
+            "127": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Blackberry SDK",
+            },
+            "132": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "C#",
+            },
+            "153": Object {
+              "hidden": false,
+              "score": 10,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "CSS",
+            },
+            "154": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "USER_ENTERED",
+              ],
+              "tagName": "CSS3",
+            },
+            "163": Object {
+              "hidden": false,
+              "score": 5,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Docker",
+            },
+            "170": Object {
+              "hidden": false,
+              "score": 18,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "EJB",
+            },
+            "171": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Elasticsearch",
+            },
+            "177": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Express",
+            },
+            "182": Object {
+              "hidden": false,
+              "score": 3,
+              "sources": Array [
+                "CHALLENGE",
+                "USER_ENTERED",
+              ],
+              "tagName": "Flex",
+            },
+            "186": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Force.Com Sites",
+            },
+            "211": Object {
+              "hidden": false,
+              "score": 12,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Hibernate",
+            },
+            "212": Object {
+              "hidden": false,
+              "score": 6,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "HTML",
+            },
+            "213": Object {
+              "hidden": false,
+              "score": 12,
+              "sources": Array [
+                "CHALLENGE",
+                "USER_ENTERED",
+              ],
+              "tagName": "HTML5",
+            },
+            "214": Object {
+              "hidden": false,
+              "score": 3,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "HTTP",
+            },
+            "219": Object {
+              "hidden": false,
+              "score": 5,
+              "sources": Array [
+                "CHALLENGE",
+                "USER_ENTERED",
+              ],
+              "tagName": "IBM DB2",
+            },
+            "229": Object {
+              "hidden": false,
+              "score": 3,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "IBM Websphere Application Server",
+            },
+            "232": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "IBM WebSphere MQ",
+            },
+            "244": Object {
+              "hidden": false,
+              "score": 15,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "J2EE",
+            },
+            "247": Object {
+              "hidden": false,
+              "score": 123,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Java",
+            },
+            "248": Object {
+              "hidden": false,
+              "score": 20,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "JavaScript",
+            },
+            "249": Object {
+              "hidden": false,
+              "score": 3,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "JBoss Seam",
+            },
+            "250": Object {
+              "hidden": false,
+              "score": 3,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "JDBC",
+            },
+            "254": Object {
+              "hidden": false,
+              "score": 9,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "JPA",
+            },
+            "255": Object {
+              "hidden": false,
+              "score": 2,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "jQuery",
+            },
+            "258": Object {
+              "hidden": false,
+              "score": 2,
+              "sources": Array [
+                "CHALLENGE",
+                "USER_ENTERED",
+              ],
+              "tagName": "JSF",
+            },
+            "259": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "JSON",
+            },
+            "260": Object {
+              "hidden": false,
+              "score": 21,
+              "sources": Array [
+                "CHALLENGE",
+                "USER_ENTERED",
+              ],
+              "tagName": "JSP",
+            },
+            "276": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Maven",
+            },
+            "281": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "MongoDB",
+            },
+            "284": Object {
+              "hidden": false,
+              "score": 7,
+              "sources": Array [
+                "CHALLENGE",
+                "USER_ENTERED",
+              ],
+              "tagName": "MySql",
+            },
+            "286": Object {
+              "hidden": false,
+              "score": 18,
+              "sources": Array [
+                "CHALLENGE",
+                "USER_ENTERED",
+              ],
+              "tagName": "Node.js",
+            },
+            "295": Object {
+              "hidden": false,
+              "score": 14,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Oracle Database",
+            },
+            "303": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "PHP",
+            },
+            "306": Object {
+              "hidden": false,
+              "score": 8,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "PostgreSQL",
+            },
+            "315": Object {
+              "hidden": false,
+              "score": 1,
+              "sources": Array [
+                "USER_ENTERED",
+              ],
+              "tagName": "React.js",
+            },
+            "323": Object {
+              "hidden": false,
+              "score": 5,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "REST",
+            },
+            "328": Object {
+              "hidden": false,
+              "score": 2,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Salesforce",
+            },
+            "337": Object {
+              "hidden": false,
+              "score": 2,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Servlet",
+            },
+            "344": Object {
+              "hidden": false,
+              "score": 2,
+              "sources": Array [
+                "CHALLENGE",
+                "USER_ENTERED",
+              ],
+              "tagName": "Sharepoint 3.0",
+            },
+            "354": Object {
+              "hidden": false,
+              "score": 15,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Spring",
+            },
+            "355": Object {
+              "hidden": false,
+              "score": 4,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "SQL",
+            },
+            "356": Object {
+              "hidden": false,
+              "score": 2,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "SQL Server",
+            },
+            "362": Object {
+              "hidden": false,
+              "score": 3,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Struts",
+            },
+            "387": Object {
+              "hidden": false,
+              "score": 8,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "Web Services",
+            },
+            "401": Object {
+              "hidden": false,
+              "score": 6,
+              "sources": Array [
+                "CHALLENGE",
+              ],
+              "tagName": "XML",
+            },
+            "402": Object {
+              "hidden": false,
+              "score": 2,
+              "sources": Array [
+                "CHALLENGE",
+                "USER_ENTERED",
+              ],
+              "tagName": "XSL",
+            },
+          },
+          "stats": null,
+        }
+      }
+      setIsSaving={[Function]}
+      settingsPageState={Object {}}
+      settingsUI={
+        Object {
+          "TABS": Object {
+            "ACCOUNT": Object {
+              "MYACCOUNT": "my account",
+            },
+          },
+        }
       }
+      tokenV3=""
+      updatePassword={[Function]}
+      updateProfile={[Function]}
     />
   </div>
   <div
-    className="src-shared-components-Settings-Account-___styles__col-content___1gt_Z"
+    className="src-shared-components-Settings-Account-___styles__footer___1T0Du"
   >
-    <ErrorWrapper>
-      <Unknown />
-    </ErrorWrapper>
+    <ThemedButton
+      active={false}
+      composeAdhocTheme="deeply"
+      composeContextTheme="softly"
+      disabled={false}
+      enforceA={false}
+      mapThemrProps={[Function]}
+      onClick={[Function]}
+      onMouseDown={null}
+      openNewTab={false}
+      replace={false}
+      size={null}
+      theme={
+        Object {
+          "button": "src-shared-components-Settings-Account-styles___save-changes-btn___2_XRYn ",
+        }
+      }
+      themePriority="adhoc-context-default"
+      to={null}
+      type="button"
+    >
+      Save Changes
+    </ThemedButton>
   </div>
-</div>
+</ErrorWrapper>
 `;
diff --git a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
index 35b1cb918d..73f0c5c1d3 100644
--- a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
@@ -41,7 +41,7 @@ exports[`renders account setting page correctly 1`] = `
             "title": "Tools",
           },
           Object {
-            "link": "accounts",
+            "link": "account",
             "title": "Account",
           },
           Object {
@@ -798,7 +798,7 @@ exports[`renders preferences setting page correctly 1`] = `
             "title": "Tools",
           },
           Object {
-            "link": "accounts",
+            "link": "account",
             "title": "Account",
           },
           Object {
@@ -1552,7 +1552,7 @@ exports[`renders profile setting page correctly 1`] = `
             "title": "Tools",
           },
           Object {
-            "link": "accounts",
+            "link": "account",
             "title": "Account",
           },
           Object {
@@ -2312,7 +2312,7 @@ exports[`renders tools setting page correctly 1`] = `
             "title": "Tools",
           },
           Object {
-            "link": "accounts",
+            "link": "account",
             "title": "Account",
           },
           Object {
diff --git a/src/shared/actions/page/settings.js b/src/shared/actions/page/settings.js
index e4446f0097..c143e9a322 100644
--- a/src/shared/actions/page/settings.js
+++ b/src/shared/actions/page/settings.js
@@ -9,7 +9,7 @@ export const TABS = {
   SKILLS: 'skills',
   TRACKS: 'tracks',
   TOOLS: 'tools',
-  ACCOUNTS: 'accounts',
+  ACCOUNT: 'account',
   PREFERENCES: 'preferences',
 };
 
diff --git a/src/shared/components/Settings/Account/MyAccount/index.jsx b/src/shared/components/Settings/Account/MyAccount/index.jsx
index 29c6060ec4..dd5134daa4 100644
--- a/src/shared/components/Settings/Account/MyAccount/index.jsx
+++ b/src/shared/components/Settings/Account/MyAccount/index.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /**
  * Child component of Settings/Account/ renders the
  * 'My Account' page.
@@ -10,6 +11,9 @@ import PT from 'prop-types';
 import { omit, get } from 'lodash';
 import ConsentComponent from 'components/Settings/ConsentComponent';
 import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
+import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
+import FormField from 'components/Settings/FormField';
+import FormInputText from 'components/Settings/FormInputText';
 import Personalization from 'components/Settings/Preferences/Personalization';
 import { config } from 'topcoder-react-utils';
 
@@ -199,7 +203,7 @@ export default class MyAccount extends ConsentComponent {
     } = this.state;
 
     const { updatingPassword } = profileState;
-    e.preventDefault();
+    if (e) e.preventDefault();
 
     if (!passwordValid || !rePasswordValid || updatingPassword) {
       const newState = { ...this.state };
@@ -350,14 +354,11 @@ export default class MyAccount extends ConsentComponent {
 
   render() {
     const {
-      settingsUI,
       handle,
-      profileState,
       settingsPageState,
+      profileState,
     } = this.props;
-    const tabs = settingsUI.TABS.ACCOUNT;
-    const currentTab = settingsUI.currentAccountTab;
-    const containerStyle = currentTab === tabs.MYACCOUNT ? '' : 'hide';
+
     const {
       newEmail,
       currentEmail,
@@ -374,7 +375,6 @@ export default class MyAccount extends ConsentComponent {
       showEmailTips,
       newEmailSameAsCurrent,
       passwordValid,
-      isMobileView,
       showRePasswordTips,
       rePasswordValid,
       // isValidEmail,
@@ -385,7 +385,7 @@ export default class MyAccount extends ConsentComponent {
     const { incorrectPassword } = settingsPageState;
 
     return (
-      <div styleName={containerStyle}>
+      <React.Fragment>
         {
           this.shouldRenderConsent() && this.renderConsent()
         }
@@ -416,150 +416,45 @@ export default class MyAccount extends ConsentComponent {
             </Modal>
           )
         }
-        <div styleName="myaccount-container">
-          {
-            incorrectPassword
-            && (
-              <div styleName="error-message">
-                Your current password is incorrect.
-                Please check that you entered the right one.
-              </div>
-            )
-          }
-          <h1>
-            Account
-          </h1>
-          <div styleName="sub-title">
-            Username & Password
-          </div>
-          <div styleName="form-container-default">
+        <div styleName="form-container">
+          <Collapse>
+            <h2 styleName="form-title">
+              Username & Password
+            </h2>
             {
-              isMobileView ? (
-                <form name="email-form-mobile" styleName="form-mobile" noValidate autoComplete="off">
-                  <div styleName="row">
-                    <div styleName="field">
-                      <label htmlFor="username-mobile">
-                        Username
-                        <input type="hidden" />
-                      </label>
-                      <input id="username-mobile" name="username" type="text" value={handle} styleName="form-field grey" disabled />
-                    </div>
-                    <div styleName="field">
-                      <label htmlFor="email-mobile">
-                        Primary Email
-                        <input type="hidden" />
-                      </label>
-                      <input id="email-mobile" name="email" type="text" value={currentEmail} styleName="form-field grey" disabled />
-                    </div>
-                    <div styleName={`field ${btnChangeEmailVisible ? 'hide' : ''}`}>
-                      <label htmlFor="newemail">
-                        New Email
-                        <input type="hidden" />
-                      </label>
-                      <div styleName="validation-bar" className="form-field">
-                        <div styleName={`password toggle-password ${focus['new-email-input'] ? 'focus' : ''}`}>
-                          <input id="new-email-input" styleName="password-input" ref={this.newEmailRef} onBlur={this.onNewEmailBlur} value={newEmail} onChange={this.onUpdateNewEmailInput} name="newemail" autoCapitalize="off" placeholder="New email" required />
-                        </div>
-                        <div id="password-tips" styleName="tips password-tips mobile" className={showEmailTips ? '' : 'hidden'}>
-                          <h3>
-                            {
-                              newEmailSameAsCurrent
-                                ? 'The new email cannot be the same as the current email.'
-                                : 'Your email address is not valid.'
-                            }
-                          </h3>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  {
-                    get(profileState, 'credential.hasPassword', false) === false && (
-                      <div styleName="error-message">
-                        Since you joined Topcoder using your &lt;SSO Service&gt; account,
-                        any email updates will need to be handled by logging in to
-                        your &lt;SSO Service&gt; account.
-                      </div>
-                    )
-                  }
-                  { /* TEMPORARY DISABLE CHANGE E-MAIL - community-app#5107
-                  <div styleName="row">
-                    <div
-                      styleName={
-                        `button-change-email ${btnChangeEmailVisible ? 'active' : 'hide'}`
-                      }
-                    >
-                      <PrimaryButton
-                        styleName="white-label"
-                        onClick={this.onChangeEmail}
-                      >
-                        Change Email
-                      </PrimaryButton>
-                    </div>
-                    <div
-                      styleName={
-                        `button-verification-email ${btnVerifiEmailVisible ? 'active' : 'hide'}`
-                      }
-                    >
-                      <PrimaryButton
-                        styleName="white-label"
-                        disabled={!isValidEmail || updatingProfile}
-                        onClick={this.onSendVerificationEmail}
-                      >
-                        Send Verification Email
-                      </PrimaryButton>
-                    </div>
-                    <div
-                      styleName={
-                        `button-verification-again ${btnVerifiAgainlVisible ? 'active' : 'hide'}`
-                      }
-                    >
-                      <PrimaryButton
-                        styleName="white-label"
-                        disabled={!isValidEmail || updatingProfile}
-                        onClick={this.onSendVerificationEmail}
-                      >
-                        Send Verification Email Again
-                      </PrimaryButton>
-                    </div>
-                    <div
-                      styleName={
-                        `button-cancel-change-email ${btnVerifiEmailVisible ? 'active' : 'hide'}`
-                      }
-                    >
-                      <PrimaryButton
-                        styleName="white-label"
-                        onClick={this.onCancelVerificationEmail}
-                      >
-                        Cancel
-                      </PrimaryButton>
-                    </div>
-                  </div>
-                  */}
-                </form>
-              ) : (
-                <form name="email-form-default" styleName="form-default" noValidate autoComplete="off">
-                  <div styleName="row">
-                    <div styleName="field col-1">
-                      <label htmlFor="username">
-                        Username
-                        <input type="hidden" />
-                      </label>
-                    </div>
-                    <div styleName="field col-2">
-                      <input id="username" name="username" type="text" value={handle} styleName="form-field grey" disabled />
-                    </div>
-                  </div>
-                  <div styleName="row">
-                    <div styleName="field col-1">
-                      <label htmlFor="email">
-                        Primary Email
-                        <input type="hidden" />
-                      </label>
-                    </div>
-                    <div styleName="field col-2">
-                      <input id="email" name="email" type="text" value={currentEmail} styleName="form-field grey" disabled />
-                    </div>
-                  </div>
+              incorrectPassword
+              && (
+                <div styleName="error-message" style={{ marginBottom: '20px' }}>
+                  Your current password is incorrect.
+                  Please check that you entered the right one.
+                </div>
+              )
+            }
+            <div styleName="form-content">
+              <div styleName="form-label">
+                While your Topcoder handle or username and your email cannot be changed,
+                we encourage to change your password frequently.
+              </div>
+              <div styleName="form-body">
+                <form styleName="account-form" noValidate autoComplete="off">
+                  <FormField label="Username" style={{ flex: '0 0 100%' }} disabled>
+                    <FormInputText
+                      id="username"
+                      name="username"
+                      type="text"
+                      value={handle}
+                      disabled
+                    />
+                  </FormField>
+                  <FormField label="Primary Email" style={{ flex: '0 0 100%' }} disabled>
+                    <FormInputText
+                      id="email"
+                      name="email"
+                      type="text"
+                      value={currentEmail}
+                      disabled
+                    />
+                  </FormField>
                   <div styleName={`row ${btnChangeEmailVisible ? 'hide' : ''}`}>
                     <div styleName="field col-1">
                       <label htmlFor="newemail">
@@ -641,7 +536,7 @@ export default class MyAccount extends ConsentComponent {
                     <div
                       styleName={
                         `button-cancel-change-email ${btnVerifiEmailVisible ? 'active' : 'hide'}`
-                      }
+                      // }
                     >
                       <PrimaryButton
                         styleName="white-label"
@@ -651,231 +546,156 @@ export default class MyAccount extends ConsentComponent {
                       </PrimaryButton>
                     </div>
                   </div>
-                  */}
+                  // */}
                 </form>
-              )
-            }
-            {
-              profileState.credential && profileState.credential.hasPassword
-              && (
-                <div styleName="password-wrap">
-                  {
-                    isMobileView ? (
-                      <form name="passowrd-form-mobile" styleName="form-mobile" noValidate autoComplete="off">
-                        <div styleName="row">
-                          <div styleName="field">
-                            <label htmlFor="current-password-input">
-                              Current Password
-                              <input type="hidden" />
-                            </label>
-                            <div styleName="validation-bar" className="form-field">
-                              <div styleName={`password toggle-password ${focus['current-password-input'] ? 'focus' : ''}`}>
-                                <input id="current-password-input" styleName="password-input" ref={this.currentPasswordRef} onChange={this.checkPassword} name="password" type={passwordInputType['current-password-input']} placeholder="TYPE YOUR CURRENT PASSWORD" minLength="8" maxLength="64" required />
-                                <label htmlFor="currentPasswordCheckbox" styleName="passwordCheckbox">
-                                  <input type="checkbox" id="currentPasswordCheckbox" styleName="currentPasswordCheckbox" onChange={() => this.toggleTypeAttribute('current-password-input')} />
-                                  Show
-                                </label>
-                              </div>
-                            </div>
-                          </div>
-                          <div styleName="field">
-                            <label htmlFor="new-password-input">
-                              New password
-                              <input type="hidden" />
-                            </label>
-                            <div styleName="validation-bar" className="form-field">
-                              <div styleName={`password toggle-password ${focus['new-password-input'] ? 'focus' : ''}`}>
-                                <input id="new-password-input" styleName="password-input" ref={this.newPasswordRef} onChange={this.checkPassword} onFocus={this.onPasswordFocus} onBlur={this.onPasswordBlur} name="password" type={passwordInputType['new-password-input']} placeholder="TYPE YOUR NEW PASSWORD" minLength="8" maxLength="64" required />
-                                <label htmlFor="newPasswordCheckbox" styleName="passwordCheckbox">
-                                  <input type="checkbox" id="newPasswordCheckbox" styleName="newPasswordCheckbox" onChange={() => this.toggleTypeAttribute('new-password-input')} />
-                                  Show
-                                </label>
-                              </div>
-                            </div>
-                            <div id="password-tips" styleName="tips password-tips mobile" className={showNewTips ? '' : 'hidden'}>
-                              <h3>
-                                Your password must have:
-                              </h3>
-                              <p styleName={hasLength ? 'has-length-between-range' : ''}>
-                                At least 8 characters
-                              </p>
-                              <p styleName={hasLetter ? 'has-letter' : ''}>
-                                At least one letter
-                              </p>
-                              <p styleName={hasSymbolNumber ? 'has-symbol-or-number' : ''}>
-                                At least one number or symbol
-                              </p>
-                              <p styleName={differentOldPassword ? 'different-with-old-password' : ''}>
-                                Should not be the same as the old password
-                              </p>
+                {
+                  profileState.credential && profileState.credential.hasPassword
+                  && (
+                  <React.Fragment>
+                    <form name="newPasswordForm" styleName="password-form" noValidate>
+                      <FormField label="Current Password" style={{ flex: '0 0 100%' }}>
+                        <FormInputText
+                          ref={this.currentPasswordRef}
+                          id="current-password-input"
+                          name="password"
+                          type={passwordInputType['current-password-input']}
+                          onChange={this.checkPassword}
+                          placeholder="Type your current password"
+                          minLength="8"
+                          maxLength="64"
+                          required
+                        />
+                      </FormField>
+
+                      {/* show password */}
+                      {/* <div>
+                          <div styleName="validation-bar" className="form-field">
+                            <div styleName={`password toggle-password ${focus['current-password-input'] ? 'focus' : ''}`}>
+                              <label htmlFor="currentPasswordCheckbox" styleName="passwordCheckbox">
+                                <input type="checkbox" id="currentPasswordCheckbox" styleName="currentPasswordCheckbox"
+                                onChange={() => this.toggleTypeAttribute('current-password-input')} />
+                                Show
+                              </label>
                             </div>
                           </div>
-                          <div styleName="field">
-                            <label htmlFor="re-new-password-input">
-                              Re-type new password
-                              <input type="hidden" />
-                            </label>
-                            <div styleName="validation-bar" className="form-field">
-                              <div styleName={`password toggle-password ${focus['re-new-password-input'] ? 'focus' : ''}`}>
-                                <input id="re-new-password-input" styleName="password-input" ref={this.reNewPasswordRef} onChange={this.checkPassword} onFocus={this.onPasswordFocus} onBlur={this.onPasswordBlur} name="re-password" type={passwordInputType['re-new-password-input']} placeholder="RE-TYPE YOUR NEW PASSWORD" minLength="8" maxLength="64" required />
-                                <label htmlFor="reNewPasswordCheckbox" styleName="passwordCheckbox">
-                                  <input type="checkbox" id="reNewPasswordCheckbox" styleName="newPasswordCheckbox" onChange={() => this.toggleTypeAttribute('re-new-password-input')} />
-                                  Show
-                                </label>
-                              </div>
-                            </div>
-                            <div id="password-tips" styleName="tips password-tips mobile" className={showRePasswordTips ? '' : 'hidden'}>
-                              <h3>
-                                Your Re-typed password must:
-                              </h3>
-                              <p styleName={rePasswordValid ? 're-password-match' : ''}>
-                                Match the new password entered
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                        <div styleName="row">
-                          <div styleName="button-change-password">
-                            <PrimaryButton
-                              styleName="white-label"
-                              disabled={!passwordValid || !rePasswordValid || updatingPassword}
-                              onClick={this.onUpdatePassword}
-                            >
-                              {
-                                !updatingPassword && 'Change Password'
-                              }
-                              {
-                                updatingPassword && <i className="fa fa-spinner fa-spin" />
-                              }
-                            </PrimaryButton>
-                          </div>
+                        </div> */}
+
+                      <FormField label="New Password" style={{ flex: '0 0 100%' }}>
+                        <FormInputText
+                          ref={this.newPasswordRef}
+                          id="new-password-input"
+                          name="password"
+                          type={passwordInputType['new-password-input']}
+                          onChange={this.checkPassword}
+                          onFocus={this.onPasswordFocus}
+                          onBlur={this.onPasswordBlur}
+                          placeholder="Type your new password"
+                          minLength="8"
+                          maxLength="64"
+                          required
+                        />
+                        <div id="password-tips" styleName="tips password-tips" className={showNewTips ? '' : 'hidden'}>
+                          <h3>
+                            Your password must have:
+                          </h3>
+                          <p styleName={hasLength ? 'has-length-between-range' : ''}>
+                            At least 8 characters
+                          </p>
+                          <p styleName={hasLetter ? 'has-letter' : ''}>
+                            At least one letter
+                          </p>
+                          <p styleName={hasSymbolNumber ? 'has-symbol-or-number' : ''}>
+                            At least one number or symbol
+                          </p>
+                          <p styleName={differentOldPassword ? 'different-with-old-password' : ''}>
+                            Should not be the same as the old password
+                          </p>
                         </div>
-                      </form>
-                    ) : (
-                      <form name="newPasswordForm" styleName="password-section" noValidate>
-                        <div styleName="row">
-                          <div styleName="field col-1">
-                            <label htmlFor="current-password-input">
-                              Current Password
-                              <input type="hidden" />
+                      </FormField>
+
+                      {/* <div>
+                        <div styleName="validation-bar" className="form-field">
+                          <div styleName={`password toggle-password ${focus['new-password-input'] ? 'focus' : ''}`}>
+                            <label htmlFor="newPasswordCheckbox" styleName="passwordCheckbox">
+                              <input type="checkbox" id="newPasswordCheckbox" styleName="newPasswordCheckbox" onChange={() => this.toggleTypeAttribute('new-password-input')} />
+                              Show
                             </label>
                           </div>
-                          <div styleName="field col-2">
-                            <div styleName="validation-bar" className="form-field">
-                              <div styleName={`password toggle-password ${focus['current-password-input'] ? 'focus' : ''}`}>
-                                <input id="current-password-input" styleName="password-input" ref={this.currentPasswordRef} onChange={this.checkPassword} name="password" type={passwordInputType['current-password-input']} placeholder="TYPE YOUR CURRENT PASSWORD" minLength="8" maxLength="64" required />
-                                <label htmlFor="currentPasswordCheckbox" styleName="passwordCheckbox">
-                                  <input type="checkbox" id="currentPasswordCheckbox" styleName="currentPasswordCheckbox" onChange={() => this.toggleTypeAttribute('current-password-input')} />
-                                  Show
-                                </label>
-                              </div>
-                            </div>
-                          </div>
                         </div>
-                        <div styleName="row">
-                          <div styleName="field col-1 password">
-                            <label htmlFor="new-password-input">
-                              New password
-                              <input type="hidden" />
-                            </label>
-                          </div>
-                          <div styleName="field col-2">
-                            <div styleName="validation-bar" className="form-field">
-                              <div styleName={`password toggle-password ${focus['new-password-input'] ? 'focus' : ''}`}>
-                                <input id="new-password-input" styleName="password-input" ref={this.newPasswordRef} onChange={this.checkPassword} onFocus={this.onPasswordFocus} onBlur={this.onPasswordBlur} name="password" type={passwordInputType['new-password-input']} placeholder="TYPE YOUR NEW PASSWORD" minLength="8" maxLength="64" required />
-                                <label htmlFor="newPasswordCheckbox" styleName="passwordCheckbox">
-                                  <input type="checkbox" id="newPasswordCheckbox" styleName="newPasswordCheckbox" onChange={() => this.toggleTypeAttribute('new-password-input')} />
-                                  Show
-                                </label>
-                              </div>
-                              <div id="password-tips" styleName="tips password-tips" className={showNewTips ? '' : 'hidden'}>
-                                <h3>
-                                  Your password must have:
-                                </h3>
-                                <p styleName={hasLength ? 'has-length-between-range' : ''}>
-                                  At least 8 characters
-                                </p>
-                                <p styleName={hasLetter ? 'has-letter' : ''}>
-                                  At least one letter
-                                </p>
-                                <p styleName={hasSymbolNumber ? 'has-symbol-or-number' : ''}>
-                                  At least one number or symbol
-                                </p>
-                                <p styleName={differentOldPassword ? 'different-with-old-password' : ''}>
-                                  Should not be the same as the old password
-                                </p>
-                              </div>
-                            </div>
-                          </div>
+                      </div> */}
+
+                      <FormField label="Re-Type New Password" style={{ flex: '0 0 100%' }}>
+                        <FormInputText
+                          ref={this.reNewPasswordRef}
+                          id="re-new-password-input"
+                          name="re-password"
+                          type={passwordInputType['re-new-password-input']}
+                          onChange={this.checkPassword}
+                          onFocus={this.onPasswordFocus}
+                          onBlur={this.onPasswordBlur}
+                          placeholder="Re-Type New Password"
+                          minLength="8"
+                          maxLength="64"
+                          required
+                        />
+                        <div id="password-tips" styleName="tips password-tips" className={showRePasswordTips ? '' : 'hidden'}>
+                          <h3>
+                            Your Re-typed password must:
+                          </h3>
+                          <p styleName={rePasswordValid ? 're-password-match' : ''}>
+                            Match the new password entered
+                          </p>
                         </div>
-                        <div styleName="row">
-                          <div styleName="field col-1 password">
-                            <label htmlFor="re-new-password-input">
-                              Re-type new password
-                              <input type="hidden" />
+                      </FormField>
+
+                      {/* <div>
+                        <div styleName="validation-bar" className="form-field">
+                          <div styleName={`password toggle-password ${focus['re-new-password-input'] ? 'focus' : ''}`}>
+                            <input id="re-new-password-input" styleName="password-input" ref={this.reNewPasswordRef} onChange={this.checkPassword} onFocus={this.onPasswordFocus} onBlur={this.onPasswordBlur} name="re-password" type={passwordInputType['re-new-password-input']} placeholder="RE-TYPE YOUR NEW PASSWORD" minLength="8" maxLength="64" required />
+                            <label htmlFor="reNewPasswordCheckbox" styleName="passwordCheckbox">
+                              <input type="checkbox" id="reNewPasswordCheckbox" styleName="newPasswordCheckbox" onChange={() => this.toggleTypeAttribute('re-new-password-input')} />
+                              Show
                             </label>
                           </div>
-                          <div styleName="field col-2">
-                            <div styleName="validation-bar" className="form-field">
-                              <div styleName={`password toggle-password ${focus['re-new-password-input'] ? 'focus' : ''}`}>
-                                <input id="re-new-password-input" styleName="password-input" ref={this.reNewPasswordRef} onChange={this.checkPassword} onFocus={this.onPasswordFocus} onBlur={this.onPasswordBlur} name="re-password" type={passwordInputType['re-new-password-input']} placeholder="RE-TYPE YOUR NEW PASSWORD" minLength="8" maxLength="64" required />
-                                <label htmlFor="reNewPasswordCheckbox" styleName="passwordCheckbox">
-                                  <input type="checkbox" id="reNewPasswordCheckbox" styleName="newPasswordCheckbox" onChange={() => this.toggleTypeAttribute('re-new-password-input')} />
-                                  Show
-                                </label>
-                              </div>
-                              <div id="password-tips" styleName="tips password-tips mobile" className={showRePasswordTips ? '' : 'hidden'}>
-                                <h3>
-                                  Your Re-typed password must:
-                                </h3>
-                                <p styleName={rePasswordValid ? 're-password-match' : ''}>
-                                  Match the new password entered
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div styleName="row">
-                          <div styleName="button-change-password">
-                            <PrimaryButton
-                              styleName="white-label"
-                              disabled={!passwordValid || !rePasswordValid || updatingPassword}
-                              onClick={this.onUpdatePassword}
-                            >
-                              {
-                                !updatingPassword && 'Change Password'
-                              }
-                              {
-                                updatingPassword && <i className="fa fa-spinner fa-spin" />
-                              }
-                            </PrimaryButton>
-                          </div>
                         </div>
-                      </form>
-                    )
-                  }
-                </div>
-              )
-            }
-            {
-              profileState.credential && profileState.credential.hasPassword === false
-              && (
-                <div>
-                  <p>
-                    You joined Topcoder by using an external account,
-                    so we don&#39;t have a password for you.
-                  </p>
-                </div>
-              )
-            }
-            <Personalization {...this.props} />
-          </div>
+                      // </div> */}
+                    </form>
+
+                    <div styleName="button-change-password">
+                      <PrimaryButton
+                        theme={{ button: Style.button }}
+                        disabled={!passwordValid || !rePasswordValid || updatingPassword}
+                        onClick={this.onUpdatePassword}
+                      >
+                        { !updatingPassword && 'Change Password' }
+                        { updatingPassword && <i className="fa fa-spinner fa-spin" /> }
+                      </PrimaryButton>
+                    </div>
+                  </React.Fragment>
+                  )
+                }
+                {
+                  profileState.credential && profileState.credential.hasPassword === false
+                  && (
+                    <div styleName="sso-text">
+                      <p>
+                        You joined Topcoder by using an external account,
+                        so we don&#39;t have a password for you.
+                      </p>
+                    </div>
+                  )
+                }
+                <Personalization {...this.props} />
+              </div>
+            </div>
+          </Collapse>
         </div>
-      </div>
+      </React.Fragment>
     );
   }
 }
 
+
 MyAccount.propTypes = {
   tokenV3: PT.string.isRequired,
   handle: PT.string.isRequired,
diff --git a/src/shared/components/Settings/Account/MyAccount/styles.scss b/src/shared/components/Settings/Account/MyAccount/styles.scss
index b16d848097..cc6afae006 100644
--- a/src/shared/components/Settings/Account/MyAccount/styles.scss
+++ b/src/shared/components/Settings/Account/MyAccount/styles.scss
@@ -1,4 +1,5 @@
 @import "../../style";
+@import "~styles/mixins";
 
 .hide {
   display: none;
@@ -42,19 +43,6 @@
       display: none;
     }
   }
-
-  .error-message {
-    @include roboto-medium;
-
-    display: block;
-    border-radius: 5px;
-    background-color: $tc-red-10;
-    color: $tc-red-110;
-    font-size: 15px;
-    padding: 15px;
-    margin: 15px 0;
-    line-height: 20px;
-  }
 }
 
 .form-container-default {
@@ -357,6 +345,132 @@
   }
 }
 
+.form-container {
+  padding: $pad-xxxxl;
+  background-color: $color-tc-white;
+  border-radius: 4px;
+  margin: $margin-sm 0 0;
+
+  .password-form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .account-form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .error-message {
+    @include roboto-medium;
+
+    display: block;
+    border-radius: 5px;
+    background-color: $tc-red-10;
+    color: $tc-red-110;
+    font-size: 15px;
+    padding: 15px;
+    margin: 6px 0;
+    line-height: 20px;
+  }
+}
+
+.form-title {
+  @include barlow-semi-bold;
+
+  font-size: 20px;
+  line-height: 22px;
+  color: inherit;
+  text-transform: uppercase;
+  padding-bottom: $pad-xxxxl;
+}
+
+.form-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.form-label {
+  flex: 0 0 calc(50% - 13px);
+  padding-right: 230px;
+
+  @include roboto-regular;
+
+  font-size: 16px;
+  line-height: 26px;
+  color: inherit;
+}
+
+.form-body {
+  flex: 0 0 calc(50% + 13px);
+}
+
+.button-change-password {
+  margin-bottom: 16px;
+
+  .button {
+    @include roboto-bold;
+
+    padding: 12px 24px;
+    background: $tc-white;
+    border: 2px solid $color-black-5;
+    border-radius: 50px;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.008em;
+    text-transform: uppercase;
+    color: $color-black-60;
+    height: 48px;
+    width: 207px;
+    margin: 0;
+
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none !important;
+      background: none !important;
+      border-color: $color-black-5;
+      color: $color-black-60;
+      box-shadow: none !important;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+}
+
+@include xs-to-md {
+  .form-container {
+    padding: $pad-xxl $pad-lg;
+  }
+
+  .form-title {
+    @include barlow-semi-bold;
+
+    font-size: 20px;
+    line-height: 22px;
+    padding-bottom: $pad-xxl;
+  }
+
+  .form-label {
+    flex: 1 1 100%;
+    padding: 0;
+    margin-bottom: $margin-xxl;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .form-body {
+    flex: 1 1 100%;
+  }
+
+  .form-footer {
+    margin: 0;
+  }
+}
+
 .button-change-email {
   margin-left: auto;
   margin-right: auto;
@@ -471,36 +585,6 @@
   }
 }
 
-.button-change-password {
-  margin-left: auto;
-  margin-right: auto;
-
-  div:first-child {
-    height: 40px;
-    margin: 0;
-    padding-right: 15px;
-    padding-left: 15px;
-  }
-
-  button,
-  a {
-    @include roboto-medium;
-
-    height: 40px;
-    font-size: 15px;
-    font-weight: 500;
-    margin: 0;
-    padding: 0;
-    min-width: 155px;
-    white-space: nowrap;
-  }
-
-  .white-label {
-    color: $tc-white;
-    margin: 0;
-  }
-}
-
 $tips-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.2);
 $tips-background: $tc-gray-neutral-light;
 
@@ -541,9 +625,11 @@ $tips-background: $tc-gray-neutral-light;
   }
 
   p {
-    @include merriweather-sans-regular;
+    // @include merriweather-sans-regular;
+    @include roboto-medium;
 
     color: $tc-gray-90;
+    font-weight: 400;
     font-size: 13px;
     line-height: 1.3;
     padding-bottom: 10px;
@@ -692,3 +778,18 @@ $tips-background: $tc-gray-neutral-light;
     min-height: 256px;
   }
 }
+
+.sso-text {
+  p {
+    @include roboto-regular;
+
+    margin: 12px 0;
+    font-size: 16px;
+    line-height: 26px;
+    color: inherit;
+
+    @include xs-to-md {
+      font-size: 14px;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/Account/index.jsx b/src/shared/components/Settings/Account/index.jsx
index 003f736c75..e772b96a9f 100644
--- a/src/shared/components/Settings/Account/index.jsx
+++ b/src/shared/components/Settings/Account/index.jsx
@@ -1,130 +1,97 @@
-/**
- * Child component of Settings/Account renders setting page for account.
- */
-/* eslint-disable no-undef */
+/* eslint-disable prefer-destructuring */
 import React from 'react';
 import PT from 'prop-types';
-import _ from 'lodash';
-
-import Accordion from 'components/Settings/Accordion';
-import MyAccountIcon from 'assets/images/account/sideicons/myaccount.svg';
-// import LinkedAccountIcon from 'assets/images/account/sideicons/linkedaccount.svg';
-import ErrorWrapper from 'components/Settings/ErrorWrapper';
-import SideBar from '../SideBar';
-import ComingSoon from '../ComingSoon';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
 import MyAccount from './MyAccount';
-// import LinkedAccount from './LinkedAccount';
-import { SCREEN_SIZE } from '../constants';
-import './styles.scss';
+import ErrorWrapper from '../ErrorWrapper';
+
+import styles from './styles.scss';
 
 export default class Account extends React.Component {
   constructor(props) {
     super(props);
-    const hash = decodeURIComponent(_.get(props, 'location.hash', '').substring(1));
-    this.tablink = hash.replace('-', ' ');
-    const { toggleAccountSideTab } = this.props;
-    if (this.tablink) {
-      toggleAccountSideTab(this.tablink);
-    }
-    this.state = {
-      isMobileView: false,
-    };
-    this.clearNotifiation = this.clearNotifiation.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
+    this.save = this.save.bind(this);
+    this.myAccountRef = React.createRef();
   }
 
-  componentDidMount() {
-    this.clearNotifiation();
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
+  componentWillReceiveProps() {
+    const { isSaving, setIsSaving } = this.props;
+    if (isSaving) {
+      setIsSaving(false);
+    }
   }
 
-  componentDidUpdate(prevProps) {
-    const { settingsUI: { currentAccountTab } } = this.props;
-    if (prevProps.settingsUI.currentAccountTab !== currentAccountTab) {
-      window.location.hash = currentAccountTab.replace(' ', '-');
-      this.clearNotifiation();
+  save() {
+    const { isSaving, setIsSaving } = this.props;
+    if (isSaving) {
+      return;
     }
-  }
+    const {
+      newPassword,
+      currentPassword,
+      reNewPassword,
+      passwordValid,
+      rePasswordValid,
+      updatingPassword,
+    } = this.myAccountRef.current.state;
 
-  componentWillUnmount() {
-    this.clearNotifiation();
-    window.removeEventListener('resize', this.updatePredicate);
-  }
+    const newAccountDirty = newPassword !== ''
+      && currentPassword !== ''
+      && reNewPassword !== '';
+
+    let valid = true;
+    let dirty;
 
-  clearNotifiation() {
-    const { clearToastrNotification } = this.props;
-    if (clearToastrNotification) {
-      clearToastrNotification();
+    if (newAccountDirty) {
+      valid = valid && (passwordValid && rePasswordValid && !updatingPassword);
+      dirty = true;
     }
-  }
 
-  updatePredicate() {
-    this.setState({ isMobileView: window.innerWidth <= SCREEN_SIZE.SM });
+    if (dirty && valid) {
+      this.myAccountRef.current.onUpdatePassword();
+      setIsSaving(true);
+    }
   }
 
   render() {
-    const {
-      settingsUI,
-      toggleAccountSideTab,
-    } = this.props;
-    const { isMobileView } = this.state;
-    const tabs = settingsUI.TABS.ACCOUNT;
-    const names = Object.keys(tabs).map(key => tabs[key]);
-    const currentTab = this.tablink || settingsUI.currentAccountTab;
-    const icons = {
-      'my account': <MyAccountIcon />,
-      // 'linked accounts': <LinkedAccountIcon />,
-    };
-    const renderTabContent = (tab) => {
-      switch (tab) {
-        case 'my account':
-          return <MyAccount {...this.props} />;
-        // case 'linked accounts':
-        //   return <LinkedAccount {...this.props} />;
-        default:
-          return <ComingSoon />;
-      }
-    };
+    const { isSaving } = this.props;
+
+    const saveBtn = (
+      <PrimaryButton
+        onClick={this.save}
+        theme={{
+          button: `${styles['save-changes-btn']} ${isSaving ? styles.disabled : ''}`,
+        }}
+        disabled={!!isSaving}
+      >
+        Save Changes
+      </PrimaryButton>
+    );
 
     return (
-      <div styleName="account-container">
-        {isMobileView && (
-          <div styleName="mobile-view">
-            <Accordion
-              icons={icons}
-              names={names}
-              currentSidebarTab={currentTab}
-              renderTabContent={renderTabContent}
-              toggleSidebarTab={toggleAccountSideTab}
-            />
+      <ErrorWrapper>
+        <div styleName="account-container">
+          <div styleName="header">
+            <h3>Account information & Security</h3>
           </div>
-        )}
-        <div styleName="col-bar">
-          <SideBar
-            icons={icons}
-            names={names}
-            currentTab={currentTab}
-            toggle={toggleAccountSideTab}
+          <MyAccount
+            {...this.props}
+            ref={this.myAccountRef}
           />
         </div>
-        {
-          !isMobileView && (
-          <div styleName="col-content">
-            <ErrorWrapper>
-              { renderTabContent(currentTab) }
-            </ErrorWrapper>
-          </div>
-          )
-        }
-      </div>
+        <div styleName="footer">{saveBtn}</div>
+      </ErrorWrapper>
     );
   }
 }
 
+Account.defaultProps = {
+  isSaving: false,
+  setIsSaving: () => {},
+};
+
 Account.propTypes = {
-  settingsUI: PT.shape().isRequired,
-  toggleAccountSideTab: PT.func.isRequired,
-  clearToastrNotification: PT.func.isRequired,
-  location: PT.shape().isRequired,
+  // userTraits: PT.array.isRequired,
+  isSaving: PT.bool,
+  setIsSaving: PT.func,
 };
diff --git a/src/shared/components/Settings/Account/styles.scss b/src/shared/components/Settings/Account/styles.scss
index 41006f3471..47a491d310 100644
--- a/src/shared/components/Settings/Account/styles.scss
+++ b/src/shared/components/Settings/Account/styles.scss
@@ -1,47 +1,76 @@
-@import "../style";
+@import '~styles/mixins';
 
 .account-container {
-  display: flex;
-  flex-direction: row;
-  align-content: space-between;
-  box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06);
+  background-color: $listing-filter-bg;
+  padding: $pad-xxxxl;
+  border-radius: 8px;
+  margin: 32px 0 32px;
+
+  @include xs-to-sm {
+    padding: $pad-lg;
+    margin: 24px 0 24px;
+  }
 
-  .mobile-view {
-    display: none;
+  .header {
+    margin: 0 0 40px;
 
-    @include from-sm-to-lg {
-      display: none;
+    @include xs-to-sm {
+      margin: 0 0 16px;
     }
 
-    @include upto-sm {
-      display: block;
-      width: 100%;
+    h3 {
+      @include barlow-bold;
+
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 22px;
+      color: $tco-black;
+      text-transform: uppercase;
+
+      @include xs-to-md {
+        @include barlow-condensed-semi-bold;
+
+        font-weight: 500;
+        font-size: 22px;
+        line-height: 24px;
+      }
     }
   }
 
-  .col-bar {
-    width: 250px;
-    background-color: #fafafb;
-    padding: 30px;
-    border-bottom-left-radius: 6px;
+  @include xs-to-md {
+    padding: 24px 16px;
+  }
+}
 
-    @include from-sm-to-lg {
-      width: 90px;
-      padding-right: 30px;
-      margin-right: 0;
-    }
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+
+  .save-changes-btn {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 50px !important;
+    background: #137d60 !important;
+    color: #fff !important;
+    text-transform: uppercase;
+    padding: 11px 23px;
+    margin: 0;
 
-    @include upto-sm {
-      display: none;
+    &.disabled {
+      opacity: 0.5;
     }
   }
 
-  .col-content {
-    flex: 1;
-    padding: 30px 80px;
+  @include xs-to-md {
+    padding: $pad-xxxxl 0 $pad-sm;
+    border-top: 2px solid $color-black-10;
 
-    @include upto-sm {
-      display: none;
+    .save-changes-btn {
+      font-size: 14px;
+      line-height: 20px;
     }
   }
 }
diff --git a/src/shared/components/Settings/FormField/index.jsx b/src/shared/components/Settings/FormField/index.jsx
index 28e92508bc..d81430842f 100644
--- a/src/shared/components/Settings/FormField/index.jsx
+++ b/src/shared/components/Settings/FormField/index.jsx
@@ -5,12 +5,15 @@
 */
 import React from 'react';
 import PT from 'prop-types';
+import cn from 'classnames';
 import './styles.scss';
 
-const FormField = ({ children, label = '', style }) => (
+const FormField = ({
+  children, label = '', disabled, style,
+}) => (
   <div styleName="form-field-wrapper" style={style}>
     <div styleName="form-field">
-      <div styleName="label" role="presentation">
+      <div styleName={cn('label', disabled ? 'disabled' : null)} role="presentation">
         {label}
       </div>
       {children}
@@ -21,12 +24,14 @@ const FormField = ({ children, label = '', style }) => (
 FormField.defaultProps = {
   label: '',
   children: null,
+  disabled: false,
   style: {},
 };
 
 FormField.propTypes = {
   label: PT.string,
   children: PT.node,
+  disabled: PT.bool,
   style: PT.object,
 };
 
diff --git a/src/shared/components/Settings/FormField/styles.scss b/src/shared/components/Settings/FormField/styles.scss
index f1ed9584bd..fd70027cfb 100644
--- a/src/shared/components/Settings/FormField/styles.scss
+++ b/src/shared/components/Settings/FormField/styles.scss
@@ -25,6 +25,10 @@
       left: 11px;
       color: $listing-checkbox-green;
       z-index: 1;
+
+      &.disabled {
+        color: $color-black-60;
+      }
     }
   }
 }
diff --git a/src/shared/components/Settings/FormInputText/index.jsx b/src/shared/components/Settings/FormInputText/index.jsx
index 3ebc2dcdb0..687e12cb02 100644
--- a/src/shared/components/Settings/FormInputText/index.jsx
+++ b/src/shared/components/Settings/FormInputText/index.jsx
@@ -8,23 +8,27 @@ import PT from 'prop-types';
 import cn from 'classnames';
 import './styles.scss';
 
-const FormInputText = ({ styleName, value, ...props }) => (
+const FormInputText = ({
+  styleName, value, type, ...props
+}) => (
   <input
-    type="text"
+    type={type}
     styleName={cn('form-input-text', styleName || '')}
     {...props}
-    value={value || ''}
+    value={value}
   />
 );
 
 FormInputText.defaultProps = {
   styleName: '',
-  value: '',
+  value: null,
+  type: 'text',
 };
 
 FormInputText.propTypes = {
   styleName: PT.string,
   value: PT.string,
+  type: PT.string,
 };
 
 export default FormInputText;
diff --git a/src/shared/components/Settings/FormInputText/styles.scss b/src/shared/components/Settings/FormInputText/styles.scss
index 2c57aa44ad..5c0cba94a7 100644
--- a/src/shared/components/Settings/FormInputText/styles.scss
+++ b/src/shared/components/Settings/FormInputText/styles.scss
@@ -22,4 +22,10 @@
   &:focus {
     box-shadow: none !important;
   }
+
+  &:disabled {
+    background: $color-black-10 !important;
+    border: 1px solid #aaa !important;
+    border-radius: 4px !important;
+  }
 }
diff --git a/src/shared/components/Settings/Preferences/Personalization/styles.scss b/src/shared/components/Settings/Preferences/Personalization/styles.scss
index 453cd96e3d..c3d5df9357 100644
--- a/src/shared/components/Settings/Preferences/Personalization/styles.scss
+++ b/src/shared/components/Settings/Preferences/Personalization/styles.scss
@@ -24,11 +24,10 @@
   }
 
   .user-consent-container {
-    border-top: 1px solid $tc-gray-neutral-dark;
-    min-height: 4px;
+    min-height: 100px;
 
-    @include upto-sm {
-      min-height: 1px;
-    }
+    // @include upto-sm {
+    //   min-height: 1px;
+    // }
   }
 }
diff --git a/src/shared/components/Settings/ToggleableItem/styles.scss b/src/shared/components/Settings/ToggleableItem/styles.scss
index d5c493eae4..ef9071259c 100644
--- a/src/shared/components/Settings/ToggleableItem/styles.scss
+++ b/src/shared/components/Settings/ToggleableItem/styles.scss
@@ -5,9 +5,10 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  border: 1px solid $tc-gray-neutral-dark;
-  border-top: 0;
-  padding: 20px;
+  padding: $pad-lg;
+  background: $tc-white;
+  border: 1px solid $color-black-20;
+  border-radius: 8px;
 
   .body {
     display: flex;
@@ -18,34 +19,25 @@
   p.primary {
     @include roboto-bold;
 
-    color: $tc-black;
-    font-size: 15px;
-    font-weight: 700;
+    font-size: 16px;
     line-height: 20px;
-    margin-bottom: 10px;
-
-    @include upto-sm {
-      @include roboto-medium;
-
-      font-weight: 500;
-      margin-bottom: 0;
-    }
+    letter-spacing: 0.5px;
+    text-transform: capitalize;
+    color: $tco-black;
   }
 
   p.secondary {
     @include roboto-medium;
 
-    color: $tc-gray-50;
-    font-size: 15px;
     font-weight: 400;
-    line-height: 20px;
-
-    @include upto-sm {
-      font-size: 11px;
-    }
+    font-size: 16px;
+    line-height: 24px;
+    color: $color-black-60;
   }
 
   .onoffswitch-no-padding-right {
     margin-right: 0;
+    position: relative;
+    bottom: 15px;
   }
 }
diff --git a/src/shared/components/Settings/constants.js b/src/shared/components/Settings/constants.js
index aa18ca8bdc..35074ee326 100644
--- a/src/shared/components/Settings/constants.js
+++ b/src/shared/components/Settings/constants.js
@@ -10,7 +10,7 @@ export const SETTINGS_TABS = [
   { title: 'Experience & Skills', link: TABS.SKILLS },
   { title: 'Topcoder & You', link: TABS.TRACKS },
   { title: 'Tools', link: TABS.TOOLS },
-  { title: 'Account', link: TABS.ACCOUNTS },
+  { title: 'Account', link: TABS.ACCOUNT },
   { title: 'Preferences', link: TABS.PREFERENCES },
 ];
 
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index bf11cfc521..845972f818 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -40,6 +40,7 @@ export default function Settings(props) {
   const tracksRef = React.useRef();
   const experienceAndSkillsRef = React.useRef();
   const toolsRef = React.useRef();
+  const accountRef = React.useRef();
 
   const [isSaving, setIsSaving] = useState(false);
 
@@ -62,6 +63,8 @@ export default function Settings(props) {
               experienceAndSkillsRef.current.save();
             } else if (newProps.settingsTab === TABS.TOOLS) {
               toolsRef.current.save();
+            } else if (newProps.settingsTab === TABS.ACCOUNT) {
+              accountRef.current.save();
             }
           }}
           isSaving={isSaving}
@@ -112,10 +115,13 @@ export default function Settings(props) {
           )
         }
         {
-          newProps.settingsTab === TABS.ACCOUNTS
+          newProps.settingsTab === TABS.ACCOUNT
           && (
             <Account
+              ref={accountRef}
               {...newProps}
+              isSaving={isSaving}
+              setIsSaving={setIsSaving}
             />
           )
         }
diff --git a/src/shared/routes/Settings/Router.jsx b/src/shared/routes/Settings/Router.jsx
index a1766e5a92..125a0e0aea 100644
--- a/src/shared/routes/Settings/Router.jsx
+++ b/src/shared/routes/Settings/Router.jsx
@@ -16,7 +16,7 @@ import Error404 from 'components/Error404';
 export default function Router({ base }) {
   return (
     <Switch>
-      <Route component={Settings} exact path={`${base}/:settingsTab(profile|skills|tracks|tools|accounts|preferences)`} />
+      <Route component={Settings} exact path={`${base}/:settingsTab(profile|skills|tracks|tools|account|preferences)`} />
       <Route component={EmailVerification} exact path={`${base}/account/changeEmail`} />
       <Route component={Success} exact path={`${base}/account/email-verification/success`} />
       <Route component={Failed} exact path={`${base}/account/email-verification/failure`} />

From d3bdec37c07fb35c3f54330cd9b5e5b46e887992 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Tue, 2 Aug 2022 22:30:46 +0700
Subject: [PATCH 08/49] improvement: inconsistencies label & placeholder

---
 .../Settings/ProfileSettings/AboutYou/index.jsx           | 2 +-
 .../components/Settings/ProfileSettings/Hobbies/index.jsx | 4 ++--
 .../Settings/ProfileSettings/Learning/index.jsx           | 8 ++++----
 .../Settings/ProfileSettings/PersonalDetails/index.jsx    | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
index 0f1cb73788..cea362d266 100644
--- a/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
@@ -29,7 +29,7 @@ const AboutYou = (props) => {
               id="currentLocation"
               name="currentLocation"
               type="text"
-              placeholder="Where in the world are you currently?"
+              placeholder="Where in the world are you?"
               onChange={onUpdateInput}
               value={newBasicInfo.currentLocation}
               maxLength="64"
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
index 9afbbdfc28..06a820f8fe 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
@@ -37,7 +37,7 @@ const Hobbies = (props) => {
               id="hobby"
               name="hobby"
               type="text"
-              placeholder="Hobby"
+              placeholder="Type here your hobbies"
               onChange={onUpdateInput}
               value={newHobby.hobby}
               maxLength="128"
@@ -57,7 +57,7 @@ const Hobbies = (props) => {
               id="description"
               name="description"
               type="text"
-              placeholder="Description"
+              placeholder="Shot description about your hobby"
               onChange={onUpdateInput}
               value={newHobby.description}
               maxLength="160"
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
index 7983d442c4..b7cdd3d7b7 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
@@ -72,12 +72,12 @@ const Learning = (props) => {
 
           <div styleName="date-wrapper">
             {/* Start Date */}
-            <FormField label="Degree">
+            <FormField label="Start Date">
 
               <FormInputDatePicker
                 readOnly
                 displayFormat="MM/DD/YYYY"
-                placeholder="MM/DD/YYYY"
+                placeholder="Select Start Date"
                 isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
                 value={newEducation.timePeriodFrom}
                 id="date-from1"
@@ -100,7 +100,7 @@ const Learning = (props) => {
                     <FormInputDatePicker
                       readOnly
                       displayFormat="MM/DD/YYYY"
-                      placeholder="MM/DD/YYYY"
+                      placeholder="Select End Date"
                       isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
                       value={newEducation.timePeriodTo}
                       id="date-to1"
@@ -110,7 +110,7 @@ const Learning = (props) => {
                     <FormInputDatePicker
                       readOnly
                       displayFormat="MM/DD/YYYY"
-                      placeholder="MM/DD/YYYY"
+                      placeholder="Select End Date"
                       value={newEducation.timePeriodTo}
                       isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
                       id="date-to1"
diff --git a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
index c7196e01c2..fc833fe413 100644
--- a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
@@ -172,7 +172,7 @@ const PersonalDetails = (props) => {
           </FormField>
 
           {/* Zip */}
-          <FormField label="ZIP">
+          <FormField label="Zip/Postal Code">
             <FormInputText
               disabled={!canModifyTrait}
               id="zipCode"

From a9019e4d3edecfa8cb030a612967aded6836f99d Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 3 Aug 2022 16:26:24 +0700
Subject: [PATCH 09/49] ci: set reskin-profile-settings to qa

---
 .circleci/config.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 59e4acd705..a1bd9143af 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -349,7 +349,7 @@ workflows:
           filters:
             branches:
               only:
-                - reskin-profile
+                - free
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global
@@ -370,7 +370,7 @@ workflows:
           filters:
             branches:
               only:
-                - reskin-profile
+                - free
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global

From f09810b638404612456b7c0d76e815f2b46c8c1b Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 3 Aug 2022 20:05:49 +0700
Subject: [PATCH 10/49] fix: hobbies & not education not saved

---
 .../Settings/ProfileSettings/index.jsx        | 25 +++++++++++++------
 src/shared/components/Settings/index.jsx      |  2 +-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
index 56f3ce5561..83ea115836 100644
--- a/src/shared/components/Settings/ProfileSettings/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -249,16 +249,27 @@ class ProfileSettings extends ConsentComponent {
    * @param {*} e event
    */
   onHandleSaveBasicInfo(e) {
-    e.preventDefault();
+    if (e) e.preventDefault();
     const { setIsSaving } = this.props;
-    this.setState({ inputChange: true });
+    this.setState({ inputChange: true, isSubmit: true, isSubmitHobby: true });
     setIsSaving(true);
-    const { newBasicInfo, newProfileInfo } = this.state;
-    if (this.onCheckFormValue(newBasicInfo, newProfileInfo)) {
+    const {
+      newBasicInfo, newProfileInfo, newEducation, newHobby,
+    } = this.state;
+
+    if (!this.onCheckEducationFormValue(newEducation)) {
+      this.showConsent(this.onAddEducation.bind(this));
+    }
+
+    if (!this.onCheckFormValueHobby(newHobby)) {
+      this.showConsent(this.onAddHobby.bind(this));
+    }
+
+    if (!this.onCheckFormValue(newBasicInfo, newProfileInfo)) {
+      this.showConsent(this.onSaveBasicInfo.bind(this));
+    } else {
       setIsSaving(false);
-      return;
     }
-    this.showConsent(this.onSaveBasicInfo.bind(this));
   }
 
   /**
@@ -742,7 +753,7 @@ class ProfileSettings extends ConsentComponent {
    * @param e event
    */
   onHandleAddEducation(e) {
-    e.preventDefault();
+    if (e) e.preventDefault();
     const { newEducation } = this.state;
     this.setState({ isSubmit: true });
     if (this.onCheckEducationFormValue(newEducation)) {
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index 845972f818..94b9c76384 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -58,7 +58,7 @@ export default function Settings(props) {
             if (newProps.settingsTab === TABS.TRACKS) {
               tracksRef.current.onSaveTopcoderAndYou();
             } else if (newProps.settingsTab === TABS.PROFILE) {
-              profileRef.current.onSaveBasicInfo();
+              profileRef.current.onHandleSaveBasicInfo();
             } else if (newProps.settingsTab === TABS.SKILLS) {
               experienceAndSkillsRef.current.save();
             } else if (newProps.settingsTab === TABS.TOOLS) {

From 03b27dfbcb38ef9c74ebfae5a80bd38d22aa658d Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 3 Aug 2022 20:19:56 +0700
Subject: [PATCH 11/49] fix: datepicker style issues

---
 .../images/preferences/arrow-circle-left.svg      |  3 +++
 .../images/preferences/arrow-circle-right.svg     |  3 +++
 src/shared/components/GUIKit/Datepicker/index.jsx | 10 ++++++++--
 .../Settings/FormInputDatePicker/index.jsx        | 11 ++++++++++-
 .../Settings/FormInputDatePicker/styles.scss      | 15 +++++++++++++++
 .../components/Settings/ProfileSettings/index.jsx | 10 ++++------
 6 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/images/preferences/arrow-circle-left.svg
 create mode 100644 src/assets/images/preferences/arrow-circle-right.svg

diff --git a/src/assets/images/preferences/arrow-circle-left.svg b/src/assets/images/preferences/arrow-circle-left.svg
new file mode 100644
index 0000000000..1802c20a23
--- /dev/null
+++ b/src/assets/images/preferences/arrow-circle-left.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9998 3.33341C8.1088 3.33341 3.33317 8.10904 3.33317 14.0001C3.33317 19.8911 8.1088 24.6667 13.9998 24.6667C19.8909 24.6667 24.6665 19.8911 24.6665 14.0001C24.6665 8.10904 19.8909 3.33342 13.9998 3.33341ZM0.666504 14.0001C0.666505 6.63628 6.63604 0.666747 13.9998 0.666748C21.3636 0.666749 27.3332 6.63629 27.3332 14.0001C27.3332 21.3639 21.3636 27.3334 13.9998 27.3334C6.63604 27.3334 0.666503 21.3639 0.666504 14.0001ZM13.6093 9.05727C14.13 9.57797 14.13 10.4222 13.6093 10.9429L11.8855 12.6667L19.3332 12.6667C20.0695 12.6667 20.6665 13.2637 20.6665 14.0001C20.6665 14.7365 20.0695 15.3334 19.3332 15.3334L11.8855 15.3334L13.6093 17.0573C14.13 17.578 14.13 18.4222 13.6093 18.9429C13.0886 19.4636 12.2444 19.4636 11.7237 18.9429L7.72369 14.9429C7.203 14.4222 7.203 13.578 7.72369 13.0573L11.7237 9.05727C12.2444 8.53657 13.0886 8.53657 13.6093 9.05727Z" fill="#137D60"/>
+</svg>
diff --git a/src/assets/images/preferences/arrow-circle-right.svg b/src/assets/images/preferences/arrow-circle-right.svg
new file mode 100644
index 0000000000..bb88b731c8
--- /dev/null
+++ b/src/assets/images/preferences/arrow-circle-right.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3.33335C8.10898 3.33335 3.33335 8.10898 3.33335 14C3.33335 19.8911 8.10898 24.6667 14 24.6667C19.8911 24.6667 24.6667 19.8911 24.6667 14C24.6667 8.10898 19.8911 3.33335 14 3.33335ZM0.666687 14C0.666687 6.63622 6.63622 0.666687 14 0.666687C21.3638 0.666687 27.3334 6.63622 27.3334 14C27.3334 21.3638 21.3638 27.3334 14 27.3334C6.63622 27.3334 0.666687 21.3638 0.666687 14ZM14.3905 9.05721C14.9112 8.53651 15.7555 8.53651 16.2762 9.05721L20.2762 13.0572C20.7969 13.5779 20.7969 14.4221 20.2762 14.9428L16.2762 18.9428C15.7555 19.4635 14.9112 19.4635 14.3905 18.9428C13.8698 18.4221 13.8698 17.5779 14.3905 17.0572L16.1144 15.3334L8.66669 15.3334C7.93031 15.3334 7.33335 14.7364 7.33335 14C7.33335 13.2636 7.93031 12.6667 8.66669 12.6667L16.1144 12.6667L14.3905 10.9428C13.8698 10.4221 13.8698 9.57791 14.3905 9.05721Z" fill="#137D60"/>
+</svg>
diff --git a/src/shared/components/GUIKit/Datepicker/index.jsx b/src/shared/components/GUIKit/Datepicker/index.jsx
index 83605fac04..5f4cc23ff6 100644
--- a/src/shared/components/GUIKit/Datepicker/index.jsx
+++ b/src/shared/components/GUIKit/Datepicker/index.jsx
@@ -39,6 +39,8 @@ function Datepicker({
   renderCalendarInfo,
   className,
   anchorDirection,
+  navPrev,
+  navNext,
 }) {
   const sizeStyle = size === 'lg' ? 'lgSize' : 'xsSize';
   const [date, setDate] = useState(value ? moment(value) : null);
@@ -69,8 +71,8 @@ function Datepicker({
         placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
         inputIconPosition="after"
         numberOfMonths={1}
-        navPrev={<IconPrev />}
-        navNext={<IconNext />}
+        navPrev={navPrev}
+        navNext={navNext}
         displayFormat={displayFormat}
         daySize={width > 600 ? 47 : 35}
         renderDayContents={d => (<div>{d.date ? d.date() : ''}</div>)}
@@ -119,6 +121,8 @@ Datepicker.defaultProps = {
   renderCalendarInfo: null,
   anchorDirection: 'left',
   className: '',
+  navPrev: <IconPrev />,
+  navNext: <IconNext />,
 };
 
 Datepicker.propTypes = {
@@ -142,6 +146,8 @@ Datepicker.propTypes = {
   renderCalendarInfo: PT.func,
   anchorDirection: PT.oneOf(['left', 'right']),
   className: PT.string,
+  navPrev: PT.node,
+  navNext: PT.node,
 };
 
 export default Datepicker;
diff --git a/src/shared/components/Settings/FormInputDatePicker/index.jsx b/src/shared/components/Settings/FormInputDatePicker/index.jsx
index 9ec1bece99..d25d5ee38a 100644
--- a/src/shared/components/Settings/FormInputDatePicker/index.jsx
+++ b/src/shared/components/Settings/FormInputDatePicker/index.jsx
@@ -4,6 +4,9 @@ import PT from 'prop-types';
 import moment from 'moment';
 import ReactSelect from 'react-select';
 import DatePicker from 'components/GUIKit/Datepicker';
+import PrevIcon from 'assets/images/preferences/arrow-circle-left.svg';
+import NextIcon from 'assets/images/preferences/arrow-circle-right.svg';
+import DropdownArrow from 'assets/images/dropdown-arrow.svg';
 import styles from './styles.scss';
 
 const renderResetButton = props => (
@@ -36,7 +39,7 @@ const renderDatePickerMonthElement = ({ month, onMonthSelect, onYearSelect }) =>
   for (let year = moment().year(), i = year; i > year - 99; i -= 1) {
     yearOptions.push({ value: i, label: `${i}` });
   }
-
+  const customArrow = () => <DropdownArrow />;
   return (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
       <div>
@@ -51,6 +54,8 @@ const renderDatePickerMonthElement = ({ month, onMonthSelect, onYearSelect }) =>
           autosize={false}
           searchable={false}
           autoBlur={false}
+          arrowRenderer={customArrow}
+          className={styles.dateSelect}
         />
       </div>
       <div>
@@ -65,6 +70,8 @@ const renderDatePickerMonthElement = ({ month, onMonthSelect, onYearSelect }) =>
           autosize={false}
           searchable={false}
           autoBlur={false}
+          arrowRenderer={customArrow}
+          className={styles.dateSelect}
         />
       </div>
     </div>
@@ -88,6 +95,8 @@ export default function FormInputDatePicker(props) {
       renderCalendarInfo={() => renderResetButton(props)}
       renderMonthElement={renderDatePickerMonthElement}
       className={styles.formInputDatePicker}
+      navPrev={<PrevIcon className={styles.navigationIcon} />}
+      navNext={<NextIcon className={styles.navigationIcon} />}
     />
   );
 }
diff --git a/src/shared/components/Settings/FormInputDatePicker/styles.scss b/src/shared/components/Settings/FormInputDatePicker/styles.scss
index ccdc0b80bc..fb36aa79ec 100644
--- a/src/shared/components/Settings/FormInputDatePicker/styles.scss
+++ b/src/shared/components/Settings/FormInputDatePicker/styles.scss
@@ -87,6 +87,12 @@
             align-items: center;
             justify-content: flex-end;
             padding-right: 25px;
+
+            .Select-value-label {
+              @include roboto-medium;
+
+              font-size: 16px;
+            }
           }
         }
 
@@ -130,6 +136,10 @@
       }
     }
 
+    .CalendarDay__today {
+      font-weight: 700;
+    }
+
     .reset-btn-container {
       padding: 16px 0 15px;
       margin: 0 15px;
@@ -148,4 +158,9 @@
       }
     }
   }
+
+  .navigationIcon {
+    height: 26px;
+    width: 26px;
+  }
 }
diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
index 83ea115836..aafce66e84 100644
--- a/src/shared/components/Settings/ProfileSettings/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -392,12 +392,10 @@ class ProfileSettings extends ConsentComponent {
   }
 
   onUpdateDate(date) {
-    if (date) {
-      const { newBasicInfo: oldBasicInfo } = this.state;
-      const newBasicInfo = { ...oldBasicInfo };
-      newBasicInfo.birthDate = date;
-      this.setState({ newBasicInfo, inputChanged: true });
-    }
+    const { newBasicInfo: oldBasicInfo } = this.state;
+    const newBasicInfo = { ...oldBasicInfo };
+    newBasicInfo.birthDate = date;
+    this.setState({ newBasicInfo, inputChanged: true });
   }
 
   onUpdateCountry(country) {

From f3e38ad3c5357cdc4418c3df1d79629bf72c8cca Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 3 Aug 2022 20:33:42 +0700
Subject: [PATCH 12/49] fix: multiple toaster

---
 src/shared/reducers/page/settings.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/shared/reducers/page/settings.js b/src/shared/reducers/page/settings.js
index 453cc64add..f1b0d48ed2 100644
--- a/src/shared/reducers/page/settings.js
+++ b/src/shared/reducers/page/settings.js
@@ -22,6 +22,22 @@ function onClearToastrNotification() {
   });
 }
 
+let updateSkillsTimeout;
+// Debounce the toastr to group notifications
+function updateSkillsToastr(title, message) {
+  if (updateSkillsTimeout) {
+    clearTimeout(updateSkillsTimeout);
+  }
+  const isFirstCall = !updateSkillsTimeout;
+  updateSkillsTimeout = setTimeout(() => {
+    if (isFirstCall) {
+      toastr.success(title, message);
+    } else {
+      toastr.success('Your skills have been updated');
+    }
+    updateSkillsTimeout = null;
+  }, 3000);
+}
 
 function mergeSkills(state, { type, payload, error }) {
   if (error) {
@@ -87,12 +103,12 @@ function mergeSkills(state, { type, payload, error }) {
     if (payload.skill) {
       addedSkillName = payload.skill.name;
     }
-    toastrSuccess('Success! ', `Skill "${addedSkillName}" was added.`);
+    updateSkillsToastr('Success! ', `Skill "${addedSkillName}" was added.`);
   } else if (type === 'PROFILE/HIDE_SKILL_DONE') {
     if (payload.skill) {
       removedSkillName = payload.skill.name;
     }
-    toastrSuccess('Success! ', `Skill "${removedSkillName}" was removed.`);
+    updateSkillsToastr('Success! ', `Skill "${removedSkillName}" was removed.`);
   }
 
   return {

From 6058aa74a142e1ad5af07de6d75dfaf0deaeee98 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 3 Aug 2022 22:05:37 +0700
Subject: [PATCH 13/49] fix: remove primary interest

---
 .../Settings/ProfileSettings/AboutYou/index.jsx   | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
index cea362d266..b7e3251559 100644
--- a/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
@@ -37,21 +37,6 @@ const AboutYou = (props) => {
             />
           </FormField>
 
-          {/* Primary interests */}
-          <FormField label="Primary interests">
-            <FormInputText
-              disabled={!canModifyTrait}
-              id="primaryInterestInTopcoder"
-              name="primaryInterestInTopcoder"
-              type="text"
-              placeholder="Primary Interest In Topcoder"
-              onChange={onUpdateInput}
-              value={newBasicInfo.primaryInterestInTopcoder}
-              maxLength="64"
-              required
-            />
-          </FormField>
-
           {/* Primary interests */}
           <FormField label="Short bio">
             <FormInputTextArea

From c0d637c02731280d86d1e94224caf7cb66b960a3 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 3 Aug 2022 22:09:11 +0700
Subject: [PATCH 14/49] fix: about you description

---
 src/shared/components/Settings/constants.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/Settings/constants.js b/src/shared/components/Settings/constants.js
index 35074ee326..ef912b9e04 100644
--- a/src/shared/components/Settings/constants.js
+++ b/src/shared/components/Settings/constants.js
@@ -23,7 +23,7 @@ export const PROFILE_SETTINGS = {
   aboutYou: {
     title: 'About You',
     description:
-      'Let customers know the langagues you speak. Multilingual? Magnifique.',
+      'Enter a short bio to help potential customers know you.',
   },
   learningAndEducations: {
     title: 'Learning & Education',

From 5b5c1af1eb8f5b0d83214ae720907894a6c29085 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 3 Aug 2022 22:32:21 +0700
Subject: [PATCH 15/49] fix: end date validation

---
 .../components/Settings/ProfileSettings/index.jsx     | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
index aafce66e84..d8d70acbc3 100644
--- a/src/shared/components/Settings/ProfileSettings/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -257,6 +257,17 @@ class ProfileSettings extends ConsentComponent {
       newBasicInfo, newProfileInfo, newEducation, newHobby,
     } = this.state;
 
+    if (!_.isEmpty(newEducation.timePeriodFrom)
+      && !_.isEmpty(newEducation.timePeriodTo)
+      && _.trim(newEducation.schoolCollegeName).length
+    ) {
+      this.setState({ isSubmit: true });
+      if (this.onCheckEducationFormValue(newEducation)) {
+        setIsSaving(false);
+        return;
+      }
+    }
+
     if (!this.onCheckEducationFormValue(newEducation)) {
       this.showConsent(this.onAddEducation.bind(this));
     }

From 8a13d112b60d5679f64ec7bc413a4adcd8b83564 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Wed, 3 Aug 2022 22:47:37 +0700
Subject: [PATCH 16/49] fix: save changes button size

---
 .../components/Settings/Header/styles.scss    |  7 +++-
 .../Settings/ProfileSettings/index.jsx        |  2 +-
 .../Settings/ProfileSettings/styles.scss      | 40 +++++++++++++------
 .../Settings/TopcoderAndYou/index.jsx         |  2 +-
 .../Settings/TopcoderAndYou/styles.scss       | 40 +++++++++++++------
 5 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/src/shared/components/Settings/Header/styles.scss b/src/shared/components/Settings/Header/styles.scss
index 859707fef6..8d6eac0978 100644
--- a/src/shared/components/Settings/Header/styles.scss
+++ b/src/shared/components/Settings/Header/styles.scss
@@ -31,8 +31,13 @@
     border-radius: 50px !important;
     background: #137d60 !important;
     color: #fff !important;
-    height: 48px;
+    text-transform: uppercase;
+    padding: 11px 23px;
     margin: 0;
+
+    &.disabled {
+      opacity: 0.5;
+    }
   }
 
   @include xs-to-md {
diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
index d8d70acbc3..afcbb20490 100644
--- a/src/shared/components/Settings/ProfileSettings/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -1157,7 +1157,7 @@ class ProfileSettings extends ConsentComponent {
             />
           </SettingsBanner>
         </div>
-        <div styleName="button-save">
+        <div styleName="footer">
           <PrimaryButton
             disabled={!canModifyTrait}
             onClick={this.onHandleSaveBasicInfo}
diff --git a/src/shared/components/Settings/ProfileSettings/styles.scss b/src/shared/components/Settings/ProfileSettings/styles.scss
index 3968d233f9..bbb7297837 100644
--- a/src/shared/components/Settings/ProfileSettings/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/styles.scss
@@ -10,20 +10,36 @@
   }
 }
 
-.save-changes-btn {
-  @include roboto-bold;
-
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 24px;
-  border-radius: 50px !important;
-  background: #137d60 !important;
-  color: #fff !important;
-  text-transform: uppercase;
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+
+  .save-changes-btn {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 50px !important;
+    background: #137d60 !important;
+    color: #fff !important;
+    text-transform: uppercase;
+    padding: 11px 23px;
+    margin: 0;
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
 
   @include xs-to-md {
-    font-size: 14px;
-    line-height: 20px;
+    padding: $pad-xxxxl 0 $pad-sm;
+    border-top: 2px solid $color-black-10;
+
+    .save-changes-btn {
+      font-size: 14px;
+      line-height: 20px;
+    }
   }
 }
 
diff --git a/src/shared/components/Settings/TopcoderAndYou/index.jsx b/src/shared/components/Settings/TopcoderAndYou/index.jsx
index 4123e538b5..fd47ed657f 100644
--- a/src/shared/components/Settings/TopcoderAndYou/index.jsx
+++ b/src/shared/components/Settings/TopcoderAndYou/index.jsx
@@ -453,7 +453,7 @@ class TopcoderAndYou extends ConsentComponent {
             />
           </SettingsBanner>
         </div>
-        <div styleName="button-save">
+        <div styleName="footer">
           <PrimaryButton
             onClick={this.onHandleSaveTopcoderAndYou}
             theme={{
diff --git a/src/shared/components/Settings/TopcoderAndYou/styles.scss b/src/shared/components/Settings/TopcoderAndYou/styles.scss
index 83fcc8a168..597106c19d 100644
--- a/src/shared/components/Settings/TopcoderAndYou/styles.scss
+++ b/src/shared/components/Settings/TopcoderAndYou/styles.scss
@@ -1,20 +1,36 @@
 @import "~styles/mixins";
 @import "../style.scss";
 
-.save-changes-btn {
-  @include roboto-bold;
-
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 24px;
-  border-radius: 50px !important;
-  background: #137d60 !important;
-  color: #fff !important;
-  text-transform: uppercase;
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+
+  .save-changes-btn {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 50px !important;
+    background: #137d60 !important;
+    color: #fff !important;
+    text-transform: uppercase;
+    padding: 11px 23px;
+    margin: 0;
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
 
   @include xs-to-md {
-    font-size: 14px;
-    line-height: 20px;
+    padding: $pad-xxxxl 0 $pad-sm;
+    border-top: 2px solid $color-black-10;
+
+    .save-changes-btn {
+      font-size: 14px;
+      line-height: 20px;
+    }
   }
 }
 

From c47c2a96c4e0b313d3168219686084a592c49d71 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Fri, 5 Aug 2022 14:15:35 +0700
Subject: [PATCH 17/49] fix: error when delete software

---
 src/shared/components/Settings/Tools/Software/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/Settings/Tools/Software/index.jsx b/src/shared/components/Settings/Tools/Software/index.jsx
index 2b9bf67181..b5ce05db4f 100644
--- a/src/shared/components/Settings/Tools/Software/index.jsx
+++ b/src/shared/components/Settings/Tools/Software/index.jsx
@@ -316,9 +316,9 @@ export default class Software extends ConsentComponent {
         {showConfirmation
         && (
           <ConfirmationModal
-            onConfirm={() => this.showConsent(this.onDeleteServiceProvider.bind(this, indexNo))}
+            onConfirm={() => this.showConsent(this.onDeleteSoftware.bind(this, indexNo))}
             onCancel={() => this.setState({ showConfirmation: false, indexNo: null })}
-            name={serviceProviderTrait.traits.data[indexNo].name}
+            name={softwareTrait.traits.data[indexNo].name}
           />
         )}
         <div styleName="form-container">

From 82b5d2c265d8ea96be61f01febbaeaed98c9176c Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 6 Aug 2022 08:46:15 +0700
Subject: [PATCH 18/49] fix: success message

---
 src/assets/images/icon-checkmark.svg          |  3 +
 src/shared/app.jsx                            |  3 +-
 .../{toastr.jsx => Toastr/index.jsx}          | 22 ++---
 src/shared/containers/Toastr/styles.scss      | 95 +++++++++++++++++++
 src/styles/awesome.css                        | 50 ----------
 5 files changed, 111 insertions(+), 62 deletions(-)
 create mode 100644 src/assets/images/icon-checkmark.svg
 rename src/shared/containers/{toastr.jsx => Toastr/index.jsx} (85%)
 create mode 100644 src/shared/containers/Toastr/styles.scss

diff --git a/src/assets/images/icon-checkmark.svg b/src/assets/images/icon-checkmark.svg
new file mode 100644
index 0000000000..86e15aa2ce
--- /dev/null
+++ b/src/assets/images/icon-checkmark.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.4142 0.585786C32.1953 1.36683 32.1953 2.63317 31.4142 3.41421L11.4142 23.4142C10.6332 24.1953 9.36684 24.1953 8.58579 23.4142L0.585786 15.4142C-0.195262 14.6332 -0.195262 13.3668 0.585786 12.5858C1.36683 11.8047 2.63317 11.8047 3.41421 12.5858L10 19.1716L28.5858 0.585786C29.3668 -0.195262 30.6332 -0.195262 31.4142 0.585786Z" fill="white"/>
+</svg>
diff --git a/src/shared/app.jsx b/src/shared/app.jsx
index fa3d6bd2b6..fa1757a8c2 100644
--- a/src/shared/app.jsx
+++ b/src/shared/app.jsx
@@ -13,7 +13,7 @@ import ErrorIcons from 'containers/ErrorIcons';
 
 import { DevTools, isomorphy, config } from 'topcoder-react-utils';
 
-import ExtendedReduxToastr from 'containers/toastr';
+import ExtendedReduxToastr from 'containers/Toastr';
 
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 
@@ -48,6 +48,7 @@ export default function App() {
         transitionIn="fadeIn"
         transitionOut="fadeOut"
         progressBar={false}
+        showCloseButton
       />
       { isomorphy.isDevBuild() ? <DevTools /> : undefined }
     </div>
diff --git a/src/shared/containers/toastr.jsx b/src/shared/containers/Toastr/index.jsx
similarity index 85%
rename from src/shared/containers/toastr.jsx
rename to src/shared/containers/Toastr/index.jsx
index 5af3be7d24..ba313e9de8 100644
--- a/src/shared/containers/toastr.jsx
+++ b/src/shared/containers/Toastr/index.jsx
@@ -9,6 +9,8 @@ import { ReduxToastr } from 'react-redux-toastr/lib/ReduxToastr';
 import ToastrBox from 'react-redux-toastr/lib/ToastrBox';
 import ProgressBar from 'react-redux-toastr/lib/ProgressBar';
 import * as actions from 'react-redux-toastr/lib/actions';
+import CheckmarkIcon from 'assets/images/icon-checkmark.svg';
+import './styles.scss';
 
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable no-underscore-dangle */
@@ -24,28 +26,26 @@ class ExtendedToastrBox extends ToastrBox {
     } = this.props.item;
 
     return (
-      <div role="button">
-        <div className="rrt-left-container">
-          <div className="rrt-holder">
-            {this.renderIcon()}
-          </div>
+      <div role="button" styleName="content">
+        <div styleName="left-container">
+          {this.renderIcon()}
         </div>
         {options.status && type === 'light' && <div className={classnames('toastr-status', options.status)} />}
-        <div className="rrt-middle-container">
+        <div styleName="middle-container">
           {title && (
-          <div className="rrt-title">
+          <div styleName="title">
             {title}
           </div>
           )}
           {message && (
-          <div className="rrt-text">
+          <div styleName="text">
             {message}
           </div>
           )}
           {options.component && this.renderSubComponent()}
         </div>
 
-        <div className="rrt-right-container">
+        <div styleName="right-container">
           {options.showCloseButton && this.renderCloseButton()}
         </div>
         {this.state.progressBar ? <ProgressBar {...this.state.progressBar} /> : null}
@@ -67,13 +67,13 @@ class ExtendedReduxToastr extends ReduxToastr {
             progressBar: this.props.progressBar,
             transitionIn: this.props.transitionIn,
             transitionOut: this.props.transitionOut,
+            icon: <CheckmarkIcon />,
             ...item.options,
-            showCloseButton: false,
           },
         };
 
         return (
-          <span key={item.id}>
+          <span key={item.id} styleName="toastr-container">
             <ExtendedToastrBox
               inMemory={this.toastrFired}
               addToMemory={() => this._addToMemory(item.id)}
diff --git a/src/shared/containers/Toastr/styles.scss b/src/shared/containers/Toastr/styles.scss
new file mode 100644
index 0000000000..c4952a15d2
--- /dev/null
+++ b/src/shared/containers/Toastr/styles.scss
@@ -0,0 +1,95 @@
+@import '~styles/mixins';
+
+.toastr-container {
+  :global {
+    .toastr {
+      width: 400px;
+      margin: 10px auto;
+
+      @include xs-to-sm {
+        width: 90%;
+        max-width: 400px;
+      }
+    }
+
+    .toastr .close-toastr {
+      @include roboto-bold;
+
+      color: $tc-white;
+      font-size: 16px;
+      position: relative;
+      margin: 0;
+      padding: 0;
+      top: unset;
+      bottom: unset;
+      left: unset;
+      right: unset;
+      opacity: 1;
+
+      span {
+        position: relative;
+        top: unset;
+        left: unset;
+        right: unset;
+        transform: unset;
+      }
+    }
+
+    .toastr:hover {
+      -moz-box-shadow: 0 0 12px #000;
+      -webkit-box-shadow: 0 0 12px #000;
+      box-shadow: 0 0 12px #000;
+      opacity: 1;
+      -ms-filter: progid:dximagetransform.microsoft.alpha(Opacity=100);
+      filter: alpha(opacity=100);
+      cursor: pointer;
+    }
+
+    .rrt-success {
+      background-color: $color-turq-160 !important;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 26px 16px;
+}
+
+.text {
+  @include roboto-regular;
+
+  line-height: 24px;
+  font-size: 16px !important;
+}
+
+.title {
+  @include roboto-bold;
+
+  line-height: 20px;
+}
+
+.middle-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  justify-content: center;
+}
+
+.left-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-left: 16px;
+}
+
+.right-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/styles/awesome.css b/src/styles/awesome.css
index 03b1fc343a..2bca6e7b66 100644
--- a/src/styles/awesome.css
+++ b/src/styles/awesome.css
@@ -77,56 +77,6 @@
   }
 }
 
-.rrt-text {
-  margin-top: 10px;
-  font-family: 'Roboto', Arial, Helvetica, sans-serif;
-  font-weight: 300 !important;
-  font-size: 16px !important;
-}
-
-.redux-toastr .toastr {
-  min-height: 60px !important;
-  width: auto;
-  margin: auto;
-}
-
-.redux-toastr .toastr .rrt-left-container .rrt-holder {
-  width: 40px !important;
-  height: 40px !important;
-}
-
-.redux-toastr .toastr .rrt-middle-container {
-  margin-left: 40px !important;
-  width: 90% !important;
-}
-
-.redux-toastr .toastr .close-toastr {
-  margin-top: -15px !important;
-}
-
-.toastr:hover {
-  -moz-box-shadow: 0 0 12px #000;
-  -webkit-box-shadow: 0 0 12px #000;
-  box-shadow: 0 0 12px #000;
-  opacity: 1;
-  -ms-filter: progid:dximagetransform.microsoft.alpha(Opacity=100);
-  filter: alpha(opacity=100);
-  cursor: pointer;
-}
-
-.redux-toastr .toastr.rrt-success {
-  background-color: #51a351 !important;
-}
-
-.redux-toastr .top-left,
-.redux-toastr .top-right,
-.redux-toastr .top-center,
-.redux-toastr .bottom-left,
-.redux-toastr .bottom-right,
-.redux-toastr .bottom-center {
-  width: auto !important;
-}
-
 .hidden {
   display: none !important;
 }

From c14145a268c91619a918f96f1cd12e53ee058cb6 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Mon, 8 Aug 2022 10:05:54 +0700
Subject: [PATCH 19/49] fix: test update

---
 __tests__/shared/__snapshots__/index.jsx.snap | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/__tests__/shared/__snapshots__/index.jsx.snap b/__tests__/shared/__snapshots__/index.jsx.snap
index be74448c8d..0304c1a0a5 100644
--- a/__tests__/shared/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/__snapshots__/index.jsx.snap
@@ -31,6 +31,7 @@ exports[`Snapshot match 1`] = `
     position="top-center"
     preventDuplicates={true}
     progressBar={false}
+    showCloseButton={true}
     transitionIn="fadeIn"
     transitionOut="fadeOut"
   />
@@ -69,6 +70,7 @@ exports[`Snapshot match 2`] = `
     position="top-center"
     preventDuplicates={true}
     progressBar={false}
+    showCloseButton={true}
     transitionIn="fadeIn"
     transitionOut="fadeOut"
   />

From 334d5315647589a85ccc02c0026fdba322dc44bd Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Mon, 8 Aug 2022 10:21:35 +0700
Subject: [PATCH 20/49] improvement(reskin-profile-settings): 6 - preferences
 tab

---
 .../Email/__snapshots__/index.jsx.snap        |  58 +------
 .../Settings/__snapshots__/index.jsx.snap     |   4 +
 src/assets/images/preferences/email.svg       |   9 +-
 src/assets/images/preferences/forum.svg       |  12 +-
 src/assets/images/preferences/payment.svg     |   7 +-
 .../components/Settings/Header/index.jsx      |   7 +-
 .../Settings/Preferences/Email/data.jsx       |  11 ++
 .../Settings/Preferences/Email/index.jsx      |  43 ++---
 .../Settings/Preferences/Email/styles.scss    |  52 ++++--
 .../Settings/Preferences/List/Item/index.jsx  |  70 ++++++++
 .../Preferences/List/Item/styles.scss         | 162 ++++++++++++++++++
 .../Settings/Preferences/List/data.jsx        |  25 +++
 .../Settings/Preferences/List/index.jsx       |  29 ++++
 .../Preferences/Personalization/index.jsx     |  18 +-
 .../Preferences/Personalization/styles.scss   |  18 --
 .../components/Settings/Preferences/index.jsx | 152 +++-------------
 .../Settings/Preferences/styles.scss          |  91 ++++++----
 .../Settings/ToggleableItem/styles.scss       |  15 +-
 src/shared/components/Settings/index.jsx      |   1 +
 19 files changed, 484 insertions(+), 300 deletions(-)
 create mode 100644 src/shared/components/Settings/Preferences/Email/data.jsx
 create mode 100644 src/shared/components/Settings/Preferences/List/Item/index.jsx
 create mode 100644 src/shared/components/Settings/Preferences/List/Item/styles.scss
 create mode 100644 src/shared/components/Settings/Preferences/List/data.jsx
 create mode 100644 src/shared/components/Settings/Preferences/List/index.jsx

diff --git a/__tests__/shared/components/Settings/Preferences/Email/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/Preferences/Email/__snapshots__/index.jsx.snap
index 445b116422..f42130c0f8 100644
--- a/__tests__/shared/components/Settings/Preferences/Email/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/Settings/Preferences/Email/__snapshots__/index.jsx.snap
@@ -4,54 +4,14 @@ exports[`renders email preferences setting page correctly 1`] = `
 <div
   className="src-shared-components-Settings-Preferences-Email-___styles__EmailPreferences___2FUGT"
 >
-  <h1
-    className="src-shared-components-Settings-Preferences-Email-___styles__title___1q6eb"
-  >
-    E-Mail Preferences
-  </h1>
-  <div
-    className="src-shared-components-Settings-Preferences-Email-___styles__unsubscribed-msg___3yh6s"
-  >
-    <h3>
-      You are not subscribed to receive Topcoder emails
-    </h3>
-    <p>
-      If this was a mistake or if you would like to resubscribe, please click the button below.
-    </p>
-    <form
-      action="https://topcoder.us13.list-manage.com/subscribe/post?u=65bd5a1857b73643aad556093&id=28bfd3c062"
-      id="mc-embedded-subscribe-form"
-      method="post"
-      name="mc-embedded-subscribe-form"
-      noValidate={true}
-    >
-      <input
-        id="mce-EMAIL"
-        name="EMAIL"
-        readOnly={true}
-        type="email"
-        value="test@test.com"
-      />
-      <input
-        id="gdpr_11101"
-        name="gdpr[11101]"
-        type="checkbox"
-        value="Y"
-      />
-      <input
-        name="b_65bd5a1857b73643aad556093_28bfd3c062"
-        tabIndex="-1"
-        type="text"
-        value=""
-      />
-      <input
-        className="submit-button"
-        id="mc-embedded-subscribe"
-        name="subscribe"
-        type="submit"
-        value="Subscribe"
-      />
-    </form>
-  </div>
+  <Item
+    description="If this was a mistake or if you would like to resubscribe, please click the “Subscribe” button."
+    email="test@test.com"
+    id="email"
+    isSubscribeForm={true}
+    link=""
+    linkTitle="SUBSCRIBE"
+    title="You are not subscribed to receive topcoder emails"
+  />
 </div>
 `;
diff --git a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
index 73f0c5c1d3..dd649ab368 100644
--- a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
@@ -14,6 +14,7 @@ exports[`renders account setting page correctly 1`] = `
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
+      isPreferencesTab={false}
       isSaving={false}
       saveSettings={[Function]}
       selectTab={[Function]}
@@ -771,6 +772,7 @@ exports[`renders preferences setting page correctly 1`] = `
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
+      isPreferencesTab={false}
       isSaving={false}
       saveSettings={[Function]}
       selectTab={[Function]}
@@ -1525,6 +1527,7 @@ exports[`renders profile setting page correctly 1`] = `
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
+      isPreferencesTab={false}
       isSaving={false}
       saveSettings={[Function]}
       selectTab={[Function]}
@@ -2285,6 +2288,7 @@ exports[`renders tools setting page correctly 1`] = `
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
+      isPreferencesTab={false}
       isSaving={false}
       saveSettings={[Function]}
       selectTab={[Function]}
diff --git a/src/assets/images/preferences/email.svg b/src/assets/images/preferences/email.svg
index 6512346025..84a793d3bf 100755
--- a/src/assets/images/preferences/email.svg
+++ b/src/assets/images/preferences/email.svg
@@ -1,7 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
-    <g fill="none" fill-rule="evenodd" stroke="#444" stroke-width="2">
-        <path fill="#CEE6FF" d="M10.617 18.88v7.806L28.2 2.372z"/>
-        <path fill="#CEE6FF" d="M2.046 12.324l18.98 14.514L28.446 1.7l-26.4 10.625z"/>
-        <path stroke-linecap="square" d="M27 3L11 18"/>
-    </g>
+<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666646 4.33337C0.666646 2.12423 2.45751 0.333374 4.66665 0.333374H23.3333C25.5425 0.333374 27.3333 2.12424 27.3333 4.33337V5.64602C27.3335 5.659 27.3335 5.67198 27.3333 5.68495V17.6667C27.3333 19.8758 25.5425 21.6667 23.3333 21.6667H4.66665C2.45751 21.6667 0.666646 19.8758 0.666646 17.6667V5.68494C0.666457 5.67197 0.666457 5.659 0.666646 5.64603V4.33337ZM3.33331 8.15806V17.6667C3.33331 18.4031 3.93027 19 4.66665 19H23.3333C24.0697 19 24.6666 18.4031 24.6666 17.6667V8.15806L16.2188 13.79C14.8752 14.6857 13.1248 14.6857 11.7812 13.79L3.33331 8.15806ZM24.6666 4.95313L14.7396 11.5712C14.2917 11.8698 13.7082 11.8698 13.2604 11.5712L3.33331 4.95313V4.33337C3.33331 3.59699 3.93027 3.00004 4.66665 3.00004H23.3333C24.0697 3.00004 24.6666 3.59699 24.6666 4.33337V4.95313Z" fill="#2A2A2A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666646 4.33337C0.666646 2.12423 2.45751 0.333374 4.66665 0.333374H23.3333C25.5425 0.333374 27.3333 2.12424 27.3333 4.33337V5.64602C27.3335 5.659 27.3335 5.67198 27.3333 5.68495V17.6667C27.3333 19.8758 25.5425 21.6667 23.3333 21.6667H4.66665C2.45751 21.6667 0.666646 19.8758 0.666646 17.6667V5.68494C0.666457 5.67197 0.666457 5.659 0.666646 5.64603V4.33337ZM3.33331 8.15806V17.6667C3.33331 18.4031 3.93027 19 4.66665 19H23.3333C24.0697 19 24.6666 18.4031 24.6666 17.6667V8.15806L16.2188 13.79C14.8752 14.6857 13.1248 14.6857 11.7812 13.79L3.33331 8.15806ZM24.6666 4.95313L14.7396 11.5712C14.2917 11.8698 13.7082 11.8698 13.2604 11.5712L3.33331 4.95313V4.33337C3.33331 3.59699 3.93027 3.00004 4.66665 3.00004H23.3333C24.0697 3.00004 24.6666 3.59699 24.6666 4.33337V4.95313Z" fill="black" fill-opacity="0.2"/>
 </svg>
diff --git a/src/assets/images/preferences/forum.svg b/src/assets/images/preferences/forum.svg
index 3280ef2b58..92e12622e3 100755
--- a/src/assets/images/preferences/forum.svg
+++ b/src/assets/images/preferences/forum.svg
@@ -1,10 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
-    <g fill="none" fill-rule="nonzero">
-        <circle cx="7" cy="18" r="3" fill="#FFF" stroke="#262628" stroke-width="2"/>
-        <circle cx="24" cy="18" r="3" fill="#FFF" stroke="#262628" stroke-width="2"/>
-        <path fill="#CEE6FF" stroke="#262628" stroke-width="2" d="M12 29v-2.983c0-.71-.341-1.363-.901-1.725C10.207 23.717 8.66 23 6.5 23c-2.189 0-3.725.713-4.607 1.288C1.337 24.65 1 25.301 1 26.007V29h11z"/>
-        <path fill="#CEF0AF" stroke="#262628" stroke-width="2" d="M29 29v-2.983c0-.71-.341-1.363-.901-1.725C27.207 23.717 25.66 23 23.5 23c-2.189 0-3.725.713-4.607 1.288-.556.362-.893 1.013-.893 1.719V29h11z"/>
-        <path fill="#FFF" stroke="#1A85FF" stroke-linecap="square" stroke-width="2" d="M15 1v13l5-4h9V1z"/>
-        <path fill="#1A85FF" d="M18 4h7v1h-7zM18 6h5v1h-5z"/>
-    </g>
+<svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666748 4C0.666748 1.79086 2.45761 0 4.66675 0H18.0001C20.2092 0 22.0001 1.79086 22.0001 4V5.33333H23.3334C25.5426 5.33333 27.3334 7.12419 27.3334 9.33333V17.3333C27.3334 19.5425 25.5426 21.3333 23.3334 21.3333H22.0001V25.3333C22.0001 25.8726 21.6752 26.3588 21.177 26.5652C20.6788 26.7715 20.1053 26.6575 19.7239 26.2761L14.7811 21.3333H10.0001C9.38305 21.3333 8.79798 21.1931 8.27578 20.9433C7.89445 21.3242 7.32121 21.4381 6.82317 21.2318C6.32494 21.0255 6.00008 20.5393 6.00008 20V16H4.66675C2.45761 16 0.666748 14.2091 0.666748 12V4ZM10.5524 18.6667H15.3334C15.687 18.6667 16.0262 18.8071 16.2762 19.0572L19.3334 22.1144V20C19.3334 19.2636 19.9304 18.6667 20.6667 18.6667H23.3334C24.0698 18.6667 24.6667 18.0697 24.6667 17.3333V9.33333C24.6667 8.59695 24.0698 8 23.3334 8H22.0001V12C22.0001 14.2091 20.2092 16 18.0001 16H13.219L10.5524 18.6667ZM19.3334 4C19.3334 3.26362 18.7365 2.66667 18.0001 2.66667H4.66675C3.93037 2.66667 3.33341 3.26362 3.33341 4V12C3.33341 12.7364 3.93037 13.3333 4.66675 13.3333H7.33342C8.06979 13.3333 8.66675 13.9303 8.66675 14.6667V16.781L11.7239 13.7239C11.974 13.4738 12.3131 13.3333 12.6667 13.3333H18.0001C18.7365 13.3333 19.3334 12.7364 19.3334 12V4Z" fill="#2A2A2A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666748 4C0.666748 1.79086 2.45761 0 4.66675 0H18.0001C20.2092 0 22.0001 1.79086 22.0001 4V5.33333H23.3334C25.5426 5.33333 27.3334 7.12419 27.3334 9.33333V17.3333C27.3334 19.5425 25.5426 21.3333 23.3334 21.3333H22.0001V25.3333C22.0001 25.8726 21.6752 26.3588 21.177 26.5652C20.6788 26.7715 20.1053 26.6575 19.7239 26.2761L14.7811 21.3333H10.0001C9.38305 21.3333 8.79798 21.1931 8.27578 20.9433C7.89445 21.3242 7.32121 21.4381 6.82317 21.2318C6.32494 21.0255 6.00008 20.5393 6.00008 20V16H4.66675C2.45761 16 0.666748 14.2091 0.666748 12V4ZM10.5524 18.6667H15.3334C15.687 18.6667 16.0262 18.8071 16.2762 19.0572L19.3334 22.1144V20C19.3334 19.2636 19.9304 18.6667 20.6667 18.6667H23.3334C24.0698 18.6667 24.6667 18.0697 24.6667 17.3333V9.33333C24.6667 8.59695 24.0698 8 23.3334 8H22.0001V12C22.0001 14.2091 20.2092 16 18.0001 16H13.219L10.5524 18.6667ZM19.3334 4C19.3334 3.26362 18.7365 2.66667 18.0001 2.66667H4.66675C3.93037 2.66667 3.33341 3.26362 3.33341 4V12C3.33341 12.7364 3.93037 13.3333 4.66675 13.3333H7.33342C8.06979 13.3333 8.66675 13.9303 8.66675 14.6667V16.781L11.7239 13.7239C11.974 13.4738 12.3131 13.3333 12.6667 13.3333H18.0001C18.7365 13.3333 19.3334 12.7364 19.3334 12V4Z" fill="black" fill-opacity="0.2"/>
 </svg>
diff --git a/src/assets/images/preferences/payment.svg b/src/assets/images/preferences/payment.svg
index ff90700fc4..7c4ecb5ac6 100644
--- a/src/assets/images/preferences/payment.svg
+++ b/src/assets/images/preferences/payment.svg
@@ -1,5 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 30">
-  <path d="M27.4 29.1H6.6c-.7 0-1.2-.5-1.2-1.2V2.1c0-.7.5-1.2 1.2-1.2h14.7l7.4 7.4v19.6c0 .7-.6 1.2-1.3 1.2z" fill="#e5e5e4" stroke="#444445" stroke-width="2"/>
-  <path d="M21.3.9V7c0 .7.5 1.2 1.2 1.2h6.1L21.3.9z" fill="#444445"/>
-  <path d="M17.6 16.5v-5c1.4 0 2.5 1.1 2.5 2.5 0 .3.3.6.6.6s.6-.3.6-.6c0-2-1.7-3.7-3.7-3.7v-.7c0-.3-.3-.6-.6-.6s-.6.3-.6.6v.6c-2 0-3.7 1.7-3.7 3.7 0 2.4 1.9 3.1 3.7 3.5v5c-1.4 0-2.5-1.1-2.5-2.5 0-.3-.3-.6-.6-.6s-.6.3-.6.6c0 2 1.7 3.7 3.7 3.7v.6c0 .3.3.6.6.6s.6-.3.6-.6v-.6c2 0 3.7-1.7 3.7-3.7 0-2.2-1.9-2.9-3.7-3.4zm-3.7-2.6c0-1.4 1.1-2.5 2.5-2.5v4.7c-1.6-.3-2.5-.8-2.5-2.2zm3.7 8.6v-4.7c1.5.4 2.5.9 2.5 2.3 0 1.3-1.1 2.4-2.5 2.4z" fill="#74c172"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0001 3.33332C8.10904 3.33332 3.33341 8.10895 3.33341 14C3.33341 19.891 8.10904 24.6667 14.0001 24.6667C19.8911 24.6667 24.6667 19.891 24.6667 14C24.6667 8.10895 19.8911 3.33332 14.0001 3.33332ZM0.666748 14C0.666748 6.63619 6.63628 0.666656 14.0001 0.666656C21.3639 0.666656 27.3334 6.63619 27.3334 14C27.3334 21.3638 21.3639 27.3333 14.0001 27.3333C6.63628 27.3333 0.666748 21.3638 0.666748 14ZM14.0001 5.99999C14.7365 5.99999 15.3334 6.59694 15.3334 7.33332V7.45647C16.5874 7.69219 17.722 8.26181 18.472 9.12615C18.9546 9.68234 18.895 10.5245 18.3388 11.0071C17.7826 11.4897 16.9405 11.43 16.4579 10.8738C16.2412 10.6241 15.8548 10.3703 15.3334 10.201L15.3334 12.7893C16.1622 12.945 16.9288 13.2454 17.5681 13.6716C18.5304 14.3131 19.3334 15.3458 19.3334 16.6667C19.3334 17.9875 18.5304 19.0202 17.5681 19.6617C16.9288 20.0879 16.1622 20.3884 15.3334 20.544L15.3334 20.6667C15.3334 21.4031 14.7364 22 14.0001 22C13.2637 22 12.6667 21.403 12.6667 20.6666L12.6668 20.5435C11.4128 20.3078 10.2782 19.7382 9.52817 18.8738C9.04556 18.3176 9.10521 17.4755 9.6614 16.9929C10.2176 16.5103 11.0597 16.57 11.5423 17.1262C11.759 17.3759 12.1454 17.6297 12.6668 17.799L12.6668 15.2107C11.838 15.055 11.0714 14.7546 10.4321 14.3283C9.46982 13.6869 8.66675 12.6542 8.66675 11.3333C8.66675 10.0124 9.46982 8.9798 10.4321 8.3383C11.0714 7.91208 11.838 7.61163 12.6667 7.45598V7.33332C12.6667 6.59694 13.2637 5.99999 14.0001 5.99999ZM12.6668 10.2013C12.3726 10.2965 12.1177 10.4195 11.9113 10.5571C11.4258 10.8808 11.3334 11.1815 11.3334 11.3333C11.3334 11.4852 11.4258 11.7859 11.9113 12.1095C12.1177 12.2471 12.3726 12.3701 12.6668 12.4653L12.6668 10.2013ZM15.3334 15.5347L15.3334 17.7986C15.6276 17.7035 15.8825 17.5805 16.0889 17.4429C16.5744 17.1192 16.6668 16.8185 16.6668 16.6667C16.6668 16.5148 16.5744 16.2141 16.0889 15.8904C15.8825 15.7528 15.6276 15.6299 15.3334 15.5347Z" fill="#2A2A2A"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0001 3.33332C8.10904 3.33332 3.33341 8.10895 3.33341 14C3.33341 19.891 8.10904 24.6667 14.0001 24.6667C19.8911 24.6667 24.6667 19.891 24.6667 14C24.6667 8.10895 19.8911 3.33332 14.0001 3.33332ZM0.666748 14C0.666748 6.63619 6.63628 0.666656 14.0001 0.666656C21.3639 0.666656 27.3334 6.63619 27.3334 14C27.3334 21.3638 21.3639 27.3333 14.0001 27.3333C6.63628 27.3333 0.666748 21.3638 0.666748 14ZM14.0001 5.99999C14.7365 5.99999 15.3334 6.59694 15.3334 7.33332V7.45647C16.5874 7.69219 17.722 8.26181 18.472 9.12615C18.9546 9.68234 18.895 10.5245 18.3388 11.0071C17.7826 11.4897 16.9405 11.43 16.4579 10.8738C16.2412 10.6241 15.8548 10.3703 15.3334 10.201L15.3334 12.7893C16.1622 12.945 16.9288 13.2454 17.5681 13.6716C18.5304 14.3131 19.3334 15.3458 19.3334 16.6667C19.3334 17.9875 18.5304 19.0202 17.5681 19.6617C16.9288 20.0879 16.1622 20.3884 15.3334 20.544L15.3334 20.6667C15.3334 21.4031 14.7364 22 14.0001 22C13.2637 22 12.6667 21.403 12.6667 20.6666L12.6668 20.5435C11.4128 20.3078 10.2782 19.7382 9.52817 18.8738C9.04556 18.3176 9.10521 17.4755 9.6614 16.9929C10.2176 16.5103 11.0597 16.57 11.5423 17.1262C11.759 17.3759 12.1454 17.6297 12.6668 17.799L12.6668 15.2107C11.838 15.055 11.0714 14.7546 10.4321 14.3283C9.46982 13.6869 8.66675 12.6542 8.66675 11.3333C8.66675 10.0124 9.46982 8.9798 10.4321 8.3383C11.0714 7.91208 11.838 7.61163 12.6667 7.45598V7.33332C12.6667 6.59694 13.2637 5.99999 14.0001 5.99999ZM12.6668 10.2013C12.3726 10.2965 12.1177 10.4195 11.9113 10.5571C11.4258 10.8808 11.3334 11.1815 11.3334 11.3333C11.3334 11.4852 11.4258 11.7859 11.9113 12.1095C12.1177 12.2471 12.3726 12.3701 12.6668 12.4653L12.6668 10.2013ZM15.3334 15.5347L15.3334 17.7986C15.6276 17.7035 15.8825 17.5805 16.0889 17.4429C16.5744 17.1192 16.6668 16.8185 16.6668 16.6667C16.6668 16.5148 16.5744 16.2141 16.0889 15.8904C15.8825 15.7528 15.6276 15.6299 15.3334 15.5347Z" fill="black" fill-opacity="0.2"/>
 </svg>
diff --git a/src/shared/components/Settings/Header/index.jsx b/src/shared/components/Settings/Header/index.jsx
index d8bd9e01ad..848c82edef 100644
--- a/src/shared/components/Settings/Header/index.jsx
+++ b/src/shared/components/Settings/Header/index.jsx
@@ -7,17 +7,16 @@ import PT from 'prop-types';
 
 import style from './styles.scss';
 
-export default function Header({ saveSettings, isSaving }) {
+export default function Header({ saveSettings, isSaving, isPreferencesTab }) {
   return (
     <div styleName="Header">
       <div styleName="title">
         <h1>Profile Settings</h1>
       </div>
-
       <Button
         onClick={saveSettings}
         theme={{ button: style.saveButton }}
-        disabled={isSaving}
+        disabled={isSaving || isPreferencesTab}
       >
         <span>SAVE CHANGES</span>
       </Button>
@@ -27,9 +26,11 @@ export default function Header({ saveSettings, isSaving }) {
 
 Header.defaultProps = {
   isSaving: false,
+  isPreferencesTab: false,
 };
 
 Header.propTypes = {
   saveSettings: PT.func.isRequired,
+  isPreferencesTab: PT.bool,
   isSaving: PT.bool,
 };
diff --git a/src/shared/components/Settings/Preferences/Email/data.jsx b/src/shared/components/Settings/Preferences/Email/data.jsx
new file mode 100644
index 0000000000..2319c6e40d
--- /dev/null
+++ b/src/shared/components/Settings/Preferences/Email/data.jsx
@@ -0,0 +1,11 @@
+import email from 'assets/images/preferences/email.svg';
+
+const data = {
+  id: 'email',
+  icon: email,
+  name: 'You are not subscribed to receive topcoder emails',
+  description: 'If this was a mistake or if you would like to resubscribe, please click the “Subscribe” button.',
+  linkTitle: 'SUBSCRIBE',
+};
+
+export default data;
diff --git a/src/shared/components/Settings/Preferences/Email/index.jsx b/src/shared/components/Settings/Preferences/Email/index.jsx
index 036779034b..f8268700ef 100644
--- a/src/shared/components/Settings/Preferences/Email/index.jsx
+++ b/src/shared/components/Settings/Preferences/Email/index.jsx
@@ -6,8 +6,9 @@ import { debounce, map } from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { toastr } from 'react-redux-toastr';
-
 import ToggleableItem from 'components/Settings/ToggleableItem';
+import Item from '../List/Item';
+import subscribe from './data';
 
 import './styles.scss';
 
@@ -29,7 +30,7 @@ const newsletters = [
   {
     id: 'd0c48e9da3',
     name: 'Gig Work',
-    desc: 'This newsletter gets sent out at various times, specifically when we have an opportunity of mass appeal. For more information you can visit the <a href="https://www.topcoder.com/community/taas" style="color:#0d61bf;text-decoration:underline">Gig Work</a> page.',
+    desc: 'This newsletter gets sent out at various times, specifically when we have an opportunity of mass appeal. For more information you can visit the <a href="https://www.topcoder.com/community/taas" style="color:#0d61bf;text-decoration:none;font-weight:500;">Gig Work page.</a>',
   },
   {
     id: 'a8f858cdf1',
@@ -49,7 +50,7 @@ const newsletters = [
   {
     id: '603c900c32',
     name: 'TCO Newsletter',
-    desc: 'For all the latest updates surrounding the <a href="https://www.topcoder.com/community/member-programs/topcoder-open" style="color:#0d61bf;text-decoration:underline">Topcoder Open</a> you should definitely be subscribing to this one. Expect an update in your mailbox every Tuesday!',
+    desc: 'For all the latest updates surrounding the <a href="https://www.topcoder.com/community/member-programs/topcoder-open" style="color:#0d61bf;text-decoration:none;font-weight:700;">Topcoder Open</a> you should definitely be subscribing to this one. Expect an update in your mailbox every Tuesday!',
   },
   {
     id: '3460574ddd',
@@ -59,14 +60,14 @@ const newsletters = [
   {
     id: 'ee26600945',
     name: 'NASA Community',
-    desc: 'Receive email notifications for all the latest news and announcements of our <a href="https://www.topcoder.com/community/nasa" style="color:#0d61bf;text-decoration:underline">NASA Member Program</a>.',
+    desc: 'Receive email notifications for all the latest news and announcements of our <a href="https://www.topcoder.com/community/nasa" style="color:#0d61bf;text-decoration:none;font-weight:500;">NASA Member Program</a>.',
   },
 ];
 const programs = [
   {
     id: 'cafe98d7a7',
     name: 'Beta Testers',
-    desc: 'If you have applied and been approved as a <a href="https://www.topcoder.com/community/member-programs/beta-testers" style="color:#0d61bf;text-decoration:underline">Beta Tester</a>, you may control the emails you receive here.',
+    desc: 'If you have applied and been approved as a <a href="https://www.topcoder.com/community/member-programs/beta-testers" style="color:#0d61bf;text-decoration:none;font-weight:500;">Beta Tester</a>, you may control the emails you receive here.',
   },
 ];
 
@@ -124,26 +125,20 @@ export default class EmailPreferences extends React.Component {
     const { email } = this.props;
     return (
       <div styleName="EmailPreferences">
-        <h1 styleName="title">
-          E-Mail Preferences
-        </h1>
         {
           status !== 'subscribed' ? (
-            <div styleName="unsubscribed-msg">
-              <h3>You are not subscribed to receive Topcoder emails</h3>
-              <p>If this was a mistake or if you would like to resubscribe, please click the button below.</p>
-              <form action="https://topcoder.us13.list-manage.com/subscribe/post?u=65bd5a1857b73643aad556093&amp;id=28bfd3c062" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" noValidate>
-                <input type="email" value={email} readOnly name="EMAIL" id="mce-EMAIL" />
-                <input type="checkbox" id="gdpr_11101" name="gdpr[11101]" value="Y" />
-                <input type="text" name="b_65bd5a1857b73643aad556093_28bfd3c062" tabIndex="-1" value="" />
-                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="submit-button" />
-              </form>
-            </div>
+            <Item
+              isSubscribeForm
+              email={email}
+              key={subscribe.id}
+              id={subscribe.id}
+              title={subscribe.name}
+              description={subscribe.description}
+              linkTitle={subscribe.linkTitle}
+            />
           ) : (
             <React.Fragment>
-              <div styleName="sub-title">Newsletters</div>
-              <div styleName="preferences-container">
-                {
+              {
                   map(newsletters, (newsletter) => {
                     const checked = emailPreferences[newsletter.id];
                     return (
@@ -160,10 +155,7 @@ export default class EmailPreferences extends React.Component {
                     );
                   })
                 }
-              </div>
-              <div styleName="sub-title-2">Programs</div>
-              <div styleName="preferences-container">
-                {
+              {
                   map(programs, (program) => {
                     const checked = emailPreferences[program.id];
                     return (
@@ -180,7 +172,6 @@ export default class EmailPreferences extends React.Component {
                     );
                   })
                 }
-              </div>
             </React.Fragment>
           )
         }
diff --git a/src/shared/components/Settings/Preferences/Email/styles.scss b/src/shared/components/Settings/Preferences/Email/styles.scss
index 949556c7cf..6d2f4c6067 100644
--- a/src/shared/components/Settings/Preferences/Email/styles.scss
+++ b/src/shared/components/Settings/Preferences/Email/styles.scss
@@ -1,6 +1,17 @@
 @import "../../style";
+@import "~styles/mixins";
 
 .EmailPreferences {
+  display: flex;
+  flex-direction: column;
+  gap: $margin-xxxxl;
+  margin-bottom: $margin-xxxxl;
+
+  @include upto-sm {
+    gap: $margin-xxl;
+    margin-bottom: $margin-xxl;
+  }
+
   .title {
     @include tc-heading-lg;
 
@@ -33,10 +44,6 @@
     margin-top: 30px;
   }
 
-  .preferences-container {
-    border-top: 1px solid $tc-gray-neutral-dark;
-  }
-
   .unsubscribed-msg {
     @include roboto-regular;
 
@@ -65,24 +72,31 @@
     }
 
     #mc-embedded-subscribe {
-      @include roboto-medium;
+      @include roboto-bold;
 
       display: inline-block;
-      margin-top: 20px;
+      text-align: center;
+      margin: 0;
+      height: 48px;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0.008em;
+      text-transform: uppercase;
+      color: $color-turq-160 !important;
+      padding: 12px 22px;
+      background: $tc-white;
+      border: 2px solid $color-turq-160;
+      border-radius: 50px;
+      box-shadow: none;
       cursor: pointer;
-      height: 40px;
-      font-size: 15px;
-      font-weight: 500;
-      padding: 0;
-      width: 170px;
-      white-space: nowrap;
-      background-color: #006ad7;
-      color: white;
-      border-radius: 4px;
-
-      &:hover {
-        background-image: linear-gradient(180deg, #3996ff, #127bf3);
-      }
     }
   }
+
+  // .subscribe-container {
+  //   margin-bottom: $margin-xxxxl;
+
+  //   @include upto-sm {
+  //     margin-bottom: $margin-xxl;
+  //   }
+  // }
 }
diff --git a/src/shared/components/Settings/Preferences/List/Item/index.jsx b/src/shared/components/Settings/Preferences/List/Item/index.jsx
new file mode 100644
index 0000000000..c4ba734b2b
--- /dev/null
+++ b/src/shared/components/Settings/Preferences/List/Item/index.jsx
@@ -0,0 +1,70 @@
+/**
+ * Render item of preferences
+ */
+import React from 'react';
+import PT from 'prop-types';
+import ReactSVG from 'react-svg';
+import { isomorphy } from 'topcoder-react-utils';
+
+import './styles.scss';
+
+let assets;
+if (isomorphy.isClientSide()) {
+  assets = require.context('assets/images/preferences', false, /svg/);
+}
+
+export default function Item({
+  id,
+  title,
+  description,
+  link,
+  linkTitle,
+  email,
+  isSubscribeForm,
+}) {
+  return (
+    <div styleName="item-container">
+      <div styleName="body">
+        <div styleName="icon-wrapper">
+          { assets && assets.keys().includes(`./${id.toLowerCase()}.svg`) ? <ReactSVG path={assets(`./${id.toLowerCase()}.svg`)} /> : '' }
+        </div>
+        <div styleName="info">
+          <div styleName="info-first-line">
+            { title }
+          </div>
+          <div styleName="info-second-line">
+            { description }
+          </div>
+        </div>
+        {
+          !isSubscribeForm ? (
+            <a href={link} styleName="link-btn"><span>{ linkTitle }</span></a>
+          ) : (
+            <form action="https://topcoder.us13.list-manage.com/subscribe/post?u=65bd5a1857b73643aad556093&amp;id=28bfd3c062" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" noValidate>
+              <input type="email" value={email} readOnly name="EMAIL" id="mce-EMAIL" />
+              <input type="checkbox" id="gdpr_11101" name="gdpr[11101]" value="Y" />
+              <input type="text" name="b_65bd5a1857b73643aad556093_28bfd3c062" tabIndex="-1" value="" />
+              <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="submit-button" />
+            </form>
+          )
+        }
+      </div>
+    </div>
+  );
+}
+
+Item.defaultProps = {
+  link: '',
+  isSubscribeForm: false,
+  email: '',
+};
+
+Item.propTypes = {
+  linkTitle: PT.string.isRequired,
+  title: PT.string.isRequired,
+  description: PT.string.isRequired,
+  link: PT.string,
+  isSubscribeForm: PT.bool,
+  email: PT.string,
+  id: PT.string.isRequired,
+};
diff --git a/src/shared/components/Settings/Preferences/List/Item/styles.scss b/src/shared/components/Settings/Preferences/List/Item/styles.scss
new file mode 100644
index 0000000000..fd32859a0e
--- /dev/null
+++ b/src/shared/components/Settings/Preferences/List/Item/styles.scss
@@ -0,0 +1,162 @@
+@import "../../../style";
+@import "~styles/mixins";
+
+.item-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 0;
+  padding: 16px;
+  background: $tc-white;
+  border: 1px solid $listing-light-gray;
+  border-radius: 8px;
+}
+
+.item-container:not(:last-child) {
+  margin-bottom: $margin-xxxxl;
+
+  @include upto-sm {
+    margin-bottom: $margin-xxl;
+  }
+}
+
+.body {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  align-items: center;
+
+  @include upto-sm {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+  background: $color-black-5;
+  border-radius: 4px;
+  margin-right: $margin-lg;
+
+  @include upto-sm {
+    margin-bottom: $pad-lg;
+  }
+
+  svg {
+    display: block;
+  }
+}
+
+.link-btn {
+  @include roboto-bold;
+
+  font-weight: 700;
+  text-align: center;
+  margin: 0;
+  height: 48px;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.008em;
+  text-transform: uppercase;
+  color: $color-turq-160 !important;
+  padding: 12px 22px;
+  background: $tc-white;
+  border: 2px solid $color-turq-160;
+  border-radius: 50px;
+  cursor: pointer;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  @include upto-sm {
+    margin-bottom: $pad-lg;
+  }
+}
+
+.info-first-line {
+  @include roboto-regular;
+
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
+}
+
+.info-second-line {
+  @include roboto-regular;
+
+  font-size: 16px;
+  line-height: 24px;
+  padding-right: 74px;
+  color: $color-black-60;
+
+  @include upto-sm {
+    padding-right: 0;
+  }
+}
+
+.mobile-view {
+  display: none;
+
+  @include upto-sm {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .mobile-first-line {
+      @include roboto-regular;
+
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      width: 100%;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+      letter-spacing: 0.5px;
+      text-transform: capitalize;
+
+      .mobile-icon {
+        width: 80px;
+        height: 80px;
+
+        @media screen and (max-width: 320px) {
+          width: 42px;
+          height: 42px;
+        }
+      }
+
+      .mobile-title {
+        @include roboto-medium;
+
+        font-size: 15px;
+        color: #262628;
+        width: 68%;
+        margin-left: 16px;
+      }
+    }
+
+    .mobile-second-line {
+      @include roboto-regular;
+
+      line-height: 20px;
+      text-align: justify;
+      font-weight: 400;
+      margin-top: 10px;
+      margin-bottom: 12px;
+      font-size: 14px;
+      color: #767676;
+      width: 100%;
+    }
+  }
+}
diff --git a/src/shared/components/Settings/Preferences/List/data.jsx b/src/shared/components/Settings/Preferences/List/data.jsx
new file mode 100644
index 0000000000..c59e4e375c
--- /dev/null
+++ b/src/shared/components/Settings/Preferences/List/data.jsx
@@ -0,0 +1,25 @@
+import forum from 'assets/images/preferences/forum.svg';
+import payment from 'assets/images/preferences/payment.svg';
+
+import { config } from 'topcoder-react-utils';
+
+const data = [
+  {
+    id: 'forum',
+    icon: forum,
+    name: 'Forum',
+    description: 'To setup your forum preferences, please click the “Go To Forum” button.',
+    link: `${config.URL.FORUMS_VANILLA}/profile/preferences`,
+    linkTitle: 'GO TO FORUM',
+  },
+  {
+    id: 'payment',
+    icon: payment,
+    name: 'Payment',
+    description: 'To setup your payments preferences, please click the “Go To Payments” button.',
+    link: `${config.URL.COMMUNITY}/tc?module=EditPaymentPreferences`,
+    linkTitle: 'GO TO PAYMENTS',
+  },
+];
+
+export default data;
diff --git a/src/shared/components/Settings/Preferences/List/index.jsx b/src/shared/components/Settings/Preferences/List/index.jsx
new file mode 100644
index 0000000000..c8bd12ebc6
--- /dev/null
+++ b/src/shared/components/Settings/Preferences/List/index.jsx
@@ -0,0 +1,29 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Preferences
+ * Forum and Payment preferences List
+ */
+import _ from 'lodash';
+import React from 'react';
+import Item from './Item';
+import data from './data';
+
+const preferenceList = () => (
+  <div>
+    {
+      _.map(data, item => (
+        <Item
+          icon={item.icon}
+          key={item.id}
+          id={item.id}
+          title={item.name}
+          description={item.description}
+          link={item.link}
+          linkTitle={item.linkTitle}
+        />
+      ))
+    }
+  </div>
+);
+
+export default preferenceList;
diff --git a/src/shared/components/Settings/Preferences/Personalization/index.jsx b/src/shared/components/Settings/Preferences/Personalization/index.jsx
index 60b2d9f5d1..310f3834bc 100644
--- a/src/shared/components/Settings/Preferences/Personalization/index.jsx
+++ b/src/shared/components/Settings/Preferences/Personalization/index.jsx
@@ -61,16 +61,14 @@ export default function Personalization({
 
   return (
     <div styleName="Personalization">
-      <div styleName="user-consent-container">
-        <ToggleableItem
-          id="user-consent"
-          value="user-consent"
-          checked={getUserConsent()}
-          primaryText={primaryText}
-          secondaryText={secondaryText}
-          onToggle={debounceUpdateConsent}
-        />
-      </div>
+      <ToggleableItem
+        id="user-consent"
+        value="user-consent"
+        checked={getUserConsent()}
+        primaryText={primaryText}
+        secondaryText={secondaryText}
+        onToggle={debounceUpdateConsent}
+      />
     </div>
   );
 }
diff --git a/src/shared/components/Settings/Preferences/Personalization/styles.scss b/src/shared/components/Settings/Preferences/Personalization/styles.scss
index c3d5df9357..51720c6016 100644
--- a/src/shared/components/Settings/Preferences/Personalization/styles.scss
+++ b/src/shared/components/Settings/Preferences/Personalization/styles.scss
@@ -1,16 +1,6 @@
 @import "../../style";
 
 .Personalization {
-  margin-bottom: 60px;
-
-  @include from-sm-to-lg {
-    margin-bottom: 0;
-  }
-
-  @include upto-sm {
-    margin-bottom: 0;
-  }
-
   .title {
     @include tc-heading-lg;
 
@@ -22,12 +12,4 @@
       margin: 20px;
     }
   }
-
-  .user-consent-container {
-    min-height: 100px;
-
-    // @include upto-sm {
-    //   min-height: 1px;
-    // }
-  }
 }
diff --git a/src/shared/components/Settings/Preferences/index.jsx b/src/shared/components/Settings/Preferences/index.jsx
index ed7c3456d7..eb4f1ea4e3 100644
--- a/src/shared/components/Settings/Preferences/index.jsx
+++ b/src/shared/components/Settings/Preferences/index.jsx
@@ -1,145 +1,49 @@
-/**
- * Child component of Settings
- * Preferences renders setting page for user preferences.
- */
-/* eslint-disable no-undef */
-/* eslint-disable no-return-assign */
+/* eslint-disable prefer-destructuring */
 import React from 'react';
 import PT from 'prop-types';
-import { config } from 'topcoder-react-utils';
-
-import Accordion from 'components/Settings/Accordion';
-import LoadingIndicator from 'components/LoadingIndicator';
-import EmailIcon from 'assets/images/preferences/email.svg';
-import Forum from 'assets/images/preferences/forum.svg';
-import Payment from 'assets/images/preferences/payment.svg';
-import SideBar from 'components/Settings/SideBar';
-import ErrorWrapper from 'components/Settings/ErrorWrapper';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
 import NewsletterPreferencesContainer from 'containers/NewsletterPreferences';
-import { SCREEN_SIZE } from '../constants';
-
-import './styles.scss';
+import PreferenceList from './List';
 
-const tabs = {
-  EMAIL: 'e-mail',
-  FORUM: 'forum',
-  PAYMENT: 'payment',
-};
+import ErrorWrapper from '../ErrorWrapper';
 
-const icons = {
-  'e-mail': <EmailIcon />,
-  forum: <Forum />,
-  payment: <Payment />,
-};
+import styles from './styles.scss';
 
 export default class Preferences extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentTab: 'e-mail',
-      isMobileView: false,
-    };
-    this.previousTab = null;
-    this.toggleTab = this.toggleTab.bind(this);
-    this.renderTabContent = this.renderTabContent.bind(this);
-    this.clearNotifiation = this.clearNotifiation.bind(this);
-    this.updatePredicate = this.updatePredicate.bind(this);
-  }
-
-  componentDidMount() {
-    this.clearNotifiation();
-    this.updatePredicate();
-    window.addEventListener('resize', this.updatePredicate);
-  }
-
-  componentDidUpdate() {
-    const { currentTab } = this.state;
-    if (currentTab !== this.previousTab) {
-      this.clearNotifiation();
-    }
-  }
-
-  componentWillUnmount() {
-    this.clearNotifiation();
-    window.removeEventListener('resize', this.updatePredicate);
-  }
-
-  clearNotifiation() {
-    const { clearToastrNotification } = this.props;
-    if (clearToastrNotification) {
-      clearToastrNotification();
-    }
-  }
-
-  updatePredicate() {
-    this.setState({ isMobileView: window.innerWidth <= SCREEN_SIZE.SM });
-  }
-
-  /* Add this to resolve checkbox checked issue when switch mobile to other device */
-  toggleTab(tab) {
-    const { currentTab } = this.state;
-    this.previousTab = currentTab;
-    this.setState({ currentTab: tab });
-  }
-
-  renderTabContent(tab) {
-    const { profile: { email } } = this.props;
-    switch (tab) {
-      case 'e-mail':
-        return <NewsletterPreferencesContainer email={email} />;
-      case 'forum':
-        return (window.location.href = `${config.URL.FORUMS_VANILLA}/profile/preferences`) && <LoadingIndicator />;
-      case 'payment':
-        return (window.location.href = `${config.URL.COMMUNITY}/tc?module=EditPaymentPreferences`) && <LoadingIndicator />;
-      default:
-        return null;
-    }
-  }
-
   render() {
-    const {
-      currentTab,
-      isMobileView,
-    } = this.state;
+    const { profile: { email } } = this.props;
 
-    const names = Object.keys(tabs).map(key => tabs[key]);
+    const saveBtn = (
+      <PrimaryButton
+        onClick={this.save}
+        theme={{
+          button: `${styles['save-changes-btn']} ${styles.disabled}`,
+        }}
+        disabled
+      >
+        Save Changes
+      </PrimaryButton>
+    );
 
     return (
-      <div styleName="preferences-container">
-        {isMobileView && (
-          <div styleName="mobile-view">
-            <Accordion
-              icons={icons}
-              names={names}
-              currentSidebarTab={currentTab}
-              renderTabContent={this.renderTabContent}
-              toggleSidebarTab={this.toggleTab}
+      <ErrorWrapper>
+        <div styleName="preferences-container">
+          <div styleName="header">
+            <h3>Platform preferences</h3>
+          </div>
+          <div styleName="platform-banner">
+            <NewsletterPreferencesContainer
+              email={email}
             />
+            <PreferenceList />
           </div>
-        )}
-        <div styleName="col-bar">
-          <SideBar
-            icons={icons}
-            names={names}
-            currentTab={currentTab}
-            toggle={this.toggleTab}
-          />
         </div>
-        {
-          !isMobileView && (
-          <div styleName="col-content">
-            <ErrorWrapper>
-              { this.renderTabContent(currentTab) }
-            </ErrorWrapper>
-          </div>
-          )
-        }
-      </div>
+        <div styleName="footer">{saveBtn}</div>
+      </ErrorWrapper>
     );
   }
 }
 
 Preferences.propTypes = {
-  clearToastrNotification: PT.func.isRequired,
   profile: PT.shape().isRequired,
 };
diff --git a/src/shared/components/Settings/Preferences/styles.scss b/src/shared/components/Settings/Preferences/styles.scss
index ebccde189f..7ce7617a31 100644
--- a/src/shared/components/Settings/Preferences/styles.scss
+++ b/src/shared/components/Settings/Preferences/styles.scss
@@ -1,50 +1,83 @@
-@import "../style";
+@import '~styles/mixins';
 
 .preferences-container {
-  display: flex;
-  flex-direction: row;
-  box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06);
+  background-color: $listing-filter-bg;
+  padding: $pad-xxxxl;
+  border-radius: 8px;
+  margin: 32px 0 32px;
 
-  @include upto-sm {
-    padding: 0;
+  @include xs-to-sm {
+    padding: $pad-xxl $pad-lg;
+    margin: 24px 0 24px;
   }
 
-  .mobile-view {
-    display: none;
+  .header {
+    margin: 0 0 40px;
 
-    @include from-sm-to-lg {
-      display: none;
+    @include xs-to-sm {
+      margin: 0 0 $pad-xxl;
     }
 
-    @include upto-sm {
-      display: block;
-      width: 100%;
+    h3 {
+      @include barlow-bold;
+
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 22px;
+      color: $tco-black;
+      text-transform: uppercase;
+
+      @include xs-to-md {
+        @include barlow-condensed-semi-bold;
+
+        font-weight: 500;
+        font-size: 22px;
+        line-height: 24px;
+      }
     }
   }
 
-  .col-bar {
-    width: 250px;
-    background-color: #fafafb;
-    padding: 30px;
-    border-bottom-left-radius: 6px;
+  .platform-banner {
+    background-color: $tc-white;
+    border-radius: 4px;
+    width: 100%;
+    padding: 32px;
 
-    @include from-sm-to-lg {
-      width: 90px;
-      padding-right: 30px;
-      margin-right: 0;
+    @include xs-to-sm {
+      padding: 24px 16px;
     }
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+
+  .save-changes-btn {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 50px !important;
+    background: #137d60 !important;
+    color: #fff !important;
+    text-transform: uppercase;
+    padding: 11px 23px;
+    margin: 0;
 
-    @include upto-sm {
-      display: none;
+    &.disabled {
+      opacity: 0.5;
     }
   }
 
-  .col-content {
-    flex: 1;
-    padding: 30px 80px;
+  @include xs-to-md {
+    padding: $pad-xxxxl 0 $pad-sm;
+    border-top: 2px solid $color-black-10;
 
-    @include upto-sm {
-      display: none;
+    .save-changes-btn {
+      font-size: 14px;
+      line-height: 20px;
     }
   }
 }
diff --git a/src/shared/components/Settings/ToggleableItem/styles.scss b/src/shared/components/Settings/ToggleableItem/styles.scss
index ef9071259c..f3c5d976b3 100644
--- a/src/shared/components/Settings/ToggleableItem/styles.scss
+++ b/src/shared/components/Settings/ToggleableItem/styles.scss
@@ -14,6 +14,10 @@
     display: flex;
     flex-direction: column;
     padding-right: 20px;
+
+    @media (max-width: 374px) {
+      padding-right: 16px;
+    }
   }
 
   p.primary {
@@ -36,8 +40,13 @@
   }
 
   .onoffswitch-no-padding-right {
-    margin-right: 0;
-    position: relative;
-    bottom: 15px;
+    margin-right: 9px;
+    margin-left: 0;
+    margin-top: 10px;
+    align-self: flex-start;
+
+    @media (max-width: 374px) {
+      margin-right: 0;
+    }
   }
 }
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index 94b9c76384..12c456e5d6 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -68,6 +68,7 @@ export default function Settings(props) {
             }
           }}
           isSaving={isSaving}
+          isPreferencesTab={newProps.settingsTab === TABS.PREFERENCES}
         />
         <TabSelector activeTab={newProps.settingsTab} tabs={SETTINGS_TABS} selectTab={selectTab} />
         {

From 1c133ba3c58f75e515a2b7f5084cd3898728d3e8 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 13 Aug 2022 12:33:29 +0700
Subject: [PATCH 21/49] fix: tools irresponsive

---
 src/shared/components/Settings/TabSelector/index.jsx | 4 +++-
 src/shared/components/Settings/index.jsx             | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/Settings/TabSelector/index.jsx b/src/shared/components/Settings/TabSelector/index.jsx
index f16792f551..f2be50d1cb 100644
--- a/src/shared/components/Settings/TabSelector/index.jsx
+++ b/src/shared/components/Settings/TabSelector/index.jsx
@@ -19,7 +19,9 @@ const TabSelector = ({
   const onActiveClick = (tab) => {
     setCurrentSelected(tab.link);
     setIsTabClosed(true);
-    selectTab(tab.link);
+    setImmediate(() => {
+      selectTab(tab.link);
+    });
   };
 
   const desktopTab = (
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index 12c456e5d6..53bf631753 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -30,6 +30,7 @@ export default function Settings(props) {
   }
 
   const selectTab = (tab) => {
+    newProps.selectTab(tab);
     newProps.history.push(`/settings/${tab}`);
   };
 

From b413b3908c0f8ce507a9de1c9e81b5e1f9305ca3 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 13 Aug 2022 23:20:11 +0700
Subject: [PATCH 22/49] fix: save changes disabled

---
 .../components/Settings/Header/index.jsx      |  6 +--
 .../components/Settings/Preferences/index.jsx | 38 +++++++++++++++++--
 src/shared/components/Settings/index.jsx      |  7 +++-
 .../containers/NewsletterPreferences.jsx      | 12 +++++-
 4 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/shared/components/Settings/Header/index.jsx b/src/shared/components/Settings/Header/index.jsx
index 848c82edef..9bef9291f9 100644
--- a/src/shared/components/Settings/Header/index.jsx
+++ b/src/shared/components/Settings/Header/index.jsx
@@ -7,7 +7,7 @@ import PT from 'prop-types';
 
 import style from './styles.scss';
 
-export default function Header({ saveSettings, isSaving, isPreferencesTab }) {
+export default function Header({ saveSettings, isSaving }) {
   return (
     <div styleName="Header">
       <div styleName="title">
@@ -16,7 +16,7 @@ export default function Header({ saveSettings, isSaving, isPreferencesTab }) {
       <Button
         onClick={saveSettings}
         theme={{ button: style.saveButton }}
-        disabled={isSaving || isPreferencesTab}
+        disabled={isSaving}
       >
         <span>SAVE CHANGES</span>
       </Button>
@@ -26,11 +26,9 @@ export default function Header({ saveSettings, isSaving, isPreferencesTab }) {
 
 Header.defaultProps = {
   isSaving: false,
-  isPreferencesTab: false,
 };
 
 Header.propTypes = {
   saveSettings: PT.func.isRequired,
-  isPreferencesTab: PT.bool,
   isSaving: PT.bool,
 };
diff --git a/src/shared/components/Settings/Preferences/index.jsx b/src/shared/components/Settings/Preferences/index.jsx
index eb4f1ea4e3..3c0fe15011 100644
--- a/src/shared/components/Settings/Preferences/index.jsx
+++ b/src/shared/components/Settings/Preferences/index.jsx
@@ -10,16 +10,41 @@ import ErrorWrapper from '../ErrorWrapper';
 import styles from './styles.scss';
 
 export default class Preferences extends React.Component {
+  constructor(props) {
+    super(props);
+    this.save = this.save.bind(this);
+    this.newsRef = React.createRef();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { isSaving, setIsSaving } = this.props;
+    if (isSaving !== nextProps.isSaving) {
+      setTimeout(() => {
+        setIsSaving(false);
+      }, 600);
+    }
+  }
+
+  save() {
+    const { isSaving, setIsSaving } = this.props;
+    if (isSaving) {
+      return;
+    }
+    setIsSaving(true);
+
+    this.newsRef.current.getWrappedInstance().save();
+  }
+
   render() {
-    const { profile: { email } } = this.props;
+    const { profile: { email }, isSaving } = this.props;
 
     const saveBtn = (
       <PrimaryButton
         onClick={this.save}
         theme={{
-          button: `${styles['save-changes-btn']} ${styles.disabled}`,
+          button: `${styles['save-changes-btn']} ${isSaving ? styles.disabled : ''}`,
         }}
-        disabled
+        disabled={!!isSaving}
       >
         Save Changes
       </PrimaryButton>
@@ -34,6 +59,7 @@ export default class Preferences extends React.Component {
           <div styleName="platform-banner">
             <NewsletterPreferencesContainer
               email={email}
+              ref={this.newsRef}
             />
             <PreferenceList />
           </div>
@@ -44,6 +70,12 @@ export default class Preferences extends React.Component {
   }
 }
 
+Preferences.defaultProps = {
+  isSaving: false,
+};
+
 Preferences.propTypes = {
   profile: PT.shape().isRequired,
+  isSaving: PT.bool,
+  setIsSaving: PT.func.isRequired,
 };
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index 53bf631753..20bfe9fb2d 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -42,6 +42,7 @@ export default function Settings(props) {
   const experienceAndSkillsRef = React.useRef();
   const toolsRef = React.useRef();
   const accountRef = React.useRef();
+  const preferencesRef = React.useRef();
 
   const [isSaving, setIsSaving] = useState(false);
 
@@ -66,10 +67,11 @@ export default function Settings(props) {
               toolsRef.current.save();
             } else if (newProps.settingsTab === TABS.ACCOUNT) {
               accountRef.current.save();
+            } else if (newProps.settingsTab === TABS.PREFERENCES) {
+              preferencesRef.current.save();
             }
           }}
           isSaving={isSaving}
-          isPreferencesTab={newProps.settingsTab === TABS.PREFERENCES}
         />
         <TabSelector activeTab={newProps.settingsTab} tabs={SETTINGS_TABS} selectTab={selectTab} />
         {
@@ -131,7 +133,10 @@ export default function Settings(props) {
           newProps.settingsTab === TABS.PREFERENCES
           && (
             <Preferences
+              ref={preferencesRef}
               {...newProps}
+              isSaving={isSaving}
+              setIsSaving={setIsSaving}
             />
           )
         }
diff --git a/src/shared/containers/NewsletterPreferences.jsx b/src/shared/containers/NewsletterPreferences.jsx
index 18e1ae1063..61895b096c 100644
--- a/src/shared/containers/NewsletterPreferences.jsx
+++ b/src/shared/containers/NewsletterPreferences.jsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 import PT from 'prop-types';
 import { connect } from 'react-redux';
@@ -7,6 +6,11 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import Email from 'components/Settings/Preferences/Email';
 
 class NewsletterPreferencesContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.save = this.save.bind(this);
+  }
+
   componentDidMount() {
     const {
       loading,
@@ -18,6 +22,11 @@ class NewsletterPreferencesContainer extends React.Component {
     }
   }
 
+  save() {
+    const { saveEmailPreferences } = this.props;
+    saveEmailPreferences();
+  }
+
   render() {
     const {
       loading, error, preferences, saveEmailPreferences, email, updated, status,
@@ -87,6 +96,7 @@ function mapDispatchToProps(dispatch) {
 const Container = connect(
   mapStateToProps,
   mapDispatchToProps,
+  null, { withRef: true },
 )(NewsletterPreferencesContainer);
 
 export default Container;

From 2895b85d159a61eade5a2edac7df9b765a452d0e Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 13 Aug 2022 23:29:20 +0700
Subject: [PATCH 23/49] fix: undefined when add school

---
 .../Settings/ProfileSettings/Learning/List/Item/index.jsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx
index c13577e2cd..19fdd9b684 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/index.jsx
@@ -98,7 +98,7 @@ export default function Item(props) {
         </div>
         <div styleName={`education-parameters${hasSecondLine() ? '' : ' single-line'}`}>
           <div styleName={`parameter-first-line${hasSecondLine() ? '' : ' single-line'}`}>
-            { `${education.schoolCollegeName} | ${education.major}`}
+            { education.major ? `${education.schoolCollegeName} | ${education.major}` : `${education.schoolCollegeName}`}
           </div>
           {
             hasSecondLine() && (

From 0ed2ce65560a074a0f9b5ad85515018a0b0de802 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 13 Aug 2022 23:31:58 +0700
Subject: [PATCH 24/49] fix: tests updates

---
 .../shared/components/Settings/__snapshots__/index.jsx.snap   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
index dd649ab368..73f0c5c1d3 100644
--- a/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/Settings/__snapshots__/index.jsx.snap
@@ -14,7 +14,6 @@ exports[`renders account setting page correctly 1`] = `
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
-      isPreferencesTab={false}
       isSaving={false}
       saveSettings={[Function]}
       selectTab={[Function]}
@@ -772,7 +771,6 @@ exports[`renders preferences setting page correctly 1`] = `
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
-      isPreferencesTab={false}
       isSaving={false}
       saveSettings={[Function]}
       selectTab={[Function]}
@@ -1527,7 +1525,6 @@ exports[`renders profile setting page correctly 1`] = `
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
-      isPreferencesTab={false}
       isSaving={false}
       saveSettings={[Function]}
       selectTab={[Function]}
@@ -2288,7 +2285,6 @@ exports[`renders tools setting page correctly 1`] = `
     className="src-shared-components-Settings-___style__page___2zowc"
   >
     <Header
-      isPreferencesTab={false}
       isSaving={false}
       saveSettings={[Function]}
       selectTab={[Function]}

From 3463df22bd5ded789d005dcc5c10e8fa06f83b25 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sat, 13 Aug 2022 23:46:32 +0700
Subject: [PATCH 25/49] fix: description hobbies

---
 src/shared/components/Settings/FormInputText/styles.scss     | 2 ++
 src/shared/components/Settings/FormInputTextArea/styles.scss | 5 ++++-
 .../components/Settings/ProfileSettings/Hobbies/index.jsx    | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/Settings/FormInputText/styles.scss b/src/shared/components/Settings/FormInputText/styles.scss
index 5c0cba94a7..a5e1d34484 100644
--- a/src/shared/components/Settings/FormInputText/styles.scss
+++ b/src/shared/components/Settings/FormInputText/styles.scss
@@ -17,6 +17,8 @@
   &::placeholder {
     color: #767676 !important;
     text-transform: none !important;
+    font-size: 14px !important;
+    opacity: 1 !important;
   }
 
   &:focus {
diff --git a/src/shared/components/Settings/FormInputTextArea/styles.scss b/src/shared/components/Settings/FormInputTextArea/styles.scss
index 132a6f0a59..384f300e12 100644
--- a/src/shared/components/Settings/FormInputTextArea/styles.scss
+++ b/src/shared/components/Settings/FormInputTextArea/styles.scss
@@ -20,8 +20,11 @@
   }
 
   &::placeholder {
-    color: #aaa !important;
+    color: #767676 !important;
     text-transform: none !important;
+    font-size: 14px !important;
+    opacity: 1 !important;
+    font-weight: 400 !important;
   }
 
   &:focus {
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
index 06a820f8fe..20fcdf93ac 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
@@ -57,7 +57,7 @@ const Hobbies = (props) => {
               id="description"
               name="description"
               type="text"
-              placeholder="Shot description about your hobby"
+              placeholder="Short description about your hobby"
               onChange={onUpdateInput}
               value={newHobby.description}
               maxLength="160"

From 59fc76ae35e788fff4655564429518db1151af54 Mon Sep 17 00:00:00 2001
From: lunarkid <d3dyw4hyud1@gmail.com>
Date: Sun, 14 Aug 2022 00:04:13 +0700
Subject: [PATCH 26/49] fix: data not saved on learning

---
 src/shared/components/Settings/ProfileSettings/index.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
index afcbb20490..b044b92e07 100644
--- a/src/shared/components/Settings/ProfileSettings/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -687,13 +687,10 @@ class ProfileSettings extends ConsentComponent {
     }
     if (_.isEmpty(education.timePeriodFrom)) {
       delete education.timePeriodFrom;
-    } else {
-      education.timePeriodFrom = new Date(newEducation.timePeriodFrom).getTime();
     }
+
     if (_.isEmpty(education.timePeriodTo)) {
       delete education.timePeriodTo;
-    } else {
-      education.timePeriodTo = new Date(newEducation.timePeriodTo).getTime();
     }
 
     if (educationTrait.traits && educationTrait.traits.data.length > 0) {

From 994d91509b00c2bd099f6b5a0237fda79c1e1c32 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Mon, 15 Aug 2022 15:29:36 +0700
Subject: [PATCH 27/49] fix: data not retained

---
 .../components/Settings/FormInputText/index.jsx       |  5 +----
 .../components/Settings/ProfileSettings/index.jsx     | 11 -----------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/src/shared/components/Settings/FormInputText/index.jsx b/src/shared/components/Settings/FormInputText/index.jsx
index 687e12cb02..7b69238f63 100644
--- a/src/shared/components/Settings/FormInputText/index.jsx
+++ b/src/shared/components/Settings/FormInputText/index.jsx
@@ -9,25 +9,22 @@ import cn from 'classnames';
 import './styles.scss';
 
 const FormInputText = ({
-  styleName, value, type, ...props
+  styleName, type, ...props
 }) => (
   <input
     type={type}
     styleName={cn('form-input-text', styleName || '')}
     {...props}
-    value={value}
   />
 );
 
 FormInputText.defaultProps = {
   styleName: '',
-  value: null,
   type: 'text',
 };
 
 FormInputText.propTypes = {
   styleName: PT.string,
-  value: PT.string,
   type: PT.string,
 };
 
diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
index b044b92e07..8de70c42b1 100644
--- a/src/shared/components/Settings/ProfileSettings/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -171,13 +171,6 @@ class ProfileSettings extends ConsentComponent {
       endDateInvalid: false,
       endDateInvalidMsg: '',
       isSubmit: false,
-      newEducation: {
-        schoolCollegeName: '',
-        major: '',
-        timePeriodFrom: '',
-        timePeriodTo: '',
-        graduated: false,
-      },
     });
 
     this.setState({
@@ -185,10 +178,6 @@ class ProfileSettings extends ConsentComponent {
       personalizationTrait,
       formInvalidHobby: false,
       isSubmitHobby: false,
-      newHobby: {
-        hobby: '',
-        description: '',
-      },
     });
   }
 

From f73e9078165898c3e9ed0c472b2ce3080e23f42b Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Mon, 15 Aug 2022 16:32:59 +0700
Subject: [PATCH 28/49] fix: calendar arrow

---
 .../components/Settings/FormInputDatePicker/styles.scss       | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/shared/components/Settings/FormInputDatePicker/styles.scss b/src/shared/components/Settings/FormInputDatePicker/styles.scss
index fb36aa79ec..dbcad8c83e 100644
--- a/src/shared/components/Settings/FormInputDatePicker/styles.scss
+++ b/src/shared/components/Settings/FormInputDatePicker/styles.scss
@@ -82,6 +82,10 @@
           box-shadow: none !important;
           cursor: pointer;
 
+          @media screen and (max-width: 425px) {
+            min-width: 100px;
+          }
+
           .Select-value {
             display: flex;
             align-items: center;

From 17551fd38e2208f574d3179d4d94ed719577fe94 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 18 Aug 2022 12:37:43 +0700
Subject: [PATCH 29/49] fix: cant add software from mobile

---
 .../components/Settings/Tools/ServiceProviders/index.jsx      | 4 ----
 src/shared/components/Settings/Tools/Software/index.jsx       | 4 ----
 src/shared/components/Settings/Tools/Subscriptions/index.jsx  | 3 ---
 3 files changed, 11 deletions(-)

diff --git a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
index 252fd1b2d0..7f94c564b0 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
+++ b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
@@ -70,10 +70,6 @@ export default class ServiceProviders extends ConsentComponent {
       personalizationTrait,
       formInvalid: false,
       isSubmit: false,
-      newServiceProvider: {
-        serviceProviderType: '',
-        name: '',
-      },
     });
   }
 
diff --git a/src/shared/components/Settings/Tools/Software/index.jsx b/src/shared/components/Settings/Tools/Software/index.jsx
index b5ce05db4f..d34d36a14d 100644
--- a/src/shared/components/Settings/Tools/Software/index.jsx
+++ b/src/shared/components/Settings/Tools/Software/index.jsx
@@ -70,10 +70,6 @@ export default class Software extends ConsentComponent {
       personalizationTrait,
       formInvalid: false,
       isSubmit: false,
-      newSoftware: {
-        softwareType: '',
-        name: '',
-      },
     });
   }
 
diff --git a/src/shared/components/Settings/Tools/Subscriptions/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
index 60598e2b50..b947faeab6 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/index.jsx
+++ b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
@@ -66,9 +66,6 @@ export default class Subscription extends ConsentComponent {
       personalizationTrait,
       formInvalid: false,
       isSubmit: false,
-      newSubscription: {
-        name: '',
-      },
     });
   }
 

From 3ffc2608ee523d7d6912855c4da36a7517f92140 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 18 Aug 2022 13:00:50 +0700
Subject: [PATCH 30/49] fix: user accounts not loading

---
 src/shared/containers/Settings.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/shared/containers/Settings.jsx b/src/shared/containers/Settings.jsx
index 6ec82dcd78..d567e24db8 100644
--- a/src/shared/containers/Settings.jsx
+++ b/src/shared/containers/Settings.jsx
@@ -125,6 +125,7 @@ function mapStateToProps(state) {
     handle: _.get(state.auth, 'user.handle'),
     tokenV3: state.auth.tokenV3,
     profile: state.auth.profile,
+    user: state.auth.user,
     lookupData: state.lookup,
     profileState: state.profile,
     loadingError: state.profile.loadingError,
@@ -145,6 +146,7 @@ function mapDispatchToProps(dispatch) {
     profile,
     tokenV3,
     settingsTab,
+    user,
   }) => {
     dispatch(profileActions.loadProfile(handle));
     if (settingsTab === TABS.PROFILE) {
@@ -157,9 +159,17 @@ function mapDispatchToProps(dispatch) {
       // Deprecated. Leaving it here as reminder to update topcoder-react-lib as well
       // dispatch(profileActions.getEmailPreferencesDone(profile, tokenV3));
     } else if (settingsTab === TABS.ACCOUNT) {
-      dispatch(profileActions.getLinkedAccountsDone(profile, tokenV3));
+      if (profile.userId) {
+        dispatch(profileActions.getLinkedAccountsDone(profile, tokenV3));
+      } else if (user.userId) {
+        dispatch(profileActions.getLinkedAccountsDone(user, tokenV3));
+      }
       dispatch(profileActions.getExternalLinksDone(handle));
-      dispatch(profileActions.getCredentialDone(profile, tokenV3));
+      if (profile.userId) {
+        dispatch(profileActions.getCredentialDone(profile, tokenV3));
+      } else if (user.userId) {
+        dispatch(profileActions.getCredentialDone(user, tokenV3));
+      }
     } else if (settingsTab === TABS.TOOLS) {
       dispatch(lookupActions.getTypesInit());
       dispatch(lookupActions.getTypesDone());

From 760aeec6f1b3127b837a0b491871440a93bc5b21 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 18 Aug 2022 13:27:41 +0700
Subject: [PATCH 31/49] fix: wrong url payment button

---
 src/shared/components/Settings/Preferences/List/data.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/Settings/Preferences/List/data.jsx b/src/shared/components/Settings/Preferences/List/data.jsx
index c59e4e375c..cea39e7f5f 100644
--- a/src/shared/components/Settings/Preferences/List/data.jsx
+++ b/src/shared/components/Settings/Preferences/List/data.jsx
@@ -17,7 +17,7 @@ const data = [
     icon: payment,
     name: 'Payment',
     description: 'To setup your payments preferences, please click the “Go To Payments” button.',
-    link: `${config.URL.COMMUNITY}/tc?module=EditPaymentPreferences`,
+    link: `${config.URL.COMMUNITY}/PactsMemberServlet?module=PaymentHistory&full_list=false`,
     linkTitle: 'GO TO PAYMENTS',
   },
 ];

From 043e6ce8810a5af49748f3a1a8e4aade8b37befb Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 18 Aug 2022 13:57:28 +0700
Subject: [PATCH 32/49] fix: add link style

---
 .../Settings/ExperienceAndSkills/WorkExperience/styles.scss     | 2 +-
 .../ExperienceAndSkills/WorkSkills/Languages/styles.scss        | 2 +-
 .../Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss  | 2 +-
 src/shared/components/Settings/Tools/Devices/styles.scss        | 2 +-
 .../components/Settings/Tools/ServiceProviders/styles.scss      | 2 +-
 src/shared/components/Settings/Tools/Software/styles.scss       | 2 +-
 src/shared/components/Settings/Tools/Subscriptions/styles.scss  | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss
index e521332197..5ebf2df8c6 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/styles.scss
@@ -71,7 +71,7 @@
     @include roboto-bold;
 
     font-size: 14px;
-    line-height: 22px;
+    line-height: 14px;
     color: $color-turq-160;
     min-height: 0;
     margin: 0;
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss
index 9dea6eda02..b60b935439 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/styles.scss
@@ -54,7 +54,7 @@
     @include roboto-bold;
 
     font-size: 14px;
-    line-height: 22px;
+    line-height: 14px;
     color: $color-turq-160;
     min-height: 0;
     margin: 0;
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss
index 7ef85b7b48..f1482d4522 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/styles.scss
@@ -96,7 +96,7 @@
     @include roboto-bold;
 
     font-size: 14px;
-    line-height: 22px;
+    line-height: 14px;
     color: $color-turq-160;
     min-height: 0;
     margin: 0;
diff --git a/src/shared/components/Settings/Tools/Devices/styles.scss b/src/shared/components/Settings/Tools/Devices/styles.scss
index 4dc00db6b0..c37516d5eb 100644
--- a/src/shared/components/Settings/Tools/Devices/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/styles.scss
@@ -55,7 +55,7 @@
     @include roboto-bold;
 
     font-size: 14px;
-    line-height: 22px;
+    line-height: 14px;
     color: $color-turq-160;
     min-height: 0;
     margin: 0;
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
index 45b5cfc5ac..bb83ee57d8 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
+++ b/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
@@ -56,7 +56,7 @@
     @include roboto-bold;
 
     font-size: 14px;
-    line-height: 22px;
+    line-height: 14px;
     text-align: left;
     color: $color-turq-160;
     min-height: 0;
diff --git a/src/shared/components/Settings/Tools/Software/styles.scss b/src/shared/components/Settings/Tools/Software/styles.scss
index 0102857ec3..b39a854adb 100644
--- a/src/shared/components/Settings/Tools/Software/styles.scss
+++ b/src/shared/components/Settings/Tools/Software/styles.scss
@@ -55,7 +55,7 @@
     @include roboto-bold;
 
     font-size: 14px;
-    line-height: 22px;
+    line-height: 14px;
     color: $color-turq-160;
     min-height: 0;
     margin: 0;
diff --git a/src/shared/components/Settings/Tools/Subscriptions/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/styles.scss
index 3bf3bf2f12..f99f50c91a 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/styles.scss
+++ b/src/shared/components/Settings/Tools/Subscriptions/styles.scss
@@ -56,7 +56,7 @@
     @include roboto-bold;
 
     font-size: 14px;
-    line-height: 22px;
+    line-height: 14px;
     color: $color-turq-160;
     min-height: 0;
     margin: 0;

From fdd83de3b10339e8104ad5e9ef34fdbd18f52f65 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 18 Aug 2022 14:17:29 +0700
Subject: [PATCH 33/49] fix: edit and delete tooltip style

---
 .../WorkExperience/WorkplaceList/Item/styles.scss              | 2 +-
 .../WorkSkills/Languages/List/Item/styles.scss                 | 2 +-
 .../Settings/ProfileSettings/Hobbies/List/Item/styles.scss     | 2 +-
 .../Settings/ProfileSettings/Learning/List/Item/styles.scss    | 2 +-
 .../components/Settings/Tools/Devices/List/Item/styles.scss    | 2 +-
 .../Settings/Tools/ServiceProviders/List/Item/styles.scss      | 2 +-
 .../components/Settings/Tools/Software/List/Item/styles.scss   | 2 +-
 .../Settings/Tools/Subscriptions/List/Item/styles.scss         | 2 +-
 src/styles/_mixins/_variables.scss                             | 3 +++
 9 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss
index 7174a0ee52..6e017384ab 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/WorkplaceList/Item/styles.scss
@@ -102,7 +102,7 @@
 }
 
 .tctooltiptext {
-  background: $tc-black;
+  background: $tooltip-gray;
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss
index 1c2e121e06..4744847f5e 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/List/Item/styles.scss
@@ -106,7 +106,7 @@
 }
 
 .tctooltiptext {
-  background: $tc-black;
+  background: $tooltip-gray;
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss
index 07c52fda03..6ec48cef73 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/List/Item/styles.scss
@@ -88,7 +88,7 @@
 }
 
 .tctooltiptext {
-  background: $tc-black;
+  background: $tooltip-gray;
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss
index aec47c1bbe..6cdaa4ebb3 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss
+++ b/src/shared/components/Settings/ProfileSettings/Learning/List/Item/styles.scss
@@ -106,7 +106,7 @@
 }
 
 .tctooltiptext {
-  background: $tc-black;
+  background: $tooltip-gray;
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
diff --git a/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss b/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
index 9b2f3ad798..d5d2893f7a 100644
--- a/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
@@ -104,7 +104,7 @@
 }
 
 .tctooltiptext {
-  background: $tc-black;
+  background: $tooltip-gray;
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss
index dda11f7e8c..2dd0a796d8 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss
@@ -104,7 +104,7 @@
 }
 
 .tctooltiptext {
-  background: $tc-black;
+  background: $tooltip-gray;
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
diff --git a/src/shared/components/Settings/Tools/Software/List/Item/styles.scss b/src/shared/components/Settings/Tools/Software/List/Item/styles.scss
index 001c63056f..2cfbd41f53 100644
--- a/src/shared/components/Settings/Tools/Software/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Software/List/Item/styles.scss
@@ -104,7 +104,7 @@
 }
 
 .tctooltiptext {
-  background: $tc-black;
+  background: $tooltip-gray;
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
diff --git a/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss
index a8ac6262b9..4be737d917 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss
@@ -110,7 +110,7 @@
 }
 
 .tctooltiptext {
-  background: $tc-black;
+  background: $tooltip-gray;
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
diff --git a/src/styles/_mixins/_variables.scss b/src/styles/_mixins/_variables.scss
index 112a41a57f..9adca41cb3 100644
--- a/src/styles/_mixins/_variables.scss
+++ b/src/styles/_mixins/_variables.scss
@@ -46,6 +46,9 @@ $profile-skill-badge: #227681;
 $profile-member-wins: #1e94a3;
 $profile-border-gray: #e9e9e9;
 
+/* tooltip colors */
+$tooltip-gray: #222;
+
 /// https://github.com/topcoder-platform/mfe-customer-work/src-ts/lib/styles/variables/_palette.scss
 @import "variables-platform-ui";
 

From 3d2e922ec12e32d90e7817d2b3a7bba852b161d6 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 18 Aug 2022 17:03:55 +0700
Subject: [PATCH 34/49] fix: input, dropdown, textarea colors

---
 .../components/GUIKit/Datepicker/style.scss   |  6 +++---
 .../Settings/FormInputText/styles.scss        |  2 +-
 .../Settings/FormInputTextArea/styles.scss    |  2 +-
 .../Settings/Tools/Devices/index.jsx          | 21 ++++++++++---------
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/shared/components/GUIKit/Datepicker/style.scss b/src/shared/components/GUIKit/Datepicker/style.scss
index 88a1f20494..52aadf87a9 100644
--- a/src/shared/components/GUIKit/Datepicker/style.scss
+++ b/src/shared/components/GUIKit/Datepicker/style.scss
@@ -73,7 +73,7 @@
         width: 100%;
         font-family: "Roboto", Helvetica, Arial, sans-serif;
         font-weight: 400;
-        font-size: 15px;
+        font-size: 14px;
         margin: 0;
         background: #fff;
         position: relative;
@@ -81,8 +81,8 @@
         vertical-align: middle;
 
         input {
-          @include textInput;
-
+          font-size: 14px;
+          text-transform: capitalize;
           height: 52px;
           padding-right: 48px;
         }
diff --git a/src/shared/components/Settings/FormInputText/styles.scss b/src/shared/components/Settings/FormInputText/styles.scss
index a5e1d34484..a51a2f8ec7 100644
--- a/src/shared/components/Settings/FormInputText/styles.scss
+++ b/src/shared/components/Settings/FormInputText/styles.scss
@@ -3,7 +3,7 @@
 .form-input-text {
   background-color: #fff !important;
   box-sizing: border-box !important;
-  color: #767676 !important;
+  color: #2a2a2a !important;
   font-size: 14px !important;
   height: 48px !important;
   outline: none !important;
diff --git a/src/shared/components/Settings/FormInputTextArea/styles.scss b/src/shared/components/Settings/FormInputTextArea/styles.scss
index 384f300e12..dc8cae72a0 100644
--- a/src/shared/components/Settings/FormInputTextArea/styles.scss
+++ b/src/shared/components/Settings/FormInputTextArea/styles.scss
@@ -3,7 +3,7 @@
 .form-input-text-area {
   background-color: #fff !important;
   box-sizing: border-box !important;
-  color: #767676 !important;
+  color: #2a2a2a !important;
   font-size: 14px !important;
   outline: none !important;
   border: 1px solid #aaa !important;
diff --git a/src/shared/components/Settings/Tools/Devices/index.jsx b/src/shared/components/Settings/Tools/Devices/index.jsx
index cd1586ed06..ff81cd191b 100644
--- a/src/shared/components/Settings/Tools/Devices/index.jsx
+++ b/src/shared/components/Settings/Tools/Devices/index.jsx
@@ -15,7 +15,7 @@ import FormField from 'components/Settings/FormField';
 import AddItemIcon from 'assets/images/settings-add-item.svg';
 import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
 import { PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit';
-import InputSelect from 'components/InputSelect';
+import FormInputSelect from 'components/Settings/FormInputSelect';
 import { toastr } from 'react-redux-toastr';
 import ConfirmationModal from '../../ConfirmationModal';
 import DeviceList from './List';
@@ -299,14 +299,14 @@ export default class Devices extends ConsentComponent {
       getManufacturers,
     } = this.props;
 
-    const newDevice = { deviceType: val };
+    const newDevice = { deviceType: val.name };
     newDevice.manufacturer = '';
     newDevice.model = '';
     newDevice.operatingSystem = '';
     this.setState({ newDevice, isSubmit: false });
 
     // preload manufacturers
-    getManufacturers(val);
+    getManufacturers(val.name);
   }
 
   /**
@@ -319,7 +319,7 @@ export default class Devices extends ConsentComponent {
     } = this.props;
     const { newDevice: device } = this.state;
     const newDevice = { ..._.pick(device, ['deviceType']) };
-    newDevice.manufacturer = val;
+    newDevice.manufacturer = val.name;
     newDevice.model = '';
     newDevice.operatingSystem = '';
     this.setState({ newDevice, isSubmit: false });
@@ -338,7 +338,7 @@ export default class Devices extends ConsentComponent {
     } = this.props;
     const { newDevice: device } = this.state;
     const newDevice = { ..._.pick(device, ['deviceType', 'manufacturer']) };
-    newDevice.model = val;
+    newDevice.model = val.model;
     newDevice.operatingSystem = '';
     this.setState({ newDevice, isSubmit: false });
 
@@ -353,7 +353,7 @@ export default class Devices extends ConsentComponent {
   onUpdateOs(val) {
     const { newDevice: device } = this.state;
     const newDevice = { ..._.pick(device, ['deviceType', 'manufacturer', 'model']) };
-    newDevice.operatingSystem = val;
+    newDevice.operatingSystem = val.operatingSystem;
     this.setState({ newDevice, isSubmit: false });
   }
 
@@ -462,6 +462,7 @@ export default class Devices extends ConsentComponent {
       ? deviceTrait.traits.data.slice() : [];
     const { newDevice } = this.state;
     const canModifyTrait = !this.props.traitRequestCount;
+
     return (
       <React.Fragment>
         {
@@ -497,7 +498,7 @@ export default class Devices extends ConsentComponent {
               <div styleName="form-body">
                 <form styleName="device-form" noValidate autoComplete="off">
                   <FormField label="Device Type *" style={{ flex: '0 0 100%' }}>
-                    <InputSelect
+                    <FormInputSelect
                       name="Device Type"
                       options={types}
                       value={newDevice.deviceType}
@@ -520,7 +521,7 @@ export default class Devices extends ConsentComponent {
                   </FormField>
 
                   <FormField label="Manufacturer" style={{ flex: '0 0 100%' }}>
-                    <InputSelect
+                    <FormInputSelect
                       name="manufacturer"
                       options={manufacturers}
                       value={newDevice.manufacturer}
@@ -534,7 +535,7 @@ export default class Devices extends ConsentComponent {
                   </FormField>
 
                   <FormField label="Model" style={{ flex: '0 0 100%' }}>
-                    <InputSelect
+                    <FormInputSelect
                       name="model"
                       options={models}
                       onChange={this.onUpdateModel}
@@ -551,7 +552,7 @@ export default class Devices extends ConsentComponent {
                   </FormField>
 
                   <FormField label="Operating System" style={{ flex: '0 0 100%' }}>
-                    <InputSelect
+                    <FormInputSelect
                       name="Operating System"
                       options={oses}
                       onChange={this.onUpdateOs}

From 828bb958093d977a310dd78664e036dbd3ab96ab Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 18 Aug 2022 19:03:22 +0700
Subject: [PATCH 35/49] fix: top tab style fixes

---
 .../components/Settings/TabSelector/styles.scss    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/Settings/TabSelector/styles.scss b/src/shared/components/Settings/TabSelector/styles.scss
index 0c336a8c13..23a33b54fa 100644
--- a/src/shared/components/Settings/TabSelector/styles.scss
+++ b/src/shared/components/Settings/TabSelector/styles.scss
@@ -29,8 +29,8 @@
     background-color: #bae1f9;
 
     p {
-      color: $tco-black;
-      font-weight: 700;
+      color: $tc-black;
+      font-weight: 600;
     }
   }
 }
@@ -64,8 +64,10 @@
   /* stylelint-enable no-descending-specificity */
 
   .active {
+    @include barlow;
+
     color: $tc-black;
-    font-weight: 700;
+    font-weight: 600;
     background-color: #bae1f9;
 
     &::after {
@@ -78,7 +80,7 @@
       z-index: 100;
       display: block;
       position: absolute;
-      top: 160px;
+      top: 159px;
     }
   }
 }
@@ -96,8 +98,8 @@
   .title {
     @include barlow-bold;
 
-    font-weight: 700;
-    color: $tco-black;
+    font-weight: 600;
+    color: $tc-black;
     font-size: 14px;
     line-height: 20px;
     text-transform: uppercase;

From f8ad0e764544af35b311ba6739014e1ee04fc0df Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 18 Aug 2022 19:19:50 +0700
Subject: [PATCH 36/49] fix: delete modal window style

---
 .../Settings/ConfirmationModal/index.jsx      |  37 ++-
 .../Settings/ConfirmationModal/styles.scss    | 232 +++++++++++-------
 .../Settings/ProfileSettings/index.jsx        |   4 +-
 3 files changed, 175 insertions(+), 98 deletions(-)

diff --git a/src/shared/components/Settings/ConfirmationModal/index.jsx b/src/shared/components/Settings/ConfirmationModal/index.jsx
index d97fd8164e..5223a9e5b5 100644
--- a/src/shared/components/Settings/ConfirmationModal/index.jsx
+++ b/src/shared/components/Settings/ConfirmationModal/index.jsx
@@ -1,24 +1,35 @@
 import React from 'react';
 import PT from 'prop-types';
-import { Modal, PrimaryButton, GhostButton } from 'topcoder-react-ui-kit';
-import modal from './styles.scss';
+import {
+  Modal, PrimaryButton, Button, GhostButton,
+} from 'topcoder-react-ui-kit';
+import IconClose from 'assets/images/icon-close.svg';
+
+import styles from './styles.scss';
 
 export default function ConfirmationModal(props) {
   const { onConfirm, onCancel, name } = props;
   return (
-    <Modal theme={modal}>
-      <div styleName="modal.deletion-confirmation-container">
-        <div styleName="modal.deletion-confirmation">
-          <div styleName="modal.deletion-confirmation-title">HEADS UP!</div>
-          <div styleName="modal.deletion-confirmation-message">
-            Are you sure you want to delete `{name}`? This action can&apos;t be undone.
+    <Modal theme={{ container: styles.modal, overlay: styles['modal-overlay'] }}>
+      <div styleName="modal-dialog">
+        <div styleName="modal-content">
+          <div styleName="modal-header">
+            HEADS UP!
+            <GhostButton theme={{ button: styles.close }} onClick={onCancel}>
+              <IconClose />
+            </GhostButton>
+          </div>
+          <div styleName="modal-body">
+            <span styleName="title">
+              Are you sure you want to delete `{name}`? This action can&apos;t be undone.
+            </span>
           </div>
-          <div styleName="modal.deletion-confirmation-buttons">
-            <div styleName="modal.deletion-confirmation-button-yes">
-              <GhostButton onClick={onConfirm}>Yes, Delete</GhostButton>
+          <div styleName="modal-footer">
+            <div>
+              <PrimaryButton theme={{ button: styles['button-save'] }} onClick={onConfirm}>Yes, Delete</PrimaryButton>
             </div>
-            <div styleName="modal.deletion-confirmation-button-no">
-              <PrimaryButton onClick={onCancel}>Cancel</PrimaryButton>
+            <div>
+              <Button theme={{ button: styles['button-save-ghost'] }} onClick={onCancel}>Cancel</Button>
             </div>
           </div>
         </div>
diff --git a/src/shared/components/Settings/ConfirmationModal/styles.scss b/src/shared/components/Settings/ConfirmationModal/styles.scss
index 7b980ce569..0cb34456ae 100644
--- a/src/shared/components/Settings/ConfirmationModal/styles.scss
+++ b/src/shared/components/Settings/ConfirmationModal/styles.scss
@@ -1,120 +1,186 @@
 @import "~styles/mixins";
 
-.overlay {
-  background-color: #2a2a2a !important;
-  opacity: 0.95;
+.modal-overlay {
+  background-color: rgba($color-tc-black, 0.85);
 }
 
-.container {
-  @include roboto-regular;
-
-  padding: 0;
-  position: fixed;
-  overflow: auto;
-  z-index: 10000;
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  border-radius: 8px;
+  overflow-y: auto;
+  background: none;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
-  box-sizing: border-box;
-  width: auto;
-  max-width: none;
   transform: none;
-  background: transparent;
 
-  .deletion-confirmation-container {
-    background: transparent;
-    opacity: 1;
-    position: relative;
-    padding: 30px;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border-radius: 0;
-    color: #444;
-    font-family: Helvetica, sans-serif;
-    font-size: 1.1em;
-    line-height: 1.5em;
-    margin: 0 auto;
-    max-width: 100%;
+  .close {
+    padding: 0;
+    margin: 0 0 0 auto;
+    min-height: 0;
   }
 }
 
-.deletion-confirmation {
+.modal-dialog {
+  flex: 0 0 auto;
   display: flex;
-  flex-flow: column wrap;
-  justify-content: space-around;
-  align-items: center;
-  background-color: $tc-white;
-  opacity: 1;
-  border-radius: 4px;
-  padding: 40px;
-  max-width: 100%;
+  flex-direction: column;
+  margin: auto;
 }
 
-@media (min-width: 768px) {
-  .deletion-confirmation {
-    width: 520px;
-    min-height: 256px;
-  }
+.modal-content {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+  color: $color-black-100;
+  max-width: 794px;
+  background-color: $color-tc-white;
+  border-radius: 8px;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  margin: 32px;
+  width: calc(100% - 64px);
 }
 
-.deletion-confirmation-title {
-  @include roboto-medium;
+.modal-header {
+  @include roboto-bold;
 
-  font-size: 20px;
-  line-height: 24px;
-  color: $tc-gray-90;
+  font-size: 34px;
+  line-height: 32px;
+  font-weight: 500;
   text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  padding: $pad-xxxl $pad-xxxxl $pad-xxxxl;
+  border-radius: 8px 8px 0 0;
 }
 
-.deletion-confirmation-message {
-  @include merriweather-sans-light;
+.modal-body {
+  @include roboto-bold;
 
-  margin: 10px 0;
-  width: 100%;
-  text-align: center;
+  flex: auto;
+  display: flex;
+  padding: 0 $pad-xxxxl;
+
+  .title {
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+    padding-bottom: 10px;
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    border-radius: 8px 8px 0 0;
 
-  .deletion-confirmation-account-title {
-    font-style: italic;
-    word-wrap: break-word;
+    @include xs-to-sm {
+      font-size: 16px;
+    }
   }
 }
 
-.deletion-confirmation-buttons {
+.modal-footer {
   display: flex;
-  flex-flow: row wrap;
+  flex-direction: row-reverse;
+  align-items: flex-end;
+  padding: $pad-xxxxl 0;
+  margin: $margin-xxxl $margin-xxxxl 0;
+  border-top: 2px solid $color-black-10;
+  border-radius: 0 0 8px 8px;
+
+  @include xs-to-md {
+    padding: $pad-lg;
+    margin: 0 $margin-lg 0;
+  }
+}
+
+@include xs-to-md {
+  .modal {
+    padding: 0 20px;
+    overflow-y: auto;
+    height: 100%;
+    max-height: 100%;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    z-index: 999999;
+  }
 
-  .deletion-confirmation-button-no {
-    margin-left: 10px;
+  .modal-content {
+    min-height: 120px;
+  }
 
-    button {
-      text-transform: uppercase;
-      height: 40px;
+  .modal-header {
+    @include roboto-bold;
 
-      @include roboto-medium;
+    font-size: 16px;
+    line-height: 20px;
+    padding: $pad-lg;
+    border-radius: 0;
+  }
 
-      font-size: 12px;
-    }
+  .modal-body {
+    padding: 0 $pad-lg;
+    flex-direction: column;
   }
 
-  .deletion-confirmation-button-yes {
-    button {
-      border: 1px solid $tc-dark-blue;
-      text-transform: uppercase;
-      height: 40px;
+  .modal-footer {
+    padding: $pad-lg;
+    margin: 0 $margin-lg 0;
+    border-radius: 0;
+  }
+}
 
-      @include roboto-medium;
+@include xs-to-sm {
+  .modal-content {
+    width: 100%;
+    margin: 0;
+    border-radius: 0;
+  }
+}
 
-      font-size: 12px;
+.button-save-ghost {
+  @include roboto-bold;
 
-      &:hover {
-        color: $tc-white;
-        background-color: $tc-dark-blue;
-      }
-    }
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  border-radius: 50px !important;
+  color: #2a2a2a !important;
+  text-transform: uppercase;
+  background-color: #fff !important;
+  border: 1px solid #2a2a2a !important;
+
+  &:hover {
+    background-color: #fff !important;
+    background-image: none !important;
+    border-color: #2a2a2a !important;
+  }
+
+  @include xs-to-md {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.button-save {
+  @include roboto-bold;
+
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  border-radius: 50px !important;
+  background: $color-turq-160 !important;
+  color: $color-tc-white !important;
+  text-transform: uppercase;
+
+  @include xs-to-md {
+    font-size: 14px;
+    line-height: 20px;
   }
 }
diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
index 8de70c42b1..62707bea2e 100644
--- a/src/shared/components/Settings/ProfileSettings/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -1049,8 +1049,8 @@ class ProfileSettings extends ConsentComponent {
             showConfirmationHobby && (
               <ConfirmationModal
                 onConfirm={() => this.showConsent(this.onDeleteHobby.bind(this, indexNoHobby))}
-                onCancel={() => this.setState({ showConfirmation: false, indexNoHobby: null })}
-                name={hobbyTrait.traits.data[indexNoHobby].hobby}
+                onCancel={() => this.setState({ showConfirmationHobby: false, indexNoHobby: null })}
+                name={indexNoHobby ? hobbyTrait.traits.data[indexNoHobby].hobby : ''}
               />
             )
           }

From 94037dc25e27ceb0ca50e26422f6e4949067eb51 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Fri, 19 Aug 2022 09:17:23 +0700
Subject: [PATCH 37/49] fix: rename label

---
 .../Settings/ExperienceAndSkills/WorkExperience/index.jsx       | 2 +-
 .../components/Settings/ProfileSettings/Learning/index.jsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
index fd009111f8..5b0044abbf 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
@@ -489,7 +489,7 @@ export default class Work extends ConsentComponent {
                         name="industry"
                         value={newWork.industry}
                         onChange={this.onUpdateInput}
-                        placeholder="Select industry"
+                        placeholder="Enter industry"
                         maxLength="64"
                       />
                     </FormField>
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
index b7cdd3d7b7..efda981657 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
@@ -160,7 +160,7 @@ const Learning = (props) => {
               styleName="edit-text"
               onClick={onHandleAddEducation}
             >
-              <AddItemIcon /> Add Another School / Degree
+              <AddItemIcon /> Add School / Degree
             </span>
           )}
 

From aca0733802eb2a5438bfec73e8e6c8e4d0a6153e Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Fri, 19 Aug 2022 09:32:23 +0700
Subject: [PATCH 38/49] fix: textarea character counter

---
 .../components/Settings/FormField/index.jsx   |  6 ++--
 .../components/Settings/FormField/styles.scss |  4 +++
 .../Settings/FormInputTextArea/index.jsx      | 28 ++++++++++++++-----
 .../Settings/FormInputTextArea/styles.scss    | 14 ++++++++++
 .../ProfileSettings/AboutYou/index.jsx        |  2 +-
 src/shared/components/Settings/style.scss     |  6 ----
 6 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/shared/components/Settings/FormField/index.jsx b/src/shared/components/Settings/FormField/index.jsx
index d81430842f..ffb11a631e 100644
--- a/src/shared/components/Settings/FormField/index.jsx
+++ b/src/shared/components/Settings/FormField/index.jsx
@@ -9,11 +9,11 @@ import cn from 'classnames';
 import './styles.scss';
 
 const FormField = ({
-  children, label = '', disabled, style,
+  children, label = '', disabled, style, isTextarea,
 }) => (
   <div styleName="form-field-wrapper" style={style}>
     <div styleName="form-field">
-      <div styleName={cn('label', disabled ? 'disabled' : null)} role="presentation">
+      <div styleName={cn('label', { disabled, isTextarea })} role="presentation">
         {label}
       </div>
       {children}
@@ -26,6 +26,7 @@ FormField.defaultProps = {
   children: null,
   disabled: false,
   style: {},
+  isTextarea: false,
 };
 
 FormField.propTypes = {
@@ -33,6 +34,7 @@ FormField.propTypes = {
   children: PT.node,
   disabled: PT.bool,
   style: PT.object,
+  isTextarea: PT.bool,
 };
 
 export default FormField;
diff --git a/src/shared/components/Settings/FormField/styles.scss b/src/shared/components/Settings/FormField/styles.scss
index fd70027cfb..9ad251ffb4 100644
--- a/src/shared/components/Settings/FormField/styles.scss
+++ b/src/shared/components/Settings/FormField/styles.scss
@@ -29,6 +29,10 @@
       &.disabled {
         color: $color-black-60;
       }
+
+      &.isTextarea {
+        top: 10px;
+      }
     }
   }
 }
diff --git a/src/shared/components/Settings/FormInputTextArea/index.jsx b/src/shared/components/Settings/FormInputTextArea/index.jsx
index a1e6ad7825..e79fcc9892 100644
--- a/src/shared/components/Settings/FormInputTextArea/index.jsx
+++ b/src/shared/components/Settings/FormInputTextArea/index.jsx
@@ -8,20 +8,34 @@ import PT from 'prop-types';
 import cn from 'classnames';
 import './styles.scss';
 
-const FormInputTextArea = ({ styleName, ...props }) => (
-  <textarea
-    type="text"
-    styleName={cn('form-input-text-area', styleName || '')}
-    {...props}
-  />
-);
+const FormInputTextArea = ({ styleName, ...props }) => {
+  const { value } = props;
+
+  return (
+    <div>
+      <span styleName="char-count">
+        {(value && value.length) || 0}
+        <span styleName="grey">
+    &nbsp;/ 240
+        </span>
+      </span>
+      <textarea
+        type="text"
+        styleName={cn('form-input-text-area', styleName || '')}
+        {...props}
+      />
+    </div>
+  );
+};
 
 FormInputTextArea.defaultProps = {
   styleName: {},
+  value: null,
 };
 
 FormInputTextArea.propTypes = {
   styleName: PT.shape(),
+  value: PT.string,
 };
 
 export default FormInputTextArea;
diff --git a/src/shared/components/Settings/FormInputTextArea/styles.scss b/src/shared/components/Settings/FormInputTextArea/styles.scss
index dc8cae72a0..37cf58547b 100644
--- a/src/shared/components/Settings/FormInputTextArea/styles.scss
+++ b/src/shared/components/Settings/FormInputTextArea/styles.scss
@@ -31,3 +31,17 @@
     box-shadow: none !important;
   }
 }
+
+.char-count {
+  @include roboto-regular;
+
+  position: absolute;
+  right: 0;
+  top: 10px;
+  font-size: 11px;
+  padding-right: 5px;
+}
+
+.grey {
+  color: $tc-gray-40;
+}
diff --git a/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
index b7e3251559..747073bdb8 100644
--- a/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx
@@ -38,7 +38,7 @@ const AboutYou = (props) => {
           </FormField>
 
           {/* Primary interests */}
-          <FormField label="Short bio">
+          <FormField label="Short bio" isTextarea>
             <FormInputTextArea
               disabled={!canModifyTrait}
               id="description"
diff --git a/src/shared/components/Settings/style.scss b/src/shared/components/Settings/style.scss
index 37f7c1c196..31b057118b 100644
--- a/src/shared/components/Settings/style.scss
+++ b/src/shared/components/Settings/style.scss
@@ -300,12 +300,6 @@ $checkbox-bg-selected: $tc-dark-blue;
           text-transform: none;
         }
 
-        .char-count {
-          float: right;
-          font-size: 11px;
-          padding-right: 5px;
-        }
-
         .grey {
           color: $tc-gray-40;
         }

From 72d90dec82776d9af4c022a7e9394b9ddc05960c Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Fri, 19 Aug 2022 17:36:11 +0700
Subject: [PATCH 39/49] fix: missing asterisk

---
 .../Settings/ExperienceAndSkills/WorkExperience/index.jsx   | 2 +-
 .../ExperienceAndSkills/WorkSkills/Languages/index.jsx      | 2 +-
 src/shared/components/Settings/FormField/index.jsx          | 5 ++++-
 src/shared/components/Settings/FormField/styles.scss        | 5 +++++
 .../components/Settings/ProfileSettings/Hobbies/index.jsx   | 2 +-
 .../components/Settings/ProfileSettings/Learning/index.jsx  | 2 +-
 .../Settings/ProfileSettings/PersonalDetails/index.jsx      | 6 +++---
 src/shared/components/Settings/Tools/Devices/index.jsx      | 2 +-
 .../components/Settings/Tools/ServiceProviders/index.jsx    | 4 ++--
 src/shared/components/Settings/Tools/Software/index.jsx     | 4 ++--
 .../components/Settings/Tools/Subscriptions/index.jsx       | 2 +-
 11 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
index fd009111f8..58e19d8c3f 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
@@ -451,7 +451,7 @@ export default class Work extends ConsentComponent {
                 </div>
                 <div styleName="form-body">
                   <form styleName="workplace-form" noValidate autoComplete="off">
-                    <FormField label="Company *" style={{ flex: '0 0 100%' }}>
+                    <FormField label="Company" style={{ flex: '0 0 100%' }} required>
                       <FormInputText
                         id="company"
                         name="company"
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
index fe9251bd52..4721e00de2 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
@@ -376,7 +376,7 @@ export default class Languages extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="language-form" noValidate autoComplete="off">
-                  <FormField label="Language *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Language" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="language"
                       options={dropdowns.language}
diff --git a/src/shared/components/Settings/FormField/index.jsx b/src/shared/components/Settings/FormField/index.jsx
index d81430842f..a32768dc6b 100644
--- a/src/shared/components/Settings/FormField/index.jsx
+++ b/src/shared/components/Settings/FormField/index.jsx
@@ -9,12 +9,13 @@ import cn from 'classnames';
 import './styles.scss';
 
 const FormField = ({
-  children, label = '', disabled, style,
+  children, label = '', disabled, style, required,
 }) => (
   <div styleName="form-field-wrapper" style={style}>
     <div styleName="form-field">
       <div styleName={cn('label', disabled ? 'disabled' : null)} role="presentation">
         {label}
+        { required && <span styleName="required">*</span> }
       </div>
       {children}
     </div>
@@ -26,6 +27,7 @@ FormField.defaultProps = {
   children: null,
   disabled: false,
   style: {},
+  required: false,
 };
 
 FormField.propTypes = {
@@ -33,6 +35,7 @@ FormField.propTypes = {
   children: PT.node,
   disabled: PT.bool,
   style: PT.object,
+  required: PT.bool,
 };
 
 export default FormField;
diff --git a/src/shared/components/Settings/FormField/styles.scss b/src/shared/components/Settings/FormField/styles.scss
index fd70027cfb..699071b122 100644
--- a/src/shared/components/Settings/FormField/styles.scss
+++ b/src/shared/components/Settings/FormField/styles.scss
@@ -29,6 +29,11 @@
       &.disabled {
         color: $color-black-60;
       }
+
+      .required {
+        color: $member-red;
+        margin-left: 5px;
+      }
     }
   }
 }
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
index 20fcdf93ac..59f283a31d 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
@@ -32,7 +32,7 @@ const Hobbies = (props) => {
       <div styleName="form-container-default">
         <form name="device-form" noValidate autoComplete="off">
           {/* Hobby */}
-          <FormField label="Hobby">
+          <FormField label="Hobby" required>
             <FormInputText
               id="hobby"
               name="hobby"
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
index b7cdd3d7b7..db9064c0a8 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
@@ -38,7 +38,7 @@ const Learning = (props) => {
       <div styleName="form-container-default">
         <form name="device-form" noValidate autoComplete="off">
           {/* Name of College or University */}
-          <FormField label="Name of College or University">
+          <FormField label="Name of College or University" required>
             <FormInputText
               id="schoolCollegeName"
               name="schoolCollegeName"
diff --git a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
index fc833fe413..88c7b0d6f7 100644
--- a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
@@ -34,7 +34,7 @@ const PersonalDetails = (props) => {
         <form name="basic-info-form" noValidate autoComplete="off">
 
           {/* First Name */}
-          <FormField label="First Name">
+          <FormField label="First Name" required>
             <FormInputText
               disabled={!canModifyTrait}
               id="firstName"
@@ -57,7 +57,7 @@ const PersonalDetails = (props) => {
           </FormField>
 
           {/* Last Name */}
-          <FormField label="Last Name">
+          <FormField label="Last Name" required>
             <FormInputText
               disabled={!canModifyTrait}
               id="lastName"
@@ -192,7 +192,7 @@ const PersonalDetails = (props) => {
           </FormField>
 
           {/* Country */}
-          <FormField label="Country">
+          <FormField label="Country" required>
             <Select
               name="country"
               options={countries}
diff --git a/src/shared/components/Settings/Tools/Devices/index.jsx b/src/shared/components/Settings/Tools/Devices/index.jsx
index ff81cd191b..a4194f1303 100644
--- a/src/shared/components/Settings/Tools/Devices/index.jsx
+++ b/src/shared/components/Settings/Tools/Devices/index.jsx
@@ -497,7 +497,7 @@ export default class Devices extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="device-form" noValidate autoComplete="off">
-                  <FormField label="Device Type *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Device Type" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="Device Type"
                       options={types}
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
index 7f94c564b0..f75225272d 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
+++ b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
@@ -336,7 +336,7 @@ export default class ServiceProviders extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="service-provider-form" noValidate autoComplete="off">
-                  <FormField label="Service Provider Type *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Service Provider Type" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="serviceProviderType"
                       options={dropdowns.serviceProviderType}
@@ -355,7 +355,7 @@ export default class ServiceProviders extends ConsentComponent {
                     }
                   </FormField>
 
-                  <FormField label="Service Provider Name *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Service Provider Name" style={{ flex: '0 0 100%' }} required>
                     <FormInputText
                       disabled={!canModifyTrait}
                       id="name"
diff --git a/src/shared/components/Settings/Tools/Software/index.jsx b/src/shared/components/Settings/Tools/Software/index.jsx
index d34d36a14d..9251db202d 100644
--- a/src/shared/components/Settings/Tools/Software/index.jsx
+++ b/src/shared/components/Settings/Tools/Software/index.jsx
@@ -342,7 +342,7 @@ export default class Software extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="software-form" noValidate autoComplete="off">
-                  <FormField label="Software Type *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Software Type" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="softwareType"
                       options={dropdowns.type}
@@ -361,7 +361,7 @@ export default class Software extends ConsentComponent {
                     }
                   </FormField>
 
-                  <FormField label="Software Name *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Software Name" style={{ flex: '0 0 100%' }} required>
                     <FormInputText
                       disabled={!canModifyTrait}
                       id="name"
diff --git a/src/shared/components/Settings/Tools/Subscriptions/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
index b947faeab6..eb815cb425 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/index.jsx
+++ b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
@@ -321,7 +321,7 @@ export default class Subscription extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="subscription-form" noValidate autoComplete="off">
-                  <FormField label="Subscription Name" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Subscription Name" style={{ flex: '0 0 100%' }} required>
                     <FormInputText
                       disabled={!canModifyTrait}
                       id="name"

From 0011e0287f6438fe275a547fe53df0d7d02832f2 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Fri, 19 Aug 2022 17:54:16 +0700
Subject: [PATCH 40/49] fix: unit test fixes

---
 src/shared/components/Settings/FormField/index.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/shared/components/Settings/FormField/index.jsx b/src/shared/components/Settings/FormField/index.jsx
index 8377141944..b4fad3d841 100644
--- a/src/shared/components/Settings/FormField/index.jsx
+++ b/src/shared/components/Settings/FormField/index.jsx
@@ -9,8 +9,7 @@ import cn from 'classnames';
 import './styles.scss';
 
 const FormField = ({
-  children, label = '', disabled, style, required,
-  children, label = '', disabled, style, isTextarea,
+  children, label = '', disabled, style, required, isTextarea,
 }) => (
   <div styleName="form-field-wrapper" style={style}>
     <div styleName="form-field">

From 09c33e249d4553ca3a172e7bf4fcd4d3e4f62727 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Fri, 19 Aug 2022 20:41:11 +0700
Subject: [PATCH 41/49] fix: dropdown selected style

---
 .../components/Settings/FormInputDatePicker/styles.scss       | 3 ++-
 src/shared/components/Settings/FormInputSelect/styles.scss    | 3 ++-
 .../challenge-listing/Filters/FiltersPanel/style.scss         | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/Settings/FormInputDatePicker/styles.scss b/src/shared/components/Settings/FormInputDatePicker/styles.scss
index dbcad8c83e..f81e3e8123 100644
--- a/src/shared/components/Settings/FormInputDatePicker/styles.scss
+++ b/src/shared/components/Settings/FormInputDatePicker/styles.scss
@@ -81,6 +81,7 @@
           border: none;
           box-shadow: none !important;
           cursor: pointer;
+          border-color: #aaaaab !important;
 
           @media screen and (max-width: 425px) {
             min-width: 100px;
@@ -118,7 +119,7 @@
 
               &.is-selected {
                 font-weight: bold;
-                background-color: #229173;
+                background-color: $tc-white;
               }
 
               &:hover,
diff --git a/src/shared/components/Settings/FormInputSelect/styles.scss b/src/shared/components/Settings/FormInputSelect/styles.scss
index d6a2fc56b6..e5c93cc69f 100644
--- a/src/shared/components/Settings/FormInputSelect/styles.scss
+++ b/src/shared/components/Settings/FormInputSelect/styles.scss
@@ -8,6 +8,7 @@
       border: 1px solid $color-black-40;
       box-shadow: none !important;
       cursor: pointer;
+      border-color: #aaaaab !important;
 
       .Select-placeholder {
         padding: 22px 0 2px 10px !important;
@@ -92,7 +93,7 @@
           &.is-selected {
             font-weight: bold;
             color: $tc-gray-90;
-            background-color: #229173;
+            background-color: $tc-white;
           }
         }
       }
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
index 9dfcc95352..225757de42 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
+++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
@@ -595,8 +595,8 @@ hr.hr {
           font-size: 14px;
 
           .Select-option.is-selected {
-            background-color: #137d60 !important;
-            color: $tc-white !important;
+            background-color: $tc-white !important;
+            color: #2a2a2b !important;
           }
         }
       }

From 4f9e6d7516f79217e31a7961c77a83c021f45ad8 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Tue, 23 Aug 2022 08:08:00 +0700
Subject: [PATCH 42/49] fix: email preferences not loaded

---
 src/shared/actions/newsletterPreferences.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/shared/actions/newsletterPreferences.js b/src/shared/actions/newsletterPreferences.js
index 4e1d948896..0e512d3837 100644
--- a/src/shared/actions/newsletterPreferences.js
+++ b/src/shared/actions/newsletterPreferences.js
@@ -33,10 +33,17 @@ async function fetchDataDone(emailHash, listId = config.NEWSLETTER_SIGNUP.DEFAUL
         return result.json();
       });
 
+    let preferences = [];
+    let status = 'notsubscribed';
+    if (!error && subs.status === 'subscribed') {
+      status = 'subscribed';
+      preferences = subs.interests;
+    }
+
     return {
       email: emailHash,
-      preferences: subs.interests,
-      status: subs.status,
+      preferences,
+      status,
       error,
     };
   } catch (error) {

From 58ab9578c82cd9d617d80a3c72477b4e6384edc4 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Tue, 23 Aug 2022 09:04:23 +0700
Subject: [PATCH 43/49] fix: basic info issues

---
 src/shared/components/Settings/FormInputTextArea/index.jsx  | 6 ++++--
 .../components/Settings/ProfileSettings/Learning/index.jsx  | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/Settings/FormInputTextArea/index.jsx b/src/shared/components/Settings/FormInputTextArea/index.jsx
index e79fcc9892..2ceac81392 100644
--- a/src/shared/components/Settings/FormInputTextArea/index.jsx
+++ b/src/shared/components/Settings/FormInputTextArea/index.jsx
@@ -9,14 +9,14 @@ import cn from 'classnames';
 import './styles.scss';
 
 const FormInputTextArea = ({ styleName, ...props }) => {
-  const { value } = props;
+  const { value, maxLength } = props;
 
   return (
     <div>
       <span styleName="char-count">
         {(value && value.length) || 0}
         <span styleName="grey">
-    &nbsp;/ 240
+    &nbsp;/ {maxLength}
         </span>
       </span>
       <textarea
@@ -31,11 +31,13 @@ const FormInputTextArea = ({ styleName, ...props }) => {
 FormInputTextArea.defaultProps = {
   styleName: {},
   value: null,
+  maxLength: null,
 };
 
 FormInputTextArea.propTypes = {
   styleName: PT.shape(),
   value: PT.string,
+  maxLength: PT.string,
 };
 
 export default FormInputTextArea;
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
index e50dfed8ba..86b1cf3f23 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
@@ -171,7 +171,7 @@ const Learning = (props) => {
                 styleName="edit-text"
                 onClick={onHandleAddEducation}
               >
-                Edit Another School / Degree
+                Edit School / Degree
               </span>
               <span styleName="button-cancel">
                 <span

From 64e6a5aa99ac213d695b3faf9a6594f9361140bc Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Tue, 23 Aug 2022 11:30:49 +0700
Subject: [PATCH 44/49] fix: change date placeholder

---
 src/shared/components/Settings/FormInputDatePicker/styles.scss  | 2 ++
 .../Settings/ProfileSettings/PersonalDetails/index.jsx          | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/Settings/FormInputDatePicker/styles.scss b/src/shared/components/Settings/FormInputDatePicker/styles.scss
index f81e3e8123..765d5ca0da 100644
--- a/src/shared/components/Settings/FormInputDatePicker/styles.scss
+++ b/src/shared/components/Settings/FormInputDatePicker/styles.scss
@@ -33,6 +33,7 @@
               font-size: 14px;
               line-height: 22px;
               color: $color-black-60;
+              text-transform: capitalize !important;
             }
           }
         }
@@ -58,6 +59,7 @@
           .DateInput {
             .DateInput_input {
               font-size: 14px;
+              text-transform: capitalize;
             }
           }
         }
diff --git a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
index 88c7b0d6f7..e497e304c9 100644
--- a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
@@ -84,7 +84,7 @@ const PersonalDetails = (props) => {
             <FormInputDatePicker
               readOnly
               displayFormat="MM/DD/YYYY"
-              placeholder="MM/DD/YYYY"
+              placeholder="Select Birth Date"
               isOutsideRange={function dayAfterToday(date) { return moment(date).add(-1, 'days').isAfter(); }}
               value={newBasicInfo.birthDate}
               id="date-range-picker1"

From b2056a305ce24927f9c3fb4c711fc890d1e9204a Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Tue, 23 Aug 2022 11:45:12 +0700
Subject: [PATCH 45/49] fix: delete modal confirmation

---
 .../Account/LinkedAccount/ExistingLinks.jsx   |  2 +-
 .../Settings/ConfirmationModal/index.jsx      |  8 ++--
 .../Settings/ConfirmationModal/styles.scss    | 40 +++++++++++--------
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/shared/components/Settings/Account/LinkedAccount/ExistingLinks.jsx b/src/shared/components/Settings/Account/LinkedAccount/ExistingLinks.jsx
index a3d2e2e87d..976a9ec519 100644
--- a/src/shared/components/Settings/Account/LinkedAccount/ExistingLinks.jsx
+++ b/src/shared/components/Settings/Account/LinkedAccount/ExistingLinks.jsx
@@ -89,7 +89,7 @@ export default class ExistingLinks extends ConsentComponent {
               <div styleName="modal.deletion-confirmation-container">
                 <div styleName="modal.deletion-confirmation">
                   <div styleName="modal.deletion-confirmation-title">
-                    Heads Up!
+                    DELETE CONFIRMATION
                   </div>
                   <div styleName="modal.deletion-confirmation-message">
                     Are you sure you want to delete the external link
diff --git a/src/shared/components/Settings/ConfirmationModal/index.jsx b/src/shared/components/Settings/ConfirmationModal/index.jsx
index 5223a9e5b5..83189a68cb 100644
--- a/src/shared/components/Settings/ConfirmationModal/index.jsx
+++ b/src/shared/components/Settings/ConfirmationModal/index.jsx
@@ -3,7 +3,7 @@ import PT from 'prop-types';
 import {
   Modal, PrimaryButton, Button, GhostButton,
 } from 'topcoder-react-ui-kit';
-import IconClose from 'assets/images/icon-close.svg';
+import IconClose from 'assets/images/icon-close-green.svg';
 
 import styles from './styles.scss';
 
@@ -14,14 +14,14 @@ export default function ConfirmationModal(props) {
       <div styleName="modal-dialog">
         <div styleName="modal-content">
           <div styleName="modal-header">
-            HEADS UP!
+            DELETE CONFIRMATION
             <GhostButton theme={{ button: styles.close }} onClick={onCancel}>
               <IconClose />
             </GhostButton>
           </div>
           <div styleName="modal-body">
             <span styleName="title">
-              Are you sure you want to delete `{name}`? This action can&apos;t be undone.
+              Are you sure you want to delete<span>{' '}{name}</span>? This action cannot be undone.
             </span>
           </div>
           <div styleName="modal-footer">
@@ -29,7 +29,7 @@ export default function ConfirmationModal(props) {
               <PrimaryButton theme={{ button: styles['button-save'] }} onClick={onConfirm}>Yes, Delete</PrimaryButton>
             </div>
             <div>
-              <Button theme={{ button: styles['button-save-ghost'] }} onClick={onCancel}>Cancel</Button>
+              <Button theme={{ button: styles['button-save-ghost'] }} onClick={onCancel}>No, Cancel</Button>
             </div>
           </div>
         </div>
diff --git a/src/shared/components/Settings/ConfirmationModal/styles.scss b/src/shared/components/Settings/ConfirmationModal/styles.scss
index 0cb34456ae..6065ceeb0e 100644
--- a/src/shared/components/Settings/ConfirmationModal/styles.scss
+++ b/src/shared/components/Settings/ConfirmationModal/styles.scss
@@ -44,15 +44,15 @@
   border-radius: 8px;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
   margin: 32px;
-  width: calc(100% - 64px);
+  width: 100%;
 }
 
 .modal-header {
-  @include roboto-bold;
+  @include barlow-bold;
 
-  font-size: 34px;
-  line-height: 32px;
-  font-weight: 500;
+  font-size: 22px;
+  line-height: 26px;
+  font-weight: 600;
   text-transform: uppercase;
   display: flex;
   align-items: center;
@@ -69,14 +69,19 @@
 
   .title {
     font-size: 16px;
-    line-height: 20px;
-    letter-spacing: 0.5px;
-    font-weight: 500;
-    padding-bottom: 10px;
-    text-transform: uppercase;
-    display: flex;
+    line-height: 24px;
+    font-weight: 400;
+    padding: 24px 0;
     align-items: center;
     border-radius: 8px 8px 0 0;
+    border-top: 2px solid $color-black-10;
+    border-bottom: 2px solid $color-black-10;
+    width: 100%;
+
+    span {
+      font-weight: 800;
+      margin-left: 5px;
+    }
 
     @include xs-to-sm {
       font-size: 16px;
@@ -88,14 +93,15 @@
   display: flex;
   flex-direction: row-reverse;
   align-items: flex-end;
-  padding: $pad-xxxxl 0;
-  margin: $margin-xxxl $margin-xxxxl 0;
-  border-top: 2px solid $color-black-10;
+  padding: 24px 0;
   border-radius: 0 0 8px 8px;
+  margin-right: 24px;
 
   @include xs-to-md {
     padding: $pad-lg;
     margin: 0 $margin-lg 0;
+    width: 100%;
+    padding-right: 24px !important;
   }
 }
 
@@ -151,15 +157,15 @@
   font-size: 16px;
   line-height: 24px;
   border-radius: 50px !important;
-  color: #2a2a2a !important;
+  color: #137d60 !important;
   text-transform: uppercase;
   background-color: #fff !important;
-  border: 1px solid #2a2a2a !important;
+  border: 2px solid #137d60 !important;
 
   &:hover {
     background-color: #fff !important;
     background-image: none !important;
-    border-color: #2a2a2a !important;
+    border-color: #137d60 !important;
   }
 
   @include xs-to-md {

From 3e6f3f25c17a1c85ccc082051b4feda13dd4efbf Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Tue, 23 Aug 2022 14:55:56 +0700
Subject: [PATCH 46/49] fix: last name issue

---
 .../Settings/ProfileSettings/index.jsx        | 90 ++++++++++++-------
 src/shared/components/Settings/index.jsx      |  2 +-
 2 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/src/shared/components/Settings/ProfileSettings/index.jsx b/src/shared/components/Settings/ProfileSettings/index.jsx
index 62707bea2e..83b3350e30 100644
--- a/src/shared/components/Settings/ProfileSettings/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/index.jsx
@@ -32,6 +32,7 @@ class ProfileSettings extends ConsentComponent {
     this.onUpdateCountry = this.onUpdateCountry.bind(this);
     this.onUpdateInput = this.onUpdateInput.bind(this);
     this.onUpdateDate = this.onUpdateDate.bind(this);
+    this.onSaveProfile = this.onSaveProfile.bind(this);
     this.onHandleSaveBasicInfo = this.onHandleSaveBasicInfo.bind(this);
     this.onSaveBasicInfo = this.onSaveBasicInfo.bind(this);
     this.onChange = this.onChange.bind(this);
@@ -80,6 +81,7 @@ class ProfileSettings extends ConsentComponent {
         graduated: false,
       },
       isSubmit: false,
+      educationInputChanged: false,
       isMobileView: false,
       screenSM: 767,
       isEdit: false,
@@ -113,6 +115,7 @@ class ProfileSettings extends ConsentComponent {
       isSubmitHobby: false,
       indexNoHobby: null,
       isHobbyEdit: false,
+      hobbyInputChanged: false,
       newHobby: {
         hobby: '',
         description: '',
@@ -240,38 +243,19 @@ class ProfileSettings extends ConsentComponent {
   onHandleSaveBasicInfo(e) {
     if (e) e.preventDefault();
     const { setIsSaving } = this.props;
-    this.setState({ inputChange: true, isSubmit: true, isSubmitHobby: true });
+    this.setState({ inputChange: true });
     setIsSaving(true);
     const {
-      newBasicInfo, newProfileInfo, newEducation, newHobby,
+      newBasicInfo, newProfileInfo,
     } = this.state;
-
-    if (!_.isEmpty(newEducation.timePeriodFrom)
-      && !_.isEmpty(newEducation.timePeriodTo)
-      && _.trim(newEducation.schoolCollegeName).length
-    ) {
-      this.setState({ isSubmit: true });
-      if (this.onCheckEducationFormValue(newEducation)) {
-        setIsSaving(false);
-        return;
-      }
-    }
-
-    if (!this.onCheckEducationFormValue(newEducation)) {
-      this.showConsent(this.onAddEducation.bind(this));
-    }
-
-    if (!this.onCheckFormValueHobby(newHobby)) {
-      this.showConsent(this.onAddHobby.bind(this));
-    }
-
-    if (!this.onCheckFormValue(newBasicInfo, newProfileInfo)) {
-      this.showConsent(this.onSaveBasicInfo.bind(this));
-    } else {
+    if (this.onCheckFormValue(newBasicInfo, newProfileInfo)) {
       setIsSaving(false);
+      return;
     }
+    this.showConsent(this.onSaveBasicInfo.bind(this));
   }
 
+
   /**
    * Save Basic Info
    * @param answer user consent answer value
@@ -354,6 +338,49 @@ class ProfileSettings extends ConsentComponent {
     this.props.setIsSaving(false);
   }
 
+  /**
+   * Save Changes
+   */
+  onSaveProfile() {
+    const { isSaving, setIsSaving } = this.props;
+    const {
+      inputChanged,
+      educationInputChanged,
+      hobbyInputChanged,
+      newBasicInfo,
+      newProfileInfo,
+      newEducation,
+      newHobby,
+    } = this.state;
+
+    if (isSaving) {
+      return;
+    }
+
+    let valid = true;
+    let dirty;
+
+    if (inputChanged) {
+      dirty = true;
+      valid = valid && !this.onCheckFormValue(newBasicInfo, newProfileInfo);
+      this.onHandleSaveBasicInfo();
+    }
+
+    if (educationInputChanged) {
+      dirty = true;
+      valid = valid && !this.onCheckEducationFormValue(newEducation);
+      this.onHandleAddEducation();
+    }
+
+    if (hobbyInputChanged) {
+      dirty = true;
+      valid = valid && !this.onCheckFormValueHobby(newHobby);
+      this.onHandleAddHobby();
+    }
+
+    if (valid && dirty) setIsSaving(true);
+  }
+
   onUpdateInput(e) {
     const { newBasicInfo: oldBasicInfo, newProfileInfo: oldProfileInfo } = this.state;
     const newBasicInfo = { ...oldBasicInfo };
@@ -582,7 +609,7 @@ class ProfileSettings extends ConsentComponent {
     const { newEducation: oldEducation } = this.state;
     const newEducation = { ...oldEducation };
     newEducation[timePeriod] = date || '';
-    this.setState({ newEducation, isSubmit: false });
+    this.setState({ newEducation, isSubmit: false, educationInputChanged: true });
   }
 
   /**
@@ -705,6 +732,7 @@ class ProfileSettings extends ConsentComponent {
       newEducation: empty,
       isEdit: false,
       indexNo: null,
+      educationInputChanged: false,
       isSubmit: false,
     });
     // save personalization
@@ -740,7 +768,7 @@ class ProfileSettings extends ConsentComponent {
       }
     }
 
-    this.setState({ newEducation, isSubmit: false });
+    this.setState({ newEducation, isSubmit: false, educationInputChanged: true });
   }
 
   /**
@@ -800,7 +828,7 @@ class ProfileSettings extends ConsentComponent {
    * @param e event
    */
   onHandleAddHobby(e) {
-    e.preventDefault();
+    if (e) e.preventDefault();
     const { newHobby } = this.state;
     this.setState({ isSubmitHobby: true });
     if (this.onCheckFormValueHobby(newHobby)) {
@@ -905,7 +933,7 @@ class ProfileSettings extends ConsentComponent {
       newHobby: empty,
       isHobbyEdit: false,
       indexNoHobby: null,
-      inputChanged: false,
+      hobbyInputChanged: false,
     });
 
     // save personalization
@@ -929,7 +957,7 @@ class ProfileSettings extends ConsentComponent {
     const { newHobby: oldHobby } = this.state;
     const newHobby = { ...oldHobby };
     newHobby[e.target.name] = e.target.value;
-    this.setState({ newHobby, isSubmitHobby: false });
+    this.setState({ newHobby, isSubmitHobby: false, hobbyInputChanged: true });
   }
 
   /**
@@ -1146,7 +1174,7 @@ class ProfileSettings extends ConsentComponent {
         <div styleName="footer">
           <PrimaryButton
             disabled={!canModifyTrait}
-            onClick={this.onHandleSaveBasicInfo}
+            onClick={this.onSaveProfile}
             theme={{
               button: style['save-changes-btn'],
             }}
diff --git a/src/shared/components/Settings/index.jsx b/src/shared/components/Settings/index.jsx
index 20bfe9fb2d..22ebb5b32f 100644
--- a/src/shared/components/Settings/index.jsx
+++ b/src/shared/components/Settings/index.jsx
@@ -60,7 +60,7 @@ export default function Settings(props) {
             if (newProps.settingsTab === TABS.TRACKS) {
               tracksRef.current.onSaveTopcoderAndYou();
             } else if (newProps.settingsTab === TABS.PROFILE) {
-              profileRef.current.onHandleSaveBasicInfo();
+              profileRef.current.onSaveProfile();
             } else if (newProps.settingsTab === TABS.SKILLS) {
               experienceAndSkillsRef.current.save();
             } else if (newProps.settingsTab === TABS.TOOLS) {

From 52eb08c6bbad6041c8be8c496c2a4dc83f0db164 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Wed, 24 Aug 2022 16:29:08 +0700
Subject: [PATCH 47/49] fix: delete modal border

---
 src/shared/components/Settings/ConfirmationModal/styles.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/shared/components/Settings/ConfirmationModal/styles.scss b/src/shared/components/Settings/ConfirmationModal/styles.scss
index 6065ceeb0e..32e0788bb3 100644
--- a/src/shared/components/Settings/ConfirmationModal/styles.scss
+++ b/src/shared/components/Settings/ConfirmationModal/styles.scss
@@ -73,7 +73,6 @@
     font-weight: 400;
     padding: 24px 0;
     align-items: center;
-    border-radius: 8px 8px 0 0;
     border-top: 2px solid $color-black-10;
     border-bottom: 2px solid $color-black-10;
     width: 100%;

From 6fe3ffb95723d7ece99e94c68d3c045a5861c9f6 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Fri, 26 Aug 2022 20:52:30 +0700
Subject: [PATCH 48/49] fix: payment link for no setup

---
 .../Settings/Preferences/List/data.jsx        |  1 +
 .../Settings/Preferences/List/index.jsx       | 38 +++++++++++++------
 .../components/Settings/Preferences/index.jsx | 32 +++++++++++++++-
 3 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/shared/components/Settings/Preferences/List/data.jsx b/src/shared/components/Settings/Preferences/List/data.jsx
index cea39e7f5f..9d96be6255 100644
--- a/src/shared/components/Settings/Preferences/List/data.jsx
+++ b/src/shared/components/Settings/Preferences/List/data.jsx
@@ -18,6 +18,7 @@ const data = [
     name: 'Payment',
     description: 'To setup your payments preferences, please click the “Go To Payments” button.',
     link: `${config.URL.COMMUNITY}/PactsMemberServlet?module=PaymentHistory&full_list=false`,
+    altLink: `${config.URL.THRIVE}/articles/Payment%20Methods`,
     linkTitle: 'GO TO PAYMENTS',
   },
 ];
diff --git a/src/shared/components/Settings/Preferences/List/index.jsx b/src/shared/components/Settings/Preferences/List/index.jsx
index c8bd12ebc6..4fb824c8ae 100644
--- a/src/shared/components/Settings/Preferences/List/index.jsx
+++ b/src/shared/components/Settings/Preferences/List/index.jsx
@@ -5,25 +5,39 @@
  */
 import _ from 'lodash';
 import React from 'react';
+import PT from 'prop-types';
 import Item from './Item';
 import data from './data';
 
-const preferenceList = () => (
+const preferenceList = ({ paymentSetupCompleted }) => (
   <div>
     {
-      _.map(data, item => (
-        <Item
-          icon={item.icon}
-          key={item.id}
-          id={item.id}
-          title={item.name}
-          description={item.description}
-          link={item.link}
-          linkTitle={item.linkTitle}
-        />
-      ))
+      _.map(data, (item) => {
+        let itemLink;
+        if (item.id !== 'payment' || paymentSetupCompleted === true) {
+          itemLink = item.link;
+        } else {
+          itemLink = item.altLink;
+        }
+
+        return (
+          <Item
+            icon={item.icon}
+            key={item.id}
+            id={item.id}
+            title={item.name}
+            description={item.description}
+            link={itemLink}
+            linkTitle={item.linkTitle}
+          />
+        );
+      })
     }
   </div>
 );
 
 export default preferenceList;
+
+preferenceList.propTypes = {
+  paymentSetupCompleted: PT.bool.isRequired,
+};
diff --git a/src/shared/components/Settings/Preferences/index.jsx b/src/shared/components/Settings/Preferences/index.jsx
index 3c0fe15011..c221480962 100644
--- a/src/shared/components/Settings/Preferences/index.jsx
+++ b/src/shared/components/Settings/Preferences/index.jsx
@@ -1,4 +1,5 @@
 /* eslint-disable prefer-destructuring */
+import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
@@ -13,11 +14,21 @@ export default class Preferences extends React.Component {
   constructor(props) {
     super(props);
     this.save = this.save.bind(this);
+    this.loadOnboardingChecklistTrait = this.loadOnboardingChecklistTrait.bind(this);
     this.newsRef = React.createRef();
+
+    const { userTraits } = props;
+    this.state = {
+      onboardingChecklistTrait: this.loadOnboardingChecklistTrait(userTraits),
+    };
   }
 
   componentWillReceiveProps(nextProps) {
     const { isSaving, setIsSaving } = this.props;
+    const onboardingChecklistTrait = this.loadOnboardingChecklistTrait(nextProps.userTraits);
+    this.setState({
+      onboardingChecklistTrait,
+    });
     if (isSaving !== nextProps.isSaving) {
       setTimeout(() => {
         setIsSaving(false);
@@ -25,6 +36,16 @@ export default class Preferences extends React.Component {
     }
   }
 
+  /**
+   * Get onboarding checklist trait
+   * @param userTraits the all user traits
+   */
+  loadOnboardingChecklistTrait = (userTraits) => {
+    const trait = userTraits.filter(t => t.traitId === 'onboarding_checklist');
+    const onboardingChecklist = trait.length === 0 ? {} : trait[0];
+    return _.assign({}, onboardingChecklist);
+  }
+
   save() {
     const { isSaving, setIsSaving } = this.props;
     if (isSaving) {
@@ -37,6 +58,14 @@ export default class Preferences extends React.Component {
 
   render() {
     const { profile: { email }, isSaving } = this.props;
+    const { onboardingChecklistTrait } = this.state;
+
+    const traitData = onboardingChecklistTrait.traits.data[0];
+    let paymentSetupCompleted = false;
+    if (_.has(traitData, 'user_payment_method')) {
+      paymentSetupCompleted = !_.isEmpty(traitData.user_payment_method.payment_method)
+        && traitData.user_payment_method.status === 'completed';
+    }
 
     const saveBtn = (
       <PrimaryButton
@@ -61,7 +90,7 @@ export default class Preferences extends React.Component {
               email={email}
               ref={this.newsRef}
             />
-            <PreferenceList />
+            <PreferenceList paymentSetupCompleted={paymentSetupCompleted} />
           </div>
         </div>
         <div styleName="footer">{saveBtn}</div>
@@ -78,4 +107,5 @@ Preferences.propTypes = {
   profile: PT.shape().isRequired,
   isSaving: PT.bool,
   setIsSaving: PT.func.isRequired,
+  userTraits: PT.array.isRequired,
 };

From b56d3c8b3452a47eb6fc351026d2083652b880e0 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Wed, 31 Aug 2022 21:34:57 +0700
Subject: [PATCH 49/49] fix: preferences payment issue

---
 .../Settings/Preferences/List/Item/index.jsx         |  2 +-
 src/shared/components/Settings/Preferences/index.jsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/Settings/Preferences/List/Item/index.jsx b/src/shared/components/Settings/Preferences/List/Item/index.jsx
index c4ba734b2b..a4d2cf8bbf 100644
--- a/src/shared/components/Settings/Preferences/List/Item/index.jsx
+++ b/src/shared/components/Settings/Preferences/List/Item/index.jsx
@@ -38,7 +38,7 @@ export default function Item({
         </div>
         {
           !isSubscribeForm ? (
-            <a href={link} styleName="link-btn"><span>{ linkTitle }</span></a>
+            <a href={link} target="_blank" rel="noopener noreferrer" styleName="link-btn"><span>{ linkTitle }</span></a>
           ) : (
             <form action="https://topcoder.us13.list-manage.com/subscribe/post?u=65bd5a1857b73643aad556093&amp;id=28bfd3c062" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" noValidate>
               <input type="email" value={email} readOnly name="EMAIL" id="mce-EMAIL" />
diff --git a/src/shared/components/Settings/Preferences/index.jsx b/src/shared/components/Settings/Preferences/index.jsx
index c221480962..2553304179 100644
--- a/src/shared/components/Settings/Preferences/index.jsx
+++ b/src/shared/components/Settings/Preferences/index.jsx
@@ -59,12 +59,14 @@ export default class Preferences extends React.Component {
   render() {
     const { profile: { email }, isSaving } = this.props;
     const { onboardingChecklistTrait } = this.state;
-
-    const traitData = onboardingChecklistTrait.traits.data[0];
     let paymentSetupCompleted = false;
-    if (_.has(traitData, 'user_payment_method')) {
-      paymentSetupCompleted = !_.isEmpty(traitData.user_payment_method.payment_method)
-        && traitData.user_payment_method.status === 'completed';
+
+    if (onboardingChecklistTrait.traits && onboardingChecklistTrait.traits.data.length > 0) {
+      const traitData = onboardingChecklistTrait.traits.data[0];
+      if (_.has(traitData, 'user_payment_method')) {
+        paymentSetupCompleted = !_.isEmpty(traitData.user_payment_method.payment_method)
+          && traitData.user_payment_method.status === 'completed';
+      }
     }
 
     const saveBtn = (