diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 4983aa696..d0f2f77e8 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -240,18 +240,23 @@
 	.navDropdownContainer {
 		position : relative;
 		.navDropdown {
-			position   : absolute;
-			top        : 28px;
-			left       : 0px;
-			z-index    : 10000;
-			width      : 100%;
-			max-height : calc(100vh - 28px);
-			overflow   : hidden auto;
+			position: absolute;
+			top: 28px;
+			right: 0px;
+			z-index: 10000;
+			width: max-content;
+			min-width:100%;
+			max-height: calc(100vh - 28px);
+			overflow: hidden auto;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
 			.navItem {
 				position           : relative;
-				display            : block;
+				display            : flex;
+				justify-content    : space-between;
+				align-items        : center;
 				width              : 100%;
-				padding            : 8px 5px;
 				border             : 1px solid #888888;
 				border-bottom      : 0;
 				animation-name     : glideDropDown;
@@ -266,7 +271,8 @@
 				position         : relative;
 				box-sizing       : border-box;
 				display          : block;
-				max-height       : ~'calc(100vh - 28px)';
+				max-width        : 15em;
+				max-height       : ~'calc(100vh - 28px)';			
 				padding          : 8px 5px 13px;
 				overflow         : hidden auto;
 				color            : white;
diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx
index 04b7037dd..beb3d9cc4 100644
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -104,7 +104,7 @@ const Nav = {
 		});
 
 		return (
-			<div className={`navDropdownContainer ${props.className}`}
+			<div className={`navDropdownContainer ${props.className ?? ''}`}
 				ref={myRef}
 				onMouseEnter = { props.trigger.includes('hover') ? ()=>handleDropdown(true)  : undefined }
 				onMouseLeave = { props.trigger.includes('hover') ? ()=>handleDropdown(false) : undefined }