diff --git a/package-lock.json b/package-lock.json
index 2c61a7d0..4d9c938e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14513,6 +14513,96 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "rc-dropdown": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-3.2.2.tgz",
+      "integrity": "sha512-oA9VYYg+jQaPRdFoYFfBn5EAQk2NlL6H0vR2v6JG/8i4HEfUq8p1TTt6HyQ/dGxLe8lpnK+nM7WCjgZT/cpSRQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-trigger": "^5.0.4"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.7",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
+          "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "rc-align": {
+          "version": "4.0.11",
+          "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.11.tgz",
+          "integrity": "sha512-n9mQfIYQbbNTbefyQnRHZPWuTEwG1rY4a9yKlIWHSTbgwI+XUMGRYd0uJ5pE2UbrNX0WvnMBA1zJ3Lrecpra/A==",
+          "requires": {
+            "@babel/runtime": "^7.10.1",
+            "classnames": "2.x",
+            "dom-align": "^1.7.0",
+            "lodash": "^4.17.21",
+            "rc-util": "^5.3.0",
+            "resize-observer-polyfill": "^1.5.1"
+          }
+        },
+        "rc-trigger": {
+          "version": "5.2.10",
+          "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.10.tgz",
+          "integrity": "sha512-FkUf4H9BOFDaIwu42fvRycXMAvkttph9AlbCZXssZDVzz2L+QZ0ERvfB/4nX3ZFPh1Zd+uVGr1DEDeXxq4J1TA==",
+          "requires": {
+            "@babel/runtime": "^7.11.2",
+            "classnames": "^2.2.6",
+            "rc-align": "^4.0.0",
+            "rc-motion": "^2.0.0",
+            "rc-util": "^5.5.0"
+          }
+        },
+        "rc-util": {
+          "version": "5.16.1",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.16.1.tgz",
+          "integrity": "sha512-kSCyytvdb3aRxQacS/71ta6c+kBWvM1v8/2h9d/HaNWauc3qB8pLnF20PJ8NajkNN8gb+rR1l0eWO+D4Pz+LLQ==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
+      }
+    },
+    "rc-motion": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.4.4.tgz",
+      "integrity": "sha512-ms7n1+/TZQBS0Ydd2Q5P4+wJTSOrhIrwNxLXCZpR7Fa3/oac7Yi803HDALc2hLAKaCTQtw9LmQeB58zcwOsqlQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.2.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.7",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
+          "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "rc-util": {
+          "version": "5.16.1",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.16.1.tgz",
+          "integrity": "sha512-kSCyytvdb3aRxQacS/71ta6c+kBWvM1v8/2h9d/HaNWauc3qB8pLnF20PJ8NajkNN8gb+rR1l0eWO+D4Pz+LLQ==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
+      }
+    },
     "rc-time-picker": {
       "version": "3.7.3",
       "resolved": "https://registry.npmjs.org/rc-time-picker/-/rc-time-picker-3.7.3.tgz",
@@ -15388,6 +15478,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
diff --git a/src/actions/challenges.js b/src/actions/challenges.js
index ffc82956..7c7e3d66 100644
--- a/src/actions/challenges.js
+++ b/src/actions/challenges.js
@@ -46,7 +46,8 @@ import {
   DELETE_CHALLENGE_PENDING,
   DELETE_CHALLENGE_SUCCESS,
   DELETE_CHALLENGE_FAILURE,
-  LOAD_CHALLENGE_RESOURCES
+  LOAD_CHALLENGE_RESOURCES,
+  CHALLENGE_STATUS
 } from '../config/constants'
 import { loadProject } from './projects'
 import { removeChallengeFromPhaseProduct, saveChallengeAsPhaseProduct } from '../services/projects'
@@ -58,7 +59,7 @@ import { removeChallengeFromPhaseProduct, saveChallengeAsPhaseProduct } from '..
 /**
  * Loads active challenges of project by page
  */
-export function loadChallengesByPage (page, projectId, status, filterChallengeName = null) {
+export function loadChallengesByPage (page, projectId, status, filterChallengeName = null, selfService = false, userHandle = null) {
   return (dispatch, getState) => {
     dispatch({
       type: LOAD_CHALLENGES_PENDING,
@@ -85,6 +86,12 @@ export function loadChallengesByPage (page, projectId, status, filterChallengeNa
     } else if (!(_.isInteger(projectId) && projectId > 0)) {
       filters['status'] = 'Active'
     }
+    if (selfService) {
+      filters.selfService = true
+      if (userHandle && filters.status.toUpperCase() !== CHALLENGE_STATUS.DRAFT) {
+        filters.selfServiceCopilot = userHandle
+      }
+    }
 
     return fetchChallenges(filters, {
       page,
diff --git a/src/actions/sidebar.js b/src/actions/sidebar.js
index 1abd3c90..2a463df4 100644
--- a/src/actions/sidebar.js
+++ b/src/actions/sidebar.js
@@ -52,6 +52,18 @@ export function loadProjects (filterProjectName = '', myProjects = true) {
   }
 }
 
+/**
+ * Unloads projects of the authenticated user
+ */
+export function unloadProjects () {
+  return (dispatch) => {
+    dispatch({
+      type: LOAD_PROJECTS_SUCCESS,
+      projects: []
+    })
+  }
+}
+
 /**
  * Reset active params. e.g activeProjectId
  */
diff --git a/src/components/ChallengeEditor/ChallengeSchedule-Field/index.js b/src/components/ChallengeEditor/ChallengeSchedule-Field/index.js
index 8fca8678..328477d2 100644
--- a/src/components/ChallengeEditor/ChallengeSchedule-Field/index.js
+++ b/src/components/ChallengeEditor/ChallengeSchedule-Field/index.js
@@ -100,14 +100,12 @@ class ChallengeScheduleField extends Component {
       phase.scheduledStartDate = startDate
       phase.scheduledEndDate = moment(startDate).add(phase.duration || 0, 'hours').toDate()
       phase.actualStartDate = phase.scheduledStartDate
-      phase.actualEndDate = phase.scheduledEndDate
     } else {
       const preIndex = _.findIndex(phases, (p) => p.id === phase.predecessor)
       // `Invalid phase predecessor: ${phase.predecessor}`
       phase.scheduledStartDate = phases[preIndex].scheduledEndDate
       phase.scheduledEndDate = moment(phase.scheduledStartDate).add(phase.duration || 0, 'hours').toDate()
       phase.actualStartDate = phase.scheduledStartDate
-      phase.actualEndDate = phase.scheduledEndDate
     }
   }
 
diff --git a/src/components/ChallengeEditor/ChallengeView/index.js b/src/components/ChallengeEditor/ChallengeView/index.js
index fa9adddb..aa7141b3 100644
--- a/src/components/ChallengeEditor/ChallengeView/index.js
+++ b/src/components/ChallengeEditor/ChallengeView/index.js
@@ -37,7 +37,10 @@ const ChallengeView = ({
   enableEdit,
   onLaunchChallenge,
   onCloseTask,
-  projectPhases
+  projectPhases,
+  assignYourselfCopilot,
+  showRejectChallengeModal,
+  loggedInUser
 }) => {
   const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
@@ -74,7 +77,7 @@ const ChallengeView = ({
   const reviewerFromResources = reviewerResource ? reviewerResource.memberHandle : ''
   let copilot, reviewer
   if (challenge) {
-    copilot = challenge.copilot
+    copilot = challenge.copilot || (challenge.legacy && challenge.legacy.selfServiceCopilot)
     reviewer = challenge.reviewer
   }
   copilot = copilot || copilotFromResources
@@ -103,18 +106,18 @@ const ChallengeView = ({
                 </span>
               </div>
               {selectedMilestone &&
-              <div className={styles.col}>
-                <span><span className={styles.fieldTitle}>Milestone:</span> {selectedMilestone ? (
-                  <a href={`${CONNECT_APP_URL}/projects/${projectDetail.id}`} target='_blank'
-                    rel='noopener noreferrer'>
-                    {selectedMilestone.name}
-                  </a>
-                ) : ''}</span>
-              </div>
+                <div className={styles.col}>
+                  <span><span className={styles.fieldTitle}>Milestone:</span> {selectedMilestone ? (
+                    <a href={`${CONNECT_APP_URL}/projects/${projectDetail.id}`} target='_blank'
+                      rel='noopener noreferrer'>
+                      {selectedMilestone.name}
+                    </a>
+                  ) : ''}</span>
+                </div>
               }
               <div className={styles.col}>
                 <span className={styles.fieldTitle}>Track:</span>
-                <Track disabled type={challengeTrack} isActive key={challenge.trackId} onUpdateOthers={() => {}} />
+                <Track disabled type={challengeTrack} isActive key={challenge.trackId} onUpdateOthers={() => { }} />
               </div>
               <div className={styles.col}>
                 <span><span className={styles.fieldTitle}>Type:</span> {selectedType ? selectedType.name : ''}</span>
@@ -130,10 +133,11 @@ const ChallengeView = ({
               </div>
             </div>
             {isTask &&
-            <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly />}
+              <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly />}
             <CopilotField challenge={{
-              copilot
-            }} copilots={metadata.members} readOnly />
+              copilot,
+              selfService: challenge.legacy.selfService
+            }} copilots={challengeResources} assignYourselfCopilot={assignYourselfCopilot} showRejectChallengeModal={showRejectChallengeModal} readOnly loggedInUser={loggedInUser} />
             <div className={cn(styles.row, styles.topRow)}>
               <div className={styles.col}>
                 <span><span
@@ -259,7 +263,10 @@ ChallengeView.propTypes = {
   enableEdit: PropTypes.bool,
   onLaunchChallenge: PropTypes.func,
   onCloseTask: PropTypes.func,
-  projectPhases: PropTypes.arrayOf(PropTypes.object)
+  projectPhases: PropTypes.arrayOf(PropTypes.object),
+  assignYourselfCopilot: PropTypes.func.isRequired,
+  showRejectChallengeModal: PropTypes.func.isRequired,
+  loggedInUser: PropTypes.object
 }
 
 export default withRouter(ChallengeView)
diff --git a/src/components/ChallengeEditor/ChallengeViewTabs/index.js b/src/components/ChallengeEditor/ChallengeViewTabs/index.js
index 5d4229f4..ae890736 100644
--- a/src/components/ChallengeEditor/ChallengeViewTabs/index.js
+++ b/src/components/ChallengeEditor/ChallengeViewTabs/index.js
@@ -13,8 +13,8 @@ import LegacyLinks from '../../LegacyLinks'
 import ForumLink from '../../ForumLink'
 import Registrants from '../Registrants'
 import Submissions from '../Submissions'
-import { getResourceRoleByName } from '../../../util/tc'
-import { MESSAGE } from '../../../config/constants'
+import { checkAdmin, getResourceRoleByName } from '../../../util/tc'
+import { CHALLENGE_STATUS, MESSAGE } from '../../../config/constants'
 import Tooltip from '../../Tooltip'
 import CancelDropDown from '../Cancel-Dropdown'
 import 'react-tabs/style/react-tabs.css'
@@ -43,7 +43,11 @@ const ChallengeViewTabs = ({
   onLaunchChallenge,
   cancelChallenge,
   onCloseTask,
-  projectPhases
+  projectPhases,
+  assignYourselfCopilot,
+  showRejectChallengeModal,
+  loggedInUser,
+  onApproveChallenge
 }) => {
   const [selectedTab, setSelectedTab] = useState(0)
 
@@ -80,6 +84,22 @@ const ChallengeViewTabs = ({
 
   const isTask = _.get(challenge, 'task.isTask', false)
 
+  const isSelfService = challenge.legacy.selfService
+  const isDraft = challenge.status.toUpperCase() === CHALLENGE_STATUS.DRAFT
+  const isSelfServiceCopilot = challenge.legacy.selfServiceCopilot === loggedInUser.handle
+  const isAdmin = checkAdmin(token)
+  const canApprove = isSelfServiceCopilot && isDraft && isSelfService
+  const hasBillingAccount = _.get(projectDetail, 'billingAccountId') !== null
+  // only challenges that have a billing account can be launched AND
+  // if this isn't self-service, permit launching if the challenge is draft
+  // OR if this isn't a non-self-service draft, permit launching if:
+  // a) the current user is either the self-service copilot or is an admin AND
+  // b) the challenge is approved
+  const canLaunch = hasBillingAccount &&
+    ((!isSelfService && isDraft) ||
+      ((isSelfServiceCopilot || isAdmin) &&
+        challenge.status.toUpperCase() === CHALLENGE_STATUS.APPROVED))
+
   return (
     <div className={styles.list}>
       <Helmet title='View Details' />
@@ -94,7 +114,7 @@ const ChallengeViewTabs = ({
               styles.actionButtonsLeft
             )}
           >
-            { isTask ? (<ForumLink challenge={challenge} />)
+            {isTask ? (<ForumLink challenge={challenge} />)
               : (<LegacyLinks challenge={challenge} challengeView />)
             }
           </div>
@@ -107,13 +127,14 @@ const ChallengeViewTabs = ({
             styles.actionButtonsRight
           )}
         >
-          {(challenge.status === 'Draft' || challenge.status === 'New') && <div className={styles['cancel-button']}><CancelDropDown challenge={challenge} onSelectMenu={cancelChallenge} /></div>}
-          {challenge.status === 'Draft' && (
+          {(isDraft || challenge.status === 'New') && !isSelfService &&
+            (<div className={styles['cancel-button']}><CancelDropDown challenge={challenge} onSelectMenu={cancelChallenge} /></div>)}
+          {canLaunch && (
             <div className={styles.button}>
               {challenge.legacyId || isTask ? (
                 <PrimaryButton
-                  text={'Launch'}
-                  type={'info'}
+                  text='Launch'
+                  type='info'
                   onClick={onLaunchChallenge}
                 />
               ) : (
@@ -124,6 +145,15 @@ const ChallengeViewTabs = ({
               )}
             </div>
           )}
+          {canApprove && (
+            <div className={styles.button}>
+              <PrimaryButton
+                text='Approve'
+                type='info'
+                onClick={onApproveChallenge}
+              />
+            </div>
+          )}
           {isTask && challenge.status === 'Active' && (
             <div className={styles.button}>
               {assignedMemberDetails ? (
@@ -138,9 +168,18 @@ const ChallengeViewTabs = ({
               )}
             </div>
           )}
-          {enableEdit && (
+          {enableEdit && !isSelfService && (
             <PrimaryButton text={'Edit'} type={'info'} submit link={`./edit`} />
           )}
+          {isSelfService && isDraft && (isAdmin || isSelfServiceCopilot) && (
+            <div className={styles.button}>
+              <PrimaryButton
+                text='Reject challenge'
+                type='danger'
+                onClick={showRejectChallengeModal}
+              />
+            </div>
+          )}
           <PrimaryButton text={'Back'} type={'info'} submit link={`..`} />
         </div>
       </div>
@@ -208,6 +247,10 @@ const ChallengeViewTabs = ({
           onLaunchChallenge={onLaunchChallenge}
           onCloseTask={onCloseTask}
           projectPhases={projectPhases}
+          assignYourselfCopilot={assignYourselfCopilot}
+          showRejectChallengeModal={showRejectChallengeModal}
+          onApproveChallenge={onApproveChallenge}
+          loggedInUser={loggedInUser}
         />
       )}
       {selectedTab === 1 && (
@@ -244,7 +287,11 @@ ChallengeViewTabs.propTypes = {
   onLaunchChallenge: PropTypes.func,
   cancelChallenge: PropTypes.func.isRequired,
   onCloseTask: PropTypes.func,
-  projectPhases: PropTypes.arrayOf(PropTypes.object)
+  projectPhases: PropTypes.arrayOf(PropTypes.object),
+  assignYourselfCopilot: PropTypes.func.isRequired,
+  showRejectChallengeModal: PropTypes.func.isRequired,
+  loggedInUser: PropTypes.object.isRequired,
+  onApproveChallenge: PropTypes.func
 }
 
 export default ChallengeViewTabs
diff --git a/src/components/ChallengeEditor/Copilot-Field/Copilot-Field.module.scss b/src/components/ChallengeEditor/Copilot-Field/Copilot-Field.module.scss
index d50a3f10..c288cf00 100644
--- a/src/components/ChallengeEditor/Copilot-Field/Copilot-Field.module.scss
+++ b/src/components/ChallengeEditor/Copilot-Field/Copilot-Field.module.scss
@@ -44,6 +44,7 @@
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
+      width: 100%;
 
         div {
           margin-right: 13px;
diff --git a/src/components/ChallengeEditor/Copilot-Field/index.js b/src/components/ChallengeEditor/Copilot-Field/index.js
index 25b24540..9e6392c8 100644
--- a/src/components/ChallengeEditor/Copilot-Field/index.js
+++ b/src/components/ChallengeEditor/Copilot-Field/index.js
@@ -1,23 +1,39 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './Copilot-Field.module.scss'
 import cn from 'classnames'
 import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { PrimaryButton } from '../../Buttons'
 import CopilotCard from '../../CopilotCard'
 
-const CopilotField = ({ copilots, challenge, onUpdateOthers, readOnly }) => {
+import styles from './Copilot-Field.module.scss'
+
+const CopilotField = ({ copilots, challenge, onUpdateOthers, readOnly, assignYourselfCopilot, loggedInUser }) => {
   let errMessage = 'Please set a copilot'
-  const selectedCopilot = _.find(copilots, { handle: challenge.copilot })
+  const handleProperty = copilots.handle ? 'handle' : 'memberHandle'
+  const selectedCopilot = _.find(copilots, { [handleProperty]: challenge.copilot })
+  const selectedCopilotHandle = selectedCopilot ? selectedCopilot[handleProperty] : undefined
   const copilotFee = _.find(challenge.prizeSets, p => p.type === 'copilot', [])
-  console.log(copilotFee)
+  const selfService = challenge.selfService
+  const copilotIsSelf = loggedInUser && selectedCopilotHandle === loggedInUser.handle
+  const assignButtonText = `${selectedCopilot && copilotIsSelf ? 'Una' : 'A'}ssign Yourself`
+  const showAssignButton = loggedInUser && (!selectedCopilotHandle || copilotIsSelf)
+
   if (readOnly) {
     return (
       <div className={styles.row}>
         <div className={cn(styles.field, styles.col1)}>
-          <label htmlFor='copilot'>Copilot :</label>
+          <label htmlFor='copilot'>Copilot:</label>
         </div>
-        {selectedCopilot && (<div className={cn(styles.field, styles.col2)}>
-          <CopilotCard copilot={selectedCopilot} selectedCopilot='' key={selectedCopilot.handle} />
+        {(selectedCopilot || selfService) && (<div className={cn(styles.field, styles.col2)}>
+          {(selectedCopilot && <CopilotCard copilot={selectedCopilot} selectedCopilot={challenge.copilot} key={selectedCopilotHandle} />)}
+          {((selfService && showAssignButton) && <div>
+            <PrimaryButton
+              text={assignButtonText}
+              type='info'
+              onClick={assignYourselfCopilot}
+            />
+          </div>)}
         </div>)}
       </div>
     )
@@ -26,7 +42,7 @@ const CopilotField = ({ copilots, challenge, onUpdateOthers, readOnly }) => {
     <>
       <div className={styles.row}>
         <div className={cn(styles.field, styles.col1)}>
-          <label htmlFor='copilot'>Copilot :</label>
+          <label htmlFor='copilot'>Copilot:</label>
         </div>
         <div className={cn(styles.field, styles.col2)}>
           {
@@ -49,7 +65,7 @@ const CopilotField = ({ copilots, challenge, onUpdateOthers, readOnly }) => {
 
 CopilotField.defaultProps = {
   copilots: [],
-  onUpdateOthers: () => {},
+  onUpdateOthers: () => { },
   readOnly: false
 }
 
@@ -57,7 +73,9 @@ CopilotField.propTypes = {
   copilots: PropTypes.arrayOf(PropTypes.shape()).isRequired,
   challenge: PropTypes.shape().isRequired,
   onUpdateOthers: PropTypes.func,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  assignYourselfCopilot: PropTypes.func.isRequired,
+  loggedInUser: PropTypes.object
 }
 
 export default CopilotField
diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js
index ae5d8cbd..1f0b67ba 100644
--- a/src/components/ChallengeEditor/index.js
+++ b/src/components/ChallengeEditor/index.js
@@ -181,7 +181,7 @@ class ChallengeEditor extends Component {
     }
   }
 
-  async resetChallengeData (setState = () => {}) {
+  async resetChallengeData (setState = () => { }) {
     const { isNew, challengeDetails, metadata, attachments, challengeId, assignedMemberDetails } = this.props
     if (
       challengeDetails &&
@@ -214,11 +214,13 @@ class ChallengeEditor extends Component {
         setState({
           challenge: challengeDetail,
           assignedMemberDetails,
-          draftChallenge: { data: {
-            ..._.cloneDeep(challengeDetails),
-            copilot: challengeData.copilot,
-            reviewer: challengeData.reviewer
-          } },
+          draftChallenge: {
+            data: {
+              ..._.cloneDeep(challengeDetails),
+              copilot: challengeData.copilot,
+              reviewer: challengeData.reviewer
+            }
+          },
           isLoading: false,
           isOpenAdvanceSettings,
           currentTemplate
@@ -506,7 +508,7 @@ class ChallengeEditor extends Component {
     if (fileTypesMetadataIndex > -1) {
       fileTypesMetadata = { ...newChallenge.metadata[fileTypesMetadataIndex] }
       newChallenge.metadata[fileTypesMetadataIndex] = fileTypesMetadata
-    // if not yet, create an empty record in metadata
+      // if not yet, create an empty record in metadata
     } else {
       fileTypesMetadata = { name: 'fileTypes', value: '[]' }
       newChallenge.metadata.push(fileTypesMetadata)
@@ -1038,7 +1040,8 @@ class ChallengeEditor extends Component {
           newChallenge.phases = _.cloneDeep(draftChallenge.data.phases)
           this.setState({
             draftChallenge,
-            challenge: newChallenge })
+            challenge: newChallenge
+          })
         } else {
           this.setState({ draftChallenge })
         }
@@ -1065,7 +1068,7 @@ class ChallengeEditor extends Component {
     return challengeId
   }
 
-  async updateAllChallengeInfo (status, cb = () => {}) {
+  async updateAllChallengeInfo (status, cb = () => { }) {
     const { updateChallengeDetails, assignedMemberDetails: oldAssignedMember, projectDetail } = this.props
     if (this.state.isSaving) return
     this.setState({ isSaving: true }, async () => {
@@ -1095,11 +1098,13 @@ class ChallengeEditor extends Component {
         const draftChallenge = { data: action.challengeDetails }
         draftChallenge.data.copilot = copilot
         draftChallenge.data.reviewer = reviewer
-        this.setState({ isLaunch: true,
+        this.setState({
+          isLaunch: true,
           isConfirm: newChallenge.id,
           draftChallenge,
           challenge: newChallenge,
-          isSaving: false }, cb)
+          isSaving: false
+        }, cb)
       } catch (e) {
         const error = this.formatResponseError(e) || `Unable to update the challenge to status ${status}`
         this.setState({ isSaving: false, error }, cb)
@@ -1228,7 +1233,10 @@ class ChallengeEditor extends Component {
       projectDetail,
       attachments,
       projectPhases,
-      challengeId
+      challengeId,
+      assignYourselfCopilot,
+      challengeResources,
+      loggedInUser
     } = this.props
     if (_.isEmpty(challenge)) {
       return <div>Error loading challenge</div>
@@ -1353,7 +1361,7 @@ class ChallengeEditor extends Component {
           />
         )
 
-      // if some information for closing task is missing, ask to complete it
+        // if some information for closing task is missing, ask to complete it
       } else {
         const formattedErrors = validationErrors.length === 1 ? validationErrors[0] : (
           validationErrors.slice(0, -1).join(', ') + ' and ' + validationErrors[validationErrors.length - 1]
@@ -1410,7 +1418,7 @@ class ChallengeEditor extends Component {
                 <OutlineButton text={isSaving ? 'Saving...' : 'Save'} type={'success'} onClick={this.onSaveChallenge} />
               </div> */}
               <div className={styles.button}>
-                { !this.state.hasValidationErrors ? (
+                {!this.state.hasValidationErrors ? (
                   <PrimaryButton text={isSaving ? 'Saving...' : 'Save Draft'} type={'info'} onClick={this.createDraftHandler} />
                 ) : (
                   <PrimaryButton text={'Save Draft'} type={'disabled'} />
@@ -1460,6 +1468,7 @@ class ChallengeEditor extends Component {
     const activeProjectMilestones = projectPhases.filter(phase => phase.status === MILESTONE_STATUS.ACTIVE)
     const currentChallengeId = this.getCurrentChallengeId()
     const showTimeline = false // disables the timeline for time being https://github.com/topcoder-platform/challenge-engine-ui/issues/706
+    const copilotResources = metadata.members || challengeResources
     const challengeForm = isNew
       ? (
         <form name='challenge-new-form' noValidate autoComplete='off' onSubmit={this.createChallengeHandler}>
@@ -1468,11 +1477,11 @@ class ChallengeEditor extends Component {
             <TypeField types={metadata.challengeTypes} onUpdateSelect={this.onUpdateSelect} challenge={challenge} />
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
             {projectDetail.version === 'v4' && <MilestoneField milestones={activeProjectMilestones} onUpdateSelect={this.onUpdateSelect} projectId={projectDetail.id} selectedMilestoneId={selectedMilestoneId} />}
-            { useTask && (<DiscussionField hasForum={hasForum} toggleForum={this.toggleForumOnCreate} />) }
+            {useTask && (<DiscussionField hasForum={hasForum} toggleForum={this.toggleForumOnCreate} />)}
           </div>
           {showDesignChallengeWarningModel && designChallengeModal}
-          { errorContainer }
-          { actionButtons }
+          {errorContainer}
+          {actionButtons}
         </form>
       ) : (
         <form name='challenge-info-form' noValidate autoComplete='off' onSubmit={(e) => e.preventDefault()}>
@@ -1489,7 +1498,7 @@ class ChallengeEditor extends Component {
               </div>
               <div className={styles.col}>
                 <span className={styles.fieldTitle}>Track:</span>
-                <Track disabled type={challengeTrack} isActive key={challenge.trackId} onUpdateOthers={() => {}} />
+                <Track disabled type={challengeTrack} isActive key={challenge.trackId} onUpdateOthers={() => { }} />
               </div>
               <div className={styles.col}>
                 <span><span className={styles.fieldTitle}>Type:</span> {selectedType ? selectedType.name : ''}</span>
@@ -1509,7 +1518,7 @@ class ChallengeEditor extends Component {
               />
             )}
             {projectDetail.version === 'v4' && <MilestoneField milestones={activeProjectMilestones} onUpdateSelect={this.onUpdateSelect} projectId={projectDetail.id} selectedMilestoneId={selectedMilestoneId} />}
-            <CopilotField challenge={challenge} copilots={metadata.members} onUpdateOthers={this.onUpdateOthers} />
+            <CopilotField challenge={challenge} copilots={copilotResources} onUpdateOthers={this.onUpdateOthers} assignYourselfCopilot={assignYourselfCopilot} loggedInUser={loggedInUser} />
             <ReviewTypeField
               reviewers={metadata.members}
               challenge={challenge}
@@ -1531,7 +1540,7 @@ class ChallengeEditor extends Component {
                 </label>
               </div>
             </div>
-            { isOpenAdvanceSettings && (
+            {isOpenAdvanceSettings && (
               <React.Fragment>
                 <NDAField challenge={challenge} toggleNdaRequire={this.toggleNdaRequire} />
                 {/* remove terms field and use default term */}
@@ -1580,7 +1589,7 @@ class ChallengeEditor extends Component {
                 />
               )
             }
-            { showTimeline && (
+            {showTimeline && (
               <ChallengeScheduleField
                 templates={this.getAvailableTimelineTemplates()}
                 challengePhases={metadata.challengePhases}
@@ -1612,7 +1621,7 @@ class ChallengeEditor extends Component {
               onUpdateMetadata={this.onUpdateMetadata}
             />
             {/* hide until challenge API change is pushed to PROD https://github.com/topcoder-platform/challenge-api/issues/348 */}
-            { false && <AttachmentField
+            {false && <AttachmentField
               challenge={{ ...challenge, id: currentChallengeId }}
               challengeId={currentChallengeId}
               attachments={attachments}
@@ -1624,8 +1633,8 @@ class ChallengeEditor extends Component {
             <CopilotFeeField challenge={challenge} onUpdateOthers={this.onUpdateOthers} />
             <ChallengeTotalField challenge={challenge} />
           </div>
-          { errorContainer }
-          { actionButtons }
+          {errorContainer}
+          {actionButtons}
         </form>
       )
 
@@ -1644,11 +1653,11 @@ class ChallengeEditor extends Component {
         </div>
         <div className={styles.textRequired}>* Required</div>
         <div className={styles.container}>
-          { activateModal }
-          { draftModal }
-          { closeTaskModal }
+          {activateModal}
+          {draftModal}
+          {closeTaskModal}
           <div className={styles.formContainer}>
-            { challengeForm }
+            {challengeForm}
           </div>
         </div>
       </div>
@@ -1689,7 +1698,8 @@ ChallengeEditor.propTypes = {
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
   loggedInUser: PropTypes.shape().isRequired,
-  projectPhases: PropTypes.arrayOf(PropTypes.object).isRequired
+  projectPhases: PropTypes.arrayOf(PropTypes.object).isRequired,
+  assignYourselfCopilot: PropTypes.func.isRequired
 }
 
 export default withRouter(ChallengeEditor)
diff --git a/src/components/ChallengesComponent/ChallengeCard/index.js b/src/components/ChallengesComponent/ChallengeCard/index.js
index 4a0695a2..80d5fc30 100644
--- a/src/components/ChallengesComponent/ChallengeCard/index.js
+++ b/src/components/ChallengesComponent/ChallengeCard/index.js
@@ -163,15 +163,17 @@ const hoverComponents = (challenge, onUpdateLaunch, deleteModalLaunch) => {
   )
 }
 
-const renderStatus = (status) => {
+const renderStatus = (status, getStatusText) => {
   switch (status) {
     case CHALLENGE_STATUS.ACTIVE:
+    case CHALLENGE_STATUS.APPROVED:
     case CHALLENGE_STATUS.NEW:
     case CHALLENGE_STATUS.DRAFT:
     case CHALLENGE_STATUS.COMPLETED:
-      return (<ChallengeStatus status={status} />)
+      const statusText = getStatusText ? getStatusText(status) : status
+      return (<ChallengeStatus status={status} statusText={statusText} />)
     default:
-      return (<span className={styles.statusText}>{status}</span>)
+      return (<span className={styles.statusText}>{statusText}</span>)
   }
 }
 
@@ -276,7 +278,7 @@ class ChallengeCard extends React.Component {
 
   render () {
     const { isLaunch, isConfirm, isSaving, isDeleteLaunch, isCheckChalengePermission, hasEditChallengePermission } = this.state
-    const { challenge, shouldShowCurrentPhase, reloadChallengeList, isBillingAccountExpired } = this.props
+    const { challenge, shouldShowCurrentPhase, reloadChallengeList, isBillingAccountExpired, disableHover, getStatusText } = this.props
     const { phaseMessage, endTime } = getPhaseInfo(challenge)
     const deleteMessage = isCheckChalengePermission
       ? 'Checking permissions...'
@@ -313,7 +315,7 @@ class ChallengeCard extends React.Component {
           />
         )
         }
-        { isLaunch && isConfirm && (
+        {isLaunch && isConfirm && (
           <AlertModal
             title='Success'
             message={`Challenge "${challenge.name}" is activated successfuly`}
@@ -324,7 +326,7 @@ class ChallengeCard extends React.Component {
             okLink={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}
             onClose={this.resetModal}
           />
-        ) }
+        )}
 
         <Link className={styles.col1} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}>
           <div className={styles.name}>
@@ -335,14 +337,14 @@ class ChallengeCard extends React.Component {
         </Link>
         {renderLastUpdated(challenge)}
         <Link className={styles.col2} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}>
-          {renderStatus(challenge.status.toUpperCase())}
+          {renderStatus(challenge.status.toUpperCase(), getStatusText)}
         </Link>
         {shouldShowCurrentPhase && (<Link className={styles.col3} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}>
           <span className={styles.block}>{phaseMessage}</span>
           <span className='block light-text'>{endTime}</span>
         </Link>)}
         <div className={cn(styles.col4, styles.editingContainer)}>
-          {hoverComponents(challenge, this.onUpdateLaunch, this.deleteModalLaunch)}
+          {(disableHover ? <Link className={styles.link} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}>View Challenge</Link> : hoverComponents(challenge, this.onUpdateLaunch, this.deleteModalLaunch))}
         </div>
         <div className={cn(styles.col4, styles.iconsContainer)}>
           <div className={styles.faIconContainer}>
@@ -361,7 +363,7 @@ class ChallengeCard extends React.Component {
 
 ChallengeCard.defaultPrps = {
   shouldShowCurrentPhase: true,
-  reloadChallengeList: () => {}
+  reloadChallengeList: () => { }
 }
 
 ChallengeCard.propTypes = {
@@ -370,7 +372,9 @@ ChallengeCard.propTypes = {
   reloadChallengeList: PropTypes.func,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  isBillingAccountExpired: PropTypes.bool
+  isBillingAccountExpired: PropTypes.bool,
+  disableHover: PropTypes.bool,
+  getStatusText: PropTypes.func
 }
 
 export default withRouter(ChallengeCard)
diff --git a/src/components/ChallengesComponent/ChallengeList/index.js b/src/components/ChallengesComponent/ChallengeList/index.js
index d3398b5b..e739e1d1 100644
--- a/src/components/ChallengesComponent/ChallengeList/index.js
+++ b/src/components/ChallengesComponent/ChallengeList/index.js
@@ -48,10 +48,10 @@ class ChallengeList extends Component {
    * @param {String} projectStatus project status
    */
   updateSearchParam (searchText, projectStatus) {
-    const { status, filterChallengeName, loadChallengesByPage, activeProjectId } = this.props
+    const { status, filterChallengeName, loadChallengesByPage, activeProjectId, selfService } = this.props
     this.setState({ searchText }, () => {
       if (status !== projectStatus || searchText !== filterChallengeName) {
-        loadChallengesByPage(1, activeProjectId, projectStatus, searchText)
+        loadChallengesByPage(1, activeProjectId, projectStatus, searchText, selfService, this.getHandle())
       }
     })
   }
@@ -62,9 +62,9 @@ class ChallengeList extends Component {
    */
   handlePageChange (pageNumber) {
     const { searchText } = this.state
-    const { page, loadChallengesByPage, activeProjectId, status } = this.props
+    const { page, loadChallengesByPage, activeProjectId, status, selfService } = this.props
     if (page !== pageNumber) {
-      loadChallengesByPage(pageNumber, activeProjectId, status, searchText)
+      loadChallengesByPage(pageNumber, activeProjectId, status, searchText, selfService, this.getHandle())
     }
   }
 
@@ -73,8 +73,8 @@ class ChallengeList extends Component {
    */
   reloadChallengeList () {
     const { searchText } = this.state
-    const { page, loadChallengesByPage, activeProjectId, status } = this.props
-    loadChallengesByPage(page, activeProjectId, status, searchText)
+    const { page, loadChallengesByPage, activeProjectId, status, selfService } = this.props
+    loadChallengesByPage(page, activeProjectId, status, searchText, selfService, this.getHandle())
   }
 
   /**
@@ -92,6 +92,22 @@ class ChallengeList extends Component {
     this.setState({ errorMessage: null })
   }
 
+  getStatusTextFunc (selfService) {
+    const draftText = selfService ? 'Waiting for approval' : 'Draft'
+    return (status) => {
+      switch (status) {
+        case CHALLENGE_STATUS.DRAFT:
+          return draftText
+        default:
+          return status
+      }
+    }
+  }
+
+  getHandle () {
+    return this.props.auth && this.props.auth.user ? this.props.auth.user.handle : null
+  }
+
   render () {
     const { searchText, errorMessage } = this.state
     const {
@@ -104,7 +120,8 @@ class ChallengeList extends Component {
       totalChallenges,
       partiallyUpdateChallengeDetails,
       deleteChallenge,
-      isBillingAccountExpired
+      isBillingAccountExpired,
+      selfService
     } = this.props
     if (warnMessage) {
       return <Message warnMessage={warnMessage} />
@@ -112,6 +129,7 @@ class ChallengeList extends Component {
 
     let selectedTab = 0
     switch (status) {
+      case CHALLENGE_STATUS.APPROVED:
       case CHALLENGE_STATUS.NEW:
         selectedTab = 1
         break
@@ -167,7 +185,8 @@ class ChallengeList extends Component {
                 break
               }
               case 1: {
-                this.directUpdateSearchParam(searchText, CHALLENGE_STATUS.NEW)
+                const status = selfService ? CHALLENGE_STATUS.APPROVED : CHALLENGE_STATUS.NEW
+                this.directUpdateSearchParam(searchText, status)
                 break
               }
               case 2: {
@@ -185,11 +204,11 @@ class ChallengeList extends Component {
             }
           }}>
           <TabList>
-            <Tab>Active</Tab>
-            <Tab>New</Tab>
-            <Tab>Draft</Tab>
-            <Tab>Completed</Tab>
-            <Tab>Cancelled</Tab>
+            <Tab>{(selfService ? 'Assigned challenges' : 'Active')}</Tab>
+            <Tab>{(selfService ? 'Approved' : 'New')}</Tab>
+            <Tab>{this.getStatusTextFunc(selfService)(CHALLENGE_STATUS.DRAFT)}</Tab>
+            {(!selfService && <Tab>Completed</Tab>)}
+            {(!selfService && <Tab>Cancelled</Tab>)}
           </TabList>
           <TabPanel />
           <TabPanel />
@@ -197,13 +216,16 @@ class ChallengeList extends Component {
         </Tabs>)}
         {
           challenges.length === 0 && (
-            <NoChallenge activeProject={activeProject} />
+            <NoChallenge
+              activeProject={activeProject}
+              selfService={selfService}
+            />
           )
         }
         {
           challenges.length > 0 && (
             <div className={styles.header}>
-              <div className={styles.col1}>Challenges Name</div>
+              <div className={styles.col1}>Challenge Name</div>
               <div className={styles.col2}>Last Updated</div>
               <div className={styles.col2}>Status</div>
               {(selectedTab === 0) && (<div className={styles.col3}>Current phase</div>)}
@@ -225,6 +247,8 @@ class ChallengeList extends Component {
                         partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
                         deleteChallenge={deleteChallenge}
                         isBillingAccountExpired={isBillingAccountExpired}
+                        disableHover={selfService}
+                        getStatusText={this.getStatusTextFunc(selfService)}
                       />
                     </li>
                   )
@@ -269,7 +293,9 @@ ChallengeList.propTypes = {
   totalChallenges: PropTypes.number.isRequired,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  isBillingAccountExpired: PropTypes.bool
+  isBillingAccountExpired: PropTypes.bool,
+  selfService: PropTypes.bool,
+  auth: PropTypes.object.isRequired
 }
 
 export default ChallengeList
diff --git a/src/components/ChallengesComponent/ChallengeStatus/ChallengeStatus.module.scss b/src/components/ChallengesComponent/ChallengeStatus/ChallengeStatus.module.scss
index 7fde3c54..12ac0156 100644
--- a/src/components/ChallengesComponent/ChallengeStatus/ChallengeStatus.module.scss
+++ b/src/components/ChallengesComponent/ChallengeStatus/ChallengeStatus.module.scss
@@ -1,12 +1,13 @@
 @import "../../../styles/includes";
 
 .container {
-  height: 22px;
+  min-height: 22px;
   width: 86px;
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
+  text-align: center;
 
   span {
     @include roboto;
diff --git a/src/components/ChallengesComponent/ChallengeStatus/index.js b/src/components/ChallengesComponent/ChallengeStatus/index.js
index d11fd980..a5d074ea 100644
--- a/src/components/ChallengesComponent/ChallengeStatus/index.js
+++ b/src/components/ChallengesComponent/ChallengeStatus/index.js
@@ -12,21 +12,23 @@ import styles from './ChallengeStatus.module.scss'
 
 const statuses = {
   [CHALLENGE_STATUS.ACTIVE]: styles.green,
+  [CHALLENGE_STATUS.APPROVED]: styles.yellow,
   [CHALLENGE_STATUS.NEW]: styles.yellow,
   [CHALLENGE_STATUS.DRAFT]: styles.gray,
   [CHALLENGE_STATUS.COMPLETED]: styles.blue
 }
 
-const ChallengeStatus = ({ status }) => {
+const ChallengeStatus = ({ status, statusText }) => {
   return (
     <div className={cn(styles.container, statuses[status])}>
-      <span>{_.startCase(_.toLower(status))}</span>
+      <span>{_.startCase(_.toLower(statusText))}</span>
     </div>
   )
 }
 
 ChallengeStatus.propTypes = {
-  status: PropTypes.string
+  status: PropTypes.string,
+  statusText: PropTypes.string
 }
 
 export default ChallengeStatus
diff --git a/src/components/ChallengesComponent/NoChallenge/index.js b/src/components/ChallengesComponent/NoChallenge/index.js
index c781701c..86f51307 100644
--- a/src/components/ChallengesComponent/NoChallenge/index.js
+++ b/src/components/ChallengesComponent/NoChallenge/index.js
@@ -5,13 +5,21 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './NoChallenge.module.scss'
 
-const NoChallenge = ({ activeProject }) => {
+const NoChallenge = ({
+  activeProject,
+  selfService
+}) => {
+  let noChallengeMessage
+  if (selfService || !!activeProject) {
+    noChallengeMessage = selfService ? 'There are' : 'You have'
+    noChallengeMessage += ' no challenges at the moment'
+  } else {
+    noChallengeMessage = 'Please select a project to view challenges'
+  }
+
   return (
     <div className={styles.noChallenge}>
-      {
-        activeProject
-          ? (<p>You have no challenges at the moment</p>) : (<p>Please select a project to view challenges</p>)
-      }
+      <p>{noChallengeMessage}</p>
     </div>
   )
 }
@@ -24,7 +32,8 @@ NoChallenge.propTypes = {
   activeProject: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string
-  })
+  }),
+  selfService: PropTypes.bool
 }
 
 export default NoChallenge
diff --git a/src/components/ChallengesComponent/index.js b/src/components/ChallengesComponent/index.js
index 06966a26..82f34bb2 100644
--- a/src/components/ChallengesComponent/index.js
+++ b/src/components/ChallengesComponent/index.js
@@ -27,7 +27,9 @@ const ChallengesComponent = ({
   totalChallenges,
   partiallyUpdateChallengeDetails,
   deleteChallenge,
-  isBillingAccountExpired
+  isBillingAccountExpired,
+  selfService,
+  auth
 }) => {
   return (
     <Sticky top={10}>
@@ -41,7 +43,7 @@ const ChallengesComponent = ({
                 __html: xss(activeProject ? activeProject.name : '')
               }}
             />
-            { activeProject && activeProject.id && (
+            {activeProject && activeProject.id && (
               <span>
                 (<a href={`${CONNECT_APP_URL}/projects/${activeProject.id}`} target='_blank' rel='noopener noreferrer'>View Project</a>)
               </span>
@@ -76,6 +78,8 @@ const ChallengesComponent = ({
               partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
               deleteChallenge={deleteChallenge}
               isBillingAccountExpired={isBillingAccountExpired}
+              selfService={selfService}
+              auth={auth}
             />
           )}
         </div>
@@ -101,7 +105,9 @@ ChallengesComponent.propTypes = {
   totalChallenges: PropTypes.number.isRequired,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  isBillingAccountExpired: PropTypes.bool
+  isBillingAccountExpired: PropTypes.bool,
+  selfService: PropTypes.bool,
+  auth: PropTypes.object.isRequired
 }
 
 ChallengesComponent.defaultProps = {
diff --git a/src/components/CopilotCard/index.js b/src/components/CopilotCard/index.js
index af97c490..c34bcaa0 100644
--- a/src/components/CopilotCard/index.js
+++ b/src/components/CopilotCard/index.js
@@ -8,11 +8,12 @@ const assets = require.context('../../assets/images', false, /svg/)
 
 const CopilotCard = ({ copilot, selectedCopilot, onUpdateOthers }) => {
   const icon = './user.svg'
+  const copilotHandle = copilot.handle || copilot.memberHandle
   return (
-    <div className={cn(styles.container, { [styles.active]: copilot.handle === selectedCopilot })} onClick={() => onUpdateOthers({ field: 'copilot', value: copilot.handle })}>
+    <div className={cn(styles.container, { [styles.active]: copilotHandle === selectedCopilot })} onClick={() => onUpdateOthers({ field: 'copilot', value: copilotHandle })}>
       {copilot.photoURL && <img src={copilot.photoURL} alt='copilot' />}
       {!copilot.photoURL && <ReactSVG path={assets(`${icon}`)} />}
-      <span className={cn(styles.handle, styles[copilot.color])}>{copilot.handle}</span>
+      <span className={cn(styles.handle, styles[copilot.color])}>{copilotHandle}</span>
     </div>
   )
 }
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index 023f7fef..eb3cec34 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -11,7 +11,9 @@ import styles from './Sidebar.module.scss'
 import { isBetaMode } from '../../util/cookie'
 
 const Sidebar = ({
-  projectId, resetSidebarActiveParams
+  projectId,
+  resetSidebarActiveParams,
+  selfService
 }) => {
   return (
     <div className={styles.sidebar}>
@@ -21,12 +23,21 @@ const Sidebar = ({
         {isBetaMode() && <span className={styles.beta}>beta</span>}
       </div>
       <Link to='/'>
-        <div className={cn(styles.homeLink, { [styles.active]: !projectId })} onClick={resetSidebarActiveParams}>
+        <div className={cn(styles.homeLink, { [styles.active]: !projectId && !selfService })} onClick={resetSidebarActiveParams}>
           All Work
         </div>
       </Link>
+      {
+        isBetaMode() && (
+          <Link to='/self-service'>
+            <div className={cn(styles.homeLink, { [styles.active]: !projectId && selfService })} onClick={resetSidebarActiveParams}>
+              Self-Service Opportunities
+            </div>
+          </Link>
+        )
+      }
       <a href='https://github.com/topcoder-platform/work-manager/issues/new' target='_blank' rel='noopener noreferrer' className='chameleon-feedback'>
-        <div className={cn(styles.homeLink, { [styles.active]: !projectId })}>
+        <div className={cn(styles.homeLink)}>
           Give Application Feedback
         </div>
       </a>
@@ -40,7 +51,8 @@ const Sidebar = ({
 
 Sidebar.propTypes = {
   projectId: PropTypes.string,
-  resetSidebarActiveParams: PropTypes.func
+  resetSidebarActiveParams: PropTypes.func,
+  selfService: PropTypes.bool
 }
 
 export default Sidebar
diff --git a/src/config/constants.js b/src/config/constants.js
index 58bcff97..b05d9e10 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -167,6 +167,7 @@ export const CHALLENGE_STATUS = {
   ACTIVE: 'ACTIVE',
   NEW: 'NEW',
   DRAFT: 'DRAFT',
+  APPROVED: 'APPROVED',
   COMPLETED: 'COMPLETED',
   CANCELLED: 'CANCELLED'
 }
diff --git a/src/containers/ChallengeEditor/ChallengeEditor.module.scss b/src/containers/ChallengeEditor/ChallengeEditor.module.scss
index 3a019247..4a837b17 100644
--- a/src/containers/ChallengeEditor/ChallengeEditor.module.scss
+++ b/src/containers/ChallengeEditor/ChallengeEditor.module.scss
@@ -25,4 +25,39 @@
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.rejectChallengeContainer {
+
+  .cancelReasonContainer {
+    margin-top: 25px;
+    width: 100%;
+    text-align: center;
+  
+    textarea.cancelReason {
+      width: 75%;
+    }
+  }
+
+  .rejectButtonContainer {
+    display: flex;
+    margin: 0px 30px;
+    flex-direction: row;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    width: 70%;
+
+    button {
+      height: 40px;
+      margin-right: 30px;
+
+      span {
+        padding: 0 20px;
+      }
+    }
+
+    .button:last-of-type {
+      margin-right: 0;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/containers/ChallengeEditor/index.js b/src/containers/ChallengeEditor/index.js
index 8345dd94..10cfe5fd 100644
--- a/src/containers/ChallengeEditor/index.js
+++ b/src/containers/ChallengeEditor/index.js
@@ -6,8 +6,9 @@ import moment from 'moment'
 import ChallengeEditorComponent from '../../components/ChallengeEditor'
 import ChallengeViewTabs from '../../components/ChallengeEditor/ChallengeViewTabs'
 import Loader from '../../components/Loader'
-import { checkAdmin } from '../../util/tc'
+import { checkAdmin, getResourceRoleByName } from '../../util/tc'
 import styles from './ChallengeEditor.module.scss'
+import modalStyles from '../../components/Modal/ConfirmationModal.module.scss'
 
 import {
   loadTimelineTemplates,
@@ -39,6 +40,9 @@ import { SUBMITTER_ROLE_UUID, MESSAGE } from '../../config/constants'
 import { patchChallenge } from '../../services/challenges'
 import ConfirmationModal from '../../components/Modal/ConfirmationModal'
 import AlertModal from '../../components/Modal/AlertModal'
+import Modal from '../../components/Modal'
+import PrimaryButton from '../../components/Buttons/PrimaryButton'
+import OutlineButton from '../../components/Buttons/OutlineButton'
 
 const theme = {
   container: styles.modalContainer
@@ -53,7 +57,9 @@ class ChallengeEditor extends Component {
       mountedWithCreatePage,
       isLaunching: false,
       showSuccessModal: false,
-      showLaunchModal: false
+      showLaunchModal: false,
+      showRejectModal: false,
+      cancelReason: null
     }
 
     this.onLaunchChallenge = this.onLaunchChallenge.bind(this)
@@ -65,6 +71,12 @@ class ChallengeEditor extends Component {
     this.onCloseTask = this.onCloseTask.bind(this)
     this.closeTask = this.closeTask.bind(this)
     this.fetchProjectDetails = this.fetchProjectDetails.bind(this)
+    this.assignYourselfCopilot = this.assignYourselfCopilot.bind(this)
+    this.showRejectChallengeModal = this.showRejectChallengeModal.bind(this)
+    this.closeRejectModal = this.closeRejectModal.bind(this)
+    this.rejectChallenge = this.rejectChallenge.bind(this)
+    this.onChangeCancelReason = this.onChangeCancelReason.bind(this)
+    this.onApproveChallenge = this.onApproveChallenge.bind(this)
   }
 
   componentDidMount () {
@@ -191,6 +203,20 @@ class ChallengeEditor extends Component {
     }
   }
 
+  async onApproveChallenge () {
+    const { partiallyUpdateChallengeDetails, challengeDetails } = this.props
+    const newStatus = 'Approved'
+    await partiallyUpdateChallengeDetails(challengeDetails.id, {
+      status: newStatus
+    })
+    this.setState({
+      challengeDetails: {
+        ...challengeDetails,
+        status: newStatus
+      }
+    })
+  }
+
   async cancelChallenge (challenge, cancelReason) {
     const { partiallyUpdateChallengeDetails, history } = this.props
 
@@ -216,6 +242,10 @@ class ChallengeEditor extends Component {
     this.setState({ showSuccessModal: false })
   }
 
+  closeRejectModal () {
+    this.setState({ showRejectModal: false })
+  }
+
   async activateChallenge () {
     const { partiallyUpdateChallengeDetails } = this.props
     if (this.state.isLaunching) return
@@ -306,6 +336,54 @@ class ChallengeEditor extends Component {
     }
   }
 
+  async assignYourselfCopilot () {
+    const { challengeDetails, loggedInUser, metadata, replaceResourceInRole } = this.props
+
+    // get the resource roles and new/old resource values
+    const copilotRole = getResourceRoleByName(metadata.resourceRoles, 'Copilot')
+    const approverRole = getResourceRoleByName(metadata.resourceRoles, 'Approver')
+    const screenerRole = getResourceRoleByName(metadata.resourceRoles, 'Primary Screener')
+    const copilotHandle = loggedInUser.handle
+    const challengeId = challengeDetails.id
+    const oldPilot = challengeDetails.legacy.selfServiceCopilot
+    const newPilot = oldPilot === copilotHandle ? null : copilotHandle
+
+    // replace the roles
+    await replaceResourceInRole(challengeId, copilotRole.id, newPilot, oldPilot)
+    await replaceResourceInRole(challengeId, approverRole.id, newPilot, oldPilot)
+    await replaceResourceInRole(challengeId, screenerRole.id, newPilot, oldPilot)
+
+    this.setState({
+      challengeDetails: {
+        ...challengeDetails,
+        legacy: {
+          ...challengeDetails.legacy,
+          selfServiceCopilot: newPilot
+        }
+      }
+    })
+  }
+
+  showRejectChallengeModal () {
+    this.setState({ showRejectModal: true })
+  }
+
+  async rejectChallenge () {
+    const { challengeDetails } = this.props
+    const { cancelReason } = this.state
+    const partialChallenge = {
+      status: 'Cancelled - Requirements Infeasible',
+      cancelReason: cancelReason
+    }
+    const updatedChallenge = await patchChallenge(challengeDetails.id, partialChallenge)
+    this.setState({ challengeDetails: updatedChallenge })
+    this.closeRejectModal()
+  }
+
+  onChangeCancelReason (reason) {
+    this.setState({ cancelReason: reason })
+  }
+
   render () {
     const {
       match,
@@ -330,7 +408,8 @@ class ChallengeEditor extends Component {
       deleteChallenge,
       loggedInUser,
       projectPhases,
-      isProjectPhasesLoading
+      isProjectPhasesLoading,
+      showRejectChallengeModal
       // members
     } = this.props
     const {
@@ -340,7 +419,9 @@ class ChallengeEditor extends Component {
       showCloseTaskModal,
       showSuccessModal,
       suceessMessage,
-      challengeDetails
+      challengeDetails,
+      showRejectModal,
+      cancelReason
     } = this.state
     if (isProjectLoading || isLoading || isProjectPhasesLoading) return <Loader />
     const challengeId = _.get(match.params, 'challengeId', null)
@@ -392,11 +473,37 @@ class ChallengeEditor extends Component {
         onClose={this.closeSuccessModal}
       />
     )
+    const rejectModalContainerClasses = `${modalStyles.contentContainer} ${styles.rejectChallengeContainer}`
+    const rejectModal = (
+      <Modal theme={theme} onCancel={this.closeRejectModal}>
+        <div className={rejectModalContainerClasses}>
+          <div className={modalStyles.title}>Reject Challenge</div>
+          <span> Please provide a reason for rejecting "{challengeDetails.name}?"</span>
+          <div className={styles.cancelReasonContainer}>
+            <textarea id='cancelReason' name='cancelReason' placeholder='Enter your reason' rows='4' className={styles.cancelReason} onChange={e => this.onChangeCancelReason(e.target.value)} />
+          </div>
+          <div className={styles.rejectButtonContainer}>
+            <PrimaryButton
+              text='Reject challenge'
+              type='danger'
+              onClick={this.rejectChallenge}
+              disabled={_.isEmpty(cancelReason)}
+            />
+            <OutlineButton
+              text='Cancel'
+              type='info'
+              onClick={this.closeRejectModal}
+            />
+          </div>
+        </div>
+      </Modal>
+    )
     return (
       <div>
         {showLaunchModal && activateModal}
         {showCloseTaskModal && closeTaskModal}
         {showSuccessModal && successModal}
+        {showRejectModal && rejectModal}
         <Route
           exact
           path={this.props.match.path}
@@ -424,6 +531,10 @@ class ChallengeEditor extends Component {
               replaceResourceInRole={replaceResourceInRole}
               partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
               projectPhases={projectPhases}
+              assignYourselfCopilot={this.assignYourselfCopilot}
+              rejectChallenge={this.rejectChallenge}
+              showRejectChallengeModal={showRejectChallengeModal}
+              loggedInUser={loggedInUser}
             />
           )}
         />
@@ -462,6 +573,7 @@ class ChallengeEditor extends Component {
                 deleteChallenge={deleteChallenge}
                 loggedInUser={loggedInUser}
                 projectPhases={projectPhases}
+                assignYourselfCopilot={this.assignYourselfCopilot}
               />
             )}
           />
@@ -487,6 +599,10 @@ class ChallengeEditor extends Component {
               enableEdit={enableEdit}
               onLaunchChallenge={this.onLaunchChallenge}
               onCloseTask={this.onCloseTask}
+              assignYourselfCopilot={this.assignYourselfCopilot}
+              showRejectChallengeModal={this.showRejectChallengeModal}
+              loggedInUser={loggedInUser}
+              onApproveChallenge={this.onApproveChallenge}
             />
           )}
         />
@@ -541,7 +657,8 @@ ChallengeEditor.propTypes = {
   replaceResourceInRole: PropTypes.func,
   loadProject: PropTypes.func,
   projectPhases: PropTypes.arrayOf(PropTypes.object),
-  isProjectPhasesLoading: PropTypes.bool
+  isProjectPhasesLoading: PropTypes.bool,
+  showRejectChallengeModal: PropTypes.func
   // members: PropTypes.arrayOf(PropTypes.shape())
 }
 
diff --git a/src/containers/Challenges/index.js b/src/containers/Challenges/index.js
index cadbafaf..929403cb 100644
--- a/src/containers/Challenges/index.js
+++ b/src/containers/Challenges/index.js
@@ -13,9 +13,7 @@ import Loader from '../../components/Loader'
 import { loadChallengesByPage, partiallyUpdateChallengeDetails, deleteChallenge } from '../../actions/challenges'
 import { loadProject } from '../../actions/projects'
 import { loadProjects, setActiveProject, resetSidebarActiveParams } from '../../actions/sidebar'
-import {
-  CHALLENGE_STATUS
-} from '../../config/constants'
+import { CHALLENGE_STATUS } from '../../config/constants'
 import styles from './Challenges.module.scss'
 
 class Challenges extends Component {
@@ -25,20 +23,19 @@ class Challenges extends Component {
       searchProjectName: '',
       onlyMyProjects: true
     }
-
     this.updateProjectName = this.updateProjectName.bind(this)
     this.toggleMyProjects = this.toggleMyProjects.bind(this)
   }
 
   componentDidMount () {
-    const { activeProjectId, resetSidebarActiveParams, menu, projectId } = this.props
+    const { activeProjectId, resetSidebarActiveParams, menu, projectId, selfService } = this.props
     if (menu === 'NULL' && activeProjectId !== -1) {
       resetSidebarActiveParams()
-    } else {
+    } else if (projectId || selfService) {
       if (projectId) {
         this.props.loadProject(projectId)
-        this.reloadChallenges(this.props)
       }
+      this.reloadChallenges(this.props)
     }
   }
 
@@ -49,11 +46,10 @@ class Challenges extends Component {
   }
 
   reloadChallenges (props) {
-    const { activeProjectId, projectDetail: reduxProjectInfo, projectId, challengeProjectId, loadProject } = props
-    if (activeProjectId !== challengeProjectId) {
-      this.props.loadChallengesByPage(1, projectId ? parseInt(projectId) : -1, CHALLENGE_STATUS.ACTIVE, '')
-      if (
-        (!reduxProjectInfo || `${reduxProjectInfo.id}` !== projectId)
+    const { activeProjectId, projectDetail: reduxProjectInfo, projectId, challengeProjectId, loadProject, selfService } = props
+    if (activeProjectId !== challengeProjectId || selfService) {
+      this.props.loadChallengesByPage(1, projectId ? parseInt(projectId) : -1, CHALLENGE_STATUS.ACTIVE, '', selfService)
+      if (!selfService && (!reduxProjectInfo || `${reduxProjectInfo.id}` !== projectId)
       ) {
         loadProject(projectId)
       }
@@ -88,7 +84,9 @@ class Challenges extends Component {
       setActiveProject,
       partiallyUpdateChallengeDetails,
       deleteChallenge,
-      isBillingAccountExpired
+      isBillingAccountExpired,
+      selfService,
+      auth
     } = this.props
     const { searchProjectName, onlyMyProjects } = this.state
     const projectInfo = _.find(projects, { id: activeProjectId }) || {}
@@ -123,7 +121,7 @@ class Challenges extends Component {
             <label>My Projects</label>
           </div>
           {
-            activeProjectId === -1 && <div>No project selected. Select one below</div>
+            activeProjectId === -1 && !selfService && <div>No project selected. Select one below</div>
           }
           {
             isLoading ? <Loader /> : (
@@ -133,7 +131,7 @@ class Challenges extends Component {
             )
           }
         </div>
-        { activeProjectId !== -1 && <ChallengesComponent
+        {(activeProjectId !== -1 || selfService) && <ChallengesComponent
           activeProject={({
             ...projectInfo,
             ...((reduxProjectInfo && reduxProjectInfo.id === activeProjectId) ? reduxProjectInfo : {})
@@ -151,6 +149,8 @@ class Challenges extends Component {
           partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
           deleteChallenge={deleteChallenge}
           isBillingAccountExpired={isBillingAccountExpired}
+          selfService={selfService}
+          auth={auth}
         />
         }
       </Fragment>
@@ -179,16 +179,19 @@ Challenges.propTypes = {
   setActiveProject: PropTypes.func.isRequired,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  isBillingAccountExpired: PropTypes.bool
+  isBillingAccountExpired: PropTypes.bool,
+  selfService: PropTypes.bool,
+  auth: PropTypes.object.isRequired
 }
 
-const mapStateToProps = ({ challenges, sidebar, projects }) => ({
+const mapStateToProps = ({ challenges, sidebar, projects, auth }) => ({
   ..._.omit(challenges, ['projectId']),
   challengeProjectId: challenges.projectId,
   activeProjectId: sidebar.activeProjectId,
   projects: sidebar.projects,
   projectDetail: projects.projectDetail,
-  isBillingAccountExpired: projects.isBillingAccountExpired
+  isBillingAccountExpired: projects.isBillingAccountExpired,
+  auth: auth
 })
 
 const mapDispatchToProps = {
diff --git a/src/containers/Sidebar/index.js b/src/containers/Sidebar/index.js
index b58b340f..edb70ba9 100644
--- a/src/containers/Sidebar/index.js
+++ b/src/containers/Sidebar/index.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Sidebar from '../../components/Sidebar'
-import { loadProjects, setActiveProject, resetSidebarActiveParams } from '../../actions/sidebar'
+import { loadProjects, setActiveProject, resetSidebarActiveParams, unloadProjects } from '../../actions/sidebar'
 
 class SidebarContainer extends Component {
   constructor (props) {
@@ -15,8 +15,8 @@ class SidebarContainer extends Component {
   }
 
   componentDidMount () {
-    const { projectId, activeProjectId, isLoading } = this.props
-    if (!projectId && activeProjectId === -1 && !isLoading) {
+    const { projectId, activeProjectId, isLoading, selfService } = this.props
+    if (!projectId && activeProjectId === -1 && !isLoading && !selfService) {
       this.props.loadProjects()
     }
 
@@ -26,10 +26,31 @@ class SidebarContainer extends Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    const { projectId, isLoading } = nextProps
-    if (this.props.projectId !== projectId && !projectId && !isLoading) {
-      this.props.loadProjects()
+    const { projectId, isLoading, selfService, projects } = nextProps
+
+    // if we're viewing a specific project,
+    // or we're viewing the self serve page,
+    // or if the project is already loading,
+    // don't load the projects
+    if (!!projectId || selfService || isLoading) {
+      // if we're not in the middle of loading,
+      // and we have projects to unload,
+      // unload them
+      if (!isLoading && !!projects && !!projects.length) {
+        this.props.unloadProjects()
+      }
+
+      return
     }
+
+    // if we already have projects in the list,
+    // don't load the projects again
+    if (!!projects && !!projects.length) {
+      return
+    }
+
+    // now it's okay to load the projects
+    this.props.loadProjects()
   }
 
   updateProjectName (val) {
@@ -38,7 +59,7 @@ class SidebarContainer extends Component {
   }
 
   render () {
-    const { isLoading, setActiveProject, projectId, resetSidebarActiveParams, projects } = this.props
+    const { isLoading, setActiveProject, projectId, resetSidebarActiveParams, projects, selfService, unloadProjects } = this.props
     const { searchProjectName } = this.state
 
     return (
@@ -50,6 +71,8 @@ class SidebarContainer extends Component {
         resetSidebarActiveParams={resetSidebarActiveParams}
         updateProjectsList={this.updateProjectName}
         searchProjectName={searchProjectName}
+        selfService={selfService}
+        unloadProjects={unloadProjects}
       />
     )
   }
@@ -59,10 +82,12 @@ SidebarContainer.propTypes = {
   projects: PropTypes.arrayOf(PropTypes.shape()),
   isLoading: PropTypes.bool,
   loadProjects: PropTypes.func,
+  unloadProjects: PropTypes.func,
   activeProjectId: PropTypes.number,
   setActiveProject: PropTypes.func,
   projectId: PropTypes.string,
-  resetSidebarActiveParams: PropTypes.func
+  resetSidebarActiveParams: PropTypes.func,
+  selfService: PropTypes.bool
 }
 
 const mapStateToProps = ({ sidebar }) => ({
@@ -71,6 +96,7 @@ const mapStateToProps = ({ sidebar }) => ({
 
 const mapDispatchToProps = {
   loadProjects,
+  unloadProjects,
   setActiveProject,
   resetSidebarActiveParams
 }
diff --git a/src/routes.js b/src/routes.js
index 70708384..1c3041da 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -9,7 +9,7 @@ import { BETA_MODE_COOKIE_TAG } from './config/constants'
 import renderApp from './components/App'
 import TopBarContainer from './containers/TopbarContainer'
 import Sidebar from './containers/Sidebar'
-import ChallengeList from './containers/Challenges'
+import Challenges from './containers/Challenges'
 import ChallengeEditor from './containers/ChallengeEditor'
 import { getFreshToken, decodeToken } from 'tc-auth-lib'
 import { saveToken } from './actions/auth'
@@ -100,7 +100,7 @@ class Routes extends React.Component {
         <Switch>
           <Route exact path='/'
             render={() => renderApp(
-              <ChallengeList menu='NULL' warnMessage={warnMessage} />,
+              <Challenges menu='NULL' warnMessage={warnMessage} />,
               <TopBarContainer />,
               <Sidebar />
             )()}
@@ -114,11 +114,18 @@ class Routes extends React.Component {
       <Switch>
         <Route exact path='/'
           render={() => renderApp(
-            <ChallengeList menu='NULL' />,
+            <Challenges menu='NULL' />,
             <TopBarContainer />,
             <Sidebar />
           )()}
         />
+        <Route exact path='/self-service'
+          render={() => renderApp(
+            <Challenges selfService />,
+            <TopBarContainer />,
+            <Sidebar selfService />
+          )()}
+        />
         <Route exact path='/projects/:projectId/challenges/new'
           render={({ match }) => renderApp(
             <ChallengeEditor />,
@@ -135,7 +142,7 @@ class Routes extends React.Component {
           )()} />
         <Route exact path='/projects/:projectId/challenges'
           render={({ match }) => renderApp(
-            <ChallengeList projectId={match.params.projectId} />,
+            <Challenges projectId={match.params.projectId} />,
             <TopBarContainer projectId={match.params.projectId} />,
             <Sidebar projectId={match.params.projectId} />
           )()} />