diff --git a/packages/interface/src/components/layout/TopBar.tsx b/packages/interface/src/components/layout/TopBar.tsx
index 0dd0ec4e1..e0eed7088 100644
--- a/packages/interface/src/components/layout/TopBar.tsx
+++ b/packages/interface/src/components/layout/TopBar.tsx
@@ -117,6 +117,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 				<div className="flex mr-3 space-x-2">
 					<Dropdown
 						// className="absolute block h-6 w-44 top-2 right-4"
+						align="right"
 						items={[
 							[
 								{
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index bcd0ca593..a6320ae34 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/packages/ui/src/Dropdown.tsx
@@ -21,6 +21,7 @@ export interface DropdownProps {
 	className?: string;
 	itemsClassName?: string;
 	itemButtonClassName?: string;
+	align?: 'left' | 'right';
 }
 
 export const Dropdown: React.FC<DropdownProps> = (props) => {
@@ -49,8 +50,10 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
 
 				<Menu.Items
 					className={clsx(
-						'absolute z-50 min-w-[100px] w-full bg-white border divide-y divide-gray-100 rounded-md shadow-xl top-full dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none',
-						props.itemsClassName
+						'absolute z-50 min-w-fit w-full bg-white border divide-y divide-gray-100 rounded shadow-xl top-full dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none',
+						props.itemsClassName,
+						{ 'left-0': props.align === 'left' },
+						{ 'right-0': props.align === 'right' }
 					)}
 				>
 					{props.items.map((item, index) => (
@@ -61,7 +64,7 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
 										<button
 											onClick={button.onPress}
 											className={clsx(
-												'text-sm group flex rounded items-center w-full px-2 py-1 dark:hover:bg-gray-500',
+												'text-sm group flex grow shrink-0 rounded items-center w-full whitespace-nowrap px-2 py-1 mb-[2px] dark:hover:bg-gray-500',
 												{
 													'bg-gray-300 dark:!bg-gray-500 dark:hover:bg-gray-500': button.selected
 													// 'text-gray-900 dark:text-gray-200': !active