diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx
index e06015eae..e5562112f 100644
--- a/client/components/dropdown/dropdown.jsx
+++ b/client/components/dropdown/dropdown.jsx
@@ -22,7 +22,7 @@ import _ from 'lodash';
 // use react context to keep track of the menu depth (menus in menus)
 const MenuDepthContext = React.createContext(0);
 
-const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, ...props })=>{
+const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, disabled, ...props })=>{
 	const reactId = useId();
 	const safeId = reactId.replace(/[^a-zA-Z0-9_-]/g, '');
 	const menuId = `${_.kebabCase(groupName)}-${safeId}-menu`;
@@ -35,6 +35,21 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 	const triggerRef = useRef(null);
 	const menuRef = useRef(null);
 
+	if(disabled){
+	return (
+		<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
+			<button
+				className={['menu-item', color].filter(Boolean).join(' ')}
+				aria-label={groupName}
+				role='menuitem'
+				disabled
+			>
+				{trigger(groupName, icon)}
+			</button>
+		</li>
+	);
+}
+
 	// use setAttribute instead of the React style prop because React strips unknown CSS
 	// properties (like anchor-name) from inline styles in browsers that don't support them.
 	// setAttribute writes raw CSS text that the anchor positioning polyfill can read
@@ -92,7 +107,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 	};
 
 	return (
-		<li className='menu-wrapper' role='none'>
+		<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
 			<button
 				id={`${menuId}-trigger`}
 				className={['menu-item', color].join(' ')}
diff --git a/client/components/dropdown/dropdown.less b/client/components/dropdown/dropdown.less
index fc00260a2..069627b73 100644
--- a/client/components/dropdown/dropdown.less
+++ b/client/components/dropdown/dropdown.less
@@ -11,6 +11,9 @@
 }
 
 :root { --activeTriggerColor : var(--activeTriggerColor); }
+.menu-wrapper {
+	list-style: none;
+}
 .menu-list {
 	position         : fixed;
 	top              : anchor(bottom);
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index dccfb1b4d..fd239af50 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -1,6 +1,6 @@
 /*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
 import './snippetbar.less';
-import React, { useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import { Dropdown } from '@components/dropdown/dropdown.jsx';
 
 import _ from 'lodash';
@@ -49,7 +49,6 @@ const SnippetBar = ({
 	updateBrew      = ()=>{}
 })=>{
 	const [snippets, setSnippets] = useState([]);
-	const [showHistory, setShowHistory] = useState(false);
 	const [historyExists, setHistoryExists] = useState(false);
 	const [historyItems, setHistoryItems] = useState([]);
 
@@ -139,46 +138,76 @@ const SnippetBar = ({
 		return updateBrew(item);
 	};
 
-	const toggleHistoryMenu = ()=>setShowHistory(!showHistory);
+	const renderHistoryMenu = ()=>{
+		if(!historyExists) return <Dropdown 
+				groupName='History'
+				icon='fas fa-clock-rotate-left'
+				className='history'
+				customTrigger={
+					<>
+						<i className='fas fa-clock-rotate-left' />
+					</>
+				} disabled></Dropdown>;
 
-	const renderHistoryItems = ()=>{
-		if(!historyExists) return;
+		return (
+			<Dropdown
+				groupName='History'
+				icon='fas fa-clock-rotate-left'
+				className='history'
+				customTrigger={
+					<>
+						<i className='fas fa-clock-rotate-left' />
+					</>
+				}
 
-		return <div className='dropdown'>
-			{_.map(historyItems, (item, index)=>{
-				if(item.noData || !item.savedAt) return;
+			>
+				{_.map(historyItems, (item, index)=>{
+					if(item.noData || !item.savedAt) return null;
 
-				const saveTime = new Date(item.savedAt);
-				const diffMs = new Date() - saveTime;
-				const diffSecs = Math.floor(diffMs / 1000);
+					const saveTime = new Date(item.savedAt);
+					const diffMs = new Date() - saveTime;
+					const diffSecs = Math.floor(diffMs / 1000);
 
-				let diffString = `about ${diffSecs} seconds ago`;
+					let diffString = `about ${diffSecs} seconds ago`;
 
-				if(diffSecs > 60) diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
-				if(diffSecs > (60 * 60)) diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
-				if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
-				if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
+					if(diffSecs > 60)
+						diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
+					if(diffSecs > (60 * 60))
+						diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
+					if(diffSecs > (24 * 60 * 60))
+						diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
+					if(diffSecs > (7 * 24 * 60 * 60))
+						diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
 
-				return <div className='snippet' key={index} onClick={()=>{replaceContent(item);}} >
-					<i className={`fas fa-${index+1}`} />
-					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
-				</div>;
-			})}
-		</div>;
+					return (
+						<li key={index} role='none'>
+							<button
+								className='menu-item'
+								onClick={()=>replaceContent(item)}
+								role='menuitem'
+							>
+								<i className={`fas fa-${index + 1}`} />
+								<span
+									className='name'
+									title={saveTime.toISOString()}
+								>
+								v{item.version} : {diffString}
+								</span>
+							</button>
+						</li>
+					);
+				})}
+			</Dropdown>
+		);
 	};
 
-
 	const renderEditorButtons =()=>{
 		if(!showEditButtons) return;
 
 		return (
 			<div className='editors'>
 				{view !== 'meta' && view !== 'settings' && <><div className='historyTools'>
-					<button className={`editorTool snippetGroup history ${historyExists ? 'active' : ''}`}
-						onClick={toggleHistoryMenu} >
-						<i className='fas fa-clock-rotate-left' />
-						{ showHistory && renderHistoryItems() }
-					</button>
+					{renderHistoryMenu()}
 					<button className={`editorTool undo ${historySize.done ? 'active' : ''}`}
 						onClick={undo} >
 						<i className='fas fa-undo' />
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index a9c9c3d25..a5f550b8b 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -25,7 +25,7 @@
 		display         : flex;
 		justify-content : flex-end;
 		min-width       : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-		font-size       : 0.85rem;
+		font-size:0.85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
 		reading-order   : 2;
 
@@ -36,7 +36,7 @@
 
 			&:first-child { border-left : none; }
 
-			& > button {
+			& > button, & > li {
 				position    : relative;
 				width       : @menuHeight;
 				height      : @menuHeight;
@@ -44,7 +44,7 @@
 				text-align  : center;
 				cursor      : pointer;
 
-				&.editorTool:not(.active) { cursor : not-allowed; }
+				&.editorTool:not(.active),&.editorTool:disabled { cursor : not-allowed; }
 
 				&:hover,&.selected { background-color : var(--hoverMenuColor); }
 				&.text {
@@ -85,11 +85,16 @@
 					&.active { color : inherit; }
 				}
 				&.history {
+					font-size:.70rem;
+					
+					i {
+						min-width:auto;
+					}
 					.tooltipLeft('History');
 					position  : relative;
 					color     : grey;
 					border    : none;
-					&.active { color : inherit; }
+					&:not(:disabled) { color : inherit; }
 					& > .dropdown {
 						right : -1px;
 						& > .snippet { padding-right : 10px; }