diff --git a/jam-ui/src/components/page/JKEditProfile.js b/jam-ui/src/components/page/JKEditProfile.js
index 9f03b6afe..904ed0f73 100644
--- a/jam-ui/src/components/page/JKEditProfile.js
+++ b/jam-ui/src/components/page/JKEditProfile.js
@@ -15,7 +15,7 @@ import {
   getRegions,
   getCities
 } from '../../helpers/rest';
-
+import JKModalDialog from '../common/JKModalDialog';
 
 function JKEditProfile() {
   const { t } = useTranslation('profile');
@@ -28,6 +28,7 @@ function JKEditProfile() {
   const [countries, setCountries] = useState([]);
   const [regions, setRegions] = useState([]);
   const [cities, setCities] = useState([]);
+  const [showPhotoModal, setShowPhotoModal] = useState(false);
 
   const [_, forceUpdate] = useReducer(x => x + 1, 0);
 
@@ -62,6 +63,7 @@ function JKEditProfile() {
     if (currentUser && !currentUserLoaded) {
       setCurrentUserLoaded(true);
       fetchCurentUser().then(data => {
+        console.log("userData", data)
         updateUserData(data);
         fetchInstruments();
         fetchGenres();
@@ -76,7 +78,7 @@ function JKEditProfile() {
         .then(response => {
           if (response.ok) {
             return response.json();
-          }else{
+          } else {
             reject('Error fetching user data');
           }
         })
@@ -90,7 +92,7 @@ function JKEditProfile() {
     setValue('lastName', data.last_name);
     setValue('country', data.country ? data.country : '');
     setValue('state', data.state ? data.state : '');
-    setValue('city', data.city? data.city : '');
+    setValue('city', data.city ? data.city : '');
     setValue('biography', data.biography);
     setValue('subscribeEmail', data.subscribe_email);
     setValue('virtualBand', data.virtual_band);
@@ -104,7 +106,7 @@ function JKEditProfile() {
     if (data.country && data.state) {
       fetchCities(data.country, data.state);
     }
-  }
+  };
 
   const fetchInstruments = () => {
     getInstruments()
@@ -124,7 +126,7 @@ function JKEditProfile() {
     setInstrumentsInitialLoadingDone(false);
     const updatedMusicInstruments = musicInstruments.map(musicInstrument => {
       const instrument = getValues('instruments').find(instrument => instrument.instrument_id === musicInstrument.id);
-     
+
       if (instrument) {
         musicInstrument.proficiency_level = instrument.proficiency_level;
         musicInstrument.priority = instrument.priority;
@@ -140,7 +142,6 @@ function JKEditProfile() {
     });
     setMusicInstruments(updatedMusicInstruments);
     setInstrumentsInitialLoadingDone(true);
-
   }, [musicInstruments, getValues('instruments')]);
 
   const fetchGenres = () => {
@@ -247,11 +248,11 @@ function JKEditProfile() {
   };
 
   const handleInstrumentProficiencyChange = (option, musicInstrument) => {
-    const userInstrument = getValues('instruments').find(instrument => instrument.instrument_id === musicInstrument.id); 
+    const userInstrument = getValues('instruments').find(instrument => instrument.instrument_id === musicInstrument.id);
     if (!userInstrument) {
-      const updatedInstruments = [...getValues('instruments'), { ...musicInstrument, proficiency_level: option.value}];
+      const updatedInstruments = [...getValues('instruments'), { ...musicInstrument, proficiency_level: option.value }];
       setValue('instruments', updatedInstruments);
-    }else{
+    } else {
       const updatedInstruments = getValues('instruments').map(instrument => {
         if (instrument.instrument_id === musicInstrument.id) {
           instrument.proficiency_level = option.value;
@@ -336,7 +337,7 @@ function JKEditProfile() {
 
   const handleChange = () => {
     const params = getValues();
-   
+
     const data = {
       first_name: params.firstName,
       last_name: params.lastName,
@@ -352,332 +353,368 @@ function JKEditProfile() {
       genres: params.genres.map(genre => genre.genre_id)
     };
 
-    const instrments = params.instruments.filter(instrument => 
-      instrument.instrument_id !== null  && 
-      instrument.proficiency_level !== null 
+    const instrments = params.instruments.filter(
+      instrument => instrument.instrument_id !== null && instrument.proficiency_level !== null
     );
 
     data.instruments = instrments;
 
-    updateUser(currentUser.id, data).then(response => {
-      if (response.ok) {
-        console.log('User data updated');
-      }else{
-        console.log('Error updating user data');
-      }
-    }).catch(error => console.log(error));
+    updateUser(currentUser.id, data)
+      .then(response => {
+        if (response.ok) {
+          console.log('User data updated');
+        } else {
+          console.log('Error updating user data');
+        }
+      })
+      .catch(error => console.log(error));
+  };
+
+  const togglePhotoModel = () => {
+    setShowPhotoModal(!showPhotoModal);
   };
 
   return (
-    <Card>
-      <FalconCardHeader title={t('page_title', { ns: 'profile' })} titleClass="font-weight-bold" />
-      <CardBody className="pt-3" style={{ backgroundColor: '#edf2f9' }}>
-        <Form>
-          <Row>
-            <Col>
-              <Card>
-                <CardHeader>
-                  <h5>{t('basics')}</h5>
-                </CardHeader>
-                <CardBody className="bg-light">
-                  <Row>
-                    <Col md={4}>
-                      <FormGroup>
-                        <Label for="firstName">{t('first_name')}</Label>
-                        <Controller
-                          name="firstName"
-                          control={control}
-                          render={({ field: { onChange, value } }) => (
-                            <Input
-                              value={value}
-                              onChange={e => {
-                                onChange(e);
-                                handleTextInputChage();
-                              }}
-                            />
-                          )}
-                        />
-                      </FormGroup>
-                    </Col>
-                    <Col md={4}>
-                      <FormGroup>
-                        <Label for="lastName">{t('last_name')}</Label>
-                        <Controller
-                          name="lastName"
-                          control={control}
-                          render={({ field: { onChange, value } }) => (
-                            <Input
-                              value={value}
-                              onChange={e => {
-                                onChange(e);
-                                handleTextInputChage();
-                              }}
-                            />
-                          )}
-                        />
-                      </FormGroup>
-                    </Col>
-                    <Col md={4}>
-                      <div className="d-flex align-items-center">
-                        <div>
-                          <JKCurrentUserAvatar size="sm" />
-                        </div>
-                        <div>
-                          <a href="#">{t('change_photo')}</a>
-                        </div>
-                      </div>
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col md={4}>
-                      <FormGroup>
-                        <Label for="country">{t('country')}</Label>
-                        {countries.length > 0 && (
+    <>
+      <Card>
+        <FalconCardHeader title={t('page_title', { ns: 'profile' })} titleClass="font-weight-bold" />
+        <CardBody className="pt-3" style={{ backgroundColor: '#edf2f9' }}>
+          <Form>
+            <Row>
+              <Col>
+                <Card>
+                  <CardHeader>
+                    <h5>{t('basics')}</h5>
+                  </CardHeader>
+                  <CardBody className="bg-light">
+                    <Row>
+                      <Col md={4}>
+                        <FormGroup>
+                          <Label for="firstName">{t('first_name')}</Label>
                           <Controller
-                            name="country"
+                            name="firstName"
                             control={control}
-                            render={({ field: { onChange, value } }) => {
-                              const country = countries.find(country => country.countrycode === value);
-                              return (
-                                <Select
-                                  value={{ value: country.countrycode, label: country.countryname }}
-                                  onChange={handleCountryChange}
-                                  options={countries.map(country => {
-                                    return { value: country.countrycode, label: country.countryname };
-                                  })}
-                                />
-                              );
-                            }}
-                          />
-                        )}
-                      </FormGroup>
-                    </Col>
-                    <Col md={4}>
-                      <FormGroup>
-                        <Label for="state">{t('state')}</Label>
-                        {regions.length > 0 && (
-                          <Controller
-                            name="state"
-                            control={control}
-                            render={({ field: { onChange, value } }) => {
-                              const region = regions.find(region => region.region === value);
-                              return (
-                                <Select
-                                  value={{ value: region.region, label: region.region }}
-                                  ref={regionRef}
-                                  onChange={handleRegionChange}
-                                  options={regions.map(region => {
-                                    return { value: region.region, label: region.region };
-                                  })}
-                                />
-                              );
-                            }}
-                          />
-                        )}
-                      </FormGroup>
-                    </Col>
-                    <Col md={4}>
-                      <FormGroup>
-                        <Label for="city">{t('city')}</Label>
-                        <Controller
-                          name="city"
-                          control={control}
-                          render={({ field: { onChange, value } }) => (
-                            <Select
-                              value={{ value: value, label: value }}
-                              ref={cityRef}
-                              onChange={handleCityChange}
-                              options={cities.map(city => {
-                                return { value: city, label: city };
-                              })}
-                            />
-                          )}
-                        />
-                      </FormGroup>
-                    </Col>
-                  </Row>
-                  <FormGroup>
-                    <Label for="biography">{t('musical_biography')}</Label>
-                    <Controller
-                      name="biography"
-                      control={control}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          style={{ height: 200 }}
-                          type="textarea"
-                          value={value}
-                          onChange={e => {
-                            onChange(e);
-                            handleTextInputChage();
-                          }}
-                        />
-                      )}
-                    />
-                  </FormGroup>
-                  <FormGroup check>
-                    <Controller
-                      name="subscribeEmail"
-                      control={control}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          checked={value}
-                          type="checkbox"
-                          onChange={e => {
-                            onChange(e);
-                            handleChange();
-                          }}
-                        />
-                      )}
-                    />
-                    <Label check for="subscribeEmail">
-                      {t('accept_emails')}
-                    </Label>
-                  </FormGroup>
-                </CardBody>
-              </Card>
-
-              <Card className="mt-3">
-                <CardHeader>
-                  <h5>{t('interests')}</h5>
-                </CardHeader>
-                <CardBody className="bg-light">
-                  <FormGroup check>
-                    <Controller
-                      name="virtualBand"
-                      control={control}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          checked={value}
-                          onChange={e => {
-                            onChange(e);
-                            handleChange();
-                          }}
-                          type="checkbox"
-                        />
-                      )}
-                    />
-                    <Label check for="check">
-                      {t('interest_joining_virtual_band')}
-                    </Label>
-                  </FormGroup>
-                  <FormGroup check>
-                    <Controller
-                      name="traditionalBand"
-                      control={control}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          checked={value}
-                          onChange={e => {
-                            onChange(e);
-                            handleChange();
-                          }}
-                          type="checkbox"
-                        />
-                      )}
-                    />
-                    <Label check for="check">
-                     {t('interest_joining_in_person_band')}
-                    </Label>
-                  </FormGroup>
-                  <FormGroup check>
-                    <Controller
-                      name="cowriting"
-                      control={control}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          checked={value}
-                          onChange={e => {
-                            onChange(e);
-                            handleChange();
-                          }}
-                          type="checkbox"
-                        />
-                      )}
-                    />
-                    <Label check for="check">
-                      {t('interest_cowriting_songs')}
-                    </Label>
-                  </FormGroup>
-                </CardBody>
-              </Card>
-            </Col>
-            <Col>
-              <Card>
-                <CardHeader>
-                  <h5>{t('instruments')}</h5>
-                </CardHeader>
-                <CardBody className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
-                  <FormGroup check>
-                    {instrumentsInitialLoadingDone &&
-                      musicInstruments.map((musicInstrument, index) => {
-                        return (
-                          <Row key={musicInstrument.id} className="mb-1">
-                            <Col md={4}>
+                            render={({ field: { onChange, value } }) => (
                               <Input
+                                value={value}
                                 onChange={e => {
-                                  handleInstrumentSelect(e, musicInstrument);
+                                  onChange(e);
+                                  handleTextInputChage();
                                 }}
-                                type="checkbox"
-                                checked={musicInstrument.checked}
                               />
-
-                              <Label check for="check">
-                                {musicInstrument.description}
-                              </Label>
-                            </Col>
-                            <Col md={3}>
+                            )}
+                          />
+                        </FormGroup>
+                      </Col>
+                      <Col md={4}>
+                        <FormGroup>
+                          <Label for="lastName">{t('last_name')}</Label>
+                          <Controller
+                            name="lastName"
+                            control={control}
+                            render={({ field: { onChange, value } }) => (
+                              <Input
+                                value={value}
+                                onChange={e => {
+                                  onChange(e);
+                                  handleTextInputChage();
+                                }}
+                              />
+                            )}
+                          />
+                        </FormGroup>
+                      </Col>
+                      <Col md={4}>
+                        <div className="d-flex align-items-center">
+                          <div>
+                            <JKCurrentUserAvatar size="sm" />
+                          </div>
+                          <div>
+                            <a
+                              href="#"
+                              onClick={e => {
+                                e.preventDefault();
+                                togglePhotoModel();
+                              }}
+                            >
+                              {t('change_photo')}
+                            </a>
+                          </div>
+                        </div>
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col md={4}>
+                        <FormGroup>
+                          <Label for="country">{t('country')}</Label>
+                          {countries.length > 0 && (
+                            <Controller
+                              name="country"
+                              control={control}
+                              render={({ field: { onChange, value } }) => {
+                                const country = countries.find(country => country.countrycode === value);
+                                return (
+                                  <Select
+                                    value={{ value: country.countrycode, label: country.countryname }}
+                                    onChange={handleCountryChange}
+                                    options={countries.map(country => {
+                                      return { value: country.countrycode, label: country.countryname };
+                                    })}
+                                  />
+                                );
+                              }}
+                            />
+                          )}
+                        </FormGroup>
+                      </Col>
+                      <Col md={4}>
+                        <FormGroup>
+                          <Label for="state">{t('state')}</Label>
+                          {regions.length > 0 && (
+                            <Controller
+                              name="state"
+                              control={control}
+                              render={({ field: { onChange, value } }) => {
+                                const region = regions.find(region => region.region === value);
+                                return (
+                                  <Select
+                                    value={{ value: region.region, label: region.region }}
+                                    ref={regionRef}
+                                    onChange={handleRegionChange}
+                                    options={regions.map(region => {
+                                      return { value: region.region, label: region.region };
+                                    })}
+                                  />
+                                );
+                              }}
+                            />
+                          )}
+                        </FormGroup>
+                      </Col>
+                      <Col md={4}>
+                        <FormGroup>
+                          <Label for="city">{t('city')}</Label>
+                          <Controller
+                            name="city"
+                            control={control}
+                            render={({ field: { onChange, value } }) => (
                               <Select
-                                value={
-                                  musicInstrument.checked
-                                    ? PROFICIENCIES.find(p => parseInt(p.value) === musicInstrument.proficiency_level)
-                                    : null
-                                }
-                                onChange={e => {
-                                  handleInstrumentProficiencyChange(e, musicInstrument);
-                                }}
-                                options={PROFICIENCIES}
-                                isDisabled={!musicInstrument.checked}
+                                value={{ value: value, label: value }}
+                                ref={cityRef}
+                                onChange={handleCityChange}
+                                options={cities.map(city => {
+                                  return { value: city, label: city };
+                                })}
                               />
-                            </Col>
-                          </Row>
-                        );
-                      })}
-                  </FormGroup>
-                </CardBody>
-              </Card>
-              <Card className="mt-3">
-                <CardHeader>
-                  <h5>{t('genres')}</h5>
-                </CardHeader>
-                <CardBody className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
-                  <FormGroup check>
-                    {genreInitialLoadingDone &&
-                      genres.map((genre, index) => {
-                        return (
-                          <Row key={genre.genre_id}>
-                            <Col md={4}>
-                              <Input
-                                onChange={e => {
-                                  handleGenreChange(e, genre);
-                                }}
-                                type="checkbox"
-                                checked={genre.checked}
-                              />
-                              <Label check for="check">
-                                {genre.description}
-                              </Label>
-                            </Col>
-                          </Row>
-                        );
-                      })}
-                  </FormGroup>
-                </CardBody>
-              </Card>
-            </Col>
-          </Row>
-        </Form>
-      </CardBody>
-    </Card>
+                            )}
+                          />
+                        </FormGroup>
+                      </Col>
+                    </Row>
+                    <FormGroup>
+                      <Label for="biography">{t('musical_biography')}</Label>
+                      <Controller
+                        name="biography"
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                          <Input
+                            style={{ height: 200 }}
+                            type="textarea"
+                            value={value}
+                            onChange={e => {
+                              onChange(e);
+                              handleTextInputChage();
+                            }}
+                          />
+                        )}
+                      />
+                    </FormGroup>
+                    <FormGroup check>
+                      <Controller
+                        name="subscribeEmail"
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                          <Input
+                            checked={value}
+                            type="checkbox"
+                            onChange={e => {
+                              onChange(e);
+                              handleChange();
+                            }}
+                          />
+                        )}
+                      />
+                      <Label check for="subscribeEmail">
+                        {t('accept_emails')}
+                      </Label>
+                    </FormGroup>
+                  </CardBody>
+                </Card>
+
+                <Card className="mt-3">
+                  <CardHeader>
+                    <h5>{t('interests')}</h5>
+                  </CardHeader>
+                  <CardBody className="bg-light">
+                    <FormGroup check>
+                      <Controller
+                        name="virtualBand"
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                          <Input
+                            checked={value}
+                            onChange={e => {
+                              onChange(e);
+                              handleChange();
+                            }}
+                            type="checkbox"
+                          />
+                        )}
+                      />
+                      <Label check for="check">
+                        {t('interest_joining_virtual_band')}
+                      </Label>
+                    </FormGroup>
+                    <FormGroup check>
+                      <Controller
+                        name="traditionalBand"
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                          <Input
+                            checked={value}
+                            onChange={e => {
+                              onChange(e);
+                              handleChange();
+                            }}
+                            type="checkbox"
+                          />
+                        )}
+                      />
+                      <Label check for="check">
+                        {t('interest_joining_in_person_band')}
+                      </Label>
+                    </FormGroup>
+                    <FormGroup check>
+                      <Controller
+                        name="cowriting"
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                          <Input
+                            checked={value}
+                            onChange={e => {
+                              onChange(e);
+                              handleChange();
+                            }}
+                            type="checkbox"
+                          />
+                        )}
+                      />
+                      <Label check for="check">
+                        {t('interest_cowriting_songs')}
+                      </Label>
+                    </FormGroup>
+                  </CardBody>
+                </Card>
+              </Col>
+              <Col>
+                <Card>
+                  <CardHeader>
+                    <h5>{t('instruments')}</h5>
+                  </CardHeader>
+                  <CardBody className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
+                    <FormGroup check>
+                      {instrumentsInitialLoadingDone &&
+                        musicInstruments.map((musicInstrument, index) => {
+                          return (
+                            <Row key={musicInstrument.id} className="mb-1">
+                              <Col md={4}>
+                                <Input
+                                  onChange={e => {
+                                    handleInstrumentSelect(e, musicInstrument);
+                                  }}
+                                  type="checkbox"
+                                  checked={musicInstrument.checked}
+                                />
+
+                                <Label check for="check">
+                                  {musicInstrument.description}
+                                </Label>
+                              </Col>
+                              <Col md={3}>
+                                <Select
+                                  value={
+                                    musicInstrument.checked
+                                      ? PROFICIENCIES.find(p => parseInt(p.value) === musicInstrument.proficiency_level)
+                                      : null
+                                  }
+                                  onChange={e => {
+                                    handleInstrumentProficiencyChange(e, musicInstrument);
+                                  }}
+                                  options={PROFICIENCIES}
+                                  isDisabled={!musicInstrument.checked}
+                                />
+                              </Col>
+                            </Row>
+                          );
+                        })}
+                    </FormGroup>
+                  </CardBody>
+                </Card>
+                <Card className="mt-3">
+                  <CardHeader>
+                    <h5>{t('genres')}</h5>
+                  </CardHeader>
+                  <CardBody className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
+                    <FormGroup check>
+                      {genreInitialLoadingDone &&
+                        genres.map((genre, index) => {
+                          return (
+                            <Row key={genre.genre_id}>
+                              <Col md={4}>
+                                <Input
+                                  onChange={e => {
+                                    handleGenreChange(e, genre);
+                                  }}
+                                  type="checkbox"
+                                  checked={genre.checked}
+                                />
+                                <Label check for="check">
+                                  {genre.description}
+                                </Label>
+                              </Col>
+                            </Row>
+                          );
+                        })}
+                    </FormGroup>
+                  </CardBody>
+                </Card>
+              </Col>
+            </Row>
+          </Form>
+        </CardBody>
+      </Card>
+      <JKModalDialog
+        show={showPhotoModal}
+        onToggle={togglePhotoModel}
+        title={t('lobby.chat_notifications.title', { ns: 'sessions' })}
+        showFooter={false}
+      >
+        <div className='d-flex flex-column'>
+          <div className='d-flex justify-content-center'>
+            <JKCurrentUserAvatar size="xl" />
+          </div>
+
+          <div className="d-flex justify-content-center">
+            <Button color="secondary" outline className="ml-2" onClick={() => {}}>
+              {t('photo_modal.upload', { ns: 'profile' })}
+            </Button>
+            <Button color="secondary" outline className="ml-2" onClick={() => {}}>
+              {t('photo_modal.delete', { ns: 'profile' })}
+            </Button>
+          </div>
+        </div>
+      </JKModalDialog>
+    </>
   );
 }
 
diff --git a/jam-ui/src/i18n/locales/en/profile.json b/jam-ui/src/i18n/locales/en/profile.json
index 3c0a61c4e..4528de013 100644
--- a/jam-ui/src/i18n/locales/en/profile.json
+++ b/jam-ui/src/i18n/locales/en/profile.json
@@ -19,5 +19,12 @@
   "accept_emails": "Accept emails from JamKazam about the JamKazam services",
   "interest_joining_virtual_band": "I'm interested in joining a virtual/online band",
   "interest_joining_in_person_band": "I'm interested in joining an in-person band",
-  "interest_cowriting_songs": "I'm interested in co-writing songs with others"
+  "interest_cowriting_songs": "I'm interested in co-writing songs with others",
+  "photo_modal": {
+    "title": "Update profile photo",
+    "upload": "Upload Photo",
+    "delete": "Delete Photo",
+    "cacel": "Cancel",
+    "save": "Save"
+  }
 }