diff --git a/jam-ui/src/components/page/JKEditProfile.js b/jam-ui/src/components/page/JKEditProfile.js
index bd326e4b8..3f6f9e3ed 100644
--- a/jam-ui/src/components/page/JKEditProfile.js
+++ b/jam-ui/src/components/page/JKEditProfile.js
@@ -672,7 +672,35 @@ function JKEditProfile() {
                 </Card>
               </Col>
               <Col sm="12" md="6">
-                <Card className="mt-3 mt-md-0">
+              <Card className="mt-3 mt-md-0">
+                  <CardHeader>
+                    <h5>{t('genres')}</h5>
+                  </CardHeader>
+                  <CardBody data-testid="genres" 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>
+                <Card className="mt-3">
                   <CardHeader>
                     <h5>{t('instruments')}</h5>
                   </CardHeader>
@@ -715,34 +743,7 @@ function JKEditProfile() {
                     </FormGroup>
                   </CardBody>
                 </Card>
-                <Card className="mt-3">
-                  <CardHeader>
-                    <h5>{t('genres')}</h5>
-                  </CardHeader>
-                  <CardBody data-testid="genres" 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>