diff --git a/client/homebrew/brewRenderer/errorBar/errorBar.jsx b/client/homebrew/brewRenderer/errorBar/errorBar.jsx
index e951e4aaa..c79e068b0 100644
--- a/client/homebrew/brewRenderer/errorBar/errorBar.jsx
+++ b/client/homebrew/brewRenderer/errorBar/errorBar.jsx
@@ -7,49 +7,49 @@ import Dialog from '../../../components/dialog.jsx';
 
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
-const ErrorBar = (props) => {
-    let hasOpenError = false, hasCloseError = false, hasMatchError = false;
+const ErrorBar = (props)=>{
+	let hasOpenError = false, hasCloseError = false, hasMatchError = false;
 
-    const renderErrors = () => (
-        <ul>
-            {_.map(props.errors, (err, idx) => {
-                if (err.id === 'OPEN') hasOpenError = true;
-                if (err.id === 'CLOSE') hasCloseError = true;
-                if (err.id === 'MISMATCH') hasMatchError = true;
-                return (
-                    <li key={idx}>
+	const renderErrors = ()=>(
+		<ul>
+			{_.map(props.errors, (err, idx)=>{
+				if(err.id === 'OPEN') hasOpenError = true;
+				if(err.id === 'CLOSE') hasCloseError = true;
+				if(err.id === 'MISMATCH') hasMatchError = true;
+				return (
+					<li key={idx}>
                         Line {err.line} : {err.text}, '{err.type}' tag
-                    </li>
-                );
-            })}
-        </ul>
-    );
+					</li>
+				);
+			})}
+		</ul>
+	);
 
-    const renderProtip = () => (
-        <div className="protips">
-            <h4>Protips!</h4>
-            {hasOpenError && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
-            {hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
-            {hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
-        </div>
-    );
+	const renderProtip = ()=>(
+		<div className='protips'>
+			<h4>Protips!</h4>
+			{hasOpenError && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
+			{hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
+			{hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
+		</div>
+	);
 
-    if (!props.errors.length) return null;
+	if(!props.errors.length) return null;
 
 
-    return (
-        <Dialog className="errorBar" closeText={DISMISS_BUTTON} >
-			<div className="content">
-				<i className="fas fa-exclamation-triangle" />
-				<h3> There are HTML errors in your markup</h3>
+	return (
+		<Dialog className='errorBar' closeText={DISMISS_BUTTON} >
+			<div>
+				<i className='fas fa-exclamation-triangle' />
+				<h2> There are HTML errors in your markup</h2>
             	<small>
                 	If these aren't fixed your brew will not render properly when you print it to PDF or share it
             	</small>
             	{renderErrors()}
 			</div>
-            <hr />
-            {renderProtip()}
-        </Dialog>
+			<hr />
+			{renderProtip()}
+		</Dialog>
 	);
 };
 
diff --git a/client/homebrew/brewRenderer/errorBar/errorBar.less b/client/homebrew/brewRenderer/errorBar/errorBar.less
index 7fa37c91e..14abc4b6e 100644
--- a/client/homebrew/brewRenderer/errorBar/errorBar.less
+++ b/client/homebrew/brewRenderer/errorBar/errorBar.less
@@ -3,13 +3,11 @@
 	position         : absolute;
 	z-index          : 1000;
 	width            : 100%;
-	padding          : 20px;
-	padding-bottom   : 10px;
 	color            : white;
 	background-color : @red;
 	border           : unset;
 
-	.content {
+	div {
 		> i {
 			float         : left;
 			margin-right  : 10px;
@@ -17,26 +15,19 @@
 			font-size     : 3em;
 			opacity       : 0.8;
 		}
-		h3 {
-			font-size   : 1.1em;
-			font-weight : 800;
-		}	
-	}
-	
-	ul {
-		margin-top          : 15px;
-		font-size           : 0.8em;
-		list-style-position : inside;
-		list-style-type     : disc;
-		li { line-height : 1.6em; }
+		h2 { font-weight : 800; }
+		ul {
+			margin-top          : 15px;
+			font-size           : 0.8em;
+			list-style-position : inside;
+			list-style-type     : disc;
+			li { line-height : 1.6em; }
+		}
 	}
 	hr {
-		box-sizing       : border-box;
-		width            : 100%;
 		height           : 2px;
 		margin-top       : 25px;
 		margin-bottom    : 15px;
-		margin-left      : -100px;
 		background-color : darken(@red, 8%);
 		border           : none;
 	}
@@ -45,26 +36,20 @@
 		opacity   : 0.7;
 	}
 	.protips {
-		font-size   : 0.6em;
-		& > div {
-			margin-bottom : 10px;
-			line-height   : 1.2em;
-		}
+		font-size     : 0.6em;
+		line-height   : 1.2em;
 		h4 {
 			font-weight    : 800;
 			line-height    : 1.5em;
 			text-transform : uppercase;
-			opacity        : 0.8;
 		}
 	}
 	button.dismiss {
 		position         : absolute;
-		top              : 30px;
+		top              : 20px;
 		right            : 30px;
-		height           : max-content;
 		padding          : unset;
 		font-size        : 40px;
-		cursor           : pointer;
 		background-color : transparent;
 		opacity          : 0.6;
 		&:hover { opacity : 1; }