diff --git a/components/__snapshots__/picture_selector.test.tsx.snap b/components/__snapshots__/picture_selector.test.tsx.snap
new file mode 100644
index 000000000000..f4221101ef6f
--- /dev/null
+++ b/components/__snapshots__/picture_selector.test.tsx.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/picture_selector should match snapshot, default picture provided 1`] = `
+<div
+  className="PictureSelector"
+>
+  <input
+    accept=".jpg,.png,.bmp"
+    aria-hidden={true}
+    className="PictureSelector__input"
+    data-testid="PictureSelector__input"
+    onChange={[Function]}
+    tabIndex={-1}
+    type="file"
+  />
+  <div
+    className="PictureSelector__imageContainer"
+  >
+    <div
+      aria-label="Picture selector image"
+      className="PictureSelector__image"
+      style={
+        Object {
+          "backgroundImage": "url(undefined)",
+        }
+      }
+    />
+    <button
+      aria-label="Select picture"
+      className="PictureSelector__selectButton"
+      data-testid="PictureSelector__selectButton"
+      onClick={[Function]}
+    >
+      <i
+        className="icon icon-pencil-outline"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`components/picture_selector should match snapshot, existing picture provided 1`] = `
+<div
+  className="PictureSelector"
+>
+  <input
+    accept=".jpg,.png,.bmp"
+    aria-hidden={true}
+    className="PictureSelector__input"
+    data-testid="PictureSelector__input"
+    onChange={[Function]}
+    tabIndex={-1}
+    type="file"
+  />
+  <div
+    className="PictureSelector__imageContainer"
+  >
+    <div
+      aria-label="Picture selector image"
+      className="PictureSelector__image"
+      style={
+        Object {
+          "backgroundImage": "url(undefined)",
+        }
+      }
+    />
+    <button
+      aria-label="Select picture"
+      className="PictureSelector__selectButton"
+      data-testid="PictureSelector__selectButton"
+      onClick={[Function]}
+    >
+      <i
+        className="icon icon-pencil-outline"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`components/picture_selector should match snapshot, no picture selected 1`] = `
+<div
+  className="PictureSelector"
+>
+  <input
+    accept=".jpg,.png,.bmp"
+    aria-hidden={true}
+    className="PictureSelector__input"
+    data-testid="PictureSelector__input"
+    onChange={[Function]}
+    tabIndex={-1}
+    type="file"
+  />
+  <div
+    className="PictureSelector__imageContainer"
+  >
+    <div
+      aria-label="Picture selector image"
+      className="PictureSelector__image"
+      style={
+        Object {
+          "backgroundImage": "url(undefined)",
+        }
+      }
+    />
+    <button
+      aria-label="Select picture"
+      className="PictureSelector__selectButton"
+      data-testid="PictureSelector__selectButton"
+      onClick={[Function]}
+    >
+      <i
+        className="icon icon-pencil-outline"
+      />
+    </button>
+  </div>
+</div>
+`;
diff --git a/components/next_steps_view/index.ts b/components/next_steps_view/index.ts
index 3ff12276ead2..12d6b5505c88 100644
--- a/components/next_steps_view/index.ts
+++ b/components/next_steps_view/index.ts
@@ -20,10 +20,9 @@ function makeMapStateToProps() {
 
     return (state: GlobalState) => {
         const license = getLicense(state);
-        const currentUser = getCurrentUser(state);
 
         return {
-            currentUserId: currentUser.id,
+            currentUser: getCurrentUser(state),
             preferences: getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS),
             skuName: license.SkuShortName,
         };
diff --git a/components/next_steps_view/next_steps_view.test.tsx b/components/next_steps_view/next_steps_view.test.tsx
index 2c51f5528219..276871b9fcc3 100644
--- a/components/next_steps_view/next_steps_view.test.tsx
+++ b/components/next_steps_view/next_steps_view.test.tsx
@@ -5,10 +5,11 @@ import React from 'react';
 import {shallow} from 'enzyme';
 
 import NextStepsView from 'components/next_steps_view/next_steps_view';
+import {TestHelper} from 'utils/test_helper';
 
 describe('components/next_steps_view', () => {
     const baseProps = {
-        currentUserId: 'user_id',
+        currentUser: TestHelper.getUserMock(),
         preferences: [],
         skuName: '',
         actions: {
diff --git a/components/next_steps_view/next_steps_view.tsx b/components/next_steps_view/next_steps_view.tsx
index 965d46f83c7b..db796514bfc9 100644
--- a/components/next_steps_view/next_steps_view.tsx
+++ b/components/next_steps_view/next_steps_view.tsx
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 
 import {PreferenceType} from 'mattermost-redux/types/preferences';
+import {UserProfile} from 'mattermost-redux/types/users';
 
 import Accordion from 'components/accordion';
 import Card from 'components/card/card';
@@ -16,7 +17,7 @@ import {Steps, StepType} from './steps';
 import './next_steps_view.scss';
 
 type Props = {
-    currentUserId: string;
+    currentUser: UserProfile;
     preferences: PreferenceType[];
     skuName: string;
     actions: {
@@ -86,9 +87,9 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
 
     onFinish = (setExpanded: (expandedKey: string) => void) => {
         return (id: string) => {
-            this.props.actions.savePreferences(this.props.currentUserId, [{
+            this.props.actions.savePreferences(this.props.currentUser.id, [{
                 category: Preferences.RECOMMENDED_NEXT_STEPS,
-                user_id: this.props.currentUserId,
+                user_id: this.props.currentUser.id,
                 name: id,
                 value: 'true',
             }]);
@@ -117,12 +118,14 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
     }
 
     renderStep = (step: StepType, index: number) => {
+        const {id, title} = step;
+
         let icon = (
             <div className='NextStepsView__cardHeaderBadge'>
                 <span>{index + 1}</span>
             </div>
         );
-        if (this.isStepComplete(step.id)) {
+        if (this.isStepComplete(id)) {
             icon = (
                 <i className='icon icon-check-circle'/>
             );
@@ -130,22 +133,23 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
 
         return (setExpanded: (expandedKey: string) => void, expandedKey: string) => (
             <Card
-                className={classNames({complete: this.isStepComplete(step.id)})}
-                expanded={expandedKey === step.id}
+                className={classNames({complete: this.isStepComplete(id)})}
+                expanded={expandedKey === id}
             >
                 <Card.Header>
                     <button
-                        onClick={() => setExpanded(step.id)}
-                        disabled={this.isStepComplete(step.id)}
+                        onClick={() => setExpanded(id)}
+                        disabled={this.isStepComplete(id)}
                         className='NextStepsView__cardHeader'
                     >
                         {icon}
-                        <span>{step.title}</span>
+                        <span>{title}</span>
                     </button>
                 </Card.Header>
                 <Card.Body>
                     <step.component
-                        id={step.id}
+                        id={id}
+                        currentUser={this.props.currentUser}
                         onFinish={this.onFinish(setExpanded)}
                         onSkip={this.onSkip(setExpanded)}
                     />
diff --git a/components/next_steps_view/steps.ts b/components/next_steps_view/steps.ts
index 2ed010f7003a..a5583cef70ce 100644
--- a/components/next_steps_view/steps.ts
+++ b/components/next_steps_view/steps.ts
@@ -3,6 +3,7 @@
 import {createSelector} from 'reselect';
 
 import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
+import {UserProfile} from 'mattermost-redux/types/users';
 
 import {GlobalState} from 'types/store';
 import {RecommendedNextSteps, Preferences} from 'utils/constants';
@@ -12,6 +13,7 @@ import CompleteProfileStep from './steps/complete_profile_step';
 
 export type StepComponentProps = {
     id: string;
+    currentUser: UserProfile;
     onSkip: (id: string) => void;
     onFinish: (id: string) => void;
 }
diff --git a/components/next_steps_view/steps/complete_profile_step.tsx b/components/next_steps_view/steps/complete_profile_step.tsx
index 659fcaca415b..6c0f5deaeb7f 100644
--- a/components/next_steps_view/steps/complete_profile_step.tsx
+++ b/components/next_steps_view/steps/complete_profile_step.tsx
@@ -4,15 +4,25 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import PictureSelector from 'components/picture_selector';
+import * as Utils from 'utils/utils';
+
 import {StepComponentProps} from '../steps';
 
 type Props = StepComponentProps & {
 };
 
 type State = {
+    profilePicture?: File;
 };
 
 export default class CompleteProfileStep extends React.PureComponent<Props, State> {
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {};
+    }
+
     onSkip = () => {
         this.props.onSkip(this.props.id);
     }
@@ -21,10 +31,38 @@ export default class CompleteProfileStep extends React.PureComponent<Props, Stat
         this.props.onFinish(this.props.id);
     }
 
+    onSelectPicture = (profilePicture: File) => {
+        this.setState({profilePicture});
+    }
+
+    onRemovePicture = () => {
+        this.setState({profilePicture: undefined});
+    }
+
     render() {
+        const {currentUser} = this.props;
+
+        // Make sure picture has been set
+        const pictureSrc = currentUser.last_picture_update ? Utils.imageURLForUser(currentUser.id, currentUser.last_picture_update) : undefined;
+        const defaultSrc = Utils.defaultImageURLForUser(currentUser.id);
+
         return (
             <div>
-                {'AAAAAAAA'}
+                <div
+                    style={{
+
+                        // TODO temp for textbox demo
+                        margin: '24px',
+                        minHeight: '200px',
+                    }}
+                >
+                    <PictureSelector
+                        onSelect={this.onSelectPicture}
+                        onRemove={this.onRemovePicture}
+                        src={pictureSrc}
+                        defaultSrc={defaultSrc}
+                    />
+                </div>
                 <div className='NextStepsView__wizardButtons'>
                     {/* <button
                         className='NextStepsView__button cancel'
diff --git a/components/picture_selector.scss b/components/picture_selector.scss
new file mode 100644
index 000000000000..ba2f86d7ae0c
--- /dev/null
+++ b/components/picture_selector.scss
@@ -0,0 +1,80 @@
+.PictureSelector {
+    display: flex;
+    flex-direction: column;
+    width: 96px;
+}
+
+.PictureSelector__imageContainer {
+    height: 96px;
+    position: relative;
+}
+
+.PictureSelector__image {
+    height: 100%;
+    border-radius: 100%;
+    background-position: 50% 50%;
+    background-size: cover;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+}
+
+.PictureSelector__selectButton {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-radius: 100%;
+    background: var(--center-channel-bg);
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.12);
+    padding: 4px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    justify-content: center;
+
+    i {
+        font-size: 16px;
+        line-height: 18px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        align-self: center;
+
+        &::before {
+            margin: 0;
+        }
+    }
+
+    &:hover {
+        border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+        box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.12);
+
+        i {
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+        }
+    }
+
+    &:active {
+        background: linear-gradient(0deg, rgba(22, 109, 224, 0.08), rgba(22, 109, 224, 0.08)), #FFFFFF;
+        border: 1px solid rgba(22, 109, 224, 0.16);
+
+        i {
+            color: var(--button-bg);
+        }
+    }
+
+    &:focus {
+        border: 2px solid #166DE0;
+    }
+}
+
+.PictureSelector__removeButton {
+    padding: 0;
+    border: none;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--button-bg);
+    margin-top: 12px;
+    background-color: transparent;
+
+    &:focus {
+        text-decoration-line: underline;
+    }
+}
diff --git a/components/picture_selector.test.tsx b/components/picture_selector.test.tsx
new file mode 100644
index 000000000000..1bd9b9e9a9b9
--- /dev/null
+++ b/components/picture_selector.test.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import PictureSelector from 'components/picture_selector';
+
+describe('components/picture_selector', () => {
+    const baseProps = {
+        onSelect: jest.fn(),
+        onRemove: jest.fn(),
+    };
+
+    test('should match snapshot, no picture selected', () => {
+        const wrapper = shallow(
+            <PictureSelector {...baseProps}/>,
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, existing picture provided', () => {
+        const props = {
+            ...baseProps,
+            src: 'http:///url.com/picture.jpg',
+            defaultSrc: 'http:///url.com/default-picture.jpg',
+        };
+
+        const wrapper = shallow(
+            <PictureSelector {...props}/>,
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, default picture provided', () => {
+        const props = {
+            ...baseProps,
+            defaultSrc: 'http:///url.com/default-picture.jpg',
+        };
+
+        const wrapper = shallow(
+            <PictureSelector {...props}/>,
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});
diff --git a/components/picture_selector.tsx b/components/picture_selector.tsx
new file mode 100644
index 000000000000..039ab3a947c5
--- /dev/null
+++ b/components/picture_selector.tsx
@@ -0,0 +1,131 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useState, useEffect} from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import {localizeMessage} from 'utils/utils';
+import * as FileUtils from 'utils/file_utils';
+
+import './picture_selector.scss';
+
+type Props = {
+    src?: string;
+    defaultSrc?: string;
+    loadingPicture?: boolean;
+    onSelect: (file: File) => void;
+    onRemove: () => void;
+};
+
+const PictureSelector: React.FC<Props> = (props: Props) => {
+    const {src, defaultSrc, loadingPicture, onSelect, onRemove} = props;
+
+    const [image, setImage] = useState<string>();
+    const [orientationStyles, setOrientationStyles] = useState<{transform: any; transformOrigin: any}>();
+
+    const inputRef: React.RefObject<HTMLInputElement> = React.createRef();
+    const selectButton: React.RefObject<HTMLButtonElement> = React.createRef();
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files[0]) {
+            const file = e.target.files[0];
+
+            const reader = new FileReader();
+            reader.onload = (ev) => {
+                setImage(URL.createObjectURL(file));
+
+                const orientation = FileUtils.getExifOrientation(ev.target!.result);
+                setOrientationStyles(FileUtils.getOrientationStyles(orientation));
+            };
+            reader.readAsArrayBuffer(file);
+
+            onSelect(file);
+        }
+    };
+
+    const handleInputFile = () => {
+        if (!inputRef || !inputRef.current) {
+            return;
+        }
+
+        selectButton.current?.blur();
+
+        inputRef.current.value = '';
+        inputRef.current.click();
+    };
+
+    const handleRemove = () => {
+        onRemove();
+        if (defaultSrc) {
+            setImage(defaultSrc);
+        } else {
+            setImage(undefined);
+        }
+    };
+
+    useEffect(() => {
+        if (!image) {
+            if (src) {
+                setImage(src);
+            } else if (defaultSrc) {
+                setImage(defaultSrc);
+            }
+        }
+    }, [src, image]);
+
+    let removeButton;
+    if (image && image !== defaultSrc) {
+        removeButton = (
+            <button
+                data-testid='PictureSelector__removeButton'
+                className='PictureSelector__removeButton'
+                disabled={loadingPicture}
+                onClick={handleRemove}
+            >
+                <FormattedMessage
+                    id='picture_selector.remove_picture'
+                    defaultMessage='Remove picture'
+                />
+            </button>
+        );
+    }
+
+    return (
+        <div className='PictureSelector'>
+            <input
+                data-testid='PictureSelector__input'
+                ref={inputRef}
+                className='PictureSelector__input'
+                accept='.jpg,.png,.bmp'
+                type='file'
+                onChange={handleFileChange}
+                disabled={loadingPicture}
+                aria-hidden={true}
+                tabIndex={-1}
+            />
+            <div className='PictureSelector__imageContainer'>
+                <div
+                    aria-label={localizeMessage('picture_selector.image.ariaLabel', 'Picture selector image')}
+                    className='PictureSelector__image'
+                    style={{
+                        backgroundImage: 'url(' + image + ')',
+                        ...orientationStyles,
+                    }}
+                />
+                <button
+                    ref={selectButton}
+                    data-testid='PictureSelector__selectButton'
+                    className='PictureSelector__selectButton'
+                    disabled={loadingPicture}
+                    onClick={handleInputFile}
+                    aria-label={localizeMessage('picture_selector.select_button.ariaLabel', 'Select picture')}
+                >
+                    <i className='icon icon-pencil-outline'/>
+                </button>
+            </div>
+            {removeButton}
+        </div>
+    );
+};
+
+export default PictureSelector;
diff --git a/i18n/en.json b/i18n/en.json
index 3b4747824aaa..ec48414a0a91 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -3138,6 +3138,9 @@
   "pending_post_actions.retry": "Retry",
   "permalink.error.access": "Permalink belongs to a deleted message or to a channel to which you do not have access.",
   "permalink.error.title": "Message Not Found",
+  "picture_selector.image.ariaLabel": "Picture selector image",
+  "picture_selector.remove_picture": "Remove picture",
+  "picture_selector.select_button.ariaLabel": "Select picture",
   "post_body.check_for_out_of_channel_groups_mentions.message": "did not get notified by this mention because they are not in the channel. They cannot be added to the channel because they are not a member of the linked groups. To add them to this channel, they must be added to the linked groups.",
   "post_body.check_for_out_of_channel_mentions.link.and": " and ",
   "post_body.check_for_out_of_channel_mentions.link.private": "add them to this private channel",