diff --git a/jam-ui/src/components/profile/JKProfileGenres.js b/jam-ui/src/components/profile/JKProfileGenres.js
index c5c80ea97..2903382dd 100644
--- a/jam-ui/src/components/profile/JKProfileGenres.js
+++ b/jam-ui/src/components/profile/JKProfileGenres.js
@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useResponsive } from '@farfetch/react-context-responsive';
-import { useTranslation } from 'react-i18next';
 
 const JKProfileGenres = ({ genres, showAll, toggleMoreDetails }) => {
   const LIMIT = 4;
   const [genresToShow, setGenresToShow] = useState([]);
   const { greaterThan } = useResponsive();
-  const {t} = useTranslation();
+ 
 
   useEffect(() => {
     showAll || !greaterThan.xs ? setGenresToShow(genres) : setGenresToShow(genres.slice(0, LIMIT));
@@ -15,8 +14,12 @@ const JKProfileGenres = ({ genres, showAll, toggleMoreDetails }) => {
 
   return (
     <div data-testid="genreList">
-      { genresToShow && <div className="text-capitalize">{genresToShow.map(g => g.description ? g.description : g.genre_id).join(', ')}</div>}
-      {((!showAll && greaterThan.xs) || (showAll && !greaterThan.xs)) && genres.length > LIMIT && (
+      { genresToShow && <div className="text-capitalize">
+        { genresToShow.map(g => g.description ? g.description : g.genre_id).join(', ') }
+        </div>
+      }
+      {
+      ((!showAll && greaterThan.xs) || (showAll && !greaterThan.xs) && genres.length > LIMIT) && (
         <a href="#/" onClick={e => toggleMoreDetails(e)}>
           More »
         </a>