diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 412ea4b5..839ffe40 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -122,7 +122,7 @@ export const InputComponent = (
 	};
 
 	const baseClasses =
-		'bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary w-full outline outline-1 outline-border-subtle border-none';
+		'bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary w-full outline outline-1 outline-border-subtle border-none transition-[color,box-shadow,outline] duration-200';
 	const sizeClasses = {
 		xs: 'px-2 py-1 rounded',
 		sm: 'p-3 py-2 rounded',
diff --git a/src/components/menu-item/menu-item.tsx b/src/components/menu-item/menu-item.tsx
index 79a93a35..c2db755e 100644
--- a/src/components/menu-item/menu-item.tsx
+++ b/src/components/menu-item/menu-item.tsx
@@ -49,7 +49,7 @@ export interface MenuListProps extends BaseMenuProps {
 export const MenuList = ( {
 	heading,
 	arrow = false,
-	showArrowOnHover = true, // Prop to toggle hover-based arrow display
+	showArrowOnHover = false, // Prop to toggle hover-based arrow display
 	open: initialOpen = true,
 	onClick,
 	children,
@@ -93,6 +93,14 @@ export const MenuList = ( {
 		hidden: { opacity: 0 },
 	};
 
+	const getArrowAnimationVariant = () => {
+		if ( ! showArrowOnHover ) {
+			return 'visible';
+		}
+
+		return isOpen || isHovered ? 'visible' : 'hidden';
+	};
+
 	return (
 		<div>
 			<div
@@ -128,7 +136,7 @@ export const MenuList = ( {
 					>
 						<motion.div
 							initial="hidden"
-							animate={ isOpen || isHovered ? 'visible' : 'hidden' }
+							animate={ getArrowAnimationVariant() }
 							exit="hidden"
 							variants={ arrowFadeVariants }
 							transition={ { duration: 0.15 } }