diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
index 79a4f7d0f..395d22b6f 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -96,11 +96,15 @@ const BrewItem = createClass({
 	render : function(){
 		const brew = this.props.brew;
 		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
-			brew.tags = brew.tags?.filter(tag => tag); //remove tags that are empty strings
+			brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
 		}
 		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
 		return <div className='brewItem'>
+			{brew.thumbnail &&
+				<div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }} >
+				</div>
+			}
 			<div className='text'>
 				<h2>{brew.title}</h2>
 				<p className='description'>{brew.description}</p>
@@ -112,7 +116,7 @@ const BrewItem = createClass({
 					<div className='brewTags' title={`Tags:\n${brew.tags.join('\n')}`}>
 						<i className='fas fa-tags'/>
 						{brew.tags.map((tag, idx)=>{
-							let matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
 							return <span className={matches[1]}>{matches[2]}</span>;
 						})}
 					</div>
diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
index 5ee7758b5..42e0fd07e 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
@@ -10,7 +10,7 @@
 	min-height                  : 105px;
 	margin-right                : 15px;
 	margin-bottom               : 15px;
-	padding                     : 5px 15px 2px 8px;
+	padding                     : 5px 15px 2px 6px;
 	padding-right               : 15px;
 	border                      : 1px solid #c9ad6a;
 	border-radius               : 5px;
@@ -19,6 +19,20 @@
 	break-inside                : avoid;
 	box-shadow                  : 0px 4px 5px 0px #333;
 	background-color            : #cab2802e;
+	.thumbnail  {
+		position: absolute;
+		width: 150px;
+		height: 100%;
+		top: 0;
+		right: 0;
+		z-index: -1;
+		background-size: contain;
+		background-repeat: no-repeat;
+		background-position: right top;
+		mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
+		-webkit-mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
+		opacity: 50%;
+	}
 	.text {
 		min-height : 54px;
 		h4{
diff --git a/server/app.js b/server/app.js
index 98e2c778c..a3f66bb2c 100644
--- a/server/app.js
+++ b/server/app.js
@@ -180,6 +180,7 @@ app.get('/user/:username', async (req, res, next)=>{
 		'createdAt',
 		'updatedAt',
 		'lastViewed',
+		'thumbnail',
 		'tags'
 	];