diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx
index 2e2463233..e27303eb6 100644
--- a/client/components/dropdown/dropdown.jsx
+++ b/client/components/dropdown/dropdown.jsx
@@ -48,10 +48,10 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, i
 	};
 
 	return (
-		<div className='menu-wrapper' style={{ anchorName }} role='none'>
+		<div className={['menu-wrapper', className].join(' ')} style={{ anchorName }} role='none' >
 			<button
 				id={groupName.replace(' ', '-')}
-				className={['menu-item', color, className].join(' ')}
+				className={['menu-item', color].join(' ')}
 				popoverTarget={menuId}
 				icon={icon}
 				aria-haspopup='menu'
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index 8746c9660..9c4a94027 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -336,7 +336,7 @@ const SnippetGroup = createReactClass({
 		return _.map(snippets, (snippet)=>{
 			if(!snippet.subsnippets){
 				return (
-					<div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
+					<div className='menu-item' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 						<i className={snippet.icon} />
 						<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
 						{snippet.experimental && <span className='beta'>beta</span>}
@@ -345,7 +345,7 @@ const SnippetGroup = createReactClass({
 				);
 			} else if(snippet.subsnippets){
 				return (
-					<Dropdown groupName={snippet.name} className='dropdown side'>
+					<Dropdown groupName={snippet.name}>
 						{this.renderSnippets(snippet.subsnippets)}
 					</Dropdown>
 				)
@@ -355,8 +355,7 @@ const SnippetGroup = createReactClass({
 	},
 
 	render : function(){
-		const snippetGroup = `snippetGroup snippetBarButton ${this.props.snippets.length === 0 ? 'disabledSnippets' : ''}`;
-		return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon} className={snippetGroup}>
+		return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon}>
 			{this.renderSnippets(this.props.snippets)}
 		</Dropdown>;
 	},
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 37853ca75..80662becc 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -11,6 +11,10 @@
 	height           : auto;
 	color            : black;
 	background-color : #DDDDDD;
+	font-size        : .65rem;
+	font-family: 'Open Sans', sans-serif;
+	text-transform: uppercase;
+	font-weight: 800;
 
 	.snippets {
 		display         : flex;
@@ -22,7 +26,7 @@
 		display         : flex;
 		justify-content : flex-end;
 		min-width       : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-
+		font-size: .85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
 
 		>div {
@@ -57,32 +61,27 @@
 				}
 				&.undo {
 					.tooltipLeft('Undo');
-					font-size : 0.75em;
 					color     : grey;
 					&.active { color : inherit; }
 				}
 				&.redo {
 					.tooltipLeft('Redo');
-					font-size : 0.75em;
 					color     : grey;
 					&.active { color : inherit; }
 				}
 				&.foldAll {
 					.tooltipLeft('Fold All');
-					font-size : 0.75em;
 					color     : grey;
 					&.active { color : inherit; }
 				}
 				&.unfoldAll {
 					.tooltipLeft('Unfold All');
-					font-size : 0.75em;
 					color     : grey;
 					&.active { color : inherit; }
 				}
 				&.history {
 					.tooltipLeft('History');
 					position  : relative;
-					font-size : 0.75em;
 					color     : grey;
 					border    : none;
 					&.active { color : inherit; }
@@ -93,7 +92,6 @@
 				}
 				&.editorTheme {
 					.tooltipLeft('Editor Themes');
-					font-size : 0.75em;
 					color     : inherit;
 					&.active {
 						position         : relative;
@@ -144,90 +142,83 @@
 		border-left : 1px solid black;
 		.tooltipLeft('Edit Brew Properties');
 	}
-	.snippetGroup {
 
-		&:hover {
-			& > .dropdown { visibility : visible; }
-		}
-		.dropdown {
-			position         : absolute;
-			top              : 100%;
-			z-index          : 1000;
-			visibility       : hidden;
+	
+	.menu-wrapper {
+		.menu-list {
 			padding          : 0px;
-			margin-left      : -5px;
 			background-color : #DDDDDD;
-			.snippet {
-				position    : relative;
-				display     : flex;
-				align-items : center;
-				min-width   : max-content;
-				padding     : 5px;
-				font-size   : 10px;
-				cursor      : pointer;
-				.animate(background-color);
-				i {
-					min-width    : 25px;
-					height       : 1.2em;
-					margin-right : 8px;
-					font-size    : 1.2em;
-					text-align   : center;
-					& ~ i {
-						margin-right : 0;
-						margin-left  : 5px;
-					}
-					/* Fonts */
-					&.font {
-						height : auto;
-						&::before {
-							font-size : 1em;
-							content   : 'ABC';
-						}
+			
+		}
+	}
 
-						&.OpenSans {font-family : 'OpenSans';}
-						&.CodeBold {font-family : 'CodeBold';}
-						&.CodeLight {font-family : 'CodeLight';}
-						&.ScalySansRemake {font-family : 'ScalySansRemake';}
-						&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
-						&.MrEavesRemake {font-family : 'MrEavesRemake';}
-						&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
-						&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
-						&.WalterTurncoat {font-family : 'WalterTurncoat';}
-						&.Lato {font-family : 'Lato';}
-						&.Courier {font-family : 'Courier';}
-						&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
-						&.Overpass {font-family : 'Overpass';}
-						&.Davek {font-family : 'Davek';}
-						&.Iokharic {font-family : 'Iokharic';}
-						&.Rellanic {font-family : 'Rellanic';}
-						&.TimesNewRoman {font-family : 'Times New Roman';}
-					}
-				}
-				.name { margin-right : auto; }
-				.disabled { text-decoration : line-through; }
-				.beta {
-					align-self    : center;
-					padding       : 4px 6px;
-					margin-left   : 5px;
-					font-family   : monospace;
-					line-height   : 1em;
-					color         : white;
-					background    : grey;
-					border-radius : 12px;
-				}
-				&:hover {
-					background-color : #999999;
-					& > .dropdown {
-						visibility : visible;
-						&.side {
-							top         : 0%;
-							left        : 100%;
-							margin-left : 0;
-							box-shadow  : -1px 1px 2px 0px #999999;
-						}
-					}
-				}
+	.menu-item {
+		position    : relative;
+		display     : flex;
+		justify-content: space-between;
+		align-items : center;
+		min-width   : max-content;
+		padding     : 5px;
+		cursor      : pointer;
+		width: 100%;
+		.animate(background-color);
+		i {
+			min-width    : 25px;
+			height       : 1.2em;
+			margin-right : 8px;
+			font-size    : 1.2em;
+			text-align   : center;
+			&.caret {
+				margin-right: 0;
 			}
+			&.caret:is(.menu-wrapper .menu-wrapper * ) {
+				text-align: right;
+			}
+			& ~ i {
+				margin-right : 0;
+				margin-left  : 5px;
+			}
+			/* Fonts */
+			&.font {
+				height : auto;
+				&::before {
+					font-size : 1em;
+					content   : 'ABC';
+				}
+
+				&.OpenSans {font-family : 'OpenSans';}
+				&.CodeBold {font-family : 'CodeBold';}
+				&.CodeLight {font-family : 'CodeLight';}
+				&.ScalySansRemake {font-family : 'ScalySansRemake';}
+				&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
+				&.MrEavesRemake {font-family : 'MrEavesRemake';}
+				&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
+				&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
+				&.WalterTurncoat {font-family : 'WalterTurncoat';}
+				&.Lato {font-family : 'Lato';}
+				&.Courier {font-family : 'Courier';}
+				&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
+				&.Overpass {font-family : 'Overpass';}
+				&.Davek {font-family : 'Davek';}
+				&.Iokharic {font-family : 'Iokharic';}
+				&.Rellanic {font-family : 'Rellanic';}
+				&.TimesNewRoman {font-family : 'Times New Roman';}
+			}
+		}
+		.name { margin-right : auto; }
+		.disabled { text-decoration : line-through; }
+		.beta {
+			align-self    : center;
+			padding       : 4px 6px;
+			margin-left   : 5px;
+			font-family   : monospace;
+			line-height   : 1em;
+			color         : white;
+			background    : grey;
+			border-radius : 12px;
+		}
+		&:hover {
+			background-color : #999999;
 		}
 	}
 	.disabledSnippets {