diff --git a/src/apps/profiles/src/config/constants.ts b/src/apps/profiles/src/config/constants.ts
index f5a2b1cf5..b8bd645a6 100644
--- a/src/apps/profiles/src/config/constants.ts
+++ b/src/apps/profiles/src/config/constants.ts
@@ -24,3 +24,5 @@ export enum profileEditModes {
 }
 
 export const CES_SURVEY_ID = EnvironmentConfig.USERFLOW_SURVEYS.PROFILES
+
+export const MAX_PRINCIPAL_SKILLS_COUNT = 10
diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss
index f07d5098f..22e6cacff 100644
--- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss
+++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss
@@ -27,8 +27,28 @@
     .skillsWrap {
         padding-bottom: $sp-8;
 
+
+        :global(.large-subtitle) {
+            margin-bottom: $sp-4;
+        }
+
         @include ltemd {
             padding-bottom: $sp-4;
         }
     }
 }
+
+.principalSkillsWrap {
+    background: $black-5;
+    border-radius: $sp-2;
+    padding: $sp-6;
+    + .additionalSkillsWrap {
+        margin-top: $sp-6;
+    }
+}
+
+.principalSkills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $sp-2;
+}
diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx
index db5c98949..738e3918e 100644
--- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx
+++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx
@@ -1,9 +1,9 @@
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { orderBy } from 'lodash'
+import { filter, orderBy } from 'lodash'
 
-import { UserProfile, UserSkill } from '~/libs/core'
-import { GroupedSkillsUI, HowSkillsWorkModal, isSkillVerified } from '~/libs/shared'
+import { UserProfile, UserSkill, UserSkillDisplayModes } from '~/libs/core'
+import { GroupedSkillsUI, HowSkillsWorkModal, isSkillVerified, SkillPill, useLocalStorage } from '~/libs/shared'
 import { Button } from '~/libs/ui'
 
 import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
@@ -11,6 +11,7 @@ import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { MemberProfileContextValue, useMemberProfileContext } from '../MemberProfile.context'
 
 import { ModifySkillsModal } from './ModifySkillsModal'
+import { PrincipalSkillsModal } from './PrincipalSkillsModal'
 import styles from './MemberSkillsInfo.module.scss'
 
 interface MemberSkillsInfoProps {
@@ -24,6 +25,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
 
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
+    const [hasSeenPrincipalIntro, setHasSeenPrincipalIntro] = useLocalStorage('seen-principal-intro', {} as any)
 
     const { skillsRenderer, isTalentSearch }: MemberProfileContextValue = useMemberProfileContext()
 
@@ -33,11 +35,19 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         ['desc', 'asc'],
     ) as UserSkill[], [props.profile.skills])
 
+    const principalSkills = useMemo(() => (
+        filter(memberSkills, s => s.displayMode?.name === UserSkillDisplayModes.principal)
+    ), [memberSkills])
+
+    const additionalSkills = useMemo(() => (
+        filter(memberSkills, s => s.displayMode?.name !== UserSkillDisplayModes.principal)
+    ), [memberSkills])
+
     const groupedSkillsByCategory: { [key: string]: UserSkill[] } = useMemo(() => {
         const grouped: { [key: string]: UserSkill[] } = {}
         const sortedGroupedSkillsByCategory: { [key: string]: UserSkill[] } = {}
 
-        memberSkills.forEach((skill: UserSkill) => {
+        additionalSkills.forEach((skill: UserSkill) => {
             const categoryName = skill.category?.name ?? ''
             if (grouped[categoryName]) {
                 grouped[categoryName].push(skill)
@@ -53,7 +63,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
             })
 
         return sortedGroupedSkillsByCategory
-    }, [memberSkills])
+    }, [additionalSkills])
 
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -61,6 +71,9 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
     const [howSkillsWorkVisible, setHowSkillsWorkVisible]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
+    const [principalIntroModalVisible, setPrincipalIntroModalVisible]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.skills) {
             setIsEditMode(true)
@@ -69,6 +82,19 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.authProfile])
 
