diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 03f40e7cf..355f9ebd0 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -184,6 +184,10 @@ const MetadataEditor = createClass({
 				return <div className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
 					{`${theme.renderer} : ${theme.name}`}
 					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
+					<div className='preview'>
+						<h6>{`${theme.name}`} preview</h6>
+						<img src={`/themes/${theme.renderer}/${theme.path}/dropdownPreview.jpg`}/>
+					</div>
 				</div>;
 			});
 		};
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index be1a9aa9c..da201c3a6 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -188,18 +188,45 @@
 					padding				: 3px 3px;
 					border-top			: 1px solid rgb(118, 118, 118);
 					position			: relative;
-					overflow			: hidden;
+					overflow			: visible;
 					background-color	: white;
+					.preview {
+						display: flex;
+    					flex-direction: column;
+  						background: #ccc;
+  						border-radius: 5px;
+    					box-shadow: 0 0 5px  black;
+  						width: 200px;
+						color:black;
+  						position: absolute;
+  						top: 0;
+  						right: 0;
+  						opacity: 0;
+  						transition: opacity 250ms ease;
+						z-index: 1;
+						overflow:hidden;
+						h6 {
+							font-weight: 900;
+							padding-inline:1em;
+							padding-block:.5em;
+							border-bottom:2px solid hsl(0,0%,40%);
+						}
+					}
 					&:hover {
 						background-color	: @blue;
 						color				: white;
 					}
-					img {
+					&:hover > .preview {
+						opacity: 1;
+					}
+					>img {
 						mask-image			: linear-gradient(90deg, transparent, black 20%);
 						-webkit-mask-image	: linear-gradient(90deg, transparent, black 20%);
-				    position	: absolute;
-				    left		: ~"max(100px, 100% - 300px)";
-				    top			: 0px;
+				    	position			: absolute;
+				    	right				: 0;
+				    	top					: 0px;
+						width				: 50%;
+						height				: 100%;
 					}
 				}
 			}
diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js
index ea5d1d0e2..ea800c8d1 100644
--- a/scripts/buildHomebrew.js
+++ b/scripts/buildHomebrew.js
@@ -72,6 +72,7 @@ fs.emptyDirSync('./build');
 		themeData.path = dir;
 		themes.V3[dir] = (themeData);
 		fs.copy(`./themes/V3/${dir}/dropdownTexture.png`, `./build/themes/V3/${dir}/dropdownTexture.png`);
+		fs.copy(`./themes/V3/${dir}/dropdownPreview.jpg`, `./build/themes/V3/${dir}/dropdownPreview.jpg`);
 		const src = `./themes/V3/${dir}/style.less`;
 	  ((outputDirectory)=>{
 			less.render(fs.readFileSync(src).toString(), {
diff --git a/themes/V3/5eDMG/dropdownPreview.jpg b/themes/V3/5eDMG/dropdownPreview.jpg
new file mode 100644
index 000000000..21ebe77d0
Binary files /dev/null and b/themes/V3/5eDMG/dropdownPreview.jpg differ
diff --git a/themes/V3/5ePHB/dropdownPreview.jpg b/themes/V3/5ePHB/dropdownPreview.jpg
new file mode 100644
index 000000000..471eb71bf
Binary files /dev/null and b/themes/V3/5ePHB/dropdownPreview.jpg differ
diff --git a/themes/V3/Blank/dropdownPreview.jpg b/themes/V3/Blank/dropdownPreview.jpg
new file mode 100644
index 000000000..73445af47
Binary files /dev/null and b/themes/V3/Blank/dropdownPreview.jpg differ
diff --git a/themes/V3/Journal/dropdownPreview.jpg b/themes/V3/Journal/dropdownPreview.jpg
new file mode 100644
index 000000000..e72cbf2d6
Binary files /dev/null and b/themes/V3/Journal/dropdownPreview.jpg differ