+    useEffect(() => {
+        if (
+            !canEdit
+            || !props.authProfile
+            || hasSeenPrincipalIntro[props.authProfile.handle]
+            || isTalentSearch
+        ) {
+            return
+        }
+
+        setPrincipalIntroModalVisible(true)
+    }, [hasSeenPrincipalIntro, canEdit, isTalentSearch, props.authProfile, setHasSeenPrincipalIntro])
+
     function handleEditSkillsClick(): void {
         setIsEditMode(true)
     }
@@ -92,16 +118,21 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         setHowSkillsWorkVisible(false)
     }
 
+    function handlePrincipalIntroShow(): void {
+        setPrincipalIntroModalVisible(true)
+    }
+
+    function handlePrincipalIntroClose(): void {
+        setHasSeenPrincipalIntro((prevValue: any) => ({
+            ...prevValue,
+            [props.authProfile?.handle ?? '']: true,
+        }))
+
+        setPrincipalIntroModalVisible(false)
+    }
+
     return (
         <div className={styles.container}>
-            {
-                skillsRenderer && memberSkills.length > 0 && (
-                    <div className={styles.skillsWrap}>
-                        {skillsRenderer(memberSkills)}
-                    </div>
-                )
-            }
-
             <div className={styles.titleWrap}>
                 <div className={styles.headerWrap}>
                     <h3>Skills</h3>
@@ -123,11 +154,42 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                 </div>
             </div>
 
+            {
+                skillsRenderer && memberSkills.length > 0 && (
+                    <div className={styles.skillsWrap}>
+                        {skillsRenderer(memberSkills)}
+                    </div>
+                )
+            }
+
             <div className={styles.skillsWrap}>
-                {memberSkills.length > 0 && (
-                    <GroupedSkillsUI
-                        groupedSkillsByCategory={groupedSkillsByCategory}
-                    />
+                {principalSkills.length > 0 && (
+                    <div className={styles.principalSkillsWrap}>
+                        <div className='large-subtitle'>
+                            Principal Skills
+                        </div>
+                        <div className={styles.principalSkills}>
+                            {principalSkills.map((skill: UserSkill) => (
+                                <SkillPill
+                                    skill={skill}
+                                    key={skill.id}
+                                    theme={isSkillVerified(skill) ? 'verified' : 'dark'}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {additionalSkills.length > 0 && (
+                    <div className={styles.additionalSkillsWrap}>
+                        {principalSkills.length > 0 && (
+                            <div className='large-subtitle'>
+                                Additional Skills
+                            </div>
+                        )}
+                        <GroupedSkillsUI
+                            groupedSkillsByCategory={groupedSkillsByCategory}
+                        />
+                    </div>
                 )}
                 {!memberSkills.length && (
                     <EmptySection
@@ -155,6 +217,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                     <ModifySkillsModal
                         onClose={handleModyfSkillsModalClose}
                         onSave={handleModyfSkillsSave}
+                        showPrincipalIntroModal={handlePrincipalIntroShow}
                     />
                 )
             }
@@ -168,6 +231,14 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                     />
                 )
             }
+
+            {
+                principalIntroModalVisible && (
+                    <PrincipalSkillsModal
+                        onClose={handlePrincipalIntroClose}
+                    />
+                )
+            }
         </div>
     )
 }
diff --git a/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss b/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss
index d07c19e93..672dc7024 100644
--- a/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss
+++ b/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss
@@ -1,16 +1,17 @@
 @import '@libs/ui/styles/includes';
 
+.skillsModalHeader {
+    :global(.body-main-normal) {
+        margin-top: $sp-2;
+    }
+}
+
 .container {
     display: flex;
     flex-direction: column;
 
-    :global(.body-main-bold) {
-        font-size: 20px;
-        margin-bottom: $sp-2;
-    }
-
-    .skillPicker {
-        margin-top: $sp-4;
+    :global(.input-wrapper) {
+        margin-top: $sp-2;
     }
 }
 
@@ -29,3 +30,15 @@
 .skillsModalBody {
     overflow: visible !important;
 }
+
+.principalIntroLink {
+    display: flex;
+    justify-content: flex-end;
+    > span {
+        color: $link-blue-dark;
+        cursor: pointer;
+        &:hover {
+            color: darken($link-blue-dark, 5);
+        }
+    }
+}
diff --git a/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.tsx b/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.tsx
index 68a9204ec..6de75fc4e 100644
--- a/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.tsx
+++ b/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.tsx
@@ -9,6 +9,7 @@ import styles from './ModifySkillsModal.module.scss'
 interface ModifySkillsModalProps {
     onClose: () => void
     onSave: () => void
+    showPrincipalIntroModal: () => void
 }
 
 const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalProps) => {
@@ -40,7 +41,14 @@ const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalP
             onClose={props.onClose}
             open
             size='lg'
-            title='My Skills'
+            title={(
+                <div className={styles.skillsModalHeader}>
+                    <h3>Your skills</h3>
+                    <p className='body-main-normal'>
+                        We use your skills to connect you to the best opportunities.
+                    </p>
+                </div>
+            )}
             buttons={(
                 <div className={styles.modalButtons}>
                     <Button
@@ -58,13 +66,17 @@ const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalP
             )}
         >
             <div className={styles.container}>
-                <p className='body-main-bold'>What are your skills?</p>
-                <p>
-                    Understanding your skills will allow us to connect you to the right opportunities.
-                </p>
                 <div className={styles.skillPicker}>
                     {editor.formInput}
                 </div>
+                <div
+                    className={styles.principalIntroLink}
+                    onClick={props.showPrincipalIntroModal}
+                >
+                    <span className='body-main-link'>
+                        See what Principal skills are
+                    </span>
+                </div>
             </div>
         </BaseModal>
     )
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.module.scss b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.module.scss
new file mode 100644
index 000000000..930eda86e
--- /dev/null
+++ b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.module.scss
@@ -0,0 +1,20 @@
+@import '@libs/ui/styles/includes';
+
+.verified {
+    display: inline-flex;
+
+    svg {
+        margin: 0 $sp-2;
+        color: $turq-120;
+    }
+}
+
+.container {
+    strong {
+        font-weight: bold;
+    }
+}
+
+.mb1 {
+    margin-bottom: $sp-2;
+}
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.tsx b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.tsx
new file mode 100644
index 000000000..0de070d00
--- /dev/null
+++ b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.tsx
@@ -0,0 +1,63 @@
+import { FC } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+
+import { MAX_PRINCIPAL_SKILLS_COUNT } from '../../../config'
+
+import principalInputImg from './principal-input.png'
+import principalSectionImg from './principal-section.png'
+import styles from './PrincipalSkillsModal.module.scss'
+
+interface PrincipalSkillsModalProps {
+    onClose: () => void
+}
+
+const PrincipalSkillsModal: FC<PrincipalSkillsModalProps> = (props: PrincipalSkillsModalProps) => (
+    <BaseModal
+        onClose={props.onClose}
+        open
+        title='Highlight your Principal Skills'
+        size='lg'
+    >
+        <div className={styles.container}>
+            <p>
+                <div className={styles.mb1}>
+                    Now you can highlight your most important skills using the&nbsp;
+                    <strong>Principal Skills</strong>
+                    &nbsp;section!
+                </div>
+                <img src={principalSectionImg} alt='' />
+            </p>
+            <br />
+            <p>
+                <div className={styles.mb1}>
+                    Just move the skills you want to highlight by typing them in the&nbsp;
+                    <strong>Principal Skills input</strong>
+                    &nbsp;when you edit your skills.
+                </div>
+                <img src={principalInputImg} alt='' />
+            </p>
+            <br />
+            <p>
+                <strong>NOTE:</strong>
+                &nbsp;You can add up to
+                {' '}
+                {MAX_PRINCIPAL_SKILLS_COUNT}
+                {' '}
+                skills to your Principal Skills section.
+            </p>
+            <br />
+            <p>
+                To move a skill back to the
+                {' '}
+                <strong>Additional Skills section</strong>
+                , just type it in the
+                {' '}
+                <strong>Additional Skills input</strong>
+                .
+            </p>
+        </div>
+    </BaseModal>
+)
+
+export default PrincipalSkillsModal
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/index.ts b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/index.ts
new file mode 100644
index 000000000..19e562d2f
--- /dev/null
+++ b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/index.ts
@@ -0,0 +1 @@
+export { default as PrincipalSkillsModal } from './PrincipalSkillsModal'
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-input.png b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-input.png
new file mode 100644
index 000000000..ea9de12f9
Binary files /dev/null and b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-input.png differ
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-section.png b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-section.png
new file mode 100644
index 000000000..a5ec5ee4a
Binary files /dev/null and b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-section.png differ
diff --git a/src/apps/talent-search/src/components/popular-skills/PopularSkills.tsx b/src/apps/talent-search/src/components/popular-skills/PopularSkills.tsx
index 1b3dc6f82..c7df349bb 100644
--- a/src/apps/talent-search/src/components/popular-skills/PopularSkills.tsx
+++ b/src/apps/talent-search/src/components/popular-skills/PopularSkills.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback } from 'react'
 
 import { SkillPill } from '~/libs/shared'
-import { UserSkill } from '~/libs/core'
+import { SearchUserSkill } from '~/libs/core'
 
 import { SKILL_SEARCH_LIMIT } from '../../config'
 
@@ -10,162 +10,82 @@ import styles from './PopularSkills.module.scss'
 // TODO: Make this configurable, or read from a service.  We need to discuss
 // how we want to handle this.
 // TODO: update this with the real list of popular skills
-const popularSkills: UserSkill[] = [
+const popularSkills: SearchUserSkill[] = [
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '63bb7cfc-b0d4-4584-820a-18c503b4b0fe',
-        levels: [],
         name: 'Java',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '0d86f8cb-e509-4ca8-b9f8-e65d909cc6eb',
-        levels: [],
         name: 'MySQL',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '32899253-5989-4c33-9948-cad29c9e0ab0',
-        levels: [],
         name: 'Node.js',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '9c42c728-47ff-4b20-916c-560739bad1ee',
-        levels: [],
         name: 'Cascading Style Sheets (CSS)',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '16ee1403-8e73-497d-a766-623eefd3c806',
-        levels: [],
         name: 'JavaScript',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '99e5fc45-5fc0-4794-a578-f42dfabcbf74',
-        levels: [],
         name: 'Machine Learning',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: 'a0da6acf-2cf8-48f0-ba4a-30d18bc75052',
-        levels: [],
         name: 'Unit Testing',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '7e8641e5-e5c1-4ab6-a8f4-1fd6a8686dbe',
-        levels: [],
         name: 'Angular',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: 'f0597e53-9a6d-40d6-8639-4d5a9ead190f',
-        levels: [],
         name: '.NET Framework',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: 'fcbac194-35ab-4a31-aa7c-a2867fff9c4b',
-        levels: [],
         name: 'Python',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: 'adf9d7b9-d639-4a73-8772-673b3d4f41b0',
-        levels: [],
         name: 'Android',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '130323ce-7d88-4141-9e2b-904994f026a1',
-        levels: [],
         name: 'Figma (Design Software)',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '9eaf6049-402a-481c-ac82-87a0826128c7',
-        levels: [],
         name: 'Microsoft Azure',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: 'ced0b36c-6057-48e1-a263-2588fb91296b',
-        levels: [],
         name: 'Adobe Illustrator',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: 'be85b096-b841-45b4-a5cb-1d3ee7ce1126',
-        levels: [],
         name: 'Docker',
     },
     {
-        category: {
-            id: '481b5ebc-2fe6-45ed-a90c-736936d458d7',
-            name: 'Programming and Development',
-        },
         id: '4458454c-9a97-4332-a545-6546e240dab6',
-        levels: [],
         name: 'React.js',
     },
 ]
 
 interface PopularSkillsProps {
-    onChange: (skills: UserSkill[]) => void
-    selectedSkills: UserSkill[]
+    onChange: (skills: SearchUserSkill[]) => void
+    selectedSkills: SearchUserSkill[]
 }
 
 const PopularSkills: FC<PopularSkillsProps> = props => {
 
-    const toggleSkill = useCallback((skill: UserSkill) => {
-        let newFilter: Array<UserSkill> = []
+    const toggleSkill = useCallback((skill: SearchUserSkill) => {
+        let newFilter: Array<SearchUserSkill> = []
         let deleted: boolean = false
 
         // Either delete the value from the list, if we're toggling one that's already in the list
@@ -188,7 +108,7 @@ const PopularSkills: FC<PopularSkillsProps> = props => {
         props.onChange.call(undefined, newFilter)
     }, [props.onChange, props.selectedSkills])
 
-    function isSelected(skill: UserSkill): boolean {
+    function isSelected(skill: SearchUserSkill): boolean {
         return !!props.selectedSkills.find(s => s.id === skill.id)
     }
 
diff --git a/src/apps/talent-search/src/lib/utils/search-query.tsx b/src/apps/talent-search/src/lib/utils/search-query.tsx
index 406cafcf9..d55764fca 100644
--- a/src/apps/talent-search/src/lib/utils/search-query.tsx
+++ b/src/apps/talent-search/src/lib/utils/search-query.tsx
@@ -1,39 +1,37 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
-import { UserSkill } from '~/libs/core'
+import { SearchUserSkill, UserSkill } from '~/libs/core'
 
-type PartialUserSkill = Pick<UserSkill, 'id'|'name'>
-
-export const encodeUrlQuerySearch = (skills: PartialUserSkill[]): string => (
+export const encodeUrlQuerySearch = (skills: SearchUserSkill[]): string => (
     skills
         .map(s => `q=${encodeURIComponent(`${s.name}::${s.id}`)}`)
         .join('&')
 )
 
-export const parseUrlQuerySearch = (params: string[]): UserSkill[] => (
+export const parseUrlQuerySearch = (params: string[]): SearchUserSkill[] => (
     params.map(p => {
         const [name, id] = p.split('::')
-        return { category: { id: '', name: '' }, id, levels: [], name }
+        return { id, name }
     })
 )
 
 export const useUrlQuerySearchParms = (paramName: string): [
     UserSkill[],
-    (s: PartialUserSkill[]) => void
+    (s: SearchUserSkill[]) => void
 ] => {
     const [params, updateParams] = useSearchParams()
 
     const [skills, setSkills] = useState<UserSkill[]>([])
 
-    const handleUpdateSearch = useCallback((newSkills: PartialUserSkill[]) => {
+    const handleUpdateSearch = useCallback((newSkills: SearchUserSkill[]) => {
         const searchParams = encodeUrlQuerySearch(newSkills)
         updateParams(`${searchParams}`)
     }, [updateParams])
 
     // update search input whenever the url data changes
     useEffect(() => {
-        setSkills(parseUrlQuerySearch(params.getAll(paramName)))
+        setSkills(parseUrlQuerySearch(params.getAll(paramName)) as UserSkill[])
     }, [params, paramName])
 
     return [skills, handleUpdateSearch]
diff --git a/src/libs/core/lib/profile/data-providers/index.ts b/src/libs/core/lib/profile/data-providers/index.ts
index 57c56fcfa..41e6581cc 100644
--- a/src/libs/core/lib/profile/data-providers/index.ts
+++ b/src/libs/core/lib/profile/data-providers/index.ts
@@ -11,3 +11,4 @@ export * from './useMemberTraits'
 export * from './useMemberDevicesLookup'
 export * from './useCountryLookup'
 export * from './useProfileCompleteness'
+export * from './useUserSkillsDisplayModes'
diff --git a/src/libs/core/lib/profile/data-providers/useUserSkillsDisplayModes.ts b/src/libs/core/lib/profile/data-providers/useUserSkillsDisplayModes.ts
new file mode 100644
index 000000000..ea45828bd
--- /dev/null
+++ b/src/libs/core/lib/profile/data-providers/useUserSkillsDisplayModes.ts
@@ -0,0 +1,19 @@
+import { find } from 'lodash'
+import { SWRResponse } from 'swr'
+import useSWRImmutable from 'swr/immutable'
+
+import { UserSkillDisplayMode, UserSkillDisplayModes, userSkillsUrl } from '~/libs/core'
+
+export interface UserSkillDisplayModeRecords {
+    additional: UserSkillDisplayMode,
+    principal: UserSkillDisplayMode,
+}
+
+export function useUserSkillsDisplayModes(): UserSkillDisplayModeRecords {
+    const { data: modes }: SWRResponse = useSWRImmutable(userSkillsUrl('display-modes'))
+
+    return {
+        additional: find(modes, { name: UserSkillDisplayModes.additional }),
+        principal: find(modes, { name: UserSkillDisplayModes.principal }),
+    }
+}
diff --git a/src/libs/core/lib/profile/profile-functions/profile-store/index.ts b/src/libs/core/lib/profile/profile-functions/profile-store/index.ts
index 7f904b77b..39e376a86 100644
--- a/src/libs/core/lib/profile/profile-functions/profile-store/index.ts
+++ b/src/libs/core/lib/profile/profile-functions/profile-store/index.ts
@@ -14,4 +14,5 @@ export {
     memberEmailPreferencesURL,
     memberModifyMfaURL,
     diceIDURL,
+    userSkillsUrl,
 } from './profile-endpoint.config'
diff --git a/src/libs/core/lib/profile/profile-functions/profile-store/profile-endpoint.config.ts b/src/libs/core/lib/profile/profile-functions/profile-store/profile-endpoint.config.ts
index 3647eba5e..7d3b2da30 100644
--- a/src/libs/core/lib/profile/profile-functions/profile-store/profile-endpoint.config.ts
+++ b/src/libs/core/lib/profile/profile-functions/profile-store/profile-endpoint.config.ts
@@ -46,3 +46,7 @@ export function memberModifyMfaURL(userId: number): string {
 export function diceIDURL(userId: number): string {
     return `${EnvironmentConfig.API.V3}/users/${userId}`
 }
+
+export function userSkillsUrl(userIdOrAction: string): string {
+    return `${EnvironmentConfig.API.V5}/standardized-skills/user-skills/${userIdOrAction}`
+}
diff --git a/src/libs/core/lib/profile/user-skill.model.ts b/src/libs/core/lib/profile/user-skill.model.ts
index 723ec38a8..677dc8d76 100644
--- a/src/libs/core/lib/profile/user-skill.model.ts
+++ b/src/libs/core/lib/profile/user-skill.model.ts
@@ -10,16 +10,31 @@ export enum UserSkillLevelTypes {
     verified = 'verified',
 }
 
+// keep this in sync with the backend
+// https://github.com/topcoder-platform/standardized-skills-api/blob/develop/src/config/constants.ts#L28
+export enum UserSkillDisplayModes {
+    additional = 'additional',
+    principal = 'principal',
+}
+
 export type UserSkillLevel = {
     id: string
     name: UserSkillLevelTypes
     description: string
 }
 
+export type UserSkillDisplayMode = {
+    id: string
+    name: UserSkillDisplayModes
+}
+
 export type UserSkill = {
     id: string
     name: string
     category: UserSkillCategory
     levels: Array<UserSkillLevel>
+    displayMode: UserSkillDisplayMode
     description?: string | null | undefined
 }
+
+export type SearchUserSkill = Pick<UserSkill, 'id'|'name'> & Partial<Pick<UserSkill, 'levels'>>
diff --git a/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx b/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx
index e28c494e2..c92f29e6d 100644
--- a/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx
+++ b/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx
@@ -1,17 +1,18 @@
 import { ChangeEvent, FC, ReactNode, Ref } from 'react'
+import { SelectInstance } from 'react-select'
 import { noop } from 'lodash'
 
 import { InputMultiselect, InputMultiselectOption, InputMultiselectThemes } from '~/libs/ui'
-import { UserSkill } from '~/libs/core'
+import { SearchUserSkill, UserSkill } from '~/libs/core'
 import { TCASkillType } from '~/apps/learn/src/lib'
 
 import { autoCompleteSkills, isSkillVerified } from '../../services/standard-skills'
 
-const mapSkillToInputOption = (skill: UserSkill | TCASkillType): InputMultiselectOption => ({
+const mapSkillToInputOption = (skill: SearchUserSkill | TCASkillType): InputMultiselectOption => ({
     ...skill,
     label: skill.name,
     value: skill.id,
-    verified: (skill as UserSkill).levels ? isSkillVerified(skill as UserSkill) : undefined,
+    verified: isSkillVerified(skill as UserSkill),
 })
 
 interface Option {
@@ -37,13 +38,15 @@ interface InputSkillSelectorProps {
     readonly loading?: boolean
     readonly onChange?: (event: ChangeEvent<HTMLInputElement>) => void
     readonly placeholder?: string
-    readonly value?: UserSkill[] | TCASkillType[]
+    readonly value?: SearchUserSkill[] | TCASkillType[]
     readonly theme?: InputMultiselectThemes
     readonly useWrapper?: boolean
     readonly dropdownIcon?: ReactNode
     readonly onSubmit?: () => void
     readonly additionalPlaceholder?: string
     readonly inputRef?: Ref<any>
+    // Custom method to filter whether an option should be displayed in the menu
+    readonly filterOption?: SelectInstance['filterOption']
 }
 
 const InputSkillSelector: FC<InputSkillSelectorProps> = props => (
@@ -64,6 +67,7 @@ const InputSkillSelector: FC<InputSkillSelectorProps> = props => (
         onSubmit={props.onSubmit}
         additionalPlaceholder={props.additionalPlaceholder}
         inputRef={props.inputRef}
+        filterOption={props.filterOption}
     />
 )
 
diff --git a/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx b/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx
index 87e2ceda2..75d5dc509 100644
--- a/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx
+++ b/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx
@@ -1,7 +1,14 @@
 import { ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { differenceWith, pick } from 'lodash'
+import { differenceWith, filter } from 'lodash'
 
-import { profileContext, ProfileContextData, UserSkill } from '~/libs/core'
+import {
+    profileContext,
+    ProfileContextData,
+    UserSkill,
+    UserSkillDisplayModes,
+    useUserSkillsDisplayModes,
+} from '~/libs/core'
+import { MAX_PRINCIPAL_SKILLS_COUNT } from '~/apps/profiles/src/config'
 
 import {
     createMemberSkills,
@@ -38,6 +45,15 @@ export const useMemberSkillEditor = ({
     const [skills, setSkills] = useState<UserSkill[]>([])
     const [loading, setLoading] = useState<boolean>(true)
     const [, setError] = useState<string>()
+    const displayModes = useUserSkillsDisplayModes()
+
+    const principalSkills = useMemo(() => (
+        filter(skills, s => s.displayMode?.name === UserSkillDisplayModes.principal)
+    ), [skills])
+
+    const additionalSkills = useMemo(() => (
+        filter(skills, s => s.displayMode?.name === UserSkillDisplayModes.additional)
+    ), [skills])
 
     // Function that saves the updated skills, will be called from outside
     const saveSkills = useCallback(async () => {
@@ -45,15 +61,18 @@ export const useMemberSkillEditor = ({
             return
         }
 
-        const skillIds = skills.map(skill => pick(skill, 'id'))
+        const skillsData = skills.map(skill => ({
+            displayModeId: skill.displayMode.id,
+            id: skill.id,
+        }))
 
         if (!isInitialized) {
-            await createMemberSkills(profile.userId, skillIds)
+            await createMemberSkills(profile.userId, skillsData)
             setIsInitialized(true)
             return
         }
 
-        await updateMemberSkills(profile.userId, skillIds)
+        await updateMemberSkills(profile.userId, skillsData)
     }, [isInitialized, profile?.userId, skills])
 
     // Handle user changes
@@ -71,30 +90,31 @@ export const useMemberSkillEditor = ({
         setSkills(skills.filter(s => s.id !== skillId))
     }, [skills])
 
-    const handleAddSkill = useCallback((skillData: any): void => {
-        if (skills.find(s => s.id === skillData.value)) {
-            return
-        }
+    const handleAddSkill = useCallback((type: UserSkillDisplayModes, skillData: any): void => {
+        const skill = skills.find(s => s.id === skillData.value)
 
-        setSkills([...skills, {
+        setSkills([...skills.filter(s => s.id !== skillData.value), {
             category: skillData.category,
             id: skillData.value,
             levels: [],
             name: skillData.label,
+            ...skill,
+            displayMode: displayModes[type],
         }])
-    }, [skills])
+    }, [skills, displayModes])
 
-    const handleOnChange = useCallback(({ target: { value } }: any): void => {
-        const removed = differenceWith(skills, value, (s, v: any) => s.id === v.value)
+    const handleOnChange = useCallback((type: UserSkillDisplayModes) => ({ target: { value } }: any): void => {
+        const currentSkillSet = type === UserSkillDisplayModes.principal ? principalSkills : additionalSkills
+        const removed = differenceWith(currentSkillSet, value, (s, v: any) => s.id === v.value)
         if (removed.length) {
             removed.map(s => handleRemoveSkill(s.id))
         }
 
-        const added = differenceWith(value, skills, (v: any, s: any) => v.value === s.skillId)
+        const added = differenceWith(value, currentSkillSet, (v: any, s: any) => v.value === s.id)
         if (added.length) {
-            added.forEach(handleAddSkill)
+            added.forEach(handleAddSkill.bind(this, type))
         }
-    }, [handleAddSkill, handleRemoveSkill, skills])
+    }, [additionalSkills, handleAddSkill, handleRemoveSkill, principalSkills])
 
     // Load member's skills, set loading state & isInitialized
     useEffect(() => {
@@ -123,13 +143,33 @@ export const useMemberSkillEditor = ({
 
     // build the form input
     const formInput = useMemo(() => (
-        <InputSkillSelector
-            value={skills}
-            onChange={handleOnChange}
-            loading={loading}
-            limit={limit}
-        />
-    ), [skills, handleOnChange, loading, limit])
+        <>
+            <p className='body-main-bold'>Principal Skills</p>
+            <p>
+                Add up to 10 of the skills that are central to your expertise.
+                These will be showcased at the top of your profile.
+            </p>
+            <InputSkillSelector
+                label='Select Principal Skills'
+                value={principalSkills}
+                onChange={handleOnChange(UserSkillDisplayModes.principal)}
+                loading={loading}
+                limit={MAX_PRINCIPAL_SKILLS_COUNT}
+            />
+
+            <p className='body-main-bold'>Additional skills</p>
+            <p>
+                All your other skills that make you a valuable asset on a project or a team.
+            </p>
+            <InputSkillSelector
+                label='Select Additional Skills'
+                value={additionalSkills}
+                onChange={handleOnChange(UserSkillDisplayModes.additional)}
+                loading={loading}
+                limit={limit ? limit - MAX_PRINCIPAL_SKILLS_COUNT : 0}
+            />
+        </>
+    ), [principalSkills, handleOnChange, loading, additionalSkills, limit])
 
     return {
         formInput,
diff --git a/src/libs/shared/lib/components/skill-pill/SkillPill.tsx b/src/libs/shared/lib/components/skill-pill/SkillPill.tsx
index 2800850f9..ce0031c3b 100644
--- a/src/libs/shared/lib/components/skill-pill/SkillPill.tsx
+++ b/src/libs/shared/lib/components/skill-pill/SkillPill.tsx
@@ -12,7 +12,7 @@ export interface SkillPillProps {
     children?: ReactNode
     onClick?: (skill: UserSkill) => void
     selected?: boolean
-    skill: Pick<UserSkill, 'name'|'levels'>
+    skill: Partial<Pick<UserSkill, 'name'|'levels'>>
     theme?: 'dark' | 'verified' | 'presentation' | 'etc' | 'catList'
 }
 
diff --git a/src/libs/shared/lib/services/standard-skills/standard-skills.service.ts b/src/libs/shared/lib/services/standard-skills/standard-skills.service.ts
index 1eb55874a..d7c225254 100644
--- a/src/libs/shared/lib/services/standard-skills/standard-skills.service.ts
+++ b/src/libs/shared/lib/services/standard-skills/standard-skills.service.ts
@@ -6,6 +6,7 @@ const baseUrl = `${EnvironmentConfig.API.V5}/standardized-skills`
 export interface UpdateUserSkillDTO {
     id: string
     levelId?: string
+    displatModeId?: string
 }
 
 export async function autoCompleteSkills(queryTerm: string): Promise<UserSkill[]> {
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx
index 060c7005b..a70573ed8 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx
+++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx
@@ -50,6 +50,8 @@ export interface InputMultiselectProps {
     readonly value?: InputMultiselectOption[]
     readonly onSubmit?: () => void
     readonly inputRef?: Ref<any>
+    // Custom method to filter whether an option should be displayed in the menu
+    readonly filterOption?: SelectInstance['filterOption']
 }
 
 const MultiValueRemove: FC = (props: any) => (
@@ -153,6 +155,7 @@ const InputMultiselect: FC<InputMultiselectProps> = props => {
             value={props.value}
             openMenuOnClick={false}
             onKeyDown={handleKeyPress}
+            filterOption={props.filterOption}
         />
     )